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

package/dist/elements/input.js

@@ -0,0 +1,255 @@
+import { base, rememberNativeFormControlDefaults, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
+/** Bare, form-associated input; pair it with Label or Field for an accessible name. */
+export function defineInput() {
+    if (customElements.get("spui-input"))
+        return;
+    class SpuiInput extends HTMLElement {
+        static formAssociated = true;
+        static observedAttributes = ["value", "type", "placeholder", "disabled", "required", "read-only", "name", "size", "appearance", "autocomplete", "inputmode", "min", "max", "step", "minlength", "maxlength", "pattern", "multiple", "accept", "alt", "capture", "checked", "default-checked", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "height", "list", "src", "width", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"];
+        internals;
+        currentValue = "";
+        dirty = false;
+        formDisabled = false;
+        customError = "";
+        boundInput;
+        slotInputDefaults;
+        handleInput = (event) => {
+            const input = this.input();
+            if (!input)
+                return;
+            this.currentValue = input.value;
+            this.dirty = true;
+            this.syncForm(input);
+            this.dispatchEvent(new CustomEvent("spui-input", { detail: { value: input.value, checked: input.checked, sourceEvent: event }, bubbles: true, composed: true }));
+        };
+        handleChange = () => {
+            const input = this.input();
+            if (input)
+                this.dispatchEvent(new CustomEvent("spui-change", { detail: { value: input.value }, bubbles: true, composed: true }));
+        };
+        constructor() {
+            super();
+            try {
+                this.internals = this.attachInternals();
+            }
+            catch { /* Native input remains usable where form-associated custom elements are unavailable. */ }
+        }
+        get value() { return this.input()?.value ?? this.currentValue; }
+        set value(value) { this.currentValue = String(value ?? ""); this.dirty = true; const input = this.input(); if (input && (input.type !== "file" || !this.currentValue))
+            input.value = this.currentValue; this.syncForm(input); }
+        get defaultValue() { return this.getAttribute("value") ?? this.input()?.defaultValue ?? ""; }
+        set defaultValue(value) { this.setAttribute("value", String(value ?? "")); }
+        get name() { return this.getAttribute("name") ?? ""; }
+        set name(value) { this.setAttribute("name", value); }
+        get type() { return this.input()?.type ?? this.getAttribute("type") ?? "text"; }
+        set type(value) { this.setAttribute("type", value); }
+        get checked() { return Boolean(this.input()?.checked); }
+        set checked(value) { const input = this.input(); if (input)
+            input.checked = Boolean(value);
+        else
+            this.toggleAttribute("checked", Boolean(value)); this.syncForm(input); }
+        get disabled() { return this.hasAttribute("disabled"); }
+        set disabled(value) { this.toggleAttribute("disabled", Boolean(value)); }
+        get required() { return this.hasAttribute("required"); }
+        set required(value) { this.toggleAttribute("required", Boolean(value)); }
+        get readOnly() { return this.hasAttribute("read-only"); }
+        set readOnly(value) { this.toggleAttribute("read-only", Boolean(value)); }
+        get form() { return this.internals?.form ?? null; }
+        get validity() { return this.internals?.validity ?? this.input()?.validity; }
+        get validationMessage() { return this.internals?.validationMessage ?? this.input()?.validationMessage ?? ""; }
+        get willValidate() { return this.internals?.willValidate ?? Boolean(this.input() && !this.input().disabled && !this.input().readOnly); }
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            const input = this.input();
+            if (!input)
+                return;
+            if (!this.dirty) {
+                if (this.hasAttribute("value")) {
+                    this.currentValue = this.defaultValue;
+                    if (input.type !== "file")
+                        input.value = this.currentValue;
+                }
+                else
+                    this.currentValue = input.type === "file" ? "" : input.value;
+            }
+            this.syncForm(input);
+        }
+        disconnectedCallback() { stopHostAccessibleNameSync(this); }
+        attributeChangedCallback(name, _oldValue, value) {
+            if (!this.isConnected || !this.shadowRoot)
+                return;
+            const input = this.input();
+            if (!input)
+                return;
+            if (name === "value") {
+                if (!this.dirty && input.type !== "file") {
+                    this.currentValue = value ?? "";
+                    input.value = this.currentValue;
+                    this.syncForm(input);
+                }
+                return;
+            }
+            if (name === "size" || name === "appearance")
+                this.shadowRoot.querySelector(".control").dataset[name] = value || (name === "size" ? "medium" : "outline");
+            else if (name === "type") {
+                try {
+                    input.type = value || "text";
+                }
+                catch {
+                    input.type = "text";
+                }
+            }
+            else if (name === "checked")
+                input.checked = value !== null || (!this.dirty && Boolean(this.slotInputDefaults?.checked));
+            else if (name === "default-checked") {
+                input.defaultChecked = value !== null || Boolean(this.slotInputDefaults?.defaultChecked);
+                if (!this.dirty)
+                    input.checked = value !== null || Boolean(this.slotInputDefaults?.checked);
+            }
+            else if (["placeholder", "autocomplete", "inputmode", "min", "max", "step", "minlength", "maxlength", "pattern", "multiple"].includes(name)) {
+                const target = name === "read-only" ? "readonly" : name;
+                if (value === null)
+                    input.removeAttribute(target);
+                else
+                    input.setAttribute(target, value);
+            }
+            else if (["accept", "alt", "capture", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "height", "list", "src", "width"].includes(name)) {
+                if (value === null)
+                    input.removeAttribute(name);
+                else
+                    input.setAttribute(name, value);
+            }
+            else if (["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"].includes(name)) {
+                if (value === null)
+                    input.removeAttribute(name);
+                else
+                    input.setAttribute(name, value);
+            }
+            this.syncInputSlot();
+        }
+        formDisabledCallback(disabled) { this.formDisabled = disabled; this.syncInputSlot(); }
+        formResetCallback() { this.dirty = false; const input = this.input(); this.currentValue = input?.type === "file" ? "" : this.defaultValue; if (input) {
+            input.value = this.currentValue;
+            input.checked = input.defaultChecked;
+            this.syncForm(input);
+        } }
+        formStateRestoreCallback(state) { if (typeof state === "string")
+            this.value = state; }
+        focus(options) { this.input()?.focus(options); }
+        select() { this.input()?.select(); }
+        checkValidity() { return this.internals?.checkValidity() ?? this.input()?.checkValidity() ?? true; }
+        reportValidity() { return this.internals?.reportValidity() ?? this.input()?.reportValidity() ?? true; }
+        setCustomValidity(message) { this.customError = message; this.syncForm(this.input()); }
+        input() {
+            const slotted = Array.from(this.children).find((element) => element instanceof HTMLInputElement && element.slot === "input");
+            return slotted ?? this.shadowRoot?.querySelector(".input-fallback") ?? undefined;
+        }
+        syncInputSlot() {
+            const input = this.input();
+            if (!input)
+                return;
+            const fallback = this.shadowRoot?.querySelector(".input-fallback");
+            if (fallback)
+                fallback.hidden = input !== fallback;
+            if (input !== fallback)
+                this.slotInputDefaults = rememberNativeFormControlDefaults(this.slotInputDefaults, input);
+            if (this.boundInput !== input) {
+                this.boundInput?.removeEventListener("input", this.handleInput);
+                this.boundInput?.removeEventListener("change", this.handleChange);
+                input.addEventListener("input", this.handleInput);
+                input.addEventListener("change", this.handleChange);
+                this.boundInput = input;
+            }
+            if (this.hasAttribute("name"))
+                input.removeAttribute("name");
+            for (const name of ["type", "placeholder", "autocomplete", "inputmode", "min", "max", "step", "minlength", "maxlength", "pattern", "multiple", "accept", "alt", "capture", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "height", "list", "src", "width", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
+                if (input.hasAttribute(name))
+                    continue;
+                const value = this.getAttribute(name);
+                if (value !== null)
+                    input.setAttribute(name, value);
+            }
+            const defaults = input === fallback ? undefined : this.slotInputDefaults;
+            input.disabled = this.disabled || this.formDisabled || Boolean(defaults?.disabled);
+            input.required = this.required || Boolean(defaults?.required);
+            input.readOnly = this.readOnly || Boolean(defaults?.readOnly);
+            if (this.hasAttribute("default-checked"))
+                input.defaultChecked = true;
+            if (this.hasAttribute("checked"))
+                input.checked = true;
+            if (!this.dirty && input.type !== "file" && this.hasAttribute("value"))
+                input.value = this.currentValue || this.defaultValue;
+            syncHostAccessibleName(this, input);
+            this.syncForm(input);
+        }
+        syncForm(input) {
+            if (!input)
+                return;
+            let value = input.disabled || this.formDisabled || ((input.type === "checkbox" || input.type === "radio") && !input.checked) ? null : input.value;
+            if (input.type === "file") {
+                value = null;
+                const files = input.disabled || this.formDisabled ? null : input.files;
+                if (files?.length && this.name) {
+                    const formData = new FormData();
+                    for (const file of Array.from(files))
+                        formData.append(this.name, file);
+                    value = formData;
+                }
+            }
+            this.internals?.setFormValue(value, input.type === "file" ? null : input.value);
+            const v = input.validity;
+            const flags = { badInput: v.badInput, patternMismatch: v.patternMismatch, rangeOverflow: v.rangeOverflow, rangeUnderflow: v.rangeUnderflow, stepMismatch: v.stepMismatch, tooLong: v.tooLong, tooShort: v.tooShort, typeMismatch: v.typeMismatch, valueMissing: v.valueMissing, customError: Boolean(this.customError) };
+            const message = this.customError || input.validationMessage;
+            try {
+                this.internals?.setValidity(input.validity.valid && !this.customError ? {} : flags, message, input);
+            }
+            catch { /* Native validation remains available inside the shadow root. */ }
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline-block;min-width:0;vertical-align:middle}.control{box-sizing:border-box;display:flex;align-items:center;gap:var(--spui-input-content-gap,8px);min-width:0;width:100%;border:1px solid var(--spui-input-border,var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886))));border-radius:var(--spui-input-radius,var(--spui-control-radius,4px));background:var(--spui-input-background,var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,#fff))));box-shadow:var(--spui-input-shadow,var(--spui-control-shadow,none));color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font-family:var(--spui-font-family,inherit);font-size:var(--fontSizeBase200,14px);transition:border-color var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),box-shadow var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}.control:focus-within{border-color:var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));box-shadow:0 0 0 1px var(--spui-focus-ring,var(--spui-ui-accent,#0078d4))}.control[data-size=small]{min-height:24px;font-size:var(--fontSizeBase100,12px)}.control[data-size=medium]{min-height:32px}.control[data-size=large]{min-height:40px;font-size:var(--fontSizeBase200,14px)}.control[data-appearance=underline]{border-width:0 0 1px;border-radius:0;box-shadow:none}.control[data-appearance=filled-darker],.control[data-appearance=filled-darker-shadow]{background:var(--spui-input-filled-darker,var(--spui-ui-surface-hover,var(--colorNeutralBackground3,#f0f0f0)));border-color:transparent}.control[data-appearance=filled-lighter],.control[data-appearance=filled-lighter-shadow]{background:var(--spui-input-filled-lighter,var(--spui-ui-canvas,var(--colorNeutralBackground1,#fafafa)));border-color:transparent}.control[data-appearance=filled-darker-shadow],.control[data-appearance=filled-lighter-shadow]{box-shadow:var(--spui-input-filled-shadow,var(--shadow2,0 1px 2px rgb(0 0 0 / 20%)))}input{box-sizing:border-box;flex:1;min-width:0;width:100%;height:100%;padding-inline:var(--spui-input-padding-inline,var(--spui-control-padding-inline,12px));border:0;outline:0;background:transparent;color:inherit;font:var(--spui-input-font,var(--spui-font-family,inherit));font-size:inherit}input::placeholder{color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));opacity:1}input:disabled{cursor:not-allowed;opacity:.55}.control:has(input:disabled){opacity:.65}slot[name=before],slot[name=after]{display:inline-flex;align-items:center;flex:none;color:var(--spui-input-content-color,var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161)))}slot[name=before]{padding-inline-start:12px}slot[name=after]{padding-inline-end:12px}:host([data-spui-appearance=glass]) .control{backdrop-filter:blur(12px) saturate(1.2)}@media(prefers-reduced-motion:reduce){.control{transition:none}}@media(forced-colors:active){.control{border-color:FieldText;background:Field;color:FieldText}.control:focus-within{outline:2px solid Highlight;outline-offset:2px}input::placeholder{color:GrayText}}`;
+            style.textContent += `slot[name=input]{display:contents}slot[name=input]::slotted(input){box-sizing:border-box;flex:1;min-width:0;width:100%;height:100%;padding-inline:var(--spui-input-padding-inline,var(--spui-control-padding-inline,12px));border:0;outline:0;background:transparent;color:inherit;font:var(--spui-input-font,var(--spui-font-family,inherit));font-size:inherit}slot[name=input]::slotted(input:disabled){cursor:not-allowed;opacity:.55}`;
+            style.textContent += `input[type=checkbox],input[type=radio],slot[name=input]::slotted(input[type=checkbox]),slot[name=input]::slotted(input[type=radio]){box-sizing:border-box;flex:none;width:16px;height:16px;padding:0}`;
+            const control = document.createElement("div");
+            control.className = "control";
+            control.part.add("control");
+            control.dataset.size = this.getAttribute("size") || "medium";
+            control.dataset.appearance = this.getAttribute("appearance") || "outline";
+            const before = document.createElement("slot");
+            before.name = "before";
+            before.setAttribute("aria-hidden", "true");
+            const input = document.createElement("input");
+            input.className = "input-fallback";
+            input.type = this.getAttribute("type") || "text";
+            if (input.type !== "file")
+                input.value = this.defaultValue;
+            input.placeholder = this.getAttribute("placeholder") || "";
+            input.disabled = this.disabled || this.formDisabled;
+            input.required = this.required;
+            input.readOnly = this.readOnly;
+            input.part.add("input");
+            for (const name of ["autocomplete", "inputmode", "min", "max", "step", "minlength", "maxlength", "pattern", "accept", "alt", "capture", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "height", "list", "src", "width", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
+                const value = this.getAttribute(name);
+                if (value !== null)
+                    input.setAttribute(name, value);
+            }
+            if (this.hasAttribute("multiple"))
+                input.multiple = true;
+            input.defaultChecked = this.hasAttribute("default-checked");
+            input.checked = this.hasAttribute("checked") || input.defaultChecked;
+            const inputSlot = document.createElement("slot");
+            inputSlot.name = "input";
+            inputSlot.part.add("input");
+            inputSlot.addEventListener("slotchange", () => this.syncInputSlot());
+            const after = document.createElement("slot");
+            after.name = "after";
+            after.setAttribute("aria-hidden", "true");
+            control.append(before, input, inputSlot, after);
+            shadow.append(style, control);
+            this.syncInputSlot();
+        }
+    }
+    customElements.define("spui-input", SpuiInput);
+}

package/dist/elements/label.d.ts

@@ -0,0 +1,15 @@
+export type LabelSize = "small" | "medium" | "large";
+export type LabelWeight = "regular" | "semibold";
+export type LabelOptions = {
+    htmlFor?: string;
+    size?: LabelSize;
+    weight?: LabelWeight;
+    required?: boolean | string | Node;
+    disabled?: boolean;
+    id?: string;
+    title?: string;
+};
+export declare function ensureLabelStyles(document: Document): void;
+export declare function getLabelStyle(size?: LabelSize, disabled?: boolean, weight?: LabelWeight): Record<string, string | number>;
+/** Create a real native label so `for` association and click-to-focus work across frameworks. */
+export declare function createLabel(content: string | Node, options?: LabelOptions): HTMLLabelElement;

package/dist/elements/label.js

@@ -0,0 +1,56 @@
+const styledDocuments = new WeakSet();
+export function ensureLabelStyles(document) {
+    if (styledDocuments.has(document))
+        return;
+    if (document.querySelector("style[data-spui-label-styles]")) {
+        styledDocuments.add(document);
+        return;
+    }
+    const style = document.createElement("style");
+    style.dataset.spuiLabelStyles = "";
+    style.textContent = "@media(forced-colors:active){.spui-label[data-disabled=true],.spui-label[data-disabled=true] .spui-label-required{color:GrayText!important}}";
+    (document.head ?? document.documentElement).append(style);
+    styledDocuments.add(document);
+}
+const sizes = {
+    small: ["200", "12px", "16px"], medium: ["300", "14px", "20px"], large: ["400", "16px", "22px"],
+};
+export function getLabelStyle(size = "medium", disabled = false, weight = "regular") {
+    const [token, fallback, line] = sizes[size];
+    return {
+        display: "inline-flex", alignItems: "baseline", gap: "0.25em",
+        fontFamily: "var(--spui-font-family,var(--fontFamilyBase,inherit))", fontSize: `var(--fontSizeBase${token},${fallback})`,
+        fontWeight: weight === "semibold" || size === "large" ? "var(--fontWeightSemibold,600)" : "var(--fontWeightRegular,400)", lineHeight: `var(--lineHeightBase${token},${line})`, cursor: disabled ? "default" : "pointer",
+        color: disabled ? "var(--spui-ui-foreground-disabled,var(--spui-semantic-disabled-text,var(--colorNeutralForegroundDisabled,#bdbdbd)))" : "var(--spui-ui-text,var(--spui-semantic-body-text,inherit))",
+    };
+}
+/** Create a real native label so `for` association and click-to-focus work across frameworks. */
+export function createLabel(content, options = {}) {
+    const label = document.createElement("label");
+    ensureLabelStyles(label.ownerDocument);
+    label.className = "spui-label";
+    if (options.htmlFor)
+        label.htmlFor = options.htmlFor;
+    if (options.id)
+        label.id = options.id;
+    if (options.title)
+        label.title = options.title;
+    label.dataset.size = options.size ?? "medium";
+    label.dataset.disabled = String(Boolean(options.disabled));
+    Object.assign(label.style, getLabelStyle(options.size, options.disabled, options.weight));
+    label.append(typeof content === "string" ? document.createTextNode(content) : content);
+    if (options.required) {
+        const marker = document.createElement("span");
+        marker.className = "spui-label-required";
+        marker.setAttribute("aria-hidden", "true");
+        if (options.required === true)
+            marker.textContent = "*";
+        else if (typeof options.required === "string")
+            marker.textContent = options.required;
+        else
+            marker.append(options.required);
+        Object.assign(marker.style, { color: options.disabled ? "var(--spui-ui-foreground-disabled,var(--spui-semantic-disabled-text,var(--colorNeutralForegroundDisabled,#bdbdbd)))" : "var(--spui-label-required-color,var(--colorPaletteRedForeground3,var(--spui-semantic-error-text,#c50f1f)))", paddingInlineStart: "var(--spui-label-required-gap,var(--spacingHorizontalXS,4px))" });
+        label.append(marker);
+    }
+    return label;
+}

package/dist/elements/link.d.ts

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

package/dist/elements/link.js

@@ -0,0 +1,92 @@
+import { base } from "./shared.js";
+const forwarded = ["href", "target", "rel", "download", "hreflang", "referrerpolicy", "title", "type", "media", "ping", "role", "aria-label", "aria-describedby", "aria-current", "tabindex"];
+const unsafeSchemes = /^(?:javascript|data|vbscript):/i;
+export function defineLink() {
+    if (customElements.get("spui-link"))
+        return;
+    class SpuiLink extends HTMLElement {
+        static observedAttributes = [...forwarded, "disabled", "disabled-focusable", "appearance", "underline", "inline", "as"];
+        connectedCallback() { if (!this.shadowRoot)
+            this.render(); this.sync(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.sync(); }
+        sync() {
+            const root = this.shadowRoot?.querySelector("a,button,span");
+            if (!root)
+                return;
+            const href = this.getAttribute("href")?.trim() ?? "";
+            const as = this.getAttribute("as") || (href ? "a" : "button");
+            if (root.localName !== as) {
+                this.renderRoot(as);
+                return;
+            }
+            for (const name of forwarded) {
+                const value = this.getAttribute(name);
+                if (value === null)
+                    root.removeAttribute(name);
+                else
+                    root.setAttribute(name, value);
+            }
+            if (as !== "a")
+                root.removeAttribute("href");
+            const disabled = this.hasAttribute("disabled") || (as === "a" && (!href || unsafeSchemes.test(href)));
+            if (root instanceof HTMLAnchorElement && (disabled || as !== "a"))
+                root.removeAttribute("href");
+            if (as === "span")
+                root.setAttribute("role", this.getAttribute("role") || "button");
+            if (as === "a" && (disabled || this.hasAttribute("disabled-focusable")))
+                root.setAttribute("role", this.getAttribute("role") || "link");
+            const disabledFocusable = this.hasAttribute("disabled") && this.hasAttribute("disabled-focusable") && (as !== "a" || (!!href && !unsafeSchemes.test(href)));
+            if (as === "span" || as === "a")
+                root.tabIndex = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : disabled && !disabledFocusable ? -1 : 0;
+            else if (this.hasAttribute("tabindex"))
+                root.tabIndex = Number(this.getAttribute("tabindex"));
+            if (disabled || this.hasAttribute("disabled-focusable"))
+                root.setAttribute("aria-disabled", "true");
+            else
+                root.removeAttribute("aria-disabled");
+            if (root instanceof HTMLButtonElement)
+                root.disabled = disabled && !disabledFocusable;
+            if (root instanceof HTMLButtonElement && !root.hasAttribute("type"))
+                root.type = "button";
+            if (disabled)
+                root.removeAttribute("target");
+            if (!disabled && this.getAttribute("target")?.toLowerCase() === "_blank") {
+                const rel = new Set((this.getAttribute("rel") ?? "").split(/\s+/).filter(Boolean));
+                rel.add("noopener");
+                rel.add("noreferrer");
+                root.setAttribute("rel", [...rel].join(" "));
+            }
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline;color:var(--spui-link-color,var(--spui-semantic-link,var(--colorBrandForeground1,#115ea3)))}a,button,span{box-sizing:border-box;background:transparent;border:0;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer;padding:0;margin:0}a,span{display:inline}button{display:inline}a:visited{color:var(--spui-link-visited,var(--spui-semantic-link-visited,var(--colorBrandForeground2,#4f52b2))))}a:hover,button:hover,span:hover{text-decoration:underline}a:focus-visible,button:focus-visible,span:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#005a9e));outline-offset:2px} [aria-disabled=true]{color:var(--spui-ui-foreground-disabled,var(--spui-ui-muted,#777));cursor:not-allowed;text-decoration:none}[aria-disabled=true]:hover,[aria-disabled=true]:active{text-decoration:none}@media(forced-colors:active){[aria-disabled=true]{color:GrayText}}:host([underline=always]) a,:host([underline=always]) button,:host([underline=always]) span{text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:2px}:host([underline=hover]) a,:host([underline=hover]) button,:host([underline=hover]) span{text-decoration:none}:host([underline=hover]) a:hover,:host([underline=hover]) button:hover,:host([underline=hover]) span:hover,:host([underline=hover]) a:focus-visible,:host([underline=hover]) button:focus-visible,:host([underline=hover]) span:focus-visible,:host([inline]) a,:host([inline]) button,:host([inline]) span{text-decoration:underline}:host([appearance=subtle]){color:var(--spui-ui-text,var(--spui-semantic-body-text,#323130))}:host([appearance=subtle]) a:visited{color:inherit}`;
+            shadow.append(style);
+            this.renderRoot(this.getAttribute("as") || (this.getAttribute("href") ? "a" : "button"));
+            this.addEventListener("click", event => { if (this.isDisabled()) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            } }, true);
+            this.addEventListener("keydown", event => { if (this.isDisabled() && (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+            else if (this.shadowRoot?.querySelector("span") && (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                this.shadowRoot.querySelector("span")?.click();
+            } }, true);
+        }
+        isDisabled() { const href = this.getAttribute("href")?.trim() ?? ""; return this.hasAttribute("disabled") || this.hasAttribute("disabled-focusable") || (this.getAttribute("as") === "a" || (!this.hasAttribute("as") && !!href)) && (!href || unsafeSchemes.test(href)); }
+        renderRoot(as) {
+            if (!this.shadowRoot)
+                return;
+            const root = document.createElement(["a", "button", "span"].includes(as) ? as : "span");
+            root.part.add("link");
+            root.append(document.createElement("slot"));
+            this.shadowRoot.querySelector("a,button,span")?.replaceWith(root) ?? this.shadowRoot.append(root);
+            this.sync();
+        }
+    }
+    customElements.define("spui-link", SpuiLink);
+}

package/dist/elements/list.d.ts

@@ -0,0 +1,19 @@
+export type ListItemValue = string | number;
+export type ListSelectionMode = "single" | "multiselect";
+export type ListNavigationMode = "items" | "composite";
+export type ListSelectionChangeData = {
+    event: Event;
+    type: "change";
+    selectedItems: ListItemValue[];
+};
+export type ListItemActionEvent = CustomEvent<{
+    originalEvent: Event;
+    value: ListItemValue;
+}>;
+export type ListItemActionData = {
+    event: ListItemActionEvent;
+    type: "ListItemAction";
+    value: ListItemValue;
+};
+export declare function defineListItem(): void;
+export declare function defineList(): void;