From fd3ec885f9fff6f9bcb2d70c8a61a69d65ca0a05 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 10 Dec 2024 04:50:36 -0500
Subject: [PATCH] [viewport-demp] Parts for zoom buttons, zoom cursors

---
 src/components/viewport-demo/viewport-demo.styles.ts | 10 ++++++++++
 src/components/viewport-demo/viewport-demo.ts        |  8 ++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/viewport-demo/viewport-demo.styles.ts b/src/components/viewport-demo/viewport-demo.styles.ts
index 696bd4066..b983cdae0 100644
--- a/src/components/viewport-demo/viewport-demo.styles.ts
+++ b/src/components/viewport-demo/viewport-demo.styles.ts
@@ -109,4 +109,14 @@ export default css`
       opacity: 80%;
     }
   }
+
+  [part~='zoom-in'],
+  [part~='zoom-in']::part(base) {
+    cursor: zoom-in;
+  }
+
+  [part~='zoom-out'],
+  [part~='zoom-out']::part(base) {
+    cursor: zoom-out;
+  }
 `;
diff --git a/src/components/viewport-demo/viewport-demo.ts b/src/components/viewport-demo/viewport-demo.ts
index fccbc2317..984f40e7b 100644
--- a/src/components/viewport-demo/viewport-demo.ts
+++ b/src/components/viewport-demo/viewport-demo.ts
@@ -291,9 +291,13 @@ export default class WaViewportDemo extends WebAwesomeElement {
         <span part="controls">
           ${dimensions}
           <span class="zoom">
-            <wa-icon-button name="square-minus" variant="regular" @click=${() => this.zoomOut()}>-</wa-icon-button>
+            <wa-icon-button name="square-minus" variant="regular" @click=${() => this.zoomOut()} part="zoom-out button"
+              >-</wa-icon-button
+            >
             <span class="zoom-level"> ${Math.round(this.computedZoom * 100)}%</span>
-            <wa-icon-button name="square-plus" variant="regular" @click=${() => this.zoomIn()}>+</wa-icon-button>
+            <wa-icon-button name="square-plus" variant="regular" @click=${() => this.zoomIn()} part="zoom-in button"
+              >+</wa-icon-button
+            >
           </span>
         </span>
         <slot @slotchange=${this.handleSlotChange}></slot>