@muibook/components 7.0.0 → 8.0.0

package/dist/esm/agent/keywords/index.js

@@ -104,6 +104,7 @@ const a = {
     "variant",
     "state"
   ],
+  addOn: ["input after", "input before"],
   // COMPOSITIONS
   wallet: [
     "wallet",

package/dist/esm/agent/prompts/index.js

@@ -30,7 +30,19 @@ Rules:
         select: `<mui-field label="Brand"><mui-select options='[{ "value": "jpy", "label": "JPY" },{ "value": "usd", "label": "USD" }]'></mui-select></mui-field>`,
         inputAndSelect: `<mui-field label="Amount to transfer" slot="body"><mui-input type="number"><mui-select slot="after" label="Currency" hide-label style="width: 100px;" options='[{ "value": "jpy", "label": "JPY" },{ "value": "usd", "label": "USD" }]'></mui-select></mui-input></mui-field>`
       },
-      addon: "<mui-addon>...</mui-addon>",
+      addon: {
+        text: [
+          '<mui-input><mui-addon slot="before">$</mui-addon></mui-input>',
+          '<mui-input><mui-addon slot="after">kg</mui-addon></mui-input>',
+          '<mui-input><mui-addon slot="before">%</mui-addon></mui-input>',
+          '<mui-field label="Website"><mui-input><mui-addon slot="before">https://</mui-addon></mui-input></mui-field>'
+        ],
+        icon: [
+          '<mui-input><mui-addon slot="before"><mui-icon name="search"></mui-icon></mui-addon></mui-input>',
+          '<mui-input><mui-addon slot="after"><mui-icon name="calendar"></mui-icon></mui-addon></mui-input>',
+          '<mui-field label="Email"><mui-input type="email"><mui-addon slot="before"><mui-icon name="mail"></mui-icon></mui-addon></mui-input></mui-field>'
+        ]
+      },
       checkbox: "<mui-checkbox>...</mui-checkbox>",
       fileUpload: "<mui-file-upload>...</mui-file-upload>",
       input: "<mui-input>...</mui-input>",

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

@@ -24,7 +24,6 @@ class o extends HTMLElement {
           background: var(--addon-background);
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
-          height: 4.4rem;
           min-width: 4.4rem;
           white-space: nowrap;
         }

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

@@ -117,7 +117,7 @@ class x extends HTMLElement {
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>${w}</style>
-      <${r} size="small" color="var(${v})" class="icon"></${r}>
+      <${r} size="medium" color="var(${v})" class="icon"></${r}>
       <mui-body>
         <span class="label">${f}</span>
         <slot></slot>

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

@@ -0,0 +1,136 @@
+class y extends HTMLElement {
+  static get observedAttributes() {
+    return ["label", "image", "size", "background", "background-color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this._imageFailed === void 0 && (this._imageFailed = !1), this.render();
+  }
+  attributeChangedCallback() {
+    this._imageFailed === void 0 && (this._imageFailed = !1), this.render();
+  }
+  // Check if slot has content
+  hasSlottedContent() {
+    var a;
+    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot");
+    return e ? e.assignedNodes({ flatten: !0 }).some(
+      (r) => {
+        var n;
+        return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE && ((n = r.textContent) == null ? void 0 : n.trim());
+      }
+    ) : !1;
+  }
+  // Generate initials from label
+  getInitials(e) {
+    if (!e) return "?";
+    const t = e.trim().split(/\s+/);
+    let a = t[0][0] ?? "";
+    return t.length > 1 && (a += t[t.length - 1][0] ?? ""), a.toUpperCase();
+  }
+  // Map background prop to token or app-supplied colour
+  getBackgroundCSS() {
+    const e = this.getAttribute("background") || "neutral", t = this.getAttribute("background-color");
+    if (t)
+      return t;
+    const a = {
+      neutral: "var(--avatar-background-neutral)",
+      positive: "var(--avatar-background-positive)",
+      warning: "var(--avatar-background-warning)",
+      attention: "var(--avatar-background-attention)",
+      // Random-use profile colours
+      purple: "var(--avatar-background-purple)",
+      violet: "var(--avatar-background-violet)",
+      pink: "var(--avatar-background-pink)",
+      magenta: "var(--avatar-background-magenta)",
+      red: "var(--avatar-background-red)",
+      orange: "var(--avatar-background-orange)",
+      amber: "var(--avatar-background-amber)",
+      yellow: "var(--avatar-background-yellow)",
+      lime: "var(--avatar-background-lime)",
+      green: "var(--avatar-background-green)",
+      teal: "var(--avatar-background-teal)",
+      cyan: "var(--avatar-background-cyan)",
+      blue: "var(--avatar-background-blue)",
+      indigo: "var(--avatar-background-indigo)"
+    };
+    return a[e] ?? a.neutral;
+  }
+  render() {
+    const e = this.getAttribute("label"), t = this.getAttribute("image"), a = (this.getAttribute("size") || "medium").toLowerCase(), r = this.getAttribute("background") || "neutral", n = this.getAttribute("background-color"), l = e || "Avatar", o = this.hasSlottedContent(), i = t && !this._imageFailed && !o, c = !i && !o, h = this.getInitials(e), d = {
+      "x-small": "var(--avatar-x-small)",
+      small: "var(--avatar-small)",
+      medium: "var(--avatar-medium)",
+      large: "var(--avatar-large)"
+    }, s = d[a] ?? d.medium, g = {
+      "x-small": "var(--font-size-15)",
+      small: "var(--font-size-200)",
+      medium: "var(--font-size-300)",
+      large: "var(--font-size-400)"
+    }, k = g[a] ?? g.medium, u = {
+      "x-small": "x-small",
+      small: "small",
+      medium: "medium",
+      large: "large"
+    }, f = u[a] ?? u.medium, m = this.getBackgroundCSS(), p = r === "neutral" && !n ? `var(--avatar-background-override, ${m})` : m, w = (
+      /*css*/
+      `
+    :host {
+      display: inline-flex;
+      width: ${s};
+      height: ${s};
+      border-radius: ${s};
+      font-weight: var(--font-weight-bold);
+      letter-spacing: -0.05rem;
+      font-size: ${k};
+      color: var(--text-color);
+      background: ${p};
+      overflow: hidden;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+      box-sizing: border-box;
+      padding: ${c || o ? `calc(${s} * 0.1)` : "0"}; 
+      flex: none;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: ${i ? "block" : "none"};
+    }
+    .initials {
+      display: ${c ? "flex" : "none"};
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      text-transform: uppercase;
+      text-decoration: none;
+    }
+    slot {
+      display: ${o ? "flex" : "none"};
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+  `
+    );
+    if (this.shadowRoot.innerHTML = `
+    <style>${w}</style>
+    ${i ? `<img src="${t}" alt="${l}" />` : ""}
+    <div class="initials" role="img" aria-label="${l}">${h}</div>
+    <slot></slot>
+  `, o && this.shadowRoot.querySelector("slot").assignedElements().forEach((b) => {
+      b.tagName.toLowerCase().startsWith("mui-icon-") && b.setAttribute("size", f);
+    }), i && t) {
+      const v = this.shadowRoot.querySelector("img");
+      v.onerror = () => {
+        this._imageFailed = !0, this.render();
+      };
+    }
+  }
+}
+customElements.get("mui-avatar") || customElements.define("mui-avatar", y);

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

@@ -1,5 +1,5 @@
 import { getPartMap as u } from "../../utils/part-map/index.js";
-class v extends HTMLElement {
+class h extends HTMLElement {
   static get observedAttributes() {
     return ["onclick", "type", "aria-label", "disabled", "variant", "size", "usage"];
   }
@@ -337,7 +337,7 @@ class v extends HTMLElement {
     }
 
     /* Dropdown Slot */
-    :host(.dropdown-slot) button {
+    :host([size].dropdown-slot) button {
       border-radius: var(--radius-000);
     }
 
@@ -346,16 +346,40 @@ class v extends HTMLElement {
       background: var(--dropdown-button-background-hover);
     }
 
-    :host(.dropdown-slot-first) button {
+    :host([size].dropdown-slot-first) button {
       border-top-left-radius: calc(var(--radius-100) / 2);
       border-top-right-radius: calc(var(--radius-100) / 2);
     }
 
-    :host(.dropdown-slot-last) button  {
+    :host([size].dropdown-slot-last) button   {
       border-bottom-left-radius: calc(var(--radius-100) / 2);
       border-bottom-right-radius: calc(var(--radius-100) / 2);
     }
 
+    :host button ::slotted(mui-avatar) {
+      --avatar-background-override: var(--action-avatar-background);
+    }
+
+    :host([size="x-small"]) button ::slotted(mui-avatar) {
+      margin-right: var(--space-025);
+    }
+    :host([size="small"]) button ::slotted(mui-avatar),
+    :host([size="medium"]) button ::slotted(mui-avatar),
+    :host([size="large"]) button ::slotted(mui-avatar) {
+      margin-right: var(--space-050);
+    }
+
+    :host button:disabled ::slotted(mui-avatar),
+    :host button:disabled:hover ::slotted(mui-avatar),
+    :host button:disabled:focus ::slotted(mui-avatar) {
+      opacity: 0.5;
+      --avatar-background-override: var(--action-avatar-background);
+    }
+
+    :host button:hover ::slotted(mui-avatar),
+    :host button:focus ::slotted(mui-avatar) {
+      --avatar-background-override: var(--action-avatar-background-hover);
+    }
 
     /* Before & After Icon
     ========================================= */
@@ -388,29 +412,34 @@ class v extends HTMLElement {
     ========================================= */
     :host([size="x-small"]) button,
     :host([size="x-small"]) button:hover,
-    :host([size="x-small"]) button:focus {
+    :host([size="x-small"]) button:focus,
+    :host([size="x-small"]) button:disabled {
       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);
       border-width: var(--stroke-size-100);
+      border-radius: var(--action-radius-x-small);
     }
 
     :host([size="small"]) button {
       font-size: var(--text-font-size-s);
       line-height: var(--text-line-height-s);
       padding: var(--action-padding-small);
+      border-radius: var(--action-radius-small);
     }
 
     :host([size="medium"]) button {
       font-size: var(--text-font-size-m);
       line-height: var(--text-line-height-m);
+      border-radius: var(--action-radius-medium);
     }
 
     :host([size="large"]) button {
       font-size: var(--text-font-size-l);
       line-height: var(--text-line-height-l);
       padding: var(--action-padding-large);
+      border-radius: var(--action-radius-large);
     }
 
     :host([size="x-small"][icon-only]) button {
@@ -509,69 +538,84 @@ class v extends HTMLElement {
     `
     );
     this.shadowRoot.innerHTML = a, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
-      const e = this.shadowRoot;
-      if (!e) return;
-      const o = e.querySelector("slot:not([name])"), c = e.querySelector('slot[name="before"]'), s = e.querySelector('slot[name="after"]'), t = (i) => i ? i.assignedNodes({ flatten: !0 }).some((r) => {
-        var l;
-        return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE && !!((l = r.textContent) != null && l.trim());
-      }) : !1, d = t(c), h = t(s);
-      this.classList.toggle("has-before", d), this.classList.toggle("has-after", h);
-      const b = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [];
-      b.every((i) => {
-        var r;
-        if (i.nodeType === Node.ELEMENT_NODE) {
-          const l = i;
-          return l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon");
+      const i = this.shadowRoot;
+      if (!i) return;
+      const t = i.querySelector("slot:not([name])"), n = i.querySelector('slot[name="before"]'), r = i.querySelector('slot[name="after"]'), o = (l) => l ? l.assignedNodes({ flatten: !0 }).some((s) => {
+        var c;
+        return s.nodeType === Node.ELEMENT_NODE || s.nodeType === Node.TEXT_NODE && !!((c = s.textContent) != null && c.trim());
+      }) : !1, d = o(n), v = o(r);
+      this.classList.toggle("has-before", d), this.classList.toggle("has-after", v);
+      const b = (t == null ? void 0 : t.assignedNodes({ flatten: !0 })) ?? [];
+      b.every((l) => {
+        var s;
+        if (l.nodeType === Node.ELEMENT_NODE) {
+          const c = l;
+          return c.tagName.toLowerCase() === "svg" || c.classList.contains("mui-icon");
         }
-        return i.nodeType === Node.TEXT_NODE && !((r = i.textContent) != null && r.trim());
-      }) ? (this.setAttribute("icon-only", ""), this.updateIconSizes(b, !0)) : (this.removeAttribute("icon-only"), [c, o, s].forEach((r) => {
-        if (r) {
-          const l = r.assignedNodes({ flatten: !0 });
-          this.updateIconSizes(l, !1);
+        return l.nodeType === Node.TEXT_NODE && !((s = l.textContent) != null && s.trim());
+      }) ? (this.setAttribute("icon-only", ""), this.updateIconSizes(b, !0)) : (this.removeAttribute("icon-only"), [n, t, r].forEach((s) => {
+        if (s) {
+          const c = s.assignedNodes({ flatten: !0 });
+          this.updateIconSizes(c, !1), this.updateAvatarSizes(c);
         }
       }));
     });
   }
-  attributeChangedCallback(n, a, e) {
-    n === "size" && a !== e && this.shadowRoot && requestAnimationFrame(() => {
-      const o = this.shadowRoot;
-      if (!o) return;
-      const c = [
-        o.querySelector("slot:not([name])"),
-        o.querySelector('slot[name="before"]'),
-        o.querySelector('slot[name="after"]')
-      ], s = this.hasAttribute("icon-only");
-      c.forEach((t) => {
-        if (t) {
-          const d = t.assignedNodes({ flatten: !0 });
-          this.updateIconSizes(d, s);
+  attributeChangedCallback(e, a, i) {
+    e === "size" && a !== i && this.shadowRoot && requestAnimationFrame(() => {
+      const t = this.shadowRoot;
+      if (!t) return;
+      const n = [
+        t.querySelector("slot:not([name])"),
+        t.querySelector('slot[name="before"]'),
+        t.querySelector('slot[name="after"]')
+      ], r = this.hasAttribute("icon-only");
+      n.forEach((o) => {
+        if (o) {
+          const d = o.assignedNodes({ flatten: !0 });
+          this.updateIconSizes(d, r), this.updateAvatarSizes(d);
         }
       });
     });
   }
-  updateIconSizes(n, a) {
-    const e = this.getAttribute("size") || "medium", c = {
+  // Update avatar sizes based on button size
+  updateAvatarSizes(e) {
+    const a = this.getAttribute("size") || "medium", t = {
+      "x-small": "x-small",
+      small: "x-small",
+      medium: "small",
+      large: "medium"
+    }[a] || "small";
+    e.forEach((n) => {
+      if (n.nodeType === Node.ELEMENT_NODE) {
+        const r = n;
+        r.tagName.toLowerCase() === "mui-avatar" && r.setAttribute("size", t);
+      }
+    });
+  }
+  updateIconSizes(e, a) {
+    const i = this.getAttribute("size") || "medium", n = {
       "x-small": "x-small",
       small: "x-small",
       medium: a ? "medium" : "small",
       // small for regular, medium for icon-only
       large: a ? "large" : "medium"
-    }[e] || "small";
-    n.forEach((s) => {
-      if (s.nodeType === Node.ELEMENT_NODE) {
-        const t = s;
-        (t.tagName.toLowerCase() === "svg" || t.classList.contains("mui-icon") || t.tagName.toLowerCase() === "mui-icon") && !t.hasAttribute("size") && t.setAttribute("size", c);
+    }[i] || "small";
+    e.forEach((r) => {
+      if (r.nodeType === Node.ELEMENT_NODE) {
+        const o = r;
+        (o.tagName.toLowerCase() === "svg" || o.classList.contains("mui-icon") || o.tagName.toLowerCase() === "mui-icon") && !o.hasAttribute("size") && o.setAttribute("size", n);
       }
     });
   }
   waitForPartMap() {
-    return new Promise((n) => {
-      if (typeof u == "function") return n();
+    return new Promise((e) => {
+      if (typeof u == "function") return e();
       const a = () => {
-        typeof u == "function" ? n() : requestAnimationFrame(a);
+        typeof u == "function" ? e() : requestAnimationFrame(a);
       };
       a();
     });
   }
 }
-customElements.get("mui-button") || customElements.define("mui-button", v);
+customElements.get("mui-button") || customElements.define("mui-button", h);

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

@@ -9,79 +9,55 @@ class d extends HTMLElement {
   connectedCallback() {
     this.render(), this.setupListener();
   }
-  attributeChangedCallback(e, o, c) {
-    var i, r, s;
+  attributeChangedCallback(e, r, i) {
+    var c, o, s;
     if (e === "checked") {
-      const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+      const t = (c = this.shadowRoot) == null ? void 0 : c.querySelector("input");
       if (!t) return;
-      t.checked = c !== null;
+      t.checked = i !== null;
     }
     if (e === "disabled") {
-      const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+      const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
       if (!t) return;
-      t.disabled = c !== null;
+      t.disabled = i !== null;
     }
     if (e === "indeterminate") {
       const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
       if (!t) return;
-      const n = c !== null;
+      const n = i !== null;
       t.indeterminate = n, n && (t.checked = !0, this.setAttribute("checked", ""));
     }
     "id".includes(e) && (this.render(), this.setupListener());
   }
   setupListener() {
-    var o;
-    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
-    e && (e.addEventListener("change", (c) => {
-      const i = c.target;
+    var r;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    e && (e.addEventListener("change", (i) => {
+      const c = i.target;
       this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { checked: i.checked },
+          detail: { checked: c.checked },
           bubbles: !0,
           composed: !0
         })
-      ), i.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
-    }), e.indeterminate = this.hasAttribute("indeterminate"), e.addEventListener("change", (c) => {
-      const i = c.target;
+      ), c.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+    }), e.indeterminate = this.hasAttribute("indeterminate"), e.addEventListener("change", (i) => {
+      const c = i.target;
       this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { checked: i.checked },
+          detail: { checked: c.checked },
           bubbles: !0,
           composed: !0
         })
-      ), this.removeAttribute("indeterminate"), i.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+      ), this.removeAttribute("indeterminate"), c.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
     }));
   }
   render() {
-    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, o = this.hasAttribute("checked"), c = this.hasAttribute("disabled"), i = `
-      <svg
-        class="icon"
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="none"
-        viewBox="0 0 16 16"
-      >
-        <path
-          fill="currentColor"
-          d="M12.783 3.59a1 1 0 0 1 1.414 1.414L6.791 12.41a1 1 0 0 1-1.414 0L1.803 8.837l-.069-.076A1 1 0 0 1 3.14 7.353l.077.07 2.866 2.866z"
-        ></path>
-      </svg>
-    `, r = this.hasAttribute("indeterminate"), t = r ? `
-      <svg
-        class="icon"
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="none"
-        viewBox="0 0 16 16"
-      >
-        <path
-          fill="currentColor"
-          d="m12.5 7 .102.005a1 1 0 0 1 0 1.99L12.5 9h-9a1 1 0 0 1 0-2z"
-        ></path>
-      </svg>
-    ` : i, n = this.innerHTML.trim().length > 0;
+    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, r = this.hasAttribute("checked"), i = this.hasAttribute("disabled"), c = `
+      <mui-icon-checkmark class="icon" size="x-small" color="inverted"></mui-icon-checkmark>
+    `, o = this.hasAttribute("indeterminate"), t = o ? `
+      <mui-icon-subtract class="icon" size="x-small" color="inverted"></mui-icon-subtract>
+    ` : c, n = this.innerHTML.trim().length > 0;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -98,8 +74,8 @@ class d extends HTMLElement {
 
         input[type="checkbox"] {
           all: unset;
-          width: 19px;
-          height: 19px;
+          width: var(--checkbox-size);
+          height: var(--checkbox-size);
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
           border-radius: var(--checkbox-radius);
@@ -142,11 +118,9 @@ class d extends HTMLElement {
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
-          width: 16px;
-          height: 16px;
           pointer-events: none;
           display: none;
-          color: var(--checkbox-icon-color-checked);
+          fill: var(--checkbox-icon-color-checked);
         }
 
         .checkbox-wrapper input:checked + .icon {
@@ -164,9 +138,9 @@ class d extends HTMLElement {
           <input 
             type="checkbox" 
             id="${e}" 
-            ${r ? "indeterminate" : ""}
-            ${r || o ? "checked" : ""}
-            ${c ? "disabled" : ""} 
+            ${o ? "indeterminate" : ""}
+            ${o || r ? "checked" : ""}
+            ${i ? "disabled" : ""} 
           />
           ${t}
         </span>
@@ -175,8 +149,8 @@ class d extends HTMLElement {
     `;
   }
   get checked() {
-    var o;
-    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+    var r;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
     return (e == null ? void 0 : e.checked) ?? !1;
   }
   set checked(e) {

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

@@ -17,15 +17,24 @@ class d extends HTMLElement {
     requestAnimationFrame(() => {
       const t = this.shadowRoot;
       if (!t) return;
-      const e = t.querySelector('slot[name="before"]'), i = t.querySelector('slot[name="after"]'), r = (o) => o ? o.assignedNodes({ flatten: !0 }).some((a) => {
-        var s;
-        return a.nodeType === Node.ELEMENT_NODE || a.nodeType === Node.TEXT_NODE && !!((s = a.textContent) != null && s.trim());
-      }) : !1, c = r(e), n = r(i);
-      this.classList.toggle("has-before", c), this.classList.toggle("has-after", n);
+      const i = t.querySelector('slot[name="before"]'), e = t.querySelector('slot[name="after"]'), a = (o) => o ? o.assignedNodes({ flatten: !0 }).some((s) => {
+        var c;
+        return s.nodeType === Node.ELEMENT_NODE || s.nodeType === Node.TEXT_NODE && !!((c = s.textContent) != null && c.trim());
+      }) : !1, r = a(i), n = a(e);
+      this.classList.toggle("has-before", r), this.classList.toggle("has-after", n), this.forceAvatarSize(i), this.forceAvatarSize(e);
+    });
+  }
+  forceAvatarSize(t) {
+    if (!t) return;
+    t.assignedNodes({ flatten: !0 }).forEach((e) => {
+      if (e.nodeType === Node.ELEMENT_NODE) {
+        const a = e, r = a.tagName.toLowerCase();
+        r === "mui-avatar" ? a.setAttribute("size", "x-small") : r.startsWith("mui-icon-") && a.setAttribute("size", "medium");
+      }
     });
   }
   render() {
-    var e;
+    var i;
     const t = (
       /*css*/
       `
@@ -105,8 +114,6 @@ class d extends HTMLElement {
       ::slotted(.mui-icon) {
         box-sizing: border-box;
         padding: var(--space-025);
-        width: var(--space-500);
-        height: var(--space-500);
         fill: var(--chip-icon-fill);
       }
 
@@ -157,8 +164,8 @@ class d extends HTMLElement {
         <mui-button part="dismiss-btn" variant="tertiary" aria-label="Remove chip">
           <mui-icon-close size="x-small"></mui-icon-close>
         </mui-button>
-      `, (e = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || e.addEventListener("click", (i) => {
-      i.stopPropagation(), this.dispatchEvent(
+      `, (i = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || i.addEventListener("click", (e) => {
+      e.stopPropagation(), this.dispatchEvent(
         new CustomEvent("dismiss", {
           bubbles: !0,
           composed: !0,