@muibook/components 7.1.0 → 8.0.0

package/dist/esm/components/mui-link/index.js

@@ -1,7 +1,7 @@
-import { getPartMap as v } from "../../utils/part-map/index.js";
-class f extends HTMLElement {
+import { getPartMap as h } from "../../utils/part-map/index.js";
+class u extends HTMLElement {
   static get observedAttributes() {
-    return ["target", "href", "variant", "weight", "size", "download", "usage"];
+    return ["target", "href", "variant", "disabled", "weight", "size", "download", "usage"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -19,6 +19,10 @@ class f extends HTMLElement {
         const t = this.shadowRoot.querySelector("a");
         t && t.setAttribute("target", e || "_self");
       }
+      if (a === "disabled") {
+        const t = this.shadowRoot.querySelector("a");
+        t && (e !== null ? (t.setAttribute("aria-disabled", "true"), t.setAttribute("href", "javascript:void(0)")) : (t.setAttribute("aria-disabled", "false"), t.setAttribute("href", this.getAttribute("href") || "#")));
+      }
       if (a === "download") {
         const t = this.shadowRoot.querySelector("a");
         if (!t) return;
@@ -27,44 +31,44 @@ class f extends HTMLElement {
       a === "size" && o !== e && this.shadowRoot && requestAnimationFrame(() => {
         const t = this.shadowRoot;
         if (!t) return;
-        const l = [
+        const d = [
           t.querySelector("slot:not([name])"),
           t.querySelector('slot[name="before"]'),
           t.querySelector('slot[name="after"]')
-        ], d = this.hasAttribute("icon-only");
-        l.forEach((r) => {
+        ], s = this.hasAttribute("icon-only");
+        d.forEach((r) => {
           if (r) {
-            const n = r.assignedNodes({ flatten: !0 });
-            this.updateIconSizes(n, d);
+            const i = r.assignedNodes({ flatten: !0 });
+            this.updateIconSizes(i, s), this.updateAvatarSizes(i);
           }
         });
       });
     }
   }
   updateSlotState() {
-    const a = this.shadowRoot, o = a.querySelector("slot:not([name])"), e = a.querySelector('slot[name="before"]'), t = a.querySelector('slot[name="after"]'), l = (s) => !!s && s.assignedNodes({ flatten: !0 }).some(
-      (i) => {
+    const a = this.shadowRoot, o = a.querySelector("slot:not([name])"), e = a.querySelector('slot[name="before"]'), t = a.querySelector('slot[name="after"]'), d = (l) => !!l && l.assignedNodes({ flatten: !0 }).some(
+      (n) => {
         var c;
-        return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((c = i.textContent) != null && c.trim());
+        return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && !!((c = n.textContent) != null && c.trim());
       }
-    ), d = l(e), r = l(t);
-    this.classList.toggle("has-before", d), this.classList.toggle("has-after", r);
-    const n = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], h = n.length > 0 && n.every(
-      (s) => {
-        var i;
-        return s.nodeType === Node.ELEMENT_NODE ? s.classList.contains("mui-icon") || s.tagName.toLowerCase() === "svg" : !((i = s.textContent) != null && i.trim());
+    ), s = d(e), r = d(t);
+    this.classList.toggle("has-before", s), this.classList.toggle("has-after", r);
+    const i = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], v = i.length > 0 && i.every(
+      (l) => {
+        var n;
+        return l.nodeType === Node.ELEMENT_NODE ? l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "svg" : !((n = l.textContent) != null && n.trim());
       }
     );
-    this.toggleAttribute("icon-only", h), h ? this.updateIconSizes(n, !0) : [e, o, t].forEach((i) => {
-      if (i) {
-        const c = i.assignedNodes({ flatten: !0 });
-        this.updateIconSizes(c, !1);
+    this.toggleAttribute("icon-only", v), v ? this.updateIconSizes(i, !0) : [e, o, t].forEach((n) => {
+      if (n) {
+        const c = n.assignedNodes({ flatten: !0 });
+        this.updateIconSizes(c, !1), this.updateAvatarSizes(c);
       }
     });
   }
   render() {
     if (!this.shadowRoot) return;
-    const a = v("text", "spacing", "layout", "visual");
+    const a = h("text", "spacing", "layout", "visual");
     this.shadowRoot.innerHTML = /*html*/
     `
     <style>
@@ -88,7 +92,7 @@ class f extends HTMLElement {
       a:focus, a:active, a:hover { outline: var(--space-000); }
       a:hover { color: var(--link-text-color-default-hover); text-decoration-color: color-mix(in srgb, var(--link-text-color-default-hover) 80%, transparent); }
       a:focus { color: var(--link-text-color-default-focus); text-decoration-color: color-mix(in srgb, var(--link-text-color-default-focus) 80%, transparent); }
-      a:disabled { color: var(--link-text-color-default-disabled); text-decoration-color: color-mix(in srgb, var(--link-text-color-default-disabled) 80%, transparent); cursor: not-allowed; }
+      a[aria-disabled="true"] { color: var(--link-text-color-default-disabled); text-decoration-color: color-mix(in srgb, var(--link-text-color-default-disabled) 80%, transparent); cursor: not-allowed; }
       a, a:before, a:after {box-sizing: border-box;}
       a:focus-visible { outline: var(--outline-thick); }
 
@@ -165,7 +169,7 @@ class f extends HTMLElement {
         border: var(--action-primary-border-focus);
       }
 
-      :host([variant="primary"]) a:disabled {
+      :host([variant="primary"]) a[aria-disabled="true"] {
         background: var(--action-primary-background-disabled); 
         color: var(--action-primary-text-color-disabled);
         border: var(--action-primary-border-disabled);
@@ -175,7 +179,7 @@ class f extends HTMLElement {
       :host([variant="primary"]) a ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
       :host([variant="primary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
       :host([variant="primary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
-      :host([variant="primary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
+      :host([variant="primary"]) a[aria-disabled="true"] ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
 
       /* Button Secondary 
       ========================================= */
@@ -197,7 +201,7 @@ class f extends HTMLElement {
         border: var(--action-secondary-border-focus); 
       }
 
-      :host([variant="secondary"]) a:disabled {
+      :host([variant="secondary"]) a[aria-disabled="true"] {
         background: var(--action-secondary-background-disabled);
         color: var(--action-secondary-text-color-disabled);
         border: var(--action-secondary-border-disabled); 
@@ -207,7 +211,7 @@ class f extends HTMLElement {
       :host([variant="secondary"]) a ::slotted(.mui-icon) { fill: var(--action-secondary-text-color); }
       :host([variant="secondary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-hover); }
       :host([variant="secondary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-focus); }
-      :host([variant="secondary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
+      :host([variant="secondary"]) a[aria-disabled="true"] ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
 
       /* Button Tertiary
       ========================================= */
@@ -229,7 +233,7 @@ class f extends HTMLElement {
         border: var(--action-tertiary-border-focus);
       }
 
-      :host([variant="tertiary"]) a:disabled {
+      :host([variant="tertiary"]) a[aria-disabled="true"] {
         background: var(--action-tertiary-background-disabled);
         color: var(--action-tertiary-text-color-disabled);
         border: var(--action-tertiary-border-disabled);
@@ -239,7 +243,7 @@ class f extends HTMLElement {
       :host([variant="tertiary"]) a ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color); }
       :host([variant="tertiary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-hover); }
       :host([variant="tertiary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
-      :host([variant="tertiary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
+      :host([variant="tertiary"]) a[aria-disabled="true"] ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
 
       /* Button Attention
       ========================================= */
@@ -261,7 +265,7 @@ class f extends HTMLElement {
         border: var(--action-attention-border-focus);
       }
 
-      :host([variant="attention"]) a:disabled {
+      :host([variant="attention"]) a[aria-disabled="true"] {
         background: var(--action-attention-background-disabled);
         color: var(--action-attention-text-color-disabled);
         border: var(--action-attention-border-disabled);
@@ -271,7 +275,7 @@ class f extends HTMLElement {
       :host([variant="attention"]) a ::slotted(.mui-icon) { fill: var(--action-attention-text-color); }
       :host([variant="attention"]) a:hover ::slotted(.mui-icon) { fill: var(--action-attention-text-color-hover); }
       :host([variant="attention"]) a:focus ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
-      :host([variant="attention"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
+      :host([variant="attention"]) a[aria-disabled="true"] ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
 
       /* Icon only
       ========================================= */
@@ -326,6 +330,54 @@ class f extends HTMLElement {
         fill: var(--alert-icon);
       }
 
+      /* AVATAR */
+
+      /* Link - Default */
+      :host([variant="default"][size="x-small"]) a ::slotted(mui-avatar) {
+        margin-right: var(--space-025);
+      }
+      :host([variant="default"][size="small"]) a ::slotted(mui-avatar),
+      :host([variant="default"][size="medium"]) a ::slotted(mui-avatar),
+      :host([variant="default"][size="large"]) a ::slotted(mui-avatar) {
+        margin-right: var(--space-025);
+      }
+
+      /* Link Button */
+      :host(:not([variant="default"])) a ::slotted(mui-avatar) {
+        --avatar-background-override: var(--action-avatar-background);
+      }
+
+      /* Link Button: Sizes */
+      :host(:not([variant="default"])[size="x-small"]) a ::slotted(mui-avatar) {
+        margin-right: var(--space-025);
+      }
+      :host(:not([variant="default"])[size="small"]) a ::slotted(mui-avatar),
+      :host(:not([variant="default"])[size="medium"]) a ::slotted(mui-avatar),
+      :host(:not([variant="default"])[size="large"]) a ::slotted(mui-avatar) {
+        margin-right: var(--space-050);
+      }
+
+      /* Link Button: Background */
+      :host(:not([variant="default"])) a[aria-disabled="true"] ::slotted(mui-avatar),
+      :host(:not([variant="default"])) a[aria-disabled="true"]:hover ::slotted(mui-avatar),
+      :host(:not([variant="default"])) a[aria-disabled="true"]:focus ::slotted(mui-avatar) {
+        --avatar-background-override: var(--action-avatar-background);
+      }
+
+      /* Disabled */
+      :host a[aria-disabled="true"] ::slotted(mui-avatar),
+      :host a[aria-disabled="true"]:hover ::slotted(mui-avatar),
+      :host a[aria-disabled="true"]:focus ::slotted(mui-avatar) {
+        opacity: 0.5;
+      }
+
+      :host(:not([variant="default"])) a:hover ::slotted(mui-avatar),
+      :host(:not([variant="default"])) a:focus ::slotted(mui-avatar) {
+        --avatar-background-override: var(--action-avatar-background-hover);
+      }
+
+
+
       /* Before & After Icon
       ========================================= */
       :host(.has-after) a,
@@ -438,30 +490,35 @@ class f extends HTMLElement {
 
       :host([size="x-small"][variant]:not([variant="default"])) a,
       :host([size="x-small"][variant]:not([variant="default"])) a:hover,
-      :host([size="x-small"][variant]:not([variant="default"])) a:focus {
+      :host([size="x-small"][variant]:not([variant="default"])) a:focus,
+      :host([size="x-small"][variant]:not([variant="default"])) a[aria-disabled="true"] {
         font-size: var(--text-font-size-xs);
         line-height: var(--text-line-height-xs);
         font-weight: var(--font-weight-semi-bold);
         padding: var(--action-padding-x-small);
         border-width: var(--stroke-size-100);
+        border-radius: var(--action-radius-x-small);
       }
 
       :host([size="small"][variant]:not([variant="default"])) a {
         font-size: var(--text-font-size-s);
         line-height: var(--text-line-height-s);
         padding: var(--action-padding-small);
+        border-radius: var(--action-radius-small);
       }
 
       :host([size="medium"][variant]:not([variant="default"])) a {
         font-size: var(--text-font-size-m);
         line-height: var(--text-line-height-m);
         padding: var(--action-padding);
+        border-radius: var(--action-radius-medium);
       }
 
       :host([size="large"][variant]:not([variant="default"])) a {
         font-size: var(--text-font-size-l);
         line-height: var(--text-line-height-l);
         padding: var(--action-padding-large);
+        border-radius: var(--action-radius-large);
       }
 
       /* Icon-only size variants */
@@ -569,8 +626,9 @@ class f extends HTMLElement {
     <a
       part="${a}" 
       target="${this.getAttribute("target") || "_self"}" 
-      href="${this.getAttribute("href") || "#"}"
-      ${this.hasAttribute("download") ? `download="${this.getAttribute("download") || ""}"` : ""}
+      href="${this.hasAttribute("disabled") ? "javascript:void(0)" : this.getAttribute("href") || "#"}"
+      aria-disabled="${this.hasAttribute("disabled") ? "true" : "false"}"
+      ${this.hasAttribute("download") && !this.hasAttribute("disabled") ? `download="${this.getAttribute("download") || ""}"` : ""}
       >
       <slot name="before"></slot>
       <slot></slot>
@@ -578,28 +636,48 @@ class f extends HTMLElement {
     </a>
     `;
   }
+  // Update avatar sizes based on button size
+  updateAvatarSizes(a) {
+    const o = this.getAttribute("size") || "medium", s = ((this.getAttribute("variant") || "default") === "default" ? {
+      "x-small": "x-small",
+      small: "x-small",
+      medium: "x-small",
+      large: "small"
+    } : {
+      "x-small": "x-small",
+      small: "x-small",
+      medium: "small",
+      large: "medium"
+    })[o] || "small";
+    a.forEach((r) => {
+      if (r.nodeType === Node.ELEMENT_NODE) {
+        const i = r;
+        i.tagName.toLowerCase() === "mui-avatar" && i.setAttribute("size", s);
+      }
+    });
+  }
   updateIconSizes(a, o) {
-    const e = this.getAttribute("size") || "medium", l = {
+    const e = this.getAttribute("size") || "medium", d = {
       "x-small": "x-small",
       small: "x-small",
       medium: o ? "medium" : "small",
       large: o ? "large" : "medium"
     }[e] || "small";
-    a.forEach((d) => {
-      if (d.nodeType === Node.ELEMENT_NODE) {
-        const r = d, n = r.tagName.toLowerCase();
-        (n === "svg" || r.classList.contains("mui-icon") || n === "mui-icon") && !r.hasAttribute("size") && r.setAttribute("size", l);
+    a.forEach((s) => {
+      if (s.nodeType === Node.ELEMENT_NODE) {
+        const r = s, i = r.tagName.toLowerCase();
+        (i === "svg" || r.classList.contains("mui-icon") || i === "mui-icon") && !r.hasAttribute("size") && r.setAttribute("size", d);
       }
     });
   }
   waitForPartMap() {
     return new Promise((a) => {
-      if (typeof v == "function") return a();
+      if (typeof h == "function") return a();
       const o = () => {
-        typeof v == "function" ? a() : requestAnimationFrame(o);
+        typeof h == "function" ? a() : requestAnimationFrame(o);
       };
       o();
     });
   }
 }
-customElements.get("mui-link") || customElements.define("mui-link", f);
+customElements.get("mui-link") || customElements.define("mui-link", u);

package/dist/esm/components/mui-select/index.js

@@ -67,7 +67,7 @@ class p extends HTMLElement {
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
           border-radius: var(--radius-100);
-          color: var(--text-color);
+          color: var(--form-default-text-color);
           background: var(--input-background);
           width: 100%;
           box-sizing: border-box;
@@ -75,6 +75,7 @@ class p extends HTMLElement {
         }
         select:hover {
           border-color: var(--form-default-border-color-hover);
+          color: var(--form-default-text-color-hover);
         }
         select:focus {
           outline: var(--outline-thick);

package/dist/esm/components/mui-slat/index.js

@@ -1,3 +1,2 @@
 import "./slat/index.js";
-import "./accessory/index.js";
 import "./group/index.js";

package/dist/esm/components/mui-slat/slat/index.js

@@ -9,16 +9,27 @@ class i extends HTMLElement {
   static get observedAttributes() {
     return ["variant", "col", "space"];
   }
-  attributeChangedCallback(t, a, r) {
-    t === "variant" && (this.variant = r), this.render();
+  attributeChangedCallback(a, t, r) {
+    a === "variant" && (this.variant = r), this.render();
+  }
+  enforceAvatarSizes() {
+    var t;
+    const a = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("slot");
+    a == null || a.forEach((r) => {
+      r.assignedElements({ flatten: !0 }).forEach((s) => {
+        s.tagName.toLowerCase() === "mui-avatar" && s.setAttribute("size", "small");
+      });
+    });
   }
   connectedCallback() {
-    this.variant = this.getAttribute("variant") || "", this.setAttribute("role", "row"), this.render();
+    this.variant = this.getAttribute("variant") || "", this.setAttribute("role", "row"), this.render(), requestAnimationFrame(() => {
+      this.enforceAvatarSizes();
+    });
   }
   applyCellRoles() {
-    var a;
-    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelectorAll("slot");
-    t == null || t.forEach((r) => {
+    var t;
+    const a = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("slot");
+    a == null || a.forEach((r) => {
       r.assignedElements({ flatten: !0 }).forEach((s) => {
         s.setAttribute("role", "cell");
       });
@@ -28,12 +39,12 @@ class i extends HTMLElement {
     return this.querySelector('[slot="accessory"]') !== null;
   }
   render() {
-    const t = this.variant === "action", a = this.getAttribute("col") || "1fr 1fr", r = this.getAttribute("space") || "var(--space-500)", e = this.hasAccessorySlot(), s = (
+    const a = this.variant === "action", t = this.getAttribute("col") || "1fr 1fr", r = this.getAttribute("space") || "var(--space-500)", e = this.hasAccessorySlot(), s = (
       /*css*/
       `
       :host {
         display: grid;
-        grid-template-columns: ${a};
+        grid-template-columns: ${t};
         align-items: center;
         gap: ${r};
         box-sizing: border-box;
@@ -106,6 +117,22 @@ class i extends HTMLElement {
         border-bottom-right-radius: var(--card-radius); 
       }
 
+      ::slotted(mui-avatar) {
+        --avatar-background-override: var(--slat-avatar-background);
+      }
+      .action:hover ::slotted(mui-avatar),
+      .action:focus ::slotted(mui-avatar) {
+        --avatar-background-override: var(--slat-avatar-background-hover);
+      }
+
+      :host(.card-slot) ::slotted(mui-avatar) {
+        --avatar-background-override: var(--slat-card-avatar-background);
+      }
+      :host(.card-slot) .action:hover ::slotted(mui-avatar),
+      :host(.card-slot) .action:focus ::slotted(mui-avatar) {
+        --avatar-background-override: var(--slat-card-avatar-background-hover);
+      }
+
     `
     ), o = e ? `
         <mui-h-stack alignY="center" space="var(--space-400)">
@@ -113,7 +140,7 @@ class i extends HTMLElement {
           <slot name="start"></slot>
         </mui-h-stack>
       ` : '<slot name="start"></slot>';
-    this.shadowRoot.innerHTML = t ? (
+    this.shadowRoot.innerHTML = a ? (
       /*html*/
       `
         <style>${s}</style>

package/dist/esm/components/mui-switch/index.js

@@ -4,7 +4,7 @@ class h extends HTMLElement {
   }
   connectedCallback() {
     var t;
-    this.render(), this._checkbox = this.shadowRoot.querySelector('input[type="checkbox"]'), this._checked = this.hasAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked), this._updateIcons(), this._updateDisabledState(), (t = this._checkbox) == null || t.addEventListener("change", () => {
+    this.render(), this._checkbox = this.shadowRoot.querySelector('input[type="checkbox"]'), this._checked = this.hasAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked), this._updateIcons(), this._updateDisabledState(), this._enforceIconSize(), (t = this._checkbox) == null || t.addEventListener("change", () => {
       this._checkbox && (this.checked = this._checkbox.checked, this.dispatchEvent(
         new CustomEvent("change", {
           detail: { checked: this.checked },
@@ -17,10 +17,10 @@ class h extends HTMLElement {
   static get observedAttributes() {
     return ["label", "disabled", "checked"];
   }
-  attributeChangedCallback(t, e, i) {
-    if (t === "checked" && e !== i && (this._checked = i !== null, this._checkbox && (this._checkbox.checked = this._checked, this._updateIcons())), t === "disabled" && e !== i) {
-      const s = i !== null;
-      this._checkbox && (this._checkbox.disabled = s, this._checkbox.setAttribute("aria-disabled", s.toString())), this._updateDisabledState();
+  attributeChangedCallback(t, e, s) {
+    if (t === "checked" && e !== s && (this._checked = s !== null, this._checkbox && (this._checkbox.checked = this._checked, this._updateIcons())), t === "disabled" && e !== s) {
+      const i = s !== null;
+      this._checkbox && (this._checkbox.disabled = i, this._checkbox.setAttribute("aria-disabled", i.toString())), this._updateDisabledState();
     }
   }
   get checked() {
@@ -31,15 +31,27 @@ class h extends HTMLElement {
     this._checked !== e && (this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked, this._checkbox.setAttribute("aria-checked", this._checked.toString()), this._updateIcons()));
   }
   _updateDisabledState() {
-    var e, i, s, c;
-    this.hasAttribute("disabled") ? (this.shadowRoot.host.classList.add("disabled"), (e = this._checkbox) == null || e.setAttribute("aria-disabled", "true"), (i = this._checkbox) == null || i.setAttribute("tabindex", "-1")) : (this.shadowRoot.host.classList.remove("disabled"), (s = this._checkbox) == null || s.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
+    var e, s, i, c;
+    this.hasAttribute("disabled") ? (this.shadowRoot.host.classList.add("disabled"), (e = this._checkbox) == null || e.setAttribute("aria-disabled", "true"), (s = this._checkbox) == null || s.setAttribute("tabindex", "-1")) : (this.shadowRoot.host.classList.remove("disabled"), (i = this._checkbox) == null || i.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
+  }
+  _enforceIconSize() {
+    const t = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]'), s = (i) => {
+      if (!i) return;
+      const c = () => {
+        i.assignedElements().forEach((o) => {
+          o.tagName.toLowerCase().startsWith("mui-icon") && o.setAttribute("size", "x-small");
+        });
+      };
+      i.addEventListener("slotchange", c), setTimeout(c, 0);
+    };
+    s(t), s(e);
   }
   _updateIcons() {
     const t = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]');
-    t && t.assignedElements().forEach((i) => {
-      i.style.display = this._checked ? "inline" : "none";
-    }), e && e.assignedElements().forEach((i) => {
-      i.style.display = this._checked ? "none" : "inline";
+    t && t.assignedElements().forEach((s) => {
+      s.style.display = this._checked ? "inline" : "none";
+    }), e && e.assignedElements().forEach((s) => {
+      s.style.display = this._checked ? "none" : "inline";
     });
   }
   render() {
@@ -102,8 +114,6 @@ class h extends HTMLElement {
 
         ::slotted([slot="on-icon"]),
         ::slotted([slot="off-icon"]) {
-          width: 16px;
-          height: 16px;
           fill: var(--switch-icon);
         }