@spfx-fast/sharepoint-ui 0.4.3 → 0.5.0

package/dist/elements/search.d.ts

@@ -1,3 +0,0 @@
-export type SearchSize = "small" | "medium" | "large";
-export type SearchAppearance = "outline" | "underline" | "filled-darker" | "filled-lighter" | "filled-darker-shadow" | "filled-lighter-shadow";
-export declare function defineSearchBox(): void;

package/dist/elements/search.js

@@ -1,200 +0,0 @@
-import { base, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
-export function defineSearchBox() {
-    if (customElements.get("spui-search-box"))
-        return;
-    class SpuiSearchBox extends HTMLElement {
-        static formAssociated = true;
-        static observedAttributes = ["label", "value", "placeholder", "type", "disabled", "required", "read-only", "name", "autocomplete", "maxlength", "minlength", "pattern", "inputmode", "size", "appearance", "clear-label", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "aria-required"];
-        #internals = this.attachInternals();
-        #value = "";
-        #dirty = false;
-        #formDisabled = false;
-        get form() { return this.#internals.form; }
-        get value() { return this.#value; }
-        set value(value) { this.setValue(String(value ?? ""), true); }
-        get defaultValue() { return this.getAttribute("value") ?? ""; }
-        set defaultValue(value) { this.setAttribute("value", value); }
-        get name() { return this.getAttribute("name") ?? ""; }
-        set name(value) { this.setAttribute("name", value); }
-        connectedCallback() {
-            if (!this.#dirty)
-                this.#value = this.getAttribute("value") ?? "";
-            this.render();
-        }
-        disconnectedCallback() { stopHostAccessibleNameSync(this); }
-        attributeChangedCallback(name, _oldValue, value) {
-            if (!this.isConnected || !this.shadowRoot?.querySelector("input"))
-                return;
-            if (name === "value") {
-                if (!this.#dirty)
-                    this.setValue(value ?? "", false);
-                return;
-            }
-            if (name === "label") {
-                const label = this.shadowRoot?.querySelector("label");
-                if (label)
-                    label.textContent = value ?? "";
-            }
-            if (name === "placeholder")
-                this.input().placeholder = value ?? "";
-            if (name === "type")
-                this.input().type = value || "search";
-            if (name === "disabled")
-                this.input().disabled = value !== null || this.#formDisabled;
-            if (name === "required") {
-                this.input().required = value !== null;
-                this.syncFormValue();
-            }
-            if (name === "read-only")
-                this.input().readOnly = value !== null;
-            if (["autocomplete", "maxlength", "minlength", "pattern", "inputmode"].includes(name)) {
-                if (value === null)
-                    this.input().removeAttribute(name);
-                else
-                    this.input().setAttribute(name, value);
-            }
-            if (name === "aria-label" || name === "aria-labelledby" || name === "aria-description" || name === "aria-describedby" || name === "aria-invalid" || name === "aria-required") {
-                if (value === null)
-                    this.input().removeAttribute(name);
-                else
-                    this.input().setAttribute(name, value);
-            }
-            if (name === "size")
-                this.shadowRoot.querySelector(".control").dataset.size = value || "medium";
-            if (name === "appearance")
-                this.shadowRoot.querySelector(".control").dataset.appearance = value || "outline";
-            if (name === "clear-label")
-                this.shadowRoot.querySelector("[part=clear-button]").setAttribute("aria-label", value || "Clear search");
-            if (name === "disabled" || name === "read-only")
-                this.setValue(this.#value, false);
-            this.syncFormValue();
-        }
-        formResetCallback() { this.#dirty = false; this.setValue(this.defaultValue, false); }
-        formStateRestoreCallback(state) { if (typeof state === "string")
-            this.setValue(state, false); }
-        formDisabledCallback(disabled) {
-            this.#formDisabled = disabled;
-            const input = this.shadowRoot?.querySelector("input");
-            if (input)
-                input.disabled = disabled || this.hasAttribute("disabled");
-            const clear = this.shadowRoot?.querySelector("[part=clear-button]");
-            if (clear)
-                clear.hidden = !this.#value || Boolean(input?.disabled) || Boolean(input?.readOnly);
-        }
-        input() { return this.shadowRoot.querySelector("input"); }
-        setValue(value, dirty) {
-            this.#value = value;
-            if (dirty)
-                this.#dirty = true;
-            const input = this.shadowRoot?.querySelector("input");
-            if (input && input.value !== value)
-                input.value = value;
-            const clear = this.shadowRoot?.querySelector("[part=clear-button]");
-            if (clear)
-                clear.hidden = !value || Boolean(input?.disabled) || Boolean(input?.readOnly);
-            this.syncFormValue();
-        }
-        syncFormValue() {
-            if (!this.#internals)
-                return;
-            const input = this.shadowRoot?.querySelector("input");
-            if (input)
-                syncHostAccessibleName(this, input);
-            this.#internals.setFormValue(this.#value, this.#value);
-            if (input && !input.validity.valid) {
-                const invalidFlags = ["badInput", "customError", "patternMismatch", "rangeOverflow", "rangeUnderflow", "stepMismatch", "tooLong", "tooShort", "typeMismatch", "valueMissing"];
-                const flags = {};
-                for (const flag of invalidFlags)
-                    if (input.validity[flag])
-                        flags[flag] = true;
-                this.#internals.setValidity(flags, input.validationMessage, input);
-            }
-            else
-                this.#internals.setValidity({});
-        }
-        render() {
-            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
-            const label = document.createElement("label");
-            label.part.add("label");
-            label.htmlFor = "search-input";
-            label.textContent = this.getAttribute("label") ?? "";
-            const control = document.createElement("div");
-            control.className = "control";
-            control.dataset.size = this.getAttribute("size") || "medium";
-            control.dataset.appearance = this.getAttribute("appearance") || "outline";
-            const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            icon.setAttribute("viewBox", "0 0 20 20");
-            icon.setAttribute("aria-hidden", "true");
-            icon.setAttribute("focusable", "false");
-            icon.setAttribute("part", "search-icon");
-            icon.innerHTML = '<circle cx="8.5" cy="8.5" r="5.75"/><path d="m13 13 4.25 4.25"/>';
-            const contentBefore = document.createElement("slot");
-            contentBefore.name = "content-before";
-            contentBefore.append(icon);
-            const input = document.createElement("input");
-            input.type = this.getAttribute("type") || "search";
-            input.value = this.#value;
-            input.placeholder = this.getAttribute("placeholder") ?? "";
-            input.disabled = this.#formDisabled || this.hasAttribute("disabled");
-            input.required = this.hasAttribute("required");
-            input.readOnly = this.hasAttribute("read-only");
-            input.id = "search-input";
-            input.part.add("control");
-            for (const name of ["autocomplete", "maxlength", "minlength", "pattern", "inputmode"]) {
-                const value = this.getAttribute(name);
-                if (value !== null)
-                    input.setAttribute(name, value);
-            }
-            for (const name of ["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "aria-required"]) {
-                const value = this.getAttribute(name);
-                if (value !== null)
-                    input.setAttribute(name, value);
-            }
-            const clear = document.createElement("button");
-            clear.type = "button";
-            clear.className = "dismiss";
-            clear.part.add("clear-button");
-            clear.setAttribute("aria-label", this.getAttribute("clear-label") || "Clear search");
-            clear.hidden = !this.#value || input.disabled || input.readOnly;
-            const dismiss = document.createElement("slot");
-            dismiss.name = "dismiss";
-            const dismissIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            dismissIcon.setAttribute("viewBox", "0 0 16 16");
-            dismissIcon.setAttribute("aria-hidden", "true");
-            dismissIcon.setAttribute("focusable", "false");
-            dismissIcon.innerHTML = '<path d="m4 4 8 8m0-8-8 8"/>';
-            dismiss.append(dismissIcon);
-            clear.append(dismiss);
-            clear.addEventListener("click", event => {
-                this.setValue("", true);
-                input.focus();
-                this.dispatchEvent(new CustomEvent("spui-input", { bubbles: true, composed: true, detail: { value: "", reason: "clear", sourceEvent: event } }));
-                this.dispatchEvent(new CustomEvent("spui-clear", { bubbles: true, composed: true }));
-            });
-            input.addEventListener("input", event => {
-                this.setValue(input.value, true);
-                this.dispatchEvent(new CustomEvent("spui-input", { bubbles: true, composed: true, detail: { value: input.value, reason: "input", sourceEvent: event } }));
-            });
-            input.addEventListener("keydown", event => {
-                if (event.key !== "Enter" || event.isComposing)
-                    return;
-                this.dispatchEvent(new CustomEvent("spui-search", { bubbles: true, composed: true, detail: { value: input.value } }));
-                if (this.#internals.form) {
-                    event.preventDefault();
-                    this.#internals.form.requestSubmit();
-                }
-            });
-            const afterSlot = document.createElement("slot");
-            afterSlot.name = "content-after";
-            const after = document.createElement("span");
-            after.className = "content-after";
-            after.append(afterSlot, clear);
-            control.append(contentBefore, input, after);
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px);min-width:0}label:empty{display:none}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}.control{box-sizing:border-box;display:flex;align-items:center;gap:8px;min-width:0;min-height:var(--spui-control-height,36px);padding-inline:var(--spui-control-padding-inline,12px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit))}.control[data-size=small]{min-height:28px;font-size:13px}.control[data-size=large]{min-height:44px;font-size:16px}.control[data-appearance=underline]{border:0;border-bottom:1px solid var(--spui-control-border,var(--spui-ui-stroke,#8a8886));border-radius:0}.control[data-appearance=filled-darker],.control[data-appearance=filled-darker-shadow]{border-color:transparent;background:var(--spui-input-filled-darker,var(--spui-ui-surface-hover,var(--spui-semantic-input-background,#f3f2f1)))}.control[data-appearance=filled-lighter],.control[data-appearance=filled-lighter-shadow]{border-color:transparent;background:var(--spui-input-filled-lighter,var(--spui-base-surface,var(--spui-ui-canvas,#faf9f8)))}.control[data-appearance=filled-darker-shadow],.control[data-appearance=filled-lighter-shadow]{box-shadow:var(--spui-input-filled-shadow,var(--spui-control-shadow,var(--shadow2,0 1px 2px rgb(0 0 0 / 20%))))}.control:focus-within{border-color:var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)))}.control:has(input[aria-invalid]:not([aria-invalid=false])){border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))}.control:focus-within[data-appearance=underline]{border-bottom-width:2px}slot[name=content-before],.content-after{display:inline-flex;align-items:center;flex:none;gap:4px}slot[name=content-after]{display:inline-flex;align-items:center;gap:4px}input{box-sizing:border-box;flex:1;min-width:0;width:100%;padding:0;border:0;outline:0;background:transparent;color:inherit;font:inherit}input:focus-visible{outline:0}input::placeholder{color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));opacity:1}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}svg[part=search-icon]{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dismiss{appearance:none;display:grid;place-items:center;flex:none;width:28px;height:28px;padding:5px;border:0;border-radius:var(--spui-control-radius,4px);background:transparent;color:inherit;font:inherit;cursor:pointer}.dismiss[hidden]{display:none}.dismiss:hover{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.dismiss:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}.dismiss svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}@media(forced-colors:active){.control{border-color:FieldText}.control:focus-within{border-color:Highlight}.control:has(input[aria-invalid]:not([aria-invalid=false])){border-color:CanvasText}.control:has(input[aria-invalid]:not([aria-invalid=false])):focus-within{border-color:Highlight}.dismiss:focus-visible{outline-color:Highlight}}`;
-            shadow.replaceChildren(style, label, control);
-            this.syncFormValue();
-        }
-    }
-    customElements.define("spui-search-box", SpuiSearchBox);
-}

package/dist/elements/select.d.ts

@@ -1,6 +0,0 @@
-export type SelectAppearance = "outline" | "underline" | "filled-darker" | "filled-lighter";
-export type SelectSize = "small" | "medium" | "large";
-export type SelectChangeData = {
-    value: string;
-};
-export declare function defineSelect(): void;

package/dist/elements/select.js

@@ -1,291 +0,0 @@
-import { base, rememberNativeFormControlDefaults, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
-export function defineSelect() {
-    if (customElements.get("spui-select"))
-        return;
-    class SpuiSelect extends HTMLElement {
-        static formAssociated = true;
-        static observedAttributes = ["label", "value", "default-value", "auto-complete", "autofocus", "tabindex", "appearance", "size", "disabled", "required", "name", "multiple", "form", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"];
-        internals;
-        observer;
-        currentValue;
-        boundSelect;
-        formDisabled = false;
-        slotSelectDefaults;
-        initialSelectedValues;
-        requestedTabIndex;
-        slotSelectTabIndex;
-        slotSelectTabIndexCaptured = false;
-        normalizingTabIndex = false;
-        get form() { return this.internals?.form ?? null; }
-        cloneOptionContent() {
-            return [...this.children]
-                .filter(child => child.localName === "option" || child.localName === "optgroup")
-                .map(child => child.cloneNode(true));
-        }
-        handleSelectChange = (event) => {
-            const select = event.currentTarget;
-            this.currentValue = select.value;
-            this.syncFormValue(select);
-            this.dispatchEvent(new CustomEvent("spui-change", { detail: { value: select.value, sourceEvent: event }, bubbles: true, composed: true }));
-        };
-        getSelect() {
-            const slot = this.shadowRoot?.querySelector('slot[name="select"]');
-            const assigned = slot?.assignedElements().find((element) => element instanceof HTMLSelectElement);
-            return assigned ?? this.shadowRoot?.querySelector(".select-fallback") ?? null;
-        }
-        constructor() {
-            super();
-            try {
-                this.internals = this.attachInternals();
-            }
-            catch { /* Form association is an enhancement where ElementInternals is unavailable. */ }
-        }
-        connectedCallback() {
-            this.render();
-            if (this.hasAttribute("autofocus"))
-                this.getSelect()?.focus();
-            this.observer = new MutationObserver(records => {
-                if (records.some(record => !this.boundSelect?.contains(record.target)))
-                    this.syncOptions();
-            });
-            this.observer.observe(this, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ["value", "label", "disabled", "selected"] });
-        }
-        disconnectedCallback() { this.observer?.disconnect(); stopHostAccessibleNameSync(this); }
-        attributeChangedCallback(name, _oldValue, value) {
-            if (name === "tabindex" && !this.normalizingTabIndex)
-                this.requestedTabIndex = value === null ? undefined : Number(value);
-            if (this.normalizingTabIndex || !this.isConnected)
-                return;
-            const select = this.getSelect();
-            if (!select)
-                return;
-            if (name === "tabindex") {
-                this.syncTabIndex(select);
-                return;
-            }
-            if (name === "autofocus") {
-                if (value !== null)
-                    select.focus();
-                return;
-            }
-            if (name === "value")
-                this.currentValue = value ?? "";
-            if (name === "default-value" && this.currentValue === undefined && this.getAttribute("value") === null)
-                this.currentValue = value ?? "";
-            if (name === "label") {
-                const label = this.shadowRoot?.querySelector("label");
-                if (label)
-                    label.textContent = value ?? "";
-            }
-            if (name === "disabled")
-                select.disabled = this.formDisabled || this.hasAttribute("disabled") || Boolean(this.slotSelectDefaults?.disabled);
-            if (name === "required")
-                select.required = this.hasAttribute("required") || Boolean(this.slotSelectDefaults?.required);
-            if (name === "multiple")
-                select.multiple = this.hasAttribute("multiple") || Boolean(this.slotSelectDefaults?.multiple);
-            if (name === "form")
-                value === null ? select.removeAttribute("form") : select.setAttribute("form", value);
-            if (name === "auto-complete")
-                value === null ? select.removeAttribute("autocomplete") : select.setAttribute("autocomplete", value);
-            if (name === "aria-label" || name === "aria-labelledby" || name === "aria-description" || name === "aria-describedby" || name === "aria-invalid")
-                value === null ? select.removeAttribute(name) : select.setAttribute(name, value);
-            if (name === "value")
-                select.value = this.currentValue ?? "";
-            if (name === "default-value" && this.currentValue !== undefined)
-                select.value = this.currentValue;
-            if (name === "appearance" || name === "size") {
-                this.render();
-                return;
-            }
-            this.syncFormValue(select);
-        }
-        focus(options) { this.getSelect()?.focus(options); }
-        blur() { this.getSelect()?.blur(); }
-        get value() { return this.currentValue ?? this.getAttribute("value") ?? this.getSelect()?.value ?? ""; }
-        set value(value) {
-            this.currentValue = value;
-            const select = this.getSelect();
-            if (select) {
-                select.value = value;
-                this.syncFormValue(select);
-            }
-        }
-        get defaultValue() { return this.getAttribute("default-value") ?? ""; }
-        set defaultValue(value) { this.setAttribute("default-value", value); }
-        formDisabledCallback(disabled) {
-            this.formDisabled = disabled;
-            this.syncOptions();
-        }
-        formResetCallback() {
-            const select = this.getSelect();
-            if (select?.multiple) {
-                this.currentValue = undefined;
-                for (const option of [...select.options])
-                    option.selected = this.initialSelectedValues?.has(option.value) ?? option.defaultSelected;
-                this.syncFormValue(select);
-                return;
-            }
-            const options = [...this.querySelectorAll("option")];
-            this.value = this.getAttribute("value") ?? this.getAttribute("default-value") ?? this.initialSelectedValues?.values().next().value ?? options.find(option => option.hasAttribute("selected"))?.value ?? options[0]?.value ?? "";
-        }
-        formStateRestoreCallback(state) { if (typeof state === "string")
-            this.value = state; }
-        syncFormValue(select) {
-            syncHostAccessibleName(this, select);
-            const value = select.multiple
-                ? [...select.selectedOptions].reduce((data, option) => { const name = this.getAttribute("name"); if (name)
-                    data.append(name, option.value); return data; }, new FormData())
-                : select.value;
-            this.internals?.setFormValue(value);
-            try {
-                this.internals?.setValidity(select.validity.valid ? {} : { valueMissing: select.validity.valueMissing }, select.validationMessage, select);
-            }
-            catch { /* Older engines can omit custom-element validity anchors. */ }
-        }
-        syncTabIndex(select) {
-            const fallback = select.classList.contains("select-fallback");
-            if (!fallback && !this.slotSelectTabIndexCaptured) {
-                this.slotSelectTabIndex = select.tabIndex;
-                this.slotSelectTabIndexCaptured = true;
-            }
-            select.tabIndex = this.requestedTabIndex ?? (fallback ? 0 : this.slotSelectTabIndex ?? select.tabIndex);
-            if (this.requestedTabIndex !== undefined && this.requestedTabIndex !== -1 && this.getAttribute("tabindex") !== "-1") {
-                this.normalizingTabIndex = true;
-                this.setAttribute("tabindex", "-1");
-                this.normalizingTabIndex = false;
-            }
-        }
-        syncOptions() {
-            const select = this.getSelect();
-            if (!select)
-                return;
-            if (!select.classList.contains("select-fallback"))
-                this.slotSelectDefaults = rememberNativeFormControlDefaults(this.slotSelectDefaults, select);
-            const defaults = select.classList.contains("select-fallback") ? undefined : this.slotSelectDefaults;
-            if (select.classList.contains("select-fallback")) {
-                const priorValue = this.currentValue ?? select.value;
-                const sourceOptions = [...this.querySelectorAll("option")];
-                const sourceSelectedValues = new Set(sourceOptions.filter(option => option.selected).map(option => option.value));
-                if (!this.initialSelectedValues && sourceOptions.length > 0)
-                    this.initialSelectedValues = sourceSelectedValues;
-                const priorValues = select.multiple ? new Set([...select.selectedOptions].map(option => option.value)) : undefined;
-                select.replaceChildren(...this.cloneOptionContent());
-                select.disabled = this.formDisabled || this.hasAttribute("disabled");
-                select.required = this.hasAttribute("required");
-                select.multiple = this.hasAttribute("multiple");
-                if (this.hasAttribute("form"))
-                    select.setAttribute("form", this.getAttribute("form"));
-                else
-                    select.removeAttribute("form");
-                if (this.hasAttribute("auto-complete"))
-                    select.setAttribute("autocomplete", this.getAttribute("auto-complete"));
-                else
-                    select.removeAttribute("autocomplete");
-                for (const name of ["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
-                    const value = this.getAttribute(name);
-                    if (value === null)
-                        select.removeAttribute(name);
-                    else
-                        select.setAttribute(name, value);
-                }
-                if (this.getAttribute("label") && !select.hasAttribute("aria-label") && !select.hasAttribute("aria-labelledby"))
-                    select.setAttribute("aria-label", this.getAttribute("label"));
-                if (priorValues) {
-                    const selectedValues = priorValues.size > 0 ? priorValues : this.initialSelectedValues ?? sourceSelectedValues;
-                    for (const option of [...select.options])
-                        option.selected = selectedValues.has(option.value);
-                }
-                else if (this.initialSelectedValues?.size) {
-                    select.value = this.initialSelectedValues.values().next().value ?? priorValue;
-                }
-                else {
-                    select.value = priorValue;
-                }
-            }
-            else {
-                select.disabled = this.formDisabled || this.hasAttribute("disabled") || Boolean(defaults?.disabled);
-                select.required = this.hasAttribute("required") || Boolean(defaults?.required);
-                select.multiple = this.hasAttribute("multiple") || Boolean(defaults?.multiple);
-                if (this.hasAttribute("auto-complete") && !select.hasAttribute("autocomplete"))
-                    select.setAttribute("autocomplete", this.getAttribute("auto-complete"));
-                if (this.hasAttribute("name"))
-                    select.removeAttribute("name");
-                for (const name of ["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
-                    if (select.hasAttribute(name))
-                        continue;
-                    const value = this.getAttribute(name);
-                    if (value !== null)
-                        select.setAttribute(name, value);
-                }
-                if (this.getAttribute("label") && !select.hasAttribute("aria-label") && !select.hasAttribute("aria-labelledby"))
-                    select.setAttribute("aria-label", this.getAttribute("label"));
-                if (this.currentValue !== undefined || this.hasAttribute("value") || this.hasAttribute("default-value"))
-                    select.value = this.currentValue ?? this.getAttribute("value") ?? this.getAttribute("default-value") ?? "";
-            }
-            this.syncTabIndex(select);
-            if (this.boundSelect !== select) {
-                this.boundSelect?.removeEventListener("change", this.handleSelectChange);
-                select.addEventListener("change", this.handleSelectChange);
-                this.boundSelect = select;
-            }
-            this.syncFormValue(select);
-        }
-        render() {
-            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
-            const id = `select-${crypto.randomUUID()}`;
-            const label = document.createElement("label");
-            label.htmlFor = id;
-            label.textContent = this.getAttribute("label") ?? "";
-            label.part.add("label");
-            const select = document.createElement("select");
-            select.className = "select-fallback";
-            select.id = id;
-            select.part.add("control");
-            select.disabled = this.hasAttribute("disabled");
-            select.required = this.hasAttribute("required");
-            select.multiple = this.hasAttribute("multiple");
-            if (this.hasAttribute("form"))
-                select.setAttribute("form", this.getAttribute("form"));
-            if (this.hasAttribute("auto-complete"))
-                select.setAttribute("autocomplete", this.getAttribute("auto-complete"));
-            for (const name of ["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
-                const value = this.getAttribute(name);
-                if (value !== null)
-                    select.setAttribute(name, value);
-            }
-            select.append(...this.cloneOptionContent());
-            if (this.currentValue !== undefined || this.hasAttribute("value") || this.hasAttribute("default-value"))
-                select.value = this.currentValue ?? this.getAttribute("value") ?? this.getAttribute("default-value") ?? "";
-            const control = document.createElement("span");
-            control.className = "control";
-            const selectSlot = document.createElement("slot");
-            selectSlot.name = "select";
-            selectSlot.part.add("select");
-            selectSlot.append(select);
-            selectSlot.addEventListener("slotchange", () => this.syncOptions());
-            const icon = document.createElement("slot");
-            icon.name = "icon";
-            icon.part.add("icon");
-            icon.setAttribute("aria-hidden", "true");
-            const fallbackIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            fallbackIcon.setAttribute("viewBox", "0 0 20 20");
-            fallbackIcon.setAttribute("width", "20");
-            fallbackIcon.setAttribute("height", "20");
-            fallbackIcon.setAttribute("fill", "none");
-            fallbackIcon.setAttribute("aria-hidden", "true");
-            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            path.setAttribute("d", "m5 7.5 5 5 5-5");
-            path.setAttribute("stroke", "currentColor");
-            path.setAttribute("stroke-width", "1.5");
-            fallbackIcon.append(path);
-            icon.append(fallbackIcon);
-            control.append(selectSlot, icon);
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px)}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}.control{position:relative;min-width:0}select{box-sizing:border-box;width:100%;min-height:var(--spui-control-height,36px);padding-inline:var(--spui-control-padding-inline,12px);padding-inline-end:36px;appearance:none;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit}:host([size=small]) select{min-height:24px;font-size:var(--spui-text-font-size-small,12px)}:host([size=large]) select{min-height:40px;font-size:var(--spui-text-font-size-large,18px)}:host([appearance=underline]) select{border-width:0 0 1px;border-radius:0}:host([appearance=filled-darker]) select{background:var(--colorNeutralBackground3,var(--spui-ui-surface-sunken,#f0f0f0));border-color:transparent}:host([appearance=filled-lighter]) select{background:var(--colorNeutralBackground2,var(--spui-ui-surface-hover,#f5f5f5));border-color:transparent}slot[name=icon]{position:absolute;inset-inline-end:8px;top:50%;display:grid;place-items:center;width:20px;height:20px;transform:translateY(-50%);color:var(--spui-ui-muted,var(--spui-ui-text,#424242));pointer-events:none}slot[name=icon]::slotted(*){width:20px;height:20px}select:focus-visible{border-width:2px;border-color:var(--spui-focus-ring,var(--colorStrokeFocus2,#005a9e));outline:0}:host([appearance=underline]) select:focus-visible{border-width:0 0 2px}select[aria-invalid]:not([aria-invalid=false]){border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))}select:disabled{opacity:.55}@media(forced-colors:active){select{border-color:FieldText}slot[name=icon]{color:ButtonText}select:focus-visible{border-color:Highlight;border-width:2px;outline:0}select[aria-invalid]:not([aria-invalid=false]){border-color:CanvasText}select[aria-invalid]:not([aria-invalid=false]):focus-visible{border-color:Highlight}:host([appearance=underline]) select:focus-visible{border-width:0 0 2px}}`;
-            style.textContent += `slot[name=select]{display:block}slot[name=select]::slotted(select){box-sizing:border-box;width:100%;min-height:var(--spui-control-height,36px);padding-inline:var(--spui-control-padding-inline,12px);padding-inline-end:36px;appearance:none;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--colorNeutralStroke1,#8a8886)));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,inherit);font:inherit}:host([size=small]) slot[name=select]::slotted(select){min-height:24px;font-size:var(--spui-text-font-size-small,12px)}:host([size=large]) slot[name=select]::slotted(select){min-height:40px;font-size:var(--spui-text-font-size-large,18px)}:host([appearance=underline]) slot[name=select]::slotted(select){border-width:0 0 1px;border-radius:0}:host([appearance=filled-darker]) slot[name=select]::slotted(select){background:var(--colorNeutralBackground3,var(--spui-ui-surface-sunken,#f0f0f0));border-color:transparent}:host([appearance=filled-lighter]) slot[name=select]::slotted(select){background:var(--colorNeutralBackground2,var(--spui-ui-surface-hover,#f5f5f5));border-color:transparent}slot[name=select]::slotted(select:focus-visible){border-width:2px!important;border-color:var(--spui-focus-ring,var(--colorStrokeFocus2,#005a9e))!important;outline:0!important;outline-offset:0;box-shadow:none!important}:host([appearance=underline]) slot[name=select]::slotted(select:focus-visible){border-width:0 0 2px!important}slot[name=select]::slotted(select[aria-invalid]:not([aria-invalid=false])){border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))!important}slot[name=select]::slotted(select:disabled){opacity:.55}@media(forced-colors:active){slot[name=select]::slotted(select){border-color:FieldText}slot[name=select]::slotted(select:focus-visible){border-color:Highlight!important;border-width:2px!important;outline:0!important}slot[name=select]::slotted(select[aria-invalid]:not([aria-invalid=false])){border-color:CanvasText!important}slot[name=select]::slotted(select[aria-invalid]:not([aria-invalid=false]):focus-visible){border-color:Highlight!important}:host([appearance=underline]) slot[name=select]::slotted(select:focus-visible){border-width:0 0 2px!important}}`;
-            shadow.replaceChildren(style, label, control);
-            this.syncOptions();
-        }
-    }
-    customElements.define("spui-select", SpuiSelect);
-}

package/dist/elements/shared.d.ts

@@ -1,22 +0,0 @@
-/** Resolve the normal text direction for a BCP 47 language tag; callers can still honor an explicit dir. */
-export declare function getDirectionFromLanguage(language?: string | null): "ltr" | "rtl" | undefined;
-export declare const directionByLanguage: string;
-export declare const base: string;
-export type NativeFormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-export type NativeFormControlDefaults = {
-    control: NativeFormControl;
-    disabled: boolean;
-    required: boolean;
-    readOnly: boolean;
-    multiple: boolean;
-    value: string;
-    defaultValue: string;
-    checked: boolean;
-    defaultChecked: boolean;
-};
-export declare function stopHostAccessibleNameSync(host: HTMLElement): void;
-export declare function observeAccessibleTextFromIdRefs(context: HTMLElement, labelledBy: string, onText: (text: string) => void): Pick<MutationObserver, "disconnect">;
-export declare function resolveAccessibleTextFromIdRefs(context: HTMLElement | Document, labelledBy: string): string;
-export declare function syncHostAccessibleName(host: HTMLElement, control: HTMLElement): void;
-export declare function rememberNativeFormControlDefaults(current: NativeFormControlDefaults | undefined, control: NativeFormControl): NativeFormControlDefaults;
-export declare function findFocusable(root: ParentNode): HTMLElement | undefined;