@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/input.js

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

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

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

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

package/dist/elements/link.js

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

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