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

package/dist/elements/table.js

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

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

package/dist/elements/tabs.js

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

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