@muibook/components 9.1.0 → 10.0.0

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);

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

@@ -0,0 +1,58 @@
+class l extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, c) {
+    (e === "size" || e === "color") && t !== c && 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)", i = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.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: ${s};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+    <path
+      d="M27.122 16.88a.643.643 0 0 1-.638-.566c-.651-4.316-1.154-5.034-5.44-5.6a.664.664 0 0 1-.6-.667c0-.327.245-.604.6-.642 4.163-.553 4.728-1.245 5.44-5.6.049-.34.307-.59.638-.59.32 0 .577.238.626.59.614 4.317 1.203 5.022 5.451 5.6.344.038.59.315.59.642 0 .34-.246.617-.59.667-4.137.692-4.714 1.22-5.45 5.6-.062.327-.308.566-.627.566m-24.324-.403c-1.117 0-1.903-.805-1.903-1.963v-1.573c0-2.995 1.67-4.693 4.592-4.693H19.08c-.43.44-.736 1.07-.736 1.8 0 .88.417 1.648 1.019 2.1H6.003c-.86 0-1.302.403-1.302 1.347v1.02c0 1.157-.786 1.962-1.903 1.962m29.826 2.857a.457.457 0 0 1-.455-.415c-.331-2.14-.282-2.152-2.529-2.567a.48.48 0 0 1-.393-.466c0-.24.16-.44.393-.478 2.235-.327 2.21-.365 2.53-2.542.024-.252.208-.44.454-.44.245 0 .417.176.454.44.307 2.101.282 2.127 2.517 2.542.245.05.405.239.405.478 0 .252-.16.415-.442.466-2.185.352-2.16.402-2.48 2.541-.037.252-.209.44-.454.44M8.408 26.032c-1.044 0-1.646-.604-1.646-1.623 0-.265.074-.642.234-1.158l2.185-6.62c.479-1.522 1.338-2.214 2.701-2.214 1.412 0 2.308.705 2.775 2.215l2.198 6.619c.16.516.22.893.22 1.157 0 1.02-.601 1.624-1.632 1.624-.884 0-1.437-.503-1.658-1.56l-.307-1.032h-3.106l-.307 1.031c-.233 1.058-.773 1.56-1.657 1.56m2.541-5.071h1.94l-.909-3.524h-.122zm-8.151 1.783c-1.252 0-2.284-1.057-2.284-2.34 0-1.284 1.032-2.341 2.284-2.341s2.283 1.057 2.283 2.34c0 1.284-1.03 2.341-2.283 2.341m2.689 10.042c-2.922 0-4.592-1.7-4.592-4.694V26.33c0-1.157.786-1.963 1.903-1.963S4.7 25.173 4.7 26.33v1.22c0 .945.442 1.347 1.301 1.347h17.903c.86 0 1.302-.402 1.302-1.346v-7.588c0-.512.153-.955.421-1.29 0 0 .23.522 1.482.522 1.251 0 1.481-.522 1.481-.522.268.335.422.778.422 1.29v8.129c0 2.995-1.658 4.694-4.592 4.694z"
+    ></path>
+    <path
+      d="M19.194 16.084c0-.92.728-1.667 1.626-1.667.899 0 1.627.747 1.627 1.667l.011 8.28c0 .921-.728 1.668-1.626 1.668-.899 0-1.627-.747-1.627-1.667z"
+    ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-ai") || customElements.define("mui-icon-ai", l);

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

@@ -34,3 +34,11 @@ import "./music-microphone/index.js";
 import "./music-quarter-note/index.js";
 import "./play-rectangle/index.js";
 import "./list-and-film/index.js";
+import "./ai/index.js";
+import "./rectangle/index.js";
+import "./rectangle-media-text/index.js";
+import "./rectangle-dashed/index.js";
+import "./rectangle-left-drawer/index.js";
+import "./rectangle-bottom-panel/index.js";
+import "./pin/index.js";
+import "./pin-slash/index.js";

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

@@ -0,0 +1,53 @@
+class c extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    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"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", o = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, s = o[e] ?? o.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          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="M9.321 22.308c0-2.378 1.847-4.642 4.84-5.8l.334-5.027c-1.669-.939-2.837-1.899-3.359-2.556-.323-.407-.5-.855-.5-1.272 0-.856.667-1.482 1.596-1.482h11.536c.929 0 1.596.626 1.596 1.482 0 .417-.177.865-.5 1.272-.522.657-1.69 1.617-3.36 2.556l.335 5.028c2.993 1.157 4.84 3.42 4.84 5.8 0 1.126-.772 1.887-1.93 1.887h-5.372v5.1c0 1.075-1.001 3.047-1.377 3.047-.375 0-1.377-1.972-1.377-3.046v-5.1h-5.372c-1.158 0-1.93-.762-1.93-1.889"></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-pin") || customElements.define("mui-icon-pin", c);