@muibook/components 18.1.0 → 18.2.0

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

@@ -47,7 +47,7 @@ class l extends HTMLElement {
       ::slotted([slot="before"]),
       ::slotted([slot="after"]) {
         flex-shrink: 0;
-        margin-top: var(--body-inline-icon-offset-medium, var(--body-inline-icon-offset, var(--stroke-size-100)));
+        margin-top: var(--body-inline-icon-offset-medium, var(--body-inline-icon-offset, var(--stroke-size-200)));
       }
 
       :host([size="x-small"]) ::slotted([slot="before"]),
@@ -57,12 +57,14 @@ class l extends HTMLElement {
 
       :host([size="small"]) ::slotted([slot="before"]),
       :host([size="small"]) ::slotted([slot="after"]) {
-        margin-top: var(--body-inline-icon-offset-small, var(--body-inline-icon-offset, var(--stroke-size-100)));
+        margin-top: var(
+          --body-inline-icon-offset-small, var(--body-inline-icon-offset)
+        );
       }
 
       :host([size="large"]) ::slotted([slot="before"]),
       :host([size="large"]) ::slotted([slot="after"]) {
-        margin-top: var(--body-inline-icon-offset-large, var(--body-inline-icon-offset, var(--stroke-size-100)));
+        margin-top: var(--body-inline-icon-offset-large, var(--body-inline-icon-offset, var(--stroke-size-050)));
       }
 
       :host([size="x-small"]) p {

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

@@ -379,6 +379,7 @@ class h extends HTMLElement {
     /* Dropdown Slot */
     :host([size][dropdown-slot]) button {
       border-radius: var(--radius-000);
+      white-space: nowrap;
     }
 
     :host([size][dropdown-slot-first]) button {
@@ -514,6 +515,31 @@ class h extends HTMLElement {
       border-radius: var(--action-radius-large);
     }
 
+    /* Dropdown slot corner radius must win over size radius rules */
+    :host([size][dropdown-slot]) button,
+    :host([size][dropdown-slot]) button:hover,
+    :host([size][dropdown-slot]) button:focus,
+    :host([size][dropdown-slot]) button:disabled {
+      border-radius: var(--radius-000);
+      white-space: nowrap;
+    }
+
+    :host([size][dropdown-slot-first]) button,
+    :host([size][dropdown-slot-first]) button:hover,
+    :host([size][dropdown-slot-first]) button:focus,
+    :host([size][dropdown-slot-first]) button:disabled {
+      border-top-left-radius: calc(var(--radius-100) / 2);
+      border-top-right-radius: calc(var(--radius-100) / 2);
+    }
+
+    :host([size][dropdown-slot-last]) button,
+    :host([size][dropdown-slot-last]) button:hover,
+    :host([size][dropdown-slot-last]) button:focus,
+    :host([size][dropdown-slot-last]) button:disabled {
+      border-bottom-left-radius: calc(var(--radius-100) / 2);
+      border-bottom-right-radius: calc(var(--radius-100) / 2);
+    }
+
     :host([size="xx-small"][icon-only]) button {
       height: calc(var(--action-icon-only-size-x-small) - var(--space-100));
       width: calc(var(--action-icon-only-size-x-small) - var(--space-100));
@@ -637,19 +663,19 @@ class h extends HTMLElement {
     this.shadowRoot.innerHTML = o, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
       const s = this.shadowRoot;
       if (!s) return;
-      const e = s.querySelector("slot:not([name])"), t = s.querySelector('slot[name="before"]'), a = s.querySelector('slot[name="after"]'), i = (c) => c ? c.assignedNodes({ flatten: !0 }).some((n) => {
+      const e = s.querySelector("slot:not([name])"), t = s.querySelector('slot[name="before"]'), a = s.querySelector('slot[name="after"]'), i = (d) => d ? d.assignedNodes({ flatten: !0 }).some((n) => {
         var l;
         return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && !!((l = n.textContent) != null && l.trim());
-      }) : !1, d = i(t), u = i(a);
-      this.toggleAttribute("has-before", d), this.toggleAttribute("has-after", u);
+      }) : !1, c = i(t), u = i(a);
+      this.toggleAttribute("has-before", c), this.toggleAttribute("has-after", u);
       const v = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) ?? [];
-      v.every((c) => {
+      v.every((d) => {
         var n;
-        if (c.nodeType === Node.ELEMENT_NODE) {
-          const l = c;
+        if (d.nodeType === Node.ELEMENT_NODE) {
+          const l = d;
           return l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon");
         }
-        return c.nodeType === Node.TEXT_NODE && !((n = c.textContent) != null && n.trim());
+        return d.nodeType === Node.TEXT_NODE && !((n = d.textContent) != null && n.trim());
       }) ? (this.setAttribute("icon-only", ""), this.updateIconSizes(v, !0)) : (this.removeAttribute("icon-only"), [t, e, a].forEach((n) => {
         if (n) {
           const l = n.assignedNodes({ flatten: !0 });
@@ -672,9 +698,9 @@ class h extends HTMLElement {
         t.querySelector('slot[name="before"]'),
         t.querySelector('slot[name="after"]')
       ], i = this.hasAttribute("icon-only");
-      a.forEach((d) => {
-        if (d) {
-          const u = d.assignedNodes({ flatten: !0 });
+      a.forEach((c) => {
+        if (c) {
+          const u = c.assignedNodes({ flatten: !0 });
           this.updateIconSizes(u, i), this.updateAvatarSizes(u), this.updateBadgeSizes(u);
         }
       });

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

@@ -1,4 +1,4 @@
-class a extends HTMLElement {
+class n extends HTMLElement {
   constructor() {
     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);
   }
@@ -7,13 +7,13 @@ class a extends HTMLElement {
   }
   connectedCallback() {
     this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.render(), this.addEventListener("tab-change", this.handleTabChange);
-    const t = this.querySelector("tab-bar");
+    const t = this.querySelector("mui-tab-bar");
     if (t) {
-      const e = t.querySelector("tab-item[active]");
+      const e = t.querySelector("mui-tab-item[active]");
       if (e)
         this.updatePanels(e.id);
       else {
-        const o = t.querySelector("tab-item");
+        const o = t.querySelector("mui-tab-item");
         o && (o.setAttribute("active", ""), this.updatePanels(o.id));
       }
     }
@@ -56,11 +56,11 @@ class a extends HTMLElement {
     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");
+      const s = this.querySelector("mui-tab-bar");
       if (s) {
-        const r = s.querySelector(`tab-item#${o}`);
-        r && (s.querySelectorAll("tab-item").forEach((n) => {
-          n.removeAttribute("active");
+        const r = s.querySelector(`mui-tab-item#${o}`);
+        r && (s.querySelectorAll("mui-tab-item").forEach((i) => {
+          i.removeAttribute("active");
         }), r.setAttribute("active", ""));
       }
     }
@@ -173,7 +173,7 @@ class a extends HTMLElement {
       console.error("❌ Track element not found!");
       return;
     }
-    const s = Array.from(e).findIndex((n) => n.getAttribute("item") === t);
+    const s = Array.from(e).findIndex((i) => i.getAttribute("item") === t);
     if (s === -1) {
       console.warn("⚠️ Panel not found for:", t);
       return;
@@ -183,4 +183,4 @@ class a extends HTMLElement {
     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", a);
+customElements.get("mui-carousel-controller") || customElements.define("mui-carousel-controller", n);

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

@@ -1,4 +1,4 @@
-const o = class o extends HTMLElement {
+const s = class s extends HTMLElement {
   constructor() {
     super(), this.button = null, this.menu = null, this.handleResize = () => {
       var t;
@@ -8,13 +8,13 @@ const o = class o 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"), o.openDropdown === this && (o.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"), s.openDropdown === this && (s.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"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(
+      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(
         new CustomEvent("dropdown-toggle", {
           detail: { open: !1 },
           bubbles: !0
@@ -43,14 +43,14 @@ const o = class o extends HTMLElement {
     const d = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])");
     if (d) {
       const u = () => {
-        const c = d.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "mui-button");
-        c.forEach((s) => {
-          s.removeAttribute("dropdown-slot"), s.removeAttribute("dropdown-slot-first"), s.removeAttribute("dropdown-slot-last");
-        }), c.forEach((s, w) => {
-          s.setAttribute("dropdown-slot", ""), w === 0 && s.setAttribute("dropdown-slot-first", ""), w === c.length - 1 && s.setAttribute("dropdown-slot-last", ""), s._dropdownListenerAdded || (s.addEventListener("click", () => {
+        const c = d.assignedElements({ flatten: !0 }).filter((o) => o.tagName.toLowerCase() === "mui-button");
+        c.forEach((o) => {
+          o.removeAttribute("dropdown-slot"), o.removeAttribute("dropdown-slot-first"), o.removeAttribute("dropdown-slot-last");
+        }), c.forEach((o, w) => {
+          o.hasAttribute("variant") || o.setAttribute("variant", "tertiary"), o.setAttribute("dropdown-slot", ""), w === 0 && o.setAttribute("dropdown-slot-first", ""), w === c.length - 1 && o.setAttribute("dropdown-slot-last", ""), o._dropdownListenerAdded || (o.addEventListener("click", () => {
             var p, f;
-            this.persistent || ((p = this.menu) == null || p.classList.remove("show"), (f = this.menu) == null || f.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
-          }), s._dropdownListenerAdded = !0);
+            this.persistent || ((p = this.menu) == null || p.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 })));
+          }), o._dropdownListenerAdded = !0);
         });
       };
       d.addEventListener("slotchange", u), u();
@@ -71,23 +71,23 @@ const o = class o extends HTMLElement {
     var n;
     if (t.stopPropagation(), !this.menu) return;
     const e = this.menu.classList.contains("show");
-    !e && o.openDropdown && o.openDropdown !== this && o.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
+    !e && s.openDropdown && s.openDropdown !== this && s.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (n = this.menu) == null || n.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 d, i;
       (d = this.menu) == null || d.classList.add("show"), (i = this.menu) == null || i.removeAttribute("inert"), this.adjustPosition();
-    }), o.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
+    }), s.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
   }
   closeMenu(t) {
     var n;
     const e = t.composedPath();
-    this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), o.openDropdown === this && (o.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(), (n = this.menu) == null || n.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
   }
   adjustPosition() {
     if (!this.menu) return;
     const t = this.menu, e = 8, n = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", d = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, i = n.endsWith("rem") ? parseFloat(n) * d : parseFloat(n) || 8;
     t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.maxWidth = "";
-    const r = this.getBoundingClientRect(), l = t.offsetWidth, a = t.offsetHeight, h = window.innerWidth, u = window.innerHeight, v = (this.getAttribute("vertical-position") || "auto").toLowerCase(), c = u - r.bottom, s = r.top, w = a + i, p = c >= w, f = s >= w;
+    const r = this.getBoundingClientRect(), l = t.offsetWidth, a = t.offsetHeight, h = window.innerWidth, u = window.innerHeight, v = (this.getAttribute("vertical-position") || "auto").toLowerCase(), c = u - r.bottom, o = r.top, w = a + i, p = c >= w, f = o >= w;
     let b = r.height + i;
-    v === "up" ? b = f || !p ? -(a + i) : r.height + i : v === "down" ? b = p || !f ? r.height + i : -(a + i) : !p && s > c && (b = -(a + i));
+    v === "up" ? b = f || !p ? -(a + i) : r.height + i : v === "down" ? b = p || !f ? r.height + i : -(a + i) : !p && o > c && (b = -(a + i));
     let m = 0;
     switch (this.getAttribute("position") || "left") {
       case "left":
@@ -168,6 +168,6 @@ const o = class o extends HTMLElement {
     `;
   }
 };
-o.openDropdown = null;
-let g = o;
+s.openDropdown = null;
+let g = s;
 customElements.get("mui-dropdown") || customElements.define("mui-dropdown", g);

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

@@ -1,17 +1,17 @@
-class y extends HTMLElement {
+class T extends HTMLElement {
   constructor() {
     super(), this.openTimer = null, this.closeTimer = null, this.hasOpenedOnce = !1, this.boundReposition = () => this.positionTooltip(), this.boundDocPointer = (t) => {
       t.composedPath().includes(this) || this.close(!0);
     }, this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["placement", "open", "delay", "initial-delay"];
+    return ["placement", "open", "delay", "initial-delay", "size"];
   }
   connectedCallback() {
-    this.hasAttribute("placement") || this.setAttribute("placement", "top"), this.render(), this.setupEvents();
+    this.hasAttribute("placement") || this.setAttribute("placement", "top"), this.render(), this.setupEvents(), this.syncTriggerSize();
   }
   attributeChangedCallback() {
-    this.shadowRoot && this.hasAttribute("open") && requestAnimationFrame(() => this.positionTooltip());
+    this.shadowRoot && (this.syncTriggerSize(), this.hasAttribute("open") && requestAnimationFrame(() => this.positionTooltip()));
   }
   render() {
     if (!this.shadowRoot) return;
@@ -102,11 +102,32 @@ class y extends HTMLElement {
     `;
   }
   setupEvents() {
-    var o;
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".trigger");
-    t && (t.addEventListener("mouseenter", () => this.openWithDelay()), t.addEventListener("mouseleave", () => this.closeWithDelay()), t.addEventListener("focusin", () => this.openWithDelay()), t.addEventListener("focusout", () => this.close(!0)), this.addEventListener("keydown", (h) => {
-      h.key === "Escape" && this.close(!0);
-    }));
+    var r, p;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".trigger");
+    if (!t) return;
+    const o = (p = this.shadowRoot) == null ? void 0 : p.querySelector('slot[name="trigger"]');
+    t.addEventListener("mouseenter", () => this.openWithDelay()), t.addEventListener("mouseleave", () => this.closeWithDelay()), t.addEventListener("focusin", () => this.openWithDelay()), t.addEventListener("focusout", () => this.close(!0)), o == null || o.addEventListener("slotchange", () => this.syncTriggerSize()), this.addEventListener("keydown", (m) => {
+      m.key === "Escape" && this.close(!0);
+    });
+  }
+  syncTriggerSize() {
+    var u, i;
+    const t = (u = this.shadowRoot) == null ? void 0 : u.querySelector('slot[name="trigger"]');
+    if (!t) return;
+    const o = this.getAttribute("size") || ((i = this.closest("mui-body")) == null ? void 0 : i.getAttribute("size")) || "medium", r = {
+      "x-small": "x-small",
+      small: "small",
+      medium: "small",
+      large: "medium"
+    }, p = {
+      "x-small": "xx-small",
+      small: "x-small",
+      medium: "small",
+      large: "medium"
+    }, m = r[o] || "small", h = p[o] || "small";
+    t.assignedElements({ flatten: !0 }).forEach((s) => {
+      s.tagName.startsWith("MUI-ICON-") && !s.hasAttribute("size") && s.setAttribute("size", m), s.tagName === "MUI-BADGE" && !s.hasAttribute("size") && s.setAttribute("size", h);
+    });
   }
   getDelay() {
     const t = Number(this.getAttribute("delay"));
@@ -131,16 +152,16 @@ class y extends HTMLElement {
     this.openTimer && (window.clearTimeout(this.openTimer), this.openTimer = null), this.closeTimer && (window.clearTimeout(this.closeTimer), this.closeTimer = null), t && this.setAttribute("closing-immediate", ""), this.removeAttribute("open"), t && requestAnimationFrame(() => this.removeAttribute("closing-immediate")), window.removeEventListener("resize", this.boundReposition), window.removeEventListener("scroll", this.boundReposition, !0), document.removeEventListener("pointerdown", this.boundDocPointer, !0);
   }
   positionTooltip() {
-    var u, g, b, f;
-    const t = (u = this.shadowRoot) == null ? void 0 : u.querySelector(".trigger"), o = (g = this.shadowRoot) == null ? void 0 : g.querySelector(".tooltip");
+    var b, f, w, v;
+    const t = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".trigger"), o = (f = this.shadowRoot) == null ? void 0 : f.querySelector(".tooltip");
     if (!o || !t) return;
-    const h = (b = this.shadowRoot) == null ? void 0 : b.querySelector('slot[name="trigger"]'), w = ((f = h == null ? void 0 : h.assignedElements({ flatten: !0 })) == null ? void 0 : f[0]) || null || t, d = this.getAttribute("placement") || "top", e = w.getBoundingClientRect(), p = this.getBoundingClientRect(), i = o.getBoundingClientRect(), c = window.innerHeight, m = window.innerWidth, n = 8, r = 8;
-    let s = d;
-    d === "top" && e.top - i.height - r < n && (s = "bottom"), d === "bottom" && e.bottom + i.height + r > c - n && (s = "top"), d === "left" && e.left - i.width - r < n && (s = "right"), d === "right" && e.right + i.width + r > m - n && (s = "left"), o.setAttribute("data-placement", s);
-    let a = 0, l = 0;
-    s === "top" ? (a = e.top - i.height - r, l = e.left + e.width / 2 - i.width / 2) : s === "bottom" ? (a = e.bottom + r, l = e.left + e.width / 2 - i.width / 2) : s === "left" ? (a = e.top + e.height / 2 - i.height / 2, l = e.left - i.width - r) : (a = e.top + e.height / 2 - i.height / 2, l = e.right + r), a = Math.max(n, Math.min(a, c - i.height - n)), l = Math.max(n, Math.min(l, m - i.width - n));
-    const v = a - p.top, x = l - p.left;
-    o.style.top = `${v}px`, o.style.left = `${x}px`;
+    const r = (w = this.shadowRoot) == null ? void 0 : w.querySelector('slot[name="trigger"]'), m = ((v = r == null ? void 0 : r.assignedElements({ flatten: !0 })) == null ? void 0 : v[0]) || null || t, h = this.getAttribute("placement") || "top", e = m.getBoundingClientRect(), u = this.getBoundingClientRect(), i = o.getBoundingClientRect(), s = window.innerHeight, g = window.innerWidth, n = 8, a = 8;
+    let l = h;
+    h === "top" && e.top - i.height - a < n && (l = "bottom"), h === "bottom" && e.bottom + i.height + a > s - n && (l = "top"), h === "left" && e.left - i.width - a < n && (l = "right"), h === "right" && e.right + i.width + a > g - n && (l = "left"), o.setAttribute("data-placement", l);
+    let d = 0, c = 0;
+    l === "top" ? (d = e.top - i.height - a, c = e.left + e.width / 2 - i.width / 2) : l === "bottom" ? (d = e.bottom + a, c = e.left + e.width / 2 - i.width / 2) : l === "left" ? (d = e.top + e.height / 2 - i.height / 2, c = e.left - i.width - a) : (d = e.top + e.height / 2 - i.height / 2, c = e.right + a), d = Math.max(n, Math.min(d, s - i.height - n)), c = Math.max(n, Math.min(c, g - i.width - n));
+    const x = d - u.top, y = c - u.left;
+    o.style.top = `${x}px`, o.style.left = `${y}px`;
   }
 }
-customElements.get("mui-hint") || customElements.define("mui-hint", y);
+customElements.get("mui-hint") || customElements.define("mui-hint", T);

package/dist/esm/components/mui-tabs/tab-bar/index.js

@@ -46,11 +46,11 @@ class l extends HTMLElement {
       h && (this.setActiveTab(h), h.focus());
     }), s.forEach((t, i) => {
       t.classList.remove("first", "middle", "last", "only"), s.length === 1 ? t.classList.add("only") : i === 0 ? t.classList.add("first") : i === s.length - 1 ? t.classList.add("last") : t.classList.add("middle");
-    }), s.forEach((t) => {
-      const i = t;
-      i.addEventListener("click", () => {
-        this.setActiveTab(i);
-      });
+    }), this.addEventListener("click", (t) => {
+      const r = (typeof t.composedPath == "function" ? t.composedPath() : []).find(
+        (h) => h instanceof HTMLElement && h.tagName.toLowerCase() === "mui-tab-item"
+      ), n = t.target instanceof HTMLElement ? t.target.closest("mui-tab-item") : null, o = r || n;
+      !o || !this.contains(o) || this.setActiveTab(o);
     }), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>

package/dist/esm/css/mui-brand.css

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Thu, 19 Mar 2026 13:05:27 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Sat, 21 Mar 2026 05:19:16 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */
@@ -172,6 +172,7 @@
   --stroke-size-300: 3px;
   --stroke-size-400: 4px;
   --stroke-size-500: 5px;
+  --stroke-size-050: 0.5px;
   --stroke-solid: solid;
   --stroke-outset: outset;
   --speed-100: 0.1s;