@muibook/components 1.6.0 → 3.0.0

package/dist/esm/components/mui-accordion/inline/index.js

@@ -6,11 +6,7 @@ class a extends HTMLElement {
   }
   connectedCallback() {
     var o, n;
-    if (customElements.get("mui-icon-right-chevron") || console.warn(
-      "mui-accordion-block requires <mui-icon-right-chevron> to be defined. Please ensure it is imported and registered."
-    ), customElements.get("mui-heading") || console.warn(
-      "[mui-accordion-block] Warning: <mui-heading> is not registered. Please import it to ensure proper functionality."
-    ), !this.shadowRoot) return;
+    if (!this.shadowRoot) return;
     const e = this.getAttribute("heading") || "Heading...";
     let r = (
       /*html*/
@@ -93,4 +89,4 @@ class a extends HTMLElement {
     i && (e ? i.setAttribute("inert", "") : i.removeAttribute("inert"));
   }
 }
-customElements.define("mui-accordion-inline", a);
+customElements.get("mui-accordion-inline") || customElements.define("mui-accordion-inline", a);

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

@@ -43,4 +43,4 @@ class o extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-addon", o);
+customElements.get("mui-addon") || customElements.define("mui-addon", o);

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

@@ -1,3 +1,8 @@
+import "../mui-body/index.js";
+import "../mui-icons/check/index.js";
+import "../mui-icons/info/index.js";
+import "../mui-icons/warning/index.js";
+import "../mui-icons/attention/index.js";
 function A(n) {
   return ["positive", "info", "warning", "attention"].includes(n);
 }
@@ -37,14 +42,14 @@ class x extends HTMLElement {
       info: "--feedback-info-text",
       warning: "--feedback-warning-text",
       attention: "--feedback-attention-text"
-    }, v = {
+    }, m = {
       positive: "Success!",
       info: "Info:",
       warning: "Warning!",
       attention: "Error!"
     };
     this.setAttribute("aria-live", s[t]);
-    const r = g[t], h = u[t], m = b[t], f = v[t], w = (
+    const r = g[t], v = u[t], h = b[t], f = m[t], w = (
       /*css*/
       `
       :host {
@@ -83,7 +88,7 @@ class x extends HTMLElement {
       }
 
       .label {
-        color: var(${m}); 
+        color: var(${h}); 
         font-weight: var(--font-weight-bold);
       }
 
@@ -112,7 +117,7 @@ class x extends HTMLElement {
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>${w}</style>
-      <${r} size="small" color="var(${h})" class="icon"></${r}>
+      <${r} size="small" color="var(${v})" class="icon"></${r}>
       <mui-body>
         <span class="label">${f}</span>
         <slot></slot>
@@ -133,4 +138,4 @@ class x extends HTMLElement {
     }
   }
 }
-customElements.define("mui-alert", x);
+customElements.get("mui-alert") || customElements.define("mui-alert", x);

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

@@ -1,25 +1,28 @@
-class s extends HTMLElement {
+class n extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.render();
+    super(), this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
     return ["variant"];
   }
+  connectedCallback() {
+    this.hasAttribute("variant") || this.setAttribute("variant", "neutral"), this.setAttribute("role", "status"), this.render();
+  }
   attributeChangedCallback() {
     this.render();
   }
   render() {
-    const t = this.getAttribute("variant") || "neutral", a = {
+    const t = this.getAttribute("variant") || "neutral", e = {
       neutral: "var(--badge-background-neutral)",
       positive: "var(--badge-background-positive)",
       warning: "var(--badge-background-warning)",
       attention: "var(--badge-background-attention)"
-    }, e = {
+    }, a = {
       neutral: "off",
       positive: "polite",
       warning: "assertive",
       attention: "assertive"
-    }, r = a[t], i = e[t], n = (
+    }, r = e[t], i = a[t], s = (
       /*css*/
       `
       :host {
@@ -35,9 +38,9 @@ class s extends HTMLElement {
     );
     this.setAttribute("role", "status"), this.setAttribute("aria-live", i), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-        <style>${n}</style>
+        <style>${s}</style>
         <slot></slot>
       `);
   }
 }
-customElements.define("mui-badge", s);
+customElements.get("mui-badge") || customElements.define("mui-badge", n);

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

@@ -1,5 +1,5 @@
 import { getPartMap as i } from "../../utils/part-map/index.js";
-class o extends HTMLElement {
+class r extends HTMLElement {
   static get observedAttributes() {
     return ["size", "weight", "variant"];
   }
@@ -9,8 +9,8 @@ class o extends HTMLElement {
   async connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("weight") || this.setAttribute("weight", "regular"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), await this.waitForPartMap(), this.render();
   }
-  attributeChangedCallback(t, e, r) {
-    e !== r && this.shadowRoot && this.render();
+  attributeChangedCallback(t, e, o) {
+    e !== o && this.shadowRoot && this.render();
   }
   render() {
     if (!this.shadowRoot) return;
@@ -93,4 +93,4 @@ class o extends HTMLElement {
     });
   }
 }
-customElements.define("mui-body", o);
+customElements.get("mui-body") || customElements.define("mui-body", r);

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

@@ -37,7 +37,7 @@ class v extends HTMLElement {
       font-weight: var(--action-font-weight);
       background: var(--action-primary-background);
       color: var(--action-primary-text-color);
-      border: var(--action-primary-stroke);
+      border: var(--action-primary-border);
       text-align: inherit;
     }
 
@@ -70,25 +70,25 @@ class v extends HTMLElement {
     :host([variant="primary"]) button {
       background: var(--action-primary-background);
       color: var(--action-primary-text-color);
-      border: var(--action-primary-stroke);
+      border: var(--action-primary-border);
     }
 
     :host([variant="primary"]) button:hover {
       background: var(--action-primary-background-hover);
       color: var(--action-primary-text-color-hover);
-      border: var(--action-primary-stroke-hover);
+      border: var(--action-primary-border-hover);
     }
 
     :host([variant="primary"]) button:focus-visible {
       background: var(--action-primary-background-focus);
       color: var(--action-primary-text-color-focus);
-      border: var(--action-primary-stroke-focus);
+      border: var(--action-primary-border-focus);
     }
 
     :host([variant="primary"]) button:disabled {
       background: var(--action-primary-background-disabled);
       color: var(--action-primary-text-color-disabled);
-      border: var(--action-primary-stroke-disabled);
+      border: var(--action-primary-border-disabled);
       cursor: not-allowed;
     }
 
@@ -103,25 +103,25 @@ class v extends HTMLElement {
     :host([variant="secondary"]) button {
       background: var(--action-secondary-background);
       color: var(--action-secondary-text-color);
-      border: var(--action-secondary-stroke); 
+      border: var(--action-secondary-border); 
     }
 
     :host([variant="secondary"]) button:hover {
       background: var(--action-secondary-background-hover);
       color: var(--action-secondary-text-color-hover);
-      border: var(--action-secondary-stroke-hover); 
+      border: var(--action-secondary-border-hover); 
     }
 
     :host([variant="secondary"]) button:focus-visible {
       background: var(--action-secondary-background-focus);
       color: var(--action-secondary-text-color-focus);
-      border: var(--action-secondary-stroke-focus); 
+      border: var(--action-secondary-border-focus); 
     }
 
     :host([variant="secondary"]) button:disabled {
       background: var(--action-secondary-background-disabled);
       color: var(--action-secondary-text-color-disabled);
-      border: var(--action-secondary-stroke-disabled); 
+      border: var(--action-secondary-border-disabled); 
       cursor: not-allowed;
     }
 
@@ -136,25 +136,25 @@ class v extends HTMLElement {
     :host([variant="tertiary"]) button {
       background: var(--action-tertiary-background);
       color: var(--action-tertiary-text-color);
-      border: var(--action-tertiary-stroke);
+      border: var(--action-tertiary-border);
     }
 
     :host([variant="tertiary"]) button:hover {
       background: var(--action-tertiary-background-hover);
       color: var(--action-tertiary-text-color-hover);
-      border: var(--action-tertiary-stroke-hover);
+      border: var(--action-tertiary-border-hover);
     }
 
     :host([variant="tertiary"]) button:focus-visible {
       background: var(--action-tertiary-background-focus);
       color: var(--action-tertiary-text-color-focus);
-      border: var(--action-tertiary-stroke-focus);
+      border: var(--action-tertiary-border-focus);
     }
 
     :host([variant="tertiary"]) button:disabled {
       background: var(--action-tertiary-background-disabled);
       color: var(--action-tertiary-text-color-disabled);
-      border: var(--action-tertiary-stroke-disabled);
+      border: var(--action-tertiary-border-disabled);
       cursor: not-allowed;
     }
 
@@ -168,25 +168,25 @@ class v extends HTMLElement {
     :host([variant="attention"]) button {
       background: var(--action-attention-background);
       color: var(--action-attention-text-color);
-      border: var(--action-attention-stroke);
+      border: var(--action-attention-border);
     }
 
     :host([variant="attention"]) button:hover {
       background: var(--action-attention-background-hover);
       color: var(--action-attention-text-color-hover);
-      border: var(--action-attention-stroke-hover);
+      border: var(--action-attention-border-hover);
     }
 
     :host([variant="attention"]) button:focus-visible {
       background: var(--action-attention-background-focus);
       color: var(--action-attention-text-color-focus);
-      border: var(--action-attention-stroke-focus);
+      border: var(--action-attention-border-focus);
     }
 
     :host([variant="attention"]) button:disabled {
       background: var(--action-attention-background-disabled);
       color: var(--action-attention-text-color-disabled);
-      border: var(--action-attention-stroke-disabled);
+      border: var(--action-attention-border-disabled);
       cursor: not-allowed;
     }
 
@@ -313,20 +313,18 @@ class v extends HTMLElement {
       
       :host(.has-after.has-before) button {
         grid-template-columns: auto 1fr auto;
-        padding-right: var(--space-300);
-        padding-left: var(--space-300);
+        padding-right: var(--action-after-slot-padding);
+        padding-left: var(--action-before-slot-padding);
       }
 
       :host(.has-after) button {
         grid-template-columns: 1fr auto;
-        padding-right: var(--space-300);
-        padding-left: var(--space-400);
+        padding-right: var(--action-after-slot-padding);
       }
 
       :host(.has-before) button {
         grid-template-columns: auto 1fr;
-        padding-right: var(--space-400);
-        padding-left: var(--space-300);
+        padding-left: var(--action-before-slot-padding);
       }
 
     </style>
@@ -348,7 +346,7 @@ class v extends HTMLElement {
     this.shadowRoot.innerHTML = a, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
       const e = this.shadowRoot;
       if (!e) return;
-      const n = e.querySelector("slot:not([name]"), l = e.querySelector('slot[name="before"]'), d = e.querySelector('slot[name="after"]'), s = (t) => t ? t.assignedNodes({ flatten: !0 }).some((o) => {
+      const n = e.querySelector("slot:not([name])"), l = e.querySelector('slot[name="before"]'), d = e.querySelector('slot[name="after"]'), s = (t) => t ? t.assignedNodes({ flatten: !0 }).some((o) => {
         var r;
         return o.nodeType === Node.ELEMENT_NODE || o.nodeType === Node.TEXT_NODE && !!((r = o.textContent) != null && r.trim());
       }) : !1, b = s(l), u = s(d);
@@ -372,4 +370,4 @@ class v extends HTMLElement {
     });
   }
 }
-customElements.define("mui-button", v);
+customElements.get("mui-button") || customElements.define("mui-button", v);

package/dist/esm/components/mui-button-group/index.js

@@ -20,4 +20,4 @@ class e extends HTMLElement {
     this.shadowRoot && (this.shadowRoot.innerHTML = t);
   }
 }
-customElements.define("mui-button-group", e);
+customElements.get("mui-button-group") || customElements.define("mui-button-group", e);

package/dist/esm/components/mui-card/body/index.js

@@ -4,7 +4,7 @@ class d extends HTMLElement {
   }
   connectedCallback() {
     if (!this.shadowRoot) return;
-    const i = (
+    const r = (
       /*html*/
       `
       <style>
@@ -12,6 +12,7 @@ class d extends HTMLElement {
           display: block;
           box-sizing: border-box;
         }
+        
         :host(.inner-space) {
           padding: var(--space-500);
         }
@@ -24,25 +25,28 @@ class d extends HTMLElement {
       <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = i, requestAnimationFrame(() => {
+    this.shadowRoot.innerHTML = r, requestAnimationFrame(() => {
       if (!this.shadowRoot) return;
-      const s = this.shadowRoot.querySelector("slot");
-      if (!s) return;
-      const r = s.assignedNodes({ flatten: !0 });
-      let o = !1;
-      r.forEach((a) => {
-        if (a.nodeType === Node.ELEMENT_NODE) {
-          const e = a, c = e.tagName.toLowerCase() === "mui-accordion-group" ? e : e.querySelector("mui-accordion-group");
-          c instanceof HTMLElement && (c.querySelectorAll("mui-accordion-block").forEach((t) => {
-            t.classList.add("card-slot");
-          }), o = !0);
-          const n = e.tagName.toLowerCase() === "mui-table" ? e : e.querySelector("mui-table");
-          n instanceof HTMLElement && (n.querySelectorAll("mui-cell").forEach((t) => {
-            t.classList.add("card-slot");
-          }), o = !0);
+      const a = this.shadowRoot.querySelector("slot");
+      if (!a) return;
+      const l = a.assignedNodes({ flatten: !0 });
+      let s = !1;
+      l.forEach((c) => {
+        if (c.nodeType === Node.ELEMENT_NODE) {
+          const t = c, i = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
+          i instanceof HTMLElement && (i.querySelectorAll("mui-accordion-block").forEach((e) => {
+            e.classList.add("card-slot");
+          }), s = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((o) => {
+            const e = o.getAttribute("variant");
+            (e === "action" || e === "row") && (o.classList.add("card-slot"), this.hasAttribute("condensed") && o.classList.add("condensed-slot"));
+          });
+          const n = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
+          n instanceof HTMLElement && (n.querySelectorAll("mui-cell").forEach((e) => {
+            e.classList.add("card-slot");
+          }), s = !0);
         }
-      }), o || this.classList.add("inner-space");
+      }), !s && !this.hasAttribute("condensed") && this.classList.add("inner-space");
     });
   }
 }
-customElements.define("mui-card-body", d);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", d);

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

@@ -40,4 +40,4 @@ class n extends HTMLElement {
     });
   }
 }
-customElements.define("mui-card", n);
+customElements.get("mui-card") || customElements.define("mui-card", n);

package/dist/esm/components/mui-card/footer/index.js

@@ -59,4 +59,4 @@ class d extends HTMLElement {
     });
   }
 }
-customElements.define("mui-card-footer", d);
+customElements.get("mui-card-footer") || customElements.define("mui-card-footer", d);

package/dist/esm/components/mui-card/header/index.js

@@ -26,4 +26,4 @@ class t extends HTMLElement {
     this.shadowRoot.innerHTML = e;
   }
 }
-customElements.define("mui-card-header", t);
+customElements.get("mui-card-header") || customElements.define("mui-card-header", t);

package/dist/esm/components/mui-carousel/controller/index.js

@@ -1,6 +1,17 @@
-class l extends HTMLElement {
+class r extends HTMLElement {
   constructor() {
-    super(), this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.handleTabChange = this.handleTabChange.bind(this), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.innerHTML = /*html*/
+    super(), this.shadow = this.attachShadow({ mode: "open" }), this.handleTabChange = this.handleTabChange.bind(this);
+  }
+  connectedCallback() {
+    this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.render(), this.addEventListener("tab-change", this.handleTabChange);
+    const t = this.querySelector("tab-bar");
+    if (t) {
+      const o = t.querySelector("tab-item[active]");
+      o && this.updatePanels(o.id);
+    }
+  }
+  render() {
+    this.shadow.innerHTML = /*html*/
     `
     <style>
       :host {
@@ -97,14 +108,6 @@ class l extends HTMLElement {
     </div>
   `;
   }
-  connectedCallback() {
-    this.addEventListener("tab-change", this.handleTabChange);
-    const t = this.querySelector("tab-bar");
-    if (t) {
-      const o = t.querySelector("tab-item[active]");
-      o && this.updatePanels(o.id);
-    }
-  }
   handleTabChange(t) {
     const o = t;
     this.updatePanels(o.detail.activeId);
@@ -114,4 +117,4 @@ class l extends HTMLElement {
     s !== -1 && (e.style.transform = `translateX(-${s * 100}%)`);
   }
 }
-customElements.define("mui-carousel-controller", l);
+customElements.get("mui-carousel-controller") || customElements.define("mui-carousel-controller", r);

package/dist/esm/components/mui-carousel/panel/index.js

@@ -23,7 +23,7 @@ class t extends HTMLElement {
   set item(e) {
     e !== null && this.setAttribute("item", e);
   }
-  attributeChangedCallback(e, i, o) {
+  attributeChangedCallback(e, i, l) {
   }
 }
-customElements.define("mui-carousel-panel", t);
+customElements.get("mui-carousel-panel") || customElements.define("mui-carousel-panel", t);

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

@@ -1,16 +1,23 @@
-class i extends HTMLElement {
+class s extends HTMLElement {
   static get observedAttributes() {
-    return ["size"];
+    return ["size", "scrollable"];
   }
   constructor() {
-    super();
-    const e = this.attachShadow({ mode: "open" }), t = this.getAttribute("size") || "x-small";
-    this.setAttribute("size", t);
-    const s = (
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.hasAttribute("size") || this.setAttribute("size", "x-small"), this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const e = this.hasAttribute("scrollable"), t = (
       /*css*/
       `
       :host {
-        display: block;
+        display: grid;
       }
       :host([size="x-small"]) code {
         font-size: var(--text-font-size-xs);
@@ -36,6 +43,9 @@ class i extends HTMLElement {
         background: var(--surface-elevated-200);
         padding: var(--space-400) var(--space-500);
         box-sizing: border-box;
+        width: 100%;
+        overflow-x: ${e ? "auto" : "visible"};
+        white-space: ${e ? "nowrap" : "wrap"};
       }
 
       @media (min-width: 600px) {
@@ -46,11 +56,11 @@ class i extends HTMLElement {
 
     `
     );
-    e.innerHTML = /*html*/
+    this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${s}</style>
+      <style>${t}</style>
       <code><slot></slot></code>
   `;
   }
 }
-customElements.define("mui-code", i);
+customElements.get("mui-code") || customElements.define("mui-code", s);

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

@@ -54,4 +54,4 @@ class e extends HTMLElement {
     this.shadowRoot && (this.shadowRoot.innerHTML = t);
   }
 }
-customElements.define("mui-container", e);
+customElements.get("mui-container") || customElements.define("mui-container", e);

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

@@ -1,3 +1,6 @@
+import "../mui-icons/check/index.js";
+import "../mui-icons/warning/index.js";
+import "../mui-icons/attention/index.js";
 class r extends HTMLElement {
   static get observedAttributes() {
     return ["variant", "message"];
@@ -10,7 +13,7 @@ class r extends HTMLElement {
   connectedCallback() {
     this.render(), this.passAttributesToChild();
   }
-  attributeChangedCallback(t, e, s) {
+  attributeChangedCallback(t, e, i) {
     (t === "variant" || t === "message") && (this.render(), this.passAttributesToChild());
   }
   passAttributesToChild() {
@@ -18,15 +21,15 @@ class r extends HTMLElement {
     if (!this.shadowRoot) return;
     const t = this.shadowRoot.querySelector("slot"), e = (a = t == null ? void 0 : t.assignedElements) == null ? void 0 : a.call(t)[0];
     if (!e) return;
-    ["variant", "label", "hide-label"].forEach((i) => {
-      this.hasAttribute(i) ? e.setAttribute(i, this.getAttribute(i) || "") : e.removeAttribute(i);
+    ["variant", "label", "hide-label"].forEach((s) => {
+      this.hasAttribute(s) ? e.setAttribute(s, this.getAttribute(s) || "") : e.removeAttribute(s);
     });
   }
   render() {
     const t = this.getAttribute("message"), e = this.getAttribute("variant");
     if (!this.shadowRoot) return;
-    let s = "";
-    e === "success" ? s = "check" : e === "warning" ? s = "warning" : e === "error" && (s = "attention"), this.shadowRoot.innerHTML = /*html*/
+    let i = "";
+    e === "success" ? i = "check" : e === "warning" ? i = "warning" : e === "error" && (i = "attention"), this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
@@ -50,10 +53,10 @@ class r extends HTMLElement {
       <slot></slot>
       ${t ? `
         <mui-body size="small" variant="${e}">
-          ${s ? `<mui-icon-${s}></mui-icon-${s}>` : ""}
+          ${i ? `<mui-icon-${i}></mui-icon-${i}>` : ""}
           ${t}
         </mui-body>` : ""}
     `;
   }
 }
-customElements.define("mui-field", r);
+customElements.get("mui-field") || customElements.define("mui-field", r);

package/dist/esm/components/mui-file-upload/index.js

@@ -1,3 +1,4 @@
+import "../mui-button/index.js";
 class r extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.getAttribute("acceptedFileTypes") || "", this.currentFileName = this.getAttribute("currentFileName") || "", this.selectedFileName = null, this.render(), this.cacheElements(), this.attachEvents();
@@ -23,7 +24,7 @@ class r extends HTMLElement {
           border-color: var(--form-default-border-color);
           color: var(--text-color);
           background: var(--input-background);
-          min-height: 4.2rem;
+          min-height: 4.4rem;
         }
         .wrapper:hover {
           border-color: var(--form-default-border-color-hover);
@@ -50,12 +51,12 @@ class r extends HTMLElement {
           }
         }
 
-        mui-button::part(height) {
+        mui-button {
           margin-right: 0.1rem;
         }
 
         mui-button::part(height) {
-          height: calc(4.2rem - 0.4rem);
+          height: calc(4.2rem - 0.2rem);
           padding: var(--space-400);
           padding-top: var(--space-000);
           padding-bottom: var(--space-000);
@@ -97,4 +98,4 @@ class r extends HTMLElement {
     ));
   }
 }
-customElements.define("mui-file-upload", r);
+customElements.get("mui-file-upload") || customElements.define("mui-file-upload", r);

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

@@ -39,4 +39,4 @@ class i extends HTMLElement {
     });
   }
 }
-customElements.define("mui-grid", i);
+customElements.get("mui-grid") || customElements.define("mui-grid", i);

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

@@ -32,4 +32,4 @@ class t extends HTMLElement {
     `;
   }
 }
-customElements.define("mui-heading", t);
+customElements.get("mui-heading") || customElements.define("mui-heading", t);

package/dist/esm/components/mui-icons/accessibility/index.js

@@ -1,4 +1,4 @@
-class c extends HTMLElement {
+class l extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -12,7 +12,7 @@ class c extends HTMLElement {
     (e === "size" || e === "color") && t !== i && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), c = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", s = {
@@ -30,7 +30,7 @@ class c extends HTMLElement {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${l};
+          fill: ${c};
         }
         svg {
           width: 100%;
@@ -52,4 +52,4 @@ class c extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-accessibility", c);
+customElements.get("mui-icon-accessibility") || customElements.define("mui-icon-accessibility", l);