@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/inputs/SelectInput.js

@@ -1,495 +1,1357 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { Placement } from "../theme/enums.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { CONTROL_SIZE, SPACE, TYPE_SCALE } from "../theme/tokens/scales.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Tooltip from "../tooltip/Tooltip.js";
+import Divider from "../layout/Divider.js";
+import ScrollArea from "../layout/ScrollArea.js";
+import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlays/Popover.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
 import Rotate from "../transform/Rotate.js";
-import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexItem from "../containers/FlexItem.js";
-import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
-import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
-import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputFontSize, getInputHeight, getInputIconSize, getInputLineHeight, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
-import HorizontalDivider from "../dividers/HorizontalDivider.js";
-import { useElementWidth } from "../hooks/useElementWidth.js";
-import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import Spinner, { SpinnerSize } from "../feedback/Spinner.js";
+import { useDebouncedValue } from "../hooks/useDebouncedValue.js";
+import Span from "../text/Span.js";
+import { isDevelopment, useDevWarning } from "./internal/devWarn.js";
+import { hasContent, isFilled } from "./internal/predicates.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
+import { BareFieldContext, useIsBareField } from "./internal/bareField.js";
+import "./internal/innerButton.js";
+import { useDedupedOpen, useRestoreFocusAfterOutsidePress } from "./internal/useComboboxPopover.js";
 /* empty css                      */
 import { styled } from "@linaria/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowCounterClockwiseIcon, CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
+import { CaretDownIcon, CheckIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 //#region src/inputs/SelectInput.tsx
-var INPUT_VARIANT_TO_DROPDOWN_VARIANT = {
-	[InputVariant.TRANSPARENT]: DropdownVariant.TRANSPARENT,
-	[InputVariant.BASE]: DropdownVariant.PRIMARY,
-	[InputVariant.PRIMARY]: DropdownVariant.PRIMARY,
-	[InputVariant.SECONDARY]: DropdownVariant.SECONDARY,
-	[InputVariant.TERTIARY]: DropdownVariant.TERTIARY
+/**
+* The form control for choosing one value from a list of options. A field shows the chosen option
+* (or a placeholder) and opens a listbox panel below it, where the user moves through the options
+* with the arrow keys or the pointer, optionally narrows them by typing a search term, and picks
+* one. The value is the option's `id`, a string, so it serializes into forms and URLs.
+*
+* The panel is a `Popover` (`role` `LISTBOX`, `MANUAL`: opened only by the field). The field is a
+* WAI-ARIA combobox with `aria-activedescendant`: DOM focus stays on it the whole time. Rows follow
+* Menu's anatomy (rungs, highlight, check mark, group headings, filter and typeahead).
+* Options can carry a description, an icon or leading node, a group heading and a disabled
+* reason; some can be pinned to the top. Lists over 100 rows are virtualized.
+*
+* `SelectInputRoot` is the `@internal` engine that `MultiSelectInput` shares. Neither validates
+* (the app passes `error`) nor fetches (the app answers `onSearch` and `onEndReached`).
+*
+* SSR: closed by default, so the server renders the field only. Nothing here touches `window` or
+* `document` at module scope; the virtualizer, measuring and timers run in effects.
+*/
+/** Canonical rungs; SelectInput supports all five (the Input rung table). */
+var SelectInputSize = /* @__PURE__ */ function(SelectInputSize) {
+	/** 20px field, caption text, 12px icons, 10px caret; 24px rows, 12px row icons. */
+	SelectInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px field, body_sm text, 12px icons, 10px caret; 24px rows, 12px row icons. */
+	SelectInputSize["SMALL"] = "SMALL";
+	/** 32px field, body_md text, 14px icons, 12px caret; 32px rows, 14px row icons. The default (1.x `MEDIUM` was 28px). */
+	SelectInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px field, body_lg text, 14px icons, 12px caret; 32px rows, 14px row icons. */
+	SelectInputSize["LARGE"] = "LARGE";
+	/** 40px field, body_lg text, 16px icons, 12px caret; 32px rows, 14px row icons. */
+	SelectInputSize["X_LARGE"] = "X_LARGE";
+	return SelectInputSize;
+}({});
+/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
+	/** `background.base` fill. */
+	SelectInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	SelectInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	SelectInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	SelectInputVariant["TERTIARY"] = "TERTIARY";
+	return SelectInputVariant;
+}({});
+/** The field's width without `fillWidth` (no width token exists; the `MENU_MAX_WIDTH` precedent). */
+/** The panel's widest list (Menu's maximum) and tallest list. */
+/** The panel is `border-box` with a 0.5px hairline top and bottom (Menu's compensation). */
+/** Pause after typing before `onSearch` receives the term. */
+var SELECT_SEARCH_DEBOUNCE_MS = 150;
+/** Pause after which the typeahead prefix starts over. */
+var SELECT_TYPEAHEAD_RESET_MS = 500;
+/** Above this many rows the list renders through the virtualizer. */
+var SELECT_VIRTUALIZE_THRESHOLD = 100;
+/** Rows moved by PageDown / PageUp. */
+var SELECT_PAGE_STEP = 10;
+/** Rows rendered beyond the visible ones when virtualized. */
+var SELECT_VIRTUAL_OVERSCAN = 8;
+/** The list's block inset (4px less the panel hairline), for the virtualizer's start and end padding. */
+var SELECT_LIST_INSET_PX = Number.parseFloat(SPACE[4]) - .5;
+/** The field caret: 12px, 10px on the 20px and 24px rungs (the collapsible Widget's caret). */
+var SELECT_INPUT_SIZE_TO_CARET_PX_MAP = {
+	["X_SMALL"]: 10,
+	["SMALL"]: 10,
+	["MEDIUM"]: 12,
+	["LARGE"]: 12,
+	["X_LARGE"]: 12
 };
-var _exp = () => ({ $size }) => `0 ${getInputPadding($size)}`;
-var _exp2 = () => ({ $size }) => getInputHeight($size);
-var _exp3 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
-var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
-var _exp5 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-var _exp6 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
-var _exp7 = () => ({ theme, $variant, $isActive, $isError }) => {
-	if ($isActive) return theme.color.border.selected;
-	if ($isError) return theme.color.border.error;
-	return getInputBorderColor(theme, $variant);
+/** Field icon px per rung: one step below the rung's III-A.4 icon (Mitch, 2026-10-04). */
+var SELECT_INPUT_SIZE_TO_ICON_PX_MAP = {
+	["X_SMALL"]: 12,
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 14,
+	["X_LARGE"]: 16
 };
-var _exp8 = () => ({ theme, $variant, $isActive }) => $isActive ? theme.color.border.selected : getInputBorderColor(theme, $variant);
-var StyledSelectInput = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledSelectInput",
-	class: "s1ecxi56",
-	propsAsIs: false,
-	vars: {
-		"s1ecxi56-0": [_exp()],
-		"s1ecxi56-1": [_exp2()],
-		"s1ecxi56-2": [_exp3()],
-		"s1ecxi56-3": [_exp4()],
-		"s1ecxi56-4": [_exp5()],
-		"s1ecxi56-5": [_exp6()],
-		"s1ecxi56-6": [_exp7()],
-		"s1ecxi56-7": [_exp8()]
-	}
-}));
-var _exp9 = () => ({ $size }) => getInputHeight($size);
-var _exp0 = () => ({ theme }) => theme.color.text.primary;
-var _exp1 = () => ({ theme, $size }) => getInputFontSize(theme, $size);
-var _exp10 = () => ({ theme, $size }) => getInputLineHeight(theme, $size);
-var _exp11 = () => ({ theme }) => theme.font.sans.weight.medium;
-var _exp12 = () => ({ theme }) => theme.font.sans.family;
-var _exp13 = () => ({ theme }) => theme.color.text.tertiary;
-var StyledSearchInput = withTheme(/*#__PURE__*/ styled("input")({
-	name: "StyledSearchInput",
-	class: "s14m69un",
-	propsAsIs: false,
-	vars: {
-		"s14m69un-0": [_exp9()],
-		"s14m69un-1": [_exp0()],
-		"s14m69un-2": [_exp1()],
-		"s14m69un-3": [_exp10()],
-		"s14m69un-4": [_exp11()],
-		"s14m69un-5": [_exp12()],
-		"s14m69un-6": [_exp13()]
-	}
-}));
-var _exp14 = () => ({ $minWidth }) => `min(${getCssSizeValue($minWidth)}, calc(100vw - 16px))`;
-var _exp15 = () => ({ $width }) => getCssSizeValue($width, "max-content");
-var SelectInputContent = /*#__PURE__*/ styled("div")({
-	name: "SelectInputContent",
-	class: "sbfl8n6",
-	propsAsIs: false,
-	vars: {
-		"sbfl8n6-0": [_exp14()],
-		"sbfl8n6-1": [_exp15()]
-	}
+/** The clear button's rung: 20px up to MEDIUM, 24px for LARGE and X_LARGE (Input's). */
+var SELECT_INPUT_SIZE_TO_BUTTON_SIZE_MAP = {
+	["X_SMALL"]: ButtonSize.X_SMALL,
+	["SMALL"]: ButtonSize.X_SMALL,
+	["MEDIUM"]: ButtonSize.X_SMALL,
+	["LARGE"]: ButtonSize.SMALL,
+	["X_LARGE"]: ButtonSize.SMALL
+};
+/** The clear button's px per rung, for the reserved padding (16 on X_SMALL: `X_SMALL_INNER_BUTTON_CSS`). */
+/** Field text step per rung (the canonical control text). */
+var SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** The `Field` a SelectInput renders for its own `label` / `error` uses the same rung. */
+var SELECT_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
+/** Row label step per rung (Menu's two rungs). */
+var SELECT_INPUT_SIZE_TO_ROW_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.BODY_SM,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_MD,
+	["X_LARGE"]: TextSize.BODY_MD
+};
+/** Row description and group heading step per rung. */
+var SELECT_INPUT_SIZE_TO_ROW_SECONDARY_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM,
+	["LARGE"]: TextSize.BODY_SM,
+	["X_LARGE"]: TextSize.BODY_SM
+};
+/** Row icon (and check mark) px per row rung (24px → 12, 32px → 14; Mitch, 2026-10-04). */
+var SELECT_INPUT_SIZE_TO_ROW_ICON_PX_MAP = {
+	["X_SMALL"]: 12,
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 14,
+	["X_LARGE"]: 14
+};
+/** The loading row's spinner names the row rung (24px or 32px). */
+var SELECT_INPUT_SIZE_TO_SPINNER_SIZE_MAP = {
+	["X_SMALL"]: SpinnerSize.SMALL,
+	["SMALL"]: SpinnerSize.SMALL,
+	["MEDIUM"]: SpinnerSize.MEDIUM,
+	["LARGE"]: SpinnerSize.MEDIUM,
+	["X_LARGE"]: SpinnerSize.MEDIUM
+};
+/** Row height (px) per rung, the virtualizer's estimate. */
+var SELECT_INPUT_SIZE_TO_ROW_HEIGHT_PX_MAP = {
+	["X_SMALL"]: Number.parseFloat(CONTROL_SIZE.small),
+	["SMALL"]: Number.parseFloat(CONTROL_SIZE.small),
+	["MEDIUM"]: Number.parseFloat(CONTROL_SIZE.medium),
+	["LARGE"]: Number.parseFloat(CONTROL_SIZE.medium),
+	["X_LARGE"]: Number.parseFloat(CONTROL_SIZE.medium)
+};
+/** A description's line height (px) per rung, added to the estimate of rows that have one. */
+var SELECT_INPUT_SIZE_TO_SECONDARY_LINE_PX_MAP = {
+	["X_SMALL"]: Number.parseFloat(TYPE_SCALE.sans.height.caption),
+	["SMALL"]: Number.parseFloat(TYPE_SCALE.sans.height.caption),
+	["MEDIUM"]: Number.parseFloat(TYPE_SCALE.sans.height.body_sm),
+	["LARGE"]: Number.parseFloat(TYPE_SCALE.sans.height.body_sm),
+	["X_LARGE"]: Number.parseFloat(TYPE_SCALE.sans.height.body_sm)
+};
+/** Panel fill: 1.x's map. A ghost field (`isGhost`) gets a readable `BASE` panel instead. */
+var SELECT_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP = {
+	["BASE"]: PopoverVariant.PRIMARY,
+	["PRIMARY"]: PopoverVariant.PRIMARY,
+	["SECONDARY"]: PopoverVariant.SECONDARY,
+	["TERTIARY"]: PopoverVariant.TERTIARY
+};
+/** The polite live region that speaks for the status rows (VisuallyHidden takes no `role`). */
+var StatusRegion = /*#__PURE__*/ styled("span")({
+	name: "StatusRegion",
+	class: "gx-SelectInput-StatusRegion-s1ecxi56",
+	propsAsIs: false
+});
+/** Holds the field box, the trailing parts and the status region; 200px unless `fillWidth`. */
+var Wrapper = /*#__PURE__*/ styled("div")({
+	name: "Wrapper",
+	class: "gx-SelectInput-Wrapper-w14m69un",
+	propsAsIs: false
+});
+/**
+* The combobox (the focused element and Popover's reference): the field box. No outline; focus is
+* `FOCUS_CSS`. Declared before the frame maps so they win at equal specificity.
+*/
+var Control = /*#__PURE__*/ styled("div")({
+	name: "Control",
+	class: "gx-SelectInput-Control-cbfl8n6",
+	propsAsIs: false
 });
-var SelectInputOptionsContainer = /*#__PURE__*/ styled("div")({
-	name: "SelectInputOptionsContainer",
-	class: "sk260f0",
+/** The searchable combobox: the same box as an `<input>`. Declared before the frame maps. */
+var ControlInput = /*#__PURE__*/ styled("input")({
+	name: "ControlInput",
+	class: "gx-SelectInput-ControlInput-ck260f0",
 	propsAsIs: false
 });
-var _exp16 = () => ({ theme, $isSelected, $isFocused }) => {
-	if ($isSelected || $isFocused) return theme.color.background.secondary;
-	return "transparent";
+/** Rest look per variant: fill and hairline color. */
+var SELECT_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-SelectInput-BASE-bo10ras",
+	["PRIMARY"]: "gx-SelectInput-PRIMARY-poe2ind",
+	["SECONDARY"]: "gx-SelectInput-SECONDARY-s9236d8",
+	["TERTIARY"]: "gx-SelectInput-TERTIARY-t5jqpvy"
 };
-var _exp18 = () => ({ theme }) => theme.color.background.secondary;
-var SelectInputOption = withTheme(/*#__PURE__*/ styled("button")({
-	name: "SelectInputOption",
-	class: "so10ras",
-	propsAsIs: false,
-	vars: {
-		"so10ras-0": [_exp16()],
-		"so10ras-1": [_exp18()]
-	}
-}));
-var _exp19 = () => ({ theme, $isSelected, $isFocused }) => {
-	if ($isSelected || $isFocused) return theme.color.background.tertiary;
-	return "transparent";
+/** `isGhost`: no fill and no hairline at rest. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-SelectInput-GHOST_CSS-g1yocujd";
+/**
+* Hover on an editable field: `border.hovered` (stronger than `border.primary` in both themes,
+* Constitution III.6).
+*/
+var SELECT_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
+	["BASE"]: "gx-SelectInput-BASE-b1uexxly",
+	["PRIMARY"]: "gx-SelectInput-PRIMARY-pazywje",
+	["SECONDARY"]: "gx-SelectInput-SECONDARY-s18jekpe",
+	["TERTIARY"]: "gx-SelectInput-TERTIARY-t1gos90x"
 };
-var _exp21 = () => ({ theme }) => theme.color.background.tertiary;
-var PinnedOptionButton = withTheme(/*#__PURE__*/ styled("button")({
-	name: "PinnedOptionButton",
-	class: "poe2ind",
-	propsAsIs: false,
-	vars: {
-		"poe2ind-0": [_exp19()],
-		"poe2ind-1": [_exp21()]
-	}
-}));
-var OptionIconSlot = /*#__PURE__*/ styled("span")({
-	name: "OptionIconSlot",
-	class: "o9236d8",
+/** Hover on an editable ghost field: the frame appears, `border.hovered` with no fill. */
+var GHOST_HOVER_CSS = "gx-SelectInput-GHOST_HOVER_CSS-g1oazqgn";
+/**
+* Height, start inset, gap and the end inset that reserves the caret zone (rung padding + caret +
+* gap) per rung. Off-scale insets are sums of `space` tokens and the rung's caret px. The start inset
+* subtracts the 0.5px hairline so the value starts on a whole pixel, the rung padding from the edge.
+*/
+var SELECT_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-SelectInput-X_SMALL-xhmj664",
+	["SMALL"]: "gx-SelectInput-SMALL-skndlgg",
+	["MEDIUM"]: "gx-SelectInput-MEDIUM-m1v59wlg",
+	["LARGE"]: "gx-SelectInput-LARGE-lkrrva3",
+	["X_LARGE"]: "gx-SelectInput-X_LARGE-x1js26tz"
+};
+/** With `isClearable`: the end inset also reserves the clear button and a gap. */
+var SELECT_INPUT_SIZE_TO_CLEARABLE_CSS_MAP = {
+	["X_SMALL"]: "gx-SelectInput-X_SMALL-x1y9j7k3",
+	["SMALL"]: "gx-SelectInput-SMALL-s14dj8fy",
+	["MEDIUM"]: "gx-SelectInput-MEDIUM-mxjxwo8",
+	["LARGE"]: "gx-SelectInput-LARGE-lk7nfq8",
+	["X_LARGE"]: "gx-SelectInput-X_LARGE-x1vo3rqs"
+};
+/** The typed term's type per rung (searchable field), so it matches the value text. */
+var SELECT_INPUT_SIZE_TO_FONT_CSS_MAP = {
+	["X_SMALL"]: "gx-SelectInput-X_SMALL-x1jz5yi4",
+	["SMALL"]: "gx-SelectInput-SMALL-s1ysyxtm",
+	["MEDIUM"]: "gx-SelectInput-MEDIUM-ms13kdi",
+	["LARGE"]: "gx-SelectInput-LARGE-llyskmg",
+	["X_LARGE"]: "gx-SelectInput-X_LARGE-xcjuv87"
+};
+/**
+* Focus, from the mouse or the keyboard: `FIELD_FOCUS`, `border.focused` at 1px inside the frame. `:focus:hover`
+* beats the hover map, so a ghost field keeps it. Not applied while disabled (the disabled
+* combobox is a `tabIndex={-1}` div, which a click can still focus).
+*/
+var FOCUS_CSS = "gx-SelectInput-FOCUS_CSS-fqmfw76";
+/** Open: `border.focused` (1.x's "selected" border). */
+var OPEN_CSS = "gx-SelectInput-OPEN_CSS-o15ps1x0";
+/** Error border at rest, on hover, with focus and while open (the 1px inset focus line is red too). */
+var ERROR_CSS = "gx-SelectInput-ERROR_CSS-e1mxvlaa";
+/**
+* Disabled: the variant's resting fill and hairline are kept (`border.disabled` is not used on
+* frames); the field reads as disabled through `text.disabled` / `text.disabled` and the cursor.
+*/
+var DISABLED_CSS = "gx-SelectInput-DISABLED_CSS-due2xpd";
+/** Read-only: no pointer affordance. */
+var READ_ONLY_CSS = "gx-SelectInput-READ_ONLY_CSS-rz60qcy";
+/** The searchable input while it is open: a text cursor. */
+var TYPING_CSS = "gx-SelectInput-TYPING_CSS-t1kwlo75";
+/** The searchable input while closed with a selection: the overlay shows the value. */
+var VALUE_OVERLAID_CSS = "gx-SelectInput-VALUE_OVERLAID_CSS-v7qbedr";
+/** Stretch to the parent's width (wrapper, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-SelectInput-FILL_WIDTH_CSS-f14e5rra";
+/** The value inside the field: leading, icon and label in a row; only the label shrinks. */
+var ValueDisplay = /*#__PURE__*/ styled("span")({
+	name: "ValueDisplay",
+	class: "gx-SelectInput-ValueDisplay-vcoak0",
 	propsAsIs: false
 });
-var INPUT_VARIANT_TO_ICON_VARIANT_MAP = {
-	[InputVariant.TRANSPARENT]: IconVariant.SECONDARY,
-	[InputVariant.BASE]: IconVariant.SECONDARY,
-	[InputVariant.PRIMARY]: IconVariant.SECONDARY,
-	[InputVariant.SECONDARY]: IconVariant.SECONDARY,
-	[InputVariant.TERTIARY]: IconVariant.PRIMARY
+/** Gap between the value's leading, icon and label per rung. */
+var SELECT_INPUT_SIZE_TO_VALUE_CSS_MAP = {
+	["X_SMALL"]: "gx-SelectInput-X_SMALL-xo0k8iv",
+	["SMALL"]: "gx-SelectInput-SMALL-s10dru8j",
+	["MEDIUM"]: "gx-SelectInput-MEDIUM-mxd48k3",
+	["LARGE"]: "gx-SelectInput-LARGE-l1uv1y8i",
+	["X_LARGE"]: "gx-SelectInput-X_LARGE-x4kepfq"
 };
+/** Holds `renderSelection`'s output (or the placeholder): fills the field and may shrink. */
+var SelectionSlot = /*#__PURE__*/ styled("span")({
+	name: "SelectionSlot",
+	class: "gx-SelectInput-SelectionSlot-s19x5eff",
+	propsAsIs: false
+});
 /**
-* Single-choice dropdown with keyboard navigation and optional search.
-*
-* Controlled: `value` is the selected option and `onChange` hands you the whole
-* option back. Passing `onSearch` turns the trigger into a search box — you own
-* the filtering, so it works equally well against a local list or a server.
+* The searchable field's value while closed: laid over the input with the field's own insets (a
+* transparent hairline included), so it sits exactly where the `div` field draws its value.
+*/
+var ValueOverlay = /*#__PURE__*/ styled("span")({
+	name: "ValueOverlay",
+	class: "gx-SelectInput-ValueOverlay-v1igascl",
+	propsAsIs: false
+});
+/** The overlay's insets per rung (the field's). */
+var SELECT_INPUT_SIZE_TO_OVERLAY_CSS_MAP = {
+	["X_SMALL"]: "gx-SelectInput-X_SMALL-xj42cy5",
+	["SMALL"]: "gx-SelectInput-SMALL-sjwzds1",
+	["MEDIUM"]: "gx-SelectInput-MEDIUM-mzzsir9",
+	["LARGE"]: "gx-SelectInput-LARGE-l15l4j2i",
+	["X_LARGE"]: "gx-SelectInput-X_LARGE-x1ohc03t"
+};
+/** The caret and the clear button: laid over the field's end, outside the combobox. */
+var Trailing = /*#__PURE__*/ styled("span")({
+	name: "Trailing",
+	class: "gx-SelectInput-Trailing-ta9xiv4",
+	propsAsIs: false
+});
+/** Trailing inset (the rung padding) and gap per rung. */
+var SELECT_INPUT_SIZE_TO_TRAILING_CSS_MAP = {
+	["X_SMALL"]: "gx-SelectInput-X_SMALL-x1p8ykbf",
+	["SMALL"]: "gx-SelectInput-SMALL-s1evykgc",
+	["MEDIUM"]: "gx-SelectInput-MEDIUM-m15bsqie",
+	["LARGE"]: "gx-SelectInput-LARGE-liqey9w",
+	["X_LARGE"]: "gx-SelectInput-X_LARGE-xhe3qvy"
+};
+/** Wraps the clear button: the only part of `Trailing` that takes the pointer. */
+var ClearSlot = /*#__PURE__*/ styled("span")({
+	name: "ClearSlot",
+	class: "gx-SelectInput-ClearSlot-c18c84l6",
+	propsAsIs: false
+});
+/** Hidden clear button: keeps its width, leaves the tab order and the accessibility tree. */
+var CLEAR_HIDDEN_CSS = "gx-SelectInput-CLEAR_HIDDEN_CSS-c1da7pn7";
+/**
+* The panel content: between the field's width and 320px wide, capped to 320px tall. The
+* available height falls back to the viewport until Popover has measured it, so the list is
+* capped from its first frame (the active row is scrolled to on that frame).
 */
-var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
-	const isSearchable = !!onSearch;
-	const [isHovered, setIsHovered] = useState(false);
-	const [searchTerm, setSearchTerm] = useState("");
-	const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
-	const inputRef = useRef(null);
-	const triggerRef = useRef(null);
-	const optionsRefs = useRef([]);
-	const { isOpen, setOpen } = useControlledOpenState({
-		isOpen: controlledIsOpen,
+var ListFrame = /*#__PURE__*/ styled("div")({
+	name: "ListFrame",
+	class: "gx-SelectInput-ListFrame-lzozmwc",
+	propsAsIs: false
+});
+/** A virtualized panel is exactly as wide as the field (absolute rows have no content width). */
+var VIRTUALIZED_FRAME_CSS = "gx-SelectInput-VIRTUALIZED_FRAME_CSS-vz9a0uz";
+/** The rows, 4px in from the panel's outer edge (the 0.5px hairline counts toward the inset). */
+var List = /*#__PURE__*/ styled("div")({
+	name: "List",
+	class: "gx-SelectInput-List-l1pxtftz",
+	propsAsIs: false
+});
+/** Virtualized: the inset is the virtualizer's start / end padding, so only the sides keep it. */
+var VIRTUAL_LIST_CSS = "gx-SelectInput-VIRTUAL_LIST_CSS-v1pcykbv";
+/** Virtualized: the full list height; rows are positioned inside it. */
+var VirtualBody = /*#__PURE__*/ styled("div")({
+	name: "VirtualBody",
+	class: "gx-SelectInput-VirtualBody-v173z9ja",
+	propsAsIs: false
+});
+/** Virtualized row: absolutely placed at its measured offset. */
+var VIRTUAL_ROW_CSS = "gx-SelectInput-VIRTUAL_ROW_CSS-vul1txn";
+/** An option row (Menu's row restated). Declared before the row maps. */
+var OptionRow = /*#__PURE__*/ styled("div")({
+	name: "OptionRow",
+	class: "gx-SelectInput-OptionRow-o1aponwc",
+	propsAsIs: false
+});
+/** A status row (empty, loading): a row's box, not interactive. */
+var StatusRow = /*#__PURE__*/ styled("div")({
+	name: "StatusRow",
+	class: "gx-SelectInput-StatusRow-sxgsv7z",
+	propsAsIs: false
+});
+/** Row height, inline and block padding, and gap per rung (Menu's two rungs). */
+var SELECT_INPUT_SIZE_TO_ROW_CSS_MAP = {
+	["X_SMALL"]: "gx-SelectInput-X_SMALL-x1n6kh9n",
+	["SMALL"]: "gx-SelectInput-SMALL-sxrvm1c",
+	["MEDIUM"]: "gx-SelectInput-MEDIUM-mw9xd7i",
+	["LARGE"]: "gx-SelectInput-LARGE-lgrwy9f",
+	["X_LARGE"]: "gx-SelectInput-X_LARGE-xlfzaiz"
+};
+/** The active row: the only highlight, so pointer and keyboard never show two. */
+var ACTIVE_ROW_CSS = "gx-SelectInput-ACTIVE_ROW_CSS-a1r6mtzd";
+/** Pressing an enabled active row. */
+var ACTIVE_ROW_PRESS_CSS = "gx-SelectInput-ACTIVE_ROW_PRESS_CSS-a1lc3k5v";
+/** A disabled row. */
+var ROW_DISABLED_CSS = "gx-SelectInput-ROW_DISABLED_CSS-rfsa9g";
+/** `leading`: never squeezed, so only the text shrinks. */
+var Slot = /*#__PURE__*/ styled("span")({
+	name: "Slot",
+	class: "gx-SelectInput-Slot-s1vsgpgc",
+	propsAsIs: false
+});
+/** Label and description, stacked; the only part of a row that shrinks. */
+var Content = /*#__PURE__*/ styled("span")({
+	name: "Content",
+	class: "gx-SelectInput-Content-c67enmk",
+	propsAsIs: false
+});
+/** The check mark's box (the icon's width), so rows align selected or not. */
+var CheckSlot = /*#__PURE__*/ styled("span")({
+	name: "CheckSlot",
+	class: "gx-SelectInput-CheckSlot-c12tkpdx",
+	propsAsIs: false
+});
+/** The check mark's reserved width per rung: the row icon px. */
+var SELECT_INPUT_SIZE_TO_CHECK_SLOT_CSS_MAP = {
+	["X_SMALL"]: "gx-SelectInput-X_SMALL-x1p1u54p",
+	["SMALL"]: "gx-SelectInput-SMALL-s1xnxona",
+	["MEDIUM"]: "gx-SelectInput-MEDIUM-m740si8",
+	["LARGE"]: "gx-SelectInput-LARGE-lo64a8t",
+	["X_LARGE"]: "gx-SelectInput-X_LARGE-xk487n1"
+};
+/** Icons never shrink. */
+var NO_SHRINK_CSS = "gx-SelectInput-NO_SHRINK_CSS-nkvnet2";
+/** A labelled section of rows (unvirtualized). */
+var GroupRoot = /*#__PURE__*/ styled("div")({
+	name: "GroupRoot",
+	class: "gx-SelectInput-GroupRoot-g1qlz5rz",
+	propsAsIs: false
+});
+/** A section heading. */
+var GroupLabel = /*#__PURE__*/ styled("div")({
+	name: "GroupLabel",
+	class: "gx-SelectInput-GroupLabel-g1mhh2uu",
+	propsAsIs: false
+});
+/** Group heading height and inset per rung (Menu's). */
+var SELECT_INPUT_SIZE_TO_GROUP_LABEL_CSS_MAP = {
+	["X_SMALL"]: "gx-SelectInput-X_SMALL-x19rqrei",
+	["SMALL"]: "gx-SelectInput-SMALL-sx1x7i6",
+	["MEDIUM"]: "gx-SelectInput-MEDIUM-m1oifut7",
+	["LARGE"]: "gx-SelectInput-LARGE-lt7vyaq",
+	["X_LARGE"]: "gx-SelectInput-X_LARGE-x1firy3m"
+};
+/** Space above and below the pinned section's separator (Menu's). */
+var SEPARATOR_CSS = "gx-SelectInput-SEPARATOR_CSS-s9yly5q";
+/** Lower-cased, trimmed term (the filter's comparison form; Menu's rule). */
+function normalizeTerm(term) {
+	return term.trim().toLocaleLowerCase();
+}
+/** An option matches when the term is empty or its label (or description) contains it. */
+function matches(term, option) {
+	if (term === "") return true;
+	if (option.label.toLocaleLowerCase().includes(term)) return true;
+	return option.description?.toLocaleLowerCase().includes(term) ?? false;
+}
+/** A printable character that should drive typeahead or the search term. */
+function isPrintableKey(event) {
+	return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+/** Builds the rows in order: pinned, separator, sections, Create, then the status row. */
+function buildModel({ options, pinnedIds, term, isFiltering, selected, limitReason, createLabel, isLoading, listboxId }) {
+	const indexById = /* @__PURE__ */ new Map();
+	options.forEach((option, index) => {
+		if (!indexById.has(option.id)) indexById.set(option.id, index);
+	});
+	let position = 0;
+	const makeItem = (option, index) => {
+		const isSelected = selected.has(option.id);
+		const isOwnDisabled = option.isDisabled === true;
+		const isLimitDisabled = limitReason !== void 0 && !isSelected;
+		position += 1;
+		return {
+			kind: "option",
+			key: `option-${index}`,
+			option,
+			domId: `${listboxId}-${index}`,
+			navIndex: -1,
+			flatIndex: -1,
+			position,
+			isSelected,
+			isDisabled: isOwnDisabled || isLimitDisabled,
+			disabledReason: isOwnDisabled ? option.disabledReason : limitReason
+		};
+	};
+	const pinnedSet = /* @__PURE__ */ new Set();
+	const pinned = [];
+	for (const id of pinnedIds ?? []) {
+		const index = indexById.get(id);
+		if (index === void 0 || pinnedSet.has(id)) continue;
+		const option = options[index];
+		if (option === void 0) continue;
+		pinnedSet.add(id);
+		pinned.push(makeItem(option, index));
+	}
+	const sectionMap = /* @__PURE__ */ new Map();
+	const sections = [];
+	options.forEach((option, index) => {
+		if (pinnedSet.has(option.id) || indexById.get(option.id) !== index) return;
+		if (isFiltering && !matches(term, option)) return;
+		const sectionKey = option.group === void 0 ? "" : `group:${option.group}`;
+		let section = sectionMap.get(sectionKey);
+		if (section === void 0) {
+			const headingId = `${listboxId}-group-${sections.length}`;
+			section = {
+				key: sectionKey === "" ? "ungrouped" : sectionKey,
+				heading: option.group === void 0 ? null : {
+					kind: "heading",
+					key: `heading-${sections.length}`,
+					id: headingId,
+					label: option.group
+				},
+				rows: []
+			};
+			sectionMap.set(sectionKey, section);
+			sections.push(section);
+		}
+		section.rows.push(makeItem(option, index));
+	});
+	const restCount = sections.reduce((count, section) => count + section.rows.length, 0);
+	const hasSeparator = pinned.length > 0 && restCount > 0;
+	const create = createLabel === null ? null : {
+		kind: "create",
+		key: "create",
+		domId: `${listboxId}-create`,
+		navIndex: -1,
+		flatIndex: -1,
+		label: createLabel
+	};
+	const nav = [];
+	const flat = [];
+	const pushNav = (item) => {
+		item.navIndex = nav.length;
+		item.flatIndex = flat.length;
+		nav.push(item);
+		flat.push(item);
+	};
+	for (const item of pinned) pushNav(item);
+	if (hasSeparator) flat.push({
+		kind: "separator",
+		key: "separator"
+	});
+	for (const section of sections) {
+		if (section.heading !== null) flat.push(section.heading);
+		for (const item of section.rows) pushNav(item);
+	}
+	if (create !== null) pushNav(create);
+	const status = isLoading ? "loading" : nav.length === 0 ? "empty" : null;
+	if (status !== null) flat.push({
+		kind: status,
+		key: status
+	});
+	return {
+		pinned,
+		hasSeparator,
+		sections,
+		create,
+		status,
+		nav,
+		flat,
+		optionCount: position
+	};
+}
+/** The first enabled row, else the first row (or -1). */
+function firstEnabledIndex(nav) {
+	const index = nav.findIndex((item) => item.kind === "create" || !item.isDisabled);
+	return index === -1 ? nav.length > 0 ? 0 : -1 : index;
+}
+/** The first selected option row, or -1. */
+function selectedIndex(nav) {
+	return nav.findIndex((item) => item.kind === "option" && item.isSelected);
+}
+/** Resolves an open target to a row index. */
+function openIndex(nav, target) {
+	if (nav.length === 0) return -1;
+	if (target === "first") return 0;
+	if (target === "last") return nav.length - 1;
+	const selected = selectedIndex(nav);
+	if (selected !== -1) return selected;
+	return target === "selected-or-first" ? firstEnabledIndex(nav) : nav.length - 1;
+}
+/** The field, the trailing parts, the panel and the engine, wired to the nearest Field. */
+function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
+	const { options, selectedIds, isMultiple, onOptionSelect, onClear, renderSelection, getSelectionText, limitReason, onCreate, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder = "Select an option…", error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, isSearchable = false, onSearch, isClearable = false, isLoading = false, emptyMessage = "No results", onEndReached, renderOption, pinnedIds, placement = Placement.BOTTOM_START, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = rootProps;
+	const isBare = useIsBareField();
+	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const listboxId = `${controlId}-listbox`;
+	const controlRef = useRef(null);
+	const mergedRef = useMergeRefs([controlRef, forwardedRef]);
+	const panelRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const [viewportElement, setViewportElement] = useState(null);
+	const isEditable = !isDisabled && !isReadOnly;
+	const { isOpen: isOpenState, setOpen: setOpenState } = useControlledOpenState({
+		isOpen,
+		defaultIsOpen,
 		onOpenChange
 	});
-	const triggerWidth = useElementWidth(triggerRef);
-	const dropdownMinWidth = dropdownWidth ?? triggerWidth ?? width ?? 200;
-	const selectedOption = value ?? null;
-	const effectiveIsDisabled = isDisabled || options.length <= 1;
-	const visible = isOpen;
-	const debouncedSearchTerm = useDebouncedValue(searchTerm, debounceMs, isSearchable);
+	const isShown = isOpenState && isEditable;
+	const { setOpen } = useDedupedOpen(isShown, setOpenState);
+	const [rawTerm, setRawTerm] = useState("");
+	const [hasSearched, setHasSearched] = useState(false);
+	const [isReasonDismissed, setIsReasonDismissed] = useState(false);
+	const cacheRef = useRef(/* @__PURE__ */ new Map());
+	const selectedSet = new Set(selectedIds);
+	for (const option of options) if (selectedSet.has(option.id)) cacheRef.current.set(option.id, option);
+	const warnedIdsRef = useRef(/* @__PURE__ */ new Set());
+	const unknownIds = [];
+	const selectedOptions = selectedIds.map((selectedId) => {
+		const known = options.find((option) => option.id === selectedId) ?? cacheRef.current.get(selectedId);
+		if (known !== void 0) return known;
+		unknownIds.push(selectedId);
+		return {
+			id: selectedId,
+			label: selectedId
+		};
+	});
+	const unknownKey = unknownIds.join("\n");
 	useEffect(() => {
-		if (visible && isSearchable && inputRef.current) {
-			inputRef.current.focus();
-			inputRef.current.select();
+		if (unknownKey === "" || !isDevelopment()) return;
+		for (const unknownId of unknownKey.split("\n")) {
+			if (warnedIdsRef.current.has(unknownId)) continue;
+			warnedIdsRef.current.add(unknownId);
+			console.warn(`[@galaxy-io/dls] SelectInput value "${unknownId}" is not in \`options\`; the raw id is shown as its label.`);
 		}
-	}, [visible, isSearchable]);
-	const [prevVisible, setPrevVisible] = useState(visible);
-	if (visible !== prevVisible) {
-		setPrevVisible(visible);
-		if (!visible && isSearchable) {
-			setSearchTerm("");
-			setFocusedOptionIndex(-1);
+	}, [unknownKey]);
+	const selectionText = selectedOptions.length > 0 ? getSelectionText(selectedOptions) : "";
+	const term = isSearchable ? normalizeTerm(rawTerm) : "";
+	const trimmedTerm = rawTerm.trim();
+	const isFiltering = isSearchable && onSearch === void 0;
+	const hasExactMatch = trimmedTerm !== "" && options.some((option) => option.label.toLocaleLowerCase() === trimmedTerm.toLocaleLowerCase());
+	const model = buildModel({
+		options,
+		pinnedIds,
+		term,
+		isFiltering,
+		selected: selectedSet,
+		limitReason,
+		createLabel: onCreate !== void 0 && isSearchable && trimmedTerm !== "" && !hasExactMatch && limitReason === void 0 ? trimmedTerm : null,
+		isLoading,
+		listboxId
+	});
+	const [activeIndexState, setActiveIndexState] = useState(() => isShown ? openIndex(model.nav, "selected-or-first") : -1);
+	const activeIndex = model.nav.length === 0 ? -1 : Math.min(activeIndexState, model.nav.length - 1);
+	const activeItem = activeIndex >= 0 ? model.nav[activeIndex] : void 0;
+	const shouldScrollRef = useRef(false);
+	const [lastTerm, setLastTerm] = useState(rawTerm);
+	if (lastTerm !== rawTerm) {
+		setLastTerm(rawTerm);
+		if (isShown) {
+			setHasSearched(true);
+			setActiveIndexState(firstEnabledIndex(model.nav));
+			shouldScrollRef.current = true;
 		}
 	}
-	const filteredOptions = useMemo(() => {
-		if (!isSearchable || !debouncedSearchTerm.trim()) return options;
-		return onSearch(debouncedSearchTerm, options);
-	}, [
-		isSearchable,
-		onSearch,
-		debouncedSearchTerm,
-		options
-	]);
-	const filteredPinnedOptions = useMemo(() => {
-		if (!isSearchable || !debouncedSearchTerm.trim()) return pinnedOptions;
-		return [];
-	}, [
-		isSearchable,
-		debouncedSearchTerm,
-		pinnedOptions
-	]);
-	if (focusedOptionIndex >= filteredPinnedOptions.length + filteredOptions.length && focusedOptionIndex !== -1) setFocusedOptionIndex(-1);
-	useEffect(() => {
-		optionsRefs.current = [];
-	}, [filteredPinnedOptions, filteredOptions]);
-	const handleToggle = useCallback(() => {
-		if (effectiveIsDisabled) return;
-		setOpen(!visible);
-	}, [
-		effectiveIsDisabled,
-		setOpen,
-		visible
-	]);
-	const handleClose = useCallback(() => {
-		setOpen(false);
-	}, [setOpen]);
-	const handleOptionSelect = (option) => {
-		if (onChange) onChange(option);
-		handleClose();
-	};
-	const handlePinnedOptionSelect = (pinnedOption) => {
-		const option = options.find((opt) => opt.id === pinnedOption.optionId);
-		if (option && onChange) onChange(option);
-		handleClose();
+	const openedInternallyRef = useRef(false);
+	const [lastShown, setLastShown] = useState(isShown);
+	if (lastShown !== isShown) {
+		setLastShown(isShown);
+		if (isShown && !openedInternallyRef.current) setActiveIndexState(openIndex(model.nav, "selected-or-first"));
+		if (!isShown) {
+			setRawTerm("");
+			setHasSearched(false);
+			setIsReasonDismissed(false);
+		}
+		openedInternallyRef.current = false;
+	}
+	/** Keyboard moves scroll the active row into view; pointer moves do not. */
+	const setActive = useCallback((index, shouldScroll) => {
+		shouldScrollRef.current = shouldScroll;
+		setActiveIndexState(index);
+		setIsReasonDismissed(false);
+	}, []);
+	/** Opens the panel on a target row. */
+	const openTo = (index) => {
+		openedInternallyRef.current = true;
+		setActive(index, true);
+		setOpen(true);
 	};
-	const handleReset = () => {
-		if (onReset) onReset();
-		handleClose();
+	const close = () => setOpen(false);
+	useRestoreFocusAfterOutsidePress({
+		isShown,
+		focusRef: controlRef,
+		insideRefs: [wrapperRef, panelRef],
+		focusScopeRefs: [wrapperRef, panelRef]
+	});
+	const onSearchRef = useRef(onSearch);
+	onSearchRef.current = onSearch;
+	const debouncedTerm = useDebouncedValue(rawTerm, SELECT_SEARCH_DEBOUNCE_MS, onSearch !== void 0);
+	const lastSentTermRef = useRef("");
+	useEffect(() => {
+		if (!isShown || onSearchRef.current === void 0) return;
+		if (debouncedTerm === lastSentTermRef.current) return;
+		lastSentTermRef.current = debouncedTerm;
+		onSearchRef.current(debouncedTerm);
+	}, [debouncedTerm, isShown]);
+	const wasShownForSearchRef = useRef(isShown);
+	useEffect(() => {
+		if (wasShownForSearchRef.current && !isShown && onSearchRef.current !== void 0) {
+			lastSentTermRef.current = "";
+			onSearchRef.current("");
+		}
+		wasShownForSearchRef.current = isShown;
+	}, [isShown]);
+	const onEndReachedRef = useRef(onEndReached);
+	onEndReachedRef.current = onEndReached;
+	const firedAtLengthRef = useRef(-1);
+	const optionsLength = options.length;
+	const reachEnd = useCallback(() => {
+		if (onEndReachedRef.current === void 0) return;
+		if (firedAtLengthRef.current === optionsLength) return;
+		firedAtLengthRef.current = optionsLength;
+		onEndReachedRef.current();
+	}, [optionsLength]);
+	const lastOptionNavIndex = (() => {
+		for (let index = model.nav.length - 1; index >= 0; index -= 1) if (model.nav[index]?.kind === "option") return index;
+		return -1;
+	})();
+	const typeaheadRef = useRef({
+		buffer: "",
+		timer: null
+	});
+	useEffect(() => () => {
+		if (typeaheadRef.current.timer !== null) clearTimeout(typeaheadRef.current.timer);
+	}, []);
+	const typeahead = (key, fromIndex) => {
+		const state = typeaheadRef.current;
+		if (state.timer !== null) clearTimeout(state.timer);
+		state.buffer += key.toLocaleLowerCase();
+		state.timer = setTimeout(() => {
+			state.buffer = "";
+			state.timer = null;
+		}, SELECT_TYPEAHEAD_RESET_MS);
+		const isRepeat = [...state.buffer].every((char) => char === state.buffer[0]);
+		const prefix = isRepeat ? state.buffer.slice(0, 1) : state.buffer;
+		const rows = model.nav;
+		const start = isRepeat ? fromIndex + 1 : Math.max(fromIndex, 0);
+		for (let offset = 0; offset < rows.length; offset += 1) {
+			const row = rows[(start + offset + rows.length) % rows.length];
+			if (row === void 0 || row.kind !== "option") continue;
+			if (row.option.label.toLocaleLowerCase().startsWith(prefix)) return row.navIndex;
+		}
+		return fromIndex;
 	};
-	const handleMouseEnter = () => {
-		setIsHovered(true);
+	/** Chooses a row: an enabled option, or the Create row. */
+	const choose = (index) => {
+		const item = model.nav[index];
+		if (item === void 0) return;
+		if (item.kind === "create") {
+			onCreate?.(item.label);
+			setRawTerm("");
+			return;
+		}
+		if (item.isDisabled) return;
+		onOptionSelect(item.option.id);
+		if (!isMultiple) close();
 	};
-	const handleMouseLeave = () => {
-		setIsHovered(false);
+	/** Moves the active row by the keyboard. */
+	const moveTo = (index) => {
+		if (model.nav.length === 0) return;
+		const next = Math.max(0, Math.min(model.nav.length - 1, index));
+		setActive(next, true);
+		if (next === lastOptionNavIndex) reachEnd();
 	};
-	const handleKeyDown = (e) => {
-		if (effectiveIsDisabled) return;
-		if (isSearchable && visible) {
-			handleSearchKeyDown(e);
+	const handleKeyDown = (event) => {
+		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+		if (!isEditable) return;
+		const { key } = event;
+		if (!isShown) {
+			if (key === "Enter" || key === "ArrowDown" || key === " " && !isSearchable) {
+				event.preventDefault();
+				openTo(openIndex(model.nav, "selected-or-first"));
+				return;
+			}
+			if (key === "ArrowUp") {
+				event.preventDefault();
+				openTo(openIndex(model.nav, "selected-or-last"));
+				return;
+			}
+			if ((key === "Home" || key === "End") && !isSearchable) {
+				event.preventDefault();
+				openTo(openIndex(model.nav, key === "Home" ? "first" : "last"));
+				return;
+			}
+			if (isSearchable && (key === "Backspace" || key === "Delete")) {
+				event.preventDefault();
+				return;
+			}
+			if (isPrintableKey(event)) {
+				event.preventDefault();
+				if (isSearchable) {
+					openedInternallyRef.current = true;
+					setRawTerm(key);
+					setOpen(true);
+					return;
+				}
+				if (key === " ") return;
+				openTo(typeahead(key, openIndex(model.nav, "selected-or-first")));
+			}
 			return;
 		}
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			handleToggle();
-		}
-	};
-	const handleSearchKeyDown = (e) => {
-		if (!isSearchable) return;
-		const allOptions = [...filteredPinnedOptions, ...filteredOptions];
-		const currentIndex = focusedOptionIndex;
-		const focusOptionAtIndex = (nextIndex) => {
-			setFocusedOptionIndex(nextIndex);
-			optionsRefs.current[nextIndex]?.scrollIntoView({ block: "nearest" });
-		};
-		switch (e.key) {
+		switch (key) {
 			case "ArrowDown":
-				e.preventDefault();
-				if (currentIndex < allOptions.length - 1) focusOptionAtIndex(currentIndex + 1);
-				break;
+				event.preventDefault();
+				moveTo(activeIndex === -1 ? 0 : activeIndex + 1);
+				return;
 			case "ArrowUp":
-				e.preventDefault();
-				if (currentIndex > 0) focusOptionAtIndex(currentIndex - 1);
-				else inputRef.current?.focus();
-				break;
+				event.preventDefault();
+				if (event.altKey) {
+					if (!isMultiple && activeIndex !== -1) choose(activeIndex);
+					close();
+					return;
+				}
+				moveTo(activeIndex === -1 ? model.nav.length - 1 : activeIndex - 1);
+				return;
+			case "PageDown":
+				event.preventDefault();
+				moveTo((activeIndex === -1 ? 0 : activeIndex) + SELECT_PAGE_STEP);
+				return;
+			case "PageUp":
+				event.preventDefault();
+				moveTo((activeIndex === -1 ? 0 : activeIndex) - SELECT_PAGE_STEP);
+				return;
+			case "Home":
+			case "End":
+				if (isSearchable) return;
+				event.preventDefault();
+				moveTo(key === "Home" ? 0 : model.nav.length - 1);
+				return;
 			case "Enter":
-				e.preventDefault();
-				if (currentIndex >= 0 && currentIndex < allOptions.length) if (currentIndex < filteredPinnedOptions.length) handlePinnedOptionSelect(filteredPinnedOptions[currentIndex]);
-				else handleOptionSelect(filteredOptions[currentIndex - filteredPinnedOptions.length]);
-				else if (filteredOptions.length === 1) handleOptionSelect(filteredOptions[0]);
-				break;
-			case "Escape":
-				e.preventDefault();
-				handleClose();
-				break;
+				event.preventDefault();
+				if (activeIndex !== -1) choose(activeIndex);
+				return;
+			case "Tab":
+				close();
+				return;
 			default:
-				if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) setFocusedOptionIndex(-1);
-				break;
+				if (key === " " && !isSearchable) {
+					event.preventDefault();
+					if (activeIndex !== -1) choose(activeIndex);
+					return;
+				}
+				if (!isSearchable && isPrintableKey(event)) {
+					event.preventDefault();
+					setActive(typeahead(key, activeIndex), true);
+				}
 		}
 	};
-	const handleInputChange = (e) => {
-		setSearchTerm(e.target.value);
-		setFocusedOptionIndex(-1);
+	/** A click on the field toggles the panel; inside an open searchable input it only places the caret. */
+	const handleClick = () => {
+		if (!isEditable) return;
+		if (isShown) {
+			if (!isSearchable) close();
+			return;
+		}
+		openTo(openIndex(model.nav, "selected-or-first"));
 	};
-	const isPinnedOptionSelected = (pinnedOption) => {
-		return value?.id === pinnedOption.optionId;
+	/** Focus leaving the field for anything outside the panel closes it. */
+	const handleBlur = (event) => {
+		if (!isShown) return;
+		const next = event.relatedTarget;
+		if (next !== null && panelRef.current?.contains(next)) return;
+		close();
 	};
-	const isPinnedOptionFocused = (index) => {
-		return isSearchable && focusedOptionIndex === index && index < filteredPinnedOptions.length;
+	const handleInputChange = (event) => {
+		if (!isEditable) return;
+		if (!isShown) {
+			openedInternallyRef.current = true;
+			setOpen(true);
+		}
+		setRawTerm(event.target.value);
 	};
-	const isOptionFocused = (index) => {
-		return isSearchable && focusedOptionIndex === index + filteredPinnedOptions.length && index >= 0;
+	/** Pasting into a closed searchable field starts a term instead of editing the value text. */
+	const handlePaste = (event) => {
+		if (isShown || !isEditable) return;
+		event.preventDefault();
+		openedInternallyRef.current = true;
+		setRawTerm(event.clipboardData.getData("text"));
+		setOpen(true);
 	};
-	const dropdownBody = /* @__PURE__ */ jsxs(SelectInputContent, {
-		$minWidth: dropdownMinWidth,
-		$width: dropdownWidth,
-		children: [
-			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsxs(PinnedOptionButton, {
-				ref: (el) => {
-					optionsRefs.current[index] = el;
-				},
-				$isSelected: isPinnedOptionSelected(pinnedOption),
-				$isFocused: isPinnedOptionFocused(index),
-				onClick: (e) => {
-					e.preventDefault();
-					handlePinnedOptionSelect(pinnedOption);
-				},
-				onMouseEnter: () => setFocusedOptionIndex(index),
-				children: [/* @__PURE__ */ jsx(Text, {
-					size: getInputTextSize(size),
-					cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-					isEllipsis: true,
-					children: pinnedOption.label
-				}), isPinnedOptionSelected(pinnedOption) && /* @__PURE__ */ jsx(OptionIconSlot, { children: /* @__PURE__ */ jsx(Icon, {
-					component: CheckIcon,
-					variant: IconVariant.TERTIARY,
-					weight: IconWeight.BOLD,
-					size: 12
-				}) })]
-			}, pinnedOption.id)), /* @__PURE__ */ jsx(HorizontalDivider, {})] }),
-			/* @__PURE__ */ jsx(SelectInputOptionsContainer, { children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
-				const absoluteIndex = filteredPinnedOptions.length + index;
-				return /* @__PURE__ */ jsxs(SelectInputOption, {
-					ref: (el) => {
-						optionsRefs.current[absoluteIndex] = el;
-					},
-					$isSelected: option.id === value?.id,
-					$isFocused: isOptionFocused(index),
-					onClick: () => handleOptionSelect(option),
-					onMouseEnter: () => setFocusedOptionIndex(absoluteIndex),
-					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
-						alignItems: AlignItems.CENTER,
-						gap: 8,
-						minWidth: 0,
-						grow: 1,
-						children: [option.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: option.icon }), /* @__PURE__ */ jsx(FlexItem, {
-							grow: 1,
-							shrink: 1,
-							minWidth: 0,
-							children: /* @__PURE__ */ jsx(Text, {
-								size: getInputTextSize(size),
-								cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-								isEllipsis: true,
-								variant: option.variant ?? TextVariant.PRIMARY,
-								children: option.label
-							})
-						})]
-					}), option.id === value?.id && /* @__PURE__ */ jsx(OptionIconSlot, { children: /* @__PURE__ */ jsx(Icon, {
-						component: CheckIcon,
-						variant: IconVariant.TERTIARY,
-						weight: IconWeight.BOLD,
-						size: 12
-					}) })]
-				}, option.id);
-			}) : /* @__PURE__ */ jsx(FlexWrapper, {
-				padding: 8,
-				children: /* @__PURE__ */ jsx(Text, {
-					variant: TextVariant.TERTIARY,
-					size: getInputTextSize(size),
-					children: "No options found"
-				})
-			}) }),
-			onReset && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HorizontalDivider, {}), /* @__PURE__ */ jsx(PinnedOptionButton, {
-				onClick: handleReset,
-				$isSelected: false,
-				$isFocused: false,
-				children: /* @__PURE__ */ jsxs(FlexWrapper, {
-					alignItems: AlignItems.CENTER,
-					gap: 8,
-					children: [/* @__PURE__ */ jsx(Icon, {
-						component: ArrowCounterClockwiseIcon,
-						variant: IconVariant.TERTIARY,
-						size: 12
-					}), /* @__PURE__ */ jsx(Text, {
-						variant: TextVariant.SECONDARY,
-						size: getInputTextSize(size),
-						cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-						children: "Reset"
-					})]
-				})
-			})] })
-		]
+	const clear = () => {
+		onClear();
+		if (isShown) close();
+		controlRef.current?.focus();
+	};
+	const activeFlatIndex = activeItem?.flatIndex ?? -1;
+	const isVirtualized = model.flat.length > SELECT_VIRTUALIZE_THRESHOLD;
+	const rowHeightPx = SELECT_INPUT_SIZE_TO_ROW_HEIGHT_PX_MAP[size];
+	const secondaryLinePx = SELECT_INPUT_SIZE_TO_SECONDARY_LINE_PX_MAP[size];
+	const flatRef = useRef(model.flat);
+	flatRef.current = model.flat;
+	const virtualizer = useVirtualizer({
+		count: isVirtualized ? model.flat.length : 0,
+		getScrollElement: () => viewportElement,
+		estimateSize: (index) => {
+			const item = flatRef.current[index];
+			if (item?.kind === "option" && isFilled(item.option.description)) return rowHeightPx + secondaryLinePx;
+			if (item?.kind === "separator") return Number.parseFloat(SPACE[4]) * 2 + 1;
+			return rowHeightPx;
+		},
+		overscan: SELECT_VIRTUAL_OVERSCAN,
+		rangeExtractor: (range) => {
+			const indexes = defaultRangeExtractor(range);
+			if (activeFlatIndex < 0 || activeFlatIndex >= range.count) return indexes;
+			if (indexes.includes(activeFlatIndex)) return indexes;
+			return [...indexes, activeFlatIndex].sort((a, b) => a - b);
+		},
+		paddingStart: SELECT_LIST_INSET_PX,
+		paddingEnd: SELECT_LIST_INSET_PX
 	});
-	const textVariant = useMemo(() => {
-		if (selectedOption) return TextVariant.PRIMARY;
-		if (!effectiveIsDisabled && (visible || isHovered)) return TextVariant.SECONDARY;
-		return TextVariant.TERTIARY;
+	const virtualItems = isVirtualized ? virtualizer.getVirtualItems() : [];
+	const visibleRange = isVirtualized ? virtualizer.range : null;
+	const lastVirtualIndex = visibleRange === null ? -1 : Math.min(visibleRange.endIndex + SELECT_VIRTUAL_OVERSCAN, model.flat.length - 1);
+	const lastOptionFlatIndex = lastOptionNavIndex === -1 ? -1 : model.nav[lastOptionNavIndex]?.flatIndex ?? -1;
+	useEffect(() => {
+		if (!isShown || !isVirtualized || lastOptionFlatIndex === -1) return;
+		if (lastVirtualIndex >= lastOptionFlatIndex) reachEnd();
 	}, [
-		selectedOption,
-		visible,
-		isHovered,
-		effectiveIsDisabled
+		isShown,
+		isVirtualized,
+		lastVirtualIndex,
+		lastOptionFlatIndex,
+		reachEnd
 	]);
-	return /* @__PURE__ */ jsxs(FlexWrapper, {
-		direction: FlexDirection.COLUMN,
-		gap: 4,
-		minWidth: 0,
-		fillWidth,
+	const activeDomId = activeItem?.domId;
+	useIsomorphicLayoutEffect(() => {
+		if (!shouldScrollRef.current || !isShown || viewportElement === null) return;
+		shouldScrollRef.current = false;
+		if (isVirtualized) {
+			if (activeFlatIndex >= 0) virtualizer.scrollToIndex(activeFlatIndex, { align: "auto" });
+			return;
+		}
+		if (activeDomId === void 0) return;
+		panelRef.current?.ownerDocument.getElementById(activeDomId)?.scrollIntoView({ block: "nearest" });
+	});
+	const handleScroll = (event) => {
+		if (isVirtualized) return;
+		const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
+		if (scrollTop + clientHeight >= scrollHeight - rowHeightPx) reachEnd();
+	};
+	useDevWarning(!hasName, "[@galaxy-io/dls] SelectInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`. `placeholder` is not a name.");
+	let statusText = "";
+	if (isShown) {
+		if (isLoading) statusText = "Loading";
+		else if (model.nav.length === 0) statusText = emptyMessage;
+		else if (hasSearched) statusText = `${model.optionCount} ${model.optionCount === 1 ? "result" : "results"}`;
+	}
+	const textSize = SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size];
+	const caretPx = SELECT_INPUT_SIZE_TO_CARET_PX_MAP[size];
+	const rowTextSize = SELECT_INPUT_SIZE_TO_ROW_TEXT_SIZE_MAP[size];
+	const rowSecondarySize = SELECT_INPUT_SIZE_TO_ROW_SECONDARY_TEXT_SIZE_MAP[size];
+	const rowIconPx = SELECT_INPUT_SIZE_TO_ROW_ICON_PX_MAP[size];
+	const hasSelection = selectedOptions.length > 0;
+	const isClearHidden = !hasSelection || !isEditable;
+	const controlClassName = cx(isGhost ? GHOST_CSS : SELECT_INPUT_VARIANT_TO_CSS_MAP[variant], SELECT_INPUT_SIZE_TO_CSS_MAP[size], isClearable && SELECT_INPUT_SIZE_TO_CLEARABLE_CSS_MAP[size], isEditable && !isInvalid && (isGhost ? GHOST_HOVER_CSS : SELECT_INPUT_VARIANT_TO_HOVER_CSS_MAP[variant]), !isDisabled && FOCUS_CSS, isShown && OPEN_CSS, isInvalid && !isDisabled && ERROR_CSS, isDisabled && DISABLED_CSS, isReadOnly && READ_ONLY_CSS, isBare && "gx-bareField-BARE_FIELD_CSS-b1memido");
+	const sharedControlProps = {
+		ref: mergedRef,
+		id: controlId,
+		role: "combobox",
+		"aria-activedescendant": isShown && activeDomId !== void 0 ? activeDomId : void 0,
+		"aria-labelledby": field?.labelId,
+		"aria-label": ariaLabel,
+		"aria-describedby": describedBy,
+		"aria-invalid": isInvalid ? true : void 0,
+		"aria-required": isRequiredState ? true : void 0,
+		"aria-readonly": isReadOnly ? true : void 0,
+		onKeyDown: handleKeyDown,
+		onClick: handleClick,
+		onBlur: handleBlur,
+		...rest
+	};
+	const placeholderText = /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: textSize,
+		variant: isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+		lineClamp: 1,
+		children: placeholder
+	});
+	const control = isSearchable ? /* @__PURE__ */ jsx(ControlInput, {
+		...sharedControlProps,
+		type: "text",
+		autoComplete: "off",
+		autoCorrect: "off",
+		spellCheck: false,
+		"aria-autocomplete": "list",
+		value: isShown ? rawTerm : selectionText,
+		placeholder,
+		disabled: isDisabled,
+		readOnly: isReadOnly,
+		onChange: handleInputChange,
+		onPaste: handlePaste,
+		className: cx(controlClassName, SELECT_INPUT_SIZE_TO_FONT_CSS_MAP[size], isShown && TYPING_CSS, !isShown && hasSelection && VALUE_OVERLAID_CSS)
+	}) : /* @__PURE__ */ jsx(Control, {
+		...sharedControlProps,
+		tabIndex: isDisabled ? -1 : 0,
+		"aria-disabled": isDisabled ? true : void 0,
+		className: controlClassName,
+		children: hasSelection ? /* @__PURE__ */ jsx(SelectionSlot, { children: renderSelection(selectedOptions) }) : /* @__PURE__ */ jsx(ValueDisplay, {
+			className: SELECT_INPUT_SIZE_TO_VALUE_CSS_MAP[size],
+			children: placeholderText
+		})
+	});
+	/** One option or Create row. */
+	const renderNavRow = (item, virtualStart) => {
+		const isActive = item.navIndex === activeIndex;
+		const isRowDisabled = item.kind === "option" && item.isDisabled;
+		const isSelected = item.kind === "option" && item.isSelected;
+		const virtualProps = virtualStart === void 0 ? {} : {
+			"data-index": item.flatIndex,
+			ref: virtualizer.measureElement,
+			style: { "--gx-select-row-y": `${virtualStart}px` },
+			...item.kind === "option" ? {
+				"aria-setsize": model.optionCount,
+				"aria-posinset": item.position
+			} : {}
+		};
+		let content;
+		if (item.kind === "create") content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
+			component: PlusIcon,
+			size: rowIconPx,
+			variant: IconVariant.SECONDARY,
+			className: NO_SHRINK_CSS
+		}), /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Text, {
+			as: "span",
+			size: rowTextSize,
+			lineClamp: 1,
+			children: [
+				"Create \"",
+				/* @__PURE__ */ jsx(Span, {
+					weight: TextWeight.MEDIUM,
+					children: item.label
+				}),
+				"\""
+			]
+		}) })] });
+		else if (renderOption !== void 0) content = /* @__PURE__ */ jsx(Content, { children: renderOption(item.option, {
+			isSelected,
+			isActive
+		}) });
+		else {
+			const { option } = item;
+			content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				hasContent(option.leading) && /* @__PURE__ */ jsx(Slot, { children: option.leading }),
+				option.icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+					component: option.icon,
+					size: rowIconPx,
+					variant: isRowDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY,
+					className: NO_SHRINK_CSS
+				}),
+				/* @__PURE__ */ jsxs(Content, { children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: rowTextSize,
+					variant: isRowDisabled ? TextVariant.DISABLED : TextVariant.PRIMARY,
+					lineClamp: 1,
+					children: option.label
+				}), isFilled(option.description) && /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: rowSecondarySize,
+					variant: isRowDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+					lineClamp: 2,
+					children: option.description
+				})] })
+			] });
+		}
+		const row = /* @__PURE__ */ jsxs(OptionRow, {
+			...virtualProps,
+			id: item.domId,
+			role: "option",
+			"aria-selected": isSelected,
+			...isRowDisabled ? { "aria-disabled": true } : {},
+			onPointerMove: () => {
+				if (item.navIndex !== activeIndex) setActive(item.navIndex, false);
+			},
+			onClick: () => choose(item.navIndex),
+			className: cx(SELECT_INPUT_SIZE_TO_ROW_CSS_MAP[size], isActive && ACTIVE_ROW_CSS, isActive && !isRowDisabled && ACTIVE_ROW_PRESS_CSS, isRowDisabled && ROW_DISABLED_CSS, virtualStart !== void 0 && VIRTUAL_ROW_CSS),
+			children: [content, /* @__PURE__ */ jsx(CheckSlot, {
+				className: SELECT_INPUT_SIZE_TO_CHECK_SLOT_CSS_MAP[size],
+				children: isSelected && /* @__PURE__ */ jsx(Icon, {
+					component: CheckIcon,
+					size: rowIconPx,
+					variant: isRowDisabled ? IconVariant.DISABLED : IconVariant.PRIMARY,
+					"aria-hidden": true
+				})
+			})]
+		}, item.key);
+		if (item.kind !== "option" || !item.isDisabled || !isFilled(item.disabledReason)) return row;
+		return /* @__PURE__ */ jsx(Tooltip, {
+			body: item.disabledReason,
+			placement: Placement.RIGHT,
+			isOpen: isShown && isActive && !isReasonDismissed,
+			onOpenChange: (next) => {
+				if (!next && isActive) setIsReasonDismissed(true);
+			},
+			children: row
+		}, item.key);
+	};
+	const renderHeading = (heading, virtual) => /* @__PURE__ */ jsx(GroupLabel, {
+		role: "presentation",
+		id: heading.id,
+		className: cx(SELECT_INPUT_SIZE_TO_GROUP_LABEL_CSS_MAP[size], virtual !== void 0 && VIRTUAL_ROW_CSS),
+		...virtual === void 0 ? {} : {
+			"data-index": virtual.index,
+			ref: virtualizer.measureElement,
+			style: { "--gx-select-row-y": `${virtual.start}px` }
+		},
+		children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: rowSecondarySize,
+			weight: TextWeight.MEDIUM,
+			variant: TextVariant.TERTIARY,
+			lineClamp: 1,
+			children: heading.label
+		})
+	}, heading.key);
+	const renderSeparator = (key, virtual) => /* @__PURE__ */ jsx("div", {
+		role: "presentation",
+		className: cx(SEPARATOR_CSS, virtual !== void 0 && VIRTUAL_ROW_CSS),
+		...virtual === void 0 ? {} : {
+			"data-index": virtual.index,
+			ref: virtualizer.measureElement,
+			style: { "--gx-select-row-y": `${virtual.start}px` }
+		},
+		children: /* @__PURE__ */ jsx(Divider, { "aria-hidden": true })
+	}, key);
+	const renderStatus = (kind, virtual) => /* @__PURE__ */ jsx(StatusRow, {
+		"aria-hidden": true,
+		className: cx(SELECT_INPUT_SIZE_TO_ROW_CSS_MAP[size], virtual !== void 0 && VIRTUAL_ROW_CSS),
+		...virtual === void 0 ? {} : {
+			"data-index": virtual.index,
+			ref: virtualizer.measureElement,
+			style: { "--gx-select-row-y": `${virtual.start}px` }
+		},
+		children: kind === "loading" ? /* @__PURE__ */ jsx(Spinner, {
+			size: SELECT_INPUT_SIZE_TO_SPINNER_SIZE_MAP[size],
+			label: "Loading",
+			"aria-hidden": true
+		}) : /* @__PURE__ */ jsx(Text, {
+			size: rowTextSize,
+			variant: TextVariant.TERTIARY,
+			children: emptyMessage
+		})
+	}, kind);
+	let listContent;
+	if (isVirtualized) listContent = /* @__PURE__ */ jsx(VirtualBody, {
+		style: { "--gx-select-list-height": `${virtualizer.getTotalSize()}px` },
+		children: virtualItems.map((virtualItem) => {
+			const item = model.flat[virtualItem.index];
+			if (item === void 0) return null;
+			const virtual = {
+				index: virtualItem.index,
+				start: virtualItem.start
+			};
+			switch (item.kind) {
+				case "option":
+				case "create": return renderNavRow(item, virtualItem.start);
+				case "heading": return renderHeading(item, virtual);
+				case "separator": return renderSeparator(item.key, virtual);
+				default: return renderStatus(item.kind, virtual);
+			}
+		})
+	});
+	else listContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		model.pinned.map((item) => renderNavRow(item)),
+		model.hasSeparator && renderSeparator("separator"),
+		model.sections.map((section) => section.heading === null ? section.rows.map((item) => renderNavRow(item)) : /* @__PURE__ */ jsxs(GroupRoot, {
+			role: "group",
+			"aria-labelledby": section.heading.id,
+			children: [renderHeading(section.heading), section.rows.map((item) => renderNavRow(item))]
+		}, section.key)),
+		model.create !== null && renderNavRow(model.create),
+		model.status !== null && renderStatus(model.status)
+	] });
+	const body = /* @__PURE__ */ jsx(ListFrame, {
+		className: cx(isVirtualized && VIRTUALIZED_FRAME_CSS),
+		onMouseDown: (event) => event.preventDefault(),
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			ref: setViewportElement,
+			onScroll: handleScroll,
+			children: /* @__PURE__ */ jsx(List, {
+				className: cx(isVirtualized && VIRTUAL_LIST_CSS),
+				children: listContent
+			})
+		})
+	});
+	const labelId = field?.labelId;
+	const explicitLabelledBy = rest["aria-labelledby"];
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		ref: wrapperRef,
+		className: cx(fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
 		children: [
-			label && /* @__PURE__ */ jsx(InputLabel, {
-				label,
-				isRequired
+			/* @__PURE__ */ jsx(Popover, {
+				ref: panelRef,
+				trigger: PopoverTrigger.MANUAL,
+				role: PopoverRole.LISTBOX,
+				variant: isGhost ? PopoverVariant.BASE : SELECT_INPUT_VARIANT_TO_POPOVER_VARIANT_MAP[variant],
+				placement,
+				isOpen: isShown,
+				onOpenChange: setOpen,
+				isDisabled: !isEditable,
+				id: listboxId,
+				...isFilled(explicitLabelledBy) ? { "aria-labelledby": explicitLabelledBy } : labelId !== void 0 ? { "aria-labelledby": labelId } : isFilled(ariaLabel) ? { ariaLabel } : {},
+				...isMultiple ? { "aria-multiselectable": true } : {},
+				...isLoading ? { "aria-busy": true } : {},
+				body: /* @__PURE__ */ jsx(BareFieldContext.Provider, {
+					value: false,
+					children: body
+				}),
+				children: control
 			}),
-			/* @__PURE__ */ jsx(Dropdown, {
-				variant: INPUT_VARIANT_TO_DROPDOWN_VARIANT[variant],
-				body: dropdownBody,
-				isOpen: visible,
-				onClose: handleClose,
-				minWidth: 0,
-				offset: [0, 3],
-				fillWidth,
-				noPadding: true,
-				children: isSearchable && visible ? /* @__PURE__ */ jsxs(StyledSelectInput, {
-					ref: triggerRef,
-					$variant: variant,
-					$size: size,
-					$isActive: visible ?? false,
-					$isDisabled: effectiveIsDisabled,
-					$isError: !!error,
-					$width: width,
-					$fillWidth: fillWidth,
-					onMouseEnter: handleMouseEnter,
-					onMouseLeave: handleMouseLeave,
-					onClick: handleToggle,
-					children: [/* @__PURE__ */ jsx(StyledSearchInput, {
-						ref: inputRef,
-						$size: size,
-						$isActive: visible ?? false,
-						$isDisabled: effectiveIsDisabled,
-						$isError: !!error,
-						$width: width,
-						$fillWidth: fillWidth,
-						type: "text",
-						placeholder,
-						value: searchTerm,
-						onChange: handleInputChange,
-						onKeyDown: handleSearchKeyDown,
-						autoComplete: "off",
-						autoCorrect: "off",
-						disabled: effectiveIsDisabled,
-						onClick: (e) => e.stopPropagation()
-					}), /* @__PURE__ */ jsx(FlexWrapper, {
-						shrink: 0,
-						children: /* @__PURE__ */ jsx(Rotate, {
-							isRotated: visible,
-							deg: -180,
-							children: /* @__PURE__ */ jsx(Icon, {
-								component: CaretDownIcon,
-								size: getInputIconSize(size),
-								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
-							})
-						})
-					})]
-				}) : /* @__PURE__ */ jsxs(StyledSelectInput, {
-					ref: triggerRef,
-					$variant: variant,
-					$size: size,
-					$isActive: visible ?? false,
-					$isDisabled: effectiveIsDisabled,
-					$isError: !!error,
-					$width: width,
-					$fillWidth: fillWidth,
-					onClick: handleToggle,
-					onKeyDown: handleKeyDown,
-					onMouseEnter: handleMouseEnter,
-					onMouseLeave: handleMouseLeave,
-					role: "button",
-					tabIndex: effectiveIsDisabled ? -1 : 0,
-					"aria-haspopup": "listbox",
-					"aria-expanded": visible,
-					"aria-label": selectedOption ? selectedOption.label : placeholder,
-					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
-						alignItems: AlignItems.CENTER,
-						gap: 8,
-						minWidth: 0,
-						grow: 1,
-						children: [selectedOption?.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: selectedOption.icon }), /* @__PURE__ */ jsx(FlexItem, {
-							grow: 1,
-							shrink: 1,
-							minWidth: 0,
-							children: /* @__PURE__ */ jsx(Text, {
-								variant: textVariant,
-								size: getInputTextSize(size),
-								cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-								isEllipsis: true,
-								children: selectedOption ? selectedOption.label : placeholder
-							})
-						})]
-					}), /* @__PURE__ */ jsx(FlexWrapper, {
-						shrink: 0,
-						children: /* @__PURE__ */ jsx(Rotate, {
-							isRotated: visible,
-							deg: -180,
-							children: /* @__PURE__ */ jsx(Icon, {
-								component: CaretDownIcon,
-								size: getInputIconSize(size),
-								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
-							})
-						})
-					})]
-				})
+			isSearchable && !isShown && hasSelection && /* @__PURE__ */ jsx(ValueOverlay, {
+				"aria-hidden": true,
+				className: cx(SELECT_INPUT_SIZE_TO_OVERLAY_CSS_MAP[size], isClearable && SELECT_INPUT_SIZE_TO_CLEARABLE_CSS_MAP[size]),
+				children: /* @__PURE__ */ jsx(SelectionSlot, { children: renderSelection(selectedOptions) })
 			}),
-			error && /* @__PURE__ */ jsx(Text, {
-				variant: TextVariant.ERROR,
-				size: TextSize.BODY_SM,
-				children: error
+			/* @__PURE__ */ jsxs(Trailing, {
+				className: SELECT_INPUT_SIZE_TO_TRAILING_CSS_MAP[size],
+				children: [isClearable && /* @__PURE__ */ jsx(ClearSlot, {
+					className: cx(isClearHidden && CLEAR_HIDDEN_CSS),
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: ButtonVariant.TERTIARY,
+						size: SELECT_INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+						icon: XIcon,
+						ariaLabel: "Clear",
+						onClick: clear,
+						className: cx(size === "X_SMALL" && "gx-innerButton-X_SMALL_INNER_BUTTON_CSS-x1ep0pcd")
+					})
+				}), /* @__PURE__ */ jsx(Rotate, {
+					isRotated: isShown,
+					"aria-hidden": true,
+					children: /* @__PURE__ */ jsx(Icon, {
+						component: CaretDownIcon,
+						size: caretPx,
+						variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(StatusRegion, {
+				role: "status",
+				"aria-live": "polite",
+				children: statusText
 			})
 		]
 	});
-};
+}
+/**
+* @internal Shared by SelectInput and MultiSelectInput; apps use those. The engine: the field
+* (with its own `Field` for `label` / `error`), the listbox panel, the rows, search, typeahead and
+* virtualization.
+*/
+var SelectInputRootInner = forwardRef(function SelectInputRoot(props, ref) {
+	const { label, error, isRequired = false, componentName = "SelectInput", size = "MEDIUM", fillWidth = false } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName,
+		label,
+		error,
+		isRequired,
+		size: SELECT_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && FILL_WIDTH_CSS
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(SelectInputFrame, {
+			rootProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(SelectInputFrame, {
+		rootProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+SelectInputRootInner.displayName = "SelectInputRoot";
+/** @internal Shared by SelectInput and MultiSelectInput; apps use those. */
+var SelectInputRoot = SelectInputRootInner;
+/** The default value display: the option's leading, icon and label. */
+function OptionValue({ option, size, isDisabled }) {
+	return /* @__PURE__ */ jsxs(ValueDisplay, {
+		className: SELECT_INPUT_SIZE_TO_VALUE_CSS_MAP[size],
+		children: [
+			hasContent(option.leading) && /* @__PURE__ */ jsx(Slot, { children: option.leading }),
+			option.icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+				component: option.icon,
+				size: SELECT_INPUT_SIZE_TO_ICON_PX_MAP[size],
+				variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY,
+				className: NO_SHRINK_CSS,
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+				variant: isDisabled ? TextVariant.DISABLED : TextVariant.PRIMARY,
+				lineClamp: 1,
+				children: option.label
+			})
+		]
+	});
+}
+/** Choose one value from a list of options, in a field that opens a listbox. */
+var SelectInputInner = forwardRef(function SelectInput({ value, defaultValue = null, onChange, renderValue, size: sizeProp, isDisabled: isDisabledProp, className, style, ...rest }, ref) {
+	const size = sizeProp ?? "MEDIUM";
+	const isDisabled = isDisabledProp ?? false;
+	const [currentValue, setValue] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	return /* @__PURE__ */ jsx(SelectInputRoot, {
+		...rest,
+		ref,
+		size,
+		isDisabled,
+		selectedIds: currentValue === null ? [] : [currentValue],
+		isMultiple: false,
+		onOptionSelect: setValue,
+		onClear: () => setValue(null),
+		renderSelection: (selected) => {
+			const option = selected[0];
+			if (option === void 0) return null;
+			if (renderValue !== void 0) return renderValue(option);
+			return /* @__PURE__ */ jsx(OptionValue, {
+				option,
+				size,
+				isDisabled
+			});
+		},
+		getSelectionText: (selected) => selected[0]?.label ?? "",
+		limitReason: void 0,
+		onCreate: void 0,
+		...className === void 0 ? {} : { className },
+		...style === void 0 ? {} : { style }
+	});
+});
+SelectInputInner.displayName = "SelectInput";
+/** Choose one value from a list of options, in a field that opens a listbox. */
+var SelectInput = SelectInputInner;
 //#endregion
-export { INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInput as default };
+export { SelectInputRoot, SelectInputSize, SelectInputVariant, SelectInput as default };