@muibook/components 19.6.0 → 20.1.0

package/dist/esm/components/mui-accordion/core/index.js

@@ -1,4 +1,4 @@
-class c extends HTMLElement {
+class a extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -12,7 +12,7 @@ class c extends HTMLElement {
     e ? this.setAttribute("open", "") : this.removeAttribute("open");
   }
   connectedCallback() {
-    var n, a;
+    var r, n;
     if (!this.shadowRoot) return;
     const e = this.querySelector('[slot="summary"]'), i = this.querySelector('[slot="detail"]');
     if (!e || !i) return;
@@ -46,23 +46,24 @@ class c extends HTMLElement {
       <div class="accordion-detail" role="region" aria-hidden="true">
         <slot name="detail"></slot>
       </div>
-    `, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail");
-    const r = this.shadowRoot.querySelector('slot[name="detail"]'), l = () => {
+    `, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.detailSlotEl = this.shadowRoot.querySelector('slot[name="detail"]');
+    const o = () => {
       this.open && this.detailEl && (this.detailEl.style.maxHeight = this.detailEl.scrollHeight + "px");
     };
-    if (Array.from(r.assignedElements({ flatten: !1 })).forEach((t) => {
-      new ResizeObserver(l).observe(t);
-    }), r.addEventListener("slotchange", () => {
-      Array.from(r.assignedElements({ flatten: !1 })).forEach((t) => {
-        new ResizeObserver(l).observe(t);
-      }), l();
+    if (Array.from(this.detailSlotEl.assignedElements({ flatten: !1 })).forEach((t) => {
+      new ResizeObserver(o).observe(t);
+    }), this.detailSlotEl.addEventListener("slotchange", () => {
+      var t;
+      Array.from(((t = this.detailSlotEl) == null ? void 0 : t.assignedElements({ flatten: !1 })) || []).forEach((l) => {
+        new ResizeObserver(o).observe(l);
+      }), this.syncDetailInert(), o();
     }), this.iconToggleEl = e.querySelector("mui-icon-toggle"), !this.iconToggleEl) {
-      const t = e.querySelector("mui-icon-right-chevron"), o = e.querySelector("mui-icon-down-chevron");
-      t ? (this.chevronEl = t, t.setAttribute("data-icon-animation", "accordion-inline")) : o && (this.chevronEl = o, o.setAttribute("data-icon-animation", "accordion-block"));
+      const t = e.querySelector("mui-icon-right-chevron"), l = e.querySelector("mui-icon-down-chevron");
+      t ? (this.chevronEl = t, t.setAttribute("data-icon-animation", "accordion-inline")) : l && (this.chevronEl = l, l.setAttribute("data-icon-animation", "accordion-block"));
     }
-    (n = this.summaryEl) == null || n.addEventListener("click", () => this.toggleAccordion()), (a = this.summaryEl) == null || a.addEventListener("keydown", (t) => {
+    (r = this.summaryEl) == null || r.addEventListener("click", () => this.toggleAccordion()), (n = this.summaryEl) == null || n.addEventListener("keydown", (t) => {
       (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggleAccordion());
-    }), this.hasAttribute("open") && this.openAccordion();
+    }), this.hasAttribute("open") ? this.openAccordion() : this.syncDetailInert();
   }
   attributeChangedCallback(e, i, s) {
     e === "open" && this.detailEl && this.summaryEl && (s !== null ? this.openAccordion() : this.closeAccordion());
@@ -74,11 +75,18 @@ class c extends HTMLElement {
     var i;
     if (!this.detailEl || !this.summaryEl) return;
     const e = this.detailEl.scrollHeight;
-    this.detailEl.style.maxHeight = e + "px", this.detailEl.setAttribute("open", ""), this.detailEl.setAttribute("aria-hidden", "false"), this.summaryEl.setAttribute("aria-expanded", "true"), (i = this.chevronEl) == null || i.setAttribute("open", ""), this.iconToggleEl && (this.iconToggleEl.toggle = !0, this.iconToggleEl.setAttribute("aria-pressed", "true"));
+    this.detailEl.style.maxHeight = e + "px", this.detailEl.setAttribute("open", ""), this.detailEl.setAttribute("aria-hidden", "false"), this.summaryEl.setAttribute("aria-expanded", "true"), (i = this.chevronEl) == null || i.setAttribute("open", ""), this.syncDetailInert(), this.iconToggleEl && (this.iconToggleEl.toggle = !0, this.iconToggleEl.setAttribute("aria-pressed", "true"));
   }
   closeAccordion() {
     var e;
-    !this.detailEl || !this.summaryEl || (this.detailEl.style.maxHeight = "0", this.detailEl.removeAttribute("open"), this.detailEl.setAttribute("aria-hidden", "true"), this.summaryEl.setAttribute("aria-expanded", "false"), (e = this.chevronEl) == null || e.removeAttribute("open"), this.iconToggleEl && (this.iconToggleEl.toggle = !1, this.iconToggleEl.setAttribute("aria-pressed", "false")));
+    !this.detailEl || !this.summaryEl || (this.detailEl.style.maxHeight = "0", this.detailEl.removeAttribute("open"), this.detailEl.setAttribute("aria-hidden", "true"), this.summaryEl.setAttribute("aria-expanded", "false"), (e = this.chevronEl) == null || e.removeAttribute("open"), this.syncDetailInert(), this.iconToggleEl && (this.iconToggleEl.toggle = !1, this.iconToggleEl.setAttribute("aria-pressed", "false")));
+  }
+  syncDetailInert() {
+    var s;
+    const e = this.hasAttribute("open");
+    (((s = this.detailSlotEl) == null ? void 0 : s.assignedElements({ flatten: !1 })) || []).forEach((o) => {
+      o instanceof HTMLElement && o.toggleAttribute("inert", !e);
+    });
   }
 }
-customElements.get("mui-accordion-core") || customElements.define("mui-accordion-core", c);
+customElements.get("mui-accordion-core") || customElements.define("mui-accordion-core", a);

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

@@ -1,4 +1,4 @@
-class s extends HTMLElement {
+class a extends HTMLElement {
   static get observedAttributes() {
     return ["slot", "size"];
   }
@@ -16,8 +16,8 @@ class s extends HTMLElement {
     const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
     if (!t) return;
     const i = this.getAttribute("size") || "medium";
-    t.assignedElements({ flatten: !0 }).forEach((o) => {
-      o.tagName.toLowerCase() === "mui-body" && o.setAttribute("size", i);
+    t.assignedElements({ flatten: !0 }).forEach((s) => {
+      s.tagName.toLowerCase() === "mui-body" && s.setAttribute("size", i);
     });
   }
   render() {
@@ -30,32 +30,32 @@ class s extends HTMLElement {
           align-items: center;
           justify-content: center;
           box-sizing: border-box;
-          min-height: 4.4rem;
+          min-height: var(--action-size-medium);
           padding: var(--space-200) var(--space-400);
           background: var(--addon-background);
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
-          min-width: 4.4rem;
+          min-width: var(--action-size-medium);
           white-space: nowrap;
         }
         :host([size="x-small"]) {
-          min-height: var(--action-icon-only-size-x-small);
-          min-width: var(--action-icon-only-size-x-small);
+          min-height: var(--action-size-x-small);
+          min-width: var(--action-size-x-small);
           padding: var(--action-padding-x-small);
         }
         :host([size="small"]) {
-          min-height: var(--action-icon-only-size-small);
-          min-width: var(--action-icon-only-size-small);
+          min-height: var(--action-size-small);
+          min-width: var(--action-size-small);
           padding: var(--action-padding-small);
         }
         :host([size="medium"]) {
-          min-height: 4.4rem;
-          min-width: 4.4rem;
+          min-height: var(--action-size-medium);
+          min-width: var(--action-size-medium);
           padding: var(--space-200) var(--space-400);
         }
         :host([size="large"]) {
-          min-height: var(--action-icon-only-size-large);
-          min-width: var(--action-icon-only-size-large);
+          min-height: var(--action-size-large);
+          min-width: var(--action-size-large);
           padding: var(--space-300) var(--space-500);
         }
         :host([slot="before"]) {
@@ -75,4 +75,4 @@ class s extends HTMLElement {
     t == null || t.addEventListener("slotchange", () => this.syncSlottedContent());
   }
 }
-customElements.get("mui-addon") || customElements.define("mui-addon", s);
+customElements.get("mui-addon") || customElements.define("mui-addon", a);

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

@@ -1,6 +1,6 @@
-class w extends HTMLElement {
+class S extends HTMLElement {
   static get observedAttributes() {
-    return ["label", "image", "size", "background", "background-color"];
+    return ["label", "image", "size", "background", "background-color", "status", "status-label"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -13,28 +13,28 @@ class w extends HTMLElement {
   }
   // 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());
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    return t ? t.assignedNodes({ flatten: !0 }).some(
+      (n) => {
+        var o;
+        return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && ((o = n.textContent) == null ? void 0 : o.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();
+  getInitials(t) {
+    if (!t) return "?";
+    const a = t.trim().split(/\s+/);
+    let e = a[0][0] ?? "";
+    return a.length > 1 && (e += a[a.length - 1][0] ?? ""), e.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 = {
+    const t = this.getAttribute("background") || "neutral", a = this.getAttribute("background-color");
+    if (a)
+      return a;
+    const e = {
       neutral: "var(--avatar-background-neutral)",
       positive: "var(--avatar-background-positive)",
       warning: "var(--avatar-background-warning)",
@@ -55,56 +55,97 @@ class w extends HTMLElement {
       blue: "var(--avatar-background-blue)",
       indigo: "var(--avatar-background-indigo)"
     };
-    return a[e] ?? a.neutral;
+    return e[t] ?? e.neutral;
+  }
+  getStatusLabel(t) {
+    const a = this.getAttribute("status-label");
+    return a || {
+      online: "Online",
+      active: "Online",
+      away: "Away",
+      busy: "Busy",
+      dnd: "Do not disturb",
+      offline: "Offline",
+      positive: "Online",
+      warning: "Away",
+      attention: "Do not disturb",
+      neutral: "Offline"
+    }[t] || t;
+  }
+  getStatusBackground(t) {
+    const a = {
+      online: "var(--avatar-status-background-positive, var(--badge-background-positive))",
+      active: "var(--avatar-status-background-positive, var(--badge-background-positive))",
+      away: "var(--avatar-status-background-warning, var(--badge-background-warning))",
+      busy: "var(--avatar-status-background-attention, var(--badge-background-attention))",
+      dnd: "var(--avatar-status-background-attention, var(--badge-background-attention))",
+      offline: "var(--avatar-status-background-neutral, var(--badge-background-neutral))",
+      positive: "var(--avatar-status-background-positive, var(--badge-background-positive))",
+      warning: "var(--avatar-status-background-warning, var(--badge-background-warning))",
+      attention: "var(--avatar-status-background-attention, var(--badge-background-attention))",
+      neutral: "var(--avatar-status-background-neutral, var(--badge-background-neutral))"
+    };
+    return a[t] || 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 = {
+    var h;
+    const t = this.getAttribute("label"), a = this.getAttribute("image"), e = (this.getAttribute("size") || "medium").toLowerCase(), n = this.getAttribute("background") || "neutral", o = this.getAttribute("background-color"), i = ((h = this.getAttribute("status")) == null ? void 0 : h.trim().toLowerCase()) || "", u = t || "Avatar", s = this.hasSlottedContent(), l = a && !this._imageFailed && !s, d = !l && !s, p = this.getInitials(t), c = {
+      "xxx-small": "var(--avatar-xxx-small)",
       "xx-small": "var(--avatar-xx-small)",
       "x-small": "var(--avatar-x-small)",
       small: "var(--avatar-small)",
       medium: "var(--avatar-medium)",
       large: "var(--avatar-large)"
-    }, s = d[a] ?? d.medium, g = {
+    }, r = c[e] ?? c.medium, g = {
+      "xxx-small": "var(--font-size-10)",
       "xx-small": "var(--font-size-15)",
       "x-small": "var(--font-size-100)",
       small: "var(--font-size-200)",
       medium: "var(--font-size-300)",
       large: "var(--font-size-400)"
-    }, k = g[a] ?? g.medium, u = {
+    }, x = g[e] ?? g.medium, v = {
+      "xxx-small": "xx-small",
       "xx-small": "x-small",
       "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, x = (
+    }, w = v[e] ?? v.medium, b = this.getBackgroundCSS(), y = this.getStatusBackground(i), m = i ? this.getStatusLabel(i) : "", $ = n === "neutral" && !o ? `var(--avatar-background-override, ${b})` : b, z = (
       /*css*/
       `
     :host {
       display: inline-flex;
-      width: ${s};
-      height: ${s};
-      border-radius: ${s};
+      position: relative;
+      width: ${r};
+      height: ${r};
+      border-radius: ${r};
+      flex: none;
+    }
+    .avatar-frame {
+      display: inline-flex;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
       font-weight: var(--font-weight-bold);
       letter-spacing: -0.05rem;
-      font-size: ${k};
-      color: var(--text-color);
-      background: ${p};
+      font-size: ${x};
+      color: var(--avatar-text-color, var(--text-color));
+      background: ${$};
       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;
+      padding: ${d || s ? `calc(${r} * 0.1)` : "0"}; 
     }
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
-      display: ${i ? "block" : "none"};
+      display: ${l ? "block" : "none"};
     }
     .initials {
-      display: ${c ? "flex" : "none"};
+      display: ${d ? "flex" : "none"};
       align-items: center;
       justify-content: center;
       width: 100%;
@@ -113,27 +154,46 @@ class w extends HTMLElement {
       text-decoration: none;
     }
     slot {
-      display: ${o ? "flex" : "none"};
+      display: ${s ? "flex" : "none"};
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 100%;
     }
+    ::slotted([class*="mui-icon"]) {
+      fill: var(--avatar-icon-color, currentColor);
+    }
+    .status {
+      display: ${i ? "block" : "none"};
+      position: absolute;
+      right: var(--avatar-status-offset, 0);
+      bottom: var(--avatar-status-offset, 0);
+      width: var(--avatar-status-size, max(0.8rem, calc(${r} * 0.28)));
+      height: var(--avatar-status-size, max(0.8rem, calc(${r} * 0.28)));
+      border-radius: 999px;
+      background: ${y};
+      border: var(--avatar-status-border, var(--stroke-size-200) solid var(--surface));
+      box-sizing: border-box;
+      pointer-events: none;
+    }
   `
     );
     if (this.shadowRoot.innerHTML = `
-    <style>${x}</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 = () => {
+    <style>${z}</style>
+    <span class="avatar-frame">
+      ${l ? `<img src="${a}" alt="${u}" />` : ""}
+      <div class="initials" role="img" aria-label="${u}">${p}</div>
+      <slot></slot>
+    </span>
+    <span class="status" aria-label="${m}" title="${m}"></span>
+  `, s && this.shadowRoot.querySelector("slot").assignedElements().forEach((f) => {
+      f.tagName.toLowerCase().startsWith("mui-icon-") && f.setAttribute("size", w);
+    }), l && a) {
+      const k = this.shadowRoot.querySelector("img");
+      k.onerror = () => {
         this._imageFailed = !0, this.render();
       };
     }
   }
 }
-customElements.get("mui-avatar") || customElements.define("mui-avatar", w);
+customElements.get("mui-avatar") || customElements.define("mui-avatar", S);

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

@@ -0,0 +1,158 @@
+import "../mui-avatar/index.js";
+import "../mui-body/index.js";
+import "../mui-link/index.js";
+import "../mui-stack/hstack/index.js";
+import "../mui-stack/vstack/index.js";
+const h = {
+  "x-small": {
+    avatar: "x-small",
+    primary: "xx-small",
+    secondary: "xx-small"
+  },
+  small: {
+    avatar: "small",
+    primary: "x-small",
+    secondary: "x-small"
+  },
+  medium: {
+    avatar: "medium",
+    primary: "small",
+    secondary: "x-small"
+  },
+  large: {
+    avatar: "large",
+    primary: "medium",
+    secondary: "small"
+  }
+};
+class u extends HTMLElement {
+  static get observedAttributes() {
+    return ["primary", "secondary", "image", "label", "href", "target", "usage", "size"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  escapeAttribute(t) {
+    return (t || "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+  escapeText(t) {
+    return (t || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+  getSize() {
+    const t = (this.getAttribute("size") || "medium").toLowerCase();
+    return t in h ? t : "medium";
+  }
+  renderAvatar(t) {
+    const r = this.getAttribute("image"), c = this.getAttribute("label") || this.getAttribute("primary") || "Profile", e = r ? ` image="${this.escapeAttribute(r)}"` : "";
+    return `<mui-avatar size="${t}"${e} label="${this.escapeAttribute(c)}"></mui-avatar>`;
+  }
+  syncSlottedTextSizes(t) {
+    const r = (e, o) => {
+      const i = e.tagName.toLowerCase();
+      (i === "mui-body" || i === "mui-link") && e.setAttribute("size", o);
+    }, c = (e, o) => {
+      var a;
+      Array.from(this.children).filter((s) => s.getAttribute("slot") === e).forEach((s) => r(s, o));
+      const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector(`slot[name="${e}"]`);
+      i == null || i.assignedElements({ flatten: !0 }).forEach((s) => r(s, o));
+    };
+    c("primary", t.primary), c("secondary", t.secondary);
+  }
+  render() {
+    var n, m;
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("primary"), r = this.getAttribute("secondary"), c = this.getAttribute("label") || t || "Profile", e = this.getAttribute("href"), o = this.getAttribute("target"), i = this.getSize(), a = h[i], s = o ? ` target="${this.escapeAttribute(o)}"` : "", l = this.renderAvatar(a.avatar), d = e ? (
+      /*html*/
+      `
+          <mui-link class="avatar-action" href="${this.escapeAttribute(e)}" aria-label="Open ${this.escapeAttribute(c)} profile"${s}>
+            ${l}
+          </mui-link>
+        `
+    ) : l, p = (
+      /*css*/
+      `
+      :host {
+        display: inline-flex;
+        min-width: 0;
+        max-width: 100%;
+        --avatar-chip-primary-size: ${a.primary};
+        --avatar-chip-secondary-size: ${a.secondary};
+        color: var(--avatar-chip-text-color, currentColor);
+        --text-color: var(--avatar-chip-text-color, currentColor);
+        --text-color-optional: var(--avatar-chip-secondary-color, var(--avatar-chip-text-color, currentColor));
+        --link-text-color-default: var(--avatar-chip-link-color, var(--avatar-chip-text-color, currentColor));
+        --link-text-color-default-hover: var(--avatar-chip-link-color-hover, var(--avatar-chip-link-color, var(--avatar-chip-text-color, currentColor)));
+        --link-text-color-default-focus: var(--avatar-chip-link-color-focus, var(--avatar-chip-link-color, var(--avatar-chip-text-color, currentColor)));
+      }
+
+      .avatar-chip {
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      .avatar-action {
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+      }
+
+      mui-avatar {
+        flex: 0 0 auto;
+        border: 0;
+        box-shadow: none;
+      }
+
+      .copy {
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      :host([usage="media-player"]) mui-avatar {
+        border: var(--avatar-chip-avatar-border, var(--border-thin));
+        box-shadow: var(--avatar-chip-avatar-shadow, none);
+      }
+
+      mui-body {
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      slot[name="primary"],
+      slot[name="secondary"] {
+        display: contents;
+      }
+
+      slot[name="primary"]::slotted(*),
+      slot[name="secondary"]::slotted(*) {
+        min-width: 0;
+        max-width: 100%;
+      }
+    `
+    );
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${p}</style>
+      <mui-h-stack class="avatar-chip" space="var(--space-200)" aligny="center">
+        ${d}
+        <mui-v-stack class="copy" space="var(--space-000)">
+          <slot name="primary">
+            <mui-body weight="bold" size="${a.primary}" truncate>${this.escapeText(t)}</mui-body>
+          </slot>
+          <slot name="secondary">
+            ${r ? `<mui-body weight="medium" size="${a.secondary}" truncate>${this.escapeText(r)}</mui-body>` : ""}
+          </slot>
+        </mui-v-stack>
+      </mui-h-stack>
+    `, this.syncSlottedTextSizes(a), (n = this.shadowRoot.querySelector('slot[name="primary"]')) == null || n.addEventListener("slotchange", () => this.syncSlottedTextSizes(a)), (m = this.shadowRoot.querySelector('slot[name="secondary"]')) == null || m.addEventListener("slotchange", () => this.syncSlottedTextSizes(a));
+  }
+}
+customElements.get("mui-avatar-chip") || customElements.define("mui-avatar-chip", u);
+export {
+  u as MuiAvatarChip
+};

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

@@ -0,0 +1,88 @@
+import "../mui-avatar/index.js";
+class n extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "overlap", "label", "fan"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  syncAvatars() {
+    var t;
+    const r = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
+    if (!r) return;
+    const e = this.getAttribute("size") || "", s = r.assignedElements({ flatten: !0 }).filter((a) => a.tagName.toLowerCase() === "mui-avatar");
+    s.forEach((a, o) => {
+      e && !a.hasAttribute("size") && a.setAttribute("size", e);
+      const i = a;
+      i.style.zIndex = String(s.length - o), i.style.marginInlineStart = o === 0 ? "0" : "var(--avatar-group-overlap)";
+    });
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const r = this.getAttribute("size") || "medium", e = this.getAttribute("overlap") || "tight", s = this.getAttribute("label") || "Avatar group", t = {
+      "xxx-small": "var(--avatar-xxx-small)",
+      "xx-small": "var(--avatar-xx-small)",
+      "x-small": "var(--avatar-x-small)",
+      small: "var(--avatar-small)",
+      medium: "var(--avatar-medium)",
+      large: "var(--avatar-large)"
+    }, a = {
+      loose: "calc(var(--avatar-group-size) * -0.2)",
+      tight: "calc(var(--avatar-group-size) * -0.32)",
+      compact: "calc(var(--avatar-group-size) * -0.44)"
+    }, o = t[r] || t.medium, i = a[e] || a.tight;
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          --avatar-group-size: ${o};
+          --avatar-group-overlap: ${i};
+          --avatar-group-ring-color: var(--surface);
+          --avatar-group-fan-overlap: var(--space-100);
+          --avatar-group-transition: var(--speed-200) ease;
+          display: inline-flex;
+          align-items: center;
+          isolation: isolate;
+        }
+
+        .group {
+          display: inline-flex;
+          align-items: center;
+          min-height: var(--avatar-group-size);
+        }
+
+        ::slotted(mui-avatar) {
+          position: relative;
+          transition:
+            margin-inline-start var(--avatar-group-transition),
+            transform var(--avatar-group-transition),
+            box-shadow var(--avatar-group-transition);
+          box-shadow: 0 0 0 var(--avatar-group-ring-width, var(--stroke-size-200))
+            var(--avatar-group-ring-color, var(--surface));
+        }
+
+        :host([card-slot]) {
+          --avatar-group-ring-color: var(--surface-elevated-100);
+        }
+
+        :host([fan]:hover),
+        :host([fan]:focus-within) {
+          --avatar-group-overlap: var(--avatar-group-fan-overlap);
+        }
+
+      </style>
+      <span class="group" role="group" aria-label="${s}">
+        <slot></slot>
+      </span>
+    `;
+    const l = this.shadowRoot.querySelector("slot");
+    l == null || l.addEventListener("slotchange", () => this.syncAvatars()), this.syncAvatars();
+  }
+}
+customElements.get("mui-avatar-group") || customElements.define("mui-avatar-group", n);