@eocrm/design-system 0.6.24 → 0.7.0

package/dist/components/Select/Trigger.js

@@ -0,0 +1,652 @@
+'use client';
+import { useSelectContext } from "./context.js";
+import { Chip } from "./Chip.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import Select_module_default from "./Select.module.js";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Select/Trigger.tsx
+function ClearButton({ variant }) {
+	const ctx = useSelectContext("Trigger.ClearButton");
+	const t = useTranslation();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		tabIndex: 0,
+		className: clsx(Select_module_default.clearButton, variant === "inline" && Select_module_default.clearButtonInline),
+		"aria-label": t("select.clear"),
+		onPointerDown: (e) => e.stopPropagation(),
+		onMouseDown: (e) => e.stopPropagation(),
+		onClick: (e) => {
+			e.stopPropagation();
+			if (ctx.multiple) ctx.setValue([]);
+			else ctx.setValue("");
+		},
+		children: /* @__PURE__ */ jsx("svg", {
+			width: "10",
+			height: "10",
+			viewBox: "0 0 10 10",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M1 1 L9 9 M9 1 L1 9",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				fill: "none"
+			})
+		})
+	});
+}
+/**
+* Helper: would pressing "clear" change anything?
+*
+* Deliberately value-shaped, not lookup-shaped: clearing resets the Select
+* to the empty value (`''` / `[]`), so the ✕ is only useful when the current
+* value differs from that. A consumer who models "no explicit choice" as a
+* real `value: ''` option (issue #470) is already sitting on the cleared
+* value — there is nothing for ✕ to do, and it stays hidden.
+*/
+function selectHasValue(value, multiple) {
+	return multiple ? Array.isArray(value) && value.length > 0 : typeof value === "string" && value !== "";
+}
+/**
+* Resolve the selected option in single mode by looking `value` up in the
+* supplied rows — never by treating `''` as "nothing selected" (issue #470).
+*
+* `''` is a legitimate option value: a common shape is one sentinel row
+* ("Use the default scheme", `value: ''`) plus N real catalog ids. Such a
+* row must render in the closed trigger exactly like any other option.
+* "Nothing selected" is then simply "no row carries this value" — which is
+* what an untouched Select (whose value is `''` with no `''` option in the
+* list) resolves to anyway.
+*
+* Always searches `allRows`, never the query-filtered `rows`: the closed
+* trigger must keep showing the selected label while the user filters the
+* open searchable listbox down to something else.
+*
+* Returns `null` in multi mode, for a non-string value, or when no row
+* matches (e.g. a stale value no longer present in `options`).
+*/
+function findSelectedOption(allRows, value, multiple) {
+	if (multiple || typeof value !== "string") return null;
+	const row = allRows.find((r) => r.kind === "option" && r.option.value === value);
+	return row && row.kind === "option" ? row.option : null;
+}
+/**
+* Computes the `aria-activedescendant` value for whichever trigger is
+* currently mounted. Returns `undefined` when the listbox is closed,
+* when the active row is a group header, or when no row is active —
+* those states must omit the attribute entirely rather than dangling
+* a stale id (screen readers will announce a non-existent element).
+*/
+function useActiveOptionId() {
+	const ctx = useSelectContext("Trigger");
+	if (!ctx.open || ctx.activeIndex < 0) return void 0;
+	const row = ctx.rows[ctx.activeIndex];
+	if (!row || row.kind !== "option") return void 0;
+	return ctx.getOptionId(row.option.value);
+}
+/**
+* Shared keyboard navigation hook for both trigger variants.
+*
+* Returns `handleNavKey(e)` which:
+*  - Returns `true` if the key was a navigation key the trigger handled
+*    (caller should NOT continue to its own variant-specific branch).
+*  - Returns `false` for keys this hook doesn't own — Tab, printable
+*    chars, anything not in the WAI-ARIA combobox navigation contract —
+*    so the caller can layer its own behaviour (typeahead for the button
+*    variant, query updates for the combobox-input variant).
+*
+* Tab returns `false` (and does NOT preventDefault) so the browser
+* continues normal tab traversal after the side-effect of closing
+* the popover.
+*/
+function useTriggerKeyboard(opts) {
+	const ctx = useSelectContext("Trigger");
+	const firstSelectableIdx = ctx.rows.findIndex((r) => r.kind === "option" && !r.option.disabled);
+	const lastSelectableIdx = (() => {
+		for (let i = ctx.rows.length - 1; i >= 0; i--) {
+			const r = ctx.rows[i];
+			if (r.kind === "option" && !r.option.disabled) return i;
+		}
+		return -1;
+	})();
+	const moveActive = useCallback((delta) => {
+		const { rows, activeIndex } = ctx;
+		if (rows.length === 0) return;
+		const len = rows.length;
+		let i = activeIndex;
+		for (let step = 0; step < len; step++) {
+			i = (i + delta + len) % len;
+			const r = rows[i];
+			if (r.kind === "option" && !r.option.disabled) {
+				ctx.setActiveIndex(i);
+				return;
+			}
+		}
+	}, [ctx]);
+	const typeaheadBufferRef = useRef("");
+	const typeaheadTimerRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);
+		};
+	}, []);
+	const stepTypeahead = useCallback((char) => {
+		if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);
+		typeaheadBufferRef.current += char.toLowerCase();
+		const buffer = typeaheadBufferRef.current;
+		const start = ctx.activeIndex >= 0 ? ctx.activeIndex : -1;
+		const len = ctx.rows.length;
+		for (let i = 0; i < len; i++) {
+			const idx = (start + i + (buffer.length === 1 ? 1 : 0)) % len;
+			const r = ctx.rows[idx];
+			if (r.kind !== "option" || r.option.disabled) continue;
+			if (r.option.label.toLowerCase().startsWith(buffer)) {
+				ctx.setActiveIndex(idx);
+				break;
+			}
+		}
+		typeaheadTimerRef.current = setTimeout(() => {
+			typeaheadBufferRef.current = "";
+		}, 500);
+	}, [ctx]);
+	const handleNavKey = (e) => {
+		if (opts.disabled || opts.readOnly) return false;
+		if (!ctx.open) {
+			if (e.key === "ArrowDown" || e.key === "Enter") {
+				e.preventDefault();
+				ctx.setOpen(true);
+				return true;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault();
+				ctx.setOpen(true);
+				queueMicrotask(() => ctx.setActiveIndex(lastSelectableIdx));
+				return true;
+			}
+			return false;
+		}
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				moveActive(1);
+				return true;
+			case "ArrowUp":
+				e.preventDefault();
+				moveActive(-1);
+				return true;
+			case "Home":
+				e.preventDefault();
+				if (firstSelectableIdx >= 0) ctx.setActiveIndex(firstSelectableIdx);
+				return true;
+			case "End":
+				e.preventDefault();
+				if (lastSelectableIdx >= 0) ctx.setActiveIndex(lastSelectableIdx);
+				return true;
+			case "PageDown":
+				e.preventDefault();
+				for (let step = 0; step < 5; step++) moveActive(1);
+				return true;
+			case "PageUp":
+				e.preventDefault();
+				for (let step = 0; step < 5; step++) moveActive(-1);
+				return true;
+			case "Enter": {
+				e.preventDefault();
+				const row = ctx.rows[ctx.activeIndex];
+				if (row && row.kind === "option" && !row.option.disabled) {
+					if (typeof row.option.data === "object" && row.option.data !== null && row.option.data.__create) {
+						ctx.onCreate?.(row.option.label);
+						if (ctx.multiple) {
+							const next = [...ctx.value ?? [], row.option.value];
+							ctx.setValue(next);
+							if (ctx.searchable) ctx.setQuery("");
+						} else {
+							ctx.setValue(row.option.value);
+							ctx.closeAndFocusTrigger();
+						}
+					} else if (ctx.multiple) {
+						ctx.toggleValue(row.option.value);
+						if (ctx.searchable) ctx.setQuery("");
+					} else {
+						ctx.setValue(row.option.value);
+						ctx.closeAndFocusTrigger();
+					}
+				}
+				return true;
+			}
+			case "Escape":
+				e.preventDefault();
+				ctx.closeAndFocusTrigger();
+				return true;
+			case "Tab":
+				ctx.setOpen(false);
+				return false;
+			default: return false;
+		}
+	};
+	return {
+		handleNavKey,
+		stepTypeahead,
+		moveActive
+	};
+}
+/**
+* Button-styled trigger for the single, non-searchable Select mode.
+*
+* Owns the keyboard interaction for the closed-and-open lifecycle:
+*  - Closed: ArrowDown / Enter / Space open with the Listbox's default
+*    "first selectable" active row. ArrowUp opens and overrides the
+*    active row to the last selectable (via a microtask so it runs
+*    AFTER Listbox's open-effect picks the first one).
+*  - Open: ArrowUp/Down step through rows (skipping headers + disabled),
+*    Home/End jump to ends, PageUp/Down move ±5, Enter/Space commit the
+*    active option (single mode → close; multi → toggle), Escape closes
+*    without changing selection, Tab closes (no preventDefault — normal
+*    browser traversal continues).
+*
+* Printable chars (no modifier keys) drive the 500ms typeahead buffer —
+* mirrors the DropdownMenu pattern.
+*/
+function ButtonTrigger(props) {
+	const ctx = useSelectContext("Trigger");
+	const t = useTranslation();
+	const { handleNavKey, stepTypeahead } = useTriggerKeyboard({
+		disabled: props.disabled,
+		readOnly: props.readOnly
+	});
+	const selectedOption = findSelectedOption(ctx.allRows, ctx.value, ctx.multiple);
+	const label = (() => {
+		if (ctx.multiple) {
+			const selectedValues = Array.isArray(ctx.value) ? ctx.value : [];
+			if (selectedValues.length === 0) return "";
+			const labels = [];
+			for (const row of ctx.allRows) if (row.kind === "option" && selectedValues.includes(row.option.value)) labels.push(row.option.label);
+			return labels.join(", ");
+		}
+		return selectedOption?.label ?? "";
+	})();
+	const hasValue = ctx.multiple ? label !== "" : selectedOption !== null;
+	const activeOptionId = useActiveOptionId();
+	const computedAriaLabel = (() => {
+		if (props["aria-label"]) return props["aria-label"];
+		if (ctx.multiple && label) return t("select.selectedPrefix", { labels: label });
+		return label || props.placeholder || void 0;
+	})();
+	const handleKeyDown = (e) => {
+		if (props.disabled || props.readOnly) return;
+		if (handleNavKey(e)) return;
+		if (e.key === " ") {
+			e.preventDefault();
+			if (!ctx.open) {
+				ctx.setOpen(true);
+				return;
+			}
+			const row = ctx.rows[ctx.activeIndex];
+			if (row && row.kind === "option" && !row.option.disabled) {
+				if (ctx.multiple) ctx.toggleValue(row.option.value);
+				else {
+					ctx.setValue(row.option.value);
+					ctx.closeAndFocusTrigger();
+				}
+			}
+			return;
+		}
+		if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+			e.preventDefault();
+			if (!ctx.open) ctx.setOpen(true);
+			stepTypeahead(e.key);
+		}
+	};
+	const showClear = props.clearable && selectHasValue(ctx.value, ctx.multiple);
+	const labelNode = (() => {
+		if (!hasValue) return null;
+		if (!ctx.multiple && ctx.renderValue && selectedOption) return ctx.renderValue(selectedOption);
+		return label;
+	})();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: ctx.triggerRootRef,
+		className: Select_module_default.triggerWrap,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "combobox",
+				id: ctx.triggerId,
+				ref: ctx.triggerRef,
+				className: clsx(Select_module_default.trigger, Select_module_default.triggerButton, !hasValue && Select_module_default.placeholder),
+				"aria-haspopup": "listbox",
+				"aria-expanded": ctx.open,
+				"aria-controls": ctx.open ? ctx.listboxId : void 0,
+				"aria-activedescendant": activeOptionId,
+				"aria-label": computedAriaLabel,
+				"aria-labelledby": props["aria-labelledby"],
+				"aria-describedby": props["aria-describedby"],
+				"aria-required": props["aria-required"],
+				"aria-invalid": props.invalid || void 0,
+				"aria-readonly": props.readOnly || void 0,
+				disabled: props.disabled,
+				onClick: () => {
+					if (props.disabled || props.readOnly) return;
+					ctx.setOpen(!ctx.open);
+				},
+				onKeyDown: handleKeyDown,
+				children: hasValue ? /* @__PURE__ */ jsx("span", { children: labelNode }) : /* @__PURE__ */ jsx("span", {
+					className: Select_module_default.placeholder,
+					children: props.placeholder ?? ""
+				})
+			}),
+			showClear && /* @__PURE__ */ jsx(ClearButton, { variant: "overlay" }),
+			/* @__PURE__ */ jsx("span", {
+				className: Select_module_default.chevron,
+				"aria-hidden": "true",
+				children: "▾"
+			})
+		]
+	});
+}
+function ComboboxInputTrigger(props) {
+	const ctx = useSelectContext("Trigger");
+	const { handleNavKey } = useTriggerKeyboard({
+		disabled: props.disabled,
+		readOnly: props.readOnly
+	});
+	const selectedOption = useMemo(() => findSelectedOption(ctx.allRows, ctx.value, ctx.multiple), [
+		ctx.allRows,
+		ctx.value,
+		ctx.multiple
+	]);
+	const selectedLabel = selectedOption?.label ?? "";
+	const hasSelection = selectedOption !== null;
+	useEffect(() => {
+		if (!ctx.open) ctx.setQuery("");
+	}, [ctx.open]);
+	const displayValue = ctx.open && ctx.query !== "" ? ctx.query : selectedLabel;
+	const activeOptionId = useActiveOptionId();
+	const handleKeyDown = (e) => {
+		if (props.disabled || props.readOnly) return;
+		handleNavKey(e);
+	};
+	const handleChange = (e) => {
+		if (props.disabled || props.readOnly) return;
+		let next = e.target.value;
+		if (ctx.query === "" && selectedLabel !== "" && next.startsWith(selectedLabel)) next = next.slice(selectedLabel.length);
+		if (!ctx.open) ctx.setOpen(true);
+		ctx.setQuery(next);
+	};
+	const inputRefHolder = ctx.triggerRef;
+	useEffect(() => {
+		if (ctx.open && props.selectOnOpen && ctx.query === "") inputRefHolder.current?.select();
+	}, [ctx.open]);
+	const showClear = props.clearable && selectHasValue(ctx.value, ctx.multiple);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: ctx.triggerRootRef,
+		className: Select_module_default.triggerWrap,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "text",
+				id: ctx.triggerId,
+				ref: (node) => {
+					inputRefHolder.current = node;
+				},
+				className: clsx(Select_module_default.trigger, Select_module_default.triggerInput, !hasSelection && Select_module_default.placeholder),
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-haspopup": "listbox",
+				"aria-expanded": ctx.open,
+				"aria-controls": ctx.open ? ctx.listboxId : void 0,
+				"aria-activedescendant": activeOptionId,
+				"aria-label": props["aria-label"],
+				"aria-labelledby": props["aria-labelledby"],
+				"aria-describedby": props["aria-describedby"],
+				"aria-required": props["aria-required"],
+				"aria-invalid": props.invalid || void 0,
+				"aria-readonly": props.readOnly || void 0,
+				autoComplete: "off",
+				spellCheck: false,
+				disabled: props.disabled,
+				readOnly: props.readOnly,
+				value: displayValue,
+				placeholder: hasSelection ? void 0 : props.placeholder,
+				onClick: () => {
+					if (props.disabled || props.readOnly) return;
+					if (!ctx.open) ctx.setOpen(true);
+				},
+				onChange: handleChange,
+				onKeyDown: handleKeyDown
+			}),
+			showClear && /* @__PURE__ */ jsx(ClearButton, { variant: "overlay" }),
+			/* @__PURE__ */ jsx("span", {
+				className: Select_module_default.chevron,
+				"aria-hidden": "true",
+				children: "▾"
+			})
+		]
+	});
+}
+/**
+* Chips trigger with an inline `role="combobox"` input. Wrapper is a plain
+* `<div>` (no role) because the input IS the WAI-ARIA combobox; assigning
+* `role="button"` to the wrapper would create two competing focus targets.
+* The visual wrapper owns positioning and outside-click containment while
+* the input remains the semantic combobox and focus-restoration target.
+*
+* Backspace behaviour: removes the trailing chip ONLY when `ctx.query === ''`.
+* On non-empty input it falls through to the browser's native text-deletion.
+*
+* Enter behaviour: `useTriggerKeyboard.handleNavKey` toggles the active
+* option in multi mode but does NOT clear the query — we clear it here in
+* a microtask so the input is empty for the next pick. Listbox's option
+* click handler also clears the query for multi+searchable so mouse
+* selection follows the same UX.
+*/
+function ChipsInputTrigger(props) {
+	const ctx = useSelectContext("Trigger");
+	const { handleNavKey } = useTriggerKeyboard({
+		disabled: props.disabled,
+		readOnly: props.readOnly
+	});
+	const activeOptionId = useActiveOptionId();
+	const inputRef = useRef(null);
+	const selectedValues = Array.isArray(ctx.value) ? ctx.value : [];
+	const optionByValue = /* @__PURE__ */ new Map();
+	for (const row of ctx.allRows) if (row.kind === "option") optionByValue.set(row.option.value, row.option);
+	const selectedOptions = selectedValues.map((v) => optionByValue.get(v) ?? {
+		value: v,
+		label: v
+	});
+	const handleWrapperPointerDown = (e) => {
+		if (props.disabled || props.readOnly) return;
+		if (e.target !== inputRef.current) {
+			e.preventDefault();
+			inputRef.current?.focus();
+		}
+	};
+	const handleWrapperClick = () => {
+		if (props.disabled || props.readOnly) return;
+		inputRef.current?.focus();
+		if (!ctx.open) ctx.setOpen(true);
+	};
+	const handleInputKeyDown = (e) => {
+		if (props.disabled || props.readOnly) return;
+		if (e.key === "Enter" && ctx.open) queueMicrotask(() => ctx.setQuery(""));
+		if (handleNavKey(e)) return;
+		if (e.key === "Backspace" && ctx.query === "" && selectedOptions.length > 0) {
+			e.preventDefault();
+			const last = selectedOptions[selectedOptions.length - 1];
+			ctx.toggleValue(last.value);
+		}
+	};
+	const inputRefHolder = ctx.triggerRef;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: ctx.triggerRootRef,
+		className: clsx(Select_module_default.trigger, Select_module_default.triggerChips, Select_module_default.triggerChipsInput),
+		onClick: handleWrapperClick,
+		onPointerDown: handleWrapperPointerDown,
+		children: [
+			selectedOptions.map((o) => {
+				const remove = () => {
+					if (props.disabled || props.readOnly) return;
+					ctx.toggleValue(o.value);
+					inputRef.current?.focus();
+				};
+				if (ctx.renderTag) return /* @__PURE__ */ jsx("span", { children: ctx.renderTag(o, remove) }, o.value);
+				return /* @__PURE__ */ jsx(Chip, {
+					label: o.label,
+					disabled: props.disabled,
+					onRemove: remove
+				}, o.value);
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: (node) => {
+					inputRef.current = node;
+					inputRefHolder.current = node;
+				},
+				type: "text",
+				id: ctx.triggerId,
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-haspopup": "listbox",
+				"aria-expanded": ctx.open,
+				"aria-controls": ctx.open ? ctx.listboxId : void 0,
+				"aria-activedescendant": activeOptionId,
+				"aria-label": props["aria-label"],
+				"aria-labelledby": props["aria-labelledby"],
+				"aria-describedby": props["aria-describedby"],
+				"aria-required": props["aria-required"],
+				"aria-invalid": props.invalid || void 0,
+				disabled: props.disabled,
+				readOnly: props.readOnly,
+				autoComplete: "off",
+				spellCheck: false,
+				className: Select_module_default.chipsInput,
+				placeholder: selectedOptions.length === 0 ? props.placeholder : void 0,
+				value: ctx.query,
+				onChange: (e) => {
+					if (!ctx.open) ctx.setOpen(true);
+					ctx.setQuery(e.target.value);
+				},
+				onKeyDown: handleInputKeyDown
+			}),
+			props.clearable && selectedOptions.length > 0 && /* @__PURE__ */ jsx(ClearButton, { variant: "inline" })
+		]
+	});
+}
+/**
+* Chips trigger for multi-select without inline search. A dedicated read-only
+* input owns combobox semantics and keyboard focus so chip remove buttons are
+* siblings rather than descendants of the combobox. Chip resolution walks
+* `ctx.allRows`, not `ctx.rows`, so the
+* chip list stays stable even if a future hover-search filters the
+* popover — unselected options never show as chips, but selected ones
+* never disappear.
+*
+* Keyboard:
+*  - Closed: ArrowDown/Up/Enter open via the shared hook; printable chars
+*    open + start typeahead; Space opens.
+*  - Open: shared hook owns Arrow/Home/End/PageUp/Down/Enter/Escape/Tab.
+*    Enter toggles the active option without closing (multi semantics).
+*  - Backspace is NOT bound here (no input to detect emptiness against);
+*    the searchable variant handles it.
+*/
+function ChipsButtonTrigger(props) {
+	const ctx = useSelectContext("Trigger");
+	const { handleNavKey, stepTypeahead } = useTriggerKeyboard({
+		disabled: props.disabled,
+		readOnly: props.readOnly
+	});
+	const t = useTranslation();
+	const activeOptionId = useActiveOptionId();
+	const selectedValues = Array.isArray(ctx.value) ? ctx.value : [];
+	const optionByValue = /* @__PURE__ */ new Map();
+	for (const row of ctx.allRows) if (row.kind === "option") optionByValue.set(row.option.value, row.option);
+	const selectedOptions = selectedValues.map((v) => optionByValue.get(v) ?? {
+		value: v,
+		label: v
+	});
+	const handleKeyDown = (e) => {
+		if (props.disabled || props.readOnly) return;
+		if (handleNavKey(e)) return;
+		if (e.key === " ") {
+			e.preventDefault();
+			if (!ctx.open) ctx.setOpen(true);
+			return;
+		}
+		if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+			e.preventDefault();
+			if (!ctx.open) ctx.setOpen(true);
+			stepTypeahead(e.key);
+		}
+	};
+	const labelForAria = selectedOptions.map((o) => o.label).join(", ");
+	const computedAriaLabel = props["aria-label"] || (selectedOptions.length > 0 ? t("select.selectedPrefix", { labels: labelForAria }) : t("select.openSelect"));
+	const handleWrapperClick = () => {
+		if (props.disabled || props.readOnly) return;
+		ctx.triggerRef.current?.focus();
+		ctx.setOpen(!ctx.open);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: ctx.triggerRootRef,
+		className: clsx(Select_module_default.trigger, Select_module_default.triggerChips),
+		onClick: handleWrapperClick,
+		children: [
+			selectedOptions.map((o) => {
+				const remove = () => {
+					if (props.disabled || props.readOnly) return;
+					ctx.toggleValue(o.value);
+				};
+				if (ctx.renderTag) return /* @__PURE__ */ jsx("span", { children: ctx.renderTag(o, remove) }, o.value);
+				return /* @__PURE__ */ jsx(Chip, {
+					label: o.label,
+					disabled: props.disabled,
+					onRemove: remove
+				}, o.value);
+			}),
+			selectedOptions.length === 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: Select_module_default.placeholder,
+				children: props.placeholder ?? ""
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: ctx.triggerRef,
+				id: ctx.triggerId,
+				type: "text",
+				role: "combobox",
+				readOnly: true,
+				tabIndex: props.disabled ? -1 : 0,
+				className: Select_module_default.chipsInput,
+				"aria-haspopup": "listbox",
+				"aria-expanded": ctx.open,
+				"aria-controls": ctx.open ? ctx.listboxId : void 0,
+				"aria-activedescendant": activeOptionId,
+				"aria-label": computedAriaLabel,
+				"aria-labelledby": props["aria-labelledby"],
+				"aria-describedby": props["aria-describedby"],
+				"aria-required": props["aria-required"],
+				"aria-invalid": props.invalid || void 0,
+				"aria-readonly": props.readOnly || void 0,
+				"aria-disabled": props.disabled || void 0,
+				value: "",
+				onChange: () => void 0,
+				onKeyDown: handleKeyDown
+			}),
+			props.clearable && selectedOptions.length > 0 && /* @__PURE__ */ jsx(ClearButton, { variant: "inline" })
+		]
+	});
+}
+/**
+* Internal dispatcher rendered by `<Select>`. Routes to the appropriate
+* trigger variant based on mode flags from context.
+*
+*  - `single + !searchable`            → `ButtonTrigger`
+*  - `single + searchable`             → `ComboboxInputTrigger`
+*  - `multi + chips + !searchable`     → `ChipsButtonTrigger`
+*  - `multi + chips + searchable`      → `ChipsInputTrigger` (Phase 6 task 15)
+*  - `multi + summary` (both forms)    → `ButtonTrigger` w/ comma-joined labels
+*/
+function Trigger(props) {
+	const ctx = useSelectContext("Trigger");
+	if (!ctx.multiple && ctx.searchable) return /* @__PURE__ */ jsx(ComboboxInputTrigger, { ...props });
+	if (ctx.multiple && ctx.triggerDisplay === "chips") return ctx.searchable ? /* @__PURE__ */ jsx(ChipsInputTrigger, { ...props }) : /* @__PURE__ */ jsx(ChipsButtonTrigger, { ...props });
+	return /* @__PURE__ */ jsx(ButtonTrigger, { ...props });
+}
+export { Trigger };