@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.1

package/dist/elements/alert.js

@@ -0,0 +1,62 @@
+import { base } from "./shared.js";
+export function defineAlert() {
+    if (customElements.get("spui-alert"))
+        return;
+    class SpuiAlert extends HTMLElement {
+        static observedAttributes = ["intent", "appearance", "assertive", "dismissible", "dismiss-label"];
+        connectedCallback() { if (!this.shadowRoot)
+            this.render(); this.syncSemantics(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.syncSemantics(); }
+        syncSemantics() {
+            const intent = this.getAttribute("intent");
+            const assertive = this.hasAttribute("assertive") ? this.getAttribute("assertive") !== "false" : intent === "error" || intent === "warning";
+            this.setAttribute("role", assertive ? "alert" : "status");
+            this.setAttribute("aria-live", assertive ? "assertive" : "polite");
+            this.setAttribute("aria-atomic", "true");
+            const button = this.shadowRoot?.querySelector("button");
+            if (button) {
+                button.hidden = !this.hasAttribute("dismissible");
+                button.setAttribute("aria-label", this.getAttribute("dismiss-label") ?? "Dismiss");
+            }
+            const icon = this.shadowRoot?.querySelector('slot[name="icon"]');
+            const avatar = this.shadowRoot?.querySelector('slot[name="avatar"]');
+            if (icon && avatar)
+                icon.hidden = avatar.assignedElements().length > 0;
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const avatar = document.createElement("slot");
+            avatar.name = "avatar";
+            avatar.part.add("avatar");
+            avatar.addEventListener("slotchange", () => this.syncSemantics());
+            const icon = document.createElement("slot");
+            icon.name = "icon";
+            icon.part.add("icon");
+            const defaultIcon = document.createElement("span");
+            defaultIcon.className = "icon";
+            defaultIcon.setAttribute("aria-hidden", "true");
+            icon.append(defaultIcon);
+            const content = document.createElement("div");
+            content.className = "content";
+            content.part.add("content");
+            content.append(document.createElement("slot"));
+            const action = document.createElement("slot");
+            action.name = "action";
+            action.part.add("action");
+            const actions = document.createElement("slot");
+            actions.name = "actions";
+            actions.part.add("actions");
+            const button = document.createElement("button");
+            button.type = "button";
+            button.textContent = "×";
+            button.hidden = !this.hasAttribute("dismissible");
+            button.part.add("dismiss");
+            button.addEventListener("click", () => { this.hidden = true; this.dispatchEvent(new CustomEvent("spui-dismiss", { bubbles: true, composed: true })); });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,#d1d1d1));border-inline-start:4px solid var(--spui-ui-accent,#0f6cbd);border-radius:var(--spui-control-radius,6px);background:var(--spui-ui-canvas,#f5f5f5);line-height:1.45}:host([hidden]){display:none}.content{flex:1;min-width:0}.icon{font-weight:700;color:var(--spui-ui-accent,#0f6cbd)}.icon:before{content:'ℹ'}slot[name=actions]::slotted(*){display:flex;align-items:center;gap:8px}slot[name=action]::slotted(button){border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;cursor:pointer}slot[name=action]::slotted(button:focus-visible){outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}:host([intent=success]){border-inline-start-color:var(--spui-ui-success,#107c10);background:var(--spui-success-surface,var(--spui-ui-success-surface,#dff6dd))}:host([intent=success]) .icon{color:var(--spui-ui-success,#107c10)}:host([intent=success]) .icon:before{content:'✓'}:host([intent=warning]){border-inline-start-color:var(--spui-ui-warning,#835b00);background:var(--spui-warning-surface,var(--spui-ui-warning-surface,#fff4ce))}:host([intent=warning]) .icon{color:var(--spui-ui-warning,#835b00)}:host([intent=warning]) .icon:before{content:'⚠'}:host([intent=error]){border-inline-start-color:var(--spui-ui-danger,#b10e1c);background:var(--spui-danger-surface,var(--spui-ui-danger-surface,#fde7e9))}:host([intent=error]) .icon{color:var(--spui-ui-danger,#b10e1c)}:host([intent=error]) .icon:before{content:'!'}:host([appearance=inverted]){color:var(--colorNeutralForegroundInverted2,var(--spui-ui-surface,#fff));background:var(--colorNeutralBackgroundInverted,var(--spui-ui-text,#242424));border-color:var(--spui-alert-inverted-border,transparent)}:host([appearance=inverted]) .icon{color:currentColor}button{border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-size:18px;line-height:1;padding:2px 6px;cursor:pointer}button:hover{background:var(--spui-ui-surface-hover,#0001)}button:focus-visible{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}button[hidden]{display:none}:host([data-spui-appearance=glass]),:host-context([data-spui-appearance=glass]){backdrop-filter:var(--spui-card-backdrop,none);border-color:var(--spui-card-border,#ffffff80)}@media(forced-colors:active){:host{border-color:CanvasText;color:CanvasText;background:Canvas}.icon{color:CanvasText}}`;
+            shadow.append(style, avatar, icon, content, action, actions, button);
+        }
+    }
+    customElements.define("spui-alert", SpuiAlert);
+}

package/dist/elements/avatar-group-primitives.d.ts

@@ -0,0 +1,3 @@
+/** Fluent-compatible identity item and overflow popover for AvatarGroup. */
+export declare function defineAvatarGroupItem(): void;
+export declare function defineAvatarGroupPopover(): void;

package/dist/elements/avatar-group-primitives.js

@@ -0,0 +1,189 @@
+import { base } from "./shared.js";
+import { defineAvatar } from "./avatar.js";
+import { definePopover } from "./popover.js";
+/** Fluent-compatible identity item and overflow popover for AvatarGroup. */
+export function defineAvatarGroupItem() {
+    if (customElements.get("spui-avatar-group-item"))
+        return;
+    defineAvatar();
+    class SpuiAvatarGroupItem extends HTMLElement {
+        static observedAttributes = ["name", "image", "initials", "size", "shape", "color", "active", "id-for-color"];
+        avatar;
+        name;
+        overflowLabelFallback;
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            this.sync();
+            queueMicrotask(() => this.syncContext());
+        }
+        attributeChangedCallback() { this.sync(); }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const avatar = document.createElement("spui-avatar");
+            avatar.setAttribute("decorative", "");
+            const icon = document.createElement("slot");
+            icon.name = "icon";
+            icon.slot = "icon";
+            const badge = document.createElement("slot");
+            badge.name = "badge";
+            badge.slot = "badge";
+            avatar.append(icon, badge);
+            const name = document.createElement("span");
+            name.className = "name";
+            name.part.add("name");
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline-grid;place-items:center;box-sizing:content-box;width:var(--spui-avatar-group-item-size,32px);height:var(--spui-avatar-group-item-size,32px);vertical-align:middle;line-height:1}:host([data-overflow-item]){display:flex;align-items:center;justify-content:flex-start;gap:10px;box-sizing:border-box;width:100%;height:auto;min-height:40px;padding:6px 8px;border:0;border-radius:var(--spui-control-radius,4px);background:transparent;color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font:var(--spui-font-family,inherit);text-align:start}:host([data-overflow-item]:hover){background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.name{display:none;min-width:0;overflow-wrap:anywhere}:host([data-overflow-item]) .name{display:block}.name:empty{display:none}:host([data-overflow-item]) spui-avatar{flex:none;width:24px;height:24px}@media(forced-colors:active){:host([data-overflow-item]:hover){outline:1px solid Highlight}}`;
+            const avatarSlot = document.createElement("slot");
+            avatarSlot.name = "avatar";
+            avatarSlot.append(avatar);
+            avatarSlot.addEventListener("slotchange", () => this.sync());
+            const overflowLabel = document.createElement("slot");
+            overflowLabel.name = "overflowLabel";
+            const fallbackLabel = document.createElement("span");
+            fallbackLabel.textContent = this.getAttribute("name") ?? "";
+            overflowLabel.append(fallbackLabel);
+            name.append(overflowLabel);
+            shadow.append(style, avatarSlot, name);
+            this.avatar = avatar;
+            this.name = name;
+            this.overflowLabelFallback = fallbackLabel;
+        }
+        sync() {
+            if (!this.avatar)
+                return;
+            for (const name of SpuiAvatarGroupItem.observedAttributes) {
+                const value = this.getAttribute(name);
+                if (value === null)
+                    this.avatar.removeAttribute(name);
+                else
+                    this.avatar.setAttribute(name, value);
+            }
+            const personName = this.getAttribute("name") || "";
+            if (this.overflowLabelFallback)
+                this.overflowLabelFallback.textContent = personName;
+            this.avatar.setAttribute("decorative", "");
+            if (this.hasAttribute("data-overflow-item")) {
+                this.setAttribute("role", "listitem");
+                this.removeAttribute("aria-label");
+            }
+            else {
+                this.setAttribute("role", "img");
+                if (personName && this.dataset.autoLabel === undefined) {
+                    this.setAttribute("aria-label", personName);
+                    this.dataset.autoLabel = "";
+                }
+                else if (!personName && this.dataset.autoLabel !== undefined) {
+                    this.removeAttribute("aria-label");
+                    delete this.dataset.autoLabel;
+                }
+            }
+            const px = Number.parseFloat(this.getAttribute("size") || "32");
+            this.style.setProperty("--spui-avatar-group-item-size", `${Number.isFinite(px) && px > 0 ? px : 32}px`);
+        }
+        syncContext() {
+            const overflow = this.closest("spui-avatar-group-popover") !== null;
+            this.toggleAttribute("data-overflow-item", overflow);
+            this.sync();
+        }
+    }
+    customElements.define("spui-avatar-group-item", SpuiAvatarGroupItem);
+}
+export function defineAvatarGroupPopover() {
+    if (customElements.get("spui-avatar-group-popover"))
+        return;
+    definePopover();
+    class SpuiAvatarGroupPopover extends HTMLElement {
+        static observedAttributes = ["count", "indicator", "label", "trigger-label", "open", "placement"];
+        popoverElement = document.createElement("spui-popover");
+        button = document.createElement("button");
+        list = document.createElement("ul");
+        slotElement = document.createElement("slot");
+        observer;
+        isOpen = false;
+        get open() { return this.isOpen; }
+        set open(value) { this.setOpen(Boolean(value)); }
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            this.observer?.disconnect();
+            this.observer = new MutationObserver(() => this.sync());
+            this.observer.observe(this, { childList: true, subtree: true });
+            this.isOpen = this.hasAttribute("open");
+            this.sync();
+        }
+        disconnectedCallback() { this.observer?.disconnect(); }
+        attributeChangedCallback(name) {
+            if (name === "open" && this.isConnected)
+                this.setOpen(this.hasAttribute("open"), false);
+            else
+                this.sync();
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            this.popoverElement.setAttribute("placement", "bottom");
+            this.button.type = "button";
+            this.button.slot = "trigger";
+            this.button.className = "trigger";
+            this.button.part.add("trigger");
+            this.list.slot = "content";
+            this.list.className = "list";
+            this.list.setAttribute("role", "list");
+            this.slotElement.addEventListener("slotchange", () => this.sync());
+            this.list.append(this.slotElement);
+            this.popoverElement.append(this.button, this.list);
+            this.popoverElement.addEventListener("spui-open-change", event => {
+                const open = Boolean(event.detail?.open);
+                if (open === this.isOpen)
+                    return;
+                this.isOpen = open;
+                if (this.hasAttribute("open") !== open)
+                    this.toggleAttribute("open", open);
+            });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline-flex;align-items:center;vertical-align:middle}.trigger{box-sizing:border-box;display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border:2px solid var(--spui-avatar-group-border,var(--spui-ui-surface,#fff));border-radius:999px;background:var(--spui-avatar-group-background,var(--spui-ui-surface-hover,#f5f5f5));color:var(--spui-avatar-group-foreground,var(--spui-ui-text,var(--spui-semantic-body-text,#323130)));font:600 12px/1 var(--spui-font-family,inherit);cursor:pointer}.trigger:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#005a9e));outline-offset:2px}.list{box-sizing:border-box;display:grid;gap:2px;min-width:180px;max-width:min(320px,calc(100vw - 32px));max-height:min(60vh,480px);overflow:auto;margin:0;padding:4px;list-style:none}.list:empty{display:none}slot::slotted(li){box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 8px;border-radius:var(--spui-control-radius,4px);color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font:var(--spui-font-family,inherit);text-align:start}slot::slotted(li:hover){background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}:host([data-indicator=icon]) .trigger{min-width:32px}.trigger[hidden]{display:none}@media(prefers-reduced-motion:reduce){.trigger{scroll-behavior:auto}}@media(forced-colors:active){.trigger{border-color:ButtonText;background:Canvas;color:CanvasText}}`;
+            shadow.append(style, this.popoverElement);
+        }
+        sync() {
+            if (!this.shadowRoot)
+                return;
+            const members = this.slotElement.assignedElements({ flatten: true });
+            members.forEach(member => member.toggleAttribute("data-overflow-item", true));
+            const count = Math.max(0, Number.parseInt(this.getAttribute("count") || String(members.length), 10) || 0);
+            const icon = this.getAttribute("indicator") === "icon";
+            this.dataset.indicator = icon ? "icon" : "count";
+            this.button.hidden = count === 0;
+            if (icon) {
+                this.button.replaceChildren();
+                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                svg.setAttribute("viewBox", "0 0 16 16");
+                svg.setAttribute("width", "16");
+                svg.setAttribute("height", "16");
+                svg.setAttribute("aria-hidden", "true");
+                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                path.setAttribute("fill", "currentColor");
+                path.setAttribute("d", "M6 7a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm5-.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM1 12.2c0-2.2 2.2-3.7 5-3.7s5 1.5 5 3.7v1H1v-1Zm10.5-3.5c2 0 3.5 1.2 3.5 3v1h-2v-.5a4.5 4.5 0 0 0-1.5-3.5Z");
+                svg.append(path);
+                this.button.append(svg);
+            }
+            else
+                this.button.textContent = `+${count}`;
+            this.button.setAttribute("aria-label", (this.getAttribute("trigger-label") || "View more people").replace("{count}", String(count)));
+            this.popoverElement.setAttribute("label", this.getAttribute("label") || "More people");
+            this.popoverElement.setAttribute("placement", this.getAttribute("placement") || "bottom");
+            this.popoverElement.toggleAttribute("open", this.isOpen);
+        }
+        setOpen(value, emit = true) {
+            const next = Boolean(value);
+            if (next === this.isOpen)
+                return;
+            this.isOpen = next;
+            if (this.hasAttribute("open") !== next)
+                this.toggleAttribute("open", next);
+            this.popoverElement.toggleAttribute("open", next);
+            if (emit)
+                this.dispatchEvent(new CustomEvent("spui-open-change", { bubbles: true, composed: true, detail: { open: next } }));
+        }
+    }
+    customElements.define("spui-avatar-group-popover", SpuiAvatarGroupPopover);
+}

package/dist/elements/avatar-group.d.ts

@@ -0,0 +1,2 @@
+/** A compact, accessible stack of Avatar elements with an expandable overflow. */
+export declare function defineAvatarGroup(): void;

package/dist/elements/avatar-group.js

@@ -0,0 +1,110 @@
+import { base } from "./shared.js";
+import { defineAvatar } from "./avatar.js";
+/** A compact, accessible stack of Avatar elements with an expandable overflow. */
+// ponytail: expand in place so the leaf needs no overlay manager; add a popover when hidden members need per-person actions.
+export function defineAvatarGroup() {
+    if (customElements.get("spui-avatar-group"))
+        return;
+    defineAvatar();
+    class SpuiAvatarGroup extends HTMLElement {
+        static observedAttributes = ["max-visible", "label", "expanded", "show-more-label", "show-less-label", "layout", "size"];
+        slotElement = document.createElement("slot");
+        button = document.createElement("button");
+        group = document.createElement("div");
+        avatars = document.createElement("div");
+        internalExpanded = false;
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            this.sync();
+        }
+        attributeChangedCallback() {
+            this.sync();
+        }
+        get expanded() { return this.hasAttribute("expanded") || this.internalExpanded; }
+        set expanded(value) {
+            this.internalExpanded = value;
+            this.toggleAttribute("expanded", value);
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            this.group.className = "group";
+            this.group.part.add("group");
+            this.avatars.className = "avatars";
+            this.avatars.part.add("avatars");
+            this.slotElement.addEventListener("slotchange", () => this.sync());
+            this.button.type = "button";
+            this.button.className = "overflow";
+            this.button.part.add("overflow");
+            this.button.addEventListener("click", () => {
+                const next = !this.expanded;
+                this.expanded = next;
+                this.dispatchEvent(new CustomEvent("spui-avatar-group-expanded-change", { bubbles: true, composed: true, detail: { expanded: next } }));
+            });
+            this.avatars.append(this.slotElement);
+            this.group.append(this.avatars, this.button);
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline-block;max-width:100%;font-family:var(--spui-font-family,inherit)}.group{display:inline-flex;align-items:center;max-width:100%;direction:inherit}.avatars{display:inline-flex;align-items:center;max-width:100%}.avatars slot{display:contents}slot::slotted(spui-avatar),slot::slotted(spui-avatar-group-item){position:relative;margin-inline-start:var(--spui-avatar-group-overlap,-10px);border:2px solid var(--spui-avatar-group-border,var(--spui-ui-surface,#fff));border-radius:50%;box-sizing:content-box}slot::slotted(spui-avatar:first-child),slot::slotted(spui-avatar-group-item:first-child){margin-inline-start:0}slot::slotted(spui-avatar-group-popover){position:relative;margin-inline-start:var(--spui-avatar-group-overlap,-10px)}slot::slotted([data-spui-avatar-group-hidden]){display:none!important}.overflow{position:relative;display:inline-grid;place-items:center;flex:none;min-width:32px;height:32px;margin-inline-start:var(--spui-avatar-group-overlap,-10px);padding:0 6px;border:2px solid var(--spui-avatar-group-border,var(--spui-ui-surface,#fff));border-radius:999px;background:var(--spui-avatar-group-background,var(--spui-ui-surface-hover,#f5f5f5));color:var(--spui-avatar-group-foreground,var(--spui-ui-text,var(--spui-semantic-body-text,#323130)));font:600 12px/1 var(--spui-font-family,inherit);cursor:pointer}.overflow[hidden]{display:none}.overflow:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#005a9e));outline-offset:2px}.group[data-layout=spread] slot::slotted(spui-avatar),.group[data-layout=spread] slot::slotted(spui-avatar-group-item),.group[data-layout=spread] slot::slotted(spui-avatar-group-popover),.group[data-layout=spread] .overflow{margin-inline-start:var(--spui-avatar-group-gap,4px)}.group[data-layout=spread] slot::slotted(spui-avatar:first-child),.group[data-layout=spread] slot::slotted(spui-avatar-group-item:first-child){margin-inline-start:0}.group[data-layout=pie] .avatars{position:relative;display:inline-block;flex:none;width:var(--spui-avatar-group-size,32px);height:var(--spui-avatar-group-size,32px);overflow:hidden;border-radius:50%;background:var(--spui-avatar-group-border,var(--spui-ui-surface,#fff))}.group[data-layout=pie] slot::slotted(spui-avatar),.group[data-layout=pie] slot::slotted(spui-avatar-group-item){position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:0;box-sizing:border-box}.group[data-layout=pie] slot::slotted([data-pie-total="2"][data-pie-index="0"]){clip-path:inset(0 calc(25% + var(--spui-avatar-group-divider-width,1px)) 0 25%);inset-inline-start:-25%}.group[data-layout=pie] slot::slotted([data-pie-total="2"][data-pie-index="1"]){clip-path:inset(0 25% 0 calc(25% + var(--spui-avatar-group-divider-width,1px)));inset-inline-start:25%}.group[data-layout=pie] slot::slotted([data-pie-total="3"][data-pie-index="0"]){clip-path:inset(0 calc(25% + var(--spui-avatar-group-divider-width,1px)) 0 25%);inset-inline-start:-25%}.group[data-layout=pie] slot::slotted([data-pie-total="3"][data-pie-index="1"]){clip-path:inset(0 0 var(--spui-avatar-group-divider-width,1px) var(--spui-avatar-group-divider-width,1px));inset-inline-start:50%;transform:scale(.5);transform-origin:0 0}.group[data-layout=pie] slot::slotted([data-pie-total="3"][data-pie-index="2"]){clip-path:inset(var(--spui-avatar-group-divider-width,1px) 0 0 var(--spui-avatar-group-divider-width,1px));inset-inline-start:50%;inset-block-start:50%;transform:scale(.5);transform-origin:0 0}:host-context([dir=rtl]) .group[data-layout=pie] slot::slotted([data-pie-total="2"][data-pie-index="0"]),:host-context([dir=rtl]) .group[data-layout=pie] slot::slotted([data-pie-total="3"][data-pie-index="0"]){clip-path:inset(0 25% 0 calc(25% + var(--spui-avatar-group-divider-width,1px)))}:host-context([dir=rtl]) .group[data-layout=pie] slot::slotted([data-pie-total="2"][data-pie-index="1"]){clip-path:inset(0 calc(25% + var(--spui-avatar-group-divider-width,1px)) 0 25%)}:host-context([dir=rtl]) .group[data-layout=pie] slot::slotted([data-pie-total="3"][data-pie-index="1"]){clip-path:inset(0 var(--spui-avatar-group-divider-width,1px) var(--spui-avatar-group-divider-width,1px) 0)}:host-context([dir=rtl]) .group[data-layout=pie] slot::slotted([data-pie-total="3"][data-pie-index="2"]){clip-path:inset(var(--spui-avatar-group-divider-width,1px) var(--spui-avatar-group-divider-width,1px) 0 0)}:host-context([dir=rtl]) .group[data-layout=pie] slot::slotted([data-pie-index="1"]),:host-context([dir=rtl]) .group[data-layout=pie] slot::slotted([data-pie-index="2"]){transform-origin:100% 0}.group[data-layout=pie][data-expanded=true] .avatars{display:inline-flex;width:auto;height:auto;overflow:visible;background:transparent;border-radius:0}.group[data-layout=pie][data-expanded=true] slot::slotted(spui-avatar),.group[data-layout=pie][data-expanded=true] slot::slotted(spui-avatar-group-item){position:relative;inset:auto;width:auto;height:auto;margin-inline-start:var(--spui-avatar-group-overlap,-10px);border:2px solid var(--spui-avatar-group-border,var(--spui-ui-surface,#fff));border-radius:50%;transform:none;clip-path:none}.group[data-layout=pie][data-expanded=true] slot::slotted(spui-avatar:first-child),.group[data-layout=pie][data-expanded=true] slot::slotted(spui-avatar-group-item:first-child){margin-inline-start:0}@media(prefers-reduced-motion:reduce){.overflow{scroll-behavior:auto}}@media(forced-colors:active){.overflow{border-color:ButtonText;background:Canvas;color:CanvasText}.group[data-layout=pie] .avatars{background:CanvasText}}`;
+            shadow.append(style, this.group);
+            this.setAttribute("role", "group");
+        }
+        sync() {
+            if (!this.shadowRoot)
+                return;
+            const label = this.getAttribute("label")?.trim();
+            if (label && (!this.hasAttribute("aria-label") || this.dataset.autoLabel !== undefined)) {
+                this.setAttribute("aria-label", label);
+                this.dataset.autoLabel = "";
+            }
+            else if (!label && this.dataset.autoLabel !== undefined) {
+                this.removeAttribute("aria-label");
+                delete this.dataset.autoLabel;
+            }
+            const max = Math.max(0, Number.parseInt(this.getAttribute("max-visible") || "5", 10) || 0);
+            const members = this.slotElement.assignedElements({ flatten: true }).filter((element) => element.localName === "spui-avatar" || element.localName === "spui-avatar-group-item");
+            const size = this.getAttribute("size");
+            members.forEach(member => {
+                if (member.dataset.groupSize !== undefined) {
+                    if (size) {
+                        if (member.getAttribute("size") !== size)
+                            member.setAttribute("size", size);
+                    }
+                    else {
+                        member.removeAttribute("size");
+                        delete member.dataset.groupSize;
+                    }
+                }
+                else if (size && !member.hasAttribute("size")) {
+                    member.setAttribute("size", size);
+                    member.dataset.groupSize = "";
+                }
+            });
+            const layout = this.getAttribute("layout") === "spread" || this.getAttribute("layout") === "pie" ? this.getAttribute("layout") : "stack";
+            const visibleLimit = layout === "pie" ? Math.min(3, max) : max;
+            const hiddenCount = Math.max(0, members.length - visibleLimit);
+            members.forEach((member, index) => {
+                member.toggleAttribute("data-spui-avatar-group-hidden", !this.expanded && index >= visibleLimit);
+                if (layout === "pie" && index < visibleLimit) {
+                    member.dataset.pieIndex = String(index);
+                    member.dataset.pieTotal = String(Math.min(visibleLimit, members.length));
+                }
+                else {
+                    delete member.dataset.pieIndex;
+                    delete member.dataset.pieTotal;
+                }
+            });
+            this.group.dataset.layout = layout;
+            this.group.dataset.expanded = String(this.expanded);
+            const groupSize = Number.parseFloat(this.getAttribute("size") || "32");
+            this.group.style.setProperty("--spui-avatar-group-size", `${Number.isFinite(groupSize) && groupSize > 0 ? groupSize : 32}px`);
+            this.button.hidden = hiddenCount === 0;
+            this.button.textContent = `+${hiddenCount}`;
+            this.button.setAttribute("aria-expanded", String(this.expanded));
+            const more = this.getAttribute("show-more-label") || "Show {count} more people";
+            const less = this.getAttribute("show-less-label") || "Show fewer people";
+            // Include the visible count so the accessible name contains the button's visible text.
+            this.button.setAttribute("aria-label", `+${hiddenCount} ${this.expanded ? less : more.replace("{count}", String(hiddenCount))}`);
+        }
+    }
+    customElements.define("spui-avatar-group", SpuiAvatarGroup);
+}

package/dist/elements/avatar.d.ts

@@ -0,0 +1,4 @@
+export type AvatarNamedColor = "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum" | "anchor";
+export type AvatarColor = "neutral" | "brand" | "colorful" | AvatarNamedColor;
+/** Small, theme-aware people and entity marker. Images are optional; name/initials are the fast fallback. */
+export declare function defineAvatar(): void;