@muibook/components 19.6.0 → 20.0.0

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

@@ -1,13 +1,24 @@
-import { getPartMap as b } from "../../utils/part-map/index.js";
-class h extends HTMLElement {
+import { getPartMap as h } from "../../utils/part-map/index.js";
+class f extends HTMLElement {
   static get observedAttributes() {
-    return ["onclick", "type", "aria-label", "disabled", "variant", "size", "usage"];
+    return [
+      "onclick",
+      "type",
+      "aria-label",
+      "disabled",
+      "variant",
+      "stroke",
+      "stroke-ring-size",
+      "focus-ring",
+      "size",
+      "usage"
+    ];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   async connectedCallback() {
-    if (this.hasAttribute("size") || this.setAttribute("size", "medium"), await this.waitForPartMap(), !this.shadowRoot) return;
+    if (this.hasAttribute("size") || this.setAttribute("size", "medium"), this.syncRingSizeAttribute(), await this.waitForPartMap(), !this.shadowRoot) return;
     let t = (
       /*html*/
       `
@@ -18,6 +29,9 @@ class h extends HTMLElement {
       display: inline-block;
       width: auto;
       text-align: center;
+      --action-focus-outline: var(--stroke-size-400) var(--stroke-outset) var(--outline-color);
+      --action-focus-outline-inset-offset: var(--stroke-size-400);
+      --action-focus-outline-offset: calc(-1 * var(--action-focus-outline-inset-offset));
     }
     button {
       vertical-align: baseline;
@@ -26,6 +40,7 @@ class h extends HTMLElement {
       width: 100%;
       border-radius: var(--action-radius-medium);
       padding: var(--action-padding);
+      min-height: var(--action-size-medium);
       text-decoration: none;
       line-height: var(--action-line-height);
       display: inherit;
@@ -67,7 +82,8 @@ class h extends HTMLElement {
     button, button:before, button:after {box-sizing: border-box;}
 
     button:focus-visible {
-      outline: var(--outline-thick);
+      outline: var(--action-focus-outline);
+      outline-offset: var(--action-focus-outline-offset);
     }
 
     :host button ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
@@ -245,14 +261,83 @@ class h extends HTMLElement {
     :host([variant="attention"]) button:focus-visible ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
     :host([variant="attention"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
 
+    :host,
+    :host([variant="primary"]) {
+      --action-ring-color: var(--action-primary-border-color);
+      --action-ring-color-hover: var(--action-primary-border-color-hover);
+      --action-ring-color-focus: var(--action-primary-border-color-focus);
+      --action-ring-color-disabled: var(--action-primary-border-color-disabled);
+    }
+
+    :host([variant="secondary"]) {
+      --action-ring-color: var(--action-secondary-border-color);
+      --action-ring-color-hover: var(--action-secondary-border-color-hover);
+      --action-ring-color-focus: var(--action-secondary-border-color-focus);
+      --action-ring-color-disabled: var(--action-secondary-border-color-disabled);
+    }
+
+    :host([variant="tertiary"]) {
+      --action-ring-color: var(--action-tertiary-border-color);
+      --action-ring-color-hover: var(--action-tertiary-border-color-hover);
+      --action-ring-color-focus: var(--action-tertiary-border-color-focus);
+      --action-ring-color-disabled: var(--action-tertiary-border-color-disabled);
+    }
+
+    :host([variant="overlay"]) {
+      --action-ring-size: var(--stroke-size-100);
+      --action-ring-color: var(--action-overlay-border-color);
+      --action-ring-color-hover: var(--action-overlay-border-color-hover);
+      --action-ring-color-focus: var(--action-overlay-border-color-focus);
+      --action-ring-color-disabled: var(--action-overlay-border-color-disabled);
+    }
+
+    :host([variant="attention"]) {
+      --action-ring-color: var(--action-attention-border-color);
+      --action-ring-color-hover: var(--action-attention-border-color-hover);
+      --action-ring-color-focus: var(--action-attention-border-color-focus);
+      --action-ring-color-disabled: var(--action-attention-border-color-disabled);
+    }
+
+    :host([stroke="ring"]:not([usage="input"])) button {
+      border: none;
+      box-shadow: var(
+        --action-ring-shadow,
+        inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color)
+      );
+    }
+
+    :host([stroke="ring"]:not([usage="input"])) button:hover {
+      border: none;
+      box-shadow: var(
+        --action-ring-shadow-hover,
+        inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color-hover)
+      );
+    }
+
+    :host([stroke="ring"]:not([usage="input"])) button:focus-visible {
+      border: none;
+      box-shadow: var(
+        --action-ring-shadow-focus,
+        inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color-focus)
+      );
+    }
+
+    :host([stroke="ring"]:not([usage="input"])) button:disabled {
+      border: none;
+      box-shadow: var(
+        --action-ring-shadow-disabled,
+        inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color-disabled)
+      );
+    }
+
     /* Icon only
     ========================================= */
     :host([icon-only]) button {
       display: flex;
       justify-content: center;
       align-items: center;
-      height: var(--action-icon-only-size);
-      width: var(--action-icon-only-size);
+      height: var(--action-size-medium);
+      width: var(--action-size-medium);
       padding: var(--action-icon-only-padding);
     }
     /* ===================================== */
@@ -478,6 +563,7 @@ class h extends HTMLElement {
       font-size: var(--font-size-15);
       line-height: var(--line-height-25);
       font-weight: var(--font-weight-semi-bold);
+      min-height: var(--action-size-xx-small);
       padding: var(--space-025) var(--space-100);
       border-width: var(--stroke-size-100);
       border-radius: var(--action-radius-x-small);
@@ -490,6 +576,7 @@ class h extends HTMLElement {
       font-size: var(--text-font-size-xs);
       line-height: var(--text-line-height-xs);
       font-weight: var(--font-weight-semi-bold);
+      min-height: var(--action-size-x-small);
       padding: var(--action-padding-x-small);
       border-width: var(--stroke-size-100);
       border-radius: var(--action-radius-x-small);
@@ -498,6 +585,7 @@ class h extends HTMLElement {
     :host([size="small"]) button {
       font-size: var(--text-font-size-s);
       line-height: var(--text-line-height-s);
+      min-height: var(--action-size-small);
       padding: var(--action-padding-small);
       border-radius: var(--action-radius-small);
     }
@@ -505,12 +593,14 @@ class h extends HTMLElement {
     :host([size="medium"]) button {
       font-size: var(--text-font-size-m);
       line-height: var(--text-line-height-m);
+      min-height: var(--action-size-medium);
       border-radius: var(--action-radius-medium);
     }
 
     :host([size="large"]) button {
       font-size: var(--text-font-size-l);
       line-height: var(--text-line-height-l);
+      min-height: var(--action-size-large);
       padding: var(--action-padding-large);
       border-radius: var(--action-radius-large);
     }
@@ -560,26 +650,26 @@ class h extends HTMLElement {
     }
 
     :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));
+      height: var(--action-size-xx-small);
+      width: var(--action-size-xx-small);
       padding: var(--action-icon-only-padding);
     }
 
     :host([size="x-small"][icon-only]) button {
-      height: var(--action-icon-only-size-x-small);
-      width: var(--action-icon-only-size-x-small);
+      height: var(--action-size-x-small);
+      width: var(--action-size-x-small);
       padding: var(--action-icon-only-padding);
     }
 
     :host([size="small"][icon-only]) button {
-      height: var(--action-icon-only-size-small);
-      width: var(--action-icon-only-size-small);
+      height: var(--action-size-small);
+      width: var(--action-size-small);
       padding: var(--action-icon-only-padding);
     }
 
     :host([size="large"][icon-only]) button {
-      height: var(--action-icon-only-size-large);
-      width: var(--action-icon-only-size-large);
+      height: var(--action-size-large);
+      width: var(--action-size-large);
       padding: var(--action-icon-only-padding);
     }
 
@@ -691,11 +781,44 @@ class h extends HTMLElement {
       margin-left: var(--space-000);
     }
 
+    :host([has-video]) {
+      display: inline-block;
+      width: auto;
+      text-align: initial;
+    }
+
+    :host([has-video]) button,
+    :host([has-video]) button:hover,
+    :host([has-video]) button:focus,
+    :host([has-video]) button:focus-visible,
+    :host([has-video]) button:disabled {
+      display: block;
+      width: 100%;
+      min-height: 0;
+      padding: var(--space-000);
+      border: none;
+      border-radius: var(--radius-000);
+      background: transparent;
+      color: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      text-align: initial;
+      box-shadow: none;
+      outline-offset: var(--video-thumbnail-action-focus-outline-offset, var(--space-300));
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+
+    :host([focus-ring="outset"]) button:focus-visible {
+      outline-offset: var(--action-focus-outline-outset-offset, var(--stroke-size-200));
+    }
+
 
     </style>
 
     <button 
-      part="${b("text", "spacing", "layout", "visual")}"
+      part="${h("text", "spacing", "layout", "visual")}"
       onclick="${this.getAttribute("onclick")}" 
       type="${this.getAttribute("type") || "button"}" 
       aria-label="${this.getAttribute("aria-label") || ""}"
@@ -712,48 +835,60 @@ class h extends HTMLElement {
       this.shadowRoot.querySelector("slot:not([name])"),
       this.shadowRoot.querySelector('slot[name="before"]'),
       this.shadowRoot.querySelector('slot[name="after"]')
-    ].forEach((r) => r == null ? void 0 : r.addEventListener("slotchange", () => this.syncButtonState())), requestAnimationFrame(() => this.syncButtonState());
+    ].forEach((a) => a == null ? void 0 : a.addEventListener("slotchange", () => this.syncButtonState())), requestAnimationFrame(() => this.syncButtonState());
   }
-  attributeChangedCallback(o, t, n) {
-    var r;
+  attributeChangedCallback(o, t, s) {
+    var a;
     if (o === "disabled") {
-      const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button");
+      const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button");
       e && (this.hasAttribute("disabled") ? e.setAttribute("disabled", "") : e.removeAttribute("disabled"));
     }
-    o === "size" && t !== n && this.shadowRoot && requestAnimationFrame(() => this.syncButtonState());
+    o === "size" && t !== s && this.shadowRoot && requestAnimationFrame(() => this.syncButtonState()), o === "stroke-ring-size" && t !== s && this.syncRingSizeAttribute();
+  }
+  syncRingSizeAttribute() {
+    var a;
+    const o = (a = this.getAttribute("stroke-ring-size")) == null ? void 0 : a.trim();
+    if (!o) {
+      this.style.removeProperty("--action-ring-size");
+      return;
+    }
+    const t = o.startsWith("stroke-size-") ? o.replace("stroke-size-", "") : o, s = /^(100|200|300|400|500)$/.test(t);
+    this.style.setProperty("--action-ring-size", s ? `var(--stroke-size-${t})` : o);
   }
   syncButtonState() {
     const o = this.shadowRoot;
     if (!o) return;
-    const t = o.querySelector("slot:not([name])"), n = o.querySelector('slot[name="before"]'), r = o.querySelector('slot[name="after"]'), e = (a) => a ? a.assignedNodes({ flatten: !0 }).some((i) => {
-      var d;
-      return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((d = i.textContent) != null && d.trim());
-    }) : !1, s = e(n), l = e(r);
-    this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", l);
-    const c = (t == null ? void 0 : t.assignedNodes({ flatten: !0 })) ?? [], v = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], u = v.length === 1 && v[0].tagName.toLowerCase() === "mui-avatar" && c.every((a) => {
+    const t = o.querySelector("slot:not([name])"), s = o.querySelector('slot[name="before"]'), a = o.querySelector('slot[name="after"]'), e = (r) => r ? r.assignedNodes({ flatten: !0 }).some((i) => {
+      var c;
+      return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((c = i.textContent) != null && c.trim());
+    }) : !1, n = e(s), l = e(a);
+    this.toggleAttribute("has-before", n), this.toggleAttribute("has-after", l);
+    const d = (t == null ? void 0 : t.assignedNodes({ flatten: !0 })) ?? [], u = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], b = u.some((r) => r.tagName.toLowerCase() === "mui-video-thumbnail");
+    this.toggleAttribute("has-video", b);
+    const v = !b && u.length === 1 && u[0].tagName.toLowerCase() === "mui-avatar" && d.every((r) => {
       var i;
-      return a.nodeType === Node.TEXT_NODE ? !((i = a.textContent) != null && i.trim()) : a.nodeType === Node.ELEMENT_NODE ? a.tagName.toLowerCase() === "mui-avatar" : !1;
+      return r.nodeType === Node.TEXT_NODE ? !((i = r.textContent) != null && i.trim()) : r.nodeType === Node.ELEMENT_NODE ? r.tagName.toLowerCase() === "mui-avatar" : !1;
     });
-    if (this.toggleAttribute("avatar-only", u), !u && c.every((a) => {
+    if (this.toggleAttribute("avatar-only", v), !v && !b && d.every((r) => {
       var i;
-      if (a.nodeType === Node.ELEMENT_NODE) {
-        const d = a;
-        return d.tagName.toLowerCase() === "svg" || d.classList.contains("mui-icon");
+      if (r.nodeType === Node.ELEMENT_NODE) {
+        const c = r;
+        return c.tagName.toLowerCase() === "svg" || c.classList.contains("mui-icon");
       }
-      return a.nodeType === Node.TEXT_NODE && !((i = a.textContent) != null && i.trim());
+      return r.nodeType === Node.TEXT_NODE && !((i = r.textContent) != null && i.trim());
     })) {
-      this.setAttribute("icon-only", ""), this.updateIconSizes(c, !0);
+      this.setAttribute("icon-only", ""), this.updateIconSizes(d, !0);
       return;
     }
-    this.removeAttribute("icon-only"), [n, t, r].forEach((a) => {
-      if (!a) return;
-      const i = a.assignedNodes({ flatten: !0 });
-      this.updateIconSizes(i, !1), u || this.updateAvatarSizes(i), this.updateBadgeSizes(i);
+    this.removeAttribute("icon-only"), [s, t, a].forEach((r) => {
+      if (!r) return;
+      const i = r.assignedNodes({ flatten: !0 });
+      this.updateIconSizes(i, !1), v || this.updateAvatarSizes(i), this.updateBadgeSizes(i);
     });
   }
   // Update avatar sizes based on button size
   updateAvatarSizes(o) {
-    const t = this.getAttribute("size") || "medium", r = {
+    const t = this.getAttribute("size") || "medium", a = {
       "xx-small": "xx-small",
       "x-small": "xx-small",
       small: "xx-small",
@@ -762,29 +897,29 @@ class h extends HTMLElement {
     }[t] || "small";
     o.forEach((e) => {
       if (e.nodeType === Node.ELEMENT_NODE) {
-        const s = e;
-        s.tagName.toLowerCase() === "mui-avatar" && s.setAttribute("size", r);
+        const n = e;
+        n.tagName.toLowerCase() === "mui-avatar" && n.setAttribute("size", a);
       }
     });
   }
   updateIconSizes(o, t) {
-    const n = this.getAttribute("size") || "medium", e = {
+    const s = this.getAttribute("size") || "medium", e = {
       "xx-small": "xx-small",
       "x-small": "x-small",
       small: "x-small",
       medium: t ? "medium" : "small",
       // small for regular, medium for icon-only
       large: t ? "large" : "medium"
-    }[n] || "small";
-    o.forEach((s) => {
-      if (s.nodeType === Node.ELEMENT_NODE) {
-        const l = s;
+    }[s] || "small";
+    o.forEach((n) => {
+      if (n.nodeType === Node.ELEMENT_NODE) {
+        const l = n;
         (l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "mui-icon") && !l.hasAttribute("size") && l.setAttribute("size", e);
       }
     });
   }
   updateBadgeSizes(o) {
-    const t = this.getAttribute("size") || "medium", r = {
+    const t = this.getAttribute("size") || "medium", a = {
       "xx-small": "x-small",
       "x-small": "x-small",
       small: "small",
@@ -793,19 +928,19 @@ class h extends HTMLElement {
     }[t] || "medium";
     o.forEach((e) => {
       if (e.nodeType === Node.ELEMENT_NODE) {
-        const s = e;
-        s.tagName.toLowerCase() === "mui-badge" && s.setAttribute("size", r);
+        const n = e;
+        n.tagName.toLowerCase() === "mui-badge" && n.setAttribute("size", a);
       }
     });
   }
   waitForPartMap() {
     return new Promise((o) => {
-      if (typeof b == "function") return o();
+      if (typeof h == "function") return o();
       const t = () => {
-        typeof b == "function" ? o() : requestAnimationFrame(t);
+        typeof h == "function" ? o() : requestAnimationFrame(t);
       };
       t();
     });
   }
 }
-customElements.get("mui-button") || customElements.define("mui-button", h);
+customElements.get("mui-button") || customElements.define("mui-button", f);

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

@@ -73,7 +73,7 @@ class l extends HTMLElement {
         :host([condensed][inner-space]),
         :host([condensed][has-card-slat-group]),
         :host([condensed][has-accordion-slat-group]) {
-          padding: var(--space-000);
+          padding: var(--stroke-size-100);
         }
         
       </style>

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

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class d extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -17,30 +17,30 @@ class l extends HTMLElement {
     requestAnimationFrame(() => {
       const r = this.shadowRoot;
       if (!r) return;
-      const e = r.querySelector('slot[name="before"]'), s = r.querySelector('slot[name="after"]'), a = (t) => t ? t.assignedNodes({ flatten: !0 }).some((i) => {
-        var c;
-        return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((c = i.textContent) != null && c.trim());
-      }) : !1, n = a(e), o = a(s);
-      this.toggleAttribute("has-before", n), this.toggleAttribute("has-after", o), this.forceAvatarSize(e), this.forceAvatarSize(s);
+      const e = r.querySelector('slot[name="before"]'), s = r.querySelector('slot[name="after"]'), o = (t) => t ? t.assignedNodes({ flatten: !0 }).some((i) => {
+        var n;
+        return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((n = i.textContent) != null && n.trim());
+      }) : !1, c = o(e), a = o(s);
+      this.toggleAttribute("has-before", c), this.toggleAttribute("has-after", a), this.forceAvatarSize(e), this.forceAvatarSize(s);
     });
   }
   forceAvatarSize(r) {
     if (!r) return;
-    const e = this.getAttribute("size") || "medium", a = {
+    const e = this.getAttribute("size") || "medium", o = {
       "x-small": "xx-small",
       small: "x-small",
       medium: "medium",
       large: "medium"
     }[e] || "medium";
-    r.assignedNodes({ flatten: !0 }).forEach((o) => {
-      if (o.nodeType === Node.ELEMENT_NODE) {
-        const t = o, i = t.tagName.toLowerCase();
-        i === "mui-avatar" ? t.setAttribute("size", "xx-small") : i.startsWith("mui-icon-") && t.setAttribute("size", a);
+    r.assignedNodes({ flatten: !0 }).forEach((a) => {
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const t = a, i = t.tagName.toLowerCase();
+        i === "mui-avatar" ? t.setAttribute("size", "xx-small") : i.startsWith("mui-icon-") && t.setAttribute("size", o);
       }
     });
   }
   render() {
-    var c;
+    var n;
     const r = this.getAttribute("size") || "medium", e = {
       "x-small": "x-small",
       small: "x-small",
@@ -51,17 +51,22 @@ class l extends HTMLElement {
       small: "xx-small",
       medium: "x-small",
       large: "small"
-    }, a = {
+    }, o = {
       "x-small": "x-small",
       small: "x-small",
       medium: "small",
       large: "small"
-    }, n = e[r] || "small", o = s[r] || "x-small", t = a[r] || "small", i = (
+    }, c = e[r] || "small", a = s[r] || "x-small", t = o[r] || "small", i = (
       /*css*/
       `
       :host {
         display: inline-flex;
         box-sizing: border-box;
+        min-width: 0;
+        max-width: 100%;
+        --chip-focus-outline: var(--stroke-size-300) var(--stroke-outset) var(--outline-color);
+        --chip-focus-outline-offset: calc(-1 * var(--stroke-size-300));
+        --chip-dismiss-action-size: var(--chip-height-medium);
       }
       :host([disabled]) {
         opacity: 0.4;
@@ -78,12 +83,23 @@ class l extends HTMLElement {
         background: var(--chip-background);
         border-color: var(--chip-border-color);
         border-radius: var(--chip-radius);
+        min-width: 0;
+        max-width: 100%;
         filter: var(
           --chip-filter,
           drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20))
         );
       }
 
+      mui-body {
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      mui-body::part(color) {
+        color: var(--chip-text-color, var(--text-color));
+      }
+
       :host([size="x-small"]) .container {
         height: var(--chip-height-x-small);
         padding: var(--chip-padding-x-small);
@@ -171,6 +187,11 @@ class l extends HTMLElement {
         border-color: var(--chip-border-color-hover);
         box-shadow: inset 0 0 0 1px var(--chip-border-color-hover);
       }
+
+      :host([variant="clickable"]:hover) mui-body::part(color) {
+        color: var(--chip-text-color-hover, var(--chip-text-color, var(--text-color)));
+      }
+
       :host([variant="ghost"]) .container {
         background: var(--chip-ghost-background, transparent);
         border-color: var(--chip-ghost-border-color, color-mix(in srgb, var(--border-color) 50%, transparent));
@@ -187,12 +208,19 @@ class l extends HTMLElement {
       :host([variant="clickable"]:focus-visible) .container {
         background: var(--chip-background-focus);
         border-color: var(--chip-border-color-focus);
-        outline: var(--outline-thick);
+        outline: var(--chip-focus-outline, var(--outline-thick));
+        outline-offset: var(--chip-focus-outline-offset, 0px);
+      }
+
+      :host([variant="clickable"]:focus-visible) mui-body::part(color) {
+        color: var(--chip-text-color-focus, var(--chip-text-color, var(--text-color)));
       }
+
       :host([variant="ghost"]:focus-visible) .container {
         background: var(--chip-ghost-background-focus, color-mix(in srgb, var(--surface-elevated-100) 62%, transparent));
         border-color: var(--chip-ghost-border-color-focus, color-mix(in srgb, var(--border-color) 80%, transparent));
-        outline: var(--outline-thick);
+        outline: var(--chip-focus-outline, var(--outline-thick));
+        outline-offset: var(--chip-focus-outline-offset, 0px);
       }
 
       /* Active: mouse down OR programmatic */
@@ -211,13 +239,14 @@ class l extends HTMLElement {
 
       :host([variant="clickable"]:active) mui-body::part(color),
       :host([variant="clickable"][active]) mui-body::part(color) {
-        color: var(--chip-text-color-active);
+        color: var(--chip-text-color-active, var(--chip-text-color, var(--text-color)));
       }
 
       ::slotted(.mui-icon) {
         box-sizing: border-box;
         padding: var(--space-025);
         fill: var(--chip-icon-fill);
+        flex-shrink: 0;
       }
 
       :host([has-before]) ::slotted(.mui-icon) { 
@@ -258,9 +287,10 @@ class l extends HTMLElement {
 
       /* Dismiss Icon */
       mui-button::part(background) {
-        height: initial;
-        width: initial;
-        padding: var(--space-025);
+        height: var(--chip-dismiss-action-size);
+        width: var(--chip-dismiss-action-size);
+        min-height: var(--chip-dismiss-action-size);
+        padding: var(--space-000);
         border-radius: var(--radius-400);
         background: var(--chip-dismiss-action-background);
         filter: var(--chip-dismiss-action-filter, var(--chip-filter));
@@ -278,7 +308,7 @@ class l extends HTMLElement {
         <style>${i}</style>
         <span class="container">
           <slot name="before"></slot>
-          <mui-body size="${n}" weight="bold">
+          <mui-body size="${c}" weight="bold" truncate>
             <slot></slot>
           </mui-body>
           <mui-button
@@ -288,11 +318,11 @@ class l extends HTMLElement {
             aria-label="Remove chip"
             ${this.hasAttribute("disabled") ? "disabled" : ""}
           >
-            <mui-icon-close size="${o}"></mui-icon-close>
+            <mui-icon-close size="${a}"></mui-icon-close>
           </mui-button>
         </span>
-      `, (c = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || c.addEventListener("click", (d) => {
-      this.hasAttribute("disabled") || (d.stopPropagation(), this.dispatchEvent(
+      `, (n = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || n.addEventListener("click", (l) => {
+      this.hasAttribute("disabled") || (l.stopPropagation(), this.dispatchEvent(
         new CustomEvent("dismiss", {
           bubbles: !0,
           composed: !0,
@@ -304,7 +334,7 @@ class l extends HTMLElement {
           <style>${i}</style>
           <span class="container">
             <slot name="before"></slot>
-            <mui-body size="${n}" weight="bold">
+            <mui-body size="${c}" weight="bold" truncate>
               <slot></slot>
             </mui-body>
             <slot name="after"></slot>
@@ -312,4 +342,4 @@ class l extends HTMLElement {
         `);
   }
 }
-customElements.get("mui-chip") || customElements.define("mui-chip", l);
+customElements.get("mui-chip") || customElements.define("mui-chip", d);