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

package/dist/elements/avatar.js

@@ -0,0 +1,251 @@
+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{z-index:0;max-width:100%;overflow:hidden;padding:0 2px;text-overflow:clip;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

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

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

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