@muibook/components 2.0.0 → 3.0.0

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

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, s) {
+    (e === "size" || e === "color") && t !== s && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, o = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${o};
+          height: ${o};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M6.916 21.5c-1.987 0-3.615-1.559-3.615-3.493S4.929 14.5 6.916 14.5c2.002 0 3.63 1.573 3.63 3.507S8.919 21.5 6.917 21.5m11.385 0c-2.002 0-3.616-1.559-3.616-3.493S16.3 14.5 18.301 14.5s3.63 1.573 3.63 3.507-1.628 3.493-3.63 3.493m11.384 0c-2.002 0-3.63-1.559-3.63-3.493s1.628-3.507 3.63-3.507c1.987 0 3.616 1.573 3.616 3.507S31.672 21.5 29.685 21.5"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-ellipsis") || customElements.define("mui-icon-ellipsis", r);

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

@@ -8,19 +8,19 @@ class a extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, c) {
-    (e === "size" || e === "color") && t !== c && this.render();
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
   }
   render() {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), s = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", o = {
+    }[t] || t || "var(--icon-color-default)", c = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, i = o[e] ?? o.small;
+    }, i = c[e] ?? c.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -52,4 +52,4 @@ class a extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-globe", a);
+customElements.get("mui-icon-globe") || customElements.define("mui-icon-globe", a);

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

@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-grid", r);
+customElements.get("mui-icon-grid") || customElements.define("mui-icon-grid", r);

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

@@ -22,3 +22,5 @@ import "./toggle/index.js";
 import "./up-arrow/index.js";
 import "./up-chevron/index.js";
 import "./warning/index.js";
+import "./down-arrow-circle/index.js";
+import "./ellipsis/index.js";

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

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class c extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-info", r);
+customElements.get("mui-icon-info") || customElements.define("mui-icon-info", c);

package/dist/esm/components/mui-icons/left-arrow/index.js

@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-left-arrow", r);
+customElements.get("mui-icon-left-arrow") || customElements.define("mui-icon-left-arrow", r);

package/dist/esm/components/mui-icons/left-chevron/index.js

@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-left-chevron", r);
+customElements.get("mui-icon-left-chevron") || customElements.define("mui-icon-left-chevron", r);

package/dist/esm/components/mui-icons/left-sidebar/index.js

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class l extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -15,18 +15,18 @@ class r extends HTMLElement {
     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)", o = {
+    }[t] || t || "var(--icon-color-default)", s = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, s = o[e] ?? o.small;
+    }, o = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${s};
-          height: ${s};
+          width: ${o};
+          height: ${o};
           display: inline-flex;
           align-items: center;
           justify-content: center;
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-left-sidebar", r);
+customElements.get("mui-icon-left-sidebar") || customElements.define("mui-icon-left-sidebar", l);

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

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -15,18 +15,18 @@ class r extends HTMLElement {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", o = {
+    }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, i = o[e] ?? o.small;
+    }, o = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${i};
-          height: ${i};
+          width: ${o};
+          height: ${o};
           display: inline-flex;
           align-items: center;
           justify-content: center;
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-menu", r);
+customElements.get("mui-icon-menu") || customElements.define("mui-icon-menu", n);

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

@@ -12,7 +12,7 @@ class l extends HTMLElement {
     (t === "size" || t === "color") && e !== c && this.render();
   }
   render() {
-    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), i = e && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), o = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[e] || e || "var(--icon-color-default)", s = {
@@ -20,17 +20,17 @@ class l extends HTMLElement {
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, o = s[t] ?? s.small;
+    }, i = s[t] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${o};
-          height: ${o};
+          width: ${i};
+          height: ${i};
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${i};
+          fill: ${o};
         }
         svg {
           width: 100%;
@@ -52,4 +52,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-message", l);
+customElements.get("mui-icon-message") || customElements.define("mui-icon-message", l);

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

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-moon", r);
+customElements.get("mui-icon-moon") || customElements.define("mui-icon-moon", n);

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

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-notification", l);
+customElements.get("mui-icon-notification") || customElements.define("mui-icon-notification", n);

package/dist/esm/components/mui-icons/right-chevron/index.js

@@ -8,19 +8,19 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
   }
   render() {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), r = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", i = {
+    }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, s = i[e] ?? i.small;
+    }, s = o[e] ?? o.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -52,4 +52,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-right-chevron", l);
+customElements.get("mui-icon-right-chevron") || customElements.define("mui-icon-right-chevron", l);

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

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class c extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-stop", r);
+customElements.get("mui-icon-stop") || customElements.define("mui-icon-stop", c);

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

@@ -8,25 +8,25 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(e, t, s) {
+    (e === "size" || e === "color") && t !== s && this.render();
   }
   render() {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), r = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", s = {
+    }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, i = s[e] ?? s.small;
+    }, o = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${i};
-          height: ${i};
+          width: ${o};
+          height: ${o};
           display: inline-flex;
           align-items: center;
           justify-content: center;
@@ -52,4 +52,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-subtract", l);
+customElements.get("mui-icon-subtract") || customElements.define("mui-icon-subtract", l);

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

@@ -12,7 +12,7 @@ class l extends HTMLElement {
     (e === "size" || e === "color") && t !== c && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), i = t && {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), o = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", s = {
@@ -20,17 +20,17 @@ class l extends HTMLElement {
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, o = s[e] ?? s.small;
+    }, i = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${o};
-          height: ${o};
+          width: ${i};
+          height: ${i};
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${i};
+          fill: ${o};
         }
         svg {
           width: 100%;
@@ -52,4 +52,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-sun", l);
+customElements.get("mui-icon-sun") || customElements.define("mui-icon-sun", l);

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

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

package/dist/esm/components/mui-icons/up-arrow/index.js

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class l extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -12,7 +12,7 @@ class r extends HTMLElement {
     (e === "size" || e === "color") && t !== o && 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"), r = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
@@ -30,7 +30,7 @@ class r extends HTMLElement {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${l};
+          fill: ${r};
         }
         svg {
           width: 100%;
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-up-arrow", r);
+customElements.get("mui-icon-up-arrow") || customElements.define("mui-icon-up-arrow", l);

package/dist/esm/components/mui-icons/up-chevron/index.js

@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-up-chevron", r);
+customElements.get("mui-icon-up-chevron") || customElements.define("mui-icon-up-chevron", r);

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

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-warning", r);
+customElements.get("mui-icon-warning") || customElements.define("mui-icon-warning", n);

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

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

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

@@ -8,30 +8,30 @@ class m extends HTMLElement {
   connectedCallback() {
     this.render(), this.setupListener();
   }
-  attributeChangedCallback(e, a, t) {
+  attributeChangedCallback(e, s, r) {
     var o;
-    const r = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
-    r && (e === "value" && (r.value = t ?? ""), e === "disabled" && (t === null || t === "false" ? r.removeAttribute("disabled") : r.setAttribute("disabled", "")), (e === "type" || e === "placeholder" || e === "label" || e === "hide-label") && (this.render(), this.setupListener()));
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+    t && (e === "value" && (t.value = r ?? ""), e === "disabled" && (r === null || r === "false" ? t.removeAttribute("disabled") : t.setAttribute("disabled", "")), (e === "type" || e === "placeholder" || e === "label" || e === "hide-label") && (this.render(), this.setupListener()));
   }
   setupListener() {
-    var t, r;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    var r, t;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
     if (!e) return;
-    const a = e.cloneNode(!0);
-    (r = e.parentNode) == null || r.replaceChild(a, e), a.addEventListener("input", (o) => {
-      const s = o.target;
+    const s = e.cloneNode(!0);
+    (t = e.parentNode) == null || t.replaceChild(s, e), s.addEventListener("input", (o) => {
+      const a = o.target;
       this.dispatchEvent(
         new CustomEvent("input", {
-          detail: { value: s.value },
+          detail: { value: a.value },
           bubbles: !0,
           composed: !0
         })
       );
-    }), a.addEventListener("change", (o) => {
-      const s = o.target;
+    }), s.addEventListener("change", (o) => {
+      const a = o.target;
       this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { value: s.value },
+          detail: { value: a.value },
           bubbles: !0,
           composed: !0
         })
@@ -39,13 +39,7 @@ class m extends HTMLElement {
     });
   }
   render() {
-    const e = ["text", "password", "email", "number", "search", "tel", "url", "date", "time"], a = this.getAttribute("type") || "text", t = e.includes(a) ? a : "text", r = this.getAttribute("name") || "", o = this.getAttribute("value") || "", s = this.getAttribute("placeholder") || "", n = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("label") || "", l = this.hasAttribute("hide-label"), u = this.hasAttribute("disabled"), d = l && i ? `aria-label="${i}"` : "", c = this.getAttribute("variant") || "", b = c || "", h = this.querySelector('[slot="before"]') !== null, p = this.querySelector('[slot="after"]') !== null, v = [b, h ? "before" : "", p ? "after" : ""].filter(Boolean).join(" ");
-    l && !i && console.warn(
-      "mui-input Accessibility warning: When using 'hide-label', please provide a 'label' attribute so an 'aria-label' can be generated for screen reader support."
-    ), !i && !d && console.warn(
-      "mui-input Accessibility warning: A 'label' or 'aria-label' attribute is required for screen reader accessibility."
-    );
-    const f = (
+    const e = ["text", "password", "email", "number", "search", "tel", "url", "date", "time"], s = this.getAttribute("type") || "text", r = e.includes(s) ? s : "text", t = this.getAttribute("name") || "", o = this.getAttribute("value") || "", a = this.getAttribute("placeholder") || "", l = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("label") || "", n = this.hasAttribute("hide-label"), c = this.hasAttribute("disabled"), u = n && i ? `aria-label="${i}"` : "", d = this.getAttribute("variant") || "", b = d || "", h = this.querySelector('[slot="before"]') !== null, p = this.querySelector('[slot="after"]') !== null, v = [b, h ? "before" : "", p ? "after" : ""].filter(Boolean).join(" "), f = (
       /*html*/
       `
       <style>
@@ -184,18 +178,18 @@ class m extends HTMLElement {
         
 
       </style>
-      ${i ? `<label for="${n}" class="${l ? "vh" : ""}">${i}</label>` : ""}
+      ${i ? `<label for="${l}" class="${n ? "vh" : ""}">${i}</label>` : ""}
     <div class="input-wrapper">
       <slot name="before"></slot>
       <input
         class="${v}"
-        type="${t}"
-        name="${r}"
-        id="${n}"
+        type="${r}"
+        name="${t}"
+        id="${l}"
         value="${o}"
-        placeholder="${s}"
-        ${u ? 'disabled aria-disabled="true"' : ""}
-        ${d}
+        placeholder="${a}"
+        ${c ? 'disabled aria-disabled="true"' : ""}
+        ${u}
       />
       <slot name="after"></slot>
     </div>
@@ -204,4 +198,4 @@ class m extends HTMLElement {
     this.shadowRoot && (this.shadowRoot.innerHTML = f);
   }
 }
-customElements.define("mui-input", m);
+customElements.get("mui-input") || customElements.define("mui-input", m);

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

@@ -10,17 +10,17 @@ class u extends HTMLElement {
     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(), requestAnimationFrame(() => this.updateSlotState());
   }
   updateSlotState() {
-    const t = this.shadowRoot, o = t.querySelector("slot:not([name])"), c = t.querySelector('slot[name="before"]'), l = t.querySelector('slot[name="after"]'), i = (a) => !!a && a.assignedNodes({ flatten: !0 }).some(
+    const t = this.shadowRoot, a = t.querySelector("slot:not([name])"), c = t.querySelector('slot[name="before"]'), l = t.querySelector('slot[name="after"]'), i = (o) => !!o && o.assignedNodes({ flatten: !0 }).some(
       (r) => {
         var s;
         return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE && !!((s = r.textContent) != null && s.trim());
       }
     ), d = i(c), v = i(l);
     this.classList.toggle("has-before", d), this.classList.toggle("has-after", v);
-    const n = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], h = n.length > 0 && n.every(
-      (a) => {
+    const n = (a == null ? void 0 : a.assignedNodes({ flatten: !0 })) ?? [], h = n.length > 0 && n.every(
+      (o) => {
         var r;
-        return a.nodeType === Node.ELEMENT_NODE ? a.classList.contains("mui-icon") || a.tagName.toLowerCase() === "svg" : !((r = a.textContent) != null && r.trim());
+        return o.nodeType === Node.ELEMENT_NODE ? o.classList.contains("mui-icon") || o.tagName.toLowerCase() === "svg" : !((r = o.textContent) != null && r.trim());
       }
     );
     this.toggleAttribute("icon-only", h);
@@ -96,7 +96,7 @@ class u extends HTMLElement {
         text-align: inherit;
         width: 100%;
         text-decoration: none;
-        padding: var(--space-200) var(--space-500);
+        padding: var(--action-padding);
         border-radius: var(--action-radius);
         font-size: var(--action-font-size);
         font-weight: var(--action-font-weight);
@@ -310,22 +310,18 @@ class u extends HTMLElement {
       }
 
       :host(.has-after.has-before[variant]) a {
-        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[variant]) a {
-        padding-right: var(--space-300);
-        padding-left: var(--space-400);
+        padding-right: var(--action-after-slot-padding);
       }
 
       :host(.has-before[variant]) a {
-        padding-right: var(--space-400);
-        padding-left: var(--space-300);
+        padding-left: var(--action-before-slot-padding);
       }
 
-
-
     </style>
 
     <a
@@ -342,11 +338,11 @@ class u extends HTMLElement {
   waitForPartMap() {
     return new Promise((t) => {
       if (typeof e == "function") return t();
-      const o = () => {
-        typeof e == "function" ? t() : requestAnimationFrame(o);
+      const a = () => {
+        typeof e == "function" ? t() : requestAnimationFrame(a);
       };
-      o();
+      a();
     });
   }
 }
-customElements.define("mui-link", u);
+customElements.get("mui-link") || customElements.define("mui-link", u);

package/dist/esm/components/mui-list/item/index.js

@@ -65,4 +65,4 @@ class e extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-list-item", e);
+customElements.get("mui-list-item") || customElements.define("mui-list-item", e);

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

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