@muibook/components 19.6.0 → 20.0.0

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

@@ -0,0 +1,239 @@
+class g extends HTMLElement {
+  constructor() {
+    super(), this.handleActionKeyDown = (t) => {
+      this.hasAttribute("action") && (t.key !== "Enter" && t.key !== " " || this.getAttribute("slot") === "action" && this.closest("mui-dropdown") || (t.preventDefault(), t.stopImmediatePropagation(), this.click()));
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["variant", "size", "color", "action"];
+  }
+  connectedCallback() {
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.addEventListener("keydown", this.handleActionKeyDown), this.render();
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this.handleActionKeyDown);
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getAriaLive(t) {
+    return t ? t === "warning" || t === "attention" ? "assertive" : t === "positive" || t === "info" ? "polite" : "off" : "off";
+  }
+  syncSlotIcons() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector('slot[name="before"]'), i = this.shadowRoot.querySelector('slot[name="after"]'), e = t == null ? void 0 : t.assignedElements({ flatten: !0 }), a = i == null ? void 0 : i.assignedElements({ flatten: !0 });
+    this.toggleAttribute("has-before", !!(e != null && e.length)), this.toggleAttribute("has-after", !!(a != null && a.length)), [e, a].forEach((n) => {
+      n == null || n.forEach((s) => {
+        [s, ...Array.from(s.querySelectorAll("*"))].forEach((r) => {
+          r.tagName.toLowerCase().startsWith("mui-icon-") && (r.setAttribute("size", "xx-small"), r.hasAttribute("color") || r.setAttribute("color", "currentColor"));
+        });
+      });
+    });
+  }
+  render() {
+    const t = this.getAttribute("variant"), i = this.getAttribute("size") || "medium", e = this.getAttribute("color"), a = this.hasAttribute("action"), n = {
+      background: "var(--status-grey-background)",
+      color: "var(--status-grey-text-color)",
+      border: "var(--stroke-size-100) var(--stroke-solid) var(--status-grey-border-color)"
+    }, s = {
+      info: {
+        background: "var(--status-info-background)",
+        color: "var(--status-info-text-color)",
+        border: "var(--stroke-size-100) var(--stroke-solid) var(--status-info-border-color)"
+      },
+      positive: {
+        background: "var(--status-positive-background)",
+        color: "var(--status-positive-text-color)",
+        border: "var(--stroke-size-100) var(--stroke-solid) var(--status-positive-border-color)"
+      },
+      warning: {
+        background: "var(--status-warning-background)",
+        color: "var(--status-warning-text-color)",
+        border: "var(--stroke-size-100) var(--stroke-solid) var(--status-warning-border-color)"
+      },
+      attention: {
+        background: "var(--status-attention-background)",
+        color: "var(--status-attention-text-color)",
+        border: "var(--stroke-size-100) var(--stroke-solid) var(--status-attention-border-color)"
+      }
+    }, c = {
+      small: {
+        fontSize: "var(--text-font-size-xs)",
+        minHeight: "2.2rem",
+        padding: "0 var(--space-050)",
+        gap: "var(--space-050)"
+      },
+      medium: {
+        fontSize: "var(--text-font-size-xs)",
+        minHeight: "2.6rem",
+        padding: "0 var(--space-100)",
+        gap: "var(--space-050)"
+      }
+    }, r = t && s[t] ? s[t] : n, l = c[i] || c.medium, o = e ? {
+      grey: {
+        background: "var(--status-grey-background)",
+        borderColor: "var(--status-grey-border-color)",
+        color: "var(--status-grey-text-color)"
+      },
+      purple: {
+        background: "var(--status-purple-background)",
+        borderColor: "var(--status-purple-border-color)",
+        color: "var(--status-purple-text-color)"
+      },
+      violet: {
+        background: "var(--status-violet-background)",
+        borderColor: "var(--status-violet-border-color)",
+        color: "var(--status-violet-text-color)"
+      },
+      pink: {
+        background: "var(--status-pink-background)",
+        borderColor: "var(--status-pink-border-color)",
+        color: "var(--status-pink-text-color)"
+      },
+      magenta: {
+        background: "var(--status-magenta-background)",
+        borderColor: "var(--status-magenta-border-color)",
+        color: "var(--status-magenta-text-color)"
+      },
+      red: {
+        background: "var(--status-red-background)",
+        borderColor: "var(--status-red-border-color)",
+        color: "var(--status-red-text-color)"
+      },
+      orange: {
+        background: "var(--status-orange-background)",
+        borderColor: "var(--status-orange-border-color)",
+        color: "var(--status-orange-text-color)"
+      },
+      amber: {
+        background: "var(--status-amber-background)",
+        borderColor: "var(--status-amber-border-color)",
+        color: "var(--status-amber-text-color)"
+      },
+      yellow: {
+        background: "var(--status-yellow-background)",
+        borderColor: "var(--status-yellow-border-color)",
+        color: "var(--status-yellow-text-color)"
+      },
+      lime: {
+        background: "var(--status-lime-background)",
+        borderColor: "var(--status-lime-border-color)",
+        color: "var(--status-lime-text-color)"
+      },
+      green: {
+        background: "var(--status-green-background)",
+        borderColor: "var(--status-green-border-color)",
+        color: "var(--status-green-text-color)"
+      },
+      teal: {
+        background: "var(--status-teal-background)",
+        borderColor: "var(--status-teal-border-color)",
+        color: "var(--status-teal-text-color)"
+      },
+      cyan: {
+        background: "var(--status-cyan-background)",
+        borderColor: "var(--status-cyan-border-color)",
+        color: "var(--status-cyan-text-color)"
+      },
+      blue: {
+        background: "var(--status-blue-background)",
+        borderColor: "var(--status-blue-border-color)",
+        color: "var(--status-blue-text-color)"
+      },
+      indigo: {
+        background: "var(--status-indigo-background)",
+        borderColor: "var(--status-indigo-border-color)",
+        color: "var(--status-indigo-text-color)"
+      }
+    }[e] : null, u = this.getAriaLive(t && s[t] ? t : null);
+    a ? (this.setAttribute("role", "button"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.removeAttribute("aria-live")) : (this.setAttribute("role", "status"), this.setAttribute("aria-live", u), this.getAttribute("tabindex") === "0" && this.removeAttribute("tabindex"));
+    const d = (
+      /*css*/
+      `
+      :host {
+        display: inline-flex;
+        box-sizing: border-box;
+        vertical-align: middle;
+      }
+
+      .status {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        min-width: 0;
+        min-height: ${l.minHeight};
+        gap: ${l.gap};
+        padding: ${l.padding};
+        border: ${o ? `var(--stroke-size-100) var(--stroke-solid) ${o.borderColor}` : r.border};
+        border-radius: var(--radius-100);
+        background: ${(o == null ? void 0 : o.background) || r.background};
+        color: ${(o == null ? void 0 : o.color) || r.color};
+        font-family: var(--font-family);
+        font-size: ${l.fontSize};
+        font-weight: var(--font-weight-medium);
+        line-height: 1;
+        white-space: nowrap;
+      }
+
+      :host([action]) .status {
+        cursor: pointer;
+      }
+
+      :host([action]:hover) .status {
+        filter: brightness(1.04);
+      }
+
+      :host([action]:focus-visible) {
+        outline: none;
+      }
+
+      :host([action]:focus-visible) .status {
+        outline: var(--outline-thick);
+        outline-offset: var(--space-050);
+      }
+
+      :host([size="medium"][has-before]:not([has-after])) .status {
+        padding-inline-end: calc(var(--space-100) + var(--space-050));
+      }
+
+      :host([size="small"][has-before]:not([has-after])) .status {
+        padding-inline-end: var(--space-100);
+      }
+
+      :host([size="medium"][has-after]:not([has-before])) .status {
+        padding-inline-start: calc(var(--space-100) + var(--space-050));
+      }
+
+      :host([size="small"][has-after]:not([has-before])) .status {
+        padding-inline-start: var(--space-100);
+      }
+
+      slot[name="before"],
+      slot[name="after"] {
+        display: contents;
+      }
+
+      ::slotted([slot="before"]),
+      ::slotted([slot="after"]) {
+        flex: none;
+      }
+
+      ::slotted(.mui-icon) {
+        color: currentColor;
+        fill: currentColor;
+      }
+    `
+    );
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+        <style>${d}</style>
+        <span class="status" part="status">
+          <slot name="before"></slot>
+          <slot></slot>
+          <slot name="after"></slot>
+        </span>
+      `, this.shadowRoot.querySelectorAll('slot[name="before"], slot[name="after"]').forEach((b) => b.addEventListener("slotchange", () => this.syncSlotIcons())), this.syncSlotIcons());
+  }
+}
+customElements.get("mui-status") || customElements.define("mui-status", g);

package/dist/esm/components/mui-stepper/step/index.js

@@ -2,7 +2,7 @@ import "../../mui-body/index.js";
 import "../../mui-icons/checkmark/index.js";
 import "../../mui-icons/exclamationmark/index.js";
 import "../../mui-icons/notification/index.js";
-class g extends HTMLElement {
+class h extends HTMLElement {
   static get observedAttributes() {
     return ["state", "resolved-state", "title", "direction", "hide-icon", "size"];
   }
@@ -15,42 +15,51 @@ class g extends HTMLElement {
   attributeChangedCallback() {
     this.render();
   }
+  syncContentState() {
+    if (!this.shadowRoot) return;
+    const r = this.shadowRoot.querySelector(".content"), e = this.shadowRoot.querySelector('slot[name="secondary"]'), s = !!(e != null && e.assignedNodes({ flatten: !0 }).some((t) => {
+      var i;
+      return t.nodeType === Node.ELEMENT_NODE || !!((i = t.textContent) != null && i.trim());
+    }));
+    r == null || r.classList.toggle("title-only", !s);
+  }
   render() {
     if (!this.shadowRoot) return;
-    const o = this.getAttribute("resolved-state") || this.getAttribute("state") || "upcoming", r = this.getAttribute("direction") || "horizontal", a = this.getAttribute("size"), t = a === "x-small" || a === "small" ? a : "medium", c = this.getAttribute("title") || "", l = this.hasAttribute("hide-icon"), d = o === "active" || o === "error" || o === "pending", s = t === "x-small" ? "xx-small" : t === "small" ? "x-small" : "small", p = t === "medium" ? "small" : "x-small", v = {
-      success: `<mui-icon-checkmark class="dot-icon" size="${s}" color="var(--stepper-icon-color)"></mui-icon-checkmark>`,
-      completed: `<mui-icon-checkmark class="dot-icon" size="${s}" color="var(--stepper-icon-color)"></mui-icon-checkmark>`,
-      active: `<mui-icon-notification class="dot-icon" size="${s}" color="var(--stepper-icon-color)"></mui-icon-notification>`,
-      error: `<mui-icon-exclamationmark class="dot-icon" size="${s}" color="var(--stepper-icon-color)"></mui-icon-exclamationmark>`,
-      pending: `<mui-icon-exclamationmark class="dot-icon" size="${s}" color="var(--stepper-icon-color)"></mui-icon-exclamationmark>`,
+    const r = this.getAttribute("resolved-state") || this.getAttribute("state") || "upcoming", e = this.getAttribute("direction") || "horizontal", s = this.getAttribute("size"), t = s === "x-small" || s === "small" ? s : "medium", i = this.getAttribute("title") || "", d = this.hasAttribute("hide-icon"), p = r === "active" || r === "error" || r === "pending", a = t === "x-small" ? "xx-small" : t === "small" ? "x-small" : "small", v = t === "medium" ? "small" : "x-small", b = {
+      success: `<mui-icon-checkmark class="dot-icon" size="${a}" color="var(--stepper-icon-color)"></mui-icon-checkmark>`,
+      completed: `<mui-icon-checkmark class="dot-icon" size="${a}" color="var(--stepper-icon-color)"></mui-icon-checkmark>`,
+      active: `<mui-icon-notification class="dot-icon" size="${a}" color="var(--stepper-icon-color)"></mui-icon-notification>`,
+      error: `<mui-icon-exclamationmark class="dot-icon" size="${a}" color="var(--stepper-icon-color)"></mui-icon-exclamationmark>`,
+      pending: `<mui-icon-exclamationmark class="dot-icon" size="${a}" color="var(--stepper-icon-color)"></mui-icon-exclamationmark>`,
       disabled: ""
-    }, i = `
+    }, c = `
     <div class="content">
       <mui-body
-        size="${p}"
-        ${d ? "weight='bold'" : ""}
-        class="${o === "active" ? "active" : ""}"
+        size="${v}"
+        ${p ? "weight='bold'" : ""}
+        class="${r === "active" ? "active" : ""}"
       >
-        ${c}
+        ${i}
       </mui-body>
       <slot name="secondary"></slot>
     </div>
-  `, n = `
+  `, l = `
   <div class="dotwrapper">
-    <div class="dot ${o}">
-      ${l ? "" : v[o] || ""}
+    <div class="dot ${r}">
+      ${d ? "" : b[r] || ""}
     </div>
-    ${r === "horizontal" ? `<div class="line before ${r}"></div><div class="line after ${r}"></div>` : ""}
+    ${e === "horizontal" ? `<div class="line before ${e}"></div><div class="line after ${e}"></div>` : ""}
   </div>
-`, b = r === "horizontal" ? i + n : n + i, e = t === "x-small" ? "var(--stepper-dot-size-x-small)" : t === "small" ? "var(--stepper-dot-size-small)" : "var(--stepper-dot-size)";
+`, g = e === "horizontal" ? c + l : l + c, o = t === "x-small" ? "var(--stepper-dot-size-x-small)" : t === "small" ? "var(--stepper-dot-size-small)" : "var(--stepper-dot-size)";
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
           display: flex;
-          flex-direction: ${r === "horizontal" ? "column" : "row"};
-          align-items: ${r === "horizontal" ? "center" : "flex-start"};
+          flex-direction: ${e === "horizontal" ? "column" : "row"};
+          align-items: ${e === "horizontal" ? "center" : "flex-start"};
           flex: 1;
+          --stepper-title-only: 12px;
         }
 
         .dotwrapper {
@@ -58,13 +67,13 @@ class g extends HTMLElement {
           display: flex;
           align-items: center;
           justify-content: center; /* keeps dot centered */
-          width: ${r === "horizontal" ? "100%" : "auto"};
+          width: ${e === "horizontal" ? "100%" : "auto"};
         }
 
         /* .dot stays unchanged */
         .dot {
-          width: ${e};
-          height: ${e};
+          width: ${o};
+          height: ${o};
           display: flex;
           align-items: center;
           justify-content: center;
@@ -241,13 +250,16 @@ class g extends HTMLElement {
         }
 
         :host([direction="vertical"]) .content {
-          margin-left: calc( -1 * ((${e} / 2) + var(--stroke-size-100)));
-          padding-left: ${e};
-          padding-bottom: ${e};
+          margin-left: calc( -1 * ((${o} / 2) + var(--stroke-size-100)));
+          padding-left: ${o};
+          padding-bottom: ${o};
           align-items: start;
           text-align: left;
           position: relative;
         }
+        :host([direction="vertical"]) .content.title-only {
+          padding-top: var(--stepper-title-only);
+        }
 
         :host([direction="vertical"]) .content:before {
           content: "";
@@ -255,8 +267,8 @@ class g extends HTMLElement {
           height: 100%;
           position: absolute;
           background: var(--stepper-border-color);
-          margin-left: calc(-1 * ${e});
-          height: calc(100% - ${e});
+          margin-left: calc(-1 * ${o});
+          height: calc(100% - ${o});
           bottom: calc(-1 * var(--stroke-size-100));
 
         }
@@ -303,9 +315,9 @@ class g extends HTMLElement {
 
 
         :host([direction="vertical"]) .dotwrapper {
-          width: ${e};
-          min-width: ${e};
-          flex: 0 0 ${e};
+          width: ${o};
+          min-width: ${o};
+          flex: 0 0 ${o};
           margin-top: var(--space-200);
           margin-bottom: var(--space-200);
         }
@@ -386,9 +398,11 @@ class g extends HTMLElement {
 
       </style>
 
-      ${b}
+      ${g}
 
     `;
+    const n = this.shadowRoot.querySelector('slot[name="secondary"]');
+    n == null || n.addEventListener("slotchange", () => this.syncContentState()), this.syncContentState();
   }
 }
-customElements.get("mui-step") || customElements.define("mui-step", g);
+customElements.get("mui-step") || customElements.define("mui-step", h);

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

@@ -1,4 +1,4 @@
-class n extends HTMLElement {
+class d extends HTMLElement {
   constructor() {
     super(), this._checked = !1, this._checkbox = null, this.attachShadow({ mode: "open" }), this._checked = !1;
   }
@@ -13,8 +13,8 @@ class n extends HTMLElement {
   }
   attributeChangedCallback(s, t, e) {
     if (s === "checked" && t !== e && (this._checked = e !== null, this._checkbox && (this._checkbox.checked = this._checked, this._updateIcons())), s === "disabled" && t !== e) {
-      const i = e !== null;
-      this._checkbox && (this._checkbox.disabled = i, this._checkbox.setAttribute("aria-disabled", i.toString())), this._updateDisabledState();
+      const c = e !== null;
+      this._checkbox && (this._checkbox.disabled = c, this._checkbox.setAttribute("aria-disabled", c.toString())), this._updateDisabledState();
     }
     s === "size" && t !== e && this._enforceIconSize();
   }
@@ -29,8 +29,8 @@ class n extends HTMLElement {
     this._checkbox && this._changeHandler && this._checkbox.removeEventListener("change", this._changeHandler);
   }
   _updateDisabledState() {
-    var t, e, i, c;
-    this.hasAttribute("disabled") ? ((t = this._checkbox) == null || t.setAttribute("aria-disabled", "true"), (e = this._checkbox) == null || e.setAttribute("tabindex", "-1")) : ((i = this._checkbox) == null || i.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
+    var t, e, c, i;
+    this.hasAttribute("disabled") ? ((t = this._checkbox) == null || t.setAttribute("aria-disabled", "true"), (e = this._checkbox) == null || e.setAttribute("tabindex", "-1")) : ((c = this._checkbox) == null || c.removeAttribute("aria-disabled"), (i = this._checkbox) == null || i.removeAttribute("tabindex"));
   }
   _setupListener() {
     this._checkbox && (this._cleanupListeners(), this._changeHandler = () => {
@@ -44,7 +44,7 @@ class n extends HTMLElement {
     }, this._checkbox.addEventListener("change", this._changeHandler));
   }
   _enforceIconSize() {
-    const s = this.shadowRoot.querySelector('slot[name="on-icon"]'), t = this.shadowRoot.querySelector('slot[name="off-icon"]'), e = this.getAttribute("size") || "large", c = {
+    const s = this.shadowRoot.querySelector('slot[name="on-icon"]'), t = this.shadowRoot.querySelector('slot[name="off-icon"]'), e = this.getAttribute("size") || "large", i = {
       "x-small": "xx-small",
       small: "xx-small",
       medium: "x-small",
@@ -53,7 +53,7 @@ class n extends HTMLElement {
       if (!h) return;
       const a = () => {
         h.assignedElements().forEach((r) => {
-          r.tagName.toLowerCase().startsWith("mui-icon") && r.setAttribute("size", c);
+          r.tagName.toLowerCase().startsWith("mui-icon") && r.setAttribute("size", i);
         });
       };
       h.addEventListener("slotchange", a), setTimeout(a, 0);
@@ -69,7 +69,7 @@ class n extends HTMLElement {
     });
   }
   render() {
-    const s = this.getAttribute("label"), t = this.getAttribute("size") || "large", i = ["x-small", "small", "medium", "large"].includes(t) ? t : "large";
+    const s = this.getAttribute("label"), t = this.getAttribute("size") || "large", c = ["x-small", "small", "medium", "large"].includes(t) ? t : "large";
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -111,7 +111,9 @@ class n extends HTMLElement {
           width: var(--switch-thumb-size-computed, var(--switch-thumb-size));
           height: var(--switch-thumb-size-computed, var(--switch-thumb-size));
           background-color: var(--switch-thumb-bg);
-          transition: transform var(--speed-200);
+          transition:
+            background-color var(--speed-200),
+            transform var(--speed-200);
           border-radius: 50%;
           display: flex;
           align-items: center;
@@ -123,6 +125,7 @@ class n extends HTMLElement {
         }
 
         input:checked + .track .thumb {
+          background-color: var(--switch-thumb-bg-checked, var(--switch-thumb-bg));
           transform: translateX(
             calc(
               var(--switch-width-computed, var(--switch-width)) -
@@ -134,13 +137,13 @@ class n extends HTMLElement {
 
         :host([size="x-small"]) {
           --switch-offset-computed: var(--stroke-size-100);
-          --switch-thumb-size-computed: calc(var(--action-icon-only-size-x-small) - var(--space-200));
+          --switch-thumb-size-computed: calc(var(--action-size-x-small) - var(--space-200));
           --switch-height-computed: calc(var(--switch-thumb-size-computed) + (var(--switch-offset-computed) * 2));
           --switch-width-computed: calc(var(--switch-height-computed) * 1.6);
         }
         :host([size="small"]) {
           --switch-offset-computed: var(--stroke-size-100);
-          --switch-thumb-size-computed: calc(var(--action-icon-only-size-small) - var(--space-200));
+          --switch-thumb-size-computed: calc(var(--action-size-small) - var(--space-200));
           --switch-height-computed: calc(var(--switch-thumb-size-computed) + (var(--switch-offset-computed) * 2));
           --switch-width-computed: calc(var(--switch-height-computed) * 1.6);
         }
@@ -162,6 +165,11 @@ class n extends HTMLElement {
           fill: var(--switch-icon);
         }
 
+        :host([checked]) ::slotted([slot="on-icon"]),
+        :host([checked]) ::slotted([slot="off-icon"]) {
+          fill: var(--switch-icon-checked, var(--switch-icon));
+        }
+
         :host([disabled]) {
           cursor: not-allowed;
         }
@@ -186,7 +194,7 @@ class n extends HTMLElement {
           </span>
         </span>
       </label>
-    `, this.setAttribute("size", i);
+    `, this.setAttribute("size", c);
   }
 }
-customElements.get("mui-switch") || customElements.define("mui-switch", n);
+customElements.get("mui-switch") || customElements.define("mui-switch", d);

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

@@ -1,9 +1,9 @@
-class s extends HTMLElement {
+class a extends HTMLElement {
   constructor() {
-    super(), this.handleTabChange = this.handleTabChange.bind(this);
+    super(), this.handleTabChange = this.handleTabChange.bind(this), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.addEventListener("tab-change", this.handleTabChange), requestAnimationFrame(() => this.initializePanels());
+    this.render(), this.addEventListener("tab-change", this.handleTabChange), requestAnimationFrame(() => this.initializePanels());
   }
   disconnectedCallback() {
     this.removeEventListener("tab-change", this.handleTabChange);
@@ -22,9 +22,20 @@ class s extends HTMLElement {
     if (!e.length) return;
     let n = e.find((t) => t.getAttribute("item") === i) || null;
     n || (n = e[0]), e.forEach((t) => {
-      const a = t === n;
-      t.toggleAttribute("hidden", !a), t.setAttribute("aria-hidden", String(!a)), t.style.display = a ? "" : "none";
+      const s = t === n;
+      t.toggleAttribute("hidden", !s), t.setAttribute("aria-hidden", String(!s)), t.style.display = s ? "" : "none";
     });
   }
+  render() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+        }
+      </style>
+      <slot></slot>
+    `);
+  }
 }
-customElements.get("mui-tab-controller") || customElements.define("mui-tab-controller", s);
+customElements.get("mui-tab-controller") || customElements.define("mui-tab-controller", a);

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

@@ -5,7 +5,7 @@ class i extends HTMLElement {
   }
   getBadgeSizeFromTabSize() {
     const t = this.getAttribute("size") || "medium";
-    return t === "x-small" ? "x-small" : t === "small" ? "small" : t === "large" ? "large" : "medium";
+    return t === "x-small" ? "xx-small" : t === "small" ? "x-small" : t === "large" ? "large" : "medium";
   }
   hasAssignedContent(t) {
     return t ? t.assignedNodes({ flatten: !0 }).some(
@@ -55,7 +55,7 @@ class i extends HTMLElement {
         background: transparent;
         white-space: nowrap;
         cursor: pointer;
-        min-height: var(--action-icon-only-size);
+        min-height: var(--tab-item-size-medium, var(--action-size-medium));
         box-sizing: border-box;
         border-radius: calc(var(--tab-radius) - 0.2rem);
       }
@@ -140,12 +140,24 @@ class i extends HTMLElement {
         margin-left: var(--tab-badge-offset-large);
       }
 
+      :host ::slotted(mui-badge[variant="neutral"]:not([color])[slot="before"]),
+      :host ::slotted(mui-badge[variant="neutral"]:not([color])[slot="after"]) {
+        --badge-background: var(--tab-text-color);
+        --badge-text-color: var(--tab-background);
+      }
+
+      :host([active]) ::slotted(mui-badge[variant="neutral"]:not([color])[slot="before"]),
+      :host([active]) ::slotted(mui-badge[variant="neutral"]:not([color])[slot="after"]) {
+        --badge-background: var(--tab-text-color-active);
+        --badge-text-color: var(--tab-background-active);
+      }
+
       :host([size="x-small"]) {
         font-size: var(--text-font-size-xs);
         line-height: var(--text-line-height-xs);
         font-weight: var(--font-weight-semi-bold);
         padding: var(--action-padding-x-small);
-        min-height: var(--action-icon-only-size-x-small);
+        min-height: var(--tab-item-size-x-small, var(--action-size-x-small));
       }
 
       :host([size="x-small"][has-after]) {
@@ -169,7 +181,7 @@ class i extends HTMLElement {
         font-size: var(--text-font-size-s);
         line-height: var(--text-line-height-s);
         padding: var(--action-padding-small);
-        min-height: var(--action-icon-only-size-small);
+        min-height: var(--tab-item-size-small, var(--action-size-small));
       }
 
       :host([size="small"][has-after]) {
@@ -193,7 +205,7 @@ class i extends HTMLElement {
         font-size: var(--text-font-size-l);
         line-height: var(--text-line-height-l);
         padding: var(--action-padding-large);
-        min-height: var(--action-icon-only-size-large);
+        min-height: var(--tab-item-size-large, var(--action-size-large));
       }
 
       :host([size="large"][has-after]) {