scb-wc 0.1.78 → 0.1.80

package/scb-button/scb-button.js

@@ -1,46 +1,65 @@
 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";
-import "@material/web/button/filled-button.js";
-import "@material/web/button/outlined-button.js";
-import "@material/web/button/filled-tonal-button.js";
-import "@material/web/button/text-button.js";
 //#region src/scb-components/scb-button/scb-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.variant = "filled", this.size = "medium", this.type = "button", this.label = "Button", this.trailingIcon = !1, this.icon = "", this.iconFilled = !1, this.disabled = !1, this.fullWidth = !1, this.href = "", this.target = "", this.rel = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__hasDefaultSlotContent = !1;
-	}
-	__getMdHost() {
-		return this.renderRoot.querySelector("md-filled-button, md-outlined-button, md-filled-tonal-button, md-text-button");
+		super(...e), this.variant = "filled", this.size = "medium", this.type = "button", this.label = "Button", this.trailingIcon = !1, this.icon = "", this.iconFilled = !1, this.disabled = !1, this.fullWidth = !1, this.href = "", this.target = "", this.rel = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__hasDefaultSlotContent = !1, this.__nativeFocusRingReady = !1, this.__nativeRippleReady = !1, this.__nativeRipplePendingClick = !1, this.__ensureNativeFocusRing = () => {
+			this.__nativeFocusRingReady || l().then(({ ensureFocusRingReady: e }) => (e(), customElements.whenDefined("md-focus-ring"))).then(() => {
+				this.__nativeFocusRingReady = !0, this.toggleAttribute("data-native-focus-ring-ready", !0), this.requestUpdate(), this.updateComplete.then(() => this.__syncNativeFocusRingControl());
+			});
+		}, this.__onNativeFocusIn = (e) => {
+			let t = e.composedPath()[0];
+			t instanceof HTMLElement && t.matches(":focus-visible") && this.__ensureNativeFocusRing();
+		}, this.__ensureNativeRipple = (e) => {
+			this.__nativeRippleReady || this.disabled || (e && (this.__nativeRipplePendingPointerEvent = e), u().then(({ ensureRippleReady: e }) => e()).then(() => {
+				this.disabled || (this.__nativeRippleReady = !0, this.requestUpdate(), this.updateComplete.then(() => {
+					this.__syncNativeFocusRingControl(), this.__replayNativeRippleState();
+				}));
+			}));
+		}, this.__onNativePointerWarmup = (e) => {
+			this.__ensureNativeRipple(e);
+		}, this.__onNativeClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			(!this.__nativeRippleReady || this.__nativeRipplePendingPointerEvent) && (this.__nativeRipplePendingClick = !0, this.__ensureNativeRipple());
+		};
 	}
-	__getInnerNativeButton(e) {
-		return e?.shadowRoot?.querySelector("button") ?? null;
+	__getNativeControl() {
+		return this.renderRoot.querySelector(".native-button");
 	}
 	__handleDefaultSlotChange(e) {
 		let t = e.target.assignedNodes({ flatten: !0 }).some((e) => e.nodeType === Node.TEXT_NODE ? !!e.textContent?.trim() : e.nodeType === Node.ELEMENT_NODE);
 		this.__hasDefaultSlotContent !== t && (this.__hasDefaultSlotContent = t, this.requestUpdate()), this.updateComplete.then(() => this.__syncAriaToInner());
 	}
 	__syncAriaToInner() {
-		let e = this.__getMdHost(), t = this.__getInnerNativeButton(e);
-		if (!e || !t) return;
-		let n = (this.getAttribute("aria-label") || "").trim(), r = (e.getAttribute("aria-label") || "").trim(), i = this.label.trim() === "" && !this.__hasDefaultSlotContent ? (this.icon || "").trim() : "", a = n || r || i;
-		a ? t.setAttribute("aria-label", a) : t.removeAttribute("aria-label");
-		let o = this.getAttribute("aria-controls");
-		o === null ? t.removeAttribute("aria-controls") : t.setAttribute("aria-controls", o);
-		let s = this.getAttribute("aria-expanded");
-		s === null ? t.removeAttribute("aria-expanded") : t.setAttribute("aria-expanded", s), e.removeAttribute("aria-label"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-expanded"), this.removeAttribute("aria-expanded"), this.__ariaObserver?.disconnect(), this.__ariaObserver = new MutationObserver((e) => {
-			let t = this.__getMdHost(), n = this.__getInnerNativeButton(t);
-			if (!(!t || !n)) {
-				for (let r of e) {
-					if (r.type !== "attributes" || !r.attributeName) continue;
-					let e = r.attributeName, i = this.getAttribute(e);
-					if (e === "aria-label") {
-						let e = (t.getAttribute("aria-label") || "").trim(), r = (i || e || (this.label.trim() === "" && !this.__hasDefaultSlotContent ? (this.icon || "").trim() : "")).trim();
-						r ? n.setAttribute("aria-label", r) : n.removeAttribute("aria-label"), t.removeAttribute("aria-label");
-					} else (e === "aria-controls" || e === "aria-expanded") && (i === null ? n.removeAttribute(e) : n.setAttribute(e, i), e === "aria-expanded" && this.removeAttribute("aria-expanded"));
-				}
-				t.removeAttribute("aria-label"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded");
+		let e = this.__getNativeControl();
+		e && this.__syncAriaToControl(e);
+	}
+	__syncAriaToControl(e) {
+		let t = (this.getAttribute("aria-label") || "").trim(), n = this.label.trim() === "" && !this.__hasDefaultSlotContent ? (this.icon || "").trim() : "", r = t || n;
+		r ? e.setAttribute("aria-label", r) : e.removeAttribute("aria-label");
+		let i = this.getAttribute("aria-controls");
+		i === null ? e.removeAttribute("aria-controls") : e.setAttribute("aria-controls", i);
+		let a = this.getAttribute("aria-expanded");
+		a === null ? e.removeAttribute("aria-expanded") : e.setAttribute("aria-expanded", a), this.removeAttribute("aria-expanded"), this.__ariaObserver?.disconnect(), this.__ariaObserver = new MutationObserver((e) => {
+			let t = this.__getNativeControl();
+			if (t) for (let n of e) {
+				if (n.type !== "attributes" || !n.attributeName) continue;
+				let e = n.attributeName, r = this.getAttribute(e);
+				if (e === "aria-label") {
+					let e = (r || (this.label.trim() === "" && !this.__hasDefaultSlotContent ? (this.icon || "").trim() : "")).trim();
+					e ? t.setAttribute("aria-label", e) : t.removeAttribute("aria-label");
+				} else (e === "aria-controls" || e === "aria-expanded") && (r === null ? t.removeAttribute(e) : t.setAttribute(e, r), e === "aria-expanded" && this.removeAttribute("aria-expanded"));
 			}
 		}), this.__ariaObserver.observe(this, {
 			attributes: !0,
@@ -51,20 +70,35 @@ var s = class extends t {
 			]
 		});
 	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
 	firstUpdated() {
 		(this.type === "submit" || this.type === "reset") && this.addEventListener("click", () => {
 			if (!this.disabled) {
 				let e = this.closest("form");
 				e && (this.type === "submit" && e.requestSubmit(), this.type === "reset" && e.reset());
 			}
-		}), this.__syncAriaToInner(), this.#e();
+		}), this.#e();
 	}
 	updated(e) {
-		(e.has("variant") || e.has("label") || e.has("icon")) && this.__syncAriaToInner(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
+		(e.has("variant") || e.has("label") || e.has("icon") || e.has("href")) && this.updateComplete.then(() => this.__syncAriaToInner()), (this.__nativeFocusRingReady || this.__nativeRippleReady) && this.updateComplete.then(() => this.__syncNativeFocusRingControl()), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e();
 	}
 	disconnectedCallback() {
 		this.__ariaObserver?.disconnect(), super.disconnectedCallback();
 	}
+	__syncNativeFocusRingControl() {
+		let e = this.renderRoot.querySelector("md-focus-ring"), t = this.__getNativeControl();
+		e && t && (e.control = t, e.visible = t.matches(":focus-visible"));
+		let n = this.renderRoot.querySelector("md-ripple");
+		n && t && (n.control = t);
+	}
+	async __replayNativeRippleState() {
+		let e = this.renderRoot.querySelector("md-ripple"), t = this.__getNativeControl(), n = this.__nativeRipplePendingPointerEvent, r = this.__nativeRipplePendingClick;
+		this.__nativeRipplePendingPointerEvent = void 0, this.__nativeRipplePendingClick = !1;
+		let { syncRippleToControl: i } = await u();
+		await i(e, t, n, r);
+	}
 	mapSpacingToken(e) {
 		if (!e) return;
 		let t = String(e).trim();
@@ -96,68 +130,6 @@ var s = class extends t {
         --scb-button-icon-edge-space: var(--spacing-5);
         --scb-button-icon-gap: var(--spacing-3);
         --scb-button-icon-size: var(--icon-size-small, 20px);
-
-        /* Label, mappar till md-sys-typescale-label-small */
-        --md-filled-button-label-text-font: var(--md-sys-typescale-label-small-font);
-        --md-filled-button-label-text-size: var(--md-sys-typescale-label-small-size);
-        --md-filled-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
-        --md-filled-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
-        --md-filled-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
-
-        --md-outlined-button-label-text-font: var(--md-sys-typescale-label-small-font);
-        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-small-size);
-        --md-outlined-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
-        --md-outlined-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
-        --md-outlined-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
-
-        --md-filled-tonal-button-label-text-font: var(--md-sys-typescale-label-small-font);
-        --md-filled-tonal-button-label-text-size: var(--md-sys-typescale-label-small-size);
-        --md-filled-tonal-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
-        --md-filled-tonal-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
-        --md-filled-tonal-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
-
-        --md-text-button-label-text-font: var(--md-sys-typescale-label-small-font);
-        --md-text-button-label-text-size: var(--md-sys-typescale-label-small-size);
-        --md-text-button-label-text-line-height: var(--md-sys-typescale-label-small-line-height);
-        --md-text-button-label-text-tracking: var(--md-sys-typescale-label-small-tracking);
-        --md-text-button-label-text-weight: var(--md-sys-typescale-label-small-weight);
-
-        /* Grundpadding (utan ikon) */
-        --md-filled-button-leading-space: var(--scb-button-padding-inline);
-        --md-filled-button-trailing-space: var(--scb-button-padding-inline);
-        --md-outlined-button-leading-space: var(--scb-button-padding-inline);
-        --md-outlined-button-trailing-space: var(--scb-button-padding-inline);
-        --md-filled-tonal-button-leading-space: var(--scb-button-padding-inline);
-        --md-filled-tonal-button-trailing-space: var(--scb-button-padding-inline);
-        --md-text-button-leading-space: var(--scb-button-padding-inline);
-        --md-text-button-trailing-space: var(--scb-button-padding-inline);
-
-        /* Med ikon: avstånd till ytterkanter + mellan ikon och label */
-        --md-filled-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
-        --md-filled-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
-        --md-filled-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
-        --md-filled-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
-
-        --md-outlined-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
-        --md-outlined-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
-        --md-outlined-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
-        --md-outlined-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
-
-        --md-filled-tonal-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
-        --md-filled-tonal-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
-        --md-filled-tonal-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
-        --md-filled-tonal-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
-
-        --md-text-button-with-leading-icon-leading-space: var(--scb-button-icon-edge-space);
-        --md-text-button-with-leading-icon-trailing-space: var(--scb-button-padding-inline);
-        --md-text-button-with-trailing-icon-leading-space: var(--scb-button-padding-inline);
-        --md-text-button-with-trailing-icon-trailing-space: var(--scb-button-icon-edge-space);
-
-        /* Ikonstorlek */
-        --md-filled-button-icon-size: var(--scb-button-icon-size);
-        --md-outlined-button-icon-size: var(--scb-button-icon-size);
-        --md-filled-tonal-button-icon-size: var(--scb-button-icon-size);
-        --md-text-button-icon-size: var(--scb-button-icon-size);
       }
 
       :host([size='small']) {
@@ -176,233 +148,289 @@ var s = class extends t {
         --scb-button-icon-edge-space: var(--spacing-7);
         --scb-button-icon-gap: var(--spacing-3);
         --scb-button-icon-size: var(--icon-size-medium, 24px);
+      }
 
-        /* Label, mappar till md-sys-typescale-label-medium */
-        --md-filled-button-label-text-font: var(--md-sys-typescale-label-medium-font);
-        --md-filled-button-label-text-size: var(--md-sys-typescale-label-medium-size);
-        --md-filled-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
-        --md-filled-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
-        --md-filled-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+      :host([icon-filled]) {
+        --scb-button-font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      }
 
-        --md-outlined-button-label-text-font: var(--md-sys-typescale-label-medium-font);
-        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-medium-size);
-        --md-outlined-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
-        --md-outlined-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
-        --md-outlined-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+      .native-button-wrap {
+        position: relative;
+        display: inline-flex;
+        border-radius: var(--md-sys-shape-corner-full, 999px);
+      }
 
-        --md-filled-tonal-button-label-text-font: var(--md-sys-typescale-label-medium-font);
-        --md-filled-tonal-button-label-text-size: var(--md-sys-typescale-label-medium-size);
-        --md-filled-tonal-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
-        --md-filled-tonal-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
-        --md-filled-tonal-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+      .native-button {
+        position: relative;
+        z-index: 0;
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--scb-button-icon-gap);
+        min-block-size: var(--scb-button-block-size, var(--scb-button-container-height));
+        block-size: var(--scb-button-block-size, var(--scb-button-container-height));
+        min-inline-size: 64px;
+        inline-size: auto;
+        padding-block: var(--scb-button-padding-block);
+        padding-inline: var(--scb-button-padding-inline);
+        overflow: hidden;
+        border: 0;
+        border-radius: inherit;
+        background: transparent;
+        color: var(--md-sys-color-primary);
+        font-family: var(--md-sys-typescale-label-small-font);
+        font-size: var(--md-sys-typescale-label-small-size);
+        font-weight: var(--md-sys-typescale-label-small-weight);
+        line-height: var(--md-sys-typescale-label-small-line-height);
+        letter-spacing: normal;
+        text-align: center;
+        text-decoration: none;
+        white-space: nowrap;
+        cursor: pointer;
+        appearance: none;
+        -webkit-appearance: none;
+        touch-action: manipulation;
+      }
 
-        --md-text-button-label-text-font: var(--md-sys-typescale-label-medium-font);
-        --md-text-button-label-text-size: var(--md-sys-typescale-label-medium-size);
-        --md-text-button-label-text-line-height: var(--md-sys-typescale-label-medium-line-height);
-        --md-text-button-label-text-tracking: var(--md-sys-typescale-label-medium-tracking);
-        --md-text-button-label-text-weight: var(--md-sys-typescale-label-medium-weight);
+      .native-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([icon-filled]) {
-        --scb-button-font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      .native-button:hover::before {
+        opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
       }
 
-      md-icon {
-        --md-icon-font-variation-settings: var(--scb-button-font-variation-settings) !important;
-        font-variation-settings: var(--scb-button-font-variation-settings) !important;
+      .native-button:active::before {
+        opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
       }
 
-      :host([full-width]) {
-        display: flex;
-        inline-size: 100%;
+      .native-button:focus {
+        outline: none;
       }
 
-      /* Låt inre md-knappar fylla hostens höjd */
-      md-filled-button,
-      md-outlined-button,
-      md-filled-tonal-button,
-      md-text-button {
-        block-size: var(--scb-button-block-size, auto);
-        gap: var(--scb-button-icon-gap);
-        --md-filled-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
-        --md-outlined-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
-        --md-filled-tonal-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
-        --md-text-button-container-height: var(--scb-button-block-size, var(--scb-button-container-height));
+      :host(:not([data-native-focus-ring-ready])) .native-button:focus-visible {
+        outline: var(--stroke-border-m, 2px) solid var(--md-sys-color-primary);
+        outline-offset: var(--spacing-1, 2px);
       }
 
-      :host([full-width]) md-filled-button,
-      :host([full-width]) md-outlined-button,
-      :host([full-width]) md-filled-tonal-button,
-      :host([full-width]) md-text-button {
-        inline-size: 100%;
-        flex: 1 1 auto;
+      .native-button[aria-disabled='true'],
+      .native-button:disabled {
+        color: rgb(15 8 101 / 38%);
+        cursor: default;
+        opacity: 1;
+        pointer-events: none;
+      }
+
+      :host([variant='filled']) .native-button,
+      :host(:not([variant])) .native-button {
+        border-color: transparent;
+        background: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+      }
+
+      :host([variant='outlined']) .native-button {
+        background: transparent;
+        color: var(--md-sys-color-primary);
+        box-shadow: inset 0 0 0 var(--stroke-border, 1px) var(--md-sys-color-outline);
+      }
+
+      :host([variant='outlined']) .native-button[aria-disabled='true'],
+      :host([variant='outlined']) .native-button:disabled {
+        color: rgb(15 8 101 / 38%);
+        box-shadow: inset 0 0 0 var(--stroke-border, 1px) rgb(15 8 101 / 12%);
+      }
+
+      :host([variant='filled-tonal']) .native-button {
+        border-color: transparent;
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      :host([variant='filled']) .native-button[aria-disabled='true'],
+      :host([variant='filled']) .native-button:disabled,
+      :host(:not([variant])) .native-button[aria-disabled='true'],
+      :host(:not([variant])) .native-button:disabled,
+      :host([variant='filled-tonal']) .native-button[aria-disabled='true'],
+      :host([variant='filled-tonal']) .native-button:disabled {
+        background: rgb(15 8 101 / 12%);
+        color: rgb(15 8 101 / 38%);
+      }
+
+      :host([variant='text']) .native-button {
+        min-inline-size: 0;
+        background: transparent;
+        color: var(--md-sys-color-primary);
+      }
+
+      :host([variant='text']) .native-button[aria-disabled='true'],
+      :host([variant='text']) .native-button:disabled {
+        color: rgb(15 8 101 / 38%);
       }
 
-      /*  Errorvarianter  */
-      /*
-      md-filled-button[variant='error'],
-      md-outlined-button[variant='error'],
-      md-filled-tonal-button[variant='error'],
-      md-text-button[variant='error'] {
-        --md-sys-color-primary: var(--md-sys-color-error);
-        --md-sys-color-on-primary: var(--md-sys-color-on-error);
+      :host([size='large']) .native-button {
+        font-family: var(--md-sys-typescale-label-medium-font);
+        font-size: var(--md-sys-typescale-label-medium-size);
+        font-weight: var(--md-sys-typescale-label-medium-weight);
+        line-height: var(--md-sys-typescale-label-medium-line-height);
+        letter-spacing: normal;
       }
-      */
 
-      /* Outlined – röd outline vid error + tjockare vid hover */
-      /*
-      md-outlined-button[variant='error'] {
-        --_outline-color: var(--md-sys-color-error);
-        --md-outlined-button-pressed-outline-color: var(--md-sys-color-error);
+      .native-icon {
+        flex: 0 0 auto;
+        display: inline-block;
+        inline-size: var(--scb-button-icon-size);
+        block-size: var(--scb-button-icon-size);
+        overflow: hidden;
+        font-family: 'Material Symbols Outlined';
+        font-size: var(--scb-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-button-font-variation-settings);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
       }
-      */
-      /* md-outlined-button[variant='error']:hover, */
-      md-outlined-button:hover {
-        --md-outlined-button-outline-width: var(--spacing-1, 1px);
+      .native-icon.scb-svg-icon {
+        fill: currentColor;
+        font: inherit;
       }
 
-      /* Filled-tonal – error-färger */
-      /*
-      md-filled-tonal-button[variant='error'] {
-        --md-filled-tonal-button-container-color: var(--md-sys-color-error-container);
-        --md-filled-tonal-button-label-text-color: var(--md-sys-color-on-error-container);
-        --md-filled-tonal-button-hover-label-text-color: var(--md-sys-color-on-error-container);
-        --md-filled-tonal-button-pressed-label-text-color: var(--md-sys-color-on-error-container);
-        --md-filled-tonal-button-focus-label-text-color: var(--md-sys-color-on-error-container);
-        --md-filled-tonal-button-icon-color: var(--md-sys-color-on-error-container);
-        --md-filled-tonal-button-hover-icon-color: var(--md-sys-color-on-error-container);
-        --md-filled-tonal-button-pressed-icon-color: var(--md-sys-color-on-error-container);
-        --md-filled-tonal-button-focus-icon-color: var(--md-sys-color-on-error-container);
-        --md-filled-tonal-button-hover-state-layer-color: var(--md-sys-color-on-error-container);
-        --md-filled-tonal-button-pressed-state-layer-color: var(--md-sys-color-on-error-container);
+      .native-button-wrap md-ripple {
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
       }
-      @media (prefers-color-scheme: dark) {
-        md-filled-tonal-button[variant='error'] {
-          --md-filled-tonal-button-container-color: var(--md-sys-color-on-error);
-        }
+
+      .native-button-wrap md-focus-ring {
+        pointer-events: none;
+      }
+
+      :host([full-width]) {
+        display: flex;
+        inline-size: 100%;
+      }
+
+      :host([full-width]) .native-button-wrap,
+      :host([full-width]) .native-button {
+        inline-size: 100%;
+        flex: 1 1 auto;
       }
-      */
     `;
 	}
 	render() {
-		let e = !!this.icon?.trim(), t = e ? r`<md-icon slot="icon" part="icon" ?filled=${this.iconFilled} aria-hidden="true">${this.icon}</md-icon>` : i, n = i, a = this.label.trim() === "" && !this.__hasDefaultSlotContent ? this.icon : void 0, o = r`
+		let e = !!this.icon?.trim(), t = e ? r`<span class="native-icon" part="icon" aria-hidden="true">${this.icon}</span>` : i, n = this.label.trim() === "" && !this.__hasDefaultSlotContent ? this.icon : void 0, a = r`
       <slot
         @slotchange=${this.__handleDefaultSlotChange}
         style=${this.__hasDefaultSlotContent ? i : "display: none"}
       ></slot>
       ${this.__hasDefaultSlotContent ? i : this.label}
     `;
-		switch (this.variant) {
-			case "filled": return r`
-          <md-filled-button
-            type=${this.type}
-            variant=${n}
-            ?trailing-icon=${this.trailingIcon}
-            ?disabled=${this.disabled}
-            aria-label=${a}
-            href=${this.href || i}
-            target=${this.target || i}
-            rel=${this.rel || i}
-          >
-            ${e && !this.trailingIcon ? t : i}
-            ${o}
-            ${e && this.trailingIcon ? t : i}
-          </md-filled-button>
-        `;
-			case "outlined": return r`
-          <md-outlined-button
-            type=${this.type}
-            variant=${n}
-            ?trailing-icon=${this.trailingIcon}
-            ?disabled=${this.disabled}
-            aria-label=${a}
-            href=${this.href || i}
-            target=${this.target || i}
-            rel=${this.rel || i}
-          >
-            ${e && !this.trailingIcon ? t : i}
-            ${o}
-            ${e && this.trailingIcon ? t : i}
-          </md-outlined-button>
-        `;
-			case "filled-tonal": return r`
-          <md-filled-tonal-button
-            type=${this.type}
-            variant=${n}
-            ?trailing-icon=${this.trailingIcon}
-            ?disabled=${this.disabled}
-            aria-label=${a}
-            href=${this.href || i}
-            target=${this.target || i}
-            rel=${this.rel || i}
-          >
-            ${e && !this.trailingIcon ? t : i}
-            ${o}
-            ${e && this.trailingIcon ? t : i}
-          </md-filled-tonal-button>
-        `;
-			case "text": return r`
-          <md-text-button
-            type=${this.type}
-            variant=${n}
-            ?trailing-icon=${this.trailingIcon}
-            ?disabled=${this.disabled}
-            aria-label=${a}
-            href=${this.href || i}
-            target=${this.target || i}
-            rel=${this.rel || i}
-          >
-            ${e && !this.trailingIcon ? t : i}
-            ${o}
-            ${e && this.trailingIcon ? t : i}
-          </md-text-button>
-        `;
-			default: return r``;
-		}
+		if (![
+			"filled",
+			"outlined",
+			"filled-tonal",
+			"text"
+		].includes(this.variant)) return r``;
+		let o = r`
+      ${e && !this.trailingIcon ? t : i}
+      ${a}
+      ${e && this.trailingIcon ? t : i}
+    `;
+		return r`
+      <span class="native-button-wrap">
+        ${this.href ? r`
+              <a
+                class="native-button"
+                part="button"
+                href=${this.disabled ? i : this.href}
+                target=${this.target || i}
+                rel=${this.rel || i}
+                aria-label=${n}
+                aria-disabled=${this.disabled ? "true" : i}
+                tabindex=${this.disabled ? "-1" : i}
+                @click=${this.__onNativeClick}
+                @focusin=${this.__onNativeFocusIn}
+                @pointerenter=${this.__onNativePointerWarmup}
+                @pointerdown=${this.__onNativePointerWarmup}
+              >
+                ${o}
+              </a>
+            ` : r`
+              <button
+                class="native-button"
+                part="button"
+                type=${this.type}
+                ?disabled=${this.disabled}
+                aria-label=${n}
+                @click=${this.__onNativeClick}
+                @focusin=${this.__onNativeFocusIn}
+                @pointerenter=${this.__onNativePointerWarmup}
+                @pointerdown=${this.__onNativePointerWarmup}
+              >
+                ${o}
+              </button>
+            `}
+        ${this.__nativeRippleReady ? r`<md-ripple aria-hidden="true"></md-ripple>` : i}
+        ${this.__nativeFocusRingReady ? r`<md-focus-ring aria-hidden="true"></md-focus-ring>` : i}
+      </span>
+    `;
 	}
 };
 e([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "variant", void 0), e([o({
+})], 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, "type", void 0), e([o({ type: String })], s.prototype, "label", void 0), e([o({
+})], d.prototype, "type", void 0), e([o({ type: String })], d.prototype, "label", void 0), e([o({
 	type: Boolean,
 	attribute: "trailing-icon"
-})], s.prototype, "trailingIcon", void 0), e([o({ type: String })], s.prototype, "icon", void 0), e([o({
+})], d.prototype, "trailingIcon", void 0), e([o({ type: String })], d.prototype, "icon", void 0), e([o({
 	type: Boolean,
 	attribute: "icon-filled",
 	reflect: !0
-})], s.prototype, "iconFilled", void 0), e([o({
+})], d.prototype, "iconFilled", void 0), e([o({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "disabled", void 0), e([o({
+})], d.prototype, "disabled", void 0), e([o({
 	type: Boolean,
 	attribute: "full-width",
 	reflect: !0
-})], s.prototype, "fullWidth", 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), e([o({
+})], d.prototype, "fullWidth", 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), 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), s = e([a("scb-button")], s);
+})], d.prototype, "spacingRight", void 0), d = e([a("scb-button")], d);
 //#endregion
-export { s as ScbButton };
+export { d as ScbButton };