@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/combobox.js

@@ -1,1012 +0,0 @@
-import { base, rememberNativeFormControlDefaults, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
-export function defineCombobox() {
-    if (customElements.get("spui-combobox"))
-        return;
-    class SpuiCombobox extends HTMLElement {
-        static formAssociated = true;
-        static observedAttributes = ["label", "value", "selected-value", "selected-options", "default-selected-options", "multiselect", "disabled", "required", "name", "placeholder", "allow-freeform", "read-only", "button-trigger", "open", "default-open", "clearable", "clear-label", "disable-auto-focus", "appearance", "size", "positioning", "inline-popup", "no-results", "remove-selected-label", "selected-label", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"];
-        internals;
-        observer;
-        positionEvents;
-        positionObserver;
-        observedPositionAnchor;
-        observedPositionListbox;
-        positionFrame;
-        instanceId = crypto.randomUUID();
-        currentValue = "";
-        selectedValueState = "";
-        selectedOptionsState = [];
-        buttonTriggerSlot;
-        fallbackButtonTrigger;
-        dirty = false;
-        selectionsDirty = false;
-        typing = false;
-        activeIndex = -1;
-        open = false;
-        inputSlot;
-        fallbackInput;
-        boundInput;
-        listboxElementValue;
-        formDisabled = false;
-        slotInputDefaults;
-        handleInput = (event) => {
-            const input = this.getInput();
-            if (!input)
-                return;
-            const changed = !this.open;
-            this.currentValue = input.value;
-            this.dirty = true;
-            const previousOption = this.activeOptionValue();
-            const query = input.value.trim().toLocaleLowerCase(this.lang || undefined);
-            const matchingOption = query ? this.optionElements().find(option => !this.isOptionDisabled(option) && (option.getAttribute("label") ?? option.textContent ?? "").trim().toLocaleLowerCase(this.lang || undefined).startsWith(query)) : undefined;
-            const options = this.filteredOptions();
-            this.activeIndex = matchingOption ? options.indexOf(matchingOption) : -1;
-            this.announceActiveOption(previousOption, event);
-            if (!this.hasAttribute("multiselect") && (this.selectedValueState || this.selectedOptionsState.length === 1) && (!query || !matchingOption)) {
-                this.selectedValueState = "";
-                this.selectedOptionsState = [];
-                this.selectionsDirty = true;
-                this.dispatchEvent(new CustomEvent("spui-change", {
-                    detail: { event, value: input.value, selectedValue: undefined, optionText: undefined, selectedOptions: [] },
-                    bubbles: true,
-                    composed: true
-                }));
-            }
-            this.open = true;
-            this.updateOptions();
-            this.syncFormState();
-            this.notifyOpenChange(true, event, changed);
-            this.dispatchEvent(new CustomEvent("spui-input", { detail: { value: input.value }, bubbles: true, composed: true }));
-        };
-        handleInputClick = (event) => { if (!this.open)
-            this.openList(0, event); };
-        handleInputKeyDown = (event) => this.onKeyDown(event);
-        handleInputBlur = (event) => { window.setTimeout(() => { if (!this.matches(":focus-within"))
-            this.closeList(event); }, 0); };
-        onSlottedControlClick = (event) => {
-            const slotted = event.composedPath().find(node => node instanceof HTMLElement && node.parentElement === this);
-            if (slotted?.slot === "clear-button")
-                this.clearSelection(event);
-            else if (this.hasAttribute("button-trigger") && slotted?.slot === "button")
-                this.toggleOpen(event);
-        };
-        onSlottedTriggerKeyDown = (event) => {
-            if (this.hasAttribute("button-trigger") && event.composedPath().some(node => node instanceof HTMLElement && node.parentElement === this && node.slot === "button"))
-                this.onKeyDown(event);
-        };
-        get form() { return this.internals?.form ?? null; }
-        constructor() {
-            super();
-            try {
-                this.internals = this.attachInternals();
-            }
-            catch { /* Keep listbox interaction available without custom form association. */ }
-        }
-        connectedCallback() {
-            this.currentValue = this.getAttribute("value") ?? this.querySelector('input[slot="input"]')?.value ?? "";
-            this.selectedValueState = this.getAttribute("selected-value") ?? "";
-            this.selectedOptionsState = this.readSelectedOptions(this.getAttribute("selected-options") ?? this.getAttribute("default-selected-options"));
-            this.render();
-            this.syncClearButton();
-            this.addEventListener("click", this.onSlottedControlClick);
-            this.addEventListener("keydown", this.onSlottedTriggerKeyDown);
-            if (this.hasAttribute("open") || this.hasAttribute("default-open"))
-                this.openList();
-            this.observer = new MutationObserver(records => {
-                const listbox = this.getListbox();
-                const trigger = this.getTrigger();
-                if (records.some(record => !listbox?.contains(record.target) && !trigger?.contains(record.target)))
-                    this.updateOptions();
-            });
-            this.observer.observe(this, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ["value", "label", "disabled"] });
-            this.syncFormState();
-        }
-        disconnectedCallback() { this.observer?.disconnect(); this.positionEvents?.abort(); this.positionEvents = undefined; this.stopPositionObserver(); stopHostAccessibleNameSync(this); this.removeEventListener("click", this.onSlottedControlClick); this.removeEventListener("keydown", this.onSlottedTriggerKeyDown); this.boundInput?.removeEventListener("input", this.handleInput); this.boundInput?.removeEventListener("click", this.handleInputClick); this.boundInput?.removeEventListener("keydown", this.handleInputKeyDown); this.boundInput?.removeEventListener("blur", this.handleInputBlur); }
-        get listboxElement() { return this.listboxElementValue; }
-        set listboxElement(value) {
-            const next = value ?? undefined;
-            if (this.listboxElementValue === next)
-                return;
-            this.listboxElementValue = next;
-            if (this.isConnected)
-                this.updateOptions();
-        }
-        getInput() {
-            const assigned = this.inputSlot?.assignedElements({ flatten: true }).find((element) => element instanceof HTMLInputElement);
-            return assigned ?? this.fallbackInput ?? null;
-        }
-        bindInput() {
-            const input = this.getInput();
-            if (!input)
-                return;
-            if (input !== this.fallbackInput)
-                this.slotInputDefaults = rememberNativeFormControlDefaults(this.slotInputDefaults, input);
-            const defaults = input === this.fallbackInput ? undefined : this.slotInputDefaults;
-            if (this.boundInput !== input) {
-                this.boundInput?.removeEventListener("input", this.handleInput);
-                this.boundInput?.removeEventListener("click", this.handleInputClick);
-                this.boundInput?.removeEventListener("keydown", this.handleInputKeyDown);
-                this.boundInput?.removeEventListener("blur", this.handleInputBlur);
-                input.addEventListener("input", this.handleInput);
-                input.addEventListener("click", this.handleInputClick);
-                input.addEventListener("keydown", this.handleInputKeyDown);
-                input.addEventListener("blur", this.handleInputBlur);
-                this.boundInput = input;
-            }
-            if (this.fallbackInput)
-                this.fallbackInput.hidden = input !== this.fallbackInput;
-            if (!input.id)
-                input.id = `combo-${this.instanceId}-input`;
-            if (!input.type)
-                input.type = "text";
-            input.role = "combobox";
-            input.autocomplete ||= "off";
-            input.setAttribute("aria-autocomplete", "list");
-            input.setAttribute("aria-haspopup", "listbox");
-            input.value = this.currentValue;
-            input.placeholder = this.getAttribute("placeholder") ?? "";
-            input.readOnly = this.hasAttribute("read-only") || Boolean(defaults?.readOnly);
-            input.disabled = this.formDisabled || this.hasAttribute("disabled") || Boolean(defaults?.disabled);
-            input.required = this.hasAttribute("required") || Boolean(defaults?.required);
-            input.hidden = this.hasAttribute("button-trigger");
-            input.part.add("control");
-            for (const name of ["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
-                const value = this.getAttribute(name);
-                if (value === null)
-                    input.removeAttribute(name);
-                else
-                    input.setAttribute(name, value);
-            }
-        }
-        attributeChangedCallback(name, _oldValue, value) {
-            if (!this.isConnected)
-                return;
-            const input = this.getInput();
-            if (!input)
-                return;
-            if (name === "label") {
-                const label = this.shadowRoot?.querySelector("label");
-                if (label)
-                    label.textContent = value ?? "";
-            }
-            else if (name === "value") {
-                this.currentValue = value ?? "";
-                input.value = this.currentValue;
-                this.activeIndex = -1;
-                this.updateOptions();
-            }
-            else if (name === "selected-value") {
-                this.selectedValueState = value ?? "";
-                this.dirty = false;
-                this.updateOptions();
-            }
-            else if (name === "selected-options") {
-                this.selectedOptionsState = this.readSelectedOptions(value);
-                this.selectionsDirty = false;
-                this.updateOptions();
-            }
-            else if (name === "default-selected-options" && !this.selectionsDirty && !this.hasAttribute("selected-options")) {
-                this.selectedOptionsState = this.readSelectedOptions(value);
-                this.updateOptions();
-            }
-            else if (name === "disabled")
-                input.disabled = this.formDisabled || this.hasAttribute("disabled") || Boolean(this.slotInputDefaults?.disabled);
-            else if (name === "read-only") {
-                input.readOnly = this.hasAttribute("read-only") || Boolean(this.slotInputDefaults?.readOnly);
-                this.syncExpandIcon();
-            }
-            else if (name === "button-trigger") {
-                const active = this.hasAttribute("button-trigger");
-                input.hidden = active;
-                if (this.buttonTriggerSlot) {
-                    this.buttonTriggerSlot.hidden = !active;
-                    if (active && this.fallbackButtonTrigger?.parentElement !== this.buttonTriggerSlot)
-                        this.buttonTriggerSlot.append(this.fallbackButtonTrigger);
-                    else if (!active)
-                        this.fallbackButtonTrigger?.remove();
-                }
-                const label = this.shadowRoot?.querySelector("label");
-                if (label)
-                    label.htmlFor = active ? "combo-" + this.instanceId : "combo-" + this.instanceId + "-input";
-            }
-            else if (name === "clearable" || name === "clear-label")
-                this.syncClearButton();
-            else if (name === "appearance" || name === "size" || name === "positioning") { /* Host selectors update the shadow theme without rebuilding focused controls. */ }
-            else if (name === "disable-auto-focus")
-                this.updateOptions();
-            else if (name === "expand-icon")
-                this.syncExpandIcon();
-            else if (name === "selected-label")
-                this.shadowRoot?.querySelector(".selected")?.setAttribute("aria-label", value ?? "Selected options");
-            else if (name === "open" || name === "default-open") {
-                if (this.hasAttribute("open") || this.hasAttribute("default-open"))
-                    this.openList();
-                else
-                    this.closeList();
-            }
-            else if (name === "required")
-                input.required = this.hasAttribute("required") || Boolean(this.slotInputDefaults?.required);
-            else if (name === "placeholder")
-                input.placeholder = value ?? "";
-            else if (name === "aria-label" || name === "aria-labelledby" || name === "aria-description" || name === "aria-describedby" || name === "aria-invalid")
-                value === null ? input.removeAttribute(name) : input.setAttribute(name, value);
-            else if (name === "allow-freeform" || name === "no-results" || name === "remove-selected-label" || name === "multiselect")
-                this.updateOptions();
-            this.syncAria();
-            this.syncFormState();
-        }
-        get value() { return this.currentValue; }
-        set value(value) {
-            this.currentValue = value;
-            const input = this.getInput();
-            if (input) {
-                input.value = value;
-                this.activeIndex = -1;
-                this.updateOptions();
-                this.syncAria();
-                this.syncFormState();
-            }
-        }
-        get selectedValue() { return this.selectedValueState; }
-        set selectedValue(value) {
-            this.selectedValueState = value;
-            this.dirty = false;
-            this.updateOptions();
-            this.syncFormState();
-        }
-        get selectedOptions() { return [...this.selectedOptionsState]; }
-        set selectedOptions(values) {
-            this.selectedOptionsState = [...new Set(values.map(String))];
-            this.selectionsDirty = false;
-            this.updateOptions();
-            this.syncFormState();
-        }
-        setOpen(open) { if (open)
-            this.openList();
-        else
-            this.closeList(); }
-        readSelectedOptions(value) {
-            if (!value)
-                return [];
-            try {
-                const parsed = JSON.parse(value);
-                return Array.isArray(parsed) ? [...new Set(parsed.map(String))] : [];
-            }
-            catch {
-                return [];
-            }
-        }
-        formDisabledCallback(disabled) { this.formDisabled = disabled; this.bindInput(); this.syncFormState(); }
-        formResetCallback() {
-            this.selectedOptionsState = this.readSelectedOptions(this.getAttribute("default-selected-options"));
-            this.selectionsDirty = false;
-            this.selectedValueState = this.getAttribute("selected-value") ?? "";
-            this.value = this.getAttribute("value") ?? this.slotInputDefaults?.defaultValue ?? "";
-            this.closeList();
-        }
-        formStateRestoreCallback(state) {
-            if (typeof state !== "string")
-                return;
-            if (this.hasAttribute("multiselect"))
-                this.selectedOptions = this.readSelectedOptions(state);
-            else
-                this.selectOption(state);
-        }
-        optionElements() { return [...this.querySelectorAll(":scope > spui-combobox-option, :scope > spui-combobox-option-group > spui-combobox-option")]; }
-        filteredOptions() {
-            const query = this.hasAttribute("read-only") ? "" : this.currentValue.trim().toLocaleLowerCase(this.lang || undefined);
-            return this.optionElements().filter(option => !query || (option.getAttribute("label") ?? option.textContent ?? "").trim().toLocaleLowerCase(this.lang || undefined).includes(query));
-        }
-        syncFormState() {
-            const formValue = this.hasAttribute("multiselect")
-                ? this.selectedOptionsState.length ? this.selectedOptionsFormData() : null
-                : this.dirty ? (this.hasAttribute("allow-freeform") ? this.currentValue : "") : (this.selectedValue || (this.hasAttribute("allow-freeform") ? this.currentValue : ""));
-            this.internals?.setFormValue(formValue || null, this.hasAttribute("multiselect") ? JSON.stringify(this.selectedOptionsState) : typeof formValue === "string" ? formValue : null);
-            const missing = this.hasAttribute("required") && (this.hasAttribute("multiselect") ? this.selectedOptionsState.length === 0 : !formValue);
-            try {
-                this.internals?.setValidity(missing ? { valueMissing: true } : {}, missing ? "Choose an option." : "", this.hasAttribute("button-trigger") ? undefined : this.getInput() ?? undefined);
-            }
-            catch { /* Keep native input semantics if an engine rejects the validity anchor. */ }
-        }
-        selectedOptionsFormData() {
-            const data = new FormData();
-            const name = this.getAttribute("name") ?? "";
-            if (name)
-                for (const value of this.selectedOptionsState)
-                    data.append(name, value);
-            return data;
-        }
-        syncClearButton() {
-            const label = this.getAttribute("clear-label") ?? "Clear selection";
-            const visible = this.hasAttribute("clearable");
-            const fallback = this.shadowRoot?.querySelector(".clear");
-            if (fallback) {
-                fallback.hidden = !visible;
-                fallback.setAttribute("aria-label", label);
-            }
-            for (const element of this.querySelectorAll(":scope > [slot=clear-button]")) {
-                element.hidden = !visible;
-                if (!element.hasAttribute("aria-label"))
-                    element.setAttribute("aria-label", label);
-                if (element instanceof HTMLButtonElement)
-                    element.type = "button";
-            }
-        }
-        syncExpandIcon() {
-            const expand = this.shadowRoot?.querySelector(".expand");
-            const custom = (this.shadowRoot?.querySelector('slot[name="expand-icon"]')?.assignedElements({ flatten: true }).length ?? 0) > 0;
-            if (expand)
-                expand.hidden = !(this.hasAttribute("read-only") || this.hasAttribute("button-trigger") || custom);
-        }
-        clearSelection(event) {
-            this.currentValue = "";
-            this.selectedValueState = "";
-            this.selectedOptionsState = [];
-            this.dirty = false;
-            this.selectionsDirty = true;
-            const input = this.getInput();
-            if (input)
-                input.value = "";
-            this.closeList(event);
-            this.updateOptions();
-            this.syncFormState();
-            this.dispatchEvent(new CustomEvent("spui-change", { detail: { event, value: "", selectedValue: undefined, optionText: undefined, selectedOptions: [] }, bubbles: true, composed: true }));
-            (this.hasAttribute("button-trigger") ? this.getTrigger() : input)?.focus();
-        }
-        getTrigger() {
-            const slot = this.shadowRoot?.querySelector('slot[name="button"]');
-            return slot?.assignedElements({ flatten: true })[0] ?? slot?.querySelector("button") ?? null;
-        }
-        getListbox() {
-            if (this.listboxElementValue)
-                return this.listboxElementValue;
-            const slot = this.shadowRoot?.querySelector('slot[name="listbox"]');
-            const assigned = slot?.assignedElements({ flatten: true }).find(element => element instanceof HTMLElement);
-            return assigned ?? slot?.querySelector("[role=listbox]") ?? null;
-        }
-        toggleOpen(event) { if (this.open)
-            this.closeList(event);
-        else
-            this.openList(0, event); this.getTrigger()?.focus(); }
-        syncAria() {
-            const input = this.getInput();
-            const list = this.getListbox();
-            if (!input || !list)
-                return;
-            const trigger = this.hasAttribute("button-trigger") ? this.getTrigger() : input;
-            const triggerValue = this.getTrigger()?.querySelector(".trigger-value") ?? this.shadowRoot?.querySelector(".trigger-value");
-            if (triggerValue)
-                triggerValue.textContent = this.currentValue || this.getAttribute("placeholder") || "";
-            if (trigger) {
-                trigger.setAttribute("role", "combobox");
-                trigger.setAttribute("aria-haspopup", "listbox");
-                trigger.setAttribute("aria-expanded", String(this.open));
-                const label = this.shadowRoot?.querySelector("label");
-                if (!trigger.id)
-                    trigger.id = "combo-" + this.instanceId;
-                if (label)
-                    label.htmlFor = trigger.id;
-                const explicitLabel = this.getAttribute("aria-label");
-                const explicitLabelledBy = this.getAttribute("aria-labelledby");
-                if (explicitLabel !== null) {
-                    trigger.setAttribute("aria-label", explicitLabel);
-                    trigger.removeAttribute("aria-labelledby");
-                }
-                else if (explicitLabelledBy !== null) {
-                    trigger.removeAttribute("aria-label");
-                    trigger.setAttribute("aria-labelledby", explicitLabelledBy);
-                }
-                else if (label && trigger.getRootNode() !== this.shadowRoot) {
-                    trigger.removeAttribute("aria-labelledby");
-                    trigger.setAttribute("aria-label", label.textContent?.trim() ?? "");
-                }
-                else {
-                    trigger.removeAttribute("aria-label");
-                    if (label)
-                        trigger.setAttribute("aria-labelledby", label.id);
-                    else
-                        trigger.removeAttribute("aria-labelledby");
-                }
-                if (trigger !== input)
-                    syncHostAccessibleName(this, input);
-                syncHostAccessibleName(this, trigger);
-                const invalid = this.getAttribute("aria-invalid");
-                if (invalid === null)
-                    trigger.removeAttribute("aria-invalid");
-                else
-                    trigger.setAttribute("aria-invalid", invalid);
-                if (trigger.getRootNode() === list.getRootNode())
-                    trigger.setAttribute("aria-controls", list.id);
-                else
-                    trigger.removeAttribute("aria-controls");
-                if (this.hasAttribute("disabled")) {
-                    trigger.setAttribute("aria-disabled", "true");
-                    if (trigger instanceof HTMLButtonElement)
-                        trigger.disabled = true;
-                }
-                else {
-                    trigger.removeAttribute("aria-disabled");
-                    if (trigger instanceof HTMLButtonElement)
-                        trigger.disabled = false;
-                }
-            }
-            if (!list.id)
-                list.id = `listbox-${this.instanceId}`;
-            list.setAttribute("role", this.hasAttribute("multiselect") ? "menu" : "listbox");
-            if (list.slot === "listbox") {
-                const defaults = {
-                    position: "absolute", "z-index": "var(--spui-layer-dropdown,20)", top: "calc(100% + 4px)", "inset-inline": "0",
-                    "box-sizing": "border-box", "max-height": "240px", overflow: "auto", margin: "0", padding: "4px",
-                    "list-style": "none", border: "1px solid var(--spui-ui-stroke,#d1d1d1)", color: "var(--spui-ui-text,inherit)", font: "inherit",
-                    "border-radius": "var(--spui-card-radius,8px)", background: "var(--spui-ui-surface,#fff)",
-                    "box-shadow": "var(--spui-card-shadow,0 4px 14px #0002)"
-                };
-                for (const [property, value] of Object.entries(defaults))
-                    if (!list.style.getPropertyValue(property))
-                        list.style.setProperty(property, value);
-                if (this.getAttribute("positioning")?.startsWith("above")) {
-                    list.style.setProperty("top", "auto");
-                    list.style.setProperty("bottom", "calc(100% + 4px)");
-                }
-                else
-                    list.style.removeProperty("bottom");
-            }
-            if (!this.hasAttribute("button-trigger")) {
-                input.setAttribute("aria-expanded", String(this.open));
-                if (input.getRootNode() === list.getRootNode())
-                    input.setAttribute("aria-controls", list.id);
-                else
-                    input.removeAttribute("aria-controls");
-            }
-            list.removeAttribute("aria-multiselectable");
-            const active = list.querySelector(`[data-option-index="${this.activeIndex}"]`);
-            if (this.open && active)
-                trigger?.setAttribute("aria-activedescendant", active.id);
-            else
-                trigger?.removeAttribute("aria-activedescendant");
-            for (const option of list.querySelectorAll("[role=option], [role=menuitemcheckbox]")) {
-                const activeOption = this.open && Number(option.dataset.optionIndex) === this.activeIndex;
-                const selectedOption = option.getAttribute("aria-selected") === "true" || option.getAttribute("aria-checked") === "true";
-                option.dataset.active = String(activeOption);
-                if (list.slot === "listbox")
-                    option.style.background = activeOption || selectedOption ? "var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))" : "";
-            }
-            list.hidden = !this.open;
-            this.syncPositionListeners();
-            this.positionListbox();
-        }
-        syncPositionListeners() {
-            const shouldListen = this.open && Boolean(this.listboxElementValue) && !this.hasAttribute("inline-popup");
-            if (!shouldListen) {
-                this.positionEvents?.abort();
-                this.positionEvents = undefined;
-                this.stopPositionObserver();
-                return;
-            }
-            if (!this.positionEvents) {
-                this.positionEvents = new AbortController();
-                const options = { signal: this.positionEvents.signal };
-                window.addEventListener("resize", this.schedulePositionListbox, options);
-                window.addEventListener("scroll", this.schedulePositionListbox, { ...options, capture: true });
-            }
-            if (typeof ResizeObserver === "undefined")
-                return;
-            this.positionObserver ??= new ResizeObserver(this.schedulePositionListbox);
-            const anchor = this.hasAttribute("button-trigger") ? this.getTrigger() : this.getInput();
-            const list = this.listboxElementValue;
-            if (anchor !== this.observedPositionAnchor) {
-                if (this.observedPositionAnchor)
-                    this.positionObserver.unobserve(this.observedPositionAnchor);
-                this.observedPositionAnchor = anchor ?? undefined;
-                if (anchor)
-                    this.positionObserver.observe(anchor);
-            }
-            if (list !== this.observedPositionListbox) {
-                if (this.observedPositionListbox)
-                    this.positionObserver.unobserve(this.observedPositionListbox);
-                this.observedPositionListbox = list;
-                if (list)
-                    this.positionObserver.observe(list);
-            }
-        }
-        stopPositionObserver() {
-            this.positionObserver?.disconnect();
-            this.observedPositionAnchor = undefined;
-            this.observedPositionListbox = undefined;
-            if (this.positionFrame !== undefined)
-                cancelAnimationFrame(this.positionFrame);
-            this.positionFrame = undefined;
-        }
-        schedulePositionListbox = () => {
-            if (this.positionFrame !== undefined)
-                return;
-            this.positionFrame = requestAnimationFrame(() => {
-                this.positionFrame = undefined;
-                this.positionListbox();
-            });
-        };
-        positionListbox = () => {
-            const list = this.listboxElementValue;
-            if (!list || this.hasAttribute("inline-popup"))
-                return;
-            const anchor = this.hasAttribute("button-trigger") ? this.getTrigger() : this.getInput();
-            if (!anchor)
-                return;
-            const rect = anchor.getBoundingClientRect();
-            const viewportWidth = this.ownerDocument.documentElement.clientWidth || window.innerWidth;
-            const viewportHeight = this.ownerDocument.documentElement.clientHeight || window.innerHeight;
-            const margin = 8;
-            const gap = 4;
-            const maxWidth = Math.max(0, viewportWidth - margin * 2);
-            const width = Math.min(Math.max(rect.width, 0), maxWidth);
-            const left = Math.max(margin, Math.min(rect.left, viewportWidth - width - margin));
-            const below = Math.max(0, viewportHeight - rect.bottom - margin - gap);
-            const above = Math.max(0, rect.top - margin - gap);
-            const requested = this.getAttribute("positioning")?.startsWith("above") ? "above" : this.getAttribute("positioning")?.startsWith("below") ? "below" : undefined;
-            const naturalHeight = Math.min(240, Math.max(list.scrollHeight, 0));
-            const side = requested ?? (below < naturalHeight && above > below ? "above" : "below");
-            const available = side === "above" ? above : below;
-            const maxHeight = Math.min(240, available);
-            list.style.position = "fixed";
-            list.style.insetInline = "auto";
-            list.style.left = `${left}px`;
-            list.style.right = "auto";
-            list.style.width = `${width}px`;
-            list.style.maxWidth = `calc(100vw - ${margin * 2}px)`;
-            list.style.maxHeight = `${maxHeight}px`;
-            list.style.top = side === "above" ? "auto" : `${rect.bottom + gap}px`;
-            list.style.bottom = side === "above" ? `${Math.max(margin, viewportHeight - rect.top + gap)}px` : "auto";
-            list.style.zIndex = "var(--spui-layer-dropdown,20)";
-        };
-        updateOptions() {
-            const list = this.getListbox();
-            if (!list)
-                return;
-            const options = this.filteredOptions();
-            list.replaceChildren();
-            let currentGroup = null;
-            let groupContainer = null;
-            options.forEach((option, index) => {
-                const group = option.parentElement?.matches("spui-combobox-option-group") ? option.parentElement : null;
-                if (group && group !== currentGroup) {
-                    currentGroup = group;
-                    groupContainer = document.createElement("div");
-                    groupContainer.setAttribute("role", "group");
-                    groupContainer.className = "option-group";
-                    if (list.slot === "listbox") {
-                        groupContainer.style.display = "grid";
-                        groupContainer.style.gap = "2px";
-                        groupContainer.style.paddingBlock = "2px";
-                    }
-                    const label = group.getAttribute("label") ?? group.getAttribute("aria-label") ?? "";
-                    if (label)
-                        groupContainer.setAttribute("aria-label", label);
-                    const heading = document.createElement("span");
-                    heading.className = "group-label";
-                    heading.textContent = group.getAttribute("label") ?? group.getAttribute("aria-label") ?? "";
-                    if (list.slot === "listbox") {
-                        heading.style.padding = "6px 10px";
-                        heading.style.color = "var(--spui-ui-muted,inherit)";
-                        heading.style.fontSize = "12px";
-                        heading.style.fontWeight = "600";
-                    }
-                    groupContainer.append(heading);
-                    list.append(groupContainer);
-                }
-                else if (!group) {
-                    currentGroup = null;
-                    groupContainer = null;
-                }
-                const item = document.createElement("div");
-                item.id = `option-${this.instanceId}-${index}`;
-                item.dataset.optionIndex = String(index);
-                const value = option.getAttribute("value") ?? "";
-                const selected = this.hasAttribute("multiselect") ? this.selectedOptionsState.includes(value) : value === this.selectedValue;
-                if (this.hasAttribute("multiselect")) {
-                    item.setAttribute("role", "menuitemcheckbox");
-                    item.setAttribute("aria-checked", String(selected));
-                }
-                else {
-                    item.setAttribute("role", "option");
-                    item.setAttribute("aria-selected", String(selected));
-                }
-                const disabled = option.hasAttribute("disabled") || Boolean(group?.hasAttribute("disabled"));
-                if (disabled)
-                    item.setAttribute("aria-disabled", "true");
-                if (this.hasAttribute("multiselect")) {
-                    const check = document.createElement("span");
-                    check.className = "check";
-                    check.setAttribute("aria-hidden", "true");
-                    check.textContent = selected ? "✓" : "";
-                    if (list.slot === "listbox") {
-                        check.style.cssText = "display:inline-grid;place-items:center;width:16px;height:16px;flex:none;border:1px solid var(--spui-ui-stroke,#8a8886);border-radius:3px;color:var(--spui-ui-accent,#0f6cbd);font-size:12px";
-                        if (selected)
-                            check.style.background = "var(--spui-ui-canvas,#f5f5f5)";
-                    }
-                    item.append(check);
-                }
-                if (list.slot === "listbox") {
-                    item.style.cssText = "display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--spui-control-radius,4px);color:var(--spui-ui-text,inherit);cursor:pointer";
-                    if (selected)
-                        item.style.background = "var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))";
-                    if (disabled)
-                        item.style.opacity = ".5";
-                }
-                const text = document.createElement("span");
-                text.textContent = (option.getAttribute("label") ?? option.textContent ?? "").trim();
-                item.append(text);
-                item.addEventListener("pointerdown", event => event.preventDefault());
-                item.addEventListener("pointerenter", () => { if (list.slot === "listbox" && !disabled)
-                    item.style.background = "var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))"; });
-                item.addEventListener("pointerleave", () => { if (list.slot === "listbox" && item.dataset.active !== "true" && item.getAttribute("aria-selected") !== "true" && item.getAttribute("aria-checked") !== "true")
-                    item.style.background = ""; });
-                item.addEventListener("click", event => { if (!disabled)
-                    this.selectOption(option.getAttribute("value") ?? "", event); });
-                (groupContainer ?? list).append(item);
-            });
-            const empty = this.shadowRoot?.querySelector(".empty");
-            if (empty) {
-                empty.textContent = this.getAttribute("no-results") ?? "No results";
-                empty.hidden = options.length !== 0;
-            }
-            this.syncSelectedTags();
-            this.syncAria();
-        }
-        syncSelectedTags() {
-            const container = this.shadowRoot?.querySelector(".selected");
-            if (!container)
-                return;
-            container.replaceChildren();
-            if (!this.hasAttribute("multiselect")) {
-                container.hidden = true;
-                return;
-            }
-            const options = this.optionElements();
-            for (const value of this.selectedOptionsState) {
-                const option = options.find(item => item.getAttribute("value") === value);
-                const label = (option?.getAttribute("label") ?? option?.textContent ?? value).trim();
-                const chip = document.createElement("span");
-                chip.className = "tag";
-                const text = document.createElement("span");
-                text.textContent = label;
-                const remove = document.createElement("button");
-                remove.type = "button";
-                remove.className = "remove";
-                remove.textContent = "×";
-                remove.setAttribute("aria-label", `${this.getAttribute("remove-selected-label") ?? "Remove"} ${label}`);
-                remove.addEventListener("click", event => { this.setOptionSelected(value, false, event); this.getInput()?.focus(); });
-                chip.append(text, remove);
-                container.append(chip);
-            }
-            container.hidden = this.selectedOptionsState.length === 0;
-        }
-        openList(index = 0, sourceEvent) {
-            const changed = !this.open;
-            const previousOption = this.activeOptionValue();
-            const options = this.filteredOptions();
-            this.open = true;
-            let activeIndex = options.length ? Math.max(0, Math.min(index, options.length - 1)) : -1;
-            while (activeIndex >= 0 && activeIndex < options.length && this.isOptionDisabled(options[activeIndex]))
-                activeIndex++;
-            this.activeIndex = !this.hasAttribute("disable-auto-focus") && activeIndex < options.length ? activeIndex : -1;
-            this.announceActiveOption(previousOption, sourceEvent);
-            this.syncAria();
-            this.scrollActiveIntoView();
-            this.notifyOpenChange(true, sourceEvent, changed);
-        }
-        closeList(sourceEvent) {
-            const changed = this.open;
-            const previousOption = this.activeOptionValue();
-            this.open = false;
-            this.activeIndex = -1;
-            this.announceActiveOption(previousOption, sourceEvent);
-            this.syncAria();
-            this.notifyOpenChange(false, sourceEvent, changed);
-        }
-        notifyOpenChange(open, sourceEvent, changed = true) {
-            if (changed)
-                this.dispatchEvent(new CustomEvent("spui-open-change", { detail: { event: sourceEvent, open }, bubbles: true, composed: true }));
-        }
-        moveActive(delta, sourceEvent, steps = 1) {
-            const previousOption = this.activeOptionValue();
-            const options = this.filteredOptions();
-            const changed = !this.open;
-            if (!options.length) {
-                this.open = true;
-                this.activeIndex = -1;
-                this.announceActiveOption(previousOption, sourceEvent);
-                this.syncAria();
-                this.notifyOpenChange(true, sourceEvent, changed);
-                return;
-            }
-            const navigable = options.map((option, index) => this.isOptionDisabled(option) ? -1 : index).filter(index => index >= 0);
-            const current = navigable.indexOf(this.open ? this.activeIndex : -1);
-            const next = Math.max(0, Math.min(navigable.length - 1, (current < 0 ? 0 : current) + delta * steps));
-            const index = navigable[next] ?? -1;
-            this.open = true;
-            this.activeIndex = index;
-            this.announceActiveOption(previousOption, sourceEvent);
-            this.syncAria();
-            this.scrollActiveIntoView();
-            this.notifyOpenChange(true, sourceEvent, changed);
-        }
-        moveActiveToEdge(edge, sourceEvent) {
-            const changed = !this.open;
-            const previousOption = this.activeOptionValue();
-            const options = this.filteredOptions();
-            const direction = edge === "first" ? 1 : -1;
-            let index = edge === "first" ? 0 : options.length - 1;
-            while (index >= 0 && index < options.length && this.isOptionDisabled(options[index]))
-                index += direction;
-            this.activeIndex = index >= 0 && index < options.length ? index : -1;
-            this.open = true;
-            this.typing = false;
-            this.announceActiveOption(previousOption, sourceEvent);
-            this.syncAria();
-            this.scrollActiveIntoView();
-            this.notifyOpenChange(true, sourceEvent, changed);
-        }
-        isOptionDisabled(option) {
-            return option.hasAttribute("disabled") || Boolean(option.parentElement?.matches("spui-combobox-option-group[disabled]"));
-        }
-        activeOptionValue() {
-            const option = this.filteredOptions()[this.activeIndex];
-            return option?.getAttribute("value") ?? null;
-        }
-        announceActiveOption(previousOption, sourceEvent) {
-            const nextOption = this.activeOptionValue();
-            if (previousOption !== nextOption)
-                this.dispatchEvent(new CustomEvent("spui-active-option-change", { detail: { event: sourceEvent, type: sourceEvent ? "change" : undefined, previousOption, nextOption, id: nextOption ?? "", previousId: previousOption }, bubbles: true, composed: true }));
-        }
-        scrollActiveIntoView() { this.getListbox()?.querySelector(`[data-option-index="${this.activeIndex}"]`)?.scrollIntoView({ block: "nearest" }); }
-        selectOption(value, sourceEvent) {
-            const option = this.optionElements().find(item => item.getAttribute("value") === value);
-            if (!option || option.hasAttribute("disabled"))
-                return;
-            if (this.hasAttribute("multiselect")) {
-                this.setOptionSelected(value, !this.selectedOptionsState.includes(value), sourceEvent);
-                return;
-            }
-            const label = (option.getAttribute("label") ?? option.textContent ?? "").trim();
-            this.selectedValueState = value;
-            this.dirty = false;
-            this.currentValue = label;
-            const input = this.getInput();
-            if (input)
-                input.value = label;
-            this.closeList(sourceEvent);
-            this.updateOptions();
-            this.syncFormState();
-            this.dispatchEvent(new CustomEvent("spui-change", { detail: { event: sourceEvent, value: label, selectedValue: value, selectedOptions: [value] }, bubbles: true, composed: true }));
-        }
-        setOptionSelected(value, selected, sourceEvent) {
-            const wasOpen = this.open;
-            this.selectedOptionsState = selected
-                ? [...new Set([...this.selectedOptionsState, value])]
-                : this.selectedOptionsState.filter(item => item !== value);
-            this.selectionsDirty = true;
-            this.dirty = false;
-            this.currentValue = "";
-            const input = this.getInput();
-            if (input)
-                input.value = "";
-            this.open = wasOpen;
-            this.activeIndex = wasOpen ? 0 : -1;
-            this.updateOptions();
-            this.syncFormState();
-            const option = this.optionElements().find(item => item.getAttribute("value") === value);
-            const label = option ? (option.getAttribute("label") ?? option.textContent ?? "").trim() : undefined;
-            this.dispatchEvent(new CustomEvent("spui-change", { detail: { event: sourceEvent, value: "", selectedValue: value, optionText: label, selectedOptions: [...this.selectedOptionsState] }, bubbles: true, composed: true }));
-        }
-        onKeyDown(event) {
-            if (this.hasAttribute("button-trigger") && (event.key === "Enter" || event.key === " ")) {
-                event.preventDefault();
-                this.typing = false;
-                if (this.open && this.activeIndex >= 0) {
-                    const option = this.filteredOptions()[this.activeIndex];
-                    this.selectOption(option.getAttribute("value") ?? "", event);
-                }
-                else
-                    this.toggleOpen(event);
-                return;
-            }
-            if (event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey) {
-                this.typing = true;
-                if (!this.open)
-                    this.openList(0, event);
-            }
-            else if (["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"].includes(event.key))
-                this.typing = false;
-            if (event.key === "ArrowDown") {
-                event.preventDefault();
-                this.moveActive(1, event);
-            }
-            else if (event.key === "ArrowUp" && event.altKey && this.open) {
-                event.preventDefault();
-                if (this.activeIndex >= 0) {
-                    const option = this.filteredOptions()[this.activeIndex];
-                    this.selectOption(option.getAttribute("value") ?? "", event);
-                }
-                else
-                    this.closeList(event);
-            }
-            else if (event.key === "ArrowUp") {
-                event.preventDefault();
-                this.moveActive(-1, event);
-            }
-            else if (event.key === "Home" && this.open) {
-                event.preventDefault();
-                this.moveActiveToEdge("first", event);
-            }
-            else if (event.key === "End" && this.open) {
-                event.preventDefault();
-                this.moveActiveToEdge("last", event);
-            }
-            else if (event.key === "PageUp" && this.open) {
-                event.preventDefault();
-                this.moveActive(-1, event, 10);
-            }
-            else if (event.key === "PageDown" && this.open) {
-                event.preventDefault();
-                this.moveActive(1, event, 10);
-            }
-            else if (event.key === "Enter" && !this.open) {
-                event.preventDefault();
-                this.openList(0, event);
-            }
-            else if (event.key === "Enter" && this.open && this.activeIndex >= 0) {
-                event.preventDefault();
-                const option = this.filteredOptions()[this.activeIndex];
-                this.selectOption(option.getAttribute("value") ?? "", event);
-            }
-            else if (event.key === " " && this.open && (!this.typing || this.hasAttribute("button-trigger")) && this.activeIndex >= 0) {
-                event.preventDefault();
-                const option = this.filteredOptions()[this.activeIndex];
-                this.selectOption(option.getAttribute("value") ?? "", event);
-            }
-            else if (event.key === "Tab" && this.open && !this.hasAttribute("multiselect") && this.activeIndex >= 0) {
-                const option = this.filteredOptions()[this.activeIndex];
-                this.selectOption(option.getAttribute("value") ?? "", event);
-            }
-            else if (event.key === "Backspace" && this.hasAttribute("multiselect") && !this.currentValue && this.selectedOptionsState.length) {
-                event.preventDefault();
-                this.setOptionSelected(this.selectedOptionsState.at(-1), false, event);
-            }
-            else if (event.key === "Escape" && this.open) {
-                event.preventDefault();
-                event.stopPropagation();
-                this.typing = false;
-                const selected = this.optionElements().find(option => option.getAttribute("value") === this.selectedValue);
-                if (selected) {
-                    this.currentValue = (selected.getAttribute("label") ?? selected.textContent ?? "").trim();
-                    const input = this.getInput();
-                    if (input)
-                        input.value = this.currentValue;
-                }
-                else if (!this.hasAttribute("allow-freeform")) {
-                    this.currentValue = "";
-                    const input = this.getInput();
-                    if (input)
-                        input.value = "";
-                }
-                this.dirty = false;
-                this.closeList(event);
-                this.syncFormState();
-            }
-        }
-        render() {
-            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
-            const id = `combo-${this.instanceId}`;
-            const label = document.createElement("label");
-            label.htmlFor = this.hasAttribute("button-trigger") ? id : id + "-input";
-            label.id = id + "-label";
-            label.textContent = this.getAttribute("label") ?? "";
-            label.part.add("label");
-            const wrapper = document.createElement("div");
-            wrapper.className = "control";
-            const selected = document.createElement("div");
-            selected.className = "selected";
-            selected.hidden = true;
-            selected.setAttribute("aria-label", this.getAttribute("selected-label") ?? "Selected options");
-            const input = document.createElement("input");
-            input.id = id + "-input";
-            input.type = "text";
-            input.role = "combobox";
-            input.autocomplete = "off";
-            input.setAttribute("aria-autocomplete", "list");
-            input.setAttribute("aria-haspopup", "listbox");
-            input.value = this.currentValue;
-            input.placeholder = this.getAttribute("placeholder") ?? "";
-            input.readOnly = this.hasAttribute("read-only");
-            input.disabled = this.hasAttribute("disabled");
-            input.required = this.hasAttribute("required");
-            for (const name of ["aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"]) {
-                const value = this.getAttribute(name);
-                if (value !== null)
-                    input.setAttribute(name, value);
-            }
-            input.part.add("control");
-            this.fallbackInput = input;
-            const inputSlot = document.createElement("slot");
-            inputSlot.name = "input";
-            inputSlot.append(input);
-            this.inputSlot = inputSlot;
-            inputSlot.addEventListener("slotchange", () => { this.bindInput(); this.syncAria(); this.syncFormState(); });
-            const triggerSlot = document.createElement("slot");
-            triggerSlot.name = "button";
-            triggerSlot.hidden = !this.hasAttribute("button-trigger");
-            this.buttonTriggerSlot = triggerSlot;
-            const trigger = document.createElement("button");
-            trigger.type = "button";
-            trigger.id = id;
-            trigger.className = "trigger";
-            trigger.setAttribute("role", "combobox");
-            trigger.setAttribute("aria-haspopup", "listbox");
-            this.fallbackButtonTrigger = trigger;
-            const triggerValue = document.createElement("span");
-            triggerValue.className = "trigger-value";
-            trigger.append(triggerValue);
-            trigger.addEventListener("click", event => this.toggleOpen(event));
-            trigger.addEventListener("keydown", event => this.onKeyDown(event));
-            if (this.hasAttribute("button-trigger"))
-                triggerSlot.append(trigger);
-            triggerSlot.addEventListener("slotchange", () => {
-                if (triggerSlot.assignedElements({ flatten: true }).length)
-                    trigger.remove();
-                else if (this.hasAttribute("button-trigger") && trigger.parentElement !== triggerSlot)
-                    triggerSlot.append(trigger);
-                this.syncAria();
-            });
-            const clear = document.createElement("button");
-            clear.type = "button";
-            clear.className = "clear";
-            const clearIcon = document.createElement("slot");
-            clearIcon.name = "clear-icon";
-            const fallbackClearIcon = document.createElement("span");
-            fallbackClearIcon.textContent = "×";
-            fallbackClearIcon.setAttribute("aria-hidden", "true");
-            clearIcon.append(fallbackClearIcon);
-            clear.append(clearIcon);
-            clear.setAttribute("aria-label", this.getAttribute("clear-label") ?? "Clear selection");
-            clear.hidden = !this.hasAttribute("clearable");
-            clear.addEventListener("pointerdown", event => event.preventDefault());
-            clear.addEventListener("click", event => this.clearSelection(event));
-            const clearSlot = document.createElement("slot");
-            clearSlot.name = "clear-button";
-            clearSlot.append(clear);
-            clearSlot.addEventListener("slotchange", () => this.syncClearButton());
-            const expand = document.createElement("span");
-            expand.className = "expand";
-            expand.setAttribute("aria-hidden", "true");
-            const expandSlot = document.createElement("slot");
-            expandSlot.name = "expand-icon";
-            expandSlot.addEventListener("slotchange", () => this.syncExpandIcon());
-            const fallbackExpand = document.createElement("span");
-            fallbackExpand.textContent = "⌄";
-            expandSlot.append(fallbackExpand);
-            expand.append(expandSlot);
-            const list = document.createElement("ul");
-            list.setAttribute("role", "listbox");
-            list.id = `listbox-${this.instanceId}`;
-            const listboxSlot = document.createElement("slot");
-            listboxSlot.name = "listbox";
-            listboxSlot.append(list);
-            listboxSlot.addEventListener("slotchange", () => this.updateOptions());
-            const empty = document.createElement("div");
-            empty.className = "empty";
-            empty.setAttribute("role", "status");
-            empty.hidden = true;
-            wrapper.append(selected, triggerSlot, inputSlot, expand, clearSlot, listboxSlot, empty);
-            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;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px;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)}.selected{display:flex;flex-wrap:wrap;gap:4px;min-width:0}.selected[hidden]{display:none}.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;border:1px solid var(--spui-tag-border,var(--spui-ui-stroke,#d1d1d1));border-radius:var(--spui-tag-radius,4px);background:var(--spui-tag-background,var(--spui-ui-surface-hover,#f5f5f5));color:var(--spui-ui-text,inherit);font-size:.9em}.remove,.clear{width:24px;height:24px;border:0;border-radius:3px;background:transparent;color:inherit;cursor:pointer}.remove:hover,.clear:hover{background:var(--spui-ui-surface-hover,#f5f5f5)}input{box-sizing:border-box;flex:1 1 120px;min-width:80px;min-height:calc(var(--spui-control-height,36px) - 10px);padding:4px 8px;border:0;outline:0;background:transparent;color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit}input:focus-visible{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:1px}input:disabled{opacity:.55}ul{position:absolute;z-index:var(--spui-layer-dropdown,20);top:calc(100% + 4px);inset-inline:0;box-sizing:border-box;max-height:240px;overflow:auto;margin:0;padding:4px;list-style:none;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-card-radius,8px);background:var(--spui-ui-surface,#fff);box-shadow:var(--spui-card-shadow,0 4px 14px #0002)}:host([positioning^=above]) ul{top:auto;bottom:calc(100% + 4px)}ul[hidden]{display:none}.option-group{display:grid;gap:2px;padding-block:2px}.group-label{padding:6px 10px;color:var(--spui-ui-muted,inherit);font-size:12px;font-weight:600}[role=option],li.empty{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--spui-control-radius,4px);color:var(--spui-ui-text,inherit);cursor:pointer}[role=option][data-active=true],[role=option][aria-selected=true]{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.check{display:inline-grid;place-items:center;width:16px;height:16px;flex:none;border:1px solid var(--spui-ui-stroke,#8a8886);border-radius:3px;color:var(--spui-ui-accent,#0f6cbd);font-size:12px}[role=option][aria-selected=true] .check{border-color:var(--spui-ui-accent,#0f6cbd);background:var(--spui-ui-canvas,#f5f5f5)}[role=option][aria-disabled=true]{opacity:.5;cursor:not-allowed}li.empty{color:var(--spui-ui-muted,inherit);cursor:default}:host([size=small]) input{min-height:30px}:host([size=large]) input{min-height:44px}:host([appearance=filled-darker]) input{background:var(--spui-ui-surface-sunken,#f0f0f0)}:host([appearance=filled-lighter]) input{background:var(--spui-ui-surface,#fff)}:host([appearance=underline]) input{border-radius:0;border-width:0 0 1px}@media(forced-colors:active){.control,ul{border-color:CanvasText;box-shadow:none}.tag{border-color:CanvasText}.check{border-color:CanvasText}li[role=option][data-active=true]{outline:1px solid Highlight}}:host(:not([multiselect])) .control{display:block;gap:0;padding:0;border:0;background:transparent;box-shadow:none}:host(:not([multiselect])) input{box-sizing:border-box;width:100%;min-height:var(--spui-control-height,36px);padding:8px 12px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886)));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,#fff)));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit}:host(:not([multiselect])) input:focus-visible{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}:host([multiselect]) .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))}@media(forced-colors:active){:host(:not([multiselect])) input{border-color:FieldText;background:Field;color:FieldText}}`;
-            style.textContent += ".expand{display:inline-flex;align-items:center;justify-content:center;flex:none;color:inherit}.expand[hidden]{display:none}::slotted([slot=clear-button]){cursor:pointer}:host([read-only]) .expand,:host([button-trigger]) .expand{position:absolute;inset-inline-end:6px;top:6px}:host([read-only]) .clear,:host([read-only]) ::slotted([slot=clear-button]),:host([button-trigger]) .clear,:host([button-trigger]) ::slotted([slot=clear-button]){position:absolute;inset-inline-end:32px;top:6px}:host([read-only]) input{width:calc(100% - 56px)}:host([read-only]:not([clearable])) input{width:calc(100% - 28px)}.trigger,::slotted([slot=button]){box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:var(--spui-control-height,36px);padding:8px 12px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886)));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,#fff)));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit;text-align:start;cursor:pointer}.trigger:focus-visible,::slotted([slot=button]:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#005a9e));outline-offset:2px}.trigger:disabled,::slotted([slot=button][disabled]){opacity:.55;cursor:not-allowed}:host([button-trigger][size=small]) .trigger,:host([button-trigger][size=small]) ::slotted([slot=button]){min-height:30px}:host([button-trigger][size=large]) .trigger,:host([button-trigger][size=large]) ::slotted([slot=button]){min-height:44px}:host([button-trigger]) .trigger-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(forced-colors:active){.trigger,:host([button-trigger]) ::slotted([slot=button]){border-color:ButtonText;background:ButtonFace;color:ButtonText}.trigger:focus-visible,:host([button-trigger]) ::slotted([slot=button]:focus-visible){outline-color:Highlight}}";
-            style.textContent = style.textContent?.replaceAll("li.empty", ".empty") ?? "";
-            style.textContent += `::slotted([slot=input]){box-sizing:border-box;flex:1 1 120px;min-width:80px;min-height:calc(var(--spui-control-height,36px) - 10px);padding:4px 8px;border:0;outline:0;background:transparent;color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit}::slotted([slot=input]:focus-visible){outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:1px}:host(:not([multiselect])) ::slotted([slot=input]){box-sizing:border-box;width:100%;min-height:var(--spui-control-height,36px);padding:8px 12px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886)));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,#fff)));color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit}`;
-            shadow.replaceChildren(style, label, wrapper);
-            this.bindInput();
-            this.syncExpandIcon();
-            this.updateOptions();
-        }
-    }
-    customElements.define("spui-combobox", SpuiCombobox);
-}