@spfx-fast/sharepoint-ui 0.4.3 → 0.5.0

package/dist/elements/accordion.js

@@ -1,338 +0,0 @@
-import { base } from "./shared.js";
-const normalizeItems = (value) => (Array.isArray(value) ? value : value === undefined || value === null ? [] : [value]).map(String);
-const directItems = (accordion) => [...accordion.children].filter((child) => child instanceof HTMLElement && child.localName === "spui-accordion-item");
-export function defineAccordionHeader() {
-    if (customElements.get("spui-accordion-header"))
-        return;
-    class SpuiAccordionHeader extends HTMLElement {
-        static observedAttributes = ["expand-icon-position", "inline", "size"];
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = base + ':host{display:contents}.header{display:flex;align-items:center;gap:8px}.content{min-width:0}.icon,.expand{display:inline-flex;align-items:center;justify-content:center;flex:none}.icon[hidden],.expand[hidden]{display:none}:host([expand-icon-position=start]) .expand{order:-1}:host([open]) .expand{transform:rotate(90deg)}:host(:dir(rtl)) .expand{transform:rotate(180deg)}:host([open]:dir(rtl)) .expand{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.expand{transition:none}}';
-            const header = document.createElement("div");
-            header.className = "header";
-            const icon = document.createElement("span");
-            icon.className = "icon";
-            icon.setAttribute("aria-hidden", "true");
-            const iconSlot = document.createElement("slot");
-            iconSlot.name = "icon";
-            icon.append(iconSlot);
-            const content = document.createElement("span");
-            content.className = "content";
-            const defaultSlot = document.createElement("slot");
-            content.append(defaultSlot);
-            const expand = document.createElement("span");
-            expand.className = "expand";
-            expand.setAttribute("aria-hidden", "true");
-            const expandSlot = document.createElement("slot");
-            expandSlot.name = "expand-icon";
-            expand.append(expandSlot);
-            header.append(icon, content, expand);
-            shadow.append(style, header);
-            const syncExpand = () => {
-                const hasExpand = expandSlot.assignedNodes({ flatten: true }).length > 0;
-                this.toggleAttribute("has-expand-icon", hasExpand);
-                this.dispatchEvent(new CustomEvent("spui-header-slots-change", { bubbles: true, composed: true }));
-            };
-            expandSlot.addEventListener("slotchange", syncExpand);
-            syncExpand();
-        }
-    }
-    customElements.define("spui-accordion-header", SpuiAccordionHeader);
-}
-export function defineAccordionPanel() {
-    if (customElements.get("spui-accordion-panel"))
-        return;
-    class SpuiAccordionPanel extends HTMLElement {
-        connectedCallback() { if (!this.shadowRoot) {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0}`;
-            shadow.append(style, document.createElement("slot"));
-        } }
-    }
-    customElements.define("spui-accordion-panel", SpuiAccordionPanel);
-}
-export function defineAccordion() {
-    if (customElements.get("spui-accordion"))
-        return;
-    defineAccordionHeader();
-    defineAccordionPanel();
-    if (!customElements.get("spui-accordion-item")) {
-        class SpuiAccordionItem extends HTMLElement {
-            static observedAttributes = ["heading", "value", "open", "disabled", "disabled-focusable"];
-            panelId = `spui-accordion-panel-${crypto.randomUUID()}`;
-            triggerId = `spui-accordion-trigger-${crypto.randomUUID()}`;
-            wasOpen = false;
-            panelExitPending = false;
-            panelExitGeneration = 0;
-            buttonSlotAttributes = new Set();
-            connectedCallback() { if (!this.hasAttribute("value"))
-                this.setAttribute("value", this.id || crypto.randomUUID()); if (!this.shadowRoot)
-                this.render(); this.sync(); }
-            attributeChangedCallback() { if (this.isConnected)
-                this.sync(); }
-            get open() { return this.hasAttribute("open"); }
-            set open(value) { this.toggleAttribute("open", Boolean(value)); }
-            sync() {
-                const button = this.shadowRoot?.querySelector("button");
-                const panel = this.shadowRoot?.querySelector(".panel");
-                if (!button || !panel)
-                    return;
-                const isOpen = this.open;
-                button.setAttribute("aria-expanded", String(isOpen));
-                button.disabled = this.hasAttribute("disabled");
-                if (button.disabled || this.hasAttribute("disabled-focusable"))
-                    button.setAttribute("aria-disabled", "true");
-                else
-                    button.removeAttribute("aria-disabled");
-                const motionPanel = this.shadowRoot?.querySelector("slot[name=panel]")?.assignedElements({ flatten: true }).some(element => element.localName === "spui-accordion-panel" && element.hasAttribute("motion")) ?? false;
-                if (isOpen) {
-                    this.panelExitGeneration++;
-                    this.panelExitPending = false;
-                    panel.hidden = false;
-                    panel.inert = false;
-                    panel.removeAttribute("aria-hidden");
-                }
-                else if (motionPanel && this.wasOpen) {
-                    this.panelExitPending = true;
-                    panel.hidden = false;
-                    panel.inert = true;
-                    panel.setAttribute("aria-hidden", "true");
-                    this.finishPanelExit(panel);
-                }
-                else if (!this.panelExitPending) {
-                    panel.hidden = true;
-                    panel.inert = false;
-                    panel.removeAttribute("aria-hidden");
-                }
-                this.wasOpen = isOpen;
-                const heading = button.querySelector("slot[name=heading]");
-                const header = heading?.assignedElements({ flatten: true }).find(element => element.localName === "spui-accordion-header");
-                const icon = button.querySelector(".icon");
-                const buttonSlot = header?.button;
-                button.className = "trigger";
-                button.style.cssText = "";
-                for (const attribute of this.buttonSlotAttributes)
-                    button.removeAttribute(attribute);
-                this.buttonSlotAttributes.clear();
-                if (buttonSlot) {
-                    if (typeof buttonSlot.className === "string")
-                        button.classList.add(...buttonSlot.className.split(/\s+/).filter(Boolean));
-                    if (buttonSlot.style && typeof buttonSlot.style === "object")
-                        Object.assign(button.style, buttonSlot.style);
-                    for (const [name, value] of Object.entries(buttonSlot)) {
-                        if (name === "className" || name === "style" || name === "children" || name === "disabled" || name === "type" || name === "tabIndex" || name === "onClick" || value == null || typeof value === "function")
-                            continue;
-                        const attribute = name.startsWith("aria-") || name.startsWith("data-") ? name : { title: "title", name: "name", value: "value", form: "form", accessKey: "accesskey", id: "id" }[name];
-                        if (attribute) {
-                            button.setAttribute(attribute, String(value));
-                            this.buttonSlotAttributes.add(attribute);
-                        }
-                    }
-                }
-                if (icon && heading) {
-                    const iconAtStart = header?.getAttribute("expand-icon-position") === "start";
-                    button.insertBefore(icon, iconAtStart ? heading : null);
-                    icon.hidden = header?.hasAttribute("has-expand-icon") ?? false;
-                }
-                header?.toggleAttribute("open", isOpen);
-                const fallback = heading?.firstChild;
-                if (fallback?.nodeType === Node.TEXT_NODE)
-                    fallback.textContent = this.getAttribute("heading") || "Section";
-            }
-            finishPanelExit(panel) {
-                if (!this.panelExitPending)
-                    return;
-                const generation = ++this.panelExitGeneration;
-                requestAnimationFrame(() => requestAnimationFrame(() => {
-                    const animations = new Set();
-                    const visit = (element) => {
-                        for (const animation of element.getAnimations())
-                            if (animation.playState === "running")
-                                animations.add(animation);
-                        if (element.shadowRoot)
-                            for (const child of element.shadowRoot.children)
-                                visit(child);
-                        if (element instanceof HTMLSlotElement)
-                            for (const child of element.assignedElements({ flatten: true }))
-                                visit(child);
-                        for (const child of element.children)
-                            visit(child);
-                    };
-                    for (const assigned of this.shadowRoot?.querySelector("slot[name=panel]")?.assignedElements({ flatten: true }) ?? [])
-                        visit(assigned);
-                    const finish = () => {
-                        if (generation !== this.panelExitGeneration || this.open || !this.panelExitPending)
-                            return;
-                        this.panelExitPending = false;
-                        panel.hidden = true;
-                    };
-                    if (animations.size)
-                        void Promise.allSettled([...animations].map(animation => animation.finished)).then(finish);
-                    else
-                        finish();
-                }));
-            }
-            render() {
-                const shadow = this.attachShadow({ mode: "open" });
-                const style = document.createElement("style");
-                style.textContent = `${base}:host{display:block;border-block-end:1px solid var(--spui-accordion-divider,var(--spui-ui-stroke,#d1d1d1))}.trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:var(--spui-accordion-padding,12px 16px);border:0;background:transparent;color:var(--spui-ui-text,#242424);font:inherit;font-weight:600;text-align:start;cursor:pointer}.trigger:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#78716c));outline-offset:-2px}.trigger:disabled{color:var(--spui-ui-muted,#616161);cursor:not-allowed}.icon{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;transition:transform var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}.icon:before{content:"";width:7px;height:7px;border-block-start:2px solid currentColor;border-inline-end:2px solid currentColor;transform:rotate(45deg)}.trigger[aria-expanded=true] .icon{transform:rotate(90deg)}:host(:dir(rtl)) .icon{transform:rotate(180deg)}:host(:dir(rtl)) .trigger[aria-expanded=true] .icon{transform:rotate(90deg)}.panel{padding:0 var(--spui-accordion-padding-inline,16px) 16px;color:var(--spui-ui-text,#242424)}.panel[hidden]{display:none}@media(prefers-reduced-motion:reduce){.icon{transition:none}}@media(forced-colors:active){.trigger:focus-visible{outline-color:Highlight}}`;
-                const button = document.createElement("button");
-                button.type = "button";
-                button.id = this.triggerId;
-                button.className = "trigger";
-                button.part.add("trigger");
-                button.setAttribute("aria-controls", this.panelId);
-                const heading = document.createElement("slot");
-                heading.name = "heading";
-                heading.append(document.createTextNode(this.getAttribute("heading") || "Section"));
-                const icon = document.createElement("span");
-                icon.className = "icon";
-                icon.part.add("icon");
-                icon.setAttribute("aria-hidden", "true");
-                button.append(heading, icon);
-                const panel = document.createElement("div");
-                panel.className = "panel";
-                panel.part.add("panel");
-                panel.id = this.panelId;
-                panel.setAttribute("role", "region");
-                panel.setAttribute("aria-labelledby", this.triggerId);
-                const panelSlot = document.createElement("slot");
-                panelSlot.name = "panel";
-                panelSlot.append(document.createElement("slot"));
-                panel.append(panelSlot);
-                button.addEventListener("click", event => {
-                    const header = button.querySelector("slot[name=heading]")?.assignedElements({ flatten: true }).find(element => element.localName === "spui-accordion-header");
-                    header?.button?.onClickCapture?.(event);
-                }, true);
-                button.addEventListener("click", event => {
-                    const heading = button.querySelector("slot[name=heading]");
-                    const header = heading?.assignedElements({ flatten: true }).find(element => element.localName === "spui-accordion-header");
-                    header?.button?.onClick?.(event);
-                    if (event.defaultPrevented)
-                        return;
-                    this.open = !this.open;
-                    this.dispatchEvent(new CustomEvent("spui-item-toggle", { bubbles: true, composed: true, detail: { value: this.getAttribute("value") ?? "", open: this.open, sourceEvent: event } }));
-                });
-                heading.addEventListener("slotchange", () => this.sync());
-                button.addEventListener("spui-header-slots-change", () => this.sync());
-                shadow.append(style, button, panel);
-            }
-        }
-        customElements.define("spui-accordion-item", SpuiAccordionItem);
-    }
-    class SpuiAccordion extends HTMLElement {
-        static observedAttributes = ["mode", "multiple", "collapsible", "navigation"];
-        controlledItems;
-        uncontrolledItems = [];
-        hasInitialState = false;
-        hasDefaultItems = false;
-        syncing = false;
-        events;
-        get openItems() { return this.controlledItems; }
-        set openItems(value) { this.controlledItems = value === undefined ? undefined : normalizeItems(value); this.syncItems(); }
-        set defaultOpenItems(value) { if (!this.controlledItems && !this.hasDefaultItems && value !== undefined) {
-            this.uncontrolledItems = normalizeItems(value);
-            this.hasInitialState = true;
-            this.hasDefaultItems = true;
-            this.syncItems();
-        } }
-        get defaultOpenItems() { return this.uncontrolledItems; }
-        get multiple() { return this.hasAttribute("mode") ? this.getAttribute("mode") !== "single" : this.hasAttribute("multiple"); }
-        get collapsible() { return this.hasAttribute("collapsible"); }
-        connectedCallback() {
-            this.events?.abort();
-            this.events = new AbortController();
-            this.addEventListener("spui-item-toggle", this.onToggle, { signal: this.events.signal });
-            this.addEventListener("keydown", this.onKeyDown, { signal: this.events.signal });
-            if (!this.hasInitialState && !this.controlledItems) {
-                this.uncontrolledItems = directItems(this).filter(item => item.hasAttribute("open")).map(item => item.getAttribute("value") ?? "");
-                this.hasInitialState = true;
-            }
-            this.sync();
-        }
-        disconnectedCallback() { this.events?.abort(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        get selectedItems() { return this.controlledItems ?? this.uncontrolledItems; }
-        syncItems() {
-            if (!this.isConnected)
-                return;
-            const values = this.multiple ? this.selectedItems : this.selectedItems.slice(0, 1);
-            this.syncing = true;
-            const disabledFocusableValue = !this.multiple && !this.collapsible && values.length === 1 ? values[0] : undefined;
-            for (const item of directItems(this)) {
-                const value = item.getAttribute("value") ?? "";
-                item.toggleAttribute("open", values.includes(value));
-                item.toggleAttribute("disabled-focusable", value === disabledFocusableValue && item.hasAttribute("open"));
-            }
-            this.syncing = false;
-            this.updateTabStops();
-        }
-        sync() {
-            this.dataset.mode = this.multiple ? "multiple" : "single";
-            this.syncItems();
-        }
-        onToggle = (event) => {
-            if (event.target.closest("spui-accordion") !== this || this.syncing)
-                return;
-            const { value, open, sourceEvent } = event.detail;
-            const clickedItem = event.target;
-            const current = this.controlledItems ?? directItems(this).filter(item => item.hasAttribute("open") && !(item === clickedItem && open) || item === clickedItem && !open).map(item => item.getAttribute("value") ?? "");
-            let next = open ? (this.multiple ? [...current.filter(item => item !== value), value] : [value]) : current.filter(item => item !== value);
-            if (!this.multiple && !this.collapsible && current.includes(value) && next.length === 0) {
-                event.target.setAttribute("open", "");
-                return;
-            }
-            if (this.controlledItems)
-                this.syncItems();
-            else {
-                this.uncontrolledItems = next;
-                this.syncItems();
-            }
-            const detail = { value, openItems: next };
-            this.dispatchEvent(new CustomEvent("spui-toggle", { bubbles: true, composed: true, detail: { ...detail, sourceEvent } }));
-        };
-        enabledTriggers() { return directItems(this).filter(item => !item.hasAttribute("disabled")).map(item => item.shadowRoot?.querySelector("button")).filter((button) => Boolean(button)); }
-        updateTabStops() {
-            const triggers = this.enabledTriggers();
-            if (!triggers.length)
-                return;
-            if (!this.hasAttribute("navigation")) {
-                triggers.forEach(button => { button.tabIndex = 0; });
-                return;
-            }
-            const active = triggers.includes(this.ownerDocument.activeElement) ? this.ownerDocument.activeElement : triggers.find(button => button.tabIndex === 0) ?? triggers[0];
-            triggers.forEach(button => { button.tabIndex = button === active ? 0 : -1; });
-        }
-        onKeyDown = (event) => {
-            const navigation = this.getAttribute("navigation");
-            if (navigation !== "linear" && navigation !== "circular")
-                return;
-            const triggers = this.enabledTriggers();
-            const target = event.composedPath().find(node => node instanceof HTMLButtonElement && triggers.includes(node));
-            if (!target)
-                return;
-            const index = triggers.indexOf(target);
-            let next;
-            if (event.key === "ArrowDown" || event.key === "ArrowRight")
-                next = triggers[index + 1] ?? (navigation === "circular" ? triggers[0] : undefined);
-            else if (event.key === "ArrowUp" || event.key === "ArrowLeft")
-                next = triggers[index - 1] ?? (navigation === "circular" ? triggers.at(-1) : undefined);
-            else if (event.key === "Home")
-                next = triggers[0];
-            else if (event.key === "End")
-                next = triggers.at(-1);
-            if (!next)
-                return;
-            event.preventDefault();
-            triggers.forEach(button => { button.tabIndex = button === next ? 0 : -1; });
-            next.focus();
-        };
-    }
-    customElements.define("spui-accordion", SpuiAccordion);
-}

package/dist/elements/alert.d.ts

@@ -1,2 +0,0 @@
-export type AlertAppearance = "primary" | "inverted";
-export declare function defineAlert(): void;

package/dist/elements/alert.js

@@ -1,86 +0,0 @@
-import { base } from "./shared.js";
-const alertIconPaths = {
-    info: "M10 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15ZM10 9v5m0-7h.01",
-    success: "M10 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15ZM6.5 10l2.3 2.3 4.7-5.1",
-    warning: "m10 2.5 8 14H2l8-14ZM10 7v4m0 3.5h.01",
-    error: "M10 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15ZM7 7l6 6m0-6-6 6",
-};
-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;
-            const iconPath = icon?.querySelector(".icon path");
-            if (iconPath)
-                iconPath.setAttribute("d", alertIconPaths[intent ?? "info"] ?? alertIconPaths.info);
-        }
-        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 iconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            iconSvg.setAttribute("viewBox", "0 0 20 20");
-            iconSvg.setAttribute("focusable", "false");
-            const iconPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            iconPath.setAttribute("d", alertIconPaths.info);
-            iconSvg.append(iconPath);
-            defaultIcon.append(iconSvg);
-            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.hidden = !this.hasAttribute("dismissible");
-            button.part.add("dismiss");
-            const closeSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            closeSvg.classList.add("dismiss-icon");
-            closeSvg.setAttribute("viewBox", "0 0 20 20");
-            closeSvg.setAttribute("aria-hidden", "true");
-            closeSvg.setAttribute("focusable", "false");
-            const closePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            closePath.setAttribute("d", "m5 5 10 10M15 5 5 15");
-            closeSvg.append(closePath);
-            button.append(closeSvg);
-            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:2px 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{display:inline-flex;flex:none;align-items:center;justify-content:center;color:var(--spui-ui-accent,#0f6cbd)}.icon svg,.dismiss-icon{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon svg{width:18px;height:18px}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=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=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([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;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

@@ -1,3 +0,0 @@
-/** 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

@@ -1,189 +0,0 @@
-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

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