@muibook/components 9.0.0 → 10.0.0

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

@@ -52,7 +52,7 @@ class u extends HTMLElement {
         return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && !!((c = n.textContent) != null && c.trim());
       }
     ), s = d(e), r = d(t);
-    this.classList.toggle("has-before", s), this.classList.toggle("has-after", r);
+    this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", r);
     const i = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], v = i.length > 0 && i.every(
       (l) => {
         var n;
@@ -289,44 +289,44 @@ class u extends HTMLElement {
       }
       /* ===================================== */
 
-      :host(.alert-positive-slot) {
+      :host([alert-positive-slot]) {
         --alert-text: var(--feedback-positive-text);
         --alert-icon: var(--feedback-positive-icon);
         --alert-bg-hover: var(--feedback-positive-action-background);
       }
 
-      :host(.alert-info-slot) {
+      :host([alert-info-slot]) {
         --alert-text: var(--feedback-info-text);
         --alert-icon: var(--feedback-info-icon);
         --alert-bg-hover: var(--feedback-info-action-background);
       }
 
-      :host(.alert-warning-slot) {
+      :host([alert-warning-slot]) {
         --alert-text: var(--feedback-warning-text);
         --alert-icon: var(--feedback-warning-icon);
         --alert-bg-hover: var(--feedback-warning-action-background);
       }
 
-      :host(.alert-attention-slot) {
+      :host([alert-attention-slot]) {
         --alert-text: var(--feedback-attention-text);
         --alert-icon: var(--feedback-attention-icon);
         --alert-bg-hover: var(--feedback-attention-action-background);
       }
 
-      :host(.alert-slot) a {
+      :host([alert-slot]) a {
         font-weight: var(--font-weight-semi-bold);
         color: var(--alert-text);
       }
 
-      :host(.alert-slot) a:hover,
-      :host(.alert-slot) a:focus-visible {
+      :host([alert-slot]) a:hover,
+      :host([alert-slot]) a:focus-visible {
         background: var(--alert-bg-hover);
         color: var(--alert-text);
       }
 
-      :host(.alert-slot) ::slotted(.mui-icon),
-      :host(.alert-slot):hover ::slotted(.mui-icon),
-      :host(.alert-slot):focus-visible ::slotted(.mui-icon) {
+      :host([alert-slot]) ::slotted(.mui-icon),
+      :host([alert-slot]):hover ::slotted(.mui-icon),
+      :host([alert-slot]):focus-visible ::slotted(.mui-icon) {
         fill: var(--alert-icon);
       }
 
@@ -380,39 +380,39 @@ class u extends HTMLElement {
 
       /* Before & After Icon
       ========================================= */
-      :host(.has-after) a,
-      :host(.has-before) a,
-      :host(.has-after.has-before) a { 
+      :host([has-after]) a,
+      :host([has-before]) a,
+      :host([has-after][has-before]) a { 
         display: grid; 
         align-items: center; 
         gap: var(--space-100);
       }
 
-      :host(.has-after.has-before) a {
+      :host([has-after][has-before]) a {
         grid-template-columns: auto 1fr auto;
       }
 
-      :host(.has-after) a {
+      :host([has-after]) a {
         grid-template-columns: 1fr auto;
       }
 
-      :host(.has-before) a {
+      :host([has-before]) a {
         grid-template-columns: auto 1fr;
       }
 
-      :host(.has-after.has-before[variant]:not([variant="default"])) a,
-      :host(.has-after.has-before[usage="input"]) a {
+      :host([has-after][has-before][variant]:not([variant="default"])) a,
+      :host([has-after][has-before][usage="input"]) a {
         padding-right: var(--action-after-slot-padding);
         padding-left: var(--action-before-slot-padding);
       }
 
-      :host(.has-after[variant]:not([variant="default"])) a,
-      :host(.has-after[usage="input"]) a {
+      :host([has-after][variant]:not([variant="default"])) a,
+      :host([has-after][usage="input"]) a {
         padding-right: var(--action-after-slot-padding);
       }
 
-      :host(.has-before[variant]:not([variant="default"])) a,
-      :host(.has-before[usage="input"]) a {
+      :host([has-before][variant]:not([variant="default"])) a,
+      :host([has-before][usage="input"]) a {
         padding-left: var(--action-before-slot-padding);
       }
 
@@ -547,76 +547,76 @@ class u extends HTMLElement {
       }
 
       /* Before & After Icon padding adjustments for x-small */
-      :host([size="x-small"][variant]:not([variant="default"]).has-after) a,
-      :host([size="x-small"][variant]:not([variant="default"]).has-before) a,
-      :host([size="x-small"][variant]:not([variant="default"]).has-after.has-before) a { 
+      :host([size="x-small"][variant]:not([variant="default"])[has-after]) a,
+      :host([size="x-small"][variant]:not([variant="default"])[has-before]) a,
+      :host([size="x-small"][variant]:not([variant="default"])[has-after][has-before]) a { 
         gap: var(--space-025);
       }
 
-      :host([size="x-small"][variant]:not([variant="default"]).has-after.has-before) a {
+      :host([size="x-small"][variant]:not([variant="default"])[has-after][has-before]) a {
         padding-right: var(--action-after-slot-padding-x-small);
         padding-left: var(--action-before-slot-padding-x-small);
       }
 
-      :host([size="x-small"][variant]:not([variant="default"]).has-after) a {
+      :host([size="x-small"][variant]:not([variant="default"])[has-after]) a {
         padding-right: var(--action-after-slot-padding-x-small);
       }
 
-      :host([size="x-small"][variant]:not([variant="default"]).has-before) a {
+      :host([size="x-small"][variant]:not([variant="default"])[has-before]) a {
         padding-left: var(--action-before-slot-padding-x-small);
       }
 
       /* Before & After Icon padding adjustments for small */
-      :host([size="small"][variant]:not([variant="default"]).has-after) a,
-      :host([size="small"][variant]:not([variant="default"]).has-before) a,
-      :host([size="small"][variant]:not([variant="default"]).has-after.has-before) a { 
+      :host([size="small"][variant]:not([variant="default"])[has-after]) a,
+      :host([size="small"][variant]:not([variant="default"])[has-before]) a,
+      :host([size="small"][variant]:not([variant="default"])[has-after][has-before]) a { 
         gap: var(--space-050);
       }
 
-      :host([size="small"][variant]:not([variant="default"]).has-after.has-before) a {
+      :host([size="small"][variant]:not([variant="default"])[has-after][has-before]) a {
         padding-right: var(--action-after-slot-padding-small);
         padding-left: var(--action-before-slot-padding-small);
       }
 
-      :host([size="small"][variant]:not([variant="default"]).has-after) a {
+      :host([size="small"][variant]:not([variant="default"])[has-after]) a {
         padding-right: var(--action-after-slot-padding-small);
       }
 
-      :host([size="small"][variant]:not([variant="default"]).has-before) a {
+      :host([size="small"][variant]:not([variant="default"])[has-before]) a {
         padding-left: var(--action-before-slot-padding-small);
       }
 
       /* Before & After Icon padding adjustments for medium */
-      :host([size="medium"][variant]:not([variant="default"]).has-after.has-before) a {
+      :host([size="medium"][variant]:not([variant="default"])[has-after][has-before]) a {
         padding-right: var(--action-after-slot-padding);
         padding-left: var(--action-before-slot-padding);
       }
 
-      :host([size="medium"][variant]:not([variant="default"]).has-after) a {
+      :host([size="medium"][variant]:not([variant="default"])[has-after]) a {
         padding-right: var(--action-after-slot-padding);
       }
 
-      :host([size="medium"][variant]:not([variant="default"]).has-before) a {
+      :host([size="medium"][variant]:not([variant="default"])[has-before]) a {
         padding-left: var(--action-before-slot-padding);
       }
 
       /* Before & After Icon padding adjustments for large */
-      :host([size="large"][variant]:not([variant="default"]).has-after) a,
-      :host([size="large"][variant]:not([variant="default"]).has-before) a,
-      :host([size="large"][variant]:not([variant="default"]).has-after.has-before) a { 
+      :host([size="large"][variant]:not([variant="default"])[has-after]) a,
+      :host([size="large"][variant]:not([variant="default"])[has-before]) a,
+      :host([size="large"][variant]:not([variant="default"])[has-after][has-before]) a { 
         gap: var(--space-200);
       }
 
-      :host([size="large"][variant]:not([variant="default"]).has-after.has-before) a {
+      :host([size="large"][variant]:not([variant="default"])[has-after][has-before]) a {
         padding-right: var(--action-after-slot-padding-large);
         padding-left: var(--action-before-slot-padding-large);
       }
 
-      :host([size="large"][variant]:not([variant="default"]).has-after) a {
+      :host([size="large"][variant]:not([variant="default"])[has-after]) a {
         padding-right: var(--action-after-slot-padding-large);
       }
 
-      :host([size="large"][variant]:not([variant="default"]).has-before) a {
+      :host([size="large"][variant]:not([variant="default"])[has-before]) a {
         padding-left: var(--action-before-slot-padding-large);
       }
 

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

@@ -16,7 +16,15 @@ class p extends HTMLElement {
   attributeChangedCallback(e, r, t) {
     if (!this.shadowRoot || r === t) return;
     const o = this.shadowRoot.querySelector("select");
-    e === "value" && o && (o.value = t || ""), e === "disabled" && o && (t === null || t === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "")), ["options", "label", "hide-label", "variant", "disabled"].includes(e) && (this.render(), this.setupListener());
+    if (e === "value" && o) {
+      o.value = t || "";
+      return;
+    }
+    if (e === "disabled" && o) {
+      t === null || t === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "");
+      return;
+    }
+    ["options", "label", "hide-label", "variant"].includes(e) && (this.render(), this.setupListener());
   }
   cleanupListeners() {
     var r;

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

@@ -103,16 +103,16 @@ class i extends HTMLElement {
         text-align: right;
       }
       
-      :host(.card-slot) {
+      :host([card-slot]) {
         --slat-background: var(--slat-card-background);
         --slat-background-hover: var(--slat-card-background-hover);
       }
 
-      :host(.condensed-slot) .action::part(border-radius) {
+      :host([condensed-slot]) .action::part(border-radius) {
         border-radius: 0; 
       }
 
-      :host(.condensed-slot:last-of-type) .action::part(border-radius) {
+      :host([condensed-slot]:last-of-type) .action::part(border-radius) {
         border-bottom-left-radius: var(--card-radius); 
         border-bottom-right-radius: var(--card-radius); 
       }
@@ -125,11 +125,11 @@ class i extends HTMLElement {
         --avatar-background-override: var(--slat-avatar-background-hover);
       }
 
-      :host(.card-slot) ::slotted(mui-avatar) {
+      :host([card-slot]) ::slotted(mui-avatar) {
         --avatar-background-override: var(--slat-card-avatar-background);
       }
-      :host(.card-slot) .action:hover ::slotted(mui-avatar),
-      :host(.card-slot) .action:focus ::slotted(mui-avatar) {
+      :host([card-slot]) .action:hover ::slotted(mui-avatar),
+      :host([card-slot]) .action:focus ::slotted(mui-avatar) {
         --avatar-background-override: var(--slat-card-avatar-background-hover);
       }
 

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

@@ -75,6 +75,7 @@ class u extends HTMLElement {
         }
 
         :host {
+          display: block;
           width: 100%;
           max-width: 395px;
           min-width: 247px;

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 Wed, 31 Dec 2025 01:53:05 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

@@ -169,7 +169,7 @@ html[data-theme="light"] {
   --text-color-success: var(--green-600);
   --text-color-warning: var(--orange-600);
   --text-color-error: var(--red-600);
-  --text-color-optional: var(--grey-600);
+  --text-color-optional: var(--grey-500);
   /* Overlay */
   --backdrop-overlay: var(--black-opacity-70);
   /* ================================================================================================== */
@@ -426,7 +426,7 @@ html[data-theme="dark"] {
   --text-color-success: var(--green-400);
   --text-color-warning: var(--orange-400);
   --text-color-error: var(--red-400);
-  --text-color-optional: var(--grey-300);
+  --text-color-optional: var(--grey-400);
   /* Overlay */
   --backdrop-overlay: var(--black-opacity-70);
   /* ================================================================================================== */
@@ -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);