@muibook/components 1.6.0 → 3.0.0

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

@@ -1,19 +1,35 @@
-import { getPartMap as s } from "../../utils/part-map/index.js";
+import { getPartMap as e } from "../../utils/part-map/index.js";
 class u extends HTMLElement {
   static get observedAttributes() {
     return ["target", "href", "variant", "weight", "size"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
-    const r = this.getAttribute("size") || "medium", o = this.getAttribute("weight") || "regular";
-    this.setAttribute("size", r), this.setAttribute("weight", o);
   }
   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(), requestAnimationFrame(() => this.updateSlotState());
+  }
+  updateSlotState() {
+    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 = (a == null ? void 0 : a.assignedNodes({ flatten: !0 })) ?? [], h = n.length > 0 && n.every(
+      (o) => {
+        var r;
+        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);
+  }
+  render() {
     if (!this.shadowRoot) return;
-    await this.waitForPartMap();
-    let o = (
-      /*html*/
-      `
+    const t = e("text", "spacing", "layout", "visual");
+    this.shadowRoot.innerHTML = /*html*/
+    `
     <style>
 
       :host { display: inline-flex; width: auto; text-align: initial }
@@ -80,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);
@@ -95,25 +111,25 @@ class u extends HTMLElement {
       :host([variant="primary"]) a {
         background: var(--action-primary-background);
         color: var(--action-primary-text-color);
-        border: var(--action-primary-stroke);
+        border: var(--action-primary-border);
       }
 
       :host([variant="primary"]) a: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"]) a: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"]) a: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;
       }
 
@@ -127,25 +143,25 @@ class u extends HTMLElement {
       :host([variant="secondary"]) a {
         background: var(--action-secondary-background);
         color: var(--action-secondary-text-color);
-        border: var(--action-secondary-stroke); 
+        border: var(--action-secondary-border); 
       }
 
       :host([variant="secondary"]) a: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"]) a: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"]) a: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;
       }
 
@@ -159,25 +175,25 @@ class u extends HTMLElement {
       :host([variant="tertiary"]) a {
         background: var(--action-tertiary-background);
         color: var(--action-tertiary-text-color);
-        border: var(--action-tertiary-stroke);
+        border: var(--action-tertiary-border);
       }
 
       :host([variant="tertiary"]) a:hover {
         color: var(--action-tertiary-text-color-hover);
         background: var(--action-tertiary-background-hover);
-        border: var(--action-tertiary-stroke-hover);
+        border: var(--action-tertiary-border-hover);
       }
 
       :host([variant="tertiary"]) a:focus-visible {
         color: var(--action-tertiary-text-color-focus);
         background: var(--action-tertiary-background-focus); 
-        border: var(--action-tertiary-stroke-focus);
+        border: var(--action-tertiary-border-focus);
       }
 
       :host([variant="tertiary"]) a: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;
       }
 
@@ -191,25 +207,25 @@ class u extends HTMLElement {
       :host([variant="attention"]) a {
         background: var(--action-attention-background);
         color: var(--action-attention-text-color);
-        border: var(--action-attention-stroke);
+        border: var(--action-attention-border);
       }
 
       :host([variant="attention"]) a: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"]) a: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"]) a: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;
       }
 
@@ -294,26 +310,22 @@ 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
-      part="${s("text", "spacing", "layout", "visual")}" 
+      part="${t}" 
       target="${this.getAttribute("target") || "_self"}" 
       href="${this.getAttribute("href") || "#"}"
       >
@@ -321,33 +333,16 @@ class u extends HTMLElement {
       <slot></slot>
       <slot name="after"></slot>
     </a>
-    `
-    );
-    this.shadowRoot.innerHTML = o, await customElements.whenDefined("mui-link"), requestAnimationFrame(() => {
-      const i = this.shadowRoot;
-      if (!i) return;
-      const n = i.querySelector("slot:not([name]"), l = i.querySelector('slot[name="before"]'), d = i.querySelector('slot[name="after"]'), c = (t) => t ? t.assignedNodes({ flatten: !0 }).some((a) => {
-        var e;
-        return a.nodeType === Node.ELEMENT_NODE || a.nodeType === Node.TEXT_NODE && !!((e = a.textContent) != null && e.trim());
-      }) : !1, v = c(l), h = c(d);
-      this.classList.toggle("has-before", v), this.classList.toggle("has-after", h), ((n == null ? void 0 : n.assignedNodes({ flatten: !0 })) ?? []).every((t) => {
-        var a;
-        if (t.nodeType === Node.ELEMENT_NODE) {
-          const e = t;
-          return e.tagName.toLowerCase() === "svg" || e.classList.contains("mui-icon");
-        }
-        return t.nodeType === Node.TEXT_NODE && !((a = t.textContent) != null && a.trim());
-      }) ? this.setAttribute("icon-only", "") : this.removeAttribute("icon-only");
-    });
+    `;
   }
   waitForPartMap() {
-    return new Promise((r) => {
-      if (typeof s == "function") return r();
-      const o = () => {
-        typeof s == "function" ? r() : requestAnimationFrame(o);
+    return new Promise((t) => {
+      if (typeof e == "function") return t();
+      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

@@ -3,7 +3,10 @@ class e extends HTMLElement {
     return ["variant", "size", "weight"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.setAttribute("role", "listitem"), this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("weight") || this.setAttribute("weight", "regular"), this.render();
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.setAttribute("role", "listitem"), this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("weight") || this.setAttribute("weight", "regular"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.render();
   }
   attributeChangedCallback() {
     this.render();
@@ -62,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);

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

@@ -1,10 +1,17 @@
-const l = ["neutral", "positive", "info", "warning", "attention"], b = {
+import "../mui-stack/hstack/index.js";
+import "../mui-stack/vstack/index.js";
+import "../mui-icons/message/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";
+const l = ["neutral", "positive", "info", "warning", "attention"], g = {
   neutral: "background-color: var(--feedback-neutral-background); border: var(--feedback-neutral-border);",
   positive: "background-color: var(--feedback-positive-background); border: var(--feedback-positive-border);",
   info: "background-color: var(--feedback-info-background); border: var(--feedback-info-border);",
   warning: "background-color: var(--feedback-warning-background); border: var(--feedback-warning-border);",
   attention: "background-color: var(--feedback-attention-background); border: var(--feedback-attention-border);"
-}, g = {
+}, b = {
   neutral: "polite",
   positive: "polite",
   info: "polite",
@@ -35,12 +42,12 @@ const l = ["neutral", "positive", "info", "warning", "attention"], b = {
   warning: "mui-icon-warning",
   attention: "mui-icon-attention"
 };
-class p extends HTMLElement {
+class m extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    const a = this.getAttribute("variant") || "neutral", e = l.includes(a) ? a : "neutral", t = this.getAttribute("heading") || "Heading...", o = this.getAttribute("icon") || k[e], n = v[e], i = f[e], r = b[e], s = g[e], c = u[e], d = (
+    const t = this.getAttribute("variant") || "neutral", e = l.includes(t) ? t : "neutral", a = this.getAttribute("heading") || "Heading...", o = this.getAttribute("icon") || k[e], n = v[e], i = f[e], r = g[e], s = b[e], c = u[e], d = (
       /*css*/
       `
       :host {
@@ -77,14 +84,12 @@ class p extends HTMLElement {
             <${o} color="var(${n})"></${o}>
           </div>
           <mui-v-stack space="var(--message-gap-vertical)">
-            <div class="heading" id="message-heading">${t}</div>
-            <slot>
-              <mui-body>Body content...</mui-body>
-            </slot>
+            <div class="heading" id="message-heading">${a}</div>
+            <slot></slot>
           </mui-v-stack>
         </mui-h-stack>
       </section>
       `);
   }
 }
-customElements.define("mui-message", p);
+customElements.get("mui-message") || customElements.define("mui-message", m);

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

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

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

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

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

@@ -5,9 +5,9 @@ class r extends HTMLElement {
   constructor() {
     super();
     const i = this.attachShadow({ mode: "open" });
-    let h = "horizontal", t = "100%", e = "1px";
-    this.setAttribute("role", "presentation"), this.setAttribute("direction", this.getAttribute("direction") || h), this.setAttribute("length", this.getAttribute("length") || t), this.setAttribute("weight", this.getAttribute("weight") || e);
-    const s = (
+    let s = "horizontal", t = "100%", e = "1px";
+    this.setAttribute("role", "presentation"), this.setAttribute("direction", this.getAttribute("direction") || s), this.setAttribute("length", this.getAttribute("length") || t), this.setAttribute("weight", this.getAttribute("weight") || e);
+    const h = (
       /*css*/
       `
       :host {
@@ -25,8 +25,8 @@ class r extends HTMLElement {
     `
     );
     i.innerHTML = `
-    <style>${s}</style>
+    <style>${h}</style>
   `;
   }
 }
-customElements.define("mui-rule", r);
+customElements.get("mui-rule") || customElements.define("mui-rule", r);

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

@@ -1,5 +1,6 @@
-import { getPartMap as i } from "../../utils/part-map/index.js";
-class f extends HTMLElement {
+import { getPartMap as s } from "../../utils/part-map/index.js";
+import "../mui-icons/down-chevron/index.js";
+class p extends HTMLElement {
   constructor() {
     super(), this.partMap = "", this.attachShadow({ mode: "open" });
   }
@@ -7,23 +8,23 @@ class f extends HTMLElement {
     return ["name", "value", "id", "label", "options", "disabled", "hide-label", "variant"];
   }
   async connectedCallback() {
-    await this.waitForPartMap(), this.partMap = i("text", "visual"), this.render(), this.setupListener();
+    await this.waitForPartMap(), this.partMap = s("text", "visual"), this.render(), this.setupListener();
   }
-  attributeChangedCallback(e, o) {
+  attributeChangedCallback(e, r) {
     if (!this.shadowRoot) return;
-    const r = (
+    const o = (
       /** @type {HTMLSelectElement | null} */
       this.shadowRoot.querySelector("select")
     );
-    e === "value" && r && (r.value = o || ""), e === "disabled" && r && (o === null || o === "false" ? r.removeAttribute("disabled") : r.setAttribute("disabled", "")), ["options", "label", "hide-label"].includes(e) && (this.render(), this.setupListener());
+    e === "value" && o && (o.value = r || ""), e === "disabled" && o && (r === null || r === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "")), ["options", "label", "hide-label"].includes(e) && (this.render(), this.setupListener());
   }
   setupListener() {
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("select");
     if (e) {
-      const o = e.cloneNode(!0);
-      e.parentNode && e.parentNode.replaceChild(o, e), o.addEventListener("change", (r) => {
-        const a = r.target;
+      const r = e.cloneNode(!0);
+      e.parentNode && e.parentNode.replaceChild(r, e), r.addEventListener("change", (o) => {
+        const a = o.target;
         a && this.dispatchEvent(
           new CustomEvent("change", {
             detail: { value: a.value },
@@ -36,20 +37,14 @@ class f extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("name") || "", o = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, r = this.getAttribute("label") || "", a = this.getAttribute("value") || "", s = this.hasAttribute("hide-label"), c = this.hasAttribute("disabled"), d = this.getAttribute("options") || "[]", b = this.getAttribute("aria-label") || "", l = this.getAttribute("variant") || "", h = l || "";
-    s && !r && console.warn(
-      "mui-select Accessibility warning: When using 'hide-label', please provide a 'label' attribute so an 'aria-label' can be generated for screen reader support."
-    ), !r && !b && console.warn(
-      "mui-select Accessibility warning: A 'label' or 'aria-label' attribute is required for screen reader accessibility."
-    );
-    const u = s && r ? `aria-label="${r}"` : "";
+    const e = this.getAttribute("name") || "", r = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, o = this.getAttribute("label") || "", a = this.getAttribute("value") || "", i = this.hasAttribute("hide-label"), c = this.hasAttribute("disabled"), d = this.getAttribute("options") || "[]", l = this.getAttribute("variant") || "", h = l || "", b = i && o ? `aria-label="${o}"` : "";
     let n = [];
     try {
       n = JSON.parse(d);
     } catch (t) {
       console.error("Invalid JSON in options attribute", t);
     }
-    const v = n.map((t) => `<option value="${t.value}" ${t.value === a ? "selected" : ""}>${t.label}</option>`).join(""), p = (
+    const u = n.map((t) => `<option value="${t.value}" ${t.value === a ? "selected" : ""}>${t.label}</option>`).join(""), v = (
       /*html*/
       `
       <style>
@@ -143,6 +138,12 @@ class f extends HTMLElement {
           pointer-events: none;
         }
 
+        select:disabled + .chevron {
+          background: transparent;
+          box-shadow: none;
+          opacity: 0.4;
+        }
+
         /* ========================================================================== */
         /* STYLE ADJUSTMENTS WHEN SELECT IS SLOTTED WITHIN INPUT                      */
         /* Related styles unique to this usage is found in the mui-input/index.js     */
@@ -178,29 +179,29 @@ class f extends HTMLElement {
         /* ========================================================================== */
 
       </style>
-      ${r ? (
+      ${o ? (
         /*html*/
-        `<label for="${o}" class="${s ? "vh" : ""}">${r}</label>`
+        `<label for="${r}" class="${i ? "vh" : ""}">${o}</label>`
       ) : ""}
       <div style="position: relative;">
-        <select class="${h}" part="${this.partMap || ""}" name="${e}" id="${o}" ${u} 
+        <select class="${h}" part="${this.partMap || ""}" name="${e}" id="${r}" ${b} 
         ${c ? "disabled" : ""}>
-          ${v}
+          ${u}
         </select>
         <mui-icon-down-chevron class="chevron" size="x-small"></mui-icon-down-chevron>
       </div>
     `
     );
-    this.shadowRoot.innerHTML = p;
+    this.shadowRoot.innerHTML = v;
   }
   waitForPartMap() {
     return new Promise((e) => {
-      if (typeof i == "function") return e();
-      const o = () => {
-        typeof i == "function" ? e() : requestAnimationFrame(o);
+      if (typeof s == "function") return e();
+      const r = () => {
+        typeof s == "function" ? e() : requestAnimationFrame(r);
       };
-      o();
+      r();
     });
   }
 }
-customElements.define("mui-select", f);
+customElements.get("mui-select") || customElements.define("mui-select", p);