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

package/dist/elements/search.js

@@ -0,0 +1,207 @@
+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("span");
+            clear.className = "dismiss";
+            clear.setAttribute("role", "button");
+            clear.tabIndex = -1;
+            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 }));
+            });
+            clear.addEventListener("keydown", event => {
+                if (event.key !== "Enter" && event.key !== " ")
+                    return;
+                event.preventDefault();
+                clear.click();
+            });
+            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: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::placeholder{color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));opacity:1}input::-webkit-search-cancel-.dismiss{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{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;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,.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

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

@@ -0,0 +1,291 @@
+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{outline:2px solid var(--spui-focus-ring,var(--colorStrokeFocus2,#005a9e));outline-offset:2px}select:disabled{opacity:.55}@media(forced-colors:active){select{border-color:FieldText}slot[name=icon]{color:ButtonText}select:focus-visible{outline-color:Highlight}}`;
+            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){outline:2px solid var(--spui-focus-ring,var(--colorStrokeFocus2,#005a9e));outline-offset:2px}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){outline-color:Highlight}}`;
+            shadow.replaceChildren(style, label, control);
+            this.syncOptions();
+        }
+    }
+    customElements.define("spui-select", SpuiSelect);
+}

package/dist/elements/shared.d.ts

@@ -0,0 +1,19 @@
+export declare const base = ":host{font:inherit;font-family:var(--spui-font-family,inherit);color:var(--spui-ui-text,var(--spui-semantic-body-text,var(--colorNeutralForeground1,#323130)));color-scheme:var(--spui-color-scheme,light dark)}button,input,textarea{font:inherit;font-family:var(--spui-font-family,inherit)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)));outline-offset:2px}";
+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;