@muibook/components 9.0.0 → 10.0.0

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

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class d extends HTMLElement {
   static get observedAttributes() {
     return ["condensed"];
   }
@@ -8,41 +8,41 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(o, r, a) {
-    o === "condensed" && this.updateSlottedContent();
+  attributeChangedCallback(s, a, r) {
+    s === "condensed" && this.updateSlottedContent();
   }
   updateSlottedContent() {
     requestAnimationFrame(() => {
       if (!this.shadowRoot) return;
-      const o = this.shadowRoot.querySelector("slot");
-      if (!o) return;
-      const r = o.assignedNodes({ flatten: !0 });
-      this.classList.remove("inner-space", "has-card-slat-group", "has-accordion-slat-group");
-      let a = !1;
-      r.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((s) => {
-            s.classList.add("card-slot");
-          }), a = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((e) => {
-            const s = e.getAttribute("variant");
-            (s === "action" || s === "row") && (e.classList.add("card-slot"), this.hasAttribute("condensed") ? e.classList.add("condensed-slot") : e.classList.remove("condensed-slot"));
+      const s = this.shadowRoot.querySelector("slot");
+      if (!s) return;
+      const a = s.assignedNodes({ flatten: !0 });
+      this.removeAttribute("inner-space"), this.removeAttribute("has-card-slat-group"), this.removeAttribute("has-accordion-slat-group");
+      let r = !1;
+      a.forEach((i) => {
+        if (i.nodeType === Node.ELEMENT_NODE) {
+          const t = i, n = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
+          n instanceof HTMLElement && (n.querySelectorAll("mui-accordion-block").forEach((o) => {
+            o.setAttribute("card-slot", "");
+          }), r = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((e) => {
+            const o = e.getAttribute("variant");
+            (o === "action" || o === "row") && (e.setAttribute("card-slot", ""), this.hasAttribute("condensed") ? e.setAttribute("condensed-slot", "") : e.removeAttribute("condensed-slot"));
           });
-          const n = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
-          n instanceof HTMLElement && (n.querySelectorAll("mui-cell").forEach((s) => {
-            s.classList.add("card-slot");
-          }), a = !0);
-          const d = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
-          d.length && (a = !0, d.forEach((e) => {
-            e.setAttribute("usage", "card"), e.closest("mui-accordion-block") ? this.classList.add("has-accordion-slat-group") : this.classList.add("inner-space", "has-card-slat-group");
+          const c = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
+          c instanceof HTMLElement && (c.querySelectorAll("mui-cell").forEach((o) => {
+            o.setAttribute("card-slot", "");
+          }), r = !0);
+          const l = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
+          l.length && (r = !0, l.forEach((e) => {
+            e.setAttribute("usage", "card"), e.closest("mui-accordion-block") ? this.setAttribute("has-accordion-slat-group", "") : (this.setAttribute("inner-space", ""), this.setAttribute("has-card-slat-group", ""));
           }));
         }
-      }), !a && !this.hasAttribute("condensed") && this.classList.add("inner-space");
+      }), !r && !this.hasAttribute("condensed") && this.setAttribute("inner-space", "");
     });
   }
   render() {
     if (!this.shadowRoot) return;
-    const o = (
+    const s = (
       /*html*/
       `
       <style>
@@ -51,20 +51,20 @@ class l extends HTMLElement {
           box-sizing: border-box;
         }
         
-        :host(.inner-space) {
+        :host([inner-space]) {
           padding: var(--space-500);
         }
         @media (min-width: 768px) {
-          :host(.inner-space) {
+          :host([inner-space]) {
             padding: var(--space-600);
           }
         }
 
-        :host(.has-card-slat-group) {
+        :host([has-card-slat-group]) {
           padding-bottom: var(--space-200);
         }
         @media (min-width: 768px) {
-        :host(.has-card-slat-group) {
+        :host([has-card-slat-group]) {
           padding-bottom: var(--space-500);
         }
         }
@@ -73,7 +73,7 @@ class l extends HTMLElement {
       <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = o, this.updateSlottedContent();
+    this.shadowRoot.innerHTML = s, this.updateSlottedContent();
   }
 }
-customElements.get("mui-card-body") || customElements.define("mui-card-body", l);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", d);

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

@@ -7,7 +7,7 @@ class n extends HTMLElement {
   }
   connectedCallback() {
     if (!this.shadowRoot) return;
-    let d = (
+    let r = (
       /*html*/
       `
     <style>
@@ -19,24 +19,24 @@ class n extends HTMLElement {
       ::slotted(*:last-child) {
         margin-bottom: 0;
       }
-      ::slotted(.inner-space-top) {
-      padding-top: 0;
+      ::slotted([inner-space-top]) {
+        padding-top: 0;
       }
     </style>
     <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = d;
+    this.shadowRoot.innerHTML = r;
     const t = this.shadowRoot.querySelector("slot");
     t && t.addEventListener("slotchange", () => {
-      const a = t.assignedElements(), r = a.some((o) => {
+      const a = t.assignedElements(), d = a.some((o) => {
         var e;
         return ((e = o.tagName) == null ? void 0 : e.toLowerCase()) === "mui-card-header";
       }), s = a.find((o) => {
         var e;
         return ((e = o.tagName) == null ? void 0 : e.toLowerCase()) === "mui-card-body";
       });
-      s && (r ? s.classList.add("inner-space-top") : s.classList.remove("inner-space-top"));
+      s && (d ? s.setAttribute("inner-space-top", "") : s.removeAttribute("inner-space-top"));
     });
   }
 }

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

@@ -14,17 +14,17 @@ class c extends HTMLElement {
           box-sizing: border-box;
         }
 
-        :host(.inner-space) {
+        :host([inner-space]) {
           padding: var(--space-400) var(--space-500);
         }
 
         @media (min-width: 768px) {
-          :host(.inner-space) {
+          :host([inner-space]) {
             padding: var(--space-500) var(--space-600);
           }
         }
 
-        :host(.hidden) {
+        :host([hidden]) {
           display: none;
         }
 
@@ -33,7 +33,7 @@ class c extends HTMLElement {
           border-bottom-left-radius: calc(var(--card-radius) - 1px);
         }
 
-        :host(.has-button-group) {
+        :host([has-button-group]) {
           padding-top: 0;
         }
 
@@ -51,17 +51,17 @@ class c extends HTMLElement {
         return e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && ((o = e.textContent) == null ? void 0 : o.trim()) !== "";
       });
       if (r.length === 0) {
-        this.classList.add("hidden");
+        this.setAttribute("hidden", "");
         return;
       }
-      let a = !1, i = !1;
+      let i = !1, a = !1;
       r.forEach((e) => {
-        var o, d;
+        var o, n;
         if (e.nodeType === Node.ELEMENT_NODE) {
-          const t = e, n = t.tagName.toLowerCase();
-          (n === "mui-code" || (o = t.querySelector) != null && o.call(t, "mui-code")) && (a = !0), (n === "mui-button-group" || (d = t.querySelector) != null && d.call(t, "mui-button-group")) && (i = !0);
+          const t = e, d = t.tagName.toLowerCase();
+          (d === "mui-code" || (o = t.querySelector) != null && o.call(t, "mui-code")) && (i = !0), (d === "mui-button-group" || (n = t.querySelector) != null && n.call(t, "mui-button-group")) && (a = !0);
         }
-      }), a || this.classList.add("inner-space"), i && this.classList.add("has-button-group");
+      }), i || this.setAttribute("inner-space", ""), a && this.setAttribute("has-button-group", "");
     });
   }
 }

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

@@ -1,13 +1,68 @@
-class r extends HTMLElement {
+class a extends HTMLElement {
   constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" }), this.handleTabChange = this.handleTabChange.bind(this);
+    super(), this.currentIndex = 0, this.boundMouseEnter = () => this.pauseAutoRotate(), this.boundMouseLeave = () => this.resumeAutoRotate(), this.boundFocusIn = () => this.pauseAutoRotate(), this.boundFocusOut = () => this.resumeAutoRotate(), this.shadow = this.attachShadow({ mode: "open" }), this.handleTabChange = this.handleTabChange.bind(this);
+  }
+  static get observedAttributes() {
+    return ["auto-rotate", "rotate-interval"];
   }
   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);
+      const e = t.querySelector("tab-item[active]");
+      if (e)
+        this.updatePanels(e.id);
+      else {
+        const o = t.querySelector("tab-item");
+        o && (o.setAttribute("active", ""), this.updatePanels(o.id));
+      }
+    }
+    if (this.addEventListener("mouseenter", this.boundMouseEnter), this.addEventListener("mouseleave", this.boundMouseLeave), this.addEventListener("focusin", this.boundFocusIn), this.addEventListener("focusout", this.boundFocusOut), this.hasAttribute("auto-rotate")) {
+      const e = new IntersectionObserver((o) => {
+        o[0].isIntersecting && (e.disconnect(), setTimeout(() => {
+          const s = this.shadow.querySelector(".carousel-track");
+          s && s.offsetWidth > 0 && this.startAutoRotate();
+        }, 300));
+      });
+      e.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    this.stopAutoRotate(), this.removeEventListener("mouseenter", this.boundMouseEnter), this.removeEventListener("mouseleave", this.boundMouseLeave), this.removeEventListener("focusin", this.boundFocusIn), this.removeEventListener("focusout", this.boundFocusOut);
+  }
+  attributeChangedCallback(t, e, o) {
+    e !== o && (t === "auto-rotate" && (o !== null ? this.startAutoRotate() : this.stopAutoRotate()), t === "rotate-interval" && this.hasAttribute("auto-rotate") && (this.stopAutoRotate(), this.startAutoRotate()));
+  }
+  startAutoRotate() {
+    this.stopAutoRotate();
+    const t = parseInt(this.getAttribute("rotate-interval") || "10000");
+    console.log("🎠 Starting auto-rotate with interval:", t), this.autoRotateInterval = window.setInterval(() => {
+      this.rotateNext();
+    }, t);
+  }
+  stopAutoRotate() {
+    this.autoRotateInterval && (clearInterval(this.autoRotateInterval), this.autoRotateInterval = void 0);
+  }
+  pauseAutoRotate() {
+    this.stopAutoRotate();
+  }
+  resumeAutoRotate() {
+    this.hasAttribute("auto-rotate") && this.startAutoRotate();
+  }
+  rotateNext() {
+    const t = this.querySelectorAll("mui-carousel-panel");
+    if (console.log("🔄 rotateNext called, panels:", t.length, "currentIndex:", this.currentIndex), t.length === 0) return;
+    this.currentIndex = (this.currentIndex + 1) % t.length;
+    const o = t[this.currentIndex].getAttribute("item");
+    if (console.log("➡️ Rotating to index:", this.currentIndex, "itemId:", o), o) {
+      this.updatePanels(o);
+      const s = this.querySelector("tab-bar");
+      if (s) {
+        const r = s.querySelector(`tab-item#${o}`);
+        r && (s.querySelectorAll("tab-item").forEach((n) => {
+          n.removeAttribute("active");
+        }), r.setAttribute("active", ""));
+      }
     }
   }
   render() {
@@ -109,12 +164,23 @@ class r extends HTMLElement {
   `;
   }
   handleTabChange(t) {
-    const o = t;
-    this.updatePanels(o.detail.activeId);
+    const e = t;
+    this.updatePanels(e.detail.activeId);
   }
   updatePanels(t) {
-    const o = this.querySelectorAll("mui-carousel-panel"), e = this.shadow.querySelector(".carousel-track"), s = Array.from(o).findIndex((a) => a.getAttribute("item") === t);
-    s !== -1 && (e.style.transform = `translateX(-${s * 100}%)`);
+    const e = this.querySelectorAll("mui-carousel-panel"), o = this.shadow.querySelector(".carousel-track");
+    if (console.log("🎯 updatePanels called with:", t), !o) {
+      console.error("❌ Track element not found!");
+      return;
+    }
+    const s = Array.from(e).findIndex((n) => n.getAttribute("item") === t);
+    if (s === -1) {
+      console.warn("⚠️ Panel not found for:", t);
+      return;
+    }
+    this.currentIndex = s;
+    const r = `translateX(-${s * 100}%)`;
+    console.log("🎬 Setting transform to:", r), console.log("📏 Current transform:", o.style.transform), console.log("🎨 Current transition:", window.getComputedStyle(o).transition), o.style.transform = r, o.offsetHeight, console.log("✅ After setting transform:", o.style.transform);
   }
 }
-customElements.get("mui-carousel-controller") || customElements.define("mui-carousel-controller", r);
+customElements.get("mui-carousel-controller") || customElements.define("mui-carousel-controller", a);

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

@@ -17,19 +17,19 @@ class d extends HTMLElement {
     requestAnimationFrame(() => {
       const t = this.shadowRoot;
       if (!t) return;
-      const i = t.querySelector('slot[name="before"]'), e = t.querySelector('slot[name="after"]'), a = (o) => o ? o.assignedNodes({ flatten: !0 }).some((s) => {
-        var c;
-        return s.nodeType === Node.ELEMENT_NODE || s.nodeType === Node.TEXT_NODE && !!((c = s.textContent) != null && c.trim());
-      }) : !1, r = a(i), n = a(e);
-      this.classList.toggle("has-before", r), this.classList.toggle("has-after", n), this.forceAvatarSize(i), this.forceAvatarSize(e);
+      const i = t.querySelector('slot[name="before"]'), e = t.querySelector('slot[name="after"]'), a = (s) => s ? s.assignedNodes({ flatten: !0 }).some((r) => {
+        var n;
+        return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE && !!((n = r.textContent) != null && n.trim());
+      }) : !1, o = a(i), c = a(e);
+      this.toggleAttribute("has-before", o), this.toggleAttribute("has-after", c), this.forceAvatarSize(i), this.forceAvatarSize(e);
     });
   }
   forceAvatarSize(t) {
     if (!t) return;
     t.assignedNodes({ flatten: !0 }).forEach((e) => {
       if (e.nodeType === Node.ELEMENT_NODE) {
-        const a = e, r = a.tagName.toLowerCase();
-        r === "mui-avatar" ? a.setAttribute("size", "x-small") : r.startsWith("mui-icon-") && a.setAttribute("size", "medium");
+        const a = e, o = a.tagName.toLowerCase();
+        o === "mui-avatar" ? a.setAttribute("size", "x-small") : o.startsWith("mui-icon-") && a.setAttribute("size", "medium");
       }
     });
   }
@@ -39,6 +39,11 @@ class d extends HTMLElement {
       /*css*/
       `
       :host {
+        display: inline-flex;
+        box-sizing: border-box;
+      }
+
+      .container {
         display: inline-grid;
         align-items: center;
         height: 4rem;
@@ -60,29 +65,29 @@ class d extends HTMLElement {
       /* Before & After Slot
       ========================================= */
       
-      :host([variant="clickable"].has-after.has-before) {
+      :host([has-after][has-before]) .container {
         grid-template-columns: auto 1fr auto;
         padding-right: var(--space-200);
         padding-left: var(--space-200);
       }
 
-      :host([variant="clickable"].has-after) {
+      :host([has-after]) .container {
         grid-template-columns: 1fr auto;
         padding-right: var(--space-200);
       }
 
-      :host([variant="clickable"].has-before) {
+      :host([has-before]) .container {
         grid-template-columns: auto 1fr;
         padding-left: var(--space-200);
       }
 
       /* Usage: input */
-      :host([usage="input"]) {
+      :host([usage="input"]) .container {
         border-radius: var(--input-radius);
       }
 
       /* Hover and focus (natural) */
-      :host([variant="clickable"]:hover) {
+      :host([variant="clickable"]:hover) .container {
         background: var(--chip-background-hover);
         border-color: var(--chip-border-color-hover);
         box-shadow: inset 0 0 0 1px var(--chip-border-color-hover);
@@ -92,15 +97,15 @@ class d extends HTMLElement {
         outline: none;
       }
 
-      :host([variant="clickable"]:focus-visible) {
+      :host([variant="clickable"]:focus-visible) .container {
         background: var(--chip-background-focus);
         border-color: var(--chip-border-color-focus);
         outline: var(--outline-thick);
       }
 
       /* Active: mouse down OR programmatic */
-      :host([variant="clickable"]:active),
-      :host([variant="clickable"][active]) {
+      :host([variant="clickable"]:active) .container,
+      :host([variant="clickable"][active]) .container {
         background: var(--chip-background-active);
         box-shadow: inset 0 0 0 1px var(--chip-border-color-active);
         border-color: var(--chip-border-color-active);
@@ -117,11 +122,11 @@ class d extends HTMLElement {
         fill: var(--chip-icon-fill);
       }
 
-      :host(.has-before) ::slotted(.mui-icon) { 
+      :host([has-before]) ::slotted(.mui-icon) { 
         margin-right: -4px;
       }
 
-      :host(.has-after) ::slotted(.mui-icon) { 
+      :host([has-after]) ::slotted(.mui-icon) { 
         margin-left: -4px;
       }
 
@@ -130,13 +135,13 @@ class d extends HTMLElement {
       /* DISMISS */
 
       /* Disable pointer and focus styles when dismiss attribute is present */
-      :host([dismiss]) {
+      :host([dismiss]) .container {
         grid-template-columns: 1fr auto;
         padding-right: calc(var(--space-100) + 0.1rem);
       }
 
       /* Has Before */
-      :host([dismiss].has-before) {
+      :host([dismiss][has-before]) .container {
         grid-template-columns: auto 1fr auto;
         padding-left: var(--space-200);
       }
@@ -157,13 +162,15 @@ class d extends HTMLElement {
     this.hasAttribute("dismiss") ? (this.shadowRoot.innerHTML = /*html*/
     `
         <style>${t}</style>
-        <slot name="before"></slot>
-        <mui-body size="small" weight="bold">
-          <slot></slot>
-        </mui-body>
-        <mui-button part="dismiss-btn" variant="tertiary" aria-label="Remove chip">
-          <mui-icon-close size="x-small"></mui-icon-close>
-        </mui-button>
+        <span class="container">
+          <slot name="before"></slot>
+          <mui-body size="small" weight="bold">
+            <slot></slot>
+          </mui-body>
+          <mui-button part="dismiss-btn" variant="tertiary" aria-label="Remove chip">
+            <mui-icon-close size="x-small"></mui-icon-close>
+          </mui-button>
+        </span>
       `, (i = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || i.addEventListener("click", (e) => {
       e.stopPropagation(), this.dispatchEvent(
         new CustomEvent("dismiss", {
@@ -175,11 +182,13 @@ class d extends HTMLElement {
     })) : (this.setAttribute("variant", "clickable"), this.shadowRoot.innerHTML = /*html*/
     `
           <style>${t}</style>
-          <slot name="before"></slot>
-          <mui-body size="small" weight="bold">
-            <slot></slot>
-          </mui-body>
-          <slot name="after"></slot>
+          <span class="container">
+            <slot name="before"></slot>
+            <mui-body size="small" weight="bold">
+              <slot></slot>
+            </mui-body>
+            <slot name="after"></slot>
+          </span>
         `);
   }
 }

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

@@ -1,4 +1,4 @@
-const s = class s extends HTMLElement {
+const n = class n extends HTMLElement {
   constructor() {
     super(), this.button = null, this.menu = null, this.handleResize = () => {
       var t;
@@ -8,13 +8,13 @@ const s = class s extends HTMLElement {
       (t = this.menu) != null && t.classList.contains("show") && this.adjustPosition();
     }, this.handleFocusOut = (t) => {
       var e;
-      this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+      this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), n.openDropdown === this && (n.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
     }, this.attachShadow({ mode: "open" });
   }
   handleKeyDown(t) {
     if (t.key === "Escape") {
       if (!this.menu) return;
-      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(
+      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), n.openDropdown === this && (n.openDropdown = null), this.dispatchEvent(
         new CustomEvent("dropdown-toggle", {
           detail: { open: !1 },
           bubbles: !0
@@ -28,34 +28,34 @@ const s = class s extends HTMLElement {
   get persistent() {
     return this.hasAttribute("persistent");
   }
-  attributeChangedCallback(t, e, i) {
-    t === "zindex" && this.menu && (this.menu.style.zIndex = i ?? "1"), t === "position" && this.menu && this.adjustPosition();
+  attributeChangedCallback(t, e, o) {
+    t === "zindex" && this.menu && (this.menu.style.zIndex = o ?? "1"), t === "position" && this.menu && this.adjustPosition();
   }
   connectedCallback() {
-    var r, a, l, u, h;
+    var r, i, u, c, a;
     this.render(), this.menu = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".dropdown-menu");
     const t = this.getAttribute("zindex") || "1";
-    this.menu && (this.menu.style.zIndex = t), this.menu && this.menu.setAttribute("inert", "true"), (a = this.menu) == null || a.addEventListener("focusout", this.handleFocusOut);
-    const e = (l = this.shadowRoot) == null ? void 0 : l.querySelector('slot[name="action"]'), i = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) || [];
-    this.button = i.find(
-      (o) => o instanceof HTMLElement && o.tagName.toLowerCase() === "mui-button"
+    this.menu && (this.menu.style.zIndex = t), this.menu && this.menu.setAttribute("inert", "true"), (i = this.menu) == null || i.addEventListener("focusout", this.handleFocusOut);
+    const e = (u = this.shadowRoot) == null ? void 0 : u.querySelector('slot[name="action"]'), o = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) || [];
+    this.button = o.find(
+      (l) => l instanceof HTMLElement && l.tagName.toLowerCase() === "mui-button"
     );
-    const n = (u = this.shadowRoot) == null ? void 0 : u.querySelector("slot:not([name])");
-    if (n) {
-      const o = () => {
-        const c = n.assignedElements({ flatten: !0 });
-        c.forEach((d) => {
-          d.classList.remove("dropdown-slot", "dropdown-slot-first", "dropdown-slot-last");
-        }), c.forEach((d, p) => {
-          d.setAttribute("variant", "tertiary"), d.classList.add("dropdown-slot"), p === 0 && d.classList.add("dropdown-slot-first"), p === c.length - 1 && d.classList.add("dropdown-slot-last"), d._dropdownListenerAdded || (d.addEventListener("click", () => {
-            var w, f;
-            this.persistent || ((w = this.menu) == null || w.classList.remove("show"), (f = this.menu) == null || f.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
-          }), d._dropdownListenerAdded = !0);
+    const d = (c = this.shadowRoot) == null ? void 0 : c.querySelector("slot:not([name])");
+    if (d) {
+      const l = () => {
+        const h = d.assignedElements({ flatten: !0 });
+        h.forEach((s) => {
+          s.removeAttribute("dropdown-slot"), s.removeAttribute("dropdown-slot-first"), s.removeAttribute("dropdown-slot-last");
+        }), h.forEach((s, w) => {
+          s.setAttribute("variant", "tertiary"), s.setAttribute("dropdown-slot", ""), w === 0 && s.setAttribute("dropdown-slot-first", ""), w === h.length - 1 && s.setAttribute("dropdown-slot-last", ""), s._dropdownListenerAdded || (s.addEventListener("click", () => {
+            var p, m;
+            this.persistent || ((p = this.menu) == null || p.classList.remove("show"), (m = this.menu) == null || m.setAttribute("inert", "true"), n.openDropdown === this && (n.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+          }), s._dropdownListenerAdded = !0);
         });
       };
-      n.addEventListener("slotchange", o), o();
+      d.addEventListener("slotchange", l), l();
     }
-    this.toggleMenu = this.toggleMenu.bind(this), this.closeMenu = this.closeMenu.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this), (h = this.button) == null || h.addEventListener("click", this.toggleMenu), document.addEventListener("click", this.closeMenu), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleResize), window.addEventListener("scroll", this.handleScroll, !0);
+    this.toggleMenu = this.toggleMenu.bind(this), this.closeMenu = this.closeMenu.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this), (a = this.button) == null || a.addEventListener("click", this.toggleMenu), document.addEventListener("click", this.closeMenu), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleResize), window.addEventListener("scroll", this.handleScroll, !0);
   }
   disconnectedCallback() {
     var t, e;
@@ -68,41 +68,41 @@ const s = class s extends HTMLElement {
     }, 150);
   }
   toggleMenu(t) {
-    var i;
+    var o;
     if (t.stopPropagation(), !this.menu) return;
     const e = this.menu.classList.contains("show");
-    !e && s.openDropdown && s.openDropdown !== this && s.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (i = this.menu) == null || i.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
-      var n, r;
-      (n = this.menu) == null || n.classList.add("show"), (r = this.menu) == null || r.removeAttribute("inert"), this.adjustPosition();
-    }), s.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
+    !e && n.openDropdown && n.openDropdown !== this && n.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (o = this.menu) == null || o.setAttribute("inert", "true"), n.openDropdown === this && (n.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
+      var d, r;
+      (d = this.menu) == null || d.classList.add("show"), (r = this.menu) == null || r.removeAttribute("inert"), this.adjustPosition();
+    }), n.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
   }
   closeMenu(t) {
-    var i;
+    var o;
     const e = t.composedPath();
-    this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (i = this.menu) == null || i.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+    this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (o = this.menu) == null || o.setAttribute("inert", "true"), n.openDropdown === this && (n.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
   }
   adjustPosition() {
     if (!this.menu) return;
-    const t = this.menu, e = 8, i = 8;
+    const t = this.menu, e = 8, o = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", d = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, r = o.endsWith("rem") ? parseFloat(o) * d : parseFloat(o) || 8;
     t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.maxWidth = "";
-    const n = this.getBoundingClientRect(), r = t.offsetWidth, a = t.offsetHeight, l = window.innerWidth, u = window.innerHeight;
-    let h = n.height + i;
-    u - n.bottom < a + i && n.top > u - n.bottom && (h = -(a + i));
-    let o = 0;
+    const i = this.getBoundingClientRect(), u = t.offsetWidth, c = t.offsetHeight, a = window.innerWidth, l = window.innerHeight;
+    let h = i.height + r;
+    l - i.bottom < c + r && i.top > l - i.bottom && (h = -(c + r));
+    let s = 0;
     switch (this.getAttribute("position") || "left") {
       case "left":
-        o = 0;
+        s = 0;
         break;
       case "center":
-        o = (n.width - r) / 2;
+        s = (i.width - u) / 2;
         break;
       case "right":
       default:
-        o = n.width - r;
+        s = i.width - u;
         break;
     }
-    const d = e - n.left, p = l - e - (n.left + r);
-    o = Math.max(d, Math.min(o, p)), r > l - e * 2 && (t.style.maxWidth = `${l - e * 2}px`), t.style.top = `${h}px`, t.style.left = `${o}px`;
+    const p = e - i.left, m = a - e - (i.left + u);
+    s = Math.max(p, Math.min(s, m)), u > a - e * 2 && (t.style.maxWidth = `${a - e * 2}px`), t.style.top = `${h}px`, t.style.left = `${s}px`;
   }
   render() {
     this.shadowRoot.innerHTML = /*html*/
@@ -119,9 +119,10 @@ const s = class s extends HTMLElement {
           transform: translateY(-0.25rem);
           transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
           /* End */
-          min-width: 150px;
+          min-width: var(--dropdown-min-width, 15rem);
           position: absolute;
           z-index: 1;
+          box-sizing: border-box;
           border: var(--border-thin);
           /* Unique Styles */
           background: var(--dropdown-background);
@@ -167,6 +168,6 @@ const s = class s extends HTMLElement {
     `;
   }
 };
-s.openDropdown = null;
-let m = s;
-customElements.get("mui-dropdown") || customElements.define("mui-dropdown", m);
+n.openDropdown = null;
+let f = n;
+customElements.get("mui-dropdown") || customElements.define("mui-dropdown", f);