@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/tag-picker.js

@@ -1,697 +0,0 @@
-import { base, syncHostAccessibleName } from "./shared.js";
-import { getFloatingPosition } from "./floating-position.js";
-/** Searchable multi-select picker with native form association and light-DOM options. */
-export function defineTagPicker() {
-    if (customElements.get("spui-tag-picker"))
-        return;
-    class SpuiTagPicker extends HTMLElement {
-        static formAssociated = true;
-        static observedAttributes = ["label", "placeholder", "selected-values", "selected-options", "default-selected-options", "input-value", "input-appearance", "input-disabled", "input-aria-label", "input-aria-describedby", "clearable", "selected-label", "inline", "no-popover", "disabled", "required", "name", "no-results", "remove-label", "open", "default-open", "positioning", "disable-auto-focus", "aria-label", "aria-labelledby", "aria-description", "aria-describedby"];
-        internals;
-        observer;
-        resizeObserver;
-        events;
-        buttonDisabledDefaults = new WeakMap();
-        instanceId = `tag-picker-${crypto.randomUUID()}`;
-        selected = new Set();
-        query = "";
-        activeIndex = -1;
-        openState = false;
-        openControlled = false;
-        formDisabled = false;
-        initialValues = [];
-        positioningValue;
-        get form() { return this.internals?.form ?? null; }
-        constructor() {
-            super();
-            try {
-                this.internals = this.attachInternals();
-            }
-            catch { /* Keep selection usable where form-associated custom elements are unavailable. */ }
-        }
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.events?.abort();
-            this.events = new AbortController();
-            const options = { signal: this.events.signal };
-            window.addEventListener("resize", this.positionList, options);
-            window.addEventListener("scroll", this.positionList, { ...options, capture: true });
-            document.addEventListener("pointerdown", this.onOutsidePointerDown, { ...options, capture: true });
-            this.resizeObserver?.disconnect();
-            this.resizeObserver = new ResizeObserver(this.positionList);
-            const control = this.shadowRoot?.querySelector(".control");
-            const list = this.shadowRoot?.querySelector(".popup");
-            if (control)
-                this.resizeObserver.observe(control);
-            if (list)
-                this.resizeObserver.observe(list);
-            this.addEventListener("click", this.onButtonClick);
-            this.addEventListener("keydown", this.onButtonKeyDown);
-            this.addEventListener("focusout", this.onPickerFocusOut);
-            if (this.hasAttribute("open")) {
-                this.openControlled = true;
-                this.openState = this.getAttribute("open") !== "false";
-            }
-            else
-                this.openState = this.hasAttribute("default-open");
-            this.initialValues = this.readSelectedValues();
-            this.selected = new Set(this.initialValues);
-            this.query = this.getAttribute("input-value") ?? "";
-            this.observer = new MutationObserver(() => { this.renderOptions(); this.syncForm(); });
-            this.observer.observe(this, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ["value", "text", "label", "group", "disabled", "selected"] });
-            this.syncButtonSlot();
-            this.renderOptions();
-            this.syncForm();
-        }
-        disconnectedCallback() { this.observer?.disconnect(); this.resizeObserver?.disconnect(); this.events?.abort(); this.hideList(); }
-        attributeChangedCallback(name, _oldValue, value) {
-            if (!this.isConnected)
-                return;
-            if (name === "selected-values" || name === "selected-options" || name === "default-selected-options") {
-                this.initialValues = this.readSelectedValues();
-                this.selected = new Set(this.initialValues);
-                this.renderOptions();
-            }
-            else if (name === "label") {
-                const label = this.shadowRoot?.querySelector("label");
-                if (label)
-                    label.textContent = this.getAttribute("label") ?? "";
-            }
-            else if (name === "placeholder") {
-                const input = this.input();
-                if (input)
-                    input.placeholder = this.getAttribute("placeholder") ?? "";
-            }
-            else if (name === "input-value") {
-                this.query = value ?? "";
-                const input = this.input();
-                if (input)
-                    input.value = this.query;
-                this.renderOptions();
-            }
-            else if (name === "input-disabled") {
-                const input = this.input();
-                if (input)
-                    input.disabled = this.isDisabled() || this.hasAttribute("input-disabled");
-            }
-            else if (name === "input-aria-label" || name === "input-aria-describedby") {
-                const input = this.input();
-                const target = name === "input-aria-label" ? "aria-label" : "aria-describedby";
-                if (input)
-                    this.hasAttribute(name) ? input.setAttribute(target, this.getAttribute(name)) : input.removeAttribute(target);
-            }
-            else if (name === "clearable") {
-                const input = this.input();
-                if (input)
-                    input.type = this.hasAttribute("clearable") ? "search" : "text";
-            }
-            else if (name === "aria-label" || name === "aria-labelledby" || name === "aria-description" || name === "aria-describedby") {
-                const input = this.input();
-                if (input)
-                    syncHostAccessibleName(this, input);
-            }
-            else if (name === "positioning") {
-                this.positionList();
-            }
-            else if (name === "open") {
-                this.openControlled = this.hasAttribute("open");
-                if (this.openControlled)
-                    this.openState = this.getAttribute("open") !== "false";
-                this.syncAria();
-            }
-            else if (name === "default-open" && !this.openControlled) {
-                this.openState = this.hasAttribute("default-open");
-                this.syncAria();
-            }
-            else
-                this.renderOptions();
-            this.syncAria();
-            this.syncForm();
-        }
-        get value() { return [...this.selected]; }
-        set value(values) { this.setSelected(Array.isArray(values) ? values : []); }
-        get inputValue() { return this.query; }
-        set inputValue(value) { this.query = String(value ?? ""); const input = this.input(); if (input)
-            input.value = this.query; this.renderOptions(); }
-        get selectedValues() { return this.value; }
-        set selectedValues(values) { this.value = values; }
-        get selectedOptions() { return this.value; }
-        set selectedOptions(values) { this.value = values; }
-        get defaultSelectedOptions() { return this.readSelectedValues(); }
-        set defaultSelectedOptions(values) { this.setAttribute("default-selected-options", JSON.stringify(values)); }
-        get open() { return this.openState; }
-        set open(value) { this.openControlled = true; this.openState = Boolean(value); this.syncAria(); }
-        get defaultOpen() { return this.openState; }
-        set defaultOpen(value) { if (!this.openControlled) {
-            this.openState = Boolean(value);
-            this.syncAria();
-        } }
-        get positioning() { return this.positioningValue; }
-        set positioning(value) { this.positioningValue = value; this.positionList(); }
-        isDisabled() { return this.formDisabled || this.hasAttribute("disabled"); }
-        setOpen(value, reason, event) {
-            if (value && this.isDisabled())
-                return;
-            const changed = this.open !== value;
-            if (!changed)
-                return;
-            if (!this.openControlled)
-                this.openState = value;
-            this.syncAria();
-            const sourceEvent = event ?? new Event("programmatic");
-            this.dispatchEvent(new CustomEvent("spui-open-change", { detail: { open: value, reason, event: sourceEvent, type: sourceEvent.type }, bubbles: true, composed: true }));
-        }
-        formDisabledCallback(disabled) { this.formDisabled = disabled; const input = this.input(); if (input)
-            input.disabled = this.isDisabled(); this.syncAria(); }
-        formResetCallback() { this.selected = new Set(this.initialValues); this.query = ""; this.closeList(); this.renderOptions(); this.syncForm(); }
-        formStateRestoreCallback(state) {
-            if (state instanceof FormData)
-                this.setSelected(state.getAll(this.getAttribute("name") ?? "").map(String));
-            else if (typeof state === "string") {
-                try {
-                    this.setSelected(JSON.parse(state));
-                }
-                catch {
-                    this.setSelected(state ? [state] : []);
-                }
-            }
-        }
-        buttonTrigger() {
-            return this.shadowRoot?.querySelector('slot[name="button"]')?.assignedElements({ flatten: true }).find((element) => element instanceof HTMLElement) ?? null;
-        }
-        onButtonClick = (event) => {
-            const trigger = this.buttonTrigger();
-            if (!trigger || !event.composedPath().includes(trigger))
-                return;
-            if (this.isDisabled()) {
-                event.preventDefault();
-                return;
-            }
-            if (this.open)
-                this.closeList("pointer", event);
-            else {
-                this.setOpen(true, "pointer", event);
-                this.activeIndex = this.hasAttribute("disable-auto-focus") ? -1 : this.filteredOptions().findIndex(option => !option.disabled);
-                this.syncAria();
-            }
-        };
-        onButtonKeyDown = (event) => {
-            const trigger = this.buttonTrigger();
-            if (!trigger || !event.composedPath().includes(trigger))
-                return;
-            if (event.key === "Escape" && this.open) {
-                event.preventDefault();
-                this.closeList("escape", event);
-                trigger.focus();
-            }
-            else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-                event.preventDefault();
-                this.moveActive(event.key === "ArrowDown" ? 1 : -1, event);
-            }
-            else if ((event.key === "Enter" || event.key === " ") && this.open && this.activeIndex >= 0) {
-                event.preventDefault();
-                const option = this.filteredOptions()[this.activeIndex];
-                if (option)
-                    this.toggleOption(option.value, event.key === "Enter", "keyboard", event);
-            }
-        };
-        onPickerFocusOut = (event) => { window.setTimeout(() => { if (!this.matches(":focus-within"))
-            this.closeList("blur", event); }, 0); };
-        onOutsidePointerDown = (event) => { if (!event.composedPath().includes(this))
-            this.closeList("outside", event); };
-        popup() {
-            return this.shadowRoot?.querySelector(".popup");
-        }
-        hideList() {
-            const popup = this.popup();
-            if (!popup)
-                return;
-            try {
-                popup.hidePopover?.();
-            }
-            catch { /* It may not have been opened in a supporting browser. */ }
-            popup.hidden = true;
-        }
-        positionList = () => {
-            const popup = this.popup();
-            const anchor = this.shadowRoot?.querySelector(".control");
-            if ((!this.open && !this.hasAttribute("no-popover")) || !popup || !anchor)
-                return;
-            popup.hidden = false;
-            if (this.hasAttribute("inline") || this.hasAttribute("no-popover")) {
-                if (popup.matches(":popover-open")) {
-                    try {
-                        popup.hidePopover?.();
-                    }
-                    catch { /* Keep the in-flow popup usable when the native API rejects a transition. */ }
-                }
-                // A closed native popover is hidden by the browser's UA stylesheet. Remove
-                // the popover behavior when this surface is rendered in the regular layer.
-                popup.removeAttribute("popover");
-                popup.dataset.placement = "bottom";
-                return;
-            }
-            if (!popup.hasAttribute("popover"))
-                popup.setAttribute("popover", "manual");
-            if (typeof popup.showPopover === "function" && !popup.matches(":popover-open")) {
-                try {
-                    popup.showPopover();
-                }
-                catch { /* Fixed positioning remains a fallback for browsers without Popover API support. */ }
-            }
-            const rect = anchor.getBoundingClientRect();
-            const width = Math.min(rect.width, window.innerWidth - 8);
-            popup.style.width = `${width}px`;
-            const direction = getComputedStyle(this).direction === "rtl" ? "rtl" : "ltr";
-            const config = this.positioningValue;
-            const raw = typeof config === "string" ? config : config?.position ?? "below";
-            const [side = "below", suffix] = raw.split("-");
-            const placementMap = { above: "top", below: "bottom", before: "start", after: "end", top: "top", bottom: "bottom", left: "left", right: "right", start: "start", end: "end" };
-            const placement = placementMap[side] ?? "bottom";
-            const align = (typeof config === "object" && config ? config.align : undefined) ?? (suffix === "start" || suffix === "end" || suffix === "top" || suffix === "bottom" ? suffix : "start");
-            const options = typeof config === "object" && config ? config : undefined;
-            const offset = typeof options?.offset === "number" ? options.offset : typeof options?.offset === "object" ? options.offset.mainAxis : 4;
-            const fallback = (options?.fallbackPositions ?? []).map(value => {
-                const [fallbackSide, fallbackAlign] = value.split("-");
-                return { placement: placementMap[fallbackSide] ?? "bottom", align: fallbackAlign };
-            });
-            const position = getFloatingPosition(rect, { width: popup.offsetWidth, height: popup.offsetHeight }, placement, direction, offset, undefined, align, fallback, options?.pinned, undefined, undefined, { coverTarget: options?.coverTarget });
-            popup.dataset.placement = position.placement;
-            popup.style.left = `${position.left}px`;
-            popup.style.top = `${position.top}px`;
-        };
-        syncButtonSlot() { this.toggleAttribute("data-button-trigger", this.buttonTrigger() !== null); this.syncAria(); }
-        input() { return this.shadowRoot?.querySelector("input") ?? null; }
-        optionContent(element, slot) { return element.querySelector(`:scope > [slot="${slot}"]`); }
-        optionLabel(element) {
-            const label = element.getAttribute("label") ?? this.optionContent(element, "label")?.textContent;
-            if (label !== null && label !== undefined)
-                return label.trim();
-            return [...element.childNodes].filter(node => !(node instanceof Element && ["media", "secondary-content"].includes(node.getAttribute("slot") ?? ""))).map(node => node.textContent ?? "").join("").trim();
-        }
-        appendOptionContent(target, option, slot) {
-            const source = this.optionContent(option.element, slot);
-            if (!source)
-                return;
-            const content = document.createElement("span");
-            content.className = slot === "media" ? "option-media" : "option-secondary";
-            if (slot === "media")
-                content.setAttribute("aria-hidden", "true");
-            for (const node of source.childNodes)
-                content.append(node.cloneNode(true));
-            target.append(content);
-        }
-        options() {
-            return [...this.querySelectorAll("spui-tag-picker-option,option")].map(element => ({
-                element,
-                value: element.getAttribute("value") ?? "",
-                label: element.getAttribute("text")?.trim() || this.optionLabel(element),
-                group: element.getAttribute("group")?.trim() || element.closest("spui-tag-picker-option-group")?.getAttribute("label")?.trim() || "",
-                disabled: element.hasAttribute("disabled") || Boolean(element.closest("spui-tag-picker-option-group")?.hasAttribute("disabled")),
-                selected: element.hasAttribute("selected")
-            })).filter(option => option.value && option.label);
-        }
-        readSelectedValues() {
-            const serialized = this.getAttribute("selected-options") ?? this.getAttribute("selected-values") ?? this.getAttribute("default-selected-options");
-            if (serialized !== null) {
-                try {
-                    const values = JSON.parse(serialized);
-                    return Array.isArray(values) ? values.filter((value) => typeof value === "string") : [];
-                }
-                catch {
-                    return [];
-                }
-            }
-            return this.options().filter(option => option.selected).map(option => option.value);
-        }
-        filteredOptions() {
-            const query = this.query.trim().toLocaleLowerCase(this.lang || undefined);
-            return this.options().filter(option => !query || option.label.toLocaleLowerCase(this.lang || undefined).includes(query));
-        }
-        setSelected(values) {
-            const available = new Set(this.options().map(option => option.value));
-            this.selected = new Set(values.filter(value => available.has(value)));
-            this.renderOptions();
-            this.syncForm();
-        }
-        toggleOption(value, closeAfterSelection, reason, event) {
-            const option = this.options().find(item => item.value === value);
-            if (!option || option.disabled || this.isDisabled())
-                return;
-            if (this.selected.has(value))
-                this.selected.delete(value);
-            else
-                this.selected.add(value);
-            this.query = "";
-            const input = this.input();
-            if (input)
-                input.value = "";
-            this.setOpen(!closeAfterSelection, reason, event);
-            this.renderOptions();
-            this.activeIndex = closeAfterSelection ? -1 : this.filteredOptions().findIndex(item => !item.disabled && !this.selected.has(item.value));
-            this.syncAria();
-            this.syncForm();
-            this.dispatchEvent(new CustomEvent("spui-change", { detail: { values: this.value, selectedValues: this.value }, bubbles: true, composed: true }));
-            const detail = event instanceof KeyboardEvent
-                ? { value, selectedOptions: this.value, event, type: "keydown" }
-                : { value, selectedOptions: this.value, event: event, type: "click" };
-            this.dispatchEvent(new CustomEvent("spui-option-select", { detail, bubbles: true, composed: true }));
-        }
-        removeValue(value) {
-            if (!this.selected.has(value) || this.isDisabled())
-                return;
-            this.selected.delete(value);
-            this.renderOptions();
-            this.syncForm();
-            this.input()?.focus();
-            this.dispatchEvent(new CustomEvent("spui-change", { detail: { values: this.value, selectedValues: this.value }, bubbles: true, composed: true }));
-        }
-        syncForm() {
-            const values = this.value;
-            const input = this.input();
-            input?.setAttribute("aria-required", String(this.hasAttribute("required")));
-            if (input)
-                input.disabled = this.isDisabled() || this.hasAttribute("input-disabled");
-            const name = this.getAttribute("name") ?? "";
-            const formData = new FormData();
-            if (name)
-                values.forEach(value => formData.append(name, value));
-            this.internals?.setFormValue(values.length && name ? formData : null, JSON.stringify(values));
-            const missing = this.hasAttribute("required") && values.length === 0;
-            try {
-                this.internals?.setValidity(missing ? { valueMissing: true } : {}, missing ? "Choose at least one option." : "", (this.buttonTrigger() ?? input) ?? undefined);
-            }
-            catch { /* The input itself retains required semantics as a fallback. */ }
-        }
-        syncAria() {
-            const input = this.input();
-            const list = this.shadowRoot?.querySelector("[role=listbox]");
-            if (!input || !list)
-                return;
-            const expanded = this.open || this.hasAttribute("no-popover");
-            input.setAttribute("aria-expanded", String(expanded));
-            if (expanded)
-                input.setAttribute("aria-controls", list.id);
-            else
-                input.removeAttribute("aria-controls");
-            const trigger = this.buttonTrigger();
-            if (trigger) {
-                trigger.setAttribute("aria-haspopup", "listbox");
-                trigger.setAttribute("aria-expanded", String(this.open));
-                trigger.setAttribute("aria-required", String(this.hasAttribute("required")));
-                if (this.open)
-                    trigger.setAttribute("aria-controls", list.id);
-                else
-                    trigger.removeAttribute("aria-controls");
-                const originallyDisabled = this.buttonDisabledDefaults.get(trigger) ?? trigger.hasAttribute("disabled");
-                this.buttonDisabledDefaults.set(trigger, originallyDisabled);
-                const disabled = this.isDisabled() || originallyDisabled;
-                if ("disabled" in trigger)
-                    trigger.disabled = disabled;
-                else if (disabled)
-                    trigger.setAttribute("disabled", "");
-                else
-                    trigger.removeAttribute("disabled");
-                if (this.isDisabled())
-                    trigger.setAttribute("aria-disabled", "true");
-                else
-                    trigger.removeAttribute("aria-disabled");
-            }
-            const active = this.shadowRoot?.querySelector(`[data-option-index="${this.activeIndex}"]`);
-            if (expanded && active)
-                input.setAttribute("aria-activedescendant", active.id);
-            else
-                input.removeAttribute("aria-activedescendant");
-            list.querySelectorAll("[role=option]").forEach(option => { option.dataset.active = String(expanded && Number(option.dataset.optionIndex) === this.activeIndex); });
-            const empty = this.shadowRoot?.querySelector(".empty");
-            if (empty)
-                empty.hidden = !expanded || this.filteredOptions().length > 0;
-            list.hidden = false;
-            if (expanded)
-                this.positionList();
-            else
-                this.hideList();
-        }
-        closeList(reason = "programmatic", event) { this.setOpen(false, reason, event); this.activeIndex = -1; this.syncAria(); }
-        moveActive(delta, event) {
-            const options = this.filteredOptions();
-            if (!options.length) {
-                this.activeIndex = -1;
-                this.syncAria();
-                return;
-            }
-            let index = this.open ? this.activeIndex : delta > 0 ? -1 : 0;
-            for (let count = 0; count < options.length; count++) {
-                index = (index + delta + options.length) % options.length;
-                if (!options[index].disabled)
-                    break;
-            }
-            this.setOpen(true, "keyboard", event);
-            this.activeIndex = index;
-            this.syncAria();
-            this.shadowRoot?.querySelector(`[data-option-index="${index}"]`)?.scrollIntoView({ block: "nearest" });
-        }
-        onKeyDown(event) {
-            if (event.key === "ArrowDown") {
-                event.preventDefault();
-                this.moveActive(1, event);
-            }
-            else if (event.key === "ArrowUp") {
-                event.preventDefault();
-                this.moveActive(-1, event);
-            }
-            else if ((event.key === "Enter" || event.key === " ") && this.open && this.activeIndex >= 0) {
-                event.preventDefault();
-                const option = this.filteredOptions()[this.activeIndex];
-                if (option)
-                    this.toggleOption(option.value, event.key === "Enter", "keyboard", event);
-            }
-            else if (event.key === "Escape" && this.open) {
-                event.preventDefault();
-                this.closeList("escape", event);
-            }
-            else if (event.key === "Backspace" && !this.query && this.selected.size) {
-                event.preventDefault();
-                this.removeValue([...this.selected].at(-1));
-            }
-        }
-        renderOptions() {
-            const list = this.shadowRoot?.querySelector("[role=listbox]");
-            const selected = this.shadowRoot?.querySelector(".selected");
-            if (!list || !selected)
-                return;
-            const selectedOptions = this.options().filter(option => this.selected.has(option.value));
-            selected.replaceChildren();
-            const selectedGroup = this.querySelector("spui-tag-picker-group[slot=selected-group]");
-            const selectedSlot = document.createElement("slot");
-            selectedSlot.name = "selected-group";
-            selectedSlot.part.add("selected-group");
-            selectedSlot.hidden = !selectedGroup;
-            selected.setAttribute("role", "group");
-            selected.setAttribute("aria-label", this.getAttribute("selected-label") || "Selected options");
-            selected.append(selectedSlot);
-            for (const option of selectedGroup ? [] : selectedOptions) {
-                const chip = document.createElement("span");
-                chip.className = "chip";
-                chip.part.add("chip");
-                this.appendOptionContent(chip, option, "media");
-                const text = document.createElement("span");
-                text.textContent = option.label;
-                const remove = document.createElement("button");
-                remove.type = "button";
-                remove.className = "remove";
-                remove.textContent = "×";
-                remove.setAttribute("aria-label", `${this.getAttribute("remove-label") || "Remove"} ${option.label}`);
-                remove.disabled = option.disabled || this.isDisabled();
-                remove.addEventListener("click", () => this.removeValue(option.value));
-                chip.append(text, remove);
-                selected.append(chip);
-            }
-            const options = this.filteredOptions();
-            list.replaceChildren();
-            let previousGroup;
-            let groupOptions = null;
-            options.forEach((option, index) => {
-                if (option.group !== previousGroup) {
-                    groupOptions = null;
-                    if (option.group) {
-                        const group = document.createElement("li");
-                        group.className = "option-group";
-                        group.setAttribute("role", "group");
-                        group.setAttribute("aria-label", option.group);
-                        const heading = document.createElement("div");
-                        heading.className = "group-heading";
-                        heading.setAttribute("role", "presentation");
-                        heading.textContent = option.group;
-                        groupOptions = document.createElement("div");
-                        groupOptions.className = "option-group-options";
-                        groupOptions.setAttribute("role", "presentation");
-                        group.append(heading, groupOptions);
-                        list.append(group);
-                    }
-                }
-                const item = document.createElement(option.group ? "div" : "li");
-                item.id = `${this.instanceId}-option-${index}`;
-                item.dataset.optionIndex = String(index);
-                item.dataset.active = String(this.open && index === this.activeIndex);
-                item.setAttribute("role", "option");
-                item.setAttribute("aria-selected", String(this.selected.has(option.value)));
-                if (option.disabled)
-                    item.setAttribute("aria-disabled", "true");
-                this.appendOptionContent(item, option, "media");
-                const label = document.createElement("span");
-                label.className = "option-label";
-                label.textContent = option.label;
-                item.append(label);
-                this.appendOptionContent(item, option, "secondary-content");
-                item.addEventListener("pointerdown", event => event.preventDefault());
-                item.addEventListener("click", event => this.toggleOption(option.value, true, "pointer", event));
-                (groupOptions ?? list).append(item);
-                previousGroup = option.group;
-            });
-            const empty = this.shadowRoot?.querySelector(".empty");
-            if (empty) {
-                empty.textContent = this.getAttribute("no-results") || "No results";
-                empty.hidden = options.length > 0;
-            }
-            this.syncAria();
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const label = document.createElement("label");
-            label.htmlFor = `${this.instanceId}-input`;
-            label.textContent = this.getAttribute("label") ?? "";
-            label.part.add("label");
-            const control = document.createElement("div");
-            control.className = "control";
-            control.part.add("control");
-            const selected = document.createElement("div");
-            selected.className = "selected";
-            selected.part.add("selected");
-            const buttonSlot = document.createElement("slot");
-            buttonSlot.name = "button";
-            buttonSlot.addEventListener("slotchange", () => this.syncButtonSlot());
-            const secondarySlot = document.createElement("slot");
-            secondarySlot.name = "secondary-action";
-            secondarySlot.part.add("secondary-action");
-            const expandSlot = document.createElement("slot");
-            expandSlot.name = "expand-icon";
-            expandSlot.part.add("expand-icon");
-            const input = document.createElement("input");
-            input.id = `${this.instanceId}-input`;
-            input.type = this.hasAttribute("clearable") ? "search" : "text";
-            input.role = "combobox";
-            input.autocomplete = "off";
-            input.setAttribute("aria-autocomplete", "list");
-            input.setAttribute("aria-haspopup", "listbox");
-            input.setAttribute("aria-expanded", "false");
-            input.placeholder = this.getAttribute("placeholder") ?? "";
-            input.value = this.getAttribute("input-value") ?? "";
-            input.disabled = this.isDisabled() || this.hasAttribute("input-disabled");
-            input.part.add("input");
-            for (const name of ["input-aria-label", "input-aria-describedby"]) {
-                const value = this.getAttribute(name);
-                if (value !== null)
-                    input.setAttribute(name.replace("input-", ""), value);
-            }
-            const popup = document.createElement("div");
-            popup.className = "popup";
-            popup.setAttribute("popover", "manual");
-            popup.hidden = true;
-            popup.part.add("popup");
-            const list = document.createElement("ul");
-            list.id = `${this.instanceId}-listbox`;
-            list.setAttribute("role", "listbox");
-            list.setAttribute("aria-multiselectable", "true");
-            list.part.add("listbox");
-            const empty = document.createElement("div");
-            empty.className = "empty";
-            empty.setAttribute("role", "status");
-            empty.hidden = true;
-            input.addEventListener("input", event => { this.query = input.value; this.setOpen(true, "input", event); this.activeIndex = this.hasAttribute("disable-auto-focus") ? -1 : this.filteredOptions().findIndex(option => !option.disabled); this.renderOptions(); this.dispatchEvent(new CustomEvent("spui-input", { detail: { value: this.query }, bubbles: true, composed: true })); });
-            input.addEventListener("focus", event => { this.setOpen(true, "focus", event); this.renderOptions(); });
-            input.addEventListener("keydown", event => this.onKeyDown(event));
-            input.addEventListener("blur", event => window.setTimeout(() => { if (!this.matches(":focus-within"))
-                this.closeList("blur", event); }, 0));
-            popup.append(list, empty);
-            control.append(selected, buttonSlot, input, popup, secondarySlot, expandSlot);
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px);min-width:0}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;box-sizing:border-box;min-height:var(--spui-control-height,36px);padding:4px 8px;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,inherit)}.control:focus-within{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}.selected{display:contents}.chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 5px 2px 8px;border:1px solid var(--spui-base-stroke,var(--spui-ui-stroke,#d1d1d1));border-radius:999px;background:color-mix(in srgb,var(--spui-base-accent,var(--spui-ui-accent,#0078d4)) 12%,var(--spui-base-surface,var(--spui-ui-surface,#fff)));font-size:12px}.chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remove{display:grid;place-items:center;flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;font-size:16px;cursor:pointer}.remove:hover{background:color-mix(in srgb,currentColor 12%,transparent)}.remove:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4))}.remove:disabled{opacity:.5;cursor:not-allowed}input{flex:1 1 100px;min-width:72px;width:auto;min-height:28px;padding:2px 4px;border:0;outline:none;background:transparent;color:inherit;font:inherit}input::placeholder{color:var(--spui-ui-muted,#616161)}input:disabled{cursor:not-allowed}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)}ul[hidden]{display:none}.group-heading{padding:7px 10px 3px;color:var(--spui-ui-muted,inherit);font-size:11px;font-weight:600}li[role=option]{padding:8px 10px;border-radius:var(--spui-control-radius,4px);color:var(--spui-ui-text,inherit);cursor:pointer}li[role=option][data-active=true],li[role=option][aria-selected=true]{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}li[role=option][aria-disabled=true]{opacity:.5;cursor:not-allowed}.empty{position:absolute;z-index:calc(var(--spui-layer-dropdown,20) + 1);top:calc(100% + 4px);inset-inline:0;box-sizing:border-box;padding:12px;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);color:var(--spui-ui-muted,inherit)}.empty[hidden]{display:none}:host([disabled]) .control{opacity:.55}@media(forced-colors:active){.control,ul,.empty{border-color:CanvasText}.chip{border-color:CanvasText}li[role=option][data-active=true]{outline:1px solid Highlight}}`;
-            style.textContent += `.option-group{list-style:none;margin:0;padding:0}.option-media{display:inline-flex;align-items:center;justify-content:center;flex:none}.option-media img,.option-media svg{width:24px;height:24px;object-fit:cover}.chip .option-media img,.chip .option-media svg{width:20px;height:20px;border-radius:50%}li[role=option],[role=group] [role=option]{display:flex;align-items:center;gap:8px}.option-group-options [role=option]{padding:8px 10px;border-radius:var(--spui-control-radius,4px);color:var(--spui-ui-text,inherit);cursor:pointer}.option-group-options [role=option][data-active=true],.option-group-options [role=option][aria-selected=true]{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.option-group-options [role=option][aria-disabled=true]{opacity:.5;cursor:not-allowed}.option-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.option-secondary{margin-inline-start:auto;color:var(--spui-ui-muted,inherit);font-size:12px;white-space:nowrap}`;
-            style.textContent += `:host([data-button-trigger]) input{display:none}::slotted(button[slot=button]){align-self:center;display:inline-flex;align-items:center;min-width:32px;min-height:28px;padding:4px 8px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,#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;cursor:pointer}::slotted(button[slot=button][data-appearance=filled-darker]){background:var(--spui-ui-surface-sunken,var(--spui-ui-canvas,#f5f5f5))}::slotted(button[slot=button][data-appearance=filled-lighter]){background:var(--spui-ui-surface,var(--spui-semantic-input-background,#fff))}::slotted(button[slot=button][data-appearance=underline]){border:0;border-bottom:1px solid currentColor;border-radius:0;background:transparent}::slotted(button[slot=button][data-size=small]){min-height:24px;padding:2px 6px;font-size:12px}::slotted(button[slot=button][data-size=large]){min-height:40px;padding:6px 12px;font-size:16px}::slotted(button[slot=button]:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}:host([disabled])::slotted(button[slot=button]){opacity:.55;cursor:not-allowed}`;
-            style.textContent += `::slotted(spui-tag-picker-group){display:contents}:host([input-appearance=filled-darker]) .control{background:var(--spui-ui-surface-sunken,var(--spui-ui-canvas,#f5f5f5))}:host([input-appearance=filled-lighter]) .control{background:var(--spui-ui-surface,var(--spui-semantic-input-background,#fff))}:host([input-appearance=underline]) .control{border:0;border-bottom:1px solid var(--spui-control-border,var(--spui-ui-stroke,#8a8886));border-radius:0;background:transparent}`;
-            style.textContent += `::slotted([slot=secondary-action]){display:inline-flex;align-items:center;flex:none}::slotted([slot=expand-icon]){display:inline-flex;align-items:center;justify-content:center;flex:none}:host([inline]) .popup,:host([no-popover]) .popup{position:absolute;inset-inline:0;top:calc(100% + 4px);left:auto;width:100%!important;max-height:min(240px,calc(100dvh - 8px));z-index:var(--spui-layer-dropdown,20)}`;
-            style.textContent += `.popup{position:fixed;inset:auto;z-index:var(--spui-layer-popover,10000);box-sizing:border-box;max-width:calc(100vw - 8px);max-height:min(240px,calc(100dvh - 8px));overflow:auto;margin:0;padding:4px;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-card-radius,8px);background:var(--spui-ui-surface,#fff);color:var(--spui-ui-text,inherit);box-shadow:var(--spui-card-shadow,0 4px 14px #0002)}.popup[hidden]{display:none}.popup ul{position:static;inset:auto;z-index:auto;max-height:none;overflow:visible;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.popup .empty{position:static;inset:auto;z-index:auto;margin:0;padding:12px;border:0;border-radius:0;background:transparent;box-shadow:none}`;
-            const slot = document.createElement("slot");
-            slot.hidden = true;
-            shadow.append(style, label, control, slot);
-            syncHostAccessibleName(this, input);
-            this.renderOptions();
-        }
-    }
-    customElements.define("spui-tag-picker", SpuiTagPicker);
-    const definePart = (tag) => {
-        if (customElements.get(tag))
-            return;
-        class SpuiTagPickerPart extends HTMLElement {
-            static observedAttributes = ["value", "placeholder", "disabled", "clearable", "appearance", "aria-label", "aria-describedby"];
-            previous = new Map();
-            picker;
-            connectedCallback() { this.sync(); }
-            attributeChangedCallback() { this.sync(); }
-            sync() {
-                const picker = this.closest("spui-tag-picker");
-                if (!picker)
-                    return;
-                this.picker = picker;
-                if (tag === "spui-tag-picker-control" || tag === "spui-tag-picker-list") {
-                    while (this.firstChild)
-                        picker.insertBefore(this.firstChild, this);
-                    this.remove();
-                    return;
-                }
-                if (tag === "spui-tag-picker-group") {
-                    this.slot = "selected-group";
-                    if (!this.hasAttribute("role"))
-                        this.setAttribute("role", "group");
-                    return;
-                }
-                if (tag === "spui-tag-picker-input") {
-                    const map = { value: "input-value", appearance: "input-appearance", disabled: "input-disabled", "aria-label": "input-aria-label", "aria-describedby": "input-aria-describedby" };
-                    for (const name of SpuiTagPickerPart.observedAttributes) {
-                        const attribute = map[name] ?? name;
-                        if (this.hasAttribute(name)) {
-                            if (!this.previous.has(attribute))
-                                this.previous.set(attribute, picker.getAttribute(attribute));
-                            picker.setAttribute(attribute, this.getAttribute(name));
-                        }
-                        else if (this.previous.has(attribute)) {
-                            const original = this.previous.get(attribute);
-                            if (original === null)
-                                picker.removeAttribute(attribute);
-                            else
-                                picker.setAttribute(attribute, original);
-                            this.previous.delete(attribute);
-                        }
-                    }
-                }
-            }
-            disconnectedCallback() {
-                if (tag !== "spui-tag-picker-input")
-                    return;
-                for (const [attribute, original] of this.previous) {
-                    if (original === null)
-                        this.picker?.removeAttribute(attribute);
-                    else
-                        this.picker?.setAttribute(attribute, original);
-                }
-                this.previous.clear();
-                this.picker = undefined;
-            }
-        }
-        customElements.define(tag, SpuiTagPickerPart);
-    };
-    for (const tag of ["spui-tag-picker-control", "spui-tag-picker-group", "spui-tag-picker-input", "spui-tag-picker-list", "spui-tag-picker-option-group"])
-        definePart(tag);
-}