ajo-ui 0.1.0

package/dist/select.js

@@ -0,0 +1,961 @@
+import { defaultResultsLabel, flag, matchesTokens, resolveFilter, text, triggerAttrs } from "./utils.js";
+import { t as collection } from "./chunks/collection-DtRB63U4.js";
+import { n as popup, t as contentAttrs } from "./chunks/popup-C8Bb3l_g.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import { announce, callHandler, callRef, controlled, dom, id, listen, roving, statefulRootAttrs, typeahead } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/select.tsx
+var SelectContext = context(null);
+var fallbackString = (item) => {
+	if (item == null) return "";
+	if (typeof item === "string" || typeof item === "number" || typeof item === "bigint") return String(item);
+	if (typeof item === "object") {
+		const record = item;
+		if (record.label != null) return text(record.label);
+		if (record.value != null) return text(record.value);
+	}
+	return String(item);
+};
+var defaultFilter = (_item, search, label) => matchesTokens(search, label);
+var array = (value) => Array.isArray(value) ? value : value == null ? [] : [value];
+var CREATE_KEY = "\0create";
+var selectItems = collection("select", { rendered: false });
+var SelectRoot = function* ({ defaultInputValue, defaultOpen, defaultValue, inputValue, open }) {
+	const selectId = id("select");
+	const ownerDocument = dom(this) ? this.ownerDocument : null;
+	const fallbackInputId = `${selectId}-input`;
+	const labels = /* @__PURE__ */ new Map();
+	let activeKey = "";
+	let disabled = false;
+	let fieldReference = null;
+	let input = null;
+	let inputId = fallbackInputId;
+	let announceResults = false;
+	let closeFocus = null;
+	let lastResultCount = -1;
+	let onCreate;
+	let onInputValueChange;
+	let onOpenChange;
+	let onValueChange;
+	let pendingFocus = false;
+	let pendingReference = null;
+	let pendingSeed = "";
+	let pendingStep = 0;
+	let pop;
+	const searchState = controlled(this, {
+		fallback: String(inputValue ?? defaultInputValue ?? ""),
+		onChange: (next, event) => onInputValueChange?.(next, event)
+	});
+	const valueState = controlled(this, {
+		fallback: defaultValue ?? null,
+		onChange: (next, event) => onValueChange?.(next, event)
+	});
+	const live = announce(this);
+	const itemDomId = (key) => `${selectId}-item-${encodeURIComponent(key)}`;
+	const inPopup = (element) => Boolean(element && pop.content && pop.content.contains(element));
+	const clearFocusIntent = () => {
+		pendingFocus = false;
+		pendingReference = null;
+		pendingSeed = "";
+		pendingStep = 0;
+	};
+	pop = popup(this, {
+		prefix: "select",
+		profile: "select",
+		initialOpen: Boolean(open ?? defaultOpen),
+		disabled: () => disabled,
+		onOpenChange: (next, event) => onOpenChange?.(next, event),
+		reference: (view) => view.reference,
+		source: (view) => dom(view.reference) ? view.reference : null,
+		referenceHidden: "close",
+		dismiss: {
+			escape: false,
+			outside: true,
+			inside: (view) => [dom(view.reference) ? view.reference : null, view.content],
+			onDismiss: (event) => setOpen(false, event)
+		},
+		onPosition: () => {
+			if (!pendingFocus || pop.reference !== pendingReference) return;
+			pendingFocus = false;
+			const popupInput = inPopup(input) ? input : null;
+			if (popupInput) {
+				popupInput.focus();
+				if (pendingSeed) setSearch(pendingSeed);
+			} else {
+				const items = selectItems.items(pop.content);
+				let target = items.find((item) => selectedKeySet.has(item.dataset.value ?? "")) ?? items[0];
+				if (pendingStep && target) target = items[items.indexOf(target) + pendingStep] ?? target;
+				selectItems.focusItem(pop.content, target);
+			}
+			pendingReference = null;
+			pendingSeed = "";
+			pendingStep = 0;
+		},
+		onSync: (opened) => {
+			if (!opened) finishClose();
+		}
+	});
+	const restoreFocus = () => {
+		const active = ownerDocument?.activeElement;
+		const target = closeFocus ?? pop.trigger ?? input;
+		closeFocus = null;
+		if (!active || !pop.content?.contains(active)) return;
+		target?.focus();
+	};
+	const finishClose = () => {
+		restoreFocus();
+		clearFocusIntent();
+		if (!searchState.controlled && searchState.value) searchState.init("");
+		activeKey = "";
+	};
+	const setOpen = (next, event, focus) => {
+		if (disabled && next) return;
+		if (next === pop.open) return;
+		if (next) {
+			closeFocus = null;
+			if (inPopup(input)) pendingFocus = true;
+		}
+		if (!next) {
+			closeFocus = focus ?? null;
+			clearFocusIntent();
+		} else pendingReference = pop.reference;
+		pop.setOpen(next, event);
+	};
+	const effectiveReference = () => (inPopup(fieldReference) ? null : fieldReference) ?? pop.trigger ?? (inPopup(input) ? null : input);
+	const syncReference = () => {
+		const next = effectiveReference();
+		if (pop.reference === next) return;
+		clearFocusIntent();
+		pop.setReference(next);
+	};
+	const setReference = (element, previous) => {
+		if (!element && previous && fieldReference !== previous) return;
+		fieldReference = element;
+		syncReference();
+	};
+	const setInput = (element, previous) => {
+		if (!element && previous && input !== previous) return;
+		input = element;
+		const nextInputId = element?.id || fallbackInputId;
+		if (nextInputId !== inputId) {
+			inputId = nextInputId;
+			queueMicrotask(() => this.next());
+		}
+		syncReference();
+	};
+	const setTrigger = (element) => {
+		const had = Boolean(pop.trigger);
+		pop.setTrigger(element);
+		if (Boolean(element) !== had) queueMicrotask(() => this.next());
+		syncReference();
+	};
+	const setContent = (element) => {
+		pop.setContent(element);
+		syncReference();
+	};
+	const setSearch = (next, event) => {
+		searchState.set(next, event);
+		announceResults = true;
+		if (!pop.open) setOpen(true, event);
+	};
+	const setActive = (key) => {
+		if (key === activeKey) return;
+		if (!input) {
+			const target = selectItems.items(this).find((item) => item.dataset.value === key);
+			if (target && target !== ownerDocument?.activeElement) selectItems.focusItem(this, target);
+		}
+		this.next(() => activeKey = key);
+	};
+	const nav = roving(this, {
+		items: () => selectItems.items(this),
+		loop: () => false,
+		current: () => selectItems.items(this).find((item) => item.dataset.value === activeKey),
+		onMove: (target) => {
+			activeKey = target.dataset.value ?? "";
+			selectItems.highlight(this, target);
+			this.next();
+			queueMicrotask(() => target.scrollIntoView({ block: "nearest" }));
+		}
+	});
+	const focusNav = roving(this, {
+		items: () => selectItems.items(this),
+		onMove: (target, event) => {
+			selectItems.focusItem(this, target);
+		}
+	});
+	const ta = typeahead(this, {
+		items: () => selectItems.items(this).filter((item) => item.dataset.value !== CREATE_KEY),
+		onMatch: (target, event) => {
+			if (pop.open) selectItems.focusItem(this, target);
+			else {
+				target.click();
+				event.preventDefault();
+			}
+		}
+	});
+	let selectedKeySet = /* @__PURE__ */ new Set();
+	const chipsOf = () => Array.from(this.querySelectorAll("[data-slot=\"select-chip\"]"));
+	const rtl = () => getComputedStyle(this).direction === "rtl";
+	listen(this, "keydown", (event) => {
+		const target = event.target;
+		if (!target?.closest("[data-slot^=\"select\"]")) return;
+		if (target.dataset.slot === "select-chip") {
+			const chips = chipsOf();
+			const index = chips.indexOf(target);
+			const forward = rtl() ? "ArrowLeft" : "ArrowRight";
+			const backward = rtl() ? "ArrowRight" : "ArrowLeft";
+			if (event.key === "Escape") {
+				if (!pop.open) return;
+				event.preventDefault();
+				setOpen(false, event, input);
+				return;
+			}
+			if (event.key === backward) {
+				event.preventDefault();
+				if (index > 0) chips[index - 1].focus();
+				else input?.focus();
+				return;
+			}
+			if (event.key === forward) {
+				event.preventDefault();
+				if (index < chips.length - 1) chips[index + 1].focus();
+				else input?.focus();
+				return;
+			}
+			if (event.key === "Backspace" || event.key === "Delete") {
+				event.preventDefault();
+				const neighbor = chips[index + 1] ?? chips[index - 1];
+				const key = target.dataset.value ?? "";
+				const item = array(valueState.value).find((candidate) => itemKeyOf(candidate) === key);
+				if (item !== void 0) removeItem(item, event);
+				if (neighbor && neighbor !== target) neighbor.focus();
+				else input?.focus();
+				return;
+			}
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				input?.focus();
+				setOpen(true, event);
+				return;
+			}
+			if (event.key.length === 1 || event.key === "Enter") input?.focus();
+			return;
+		}
+		if (target.closest("[data-slot=\"select-trigger\"]")) {
+			if (event.key === "Escape") {
+				if (!pop.open) return;
+				event.preventDefault();
+				setOpen(false, event, pop.trigger);
+				return;
+			}
+			if (event.key === "Tab") {
+				if (pop.open) setOpen(false, event);
+				return;
+			}
+			if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				if (pop.open) {
+					if (event.key === "Enter" || event.key === " ") {
+						setOpen(false, event);
+						return;
+					}
+					if (inPopup(input)) {
+						input?.focus();
+						return;
+					}
+					const items = selectItems.items(this);
+					let target = items.find((item) => selectedKeySet.has(item.dataset.value ?? "")) ?? items[0];
+					if (target) target = items[items.indexOf(target) + (event.key === "ArrowDown" ? 1 : -1)] ?? target;
+					selectItems.focusItem(this, target);
+					return;
+				}
+				pendingFocus = true;
+				pendingStep = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+				setOpen(true, event);
+				return;
+			}
+			if (inPopup(input)) {
+				if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && event.key !== " ") {
+					event.preventDefault();
+					pendingFocus = true;
+					pendingSeed = event.key;
+					setOpen(true, event);
+				}
+				return;
+			}
+			if (!input) ta.handle(event);
+			return;
+		}
+		if (target === input || target.dataset.slot === "select-chips-input" || target.dataset.slot === "select-input") {
+			if (event.key === "Tab") {
+				if (pop.open) setOpen(false, event);
+				return;
+			}
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				if (!pop.open) setOpen(true, event);
+				if (!selectItems.items(this).some((item) => item.dataset.value === activeKey)) {
+					event.preventDefault();
+					nav.move(event.key === "ArrowDown" ? "first" : "last", event);
+					return;
+				}
+				nav.handle(event);
+				return;
+			}
+			if ((event.key === "Home" || event.key === "End") && pop.open) {
+				nav.handle(event);
+				return;
+			}
+			if (event.key === "Enter" && pop.open && activeKey) {
+				const item = selectItems.items(this).find((candidate) => candidate.dataset.value === activeKey);
+				if (!item) return;
+				event.preventDefault();
+				item.click();
+				return;
+			}
+			if (event.key === "Escape") {
+				if (!pop.open) return;
+				event.preventDefault();
+				setOpen(false, event, inPopup(target) ? pop.trigger : null);
+				return;
+			}
+			if (event.key === "Backspace" && target.dataset.slot === "select-chips-input" && !target.value) {
+				const selected = array(valueState.value);
+				if (selected.length) {
+					event.preventDefault();
+					removeItem(selected[selected.length - 1], event);
+				}
+				return;
+			}
+			const backward = rtl() ? "ArrowRight" : "ArrowLeft";
+			if (event.key === backward && target.dataset.slot === "select-chips-input" && target.selectionStart === 0) {
+				const chips = chipsOf();
+				if (chips.length) {
+					event.preventDefault();
+					chips[chips.length - 1].focus();
+				}
+			}
+			return;
+		}
+		if (target.closest("[data-slot=\"select-content\"]")) {
+			if (event.key === "Tab") {
+				setOpen(false, event);
+				return;
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setOpen(false, event, pop.trigger);
+				return;
+			}
+			if (focusNav.handle(event)) return;
+			if (event.key === "Enter" || event.key === " ") {
+				const item = selectItems.item(event);
+				if (!item) return;
+				event.preventDefault();
+				item.click();
+				return;
+			}
+			if (ta.handle(event)) event.preventDefault();
+		}
+	});
+	let itemKeyOf = (item) => fallbackString(item);
+	let removeItem = (_item, _event) => {};
+	for (const args of this) {
+		disabled = Boolean(args.disabled);
+		onCreate = args.onCreate;
+		onInputValueChange = args.onInputValueChange;
+		onOpenChange = args.onOpenChange;
+		onValueChange = args.onValueChange;
+		const wasOpen = pop.open;
+		const opened = pop.sync(args.open == null ? void 0 : Boolean(args.open), {
+			placement: args.placement,
+			gap: args.gap
+		});
+		if (wasOpen && !opened) finishClose();
+		else if (!opened) clearFocusIntent();
+		else closeFocus = null;
+		searchState.sync(args.inputValue === void 0 ? void 0 : String(args.inputValue));
+		valueState.sync(args.value);
+		const multiple = Boolean(args.multiple);
+		const stringValue = (item) => args.itemToStringValue?.(item) ?? fallbackString(item);
+		const itemKey = (item) => stringValue(item);
+		itemKeyOf = itemKey;
+		const rawValue = valueState.value;
+		const selectedItems = multiple ? array(rawValue) : rawValue == null || rawValue === "" ? [] : [rawValue];
+		const selectedKeys = new Set(selectedItems.map(itemKey));
+		selectedKeySet = selectedKeys;
+		const search = searchState.value;
+		const filter = resolveFilter(args.filter, defaultFilter);
+		const filtering = Boolean(input) && args.filter !== null;
+		const filteredItems = filtering ? (args.items ?? []).filter((item) => filter(item, search, stringValue(item))) : args.items ?? [];
+		const matches = (item, keywords = []) => filtering ? filter(item, search, [stringValue(item), ...keywords].join(" ")) : true;
+		const label = (item) => {
+			const key = itemKey(item);
+			return labels.get(key) ?? stringValue(item);
+		};
+		const selectedLabels = selectedItems.map(label);
+		const query = search.trim().toLowerCase();
+		const createVisible = Boolean(onCreate) && Boolean(query) && ![...labels.values(), ...(args.items ?? []).map(stringValue)].some((candidate) => candidate.trim().toLowerCase() === query);
+		if (args.autoHighlight && pop.open && filteredItems.length && !filteredItems.some((item) => itemKey(item) === activeKey)) activeKey = itemKey(filteredItems[0]);
+		const commitValue = (next, event) => {
+			valueState.set(next, event);
+		};
+		const select = (item, event) => {
+			if (disabled) return;
+			const key = itemKey(item);
+			if (multiple) {
+				const current = array(valueState.value);
+				const exists = current.some((candidate) => itemKey(candidate) === key);
+				const next = exists ? current.filter((candidate) => itemKey(candidate) !== key) : [...current, item];
+				commitValue(next, event);
+				live.polite(`${label(item)} ${exists ? "deselected" : "selected"}, ${next.length} selected`);
+				if (!searchState.controlled) searchState.init("");
+				this.next();
+				return;
+			}
+			if (selectedKeys.has(key) && !args.required) {
+				commitValue(null, event);
+				live.polite(`${label(item)} deselected`);
+			} else commitValue(item, event);
+			if (!searchState.controlled) searchState.init("");
+			setOpen(false, event);
+		};
+		const remove = (item, event) => {
+			if (disabled) return;
+			const key = itemKey(item);
+			const next = array(valueState.value).filter((candidate) => itemKey(candidate) !== key);
+			commitValue(multiple ? next : null, event);
+			live.polite(`${label(item)} removed, ${next.length} selected`);
+			this.next();
+		};
+		removeItem = remove;
+		const clear = (event) => {
+			commitValue(multiple ? [] : null, event);
+			if (!searchState.controlled) searchState.init("");
+			this.next();
+			input?.focus();
+		};
+		const create = (event) => {
+			if (disabled) return;
+			const value = search.trim();
+			if (!value) return;
+			onCreate?.(value, event);
+			if (!searchState.controlled) searchState.init("");
+			this.next();
+		};
+		SelectContext({
+			activeId: activeKey ? itemDomId(activeKey) : "",
+			activeKey,
+			clear,
+			contentId: pop.contentId,
+			contentStyle: pop.contentStyle,
+			create,
+			createVisible,
+			disabled,
+			filteredItems,
+			hasTrigger: Boolean(pop.trigger),
+			inputId,
+			itemId: itemDomId,
+			listId: `${selectId}-list`,
+			matches,
+			multiple,
+			open: pop.open,
+			searchInPopup: inPopup(input),
+			registerLabel: (key, itemLabel) => {
+				if (labels.get(key) === itemLabel) return;
+				labels.set(key, itemLabel);
+				if (selectedKeys.has(key)) queueMicrotask(() => this.next());
+			},
+			remove,
+			required: Boolean(args.required),
+			search,
+			selectedKeys,
+			selectedLabels,
+			select,
+			setActive,
+			setReference,
+			setContent,
+			setInput,
+			setOpen,
+			setSearch,
+			setTrigger,
+			stringValue,
+			triggerId: pop.triggerId
+		});
+		if (dom(this)) queueMicrotask(() => {
+			const visible = selectItems.sweep(this);
+			pop.content?.toggleAttribute("data-empty", visible.length === 0);
+			if (input && !search) for (const empty of this.querySelectorAll("[data-slot=\"select-empty\"]")) empty.hidden = true;
+			if (activeKey && !visible.some((item) => item.dataset.value === activeKey)) this.next(() => activeKey = "");
+			const mounted = new Set(selectItems.all(this).map((item) => item.dataset.value ?? ""));
+			for (const key of labels.keys()) if (!mounted.has(key) && !selectedKeySet.has(key)) labels.delete(key);
+			const status = this.querySelector("[data-slot=\"select-status\"]");
+			if (pop.open && announceResults && !status && visible.length !== lastResultCount) live.polite((args.resultsLabel ?? defaultResultsLabel)(visible.length));
+			lastResultCount = pop.open ? visible.length : -1;
+			announceResults = false;
+		});
+		yield /* @__PURE__ */ jsxs(Fragment, { children: [
+			args.name && !multiple ? /* @__PURE__ */ jsx("input", {
+				disabled,
+				name: args.name,
+				"set:value": selectedItems.length ? itemKey(selectedItems[0]) : "",
+				type: "hidden",
+				value: selectedItems.length ? itemKey(selectedItems[0]) : ""
+			}) : null,
+			args.name && multiple ? selectedItems.map((item) => /* @__PURE__ */ jsx("input", {
+				disabled,
+				name: args.name,
+				"set:value": itemKey(item),
+				type: "hidden",
+				value: itemKey(item)
+			}, itemKey(item))) : null,
+			args.children
+		] });
+	}
+};
+/** Unified select: single, multiple, searchable, editable, chips, and tagging by composition. */
+var Select = ({ autoHighlight, children, class: classes, defaultInputValue, defaultOpen, defaultValue, disabled, filter, gap, inputValue, itemToStringValue, items, multiple, name, onCreate, onInputValueChange, onOpenChange, onValueChange, open, placement, required, resultsLabel, value, ...attrs }) => /* @__PURE__ */ jsx(SelectRoot, {
+	...statefulRootAttrs(attrs),
+	autoHighlight,
+	defaultInputValue,
+	defaultOpen,
+	defaultValue,
+	disabled,
+	filter,
+	gap,
+	inputValue,
+	itemToStringValue,
+	items,
+	multiple,
+	name,
+	onCreate,
+	onInputValueChange,
+	onOpenChange,
+	onValueChange,
+	open,
+	placement,
+	required,
+	resultsLabel,
+	value,
+	"attr:class": classes,
+	"attr:data-slot": "select",
+	children
+});
+/** Button field for a Select; the closed-state combobox. */
+var SelectTrigger = ({ children, class: classes, disabled, iconClass, id: idArg, ref, size = "default", type = "button", "set:onclick": onClick, ...attrs }) => {
+	const select = SelectContext();
+	const disabledFlag = Boolean(disabled ?? select?.disabled);
+	const empty = !select?.selectedKeys.size;
+	return /* @__PURE__ */ jsxs("button", {
+		...attrs,
+		...triggerAttrs({
+			controls: select?.listId,
+			expanded: Boolean(select?.open),
+			haspopup: "listbox",
+			id: idArg,
+			open: Boolean(select?.open),
+			ref,
+			setTrigger: select?.setTrigger,
+			triggerId: select?.triggerId
+		}),
+		"aria-required": flag(select?.required),
+		class: classes,
+		"data-placeholder": flag(empty),
+		"data-size": size,
+		"data-slot": "select-trigger",
+		disabled: disabledFlag,
+		role: "combobox",
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented) return;
+			select?.setOpen(!select.open, event);
+		},
+		type,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: iconClass,
+			"data-slot": "select-icon"
+		})]
+	});
+};
+/** Selected value text for a SelectTrigger. */
+var SelectValue = ({ children, class: classes, placeholder, ...attrs }) => {
+	const selected = SelectContext()?.selectedLabels ?? [];
+	const empty = !selected.length;
+	const content = children ?? (empty ? placeholder : selected.join(", "));
+	return /* @__PURE__ */ jsx("span", {
+		...attrs,
+		class: classes,
+		"data-placeholder": flag(empty),
+		"data-slot": "select-value",
+		children: content
+	});
+};
+/** Input field or in-popup search box for a Select. */
+var SelectInput = ({ children, addonClass, buttonClass, buttonIconClass, class: classes, clearButtonClass, clearIconClass, clearLabel = "Clear selection", disabled, id: idArg, inputClass, onValueChange, placeholder, ref, showClear, showTrigger = true, triggerLabel = "Show options", value, "set:oninput": onInput, ...attrs }) => {
+	const select = SelectContext();
+	const disabledFlag = Boolean(disabled ?? select?.disabled);
+	const clearable = Boolean(select && (select.selectedKeys.size > 0 || select.search));
+	const searchbox = Boolean(select?.searchInPopup);
+	const shown = value == null ? select?.open || select?.search ? select?.search ?? "" : select?.multiple ? "" : select?.selectedLabels[0] ?? "" : String(value);
+	let mounted = null;
+	let group = null;
+	const reference = (element) => {
+		const previous = mounted;
+		mounted = element;
+		select?.setInput(element, previous);
+		callRef(ref, element);
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		class: classes,
+		disabled: disabledFlag,
+		ref: (element) => {
+			const previous = group;
+			group = element;
+			if (!element || !element.closest("[data-slot=\"select-content\"]")) select?.setReference(element, previous);
+		},
+		children: [
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				...attrs,
+				"aria-activedescendant": select?.activeId || void 0,
+				"aria-autocomplete": "list",
+				"aria-controls": select?.listId,
+				"aria-expanded": searchbox ? void 0 : select?.open ? "true" : "false",
+				"aria-haspopup": searchbox ? void 0 : "listbox",
+				"aria-required": flag(select?.required),
+				class: inputClass,
+				"data-slot": "select-input",
+				disabled: disabledFlag,
+				id: idArg ?? select?.inputId,
+				placeholder,
+				ref: reference,
+				role: searchbox ? "searchbox" : "combobox",
+				"set:onclick": (event) => select?.setOpen(true, event),
+				"set:onfocus": (event) => select?.setOpen(true, event),
+				"set:oninput": (event) => {
+					const next = event.target.value;
+					callHandler(onInput, event);
+					if (event.defaultPrevented) return;
+					onValueChange?.(next, event);
+					select?.setSearch(next, event);
+				},
+				"set:value": shown,
+				type: "text"
+			}),
+			children,
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				class: addonClass,
+				children: [showTrigger && !(showClear && clearable) ? /* @__PURE__ */ jsx(InputGroupButton, {
+					"aria-controls": select?.listId,
+					"aria-expanded": select?.open ? "true" : "false",
+					"aria-label": triggerLabel,
+					class: buttonClass,
+					"data-slot": "select-input-trigger",
+					disabled: disabledFlag,
+					"set:onclick": (event) => select?.setOpen(!select?.open, event),
+					type: "button",
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						class: buttonIconClass
+					})
+				}) : null, showClear && clearable ? /* @__PURE__ */ jsx(InputGroupButton, {
+					"aria-label": clearLabel,
+					class: clearButtonClass,
+					"data-slot": "select-clear",
+					disabled: disabledFlag,
+					"set:onclick": (event) => select?.clear(event),
+					type: "button",
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						class: clearIconClass
+					})
+				}) : null]
+			})
+		]
+	});
+};
+/** Button that clears the current selection and search. */
+var SelectClear = ({ children, class: classes, disabled, iconClass, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const select = SelectContext();
+	const disabledFlag = Boolean(disabled ?? select?.disabled);
+	if (select && !select.selectedKeys.size && !select.search) return null;
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		"aria-label": attrs["aria-label"] ?? "Clear selection",
+		class: classes,
+		"data-slot": "select-clear",
+		disabled: disabledFlag,
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented) return;
+			select?.clear(event);
+		},
+		type,
+		children: children ?? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: iconClass
+		})
+	});
+};
+/** Popup panel for Select options. */
+var SelectContent = ({ children, class: classes, ref, style, ...attrs }) => {
+	const select = SelectContext();
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		...contentAttrs({
+			id: select?.contentId,
+			open: Boolean(select?.open),
+			ref,
+			setContent: select?.setContent,
+			style: select?.contentStyle(style),
+			tabindex: "-1"
+		}),
+		class: classes,
+		"data-slot": "select-content",
+		children
+	});
+};
+/** Listbox for Select options; required in every composition. */
+var SelectList = ({ children, class: classes, ...attrs }) => {
+	const select = SelectContext();
+	const render = typeof children === "function" ? (select?.filteredItems ?? []).map((item, index) => children(item, index)) : children;
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"aria-labelledby": select?.hasTrigger ? select.triggerId : void 0,
+		"aria-multiselectable": select?.multiple ? "true" : void 0,
+		class: classes,
+		"data-slot": "select-list",
+		id: select?.listId,
+		role: "listbox",
+		children: render
+	});
+};
+/** Selectable Select option. */
+var SelectItem = ({ children, class: classes, disabled, forceMount, indicatorClass, indicatorIconClass, keywords = [], onSelect, textValue, value, ...attrs }) => {
+	const select = SelectContext();
+	const item = value ?? text(children);
+	const key = select ? select.stringValue(item) : fallbackString(item);
+	const label = textValue ?? (typeof item === "string" ? text(children) : void 0);
+	const selected = Boolean(select?.selectedKeys.has(key));
+	const highlighted = select?.activeKey === key;
+	const disabledFlag = Boolean(disabled ?? select?.disabled);
+	const hidden = !forceMount && select ? !select.matches(item, keywords) : false;
+	if (label != null) select?.registerLabel(key, label);
+	return /* @__PURE__ */ jsxs("div", {
+		...attrs,
+		...selectItems.attrs({
+			disabled: disabledFlag,
+			label: label ?? key,
+			value: key
+		}),
+		"aria-disabled": flag(disabledFlag),
+		"aria-selected": selected ? "true" : "false",
+		class: classes,
+		"data-highlighted": flag(highlighted),
+		"data-selected": flag(selected),
+		"data-slot": "select-item",
+		"data-state": selected ? "checked" : "unchecked",
+		hidden: hidden || void 0,
+		id: select?.itemId(key),
+		role: "option",
+		"set:onclick": (event) => {
+			if (disabledFlag) return;
+			onSelect?.(item, event);
+			if (event.defaultPrevented) return;
+			select?.select(item, event);
+		},
+		"set:onfocus": () => select?.setActive(key),
+		"set:onpointermove": () => {
+			if (!disabledFlag) select?.setActive(key);
+		},
+		tabindex: disabledFlag ? void 0 : "-1",
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: indicatorClass,
+			"data-selected": selected ? "true" : "false",
+			"data-slot": "select-item-indicator",
+			children: /* @__PURE__ */ jsx("span", { class: indicatorIconClass })
+		})]
+	});
+};
+/** Group wrapper for Select options. */
+var SelectGroup = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": "select-group",
+	role: "group",
+	children
+});
+/** Label for a SelectGroup. */
+var SelectLabel = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": "select-label",
+	children
+});
+/** Visual separator between Select groups. */
+var SelectSeparator = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": "select-separator",
+	role: "separator"
+});
+/** Empty state shown when filtering hides every option. */
+var SelectEmpty = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": "select-empty",
+	children
+});
+/** Keep-mounted polite live region for async status; children swap. */
+var SelectStatus = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"aria-live": "polite",
+	class: classes,
+	"data-slot": "select-status",
+	role: "status",
+	children
+});
+/** Create-tag row: visible while the search matches no option label exactly. */
+var SelectCreate = ({ children, class: classes, ...attrs }) => {
+	const select = SelectContext();
+	const highlighted = select?.activeKey === CREATE_KEY;
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		...selectItems.attrs({
+			label: select?.search ?? "",
+			value: CREATE_KEY
+		}),
+		class: classes,
+		"data-highlighted": flag(highlighted),
+		"data-slot": "select-create",
+		hidden: select?.createVisible ? void 0 : true,
+		id: select?.itemId(CREATE_KEY),
+		role: "option",
+		"aria-selected": "false",
+		"set:onclick": (event) => select?.create(event),
+		"set:onfocus": () => select?.setActive(CREATE_KEY),
+		"set:onpointermove": () => select?.setActive(CREATE_KEY),
+		tabindex: "-1",
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			"Create «",
+			select?.search,
+			"»"
+		] })
+	});
+};
+/** Chip input wrapper for multiple Select selections. */
+var SelectChips = ({ children, class: classes, ref, ...attrs }) => {
+	const select = SelectContext();
+	let mounted = null;
+	const reference = (element) => {
+		const previous = mounted;
+		mounted = element;
+		select?.setReference(element, previous);
+		callRef(ref, element);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		class: classes,
+		"data-slot": "select-chips",
+		ref: reference,
+		children
+	});
+};
+/** Selected chip for multiple Select usage. */
+var SelectChip = ({ children, class: classes, removeClass, removeLabel, removeIconClass, showRemove = true, value, ...attrs }) => {
+	const select = SelectContext();
+	const item = value ?? text(children);
+	const key = select ? select.stringValue(item) : fallbackString(item);
+	return /* @__PURE__ */ jsxs("span", {
+		...attrs,
+		class: classes,
+		"data-slot": "select-chip",
+		"data-value": key,
+		tabindex: "-1",
+		children: [children, showRemove ? /* @__PURE__ */ jsx("button", {
+			"aria-label": removeLabel ?? `Remove ${key}`,
+			class: removeClass,
+			"data-slot": "select-chip-remove",
+			disabled: select?.disabled,
+			tabindex: "-1",
+			type: "button",
+			"set:onclick": (event) => {
+				event.stopPropagation();
+				select?.remove(item, event);
+			},
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				class: removeIconClass
+			})
+		}) : null]
+	});
+};
+/** Input used inside SelectChips. */
+var SelectChipsInput = ({ class: classes, disabled, onValueChange, placeholder, ref, value, "set:oninput": onInput, ...attrs }) => {
+	const select = SelectContext();
+	const disabledFlag = Boolean(disabled ?? select?.disabled);
+	let mounted = null;
+	const reference = (element) => {
+		const previous = mounted;
+		mounted = element;
+		select?.setInput(element, previous);
+		callRef(ref, element);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		...attrs,
+		"aria-activedescendant": select?.activeId || void 0,
+		"aria-autocomplete": "list",
+		"aria-controls": select?.listId,
+		"aria-expanded": select?.open ? "true" : "false",
+		"aria-haspopup": "listbox",
+		"aria-required": flag(select?.required),
+		class: classes,
+		"data-slot": "select-chips-input",
+		disabled: disabledFlag,
+		placeholder,
+		ref: reference,
+		role: "combobox",
+		"set:onclick": (event) => select?.setOpen(true, event),
+		"set:onfocus": (event) => select?.setOpen(true, event),
+		"set:oninput": (event) => {
+			const next = event.target.value;
+			callHandler(onInput, event);
+			if (event.defaultPrevented) return;
+			onValueChange?.(next, event);
+			select?.setSearch(next, event);
+		},
+		"set:value": value == null ? select?.search ?? "" : String(value),
+		type: "text"
+	});
+};
+var scrollList = (event, top) => {
+	event.currentTarget.closest("[data-slot=\"select-content\"]")?.querySelector("[data-slot=\"select-list\"]")?.scrollBy({ top });
+};
+/** Scroll button for long Select lists. */
+var SelectScrollUpButton = ({ children, class: classes, iconClass, type = "button", ...attrs }) => /* @__PURE__ */ jsx("button", {
+	...attrs,
+	class: classes,
+	"data-slot": "select-scroll-up-button",
+	"set:onclick": (event) => scrollList(event, -96),
+	type,
+	children: children ?? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		class: iconClass
+	})
+});
+/** Scroll button for long Select lists. */
+var SelectScrollDownButton = ({ children, class: classes, iconClass, type = "button", ...attrs }) => /* @__PURE__ */ jsx("button", {
+	...attrs,
+	class: classes,
+	"data-slot": "select-scroll-down-button",
+	"set:onclick": (event) => scrollList(event, 96),
+	type,
+	children: children ?? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		class: iconClass
+	})
+});
+//#endregion
+export { Select, SelectChip, SelectChips, SelectChipsInput, SelectClear, SelectContent, SelectCreate, SelectEmpty, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectList, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectStatus, SelectTrigger, SelectValue };