@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/table.js

@@ -1,261 +0,0 @@
-import { base } from "./shared.js";
-export function createTableColumn(options) {
-    return { columnId: options.columnId, compare: options.compare ?? (() => 0), renderHeaderCell: options.renderHeaderCell ?? (() => null), renderCell: options.renderCell ?? (() => null) };
-}
-function defineSlotted({ tag, role, display, css, attributes = [], namedSlots = [], sync }) {
-    if (customElements.get(tag))
-        return;
-    class SpuiTablePart extends HTMLElement {
-        static observedAttributes = attributes;
-        connectedCallback() {
-            if (!this.shadowRoot) {
-                const shadow = this.attachShadow({ mode: "open" });
-                const style = document.createElement("style");
-                const closesHostRule = css.includes("}");
-                style.textContent = `${base}:host{box-sizing:border-box;display:${display};min-width:0;color:inherit;font:inherit;${css}${closesHostRule ? "" : "}"}`;
-                const slot = document.createElement("slot");
-                shadow.append(style, slot, ...namedSlots.map(name => { const named = document.createElement("slot"); named.name = name; return named; }));
-                if (!this.hasAttribute("role"))
-                    this.setAttribute("role", role);
-            }
-            sync?.(this, this.shadowRoot);
-        }
-        attributeChangedCallback() { if (this.isConnected)
-            sync?.(this, this.shadowRoot); }
-    }
-    customElements.define(tag, SpuiTablePart);
-}
-export function defineTableCellActions() {
-    defineSlotted({ tag: "spui-table-cell-actions", role: "presentation", display: "inline-flex", attributes: ["visible"], css: `gap:var(--spui-table-action-gap,4px);align-items:center;margin-inline-start:auto;opacity:0;transition:opacity var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}:host([visible]),:host(:focus-within),:host(:hover){opacity:1}:host([hidden]){display:none}@media(prefers-reduced-motion:reduce){:host{transition:none}}@media(forced-colors:active){:host{opacity:1}}` });
-}
-export function defineTableCellLayout() {
-    defineSlotted({ tag: "spui-table-cell-layout", role: "presentation", display: "flex", attributes: ["appearance", "truncate"], namedSlots: ["media", "main", "description"], css: `align-items:center;gap:var(--spui-table-cell-gap,8px);min-width:0;min-height:inherit}:host([appearance=primary]){font-weight:600}:host([truncate]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::slotted([slot=media]){display:inline-flex;flex:none;align-items:center}::slotted([slot=main]){flex:1;min-width:0}::slotted([slot=description]){color:var(--spui-ui-muted,var(--colorNeutralForeground2,#616161));font-size:.9em}` });
-}
-export function defineTableCell() {
-    defineSlotted({ tag: "spui-table-cell", role: "cell", display: "table-cell", css: `padding:var(--spui-table-cell-padding,10px 12px);border-block-end:1px solid var(--spui-ui-stroke,var(--colorNeutralStroke2,#e1dfdd));vertical-align:middle;overflow-wrap:anywhere}:host-context(spui-table[no-native-elements]){display:flex;flex:1 1 0;min-width:0;align-items:center}` });
-}
-export function defineTableHeaderCell() {
-    defineSlotted({
-        tag: "spui-table-header-cell", role: "columnheader", display: "table-cell", attributes: ["sortable", "sort-direction"], namedSlots: ["button", "aside"],
-        css: `position:relative;padding:var(--spui-table-header-padding,10px 12px);border-block-end:1px solid var(--spui-ui-stroke,var(--colorNeutralStroke1,#d1d1d1));color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424));font-weight:600;text-align:start;vertical-align:middle}:host([sortable]){padding:0}:host([aria-sort=ascending]),:host([aria-sort=descending]){color:var(--spui-ui-accent,var(--colorBrandForeground1,#0f6cbd))}.sort-button,::slotted([slot=button]){box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;padding:10px 12px;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit}.sort-button[role=button],::slotted([slot=button][role=button]){cursor:pointer}.sort-button[role=button]:hover,::slotted([slot=button][role=button]:hover){background:var(--spui-ui-surface-hover,var(--colorNeutralBackground1Hover,#f5f5f5))}.sort-button[role=button]:focus-visible,::slotted([slot=button][role=button]:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:-2px}.sort-icon{display:inline-flex;align-items:center;justify-content:center;width:8px;height:8px;flex:none;opacity:.55}.sort-icon::before{content:"";display:block;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-1px,-1px)}.sort-icon.custom::before{display:none}.sort-icon slot::slotted(*){display:inline-flex;align-items:center;justify-content:center}:host([sort-direction=ascending]) .sort-icon::before{transform:rotate(225deg) translate(-1px,-1px)}:host(:not([sortable])) .sort-icon{display:none}@media(forced-colors:active){.sort-button:focus-visible,::slotted([slot=button][role=button]:focus-visible){outline-color:Highlight}}:host-context(spui-table[no-native-elements]){display:flex;flex:1 1 0;min-width:0;align-items:center}`,
-        sync: (host, root) => {
-            const sortable = host.hasAttribute("sortable");
-            host.toggleAttribute("data-sortable", sortable);
-            const direction = host.getAttribute("sort-direction");
-            if (direction === "ascending" || direction === "descending")
-                host.setAttribute("aria-sort", direction);
-            else
-                host.removeAttribute("aria-sort");
-            const buttonSlot = root.querySelector('slot[name="button"]');
-            let button = buttonSlot.querySelector(".sort-button");
-            if (!button) {
-                button = document.createElement("div");
-                button.className = "sort-button";
-                button.part.add("sort-button");
-                const content = document.createElement("span");
-                content.part.add("content");
-                const contentSlot = root.querySelector("slot:not([name])");
-                content.append(contentSlot);
-                const icon = document.createElement("span");
-                icon.className = "sort-icon";
-                icon.setAttribute("aria-hidden", "true");
-                icon.part.add("sort-icon");
-                const iconSlot = document.createElement("slot");
-                iconSlot.name = "sort-icon";
-                iconSlot.addEventListener("slotchange", () => icon.classList.toggle("custom", iconSlot.assignedNodes({ flatten: true }).length > 0));
-                icon.append(iconSlot);
-                button.append(content, icon);
-                buttonSlot.append(button);
-            }
-            if (sortable)
-                button.setAttribute("role", "button");
-            else
-                button.removeAttribute("role");
-            button.tabIndex = sortable ? 0 : -1;
-            const assignedButton = buttonSlot.assignedElements({ flatten: true }).find(element => element instanceof HTMLElement);
-            if (assignedButton) {
-                if (sortable) {
-                    if (!assignedButton.hasAttribute("role"))
-                        assignedButton.setAttribute("role", "button");
-                    if (!assignedButton.hasAttribute("tabindex"))
-                        assignedButton.tabIndex = 0;
-                }
-            }
-            if (!host.__spuiHeaderSortListener) {
-                host.__spuiHeaderSortListener = true;
-                const sort = () => {
-                    if (!host.hasAttribute("sortable"))
-                        return;
-                    const next = host.getAttribute("sort-direction") === "ascending" ? "descending" : "ascending";
-                    host.dispatchEvent(new CustomEvent("spui-table-sort", { bubbles: true, composed: true, detail: { direction: next, columnId: host.getAttribute("column-id") } }));
-                };
-                const isTrigger = (event) => event.composedPath().some(node => node === button || buttonSlot.assignedElements({ flatten: true }).includes(node));
-                host.addEventListener("click", event => { if (isTrigger(event))
-                    sort(); });
-                host.addEventListener("keydown", event => {
-                    if ((event.key === "Enter" || event.key === " ") && isTrigger(event)) {
-                        const path = event.composedPath();
-                        const target = buttonSlot.assignedElements({ flatten: true }).find(element => path.includes(element)) ?? button;
-                        if (target.tagName === "BUTTON" || (event.key === "Enter" && target.tagName === "A"))
-                            return;
-                        event.preventDefault();
-                        sort();
-                    }
-                });
-            }
-        },
-    });
-}
-export function defineTableRow() {
-    defineSlotted({ tag: "spui-table-row", role: "row", display: "table-row", attributes: ["appearance", "selected"], css: `color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424))}:host(:hover){background:var(--spui-table-row-hover,var(--spui-ui-surface-hover,#f5f5f5))}:host([selected]){background:color-mix(in srgb,var(--spui-ui-accent,#0f6cbd) 10%,var(--spui-ui-surface,#fff))}:host([appearance=brand]){background:color-mix(in srgb,var(--spui-ui-accent,#0f6cbd) 10%,var(--spui-ui-surface,#fff))}:host([appearance=neutral]){background:var(--spui-ui-surface-hover,#f5f5f5)}:host([appearance=none]){background:transparent}:host([selected]) spui-table-cell,:host([selected]) spui-table-header-cell{font-weight:600}@media(forced-colors:active){:host([selected]){outline:1px solid Highlight}}:host-context(spui-table[no-native-elements]){display:flex;align-items:stretch;width:100%;min-width:100%}`, sync: host => { if (host.hasAttribute("selected"))
-            host.setAttribute("aria-selected", "true");
-        else
-            host.removeAttribute("aria-selected"); } });
-}
-export function defineTableHeader() {
-    defineSlotted({ tag: "spui-table-header", role: "rowgroup", display: "table-header-group", css: `background:var(--spui-table-header-background,var(--spui-ui-surface-subtle,var(--colorNeutralBackground2,#faf9f8)))}:host-context(spui-table[no-native-elements]){display:flex;flex-direction:column}` });
-}
-export function defineTableBody() {
-    defineSlotted({ tag: "spui-table-body", role: "rowgroup", display: "table-row-group", css: `:host-context(spui-table[no-native-elements]){display:flex;flex-direction:column}` });
-}
-export function defineTableSelectionCell() {
-    defineSlotted({
-        tag: "spui-table-selection-cell", role: "cell", display: "table-cell", attributes: ["type", "checked", "subtle", "invisible", "hidden"], namedSlots: ["checkbox-indicator", "radio-indicator"],
-        css: `position:relative;width:44px;min-width:44px;padding:4px 8px;text-align:center;vertical-align:middle}:host([hidden]){display:none}:host([invisible]){visibility:hidden}.select{box-sizing:border-box;display:inline-grid;place-items:center;width:20px;height:20px;margin:0;accent-color:var(--spui-ui-accent,#0f6cbd);cursor:pointer;transition:opacity var(--spui-motion-duration-fast,100ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}:host([data-custom-indicator]) .select{position:absolute;inset:0;margin:auto;opacity:0}:host([subtle]) .select{opacity:0}:host([subtle][checked]) .select,:host([subtle]:focus-within) .select,:host-context(spui-table-row:hover) .select{opacity:1}:host([data-custom-indicator]) .select{opacity:0}::slotted([slot=checkbox-indicator]),::slotted([slot=radio-indicator]){display:inline-flex;align-items:center;justify-content:center;pointer-events:none}::slotted([data-indeterminate=true]){forced-color-adjust:auto}.select:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}:host([data-custom-indicator]:focus-within) ::slotted([data-checked]),:host([data-custom-indicator]:focus-within) ::slotted([slot=checkbox-indicator]),:host([data-custom-indicator]:focus-within) ::slotted([slot=radio-indicator]){outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px;border-radius:var(--spui-control-radius,4px)}@media(prefers-reduced-motion:reduce){.select{transition:none}}@media(forced-colors:active){.select{accent-color:Highlight}:host([subtle]) .select{opacity:1}}:host-context(spui-table[no-native-elements]){display:flex;flex:0 0 44px;align-items:center;justify-content:center}`,
-        sync: (host, root) => {
-            let input = root.querySelector("input");
-            if (!input) {
-                input = document.createElement("input");
-                input.className = "select";
-                input.part.add("input");
-                root.append(input);
-                input.addEventListener("change", () => {
-                    host.toggleAttribute("checked", input.checked);
-                    host.dispatchEvent(new CustomEvent("spui-table-selection-change", { bubbles: true, composed: true, detail: { checked: input.checked, type: input.type } }));
-                });
-            }
-            input.type = host.getAttribute("type") === "radio" ? "radio" : "checkbox";
-            input.checked = host.hasAttribute("checked");
-            input.indeterminate = host.getAttribute("checked") === "mixed";
-            const slotName = input.type === "radio" ? "radio-indicator" : "checkbox-indicator";
-            const indicatorSlot = root.querySelector(`slot[name="${slotName}"]`);
-            const indicators = indicatorSlot.assignedElements({ flatten: true });
-            host.toggleAttribute("data-custom-indicator", indicators.length > 0);
-            for (const indicator of indicators) {
-                indicator.setAttribute("data-checked", String(input.checked));
-                indicator.toggleAttribute("data-indeterminate", input.indeterminate);
-            }
-            input.setAttribute("aria-label", host.getAttribute("aria-label") || (input.type === "radio" ? "Select row" : "Select row"));
-            input.disabled = host.hasAttribute("disabled");
-        },
-    });
-}
-export function defineTableResizeHandle() {
-    defineSlotted({
-        tag: "spui-table-resize-handle", role: "presentation", display: "inline-flex", attributes: ["value", "min", "max", "step", "label"],
-        css: `position:absolute;inset-block:0;inset-inline-end:-4px;z-index:1;display:flex;align-items:center;justify-content:center;width:12px;min-height:40px;touch-action:none;cursor:col-resize}.handle{width:2px;height:60%;min-height:20px;border-radius:2px;background:var(--spui-ui-stroke,var(--colorNeutralStroke1,#d1d1d1));opacity:.55}.handle:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}:host(:hover) .handle,:host(:focus-visible) .handle{background:var(--spui-ui-accent,#0f6cbd);opacity:1}`,
-        sync: (host, root) => {
-            let handle = root.querySelector(".handle");
-            if (!handle) {
-                handle = document.createElement("div");
-                handle.className = "handle";
-                handle.tabIndex = 0;
-                handle.setAttribute("role", "separator");
-                handle.setAttribute("aria-orientation", "vertical");
-                handle.part.add("handle");
-                root.append(handle);
-            }
-            const value = Number(host.getAttribute("value"));
-            if (Number.isFinite(value))
-                handle.setAttribute("aria-valuenow", String(value));
-            else
-                handle.removeAttribute("aria-valuenow");
-            for (const name of ["min", "max"]) {
-                const item = host.getAttribute(name);
-                if (item)
-                    handle.setAttribute(`aria-value${name}`, item);
-                else
-                    handle.removeAttribute(`aria-value${name}`);
-            }
-            handle.setAttribute("aria-label", host.getAttribute("label") || "Resize column");
-            const resizeTo = (requested, sourceEvent) => {
-                const current = Number(host.getAttribute("value")) || 0;
-                const minAttribute = host.getAttribute("min");
-                const maxAttribute = host.getAttribute("max");
-                const minimum = minAttribute === null ? -Infinity : Number(minAttribute);
-                const maximum = maxAttribute === null ? Infinity : Number(maxAttribute);
-                const next = Math.max(Number.isFinite(minimum) ? minimum : -Infinity, Math.min(Number.isFinite(maximum) ? maximum : Infinity, requested));
-                if (next === current)
-                    return;
-                host.setAttribute("value", String(next));
-                host.dispatchEvent(new CustomEvent("spui-table-resize", { bubbles: true, composed: true, detail: { delta: next - current, value: next, sourceEvent } }));
-            };
-            handle.onkeydown = event => {
-                if (!(event instanceof KeyboardEvent) || !["ArrowLeft", "ArrowRight"].includes(event.key))
-                    return;
-                event.preventDefault();
-                const step = Math.max(1, Number(host.getAttribute("step")) || 8);
-                const rtl = getComputedStyle(host).direction === "rtl";
-                const delta = (event.key === "ArrowRight" ? 1 : -1) * (rtl ? -1 : 1) * step;
-                const current = Number(host.getAttribute("value")) || 0;
-                resizeTo(current + delta, event);
-            };
-            handle.onpointerdown = event => {
-                if (!(event instanceof PointerEvent) || event.button !== 0)
-                    return;
-                event.preventDefault();
-                const startX = event.clientX;
-                const startWidth = Number(host.getAttribute("value")) || 0;
-                const rtl = getComputedStyle(host).direction === "rtl";
-                const move = (moveEvent) => { if (moveEvent.pointerId === event.pointerId)
-                    resizeTo(startWidth + (moveEvent.clientX - startX) * (rtl ? -1 : 1), moveEvent); };
-                const finish = (finishEvent) => {
-                    if (finishEvent.pointerId !== event.pointerId)
-                        return;
-                    document.removeEventListener("pointermove", move);
-                    document.removeEventListener("pointerup", finish);
-                    document.removeEventListener("pointercancel", finish);
-                };
-                document.addEventListener("pointermove", move);
-                document.addEventListener("pointerup", finish);
-                document.addEventListener("pointercancel", finish);
-            };
-        },
-    });
-}
-export function defineTable() {
-    defineTableHeader();
-    defineTableBody();
-    defineTableRow();
-    defineTableHeaderCell();
-    defineTableCell();
-    defineTableCellLayout();
-    defineTableCellActions();
-    defineTableResizeHandle();
-    defineTableSelectionCell();
-    if (customElements.get("spui-table"))
-        return;
-    class SpuiTable extends HTMLElement {
-        static observedAttributes = ["size", "appearance", "no-native-elements"];
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{box-sizing:border-box;display:block;width:var(--spui-table-width,100%);max-width:100%;min-width:0;background:var(--spui-table-background,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424));font-family:var(--spui-font-family,inherit);font-size:var(--spui-table-font-size,14px);line-height:1.4}.viewport{max-width:100%;overflow-x:auto}.table{display:table;width:100%;min-width:100%;border-collapse:collapse;border-spacing:0}:host([no-native-elements]) .table{display:flex;flex-direction:column}slot{display:contents}:host([size=small]){--spui-table-font-size:12px;--spui-table-cell-padding:6px 8px;--spui-table-header-padding:6px 8px}:host([size=large]){--spui-table-font-size:16px;--spui-table-cell-padding:14px 16px;--spui-table-header-padding:14px 16px}:host([appearance=dividers]){--spui-table-row-hover:transparent}:host([appearance=subtle]){--spui-table-header-background:transparent}@media(forced-colors:active){.table{border-color:CanvasText;color:CanvasText}}`;
-            const viewport = document.createElement("div");
-            viewport.className = "viewport";
-            viewport.part.add("viewport");
-            const table = document.createElement("div");
-            table.className = "table";
-            table.part.add("table");
-            table.setAttribute("role", "presentation");
-            table.append(document.createElement("slot"));
-            viewport.append(table);
-            shadow.append(style, viewport);
-            if (!this.hasAttribute("role"))
-                this.setAttribute("role", "table");
-        }
-    }
-    customElements.define("spui-table", SpuiTable);
-}

package/dist/elements/tabs.d.ts

@@ -1 +0,0 @@
-export declare function defineTabs(): void;

package/dist/elements/tabs.js

@@ -1,276 +0,0 @@
-import { base } from "./shared.js";
-const valueOf = (element) => element.getAttribute("value") ?? "";
-export function defineTabs() {
-    if (customElements.get("spui-tab"))
-        return;
-    class SpuiTab extends HTMLElement {
-        static observedAttributes = ["disabled", "data-list-disabled", "selected", "tabindex", "aria-controls", "appearance", "size", "vertical", "reserve-selected-tab-space"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        get value() { return valueOf(this); }
-        get disabled() { return this.hasAttribute("disabled") || this.hasAttribute("data-list-disabled"); }
-        getContentText() {
-            const named = this.shadowRoot?.querySelector('slot[name="content"]')?.assignedNodes({ flatten: true });
-            const fallback = this.shadowRoot?.querySelector("slot:not([name])")?.assignedNodes({ flatten: true });
-            const assigned = named?.length ? named : fallback;
-            return (assigned?.length ? assigned : [...this.childNodes].filter(node => !(node instanceof Element && node.slot)))
-                .map(node => node.textContent ?? "").join("").replace(/\s+/g, " ").trim();
-        }
-        sync() {
-            this.setAttribute("role", "tab");
-            this.setAttribute("aria-selected", String(this.getAttribute("selected") === "true"));
-            if (this.disabled)
-                this.setAttribute("aria-disabled", "true");
-            else
-                this.removeAttribute("aria-disabled");
-            const reserved = this.shadowRoot?.querySelector(".reserved");
-            if (reserved)
-                reserved.textContent = this.hasAttribute("reserve-selected-tab-space") ? this.getContentText() : "";
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:40px;padding:8px 12px;border:0;border-radius:var(--spui-control-radius,4px);background:transparent;color:var(--spui-ui-muted,var(--spui-semantic-body-text,#616161));font:inherit;line-height:1.25;text-align:center;white-space:nowrap;cursor:pointer;user-select:none}slot[name=icon]{display:inline-flex;align-items:center;justify-content:center;flex:none}.content{display:grid;min-width:0}.content slot,.reserved{grid-area:1/1}.reserved{display:none;visibility:hidden;white-space:pre;font-weight:600}:host([reserve-selected-tab-space][aria-selected=false]) .reserved{display:block}:host([size=small]){min-height:32px;padding:6px 10px;font-size:12px}:host([size=large]){min-height:48px;padding:10px 16px;font-size:16px}:host([aria-selected=true]){color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font-weight:600}:host::after{position:absolute;inset-inline:10px;inset-block-end:0;height:2px;border-radius:2px;background:var(--spui-ui-accent,var(--spui-semantic-accent,#78716c));content:"";opacity:0;transform:scaleX(.65);transition:opacity var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),transform var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}:host([aria-selected=true])::after{opacity:1;transform:scaleX(1)}:host(:focus-visible){z-index:1;outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#78716c));outline-offset:-2px}:host([disabled]),:host([data-list-disabled]){color:var(--spui-ui-muted,#777);cursor:not-allowed;opacity:.6}:host([appearance=subtle-circular]),:host([appearance=filled-circular]){border-radius:999px}:host([appearance=subtle-circular]){border:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1))}:host([appearance=subtle-circular][aria-selected=true]){background:color-mix(in srgb,var(--spui-ui-accent,#78716c) 12%,var(--spui-base-surface,var(--spui-ui-surface,#fff)))}:host([appearance=filled-circular][aria-selected=true]){background:color-mix(in srgb,var(--spui-ui-accent,#78716c) 18%,var(--spui-base-surface,var(--spui-ui-surface,#fff)))}:host([vertical]){justify-content:flex-start;width:100%;text-align:start}:host([vertical])::after{inset-block:8px;inset-inline-start:0;inset-inline-end:auto;width:2px;height:auto}:host([appearance=filled-circular])::after{display:none}@media(prefers-reduced-motion:reduce){:host::after{transition:none}}@media(forced-colors:active){:host::after{background:Highlight}:host(:focus-visible){outline-color:Highlight}:host([aria-selected=true]){color:CanvasText}}`;
-            style.textContent += `:host([appearance=transparent]:hover:not([disabled])),:host([appearance=transparent]:active:not([disabled])){background:var(--colorTransparentBackgroundHover,var(--spui-ui-surface-hover,#f5f5f5))}:host([appearance=transparent]:active:not([disabled])){background:var(--colorTransparentBackgroundPressed,var(--spui-ui-surface-hover,#e0e0e0))}:host([appearance=subtle]){background:var(--colorSubtleBackground,transparent)}:host([appearance=subtle]:hover:not([disabled])){background:var(--colorSubtleBackgroundHover,var(--spui-ui-surface-hover,#f5f5f5))}:host([appearance=subtle]:active:not([disabled])){background:var(--colorSubtleBackgroundPressed,var(--spui-ui-surface-hover,#e0e0e0))}:host([appearance=subtle-circular]){border-color:var(--colorTransparentStroke,transparent);background:var(--colorSubtleBackground,transparent)}:host([appearance=subtle-circular]:hover:not([disabled])){border-color:var(--colorNeutralStroke1Hover,var(--spui-ui-stroke,#d1d1d1));background:var(--colorSubtleBackgroundHover,var(--spui-ui-surface-hover,#f5f5f5))}:host([appearance=subtle-circular][aria-selected=true]){border-color:var(--colorCompoundBrandStroke,color-mix(in srgb,var(--spui-ui-accent,#78716c) 52%,var(--spui-base-surface,var(--spui-ui-surface,#fff))));background:var(--colorBrandBackground2,color-mix(in srgb,var(--spui-ui-accent,#78716c) 18%,var(--spui-base-surface,var(--spui-ui-surface,#fff))));color:var(--colorBrandForeground2,var(--spui-ui-accent,#78716c))}:host([appearance=filled-circular]){border-color:transparent;background:var(--colorNeutralBackground3,var(--spui-ui-surface-hover,#f0f0f0))}:host([appearance=filled-circular][aria-selected=true]){border-color:transparent;background:var(--colorBrandBackground,var(--spui-ui-accent,#78716c));color:var(--colorNeutralForegroundOnBrand,#fff)}:host([appearance=subtle-circular])::after,:host([appearance=filled-circular])::after{display:none}@media(forced-colors:active){:host([appearance=subtle-circular][aria-selected=true]){border-color:Highlight}:host([appearance=filled-circular][aria-selected=true]){border-color:ButtonText;background:ButtonText;color:ButtonFace}}`;
-            const content = document.createElement("span");
-            content.className = "content";
-            const textSlot = document.createElement("slot");
-            textSlot.name = "content";
-            const fallbackSlot = document.createElement("slot");
-            textSlot.append(fallbackSlot);
-            textSlot.addEventListener("slotchange", () => this.sync());
-            fallbackSlot.addEventListener("slotchange", () => this.sync());
-            content.append(textSlot);
-            const reserved = document.createElement("span");
-            reserved.className = "reserved";
-            reserved.setAttribute("aria-hidden", "true");
-            content.append(reserved);
-            const iconSlot = document.createElement("slot");
-            iconSlot.name = "icon";
-            shadow.append(style, iconSlot, content);
-        }
-    }
-    customElements.define("spui-tab", SpuiTab);
-    class SpuiTabList extends HTMLElement {
-        static observedAttributes = ["selected-value", "default-selected-value", "select-on-focus", "reserve-selected-tab-space", "vertical", "disabled", "appearance", "size", "aria-label"];
-        events;
-        observer;
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.observer = new MutationObserver(() => this.sync());
-            this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["disabled", "value"] });
-            this.events?.abort();
-            this.events = new AbortController();
-            this.addEventListener("click", this.onClick, { signal: this.events.signal });
-            this.addEventListener("keydown", this.onKeyDown, { signal: this.events.signal });
-            this.addEventListener("focusin", this.onFocusIn, { signal: this.events.signal });
-            queueMicrotask(() => this.sync());
-        }
-        disconnectedCallback() { this.events?.abort(); this.observer?.disconnect(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        get selectedValue() {
-            return this.getAttribute("selected-value") ?? this.dataset.selectedValue ?? this.getAttribute("default-selected-value") ?? this.tabs().find(tab => !tab.disabled)?.value ?? null;
-        }
-        tabs() { return [...this.children].filter((child) => child.localName === "spui-tab"); }
-        sync() {
-            const tabs = this.tabs();
-            const selected = this.selectedValue;
-            const focusValue = this.dataset.focusValue;
-            const focusTab = tabs.find(tab => tab.value === focusValue && !tab.disabled) ?? tabs.find(tab => tab.value === selected && !tab.disabled) ?? tabs.find(tab => !tab.disabled);
-            this.dataset.orientation = this.hasAttribute("vertical") ? "vertical" : "horizontal";
-            const role = this.shadowRoot?.querySelector("[role=tablist]");
-            role?.setAttribute("aria-orientation", this.hasAttribute("vertical") ? "vertical" : "horizontal");
-            const label = this.getAttribute("aria-label");
-            if (label)
-                role?.setAttribute("aria-label", label);
-            else
-                role?.removeAttribute("aria-label");
-            tabs.forEach(tab => {
-                if (this.hasAttribute("disabled"))
-                    tab.setAttribute("data-list-disabled", "");
-                else
-                    tab.removeAttribute("data-list-disabled");
-                if (this.hasAttribute("vertical"))
-                    tab.setAttribute("vertical", "");
-                else
-                    tab.removeAttribute("vertical");
-                tab.setAttribute("selected", String(tab.value === selected));
-                tab.setAttribute("tabindex", String(tab === focusTab ? 0 : -1));
-                if (this.hasAttribute("appearance"))
-                    tab.setAttribute("appearance", this.getAttribute("appearance"));
-                else
-                    tab.removeAttribute("appearance");
-                if (this.hasAttribute("size"))
-                    tab.setAttribute("size", this.getAttribute("size"));
-                else
-                    tab.removeAttribute("size");
-                const reserveSpace = this.getAttribute("reserve-selected-tab-space") !== "false";
-                if (reserveSpace)
-                    tab.setAttribute("reserve-selected-tab-space", "");
-                else
-                    tab.removeAttribute("reserve-selected-tab-space");
-                const reserved = tab.shadowRoot?.querySelector(".reserved");
-                if (reserved)
-                    reserved.textContent = reserveSpace ? tab.getContentText() : "";
-            });
-            if (selected !== null && this.dataset.lastEmittedValue !== selected) {
-                this.dataset.lastEmittedValue = selected;
-                this.dispatchEvent(new CustomEvent("spui-tab-selection-change", { bubbles: true, composed: true, detail: { value: selected } }));
-            }
-        }
-        onFocusIn = (event) => {
-            const tab = event.composedPath().find(target => target instanceof SpuiTab);
-            if (!tab || tab.disabled)
-                return;
-            this.dataset.focusValue = tab.value;
-            this.sync();
-            if (this.hasAttribute("select-on-focus"))
-                this.select(tab, event);
-        };
-        onClick = (event) => {
-            const tab = event.composedPath().find(target => target instanceof SpuiTab);
-            if (tab)
-                this.select(tab, event);
-        };
-        onKeyDown = (event) => {
-            const tabs = this.tabs().filter(tab => !tab.disabled);
-            const current = event.composedPath().find(target => target instanceof SpuiTab);
-            if (!current || !tabs.length)
-                return;
-            const index = tabs.indexOf(current);
-            const vertical = this.hasAttribute("vertical");
-            const rtl = getComputedStyle(this).direction === "rtl";
-            const nextKey = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
-            const previousKey = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-            let next;
-            if (event.key === nextKey)
-                next = tabs[(index + 1) % tabs.length];
-            else if (event.key === previousKey)
-                next = tabs[(index - 1 + tabs.length) % tabs.length];
-            else if (event.key === "Home")
-                next = tabs[0];
-            else if (event.key === "End")
-                next = tabs.at(-1);
-            else if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                this.select(current, event);
-                return;
-            }
-            if (!next)
-                return;
-            event.preventDefault();
-            this.dataset.focusValue = next.value;
-            this.sync();
-            next.focus();
-        };
-        select(tab, sourceEvent) {
-            if (tab.disabled || this.hasAttribute("disabled"))
-                return;
-            if (!this.hasAttribute("selected-value"))
-                this.dataset.selectedValue = tab.value;
-            this.dataset.focusValue = tab.value;
-            this.sync();
-            this.dispatchEvent(new CustomEvent("spui-tab-select", { bubbles: true, composed: true, detail: { value: tab.value, valueType: tab.getAttribute("data-spui-tab-value-type") ?? undefined, sourceEvent, currentTarget: tab } }));
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0;--spui-tab-gap:4px}.list{display:flex;align-items:center;gap:var(--spui-tab-gap);min-width:0;overflow:auto;scrollbar-width:thin;border-block-end:1px solid var(--spui-tabs-divider,var(--spui-ui-stroke,#d1d1d1))}:host([vertical]) .list{flex-direction:column;align-items:stretch;border-block-end:0;border-inline-end:1px solid var(--spui-tabs-divider,var(--spui-ui-stroke,#d1d1d1))}::slotted(spui-tab){flex:none}@media(forced-colors:active){.list{border-color:CanvasText}}`;
-            const list = document.createElement("div");
-            list.className = "list";
-            list.setAttribute("role", "tablist");
-            list.append(document.createElement("slot"));
-            shadow.append(style, list);
-        }
-    }
-    customElements.define("spui-tab-list", SpuiTabList);
-    class SpuiTabPanel extends HTMLElement {
-        static observedAttributes = ["selected", "labelledby"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        get value() { return valueOf(this); }
-        sync() {
-            const selected = this.getAttribute("selected") === "true";
-            this.setAttribute("role", "tabpanel");
-            this.hidden = !selected;
-            this.setAttribute("tabindex", "0");
-            const labelledBy = this.getAttribute("labelledby");
-            if (labelledBy)
-                this.setAttribute("aria-labelledby", labelledBy);
-            else
-                this.removeAttribute("aria-labelledby");
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0;padding-block:16px;color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424))}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#78716c));outline-offset:2px}@media(forced-colors:active){:host(:focus-visible){outline-color:Highlight}}`;
-            shadow.append(style, document.createElement("slot"));
-        }
-    }
-    customElements.define("spui-tab-panel", SpuiTabPanel);
-    class SpuiTabs extends HTMLElement {
-        static observedAttributes = ["selected-value", "default-selected-value", "disabled"];
-        observer;
-        events;
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.observer = new MutationObserver(() => this.sync());
-            this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["value", "selected-value", "default-selected-value", "disabled"] });
-            this.events?.abort();
-            this.events = new AbortController();
-            this.addEventListener("spui-tab-selection-change", this.sync, { signal: this.events.signal });
-            queueMicrotask(() => this.sync());
-        }
-        disconnectedCallback() { this.observer?.disconnect(); this.events?.abort(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        sync = () => {
-            const list = [...this.querySelectorAll("spui-tab-list")].find(item => item.closest("spui-tabs") === this);
-            if (!list)
-                return;
-            if (this.hasAttribute("disabled")) {
-                if (!list.hasAttribute("disabled"))
-                    list.setAttribute("disabled", "");
-            }
-            else if (list.hasAttribute("disabled"))
-                list.removeAttribute("disabled");
-            if (this.hasAttribute("selected-value")) {
-                const selected = this.getAttribute("selected-value");
-                list.dataset.rootSelectedValue = selected;
-                if (list.getAttribute("selected-value") !== selected)
-                    list.setAttribute("selected-value", selected);
-            }
-            else if (list.hasAttribute("data-root-selected-value")) {
-                delete list.dataset.rootSelectedValue;
-                list.removeAttribute("selected-value");
-            }
-            else if (this.hasAttribute("default-selected-value") && !list.hasAttribute("default-selected-value"))
-                list.setAttribute("default-selected-value", this.getAttribute("default-selected-value"));
-            const selected = this.getAttribute("selected-value") ?? list.selectedValue ?? this.getAttribute("default-selected-value");
-            const tabs = [...this.querySelectorAll("spui-tab")].filter(tab => tab.closest("spui-tab-list") === list);
-            const panels = [...this.querySelectorAll("spui-tab-panel")].filter(panel => panel.closest("spui-tabs") === this);
-            for (const tab of tabs) {
-                const panel = panels.find(candidate => candidate.value === tab.value);
-                if (!tab.id)
-                    tab.id = `spui-tab-${crypto.randomUUID()}`;
-                if (panel) {
-                    if (!panel.id)
-                        panel.id = `spui-tabpanel-${crypto.randomUUID()}`;
-                    tab.setAttribute("aria-controls", panel.id);
-                    panel.setAttribute("labelledby", tab.id);
-                }
-            }
-            for (const panel of panels)
-                panel.setAttribute("selected", String(panel.value === selected));
-        };
-        render() { const shadow = this.attachShadow({ mode: "open" }); const style = document.createElement("style"); style.textContent = `${base}:host{display:block;min-width:0;color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424))}`; shadow.append(style, document.createElement("slot")); }
-    }
-    customElements.define("spui-tabs", SpuiTabs);
-}

package/dist/elements/tag-picker.d.ts

@@ -1,29 +0,0 @@
-export type TagPickerOpenChangeType = "click" | "keydown" | "input" | "focus" | "focusout" | "blur" | "pointerdown" | "programmatic";
-export type TagPickerOnOpenChangeData = {
-    open: boolean;
-    reason: string;
-} & ({
-    event: MouseEvent;
-    type: "click";
-} | {
-    event: KeyboardEvent;
-    type: "keydown";
-} | {
-    event: Event;
-    type: Exclude<TagPickerOpenChangeType, "click" | "keydown" | "programmatic">;
-} | {
-    event: Event;
-    type: "programmatic";
-});
-export type TagPickerOnOptionSelectData = {
-    value: string;
-    selectedOptions: string[];
-} & ({
-    event: MouseEvent;
-    type: "click";
-} | {
-    event: KeyboardEvent;
-    type: "keydown";
-});
-/** Searchable multi-select picker with native form association and light-DOM options. */
-export declare function defineTagPicker(): void;