scb-wc 0.1.78 → 0.1.80

package/scb-icon-button/scb-icon-button.js

@@ -1,17 +1,39 @@
 import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import { LitElement as t, css as n, html as r, nothing as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
-import "@material/web/icon/icon.js";
 //#region src/scb-components/scb-icon-button/scb-icon-button.ts
-var s = class extends t {
+var s, c;
+function l() {
+	return s ??= import("../shared/lazy-focus-ring.js"), s;
+}
+function u() {
+	return c ??= import("../shared/lazy-ripple.js"), c;
+}
+var d = class extends t {
 	constructor(...e) {
-		super(...e), this.icon = "home", this.ariaLabel = "", this.variant = "standard", this.size = "medium", this.shape = "round", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.href = "", this.target = "", this.rel = "", this.__filledValue = !1, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__lastMdHost = null, this.__onInnerChange = () => {
-			let e = !!this.__getMdHost()?.selected;
-			this.toggle && (this.selected = e), this.dispatchEvent(new CustomEvent("change", {
-				detail: { selected: e },
+		super(...e), this.icon = "home", this.ariaLabel = "", this.variant = "standard", this.size = "medium", this.shape = "round", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.href = "", this.target = "", this.rel = "", this.__filledValue = !1, this.__focusRingReady = !1, this.__focusRingImportRequested = !1, this.__rippleReady = !1, this.__pendingRippleClick = !1, this.__ensureFocusRing = () => {
+			this.__focusRingReady || this.__focusRingImportRequested || (this.__focusRingImportRequested = !0, l().then(({ ensureFocusRingReady: e }) => (e(), customElements.whenDefined("md-focus-ring"))).then(() => {
+				this.__focusRingReady = !0, this.toggleAttribute("data-native-focus-ring-ready", !0), this.requestUpdate(), this.updateComplete.then(() => this.__syncInteractiveState());
+			}));
+		}, this.__onFocusIn = (e) => {
+			let t = e.composedPath()[0];
+			t instanceof HTMLElement && t.matches(":focus-visible") && this.__ensureFocusRing();
+		}, this.__ensureRipple = (e, t = !1) => {
+			this.__rippleReady || this.disabled || (e && (this.__pendingRippleEvent = e), t && (this.__pendingRippleClick = !0), u().then(({ ensureRippleReady: e }) => e()).then(() => {
+				this.disabled || (this.__rippleReady = !0, this.toggleAttribute("data-native-ripple-ready", !0), this.requestUpdate(), this.updateComplete.then(() => this.__replayRippleState()));
+			}));
+		}, this.__onPointerInteraction = (e) => {
+			this.__ensureRipple(e);
+		}, this.__onClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			this.toggle && (this.selected = !this.selected, this.dispatchEvent(new CustomEvent("change", {
+				detail: { selected: this.selected },
 				bubbles: !0,
 				composed: !0
-			}));
+			}))), this.__ensureRipple(void 0, !0);
 		};
 	}
 	get filled() {
@@ -28,57 +50,40 @@ var s = class extends t {
 		let t = !!e, n = this.__filledValue;
 		n !== t && (this.__filledValue = t, this.requestUpdate("iconFilled", n), this.requestUpdate("filled", n));
 	}
-	async firstUpdated() {
-		await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncTitleAndAria(), this.#e();
+	firstUpdated() {
+		this.#e(), this.__syncInteractiveState();
 	}
 	updated(e) {
-		if (super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e(), e.has("variant")) {
-			this.__ensureDepsLoaded().then(() => {
-				queueMicrotask(() => {
-					this.__attachChangeListener(), this.__syncTitleAndAria();
-				});
-			});
+		super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e(), (this.__focusRingReady || this.__rippleReady) && this.updateComplete.then(() => this.__syncInteractiveState());
+	}
+	focus(e) {
+		let t = this.__getNativeControl();
+		if (t) {
+			t.focus(e);
 			return;
 		}
-		(e.has("toggle") || e.has("icon") || e.has("toggleofficon") || e.has("toggleonicon") || e.has("selected") || e.has("disabled") || e.has("ariaLabel")) && queueMicrotask(() => {
-			this.__attachChangeListener(), this.__syncTitleAndAria();
-		});
+		super.focus(e);
 	}
-	disconnectedCallback() {
-		this.__lastMdHost?.removeEventListener?.("change", this.__onInnerChange), this.__lastMdHost = null, super.disconnectedCallback();
+	__getNativeControl() {
+		return this.renderRoot.querySelector(".native-icon-button");
 	}
-	async __ensureDepsLoaded() {
-		if (!this.__loadedVariants.has(this.variant)) {
-			switch (this.variant) {
-				case "filled":
-					await import("@material/web/iconbutton/filled-icon-button.js");
-					break;
-				case "outlined":
-					await import("@material/web/iconbutton/outlined-icon-button.js");
-					break;
-				case "filled-tonal":
-					await import("@material/web/iconbutton/filled-tonal-icon-button.js");
-					break;
-				default:
-					await import("@material/web/iconbutton/icon-button.js");
-					break;
-			}
-			this.__loadedVariants.add(this.variant);
-		}
-		this.__iconLoaded ||= (await import("@material/web/icon/icon.js"), !0);
+	__syncInteractiveState() {
+		let e = this.__getNativeControl(), t = this.renderRoot.querySelector("md-focus-ring");
+		t && e && (t.control = e, t.visible = e.matches(":focus-visible"));
+		let n = this.renderRoot.querySelector("md-ripple");
+		n && e && (n.control = e);
 	}
-	__getMdHost() {
-		return this.renderRoot.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button");
+	async __replayRippleState() {
+		let e = this.renderRoot.querySelector("md-ripple"), t = this.__getNativeControl(), n = this.__pendingRippleEvent, r = this.__pendingRippleClick;
+		this.__pendingRippleEvent = void 0, this.__pendingRippleClick = !1;
+		let { syncRippleToControl: i } = await u();
+		await i(e, t, n, r), this.__syncInteractiveState();
 	}
-	__attachChangeListener() {
-		let e = this.__getMdHost();
-		e && e !== this.__lastMdHost && (this.__lastMdHost?.removeEventListener?.("change", this.__onInnerChange), e.addEventListener("change", this.__onInnerChange), this.__lastMdHost = e), this.toggle && e && "selected" in e && (e.selected = this.selected);
+	__effectiveLabel() {
+		return (this.ariaLabel || this.getAttribute("aria-label") || "").trim() || this.__currentIcon() || i;
 	}
-	__syncTitleAndAria() {
-		let e = this.__getMdHost();
-		if (!e) return;
-		let t = (this.getAttribute("title") || "").trim(), n = (this.ariaLabel || this.getAttribute("aria-label") || "").trim(), r = this.getAttribute("aria-controls"), i = this.getAttribute("aria-expanded"), a = n || t || this.icon.trim() || void 0;
-		a ? e.setAttribute("aria-label", a) : e.removeAttribute("aria-label"), r === null ? e.removeAttribute("aria-controls") : e.setAttribute("aria-controls", r), i === null ? e.removeAttribute("aria-expanded") : e.setAttribute("aria-expanded", i);
+	__currentIcon() {
+		return this.toggle ? this.selected ? this.toggleonicon : this.toggleofficon : this.icon;
 	}
 	mapSpacingToken(e) {
 		if (!e) return;
@@ -99,48 +104,41 @@ var s = class extends t {
       margin-inline-end: var(--scb-icon-button-spacing-inline-end, 0);
       --scb-icon-button-font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
       --scb-icon-button-shape-radius: var(--radius-full, 1000px);
-
-      --scb-icon-button-shape-square-radius: var(--radius-m, 12px);
-      --scb-icon-button-shape-square-radius-large: var(--radius-l, 16px);
-
       --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
-      --scb-icon-button-padding: var(--spacing-3, 12px);
-      --scb-icon-button-container-size: calc(
-        var(--scb-icon-button-icon-size) + (var(--scb-icon-button-padding) * 2)
-      );
+      --scb-icon-button-container-size: 40px;
     }
 
-    :host([size="tiny"]) {
+    :host([size='tiny']) {
       --scb-icon-button-icon-size: var(--icon-size-tiny, 12px);
-      --scb-icon-button-padding: var(--spacing-1, 4px);
+      --scb-icon-button-container-size: 16px;
     }
 
-    :host([size="extra-small"]) {
+    :host([size='extra-small']) {
       --scb-icon-button-icon-size: var(--icon-size-extra-small, 16px);
-      --scb-icon-button-padding: var(--spacing-2, 8px);
+      --scb-icon-button-container-size: 24px;
     }
 
-    :host([size="small"]) {
+    :host([size='small']) {
       --scb-icon-button-icon-size: var(--icon-size-small, 20px);
-      --scb-icon-button-padding: calc(var(--spacing-3, 12px) - var(--spacing-1, 4px));
+      --scb-icon-button-container-size: 32px;
     }
 
-    :host([size="medium"]) {
+    :host([size='medium']) {
       --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
-      --scb-icon-button-padding: var(--spacing-3, 12px);
+      --scb-icon-button-container-size: 40px;
     }
 
-    :host([size="large"]) {
+    :host([size='large']) {
       --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
-      --scb-icon-button-padding: var(--spacing-5, 20px);
+      --scb-icon-button-container-size: 56px;
     }
 
-    :host([shape="square"]) {
-      --scb-icon-button-shape-radius: var(--scb-icon-button-shape-square-radius);
+    :host([shape='square']) {
+      --scb-icon-button-shape-radius: var(--radius-m, 12px);
     }
 
-    :host([shape="square"][size="large"]) {
-      --scb-icon-button-shape-radius: var(--scb-icon-button-shape-square-radius-large);
+    :host([shape='square'][size='large']) {
+      --scb-icon-button-shape-radius: var(--radius-l, 16px);
     }
 
     :host([filled]),
@@ -148,188 +146,278 @@ var s = class extends t {
       --scb-icon-button-font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
     }
 
-    md-icon {
-      --md-icon-size: var(--scb-icon-button-icon-size);
-      font-size: var(--scb-icon-button-icon-size) !important;
-      --md-icon-font-variation-settings: var(--scb-icon-button-font-variation-settings) !important;
-      font-variation-settings: var(--scb-icon-button-font-variation-settings) !important;
+    .native-icon-button-wrap {
+      position: relative;
+      display: inline-flex;
+      inline-size: var(--scb-icon-button-container-size);
+      block-size: var(--scb-icon-button-container-size);
+      border-radius: var(--scb-icon-button-shape-radius);
+    }
+
+    .native-icon-button {
+      position: relative;
+      z-index: 0;
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 100%;
+      block-size: 100%;
+      min-inline-size: 0;
+      min-block-size: 0;
+      padding: 0;
+      overflow: hidden;
+      border: 0;
+      border-radius: inherit;
+      background: transparent;
+      color: var(
+        --md-icon-button-icon-color,
+        var(--md-sys-color-on-surface-variant, var(--p-20, #0f0865))
+      );
+      cursor: pointer;
+      text-decoration: none;
+      appearance: none;
+      -webkit-appearance: none;
+      touch-action: manipulation;
+    }
+
+    .native-icon-button::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      background: currentColor;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--motion-duration-short, 150ms) var(--motion-easing-standard, ease);
+    }
+
+    :host(:not([data-native-ripple-ready])) .native-icon-button:hover::before {
+      opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+    }
+
+    :host(:not([data-native-ripple-ready])) .native-icon-button:active::before {
+      opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+    }
+
+    .native-icon-button:focus {
+      outline: none;
+    }
+
+    :host(:not([data-native-focus-ring-ready])) .native-icon-button:focus-visible {
+      outline: var(--stroke-border-m, 2px) solid var(--md-focus-ring-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));
+      outline-offset: var(--spacing-1, 2px);
+    }
+
+    .native-icon {
+      flex: 0 0 auto;
+      display: inline-block;
+      inline-size: var(--scb-icon-button-icon-size);
+      block-size: var(--scb-icon-button-icon-size);
+      overflow: hidden;
+      font-family: 'Material Symbols Outlined';
+      font-size: var(--scb-icon-button-icon-size);
+      line-height: 1;
+      text-align: center;
+      white-space: nowrap;
+      text-transform: none;
+      word-wrap: normal;
+      direction: ltr;
+      font-feature-settings: 'liga' 1;
+      font-variation-settings: var(--scb-icon-button-font-variation-settings);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    :host([variant='filled']) .native-icon-button {
+      background: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));
+      color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #ffffff));
+    }
+
+    :host([variant='filled-tonal']) .native-icon-button {
+      background: var(
+        --md-filled-tonal-icon-button-container-color,
+        var(--md-sys-color-secondary-container, var(--p-90, #d6f1ff))
+      );
+      color: var(
+        --md-filled-tonal-icon-button-icon-color,
+        var(--md-sys-color-on-secondary-container, var(--p-30, #1e00be))
+      );
+    }
+
+    :host([variant='outlined']) .native-icon-button {
+      color: var(
+        --md-outlined-icon-button-icon-color,
+        var(--md-sys-color-on-surface-variant, var(--p-20, #0f0865))
+      );
+      box-shadow: inset 0 0 0 var(--stroke-border, 1px)
+        var(--md-outlined-icon-button-outline-color, var(--md-sys-color-outline, var(--p-20, #0f0865)));
     }
 
-    md-icon-button {
-      --md-icon-button-icon-size: var(--scb-icon-button-icon-size);
-      --md-icon-button-container-size: var(--scb-icon-button-container-size);
-      --md-icon-button-state-layer-size: var(--scb-icon-button-container-size);
-      --md-icon-button-container-width: var(--scb-icon-button-container-size);
-      --md-icon-button-container-height: var(--scb-icon-button-container-size);
-      --md-icon-button-state-layer-width: var(--scb-icon-button-container-size);
-      --md-icon-button-state-layer-height: var(--scb-icon-button-container-size);
-      --md-icon-button-container-shape: var(--scb-icon-button-shape-radius);
-      border-radius: var(--scb-icon-button-shape-radius) !important;
+    :host([toggle][selected]) .native-icon-button {
+      color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));
     }
 
-    md-filled-icon-button {
-      --md-filled-icon-button-icon-size: var(--scb-icon-button-icon-size);
-      --md-filled-icon-button-container-width: var(--scb-icon-button-container-size);
-      --md-filled-icon-button-container-height: var(--scb-icon-button-container-size);
+    :host([variant='filled'][toggle][selected]) .native-icon-button {
+      background: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));
+      color: var(--md-filled-icon-button-selected-icon-color, var(--md-sys-color-on-primary, #ffffff));
+    }
+
+    :host([variant='filled-tonal'][toggle][selected]) .native-icon-button {
+      background: var(
+        --md-filled-tonal-icon-button-selected-container-color,
+        var(--md-sys-color-secondary-container, var(--p-90, #d6f1ff))
+      );
+      color: var(
+        --md-filled-tonal-icon-button-selected-icon-color,
+        var(--md-sys-color-on-secondary-container, var(--p-30, #1e00be))
+      );
     }
 
-    md-filled-tonal-icon-button {
-      --md-filled-tonal-icon-button-icon-size: var(--scb-icon-button-icon-size);
-      --md-filled-tonal-icon-button-container-width: var(--scb-icon-button-container-size);
-      --md-filled-tonal-icon-button-container-height: var(--scb-icon-button-container-size);
+    :host([variant='outlined'][toggle][selected]) .native-icon-button {
+      color: var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-primary, var(--p-40, #1f44ff)));
+      box-shadow: inset 0 0 0 var(--stroke-border, 1px)
+        var(--md-outlined-icon-button-selected-outline-color, var(--md-sys-color-outline, var(--p-20, #0f0865)));
     }
 
-    md-outlined-icon-button {
-      --md-outlined-icon-button-icon-size: var(--scb-icon-button-icon-size);
-      --md-outlined-icon-button-container-width: var(--scb-icon-button-container-size);
-      --md-outlined-icon-button-container-height: var(--scb-icon-button-container-size);
+    .native-icon-button[aria-disabled='true'],
+    .native-icon-button:disabled {
+      color: var(--md-icon-button-disabled-icon-color, rgb(15 8 101 / 38%));
+      cursor: default;
+      pointer-events: none;
     }
 
-    md-icon-button,
-    md-filled-icon-button,
-    md-outlined-icon-button,
-    md-filled-tonal-icon-button {
-      --md-icon-button-container-shape: var(--scb-icon-button-shape-radius);
-      --md-filled-icon-button-container-shape: var(--scb-icon-button-shape-radius);
-      --md-outlined-icon-button-container-shape: var(--scb-icon-button-shape-radius);
-      --md-filled-tonal-icon-button-container-shape: var(--scb-icon-button-shape-radius);
-      --md-icon-font-variation-settings: var(--scb-icon-button-font-variation-settings);
-      border-radius: var(--scb-icon-button-shape-radius) !important;
+    :host([variant='filled']) .native-icon-button[aria-disabled='true'],
+    :host([variant='filled']) .native-icon-button:disabled,
+    :host([variant='filled-tonal']) .native-icon-button[aria-disabled='true'],
+    :host([variant='filled-tonal']) .native-icon-button:disabled {
+      background: var(--md-filled-icon-button-disabled-container-color, rgb(15 8 101 / 12%));
+      color: var(--md-filled-icon-button-disabled-icon-color, rgb(15 8 101 / 38%));
     }
 
-    md-icon-button::part(button),
-    md-filled-icon-button::part(button),
-    md-outlined-icon-button::part(button),
-    md-filled-tonal-icon-button::part(button) {
-      border-radius: var(--scb-icon-button-shape-radius) !important;
+    :host([variant='outlined']) .native-icon-button[aria-disabled='true'],
+    :host([variant='outlined']) .native-icon-button:disabled {
+      color: var(--md-outlined-icon-button-disabled-icon-color, rgb(15 8 101 / 38%));
+      box-shadow: inset 0 0 0 var(--stroke-border, 1px)
+        var(--md-outlined-icon-button-disabled-outline-color, rgb(15 8 101 / 12%));
     }
-`;
+
+    .native-icon-button-wrap md-ripple {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      --md-ripple-hover-color: var(--scb-icon-button-state-layer-color, currentColor);
+      --md-ripple-pressed-color: var(--scb-icon-button-state-layer-color, currentColor);
+    }
+
+    .native-icon-button-wrap md-focus-ring {
+      pointer-events: none;
+      border-radius: inherit;
+    }
+  `;
 	}
-	__renderToggleIcons() {
-		return r`
-      <md-icon ?filled=${this.iconFilled || this.filled} aria-hidden="true">${this.toggleofficon}</md-icon>
-      <md-icon ?filled=${this.iconFilled || this.filled} slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
+	__renderControl(e) {
+		let t = this.__effectiveLabel(), n = this.getAttribute("aria-controls") ?? i, a = this.getAttribute("aria-expanded") ?? i, o = this.toggle ? String(this.selected) : i, s = this.getAttribute("title") ?? i;
+		return this.href ? r`
+        <a
+          class="native-icon-button"
+          part="button"
+          href=${this.disabled ? i : this.href}
+          target=${this.target || i}
+          rel=${this.rel || i}
+          title=${s}
+          aria-label=${t}
+          aria-controls=${n}
+          aria-expanded=${a}
+          aria-pressed=${o}
+          aria-disabled=${this.disabled ? "true" : i}
+          tabindex=${this.disabled ? "-1" : i}
+          @click=${this.__onClick}
+          @focusin=${this.__onFocusIn}
+          @pointerenter=${this.__onPointerInteraction}
+          @pointerdown=${this.__onPointerInteraction}
+        >
+          ${e}
+        </a>
+      ` : r`
+      <button
+        class="native-icon-button"
+        part="button"
+        type="button"
+        title=${s}
+        ?disabled=${this.disabled}
+        aria-label=${t}
+        aria-controls=${n}
+        aria-expanded=${a}
+        aria-pressed=${o}
+        @click=${this.__onClick}
+        @focusin=${this.__onFocusIn}
+        @pointerenter=${this.__onPointerInteraction}
+        @pointerdown=${this.__onPointerInteraction}
+      >
+        ${e}
+      </button>
     `;
 	}
-	__renderSingleIcon() {
-		return r`<md-icon ?filled=${this.iconFilled || this.filled} aria-hidden="true">${this.icon}</md-icon>`;
-	}
-	__renderMd() {
-		let e = this.toggle ? this.__renderToggleIcons() : this.__renderSingleIcon();
-		if (this.toggle) switch (this.variant) {
-			case "filled": return r`
-            <md-filled-icon-button
-              toggle
-              ?selected=${this.selected}
-              ?disabled=${this.disabled}
-              href=${this.href || i}
-              target=${this.target || i}
-              rel=${this.rel || i}
-            >
-              ${e}
-            </md-filled-icon-button>
-          `;
-			case "outlined": return r`
-            <md-outlined-icon-button
-              toggle
-              ?selected=${this.selected}
-              ?disabled=${this.disabled}
-              href=${this.href || i}
-              target=${this.target || i}
-              rel=${this.rel || i}
-            >
-              ${e}
-            </md-outlined-icon-button>
-          `;
-			case "filled-tonal": return r`
-            <md-filled-tonal-icon-button
-              toggle
-              ?selected=${this.selected}
-              ?disabled=${this.disabled}
-              href=${this.href || i}
-              target=${this.target || i}
-              rel=${this.rel || i}
-            >
-              ${e}
-            </md-filled-tonal-icon-button>
-          `;
-			default: return r`
-            <md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled} href=${this.href || i} target=${this.target || i} rel=${this.rel || i}>
-              ${e}
-            </md-icon-button>
-          `;
-		}
-		switch (this.variant) {
-			case "filled": return r`
-          <md-filled-icon-button ?disabled=${this.disabled} href=${this.href || i} target=${this.target || i} rel=${this.rel || i}>
-            ${e}
-          </md-filled-icon-button>
-        `;
-			case "outlined": return r`
-          <md-outlined-icon-button ?disabled=${this.disabled} href=${this.href || i} target=${this.target || i} rel=${this.rel || i}>
-            ${e}
-          </md-outlined-icon-button>
-        `;
-			case "filled-tonal": return r`
-          <md-filled-tonal-icon-button ?disabled=${this.disabled} href=${this.href || i} target=${this.target || i} rel=${this.rel || i}>
-            ${e}
-          </md-filled-tonal-icon-button>
-        `;
-			default: return r`
-          <md-icon-button ?disabled=${this.disabled} href=${this.href || i} target=${this.target || i} rel=${this.rel || i}>
-            ${e}
-          </md-icon-button>
-        `;
-		}
-	}
 	render() {
-		return this.__renderMd();
+		let e = r`<span class="native-icon" part="icon" aria-hidden="true">${this.__currentIcon()}</span>`;
+		return r`
+      <span class="native-icon-button-wrap">
+        ${this.__renderControl(e)}
+        ${this.__rippleReady ? r`<md-ripple aria-hidden="true"></md-ripple>` : i}
+        ${this.__focusRingReady ? r`<md-focus-ring aria-hidden="true"></md-focus-ring>` : i}
+      </span>
+    `;
 	}
 };
-e([o({ type: String })], s.prototype, "icon", void 0), e([o({
+e([o({ type: String })], d.prototype, "icon", void 0), e([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "filled", null), e([o({
+})], d.prototype, "filled", null), e([o({
 	type: Boolean,
 	attribute: "icon-filled",
 	reflect: !0
-})], s.prototype, "iconFilled", null), e([o({
+})], d.prototype, "iconFilled", null), e([o({
 	type: String,
 	attribute: "aria-label"
-})], s.prototype, "ariaLabel", void 0), e([o({ type: String })], s.prototype, "variant", void 0), e([o({
+})], d.prototype, "ariaLabel", void 0), e([o({
+	type: String,
+	reflect: !0
+})], d.prototype, "variant", void 0), e([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "size", void 0), e([o({
+})], d.prototype, "size", void 0), e([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "shape", void 0), e([o({
+})], d.prototype, "shape", void 0), e([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "toggle", void 0), e([o({
+})], d.prototype, "toggle", void 0), e([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "selected", void 0), e([o({ type: String })], s.prototype, "toggleofficon", void 0), e([o({ type: String })], s.prototype, "toggleonicon", void 0), e([o({
+})], d.prototype, "selected", void 0), e([o({ type: String })], d.prototype, "toggleofficon", void 0), e([o({ type: String })], d.prototype, "toggleonicon", void 0), e([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "disabled", void 0), e([o({
+})], d.prototype, "disabled", void 0), e([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "spacing", void 0), e([o({
+})], d.prototype, "spacing", void 0), e([o({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], s.prototype, "spacingTop", void 0), e([o({
+})], d.prototype, "spacingTop", void 0), e([o({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], s.prototype, "spacingBottom", void 0), e([o({
+})], d.prototype, "spacingBottom", void 0), e([o({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], s.prototype, "spacingLeft", void 0), e([o({
+})], d.prototype, "spacingLeft", void 0), e([o({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], s.prototype, "spacingRight", void 0), e([o({ type: String })], s.prototype, "href", void 0), e([o({ type: String })], s.prototype, "target", void 0), e([o({ type: String })], s.prototype, "rel", void 0), s = e([a("scb-icon-button")], s);
+})], d.prototype, "spacingRight", void 0), e([o({ type: String })], d.prototype, "href", void 0), e([o({ type: String })], d.prototype, "target", void 0), e([o({ type: String })], d.prototype, "rel", void 0), d = e([a("scb-icon-button")], d);
 //#endregion
-export { s as ScbIconButton };
+export { d as ScbIconButton };