@spfx-fast/sharepoint-ui 0.4.3 → 0.5.0

package/dist/elements/avatar-group.js

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

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

package/dist/elements/avatar.js

@@ -1,251 +0,0 @@
-import { base } from "./shared.js";
-const themeWatches = new WeakMap();
-const namedColorTokens = {
-    "dark-red": { token: "DarkRed", fallback: "#d69ca5" }, cranberry: { token: "Cranberry", fallback: "#eeacb2" }, red: { token: "Red", fallback: "#f1bbbc" },
-    pumpkin: { token: "Pumpkin", fallback: "#efc4ad" }, peach: { token: "Peach", fallback: "#ffddb3" }, marigold: { token: "Marigold", fallback: "#f9e2ae" },
-    gold: { token: "Gold", fallback: "#ecdfa5" }, brass: { token: "Brass", fallback: "#e0cea2" }, brown: { token: "Brown", fallback: "#ddc3b0" },
-    forest: { token: "Forest", fallback: "#bdd99b" }, seafoam: { token: "Seafoam", fallback: "#a8f0cd" }, "dark-green": { token: "DarkGreen", fallback: "#9ad29a" },
-    "light-teal": { token: "LightTeal", fallback: "#a6e9ed" }, teal: { token: "Teal", fallback: "#9bd9db" }, steel: { token: "Steel", fallback: "#94c8d4" },
-    blue: { token: "Blue", fallback: "#a9d3f2" }, "royal-blue": { token: "RoyalBlue", fallback: "#9abfdc" }, cornflower: { token: "Cornflower", fallback: "#c8d1fa" },
-    navy: { token: "Navy", fallback: "#a3b2e8" }, lavender: { token: "Lavender", fallback: "#d2ccf8" }, purple: { token: "Purple", fallback: "#c6b1de" },
-    grape: { token: "Grape", fallback: "#d9a7e0" }, lilac: { token: "Lilac", fallback: "#e6bfed" }, pink: { token: "Pink", fallback: "#f7c0e3" },
-    magenta: { token: "Magenta", fallback: "#eca5d1" }, plum: { token: "Plum", fallback: "#d696c0" }, beige: { token: "Beige", fallback: "#d7d4d4" },
-    mink: { token: "Mink", fallback: "#cecccb" }, platinum: { token: "Platinum", fallback: "#cdd6d8" }, anchor: { token: "Anchor", fallback: "#bcc3c7" }
-};
-/** Small, theme-aware people and entity marker. Images are optional; name/initials are the fast fallback. */
-export function defineAvatar() {
-    if (customElements.get("spui-avatar"))
-        return;
-    class SpuiAvatar extends HTMLElement {
-        static observedAttributes = ["name", "image", "initials", "size", "shape", "color", "id-for-color", "decorative"];
-        imageSource = "";
-        themeRoot;
-        image = document.createElement("img");
-        initials = document.createElement("span");
-        fallback = document.createElement("span");
-        surface = document.createElement("span");
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.sync();
-            this.watchTheme();
-        }
-        disconnectedCallback() {
-            this.unwatchTheme();
-        }
-        attributeChangedCallback() {
-            this.sync();
-            if (this.isConnected) {
-                this.unwatchTheme();
-                this.watchTheme();
-            }
-        }
-        refreshThemeColor() {
-            const color = this.getAttribute("color");
-            const named = namedColorTokens[color];
-            if (named) {
-                this.dataset.namedColor = "";
-                this.style.setProperty("--spui-avatar-colorful-background", `var(--colorPalette${named.token}Background2, color-mix(in srgb, ${named.fallback} 18%, var(--spui-ui-surface, #fff)))`);
-                this.style.setProperty("--spui-avatar-colorful-foreground", `var(--colorPalette${named.token}Foreground2, var(--spui-ui-text, var(--spui-semantic-body-text, #242424)))`);
-                this.style.setProperty("--spui-avatar-active-color", `var(--colorPalette${named.token}BorderActive, var(--spui-ui-accent, #78716c))`);
-                return;
-            }
-            delete this.dataset.namedColor;
-            this.style.removeProperty("--spui-avatar-active-color");
-            if (color !== "colorful")
-                return;
-            const key = this.getAttribute("name") || this.getAttribute("id-for-color") || "sharepoint-ui";
-            const hash = hashString(key);
-            const rawColor = getComputedStyle(this).getPropertyValue("--spui-palette-theme-primary").trim()
-                || getComputedStyle(this).getPropertyValue("--spui-ui-accent").trim()
-                || "#78716c";
-            const rgb = parseColor(rawColor);
-            const shade = 0.18 + (hash % 5) * 0.1;
-            const derived = rgb?.map(channel => Math.round(channel * (1 - shade)));
-            const derivedColor = derived ? `#${derived.map(channel => channel.toString(16).padStart(2, "0")).join("")}` : rawColor;
-            this.style.setProperty("--spui-avatar-colorful-background", derivedColor);
-            this.style.setProperty("--spui-avatar-colorful-foreground", derived ? (relativeLuminance(derived) > 0.179 ? "#000000" : "#ffffff") : "var(--spui-semantic-primary-button-text, #ffffff)");
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            this.surface.className = "surface";
-            this.surface.part.add("surface");
-            this.image.className = "image";
-            this.image.part.add("image");
-            this.image.alt = "";
-            this.image.loading = "lazy";
-            this.image.decoding = "async";
-            this.image.addEventListener("load", () => { this.dataset.imageState = "loaded"; });
-            this.image.addEventListener("error", () => { this.dataset.imageState = "error"; });
-            this.initials.className = "initials";
-            this.initials.part.add("initials");
-            this.fallback.className = "fallback";
-            this.fallback.part.add("fallback");
-            this.fallback.setAttribute("aria-hidden", "true");
-            this.fallback.innerHTML = '<svg viewBox="0 0 24 24" focusable="false"><path d="M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5Z"/></svg>';
-            this.surface.append(this.image, this.initials, this.fallback);
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{--spui-avatar-size:32px;display:inline-grid;flex:none;width:var(--spui-avatar-size);height:var(--spui-avatar-size);vertical-align:middle;line-height:1}:host([size]){width:var(--spui-avatar-size);height:var(--spui-avatar-size)}.surface{position:relative;box-sizing:border-box;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border:1px solid var(--spui-avatar-border,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)));border-radius:var(--spui-avatar-radius,50%);background:var(--spui-avatar-background,var(--spui-semantic-body-subtext,var(--colorNeutralBackground3,#f0f0f0)));color:var(--spui-avatar-foreground,var(--spui-semantic-body-text,var(--colorNeutralForeground1,#323130)));font:600 calc(var(--spui-avatar-size) * .36)/1 var(--spui-font-family,inherit);user-select:none}.image{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}.initials{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;max-width:100%;overflow:hidden;padding:0 2px;text-align:center;line-height:1;white-space:nowrap}.fallback{z-index:0;display:grid;place-items:center;width:62%;height:62%;color:currentColor}.initials:not(:empty)~.fallback{display:none}.fallback svg{display:block;width:100%;height:100%;fill:currentColor}:host([data-image-state=loading]) .image,:host([data-image-state=error]) .image{visibility:hidden}:host([data-image-state=loaded]) .initials,:host([data-image-state=loaded]) .fallback{visibility:hidden}:host([shape=square]) .surface{border-radius:var(--spui-avatar-radius,var(--spui-control-radius,6px))}:host([color=brand]) .surface{background:var(--spui-avatar-brand-background,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c)))));color:var(--spui-avatar-brand-foreground,var(--spui-semantic-primary-button-text,var(--colorNeutralForegroundOnBrand,#fff)))}:host([color=colorful]) .surface,:host([data-named-color]) .surface{background:var(--spui-avatar-colorful-background,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c)))));color:var(--spui-avatar-colorful-foreground,var(--spui-semantic-primary-button-text,#fff))}:host([active=active]:not([active-appearance])) .surface,:host([active=active][active-appearance=ring]) .surface{box-shadow:0 0 0 2px var(--spui-ui-surface,#fff),0 0 0 4px var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c))}:host([active=active][active-appearance=shadow]) .surface{box-shadow:var(--spui-avatar-active-shadow,var(--spui-card-shadow,0 2px 8px rgb(0 0 0 / 24%)))}:host([active=active][active-appearance=ring-shadow]) .surface{box-shadow:0 0 0 2px var(--spui-ui-surface,#fff),0 0 0 4px var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c)),var(--spui-avatar-active-shadow,var(--spui-card-shadow,0 2px 8px rgb(0 0 0 / 24%)))}:host([active=inactive]){opacity:.56}:host([data-custom-icon=true]) .initials,:host([data-custom-icon=true]) .fallback{display:none}:host([data-custom-icon=true]) .icon{z-index:0;display:grid;place-items:center;width:70%;height:70%;color:inherit}:host([data-custom-badge=true]) .badge{position:absolute;z-index:2;inset-block-end:0;inset-inline-end:0;display:grid;place-items:center;min-width:var(--spui-avatar-badge-size,10px);min-height:var(--spui-avatar-badge-size,10px);border:2px solid var(--spui-avatar-badge-border,var(--spui-ui-surface,#fff));border-radius:50%;background:var(--spui-avatar-badge-background,var(--spui-semantic-success-background,#13a10e));color:var(--spui-avatar-badge-foreground,#fff);font:600 9px/1 var(--spui-font-family,inherit)}:host(:not([data-custom-badge=true])) .badge{display:none}@media(forced-colors:active){.surface{border-color:CanvasText;background:Canvas;color:CanvasText;forced-color-adjust:none}:host([data-named-color]) .surface{border-color:CanvasText;background:Canvas;color:CanvasText}.image{forced-color-adjust:auto}:host([active=active]) .surface{outline:2px solid Highlight;outline-offset:2px;box-shadow:none}}`;
-            style.textContent += `.surface{background:var(--spui-avatar-background,var(--spui-palette-neutral-light,var(--colorNeutralBackground3,#f0f0f0)));font-size:clamp(10px,calc(var(--spui-avatar-size) * .36),48px)}`;
-            style.textContent += `@media(forced-colors:active){.surface{border-color:CanvasText;background:Canvas;color:CanvasText}}`;
-            const icon = document.createElement("span");
-            icon.className = "icon";
-            icon.part.add("icon");
-            icon.append(document.createElement("slot"));
-            icon.firstElementChild.setAttribute("name", "icon");
-            const badge = document.createElement("span");
-            badge.className = "badge";
-            badge.part.add("badge");
-            badge.append(document.createElement("slot"));
-            badge.firstElementChild.setAttribute("name", "badge");
-            const iconSlot = icon.firstElementChild;
-            const badgeSlot = badge.firstElementChild;
-            iconSlot.addEventListener("slotchange", () => this.toggleAttribute("data-custom-icon", iconSlot.assignedNodes({ flatten: true }).length > 0));
-            badgeSlot.addEventListener("slotchange", () => this.toggleAttribute("data-custom-badge", badgeSlot.assignedNodes({ flatten: true }).length > 0));
-            this.surface.append(icon, badge);
-            shadow.append(style, this.surface);
-        }
-        sync() {
-            if (!this.shadowRoot)
-                return;
-            const size = this.getAttribute("size")?.trim() || "32px";
-            const normalizedSize = /^\d+(?:\.\d+)?$/.test(size) ? `${size}px` : size;
-            this.style.setProperty("--spui-avatar-size", CSS.supports("width", normalizedSize) ? normalizedSize : "32px");
-            const shape = this.getAttribute("shape") === "square" ? "square" : "circular";
-            this.dataset.shape = shape;
-            if (this.getAttribute("shape") !== shape)
-                this.setAttribute("shape", shape);
-            const color = this.getAttribute("color");
-            if (!color || (!["neutral", "brand", "colorful"].includes(color) && !Object.hasOwn(namedColorTokens, color)))
-                this.setAttribute("color", "neutral");
-            const name = this.getAttribute("name")?.trim() ?? "";
-            const locale = this.closest("[lang]")?.getAttribute("lang") || this.ownerDocument.documentElement.lang || undefined;
-            const initials = this.getAttribute("initials")?.trim() || getInitials(name, Number.parseFloat(this.style.getPropertyValue("--spui-avatar-size")), locale, getComputedStyle(this).direction === "rtl");
-            this.initials.textContent = initials;
-            const source = this.getAttribute("image")?.trim() ?? "";
-            if (source !== this.imageSource) {
-                this.imageSource = source;
-                if (source) {
-                    this.setAttribute("data-image-state", "loading");
-                    this.image.src = source;
-                }
-                else {
-                    this.image.removeAttribute("src");
-                    this.setAttribute("data-image-state", "none");
-                }
-            }
-            else if (source && !this.dataset.imageState)
-                this.setAttribute("data-image-state", "loading");
-            const decorative = this.hasAttribute("decorative");
-            const hasExplicitName = (this.hasAttribute("aria-label") && this.dataset.autoLabel === undefined) || this.hasAttribute("aria-labelledby");
-            const accessibleName = name || initials;
-            if (decorative || (!hasExplicitName && !accessibleName)) {
-                if (this.dataset.autoLabel !== undefined) {
-                    this.removeAttribute("aria-label");
-                    delete this.dataset.autoLabel;
-                }
-                if (!this.hasAttribute("aria-hidden")) {
-                    this.setAttribute("aria-hidden", "true");
-                    this.dataset.autoHidden = "";
-                }
-                if (!this.hasAttribute("role")) {
-                    this.setAttribute("role", "presentation");
-                    this.dataset.autoRole = "";
-                }
-            }
-            else {
-                if (this.dataset.autoHidden !== undefined) {
-                    this.removeAttribute("aria-hidden");
-                    delete this.dataset.autoHidden;
-                }
-                if (this.dataset.autoRole !== undefined) {
-                    this.removeAttribute("role");
-                    delete this.dataset.autoRole;
-                }
-                if (!this.hasAttribute("role")) {
-                    this.setAttribute("role", "img");
-                    this.dataset.autoRole = "";
-                }
-                if (!this.hasAttribute("aria-labelledby") && (!this.hasAttribute("aria-label") || this.dataset.autoLabel !== undefined)) {
-                    this.setAttribute("aria-label", accessibleName);
-                    this.dataset.autoLabel = "";
-                }
-            }
-            this.refreshThemeColor();
-        }
-        watchTheme() {
-            if (this.getAttribute("color") !== "colorful" || !this.isConnected)
-                return;
-            const root = this.closest("[data-spui-appearance]");
-            if (!root)
-                return;
-            this.unwatchTheme();
-            this.themeRoot = root;
-            let watch = themeWatches.get(root);
-            if (!watch) {
-                const instances = new Set();
-                const observer = new MutationObserver(() => instances.forEach(avatar => avatar.refreshThemeColor()));
-                observer.observe(root, { attributes: true, attributeFilter: ["style"] });
-                watch = { instances, observer };
-                themeWatches.set(root, watch);
-            }
-            watch.instances.add(this);
-        }
-        unwatchTheme() {
-            if (!this.themeRoot)
-                return;
-            const watch = themeWatches.get(this.themeRoot);
-            watch?.instances.delete(this);
-            if (watch && watch.instances.size === 0) {
-                watch.observer.disconnect();
-                themeWatches.delete(this.themeRoot);
-            }
-            this.themeRoot = undefined;
-        }
-    }
-    customElements.define("spui-avatar", SpuiAvatar);
-}
-function getInitials(name, size, locale, rtl = false) {
-    const words = name.replace(/\([^)]*\)|\[[^\]]*\]|\{[^}]*\}/g, " ").trim().split(/\s+/).filter(Boolean);
-    if (!words.length)
-        return "";
-    const selectedWords = size <= 20 ? [words[0]] : words.length === 2 ? words : words.length === 3 ? [words[0], words[2]] : [words[0]];
-    let initials = selectedWords.map(word => firstGrapheme(word, locale)).join("");
-    try {
-        initials = initials.toLocaleUpperCase(locale);
-    }
-    catch {
-        initials = initials.toUpperCase();
-    }
-    const characters = Array.from(initials);
-    return rtl && characters.length > 1 ? characters.reverse().join("") : initials;
-}
-function firstGrapheme(value, locale) {
-    const Segmenter = Intl.Segmenter;
-    if (Segmenter) {
-        try {
-            return [...new Segmenter(locale, { granularity: "grapheme" }).segment(value)][0]?.segment ?? "";
-        }
-        catch { /* Fall through for unsupported locale tags or older engines. */ }
-    }
-    return Array.from(value.normalize("NFC"))[0] ?? "";
-}
-function hashString(value) {
-    let hash = 2166136261;
-    for (const character of value)
-        hash = Math.imul(hash ^ character.codePointAt(0), 16777619);
-    return hash >>> 0;
-}
-function parseColor(value) {
-    const hex = /^#([\da-f]{3}|[\da-f]{6})$/i.exec(value);
-    if (hex) {
-        const expanded = hex[1].length === 3 ? [...hex[1]].map(character => character + character).join("") : hex[1];
-        return [0, 2, 4].map(index => parseInt(expanded.slice(index, index + 2), 16));
-    }
-    const rgb = /^rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)/i.exec(value);
-    return rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] : null;
-}
-function relativeLuminance([red, green, blue]) {
-    const linear = (channel) => { const value = channel / 255; return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4; };
-    return linear(red) * 0.2126 + linear(green) * 0.7152 + linear(blue) * 0.0722;
-}

package/dist/elements/badge.d.ts

@@ -1,8 +0,0 @@
-export type BadgeAppearance = "filled" | "ghost" | "outline" | "tint";
-export type BadgeColor = "brand" | "danger" | "important" | "informative" | "severe" | "subtle" | "success" | "warning";
-export type BadgeShape = "circular" | "rounded" | "square";
-export type BadgeSize = "tiny" | "extra-small" | "small" | "medium" | "large" | "extra-large";
-export type PresenceBadgeStatus = "busy" | "out-of-office" | "away" | "available" | "offline" | "do-not-disturb" | "unknown" | "blocked";
-export declare function defineBadge(): void;
-export declare function defineCounterBadge(): void;
-export declare function definePresenceBadge(): void;

package/dist/elements/badge.js

@@ -1,182 +0,0 @@
-import { base } from "./shared.js";
-const badgeStyle = `${base}
-:host{--badge-size:20px;--badge-pad:6px;--badge-status:var(--spui-ui-accent,var(--colorBrandBackground,#0078d4));--badge-filled-background:var(--spui-ui-accent,var(--colorBrandBackground,#0078d4));--badge-filled-foreground:var(--spui-ui-accent-text,#fff);--badge-filled-border:var(--colorTransparentStroke,transparent);--badge-tint-background:color-mix(in srgb,var(--badge-status) 12%,var(--spui-ui-surface,#fff));--badge-tint-foreground:var(--badge-status);--badge-tint-border:var(--badge-outline-border);--badge-outline-border:var(--badge-status);display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;min-width:var(--badge-size);min-height:var(--badge-size);padding-inline:var(--badge-pad);border:1px solid var(--badge-outline-border);border-radius:999px;background:var(--badge-filled-background);color:var(--badge-filled-foreground);font:600 12px/1 var(--spui-font-family,inherit);white-space:nowrap;vertical-align:middle}
-:host([color=success]){--badge-status:var(--spui-ui-success,#107c10);--badge-color:var(--spui-ui-success-surface,#dff6dd);--badge-foreground:var(--badge-status);--badge-tint:var(--spui-ui-success-surface,#dff6dd)}
-:host([color=warning]),:host([color=important]){--badge-status:var(--spui-ui-warning,#835b00);--badge-color:var(--spui-ui-warning-surface,#fff4ce);--badge-foreground:var(--badge-status);--badge-tint:var(--spui-ui-warning-surface,#fff4ce)}
-:host([color=danger]),:host([color=severe]){--badge-status:var(--spui-ui-danger,#b10e1c);--badge-color:var(--spui-ui-danger-surface,#fde7e9);--badge-foreground:var(--badge-status);--badge-tint:var(--spui-ui-danger-surface,#fde7e9)}
-:host([color=informative]){--badge-status:var(--spui-ui-accent,#0078d4);--badge-color:var(--spui-ui-accent,var(--colorBrandBackground,#0078d4));--badge-tint:color-mix(in srgb,var(--badge-status) 12%,var(--spui-ui-surface,#fff))}
-:host([color=subtle]){--badge-status:var(--spui-ui-muted,#616161);--badge-color:color-mix(in srgb,var(--spui-ui-stroke,#d1d1d1) 25%,var(--spui-ui-surface,#fff));--badge-foreground:var(--spui-ui-text,#242424);--badge-tint:var(--badge-color)}
-:host([color=brand]){--badge-filled-background:var(--colorBrandBackground,var(--spui-ui-accent,#0078d4));--badge-filled-foreground:var(--colorNeutralForegroundOnBrand,var(--spui-ui-accent-text,#fff));--badge-status:var(--colorBrandForeground1,var(--spui-ui-accent,#0078d4));--badge-tint-background:var(--colorBrandBackground2,color-mix(in srgb,var(--badge-status) 12%,var(--spui-ui-surface,#fff)));--badge-tint-foreground:var(--colorBrandForeground2,var(--badge-status));--badge-tint-border:var(--colorBrandStroke2,var(--badge-status));--badge-outline-border:var(--badge-status)}
-:host([color=danger]){--badge-filled-background:var(--colorPaletteRedBackground3,color-mix(in srgb,var(--spui-ui-danger,#b10e1c) 85%,black));--badge-filled-foreground:var(--colorNeutralForegroundOnBrand,#fff);--badge-status:var(--colorPaletteRedForeground3,var(--spui-ui-danger,#b10e1c));--badge-tint-background:var(--colorPaletteRedBackground1,var(--spui-ui-danger-surface,#fde7e9));--badge-tint-foreground:var(--colorPaletteRedForeground1,var(--spui-ui-danger,#b10e1c));--badge-tint-border:var(--colorPaletteRedBorder1,var(--badge-status));--badge-outline-border:var(--colorPaletteRedBorder2,var(--badge-status))}
-:host([color=severe]){--badge-filled-background:var(--colorPaletteDarkOrangeBackground3,color-mix(in srgb,var(--spui-ui-warning,#835b00) 88%,black));--badge-filled-foreground:var(--colorNeutralForegroundOnBrand,#fff);--badge-status:var(--colorPaletteDarkOrangeForeground3,var(--spui-ui-warning,#835b00));--badge-tint-background:var(--colorPaletteDarkOrangeBackground1,var(--spui-ui-warning-surface,#fff4ce));--badge-tint-foreground:var(--colorPaletteDarkOrangeForeground1,var(--spui-ui-warning,#835b00));--badge-tint-border:var(--colorPaletteDarkOrangeBorder1,var(--badge-status));--badge-outline-border:var(--badge-status)}
-:host([color=success]){--badge-filled-background:var(--colorPaletteGreenBackground3,color-mix(in srgb,var(--spui-ui-success,#107c10) 85%,black));--badge-filled-foreground:var(--colorNeutralForegroundOnBrand,#fff);--badge-status:var(--colorPaletteGreenForeground3,var(--spui-ui-success,#107c10));--badge-tint-background:var(--colorPaletteGreenBackground1,var(--spui-ui-success-surface,#dff6dd));--badge-tint-foreground:var(--colorPaletteGreenForeground1,var(--spui-ui-success,#107c10));--badge-tint-border:var(--colorPaletteGreenBorder1,var(--badge-status));--badge-outline-border:var(--colorPaletteGreenBorder2,var(--badge-status))}
-:host([color=warning]){--badge-filled-background:var(--colorPaletteYellowBackground3,color-mix(in srgb,var(--spui-ui-warning,#835b00) 82%,black));--badge-filled-foreground:var(--colorNeutralForeground1Static,#242424);--badge-status:var(--colorPaletteYellowForeground2,var(--spui-ui-warning,#835b00));--badge-tint-background:var(--colorPaletteYellowBackground1,var(--spui-ui-warning-surface,#fff4ce));--badge-tint-foreground:var(--colorPaletteYellowForeground1,var(--spui-ui-warning,#835b00));--badge-tint-border:var(--colorPaletteYellowBorder1,var(--badge-status));--badge-outline-border:var(--badge-status)}
-:host([color=important]){--badge-filled-background:var(--colorNeutralForeground1,#242424);--badge-filled-foreground:var(--colorNeutralBackground1,#fff);--badge-status:var(--colorNeutralForeground1,#242424);--badge-tint-background:var(--colorNeutralForeground3,#616161);--badge-tint-foreground:var(--colorNeutralBackground1,#fff);--badge-tint-border:var(--colorTransparentStroke,transparent);--badge-outline-border:var(--colorNeutralStrokeAccessible,#616161)}
-:host([color=informative]){--badge-filled-background:var(--colorNeutralBackground5,#e0e0e0);--badge-filled-foreground:var(--colorNeutralForeground3,#616161);--badge-status:var(--colorNeutralForeground3,#616161);--badge-tint-background:var(--colorNeutralBackground4,#f0f0f0);--badge-tint-foreground:var(--colorNeutralForeground3,#616161);--badge-tint-border:var(--colorNeutralStroke2,#d1d1d1);--badge-outline-border:var(--colorNeutralStroke2,#d1d1d1)}
-:host([color=subtle]){--badge-filled-background:var(--colorNeutralBackground1,var(--spui-ui-surface,#fff));--badge-filled-foreground:var(--colorNeutralForeground1,var(--spui-ui-text,#242424));--badge-status:var(--colorNeutralForegroundStaticInverted,#fff);--badge-tint-background:var(--colorNeutralBackground1,var(--spui-ui-surface,#fff));--badge-tint-foreground:var(--colorNeutralForeground3,var(--spui-ui-muted,#616161));--badge-tint-border:var(--colorNeutralStroke2,var(--spui-ui-stroke,#d1d1d1));--badge-outline-border:var(--badge-status)}
-:host([color=brand]){--badge-outline-foreground:var(--colorBrandForeground1,var(--spui-ui-accent,#0078d4))}:host([color=danger]){--badge-outline-foreground:var(--colorPaletteRedForeground3,var(--spui-ui-danger,#b10e1c))}:host([color=important]){--badge-outline-foreground:var(--colorNeutralForeground3,#616161)}:host([color=informative]){--badge-outline-foreground:var(--colorNeutralForeground3,#616161)}:host([color=severe]){--badge-outline-foreground:var(--colorPaletteDarkOrangeForeground3,var(--spui-ui-warning,#835b00))}:host([color=subtle]){--badge-outline-foreground:var(--colorNeutralForegroundStaticInverted,#fff)}:host([color=success]){--badge-outline-foreground:var(--colorPaletteGreenForeground3,var(--spui-ui-success,#107c10))}:host([color=warning]){--badge-outline-foreground:var(--colorPaletteYellowForeground2,var(--spui-ui-warning,#835b00))}
-:host([appearance=ghost]){border-color:transparent;background:transparent;color:var(--badge-status)}
-:host([appearance=outline]){background:transparent;color:var(--badge-outline-foreground,var(--badge-status))}
-:host([appearance=filled]){border-color:var(--badge-filled-border)}:host([appearance=ghost]){border-color:transparent}:host([appearance=outline]){border-color:var(--badge-outline-border)}:host([appearance=tint]){border-color:var(--badge-tint-border);background:var(--badge-tint-background);color:var(--badge-tint-foreground)}
-:host([shape=rounded]){border-radius:6px}:host([shape=square]){border-radius:2px}:host([shape=circular]){border-radius:999px}
-:host([size=tiny]){--badge-size:6px;--badge-pad:0;width:6px;min-width:0;min-height:0;height:6px;padding:0;font-size:4px}:host([size=extra-small]){--badge-size:10px;--badge-pad:0;width:10px;min-width:0;min-height:0;height:10px;padding:0;font-size:6px}:host([size=small]){--badge-size:16px;--badge-pad:4px;font-size:10px}:host([size=large]){--badge-size:24px;--badge-pad:7px;font-size:14px}:host([size=extra-large]){--badge-size:32px;--badge-pad:9px;font-size:16px}
-.content{display:inline-flex;align-items:center;justify-content:center;order:1}.icon{display:inline-flex;align-items:center;justify-content:center;order:0;line-height:0}slot[name=icon]{display:contents}
-:host([icon-position=after]) .icon{order:2}:host([icon-position=after]) .content{order:1}
-:host([dot]){width:var(--badge-size);min-width:var(--badge-size);padding:0}:host([dot]) .content,:host([dot]) .icon{display:none}:host([hidden]){display:none}
-:host([kind=presence]){position:relative;width:var(--badge-size);min-width:var(--badge-size);padding:0;border-width:1px;background:var(--badge-color)}
-:host([kind=presence]){background:var(--colorNeutralBackground1,var(--spui-ui-surface,#fff));border-color:var(--colorTransparentStroke,transparent);color:var(--badge-status)}:host([kind=presence][status=available]){--badge-status:var(--colorPaletteLightGreenForeground3,var(--spui-ui-success,#13a10e))}:host([kind=presence][status=away]){--badge-status:var(--colorPaletteMarigoldBackground3,var(--spui-ui-warning,#835b00))}:host([kind=presence][status=busy]),:host([kind=presence][status=do-not-disturb]),:host([kind=presence][status=blocked]){--badge-status:var(--colorPaletteRedBackground3,var(--spui-ui-danger,#c50f1f))}:host([kind=presence][status=out-of-office]){--badge-status:var(--colorPaletteBerryForeground3,var(--spui-ui-danger,#c50f1f))}:host([kind=presence][status=offline]),:host([kind=presence][status=unknown]){--badge-status:var(--colorNeutralForeground3,var(--spui-ui-muted,#616161))}
-:host([kind=presence][status=available]){--badge-color:var(--spui-ui-success-surface,#dff6dd);--badge-foreground:var(--spui-ui-success,#107c10)}
-:host([kind=presence][status=away]){--badge-color:var(--spui-ui-warning-surface,#fff4ce);--badge-foreground:var(--spui-ui-warning,#835b00)}
-:host([kind=presence][status=busy]),:host([kind=presence][status=do-not-disturb]),:host([kind=presence][status=blocked]),:host([kind=presence][status=out-of-office]){--badge-color:var(--spui-ui-danger-surface,#fde7e9);--badge-foreground:var(--spui-ui-danger,#b10e1c)}
-:host([kind=presence][status=offline]),:host([kind=presence][status=unknown]){--badge-color:color-mix(in srgb,var(--spui-ui-stroke,#d1d1d1) 25%,var(--spui-ui-surface,#fff));--badge-foreground:var(--spui-ui-muted,#616161)}
-.icon svg{display:block;width:100%;height:100%}:host([kind=presence]) .icon{width:68%;height:68%}
-@media(forced-colors:active){:host{border-color:CanvasText}:host([appearance=ghost]),:host([appearance=tint]){color:CanvasText}:host([kind=presence]){background:Canvas;color:CanvasText;border-color:CanvasText}}
-@media(prefers-reduced-motion:reduce){:host{transition:none}}`;
-function presenceIcon(status, outOfOffice) {
-    const ns = "http://www.w3.org/2000/svg";
-    const svg = document.createElementNS(ns, "svg");
-    svg.setAttribute("viewBox", "0 0 16 16");
-    svg.setAttribute("aria-hidden", "true");
-    svg.setAttribute("focusable", "false");
-    const shape = (name, attributes) => {
-        const element = document.createElementNS(ns, name);
-        for (const [key, value] of Object.entries(attributes))
-            element.setAttribute(key, value);
-        svg.append(element);
-    };
-    const stroke = { fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round" };
-    if (status === "available")
-        shape("path", { ...stroke, d: "M3.4 8.2 6.5 11.3 12.8 4.9" });
-    else if (status === "away") {
-        shape("circle", { ...stroke, cx: "8", cy: "8", r: "5.4" });
-        shape("path", { ...stroke, d: "M8 4.8V8l2.3 1.5" });
-    }
-    else if (status === "busy")
-        shape("circle", { cx: "8", cy: "8", r: "4.7", fill: "currentColor" });
-    else if (status === "do-not-disturb") {
-        shape("circle", { ...stroke, cx: "8", cy: "8", r: "5.4" });
-        shape("path", { ...stroke, d: "M5.2 8h5.6" });
-    }
-    else if (status === "offline")
-        shape("circle", { ...stroke, cx: "8", cy: "8", r: "5.1" });
-    else if (status === "blocked") {
-        shape("circle", { ...stroke, cx: "8", cy: "8", r: "5.2" });
-        shape("path", { ...stroke, d: "m4.3 11.7 7.4-7.4" });
-    }
-    else if (status === "out-of-office") {
-        shape("path", { ...stroke, d: "M3.5 13.2V4.5l4.5-2 4.5 2v8.7M2.5 13.2h11M6 6.2h.1M9.9 6.2h.1M7.2 13.1V9.8h1.6v3.3" });
-    }
-    else {
-        shape("path", { ...stroke, d: "M5.8 5.7a2.3 2.3 0 1 1 3.8 1.7c-1 .8-1.6 1.1-1.6 2.3" });
-        shape("circle", { cx: "8", cy: "12.3", r: ".5", fill: "currentColor" });
-    }
-    if (outOfOffice && status !== "out-of-office") {
-        shape("circle", { cx: "12.1", cy: "12.1", r: "3.25", fill: "var(--spui-ui-surface,#fff)", stroke: "var(--spui-ui-danger,#b10e1c)", "stroke-width": ".75" });
-        shape("path", { d: "M10.7 13.4v-2.7h2.8v2.7m-1.9-2.7v.9m1-.9v.9", fill: "none", stroke: "var(--spui-ui-danger,#b10e1c)", "stroke-width": ".55", "stroke-linecap": "round", "stroke-linejoin": "round" });
-    }
-    return svg;
-}
-function renderBadge(host, shadow, options) {
-    const style = document.createElement("style");
-    style.textContent = badgeStyle;
-    const content = document.createElement("span");
-    content.className = "content";
-    content.part.add("content");
-    const defaultSlot = document.createElement("slot");
-    if (options.content !== undefined)
-        content.textContent = options.content;
-    else
-        content.append(defaultSlot);
-    const icon = document.createElement("span");
-    icon.className = "icon";
-    icon.part.add("icon");
-    const iconSlot = document.createElement("slot");
-    iconSlot.name = "icon";
-    if (options.icon && !host.querySelector('[slot="icon"]'))
-        icon.append(options.icon);
-    else
-        icon.append(iconSlot);
-    shadow.replaceChildren(style, icon, content);
-    if (options.presence) {
-        const status = host.getAttribute("status") ?? "available";
-        if (host.getAttribute("role") !== "img")
-            host.setAttribute("role", "img");
-    }
-}
-export function defineBadge() {
-    if (customElements.get("spui-badge"))
-        return;
-    class SpuiBadge extends HTMLElement {
-        static observedAttributes = ["appearance", "color", "icon-position", "shape", "size"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.render(); }
-        render() { renderBadge(this, this.shadowRoot ?? this.attachShadow({ mode: "open" }), {}); }
-    }
-    customElements.define("spui-badge", SpuiBadge);
-}
-export function defineCounterBadge() {
-    if (customElements.get("spui-counter-badge"))
-        return;
-    class SpuiCounterBadge extends HTMLElement {
-        static observedAttributes = ["appearance", "aria-label", "color", "count", "dot", "overflow-count", "shape", "show-zero", "size"];
-        generatedLabel;
-        customLabel = false;
-        connectedCallback() { this.render(); }
-        attributeChangedCallback(name, _oldValue, newValue) {
-            if (name === "aria-label")
-                this.customLabel = newValue !== null && newValue !== this.generatedLabel;
-            if (this.isConnected)
-                this.render();
-        }
-        render() {
-            const parsedCount = Number(this.getAttribute("count") ?? 0);
-            const parsedMax = Number(this.getAttribute("overflow-count") ?? 99);
-            const count = Number.isFinite(parsedCount) ? Math.max(0, parsedCount) : 0;
-            const max = Number.isFinite(parsedMax) ? Math.max(0, parsedMax) : 99;
-            const dot = this.hasAttribute("dot");
-            const visible = dot || count > 0 || this.hasAttribute("show-zero");
-            this.toggleAttribute("hidden", !visible);
-            if (!dot && !this.customLabel) {
-                const label = `${count > max ? `${max}+` : count}`;
-                this.generatedLabel = label;
-                if (this.getAttribute("aria-label") !== label)
-                    this.setAttribute("aria-label", label);
-            }
-            this.setAttribute("kind", "counter");
-            const content = dot ? undefined : String(count > max ? `${max}+` : count);
-            renderBadge(this, this.shadowRoot ?? this.attachShadow({ mode: "open" }), { content });
-        }
-    }
-    customElements.define("spui-counter-badge", SpuiCounterBadge);
-}
-export function definePresenceBadge() {
-    if (customElements.get("spui-presence-badge"))
-        return;
-    class SpuiPresenceBadge extends HTMLElement {
-        static observedAttributes = ["out-of-office", "size", "status", "aria-label"];
-        generatedLabel;
-        customLabel = false;
-        connectedCallback() { this.render(); }
-        attributeChangedCallback(name, _oldValue, newValue) {
-            if (name === "aria-label")
-                this.customLabel = newValue !== null && newValue !== this.generatedLabel;
-            if (this.isConnected)
-                this.render();
-        }
-        render() {
-            this.setAttribute("kind", "presence");
-            const status = this.getAttribute("status") ?? "available";
-            if (!this.customLabel) {
-                const status = this.getAttribute("status") ?? "available";
-                const label = `${status.replaceAll("-", " ")}${this.hasAttribute("out-of-office") && status !== "out-of-office" ? ", out of office" : ""}`;
-                this.generatedLabel = label;
-                if (this.getAttribute("aria-label") !== label)
-                    this.setAttribute("aria-label", label);
-            }
-            renderBadge(this, this.shadowRoot ?? this.attachShadow({ mode: "open" }), { icon: presenceIcon(status, this.hasAttribute("out-of-office")), presence: true });
-        }
-    }
-    customElements.define("spui-presence-badge", SpuiPresenceBadge);
-}

package/dist/elements/breadcrumb.d.ts

@@ -1,4 +0,0 @@
-export declare function defineBreadcrumb(): void;
-export declare function defineBreadcrumbItem(): void;
-export declare function defineBreadcrumbDivider(): void;
-export declare function defineBreadcrumbButton(): void;