@muibook/components 9.1.0 → 10.0.0

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

@@ -11,25 +11,25 @@ class o extends HTMLElement {
   static get observedAttributes() {
     return ["label", "disabled", "checked"];
   }
-  attributeChangedCallback(s, e, t) {
-    if (s === "checked" && e !== t && (this._checked = t !== null, this._checkbox && (this._checkbox.checked = this._checked, this._updateIcons())), s === "disabled" && e !== t) {
-      const i = t !== null;
-      this._checkbox && (this._checkbox.disabled = i, this._checkbox.setAttribute("aria-disabled", i.toString())), this._updateDisabledState();
+  attributeChangedCallback(i, e, t) {
+    if (i === "checked" && e !== t && (this._checked = t !== null, this._checkbox && (this._checkbox.checked = this._checked, this._updateIcons())), i === "disabled" && e !== t) {
+      const s = t !== null;
+      this._checkbox && (this._checkbox.disabled = s, this._checkbox.setAttribute("aria-disabled", s.toString())), this._updateDisabledState();
     }
   }
   get checked() {
     return this._checked;
   }
-  set checked(s) {
-    const e = !!s;
+  set checked(i) {
+    const e = !!i;
     this._checked !== e && (this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked, this._checkbox.setAttribute("aria-checked", this._checked.toString()), this._updateIcons()));
   }
   _cleanupListeners() {
     this._checkbox && this._changeHandler && this._checkbox.removeEventListener("change", this._changeHandler);
   }
   _updateDisabledState() {
-    var e, t, i, c;
-    this.hasAttribute("disabled") ? (this.shadowRoot.host.classList.add("disabled"), (e = this._checkbox) == null || e.setAttribute("aria-disabled", "true"), (t = this._checkbox) == null || t.setAttribute("tabindex", "-1")) : (this.shadowRoot.host.classList.remove("disabled"), (i = this._checkbox) == null || i.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
+    var e, t, s, c;
+    this.hasAttribute("disabled") ? ((e = this._checkbox) == null || e.setAttribute("aria-disabled", "true"), (t = this._checkbox) == null || t.setAttribute("tabindex", "-1")) : ((s = this._checkbox) == null || s.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
   }
   _setupListener() {
     this._checkbox && (this._cleanupListeners(), this._changeHandler = () => {
@@ -43,27 +43,27 @@ class o extends HTMLElement {
     }, this._checkbox.addEventListener("change", this._changeHandler));
   }
   _enforceIconSize() {
-    const s = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]'), t = (i) => {
-      if (!i) return;
+    const i = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]'), t = (s) => {
+      if (!s) return;
       const c = () => {
-        i.assignedElements().forEach((h) => {
+        s.assignedElements().forEach((h) => {
           h.tagName.toLowerCase().startsWith("mui-icon") && h.setAttribute("size", "x-small");
         });
       };
-      i.addEventListener("slotchange", c), setTimeout(c, 0);
+      s.addEventListener("slotchange", c), setTimeout(c, 0);
     };
-    t(s), t(e);
+    t(i), t(e);
   }
   _updateIcons() {
-    const s = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]');
-    s && s.assignedElements().forEach((t) => {
+    const i = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]');
+    i && i.assignedElements().forEach((t) => {
       t.style.display = this._checked ? "inline" : "none";
     }), e && e.assignedElements().forEach((t) => {
       t.style.display = this._checked ? "none" : "inline";
     });
   }
   render() {
-    const s = this.getAttribute("label");
+    const i = this.getAttribute("label");
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -125,11 +125,11 @@ class o extends HTMLElement {
           fill: var(--switch-icon);
         }
 
-        :host(.disabled) {
+        :host([disabled]) {
           cursor: not-allowed;
         }
 
-        :host(.disabled) .switch {
+        :host([disabled]) .switch {
           opacity: 0.4;
           pointer-events: none;
         }
@@ -140,7 +140,7 @@ class o extends HTMLElement {
           type="checkbox"
           role="switch"
           aria-checked="${this._checked}"
-          ${s ? `aria-label="${s}"` : ""}
+          ${i ? `aria-label="${i}"` : ""}
         >
         <span class="track">
           <span class="thumb">

package/dist/esm/components/mui-table/cell/index.js

@@ -30,10 +30,10 @@ class t extends HTMLElement {
     }
 
     /* Card Slot (Supports: Table Cell, Accordion Block) */
-    :host(.card-slot:first-of-type) {
+    :host([card-slot]:first-of-type) {
       padding-left: var(--space-500);
     }
-    :host(.card-slot:last-of-type) {
+    :host([card-slot]:last-of-type) {
       padding-right: var(--space-500);
     }
     @media (min-width: 768px) {
@@ -43,10 +43,10 @@ class t extends HTMLElement {
       :host(*:last-of-type) {
         padding-right: var(--space-600);
       }
-      :host(.card-slot:first-of-type) {
+      :host([card-slot]:first-of-type) {
         padding-left: var(--space-600);
       }
-      :host(.card-slot:last-of-type) {
+      :host([card-slot]:last-of-type) {
         padding-right: var(--space-600);
       }
     }

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

@@ -1,4 +1,4 @@
-class o extends HTMLElement {
+class s extends HTMLElement {
   updateIcon(t) {
     if (this.shadowRoot && (this.iconEl && (this.shadowRoot.removeChild(this.iconEl), this.iconEl = void 0), t && t.trim() !== "" && customElements.get(t))) {
       const e = document.createElement(t);
@@ -11,8 +11,8 @@ class o extends HTMLElement {
   static get observedAttributes() {
     return ["active", "icon"];
   }
-  attributeChangedCallback(t, e, s) {
-    t === "active" ? this.updateActiveState() : t === "icon" && this.updateIcon(s);
+  attributeChangedCallback(t, e, o) {
+    t === "active" ? this.updateActiveState() : t === "icon" && this.updateIcon(o);
   }
   connectedCallback() {
     if (!this.shadowRoot) return;
@@ -40,11 +40,11 @@ class o extends HTMLElement {
         border-radius: calc(var(--tab-radius) - 0.2rem);
       }
 
-      :host(.active) {
+      :host([active]) {
         color: var(--tab-text-color-active);
       }
 
-      :host(.active:focus-visible) {
+      :host([active]:focus-visible) {
         outline: var(--outline-thick);
         outline-offset: -5px;
       }
@@ -56,12 +56,12 @@ class o extends HTMLElement {
       const i = document.createElement(t);
       i.setAttribute("color", "var(--tab-icon)"), i.setAttribute("size", "small"), this.shadowRoot.appendChild(i), this.iconEl = i;
     }
-    const s = document.createElement("slot");
-    this.shadowRoot.appendChild(s), this.updateActiveState();
+    const o = document.createElement("slot");
+    this.shadowRoot.appendChild(o), this.updateActiveState();
   }
   updateActiveState() {
     const t = this.hasAttribute("active");
-    this.classList.toggle("active", t), this.setAttribute("role", "tab"), this.setAttribute("aria-selected", t ? "true" : "false"), this.setAttribute("tabindex", t ? "0" : "-1"), this.iconEl && this.iconEl.setAttribute("color", t ? "var(--tab-icon-active)" : "var(--tab-icon)");
+    this.setAttribute("role", "tab"), this.setAttribute("aria-selected", t ? "true" : "false"), this.setAttribute("tabindex", t ? "0" : "-1"), this.iconEl && this.iconEl.setAttribute("color", t ? "var(--tab-icon-active)" : "var(--tab-icon)");
   }
 }
-customElements.get("mui-tab-item") || customElements.define("mui-tab-item", o);
+customElements.get("mui-tab-item") || customElements.define("mui-tab-item", s);

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

@@ -1,4 +1,4 @@
-class c extends HTMLElement {
+class l extends HTMLElement {
   constructor() {
     super(), this._animationSpeed = 200, this.attachShadow({ mode: "open" }), this._handleResize = this._handleResize.bind(this), this._hasInitialized = !1, this._resizeTimeout = null, this._observedTab = null, this._activeTab = null, this._resizeObserver = new ResizeObserver(() => {
       this._activeTab && this._updateHighlight(this._activeTab);
@@ -8,23 +8,23 @@ class c extends HTMLElement {
     const i = this.getAttribute("speed") || "200";
     this._animationSpeed = parseInt(i, 10);
     const s = Array.from(this.children);
-    this.hasAttribute("full-width") && this.classList.add("full-width"), this.setAttribute("role", "tablist");
-    const n = this.getAttribute("orientation") || "horizontal";
-    this.setAttribute("aria-orientation", n), this.addEventListener("keydown", (e) => {
-      const t = Array.from(this.children), r = t.findIndex((l) => l.hasAttribute("active")), h = this.getAttribute("aria-orientation") || "horizontal";
+    this.setAttribute("role", "tablist");
+    const a = this.getAttribute("orientation") || "horizontal";
+    this.setAttribute("aria-orientation", a), this.addEventListener("keydown", (e) => {
+      const t = Array.from(this.children), r = t.findIndex((d) => d.hasAttribute("active")), n = this.getAttribute("aria-orientation") || "horizontal";
       let o = r;
       switch (e.key) {
         case "ArrowRight":
-          h === "horizontal" && (o = (r + 1) % t.length, e.preventDefault());
+          n === "horizontal" && (o = (r + 1) % t.length, e.preventDefault());
           break;
         case "ArrowLeft":
-          h === "horizontal" && (o = (r - 1 + t.length) % t.length, e.preventDefault());
+          n === "horizontal" && (o = (r - 1 + t.length) % t.length, e.preventDefault());
           break;
         case "ArrowDown":
-          h === "vertical" && (o = (r + 1) % t.length, e.preventDefault());
+          n === "vertical" && (o = (r + 1) % t.length, e.preventDefault());
           break;
         case "ArrowUp":
-          h === "vertical" && (o = (r - 1 + t.length) % t.length, e.preventDefault());
+          n === "vertical" && (o = (r - 1 + t.length) % t.length, e.preventDefault());
           break;
         case "Home":
           o = 0, e.preventDefault();
@@ -35,8 +35,8 @@ class c extends HTMLElement {
         default:
           return;
       }
-      const d = t[o];
-      d && (this.setActiveTab(d), d.focus());
+      const h = t[o];
+      h && (this.setActiveTab(h), h.focus());
     }), s.forEach((e, t) => {
       e.classList.remove("first", "middle", "last", "only"), s.length === 1 ? e.classList.add("only") : t === 0 ? e.classList.add("first") : t === s.length - 1 ? e.classList.add("last") : e.classList.add("middle");
     }), s.forEach((e) => {
@@ -61,7 +61,7 @@ class c extends HTMLElement {
           overflow: hidden;
         }
 
-        :host(.full-width) {
+        :host([full-width]) {
           display: flex;
           width: 100%;
         }
@@ -78,7 +78,7 @@ class c extends HTMLElement {
           box-sizing: border-box;
           box-shadow: 0 0 4px 4px var(--tab-shadow-active);
           will-change: transform, width;
-          transform: translateX(0);
+          transform: translateX(0) translateZ(0);
           width: 0;
         }
 
@@ -87,6 +87,7 @@ class c extends HTMLElement {
           z-index: 1;
           flex: 1;
           contain: content; /* Performance optimization */
+          transform: translateZ(0);
         }
       </style>
       <div class="highlight"></div>
@@ -114,8 +115,8 @@ class c extends HTMLElement {
     }, 100));
   }
   _updateHighlight(i) {
-    const s = this.shadowRoot.querySelector(".highlight"), a = i.getBoundingClientRect(), n = this.getBoundingClientRect(), e = parseFloat(getComputedStyle(this).borderWidth) || 0, t = a.left - n.left - e;
-    s.style.transform = `translateX(${t}px)`, s.style.width = `${a.width}px`;
+    const s = this.shadowRoot.querySelector(".highlight"), a = i.getBoundingClientRect(), e = this.getBoundingClientRect(), t = parseFloat(getComputedStyle(this).borderWidth) || 0, r = a.left - e.left - t;
+    s.style.transform = `translateX(${r}px) translateZ(0)`, s.style.width = `${a.width}px`;
   }
   setActiveTab(i) {
     if (Array.from(this.children).forEach((a) => a.removeAttribute("active")), i.setAttribute("active", ""), this._activeTab = i, this._observedTab && this._observedTab !== i && this._resizeObserver.unobserve(this._observedTab), this._observedTab = i, this._resizeObserver.observe(i), this._hasInitialized)
@@ -133,4 +134,4 @@ class c extends HTMLElement {
     );
   }
 }
-customElements.get("mui-tab-bar") || customElements.define("mui-tab-bar", c);
+customElements.get("mui-tab-bar") || customElements.define("mui-tab-bar", l);

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

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Thu, 08 Jan 2026 02:39:52 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Wed, 04 Feb 2026 04:53:47 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */

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

@@ -555,6 +555,10 @@ html[data-theme="dark"] {
 /* 4. SET THE FOUNDATION                                                                                */
 /* ==================================================================================================== */
 :where(html) {
+  /* Dropdown */
+  --dropdown-offset: var(--space-200);
+  --dropdown-min-width: 15rem;
+
   /* Feedback - Border (Alerts & Messages) */
   --feedback-neutral-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-neutral-border-color);
   --feedback-positive-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-positive-border-color);