@astryxdesign/core 0.2.0 → 0.3.0-canary.041a0ef

package/dist/Selector/Selector.js

@@ -4,7 +4,8 @@
 
 /**
  * @file Selector.tsx
- * @input Uses React, StyleX, usePopover, useTooltip, Icon, InputGroupContext
+ * @input Uses React, StyleX, usePopover, useTooltip, Icon, InputGroupContext,
+ *   and Selector positioning hooks
  * @output Exports Selector component
  * @position Core implementation; consumed by index.ts
  *
@@ -13,7 +14,7 @@
  * - /packages/core/src/Selector/Selector.test.tsx
  * - /packages/core/src/Selector/index.ts
  * - /apps/storybook/stories/InputGroup.stories.tsx
- * - /packages/cli/templates/blocks/components/Selector/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Selector/ (showcase blocks)
  */
 import React, { useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -24,11 +25,13 @@ import { Field, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrap
 import { Divider } from "../Divider/index.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import { Spinner } from "../Spinner/index.js";
+import { TextInput } from "../TextInput/index.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
 import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "./utils.js";
 import { useCombobox, useSelectedItemOffset } from "./hooks.js";
+import { useTypeahead } from "../hooks/useTypeahead.js";
 import { SelectorOption } from "./SelectorOption.js";
 import { getInputARIA, mergeProps } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
@@ -59,6 +62,39 @@ const styles = {
     kMwMTN: "xv1l7n4",
     $$css: true
   },
+  triggerIcon: {
+    kmuXW: "x2lah0s",
+    $$css: true
+  },
+  triggerIconRotation: {
+    k1ekBW: "x11xpdln",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    k3nNDw: "x1g0ag68",
+    $$css: true
+  },
+  triggerIconOpen: {
+    k3aq6I: "x19jd1h0",
+    $$css: true
+  },
+  triggerGhost: {
+    kzqmXN: "x14atkfc",
+    kMzoRj: "xc342km",
+    kWkggS: "xjbqb8w",
+    kKwaWg: "x1ilzqfv xq8i9tn",
+    kGVxlE: "x1gnnqk1 x1irk71m x15ysqaf",
+    k63SB2: "x1e4wzip",
+    kI3sdo: "x1a2a7pz x1irc7jg",
+    kInvED: "x1wfwxd8 xscfbxq",
+    k1ekBW: "xrafxwg",
+    k3aq6I: "x3oybdh xk4oym4",
+    $$css: true
+  },
+  triggerGhostDisabled: {
+    kKwaWg: "x18o3ruo",
+    k3aq6I: "x1c071of x1pdlv7q",
+    $$css: true
+  },
   popover: {
     k7Eaqz: "xrzjruh",
     $$css: true
@@ -148,6 +184,11 @@ const STATUS_ICON_COLOR_MAP = {
   error: 'error',
   success: 'success'
 };
+const STATUS_BUTTON_LABEL_KEY = {
+  warning: '@astryx.input.statusButton.warning',
+  error: '@astryx.input.statusButton.error',
+  success: '@astryx.input.statusButton.success'
+};
 
 /**
  * Without `hasClear`, the selector always has a string value (or undefined for placeholder).
@@ -218,6 +259,7 @@ export function Selector(props) {
     isLoading = false,
     placeholder: placeholderFromProps,
     size: sizeProp,
+    variant = 'input',
     status,
     statusVariant = 'attached',
     labelTooltip,
@@ -240,6 +282,7 @@ export function Selector(props) {
   const searchPlaceholder = searchPlaceholderFromProps ?? t('@astryx.selector.searchPlaceholder');
   const hasClear = hasClearProp === true;
   const size = useSize(sizeProp, 'md');
+  const effectiveStatusVariant = variant === 'ghost' && statusVariant === 'attached' ? 'detached' : statusVariant;
 
   // Normalize null to undefined for internal use (null is the clear sentinel)
   const normalizedValue = value === null ? undefined : value;
@@ -249,13 +292,20 @@ export function Selector(props) {
   const statusMessageId = useId();
   const inputLabelId = useId();
   const searchId = useId();
+  // Measure from the same outer control that usePopover anchors to; using the
+  // shorter inner button makes every size's selected row land too low.
+  const anchorRef = useRef(null);
   const triggerRef = useRef(null);
   const searchRef = useRef(null);
   const inputGroup = useInputGroup();
   const [searchQuery, setSearchQuery] = useState('');
+  // A typed query shows TextInput's built-in clear (✕) button, which becomes
+  // the next tab stop after the search input.
+  const hasQuery = searchQuery.length > 0;
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(normalizedValue);
   const isBusy = isLoading || optimisticValue !== normalizedValue;
+  const announce = useAnnounce();
 
   // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
   // tooltip listeners attach to the trigger container (which already exists)
@@ -270,10 +320,14 @@ export function Selector(props) {
     focusTrigger: 'always',
     isEnabled: showsDisabledMessage
   });
+  const statusTooltip = useTooltip({
+    placement: 'above',
+    isEnabled: effectiveStatusVariant === 'tooltip' && !!status?.message
+  });
   const {
     ariaLabelledBy,
     ariaDescribedBy
-  } = getInputARIA(inputLabelId, [description ? descriptionId : null, status?.message ? statusMessageId : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+  } = getInputARIA(inputLabelId, [description ? descriptionId : null, !inputGroup && effectiveStatusVariant !== 'tooltip' && status?.message ? statusMessageId : null, effectiveStatusVariant === 'tooltip' && status?.message ? statusTooltip.describedBy : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
 
   // Flatten options for keyboard navigation
   const selectableItems = useMemo(() => getSelectableOptions(options), [options]);
@@ -292,15 +346,15 @@ export function Selector(props) {
   // Ref for listbox to measure selected item position
   const listboxRef = useRef(null);
 
-  // Announce match counts / "No results found" politely as the user types, so
-  // screen-reader users hear how many options remain. Filtering was previously
-  // silent (comboboxes-7). Mirrors BaseTypeahead, which announces from its
-  // query-change callback (not a reactive effect) via the same useAnnounce hook.
-  const announce = useAnnounce();
+  // Typeahead is defined below (it needs the popover), but closing and clearing
+  // must drop its pending buffer — otherwise a stale prefix survives the reset
+  // window and poisons the next keystroke ("Dog" then "c" would search "dc").
+  const resetTypeaheadRef = useRef(() => {});
 
   // Layer for dropdown positioning
   const handleLayerHide = useCallback(() => {
     setSearchQuery('');
+    resetTypeaheadRef.current();
     // Clear any lingering result count when the popover closes so stale status
     // text does not linger in the a11y tree.
     announce('');
@@ -328,8 +382,7 @@ export function Selector(props) {
   // BaseTypeahead) rather than a reactive effect: computing the count for the
   // next query here fires the announcement exactly once per keystroke and does
   // not re-speak on unrelated re-renders.
-  const handleSearchChange = useCallback(event => {
-    const nextQuery = event.target.value;
+  const handleSearchChange = useCallback(nextQuery => {
     setSearchQuery(nextQuery);
     if (nextQuery.length === 0) {
       // Emptying the query clears the region rather than announcing a count.
@@ -352,7 +405,7 @@ export function Selector(props) {
     selectedItemIndex,
     listboxId,
     listboxRef,
-    triggerRef
+    anchorRef
   });
   const selectedItemOffset = shouldOverlaySelectedItem ? rawOffset : 0;
   const isPositioned = shouldOverlaySelectedItem ? rawIsPositioned : true;
@@ -364,6 +417,7 @@ export function Selector(props) {
   // Clear the current value. Shared by the clear button and the keyboard
   // Delete/Backspace path so clearing is reachable without a mouse.
   const clearValue = useCallback(() => {
+    resetTypeaheadRef.current();
     onChange?.(null);
     if (changeAction) {
       startTransition(async () => {
@@ -373,10 +427,25 @@ export function Selector(props) {
     }
   }, [onChange, changeAction, startTransition, setOptimisticValue]);
 
-  // Selector behavior (keyboard nav, typeahead, selection)
+  // Type-to-find appends to the query rather than replacing it: characters
+  // typed before focus reaches the search input must not be dropped.
+  const appendSearchQuery = useCallback(char => {
+    setSearchQuery(query => query + char);
+  }, []);
+  const commitValue = useCallback(newValue => {
+    onChange?.(newValue);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue(newValue);
+        await changeAction(newValue);
+      });
+    }
+  }, [onChange, changeAction, startTransition, setOptimisticValue]);
+
+  // Selector behavior (keyboard nav, selection)
   const {
     highlightedIndex,
-    setHighlightedIndex: _setHighlightedIndex,
+    setHighlightedIndex,
     getItemId,
     onTriggerClick,
     onKeyDown,
@@ -384,7 +453,11 @@ export function Selector(props) {
     onItemMouseEnter
   } = useCombobox({
     selectableItems: filteredItems,
-    value: normalizedValue,
+    // The optimistic value, not the raw prop: with a pending changeAction the
+    // prop still holds the old selection, so the popup would open with the
+    // highlight on it and Delete/Backspace could clear a value the action has
+    // already replaced.
+    value: optimisticValue,
     isDisabled,
     isOpen: popover.isOpen,
     hasSearch,
@@ -392,24 +465,56 @@ export function Selector(props) {
       popover.show();
       if (hasSearch) {
         requestAnimationFrame(() => {
-          searchRef.current?.focus();
+          const input = searchRef.current;
+          if (input) {
+            input.focus();
+            // When typing seeded the query, place the caret after it so the
+            // user keeps typing where they left off.
+            input.setSelectionRange(input.value.length, input.value.length);
+          }
         });
       }
     }, [popover, hasSearch]),
     onClose: popover.hide,
-    onSelect: useCallback(newValue => {
-      onChange?.(newValue);
-      if (changeAction) {
-        startTransition(async () => {
-          setOptimisticValue(newValue);
-          await changeAction(newValue);
-        });
-      }
-    }, [onChange, changeAction, startTransition, setOptimisticValue]),
+    onSelect: commitValue,
     onClear: hasClear ? clearValue : undefined,
+    onSearchSeed: appendSearchQuery,
     listboxId
   });
 
+  // Type-to-select, shared with the other collections (menus, listboxes).
+  // Open, it walks the highlight — aria-activedescendant announces each match.
+  // Closed, it commits the match like a native select, which changes the value
+  // without opening the popup or moving focus, so nothing else would prompt
+  // assistive tech to re-read the trigger: announce it explicitly.
+  const typeahead = useTypeahead({
+    getItemLabels: () => selectableItems.map(item => item.label ?? item.value),
+    isDisabled: index => selectableItems[index]?.disabled === true,
+    // Cycle onward from the highlight when open, from the committed selection
+    // when closed — the optimistic one, so a pending changeAction cannot strand
+    // cycling on the first match. -1 means nothing is selected or highlighted,
+    // which the hook reads as "search from the top".
+    getCurrentIndex: () => popover.isOpen ? highlightedIndex : selectedItemIndex,
+    onMatch: index => {
+      const item = selectableItems[index];
+      if (popover.isOpen) {
+        setHighlightedIndex(index);
+      } else if (item.value !== optimisticValue) {
+        commitValue(item.value);
+        announce(item.label ?? item.value);
+      }
+    }
+  });
+  resetTypeaheadRef.current = typeahead.reset;
+  const handleTriggerKeyDown = useCallback(e => {
+    // With hasSearch the query input owns typing, so type-to-select is off.
+    if (!isDisabled && !hasSearch && typeahead.onKeyDown(e)) {
+      e.preventDefault();
+      return;
+    }
+    onKeyDown(e);
+  }, [isDisabled, hasSearch, typeahead, onKeyDown]);
+
   // Keep the highlighted option visible during keyboard navigation. The
   // listbox is a fixed-height scroll container, so without this the virtual
   // cursor walks off-screen once navigation passes the visible window. Mirrors
@@ -436,41 +541,72 @@ export function Selector(props) {
     }
     return /*#__PURE__*/_jsx("div", {
       ...{
-        className: "xf314gf xu0wf1k"
+        className: "x78zum5 x6s0dn4 xf314gf xu0wf1k"
+      },
+      onKeyDown: e => {
+        // The clear (✕) button lives inside the TextInput, after the input in
+        // DOM order. When it is focused and the user tabs forward there is
+        // nothing else in the popup, so dismiss it (Shift+Tab returns to the
+        // input natively). Key events originating on the input are handled on
+        // the input below; ignore them here so we don't double-dismiss.
+        if (e.target === searchRef.current) {
+          return;
+        }
+        if (e.key === 'Tab' && !e.shiftKey) {
+          onKeyDown(e);
+        }
       },
-      children: /*#__PURE__*/_jsx("input", {
+      children: /*#__PURE__*/_jsx(TextInput, {
         ref: searchRef,
         id: searchId
+        // The search field IS a TextInput: the leading magnifier is its
+        // `startIcon` and the trailing clear (✕) is its built-in `hasClear`
+        // (which resets the value and refocuses the input). We add no bespoke
+        // affordance chrome — the field just looks and behaves like every
+        // other Astryx input.
+        ,
+        label: t('@astryx.selector.searchOptions'),
+        isLabelHidden: true,
+        startIcon: "search",
+        hasClear: true,
+        size: "sm"
+        // Fill the dropdown's width (minus the wrapper's inline padding) so
+        // the field is flush end-to-end rather than sized to its content.
+        ,
+        width: "100%"
         // When hasSearch is set, focus moves into this input on open, so it —
         // not the trigger — must be the combobox that reports the highlighted
         // option via aria-activedescendant (comboboxes-4). A bare searchbox
-        // left the highlight silent to screen readers.
+        // left the highlight silent to screen readers. role + aria-* pass
+        // through to the underlying <input> via BaseProps.
         ,
         role: "combobox",
         "aria-expanded": popover.isOpen,
         "aria-controls": listboxId,
         "aria-autocomplete": "list",
         "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
-        "aria-label": t('@astryx.selector.searchOptions'),
-        type: "text",
         value: searchQuery,
         onChange: handleSearchChange,
         onKeyDown: e => {
-          // Arrow keys navigate options; Enter selects; Escape/Tab close.
+          // Arrow keys navigate options; Enter selects; Escape closes.
           // Home/End are left to the input for caret movement (APG editable
           // combobox); PageUp/PageDown are the sanctioned substitute for
           // jumping to the first/last option.
-          if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'PageUp' || e.key === 'PageDown' || e.key === 'Enter' || e.key === 'Escape' || e.key === 'Tab') {
+          if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'PageUp' || e.key === 'PageDown' || e.key === 'Enter' || e.key === 'Escape') {
+            onKeyDown(e);
+            return;
+          }
+          // Tab: when a query is showing the clear (✕) button, forward-tab
+          // moves focus to it (keeping the popup open) so the affordance is
+          // keyboard-reachable. Every other Tab dismisses the popup as usual.
+          if (e.key === 'Tab' && (e.shiftKey || !hasQuery)) {
             onKeyDown(e);
           }
         },
-        placeholder: searchPlaceholder,
-        ...{
-          className: "x9f619 xh8yej3 xu0wf1k xf314gf x1litavf x1y0btm7 xvy26l8 xh6dtrn x10xzikg x9ynric xcr08ib xdk3u5w x1tgivj0 x1a2a7pz xzeu18z x1wfwxd8"
-        }
+        placeholder: searchPlaceholder
       })
     });
-  }, [hasSearch, searchId, listboxId, searchQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
+  }, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
 
   // Render an individual item
   const renderItem = useCallback((item, flatIndex) => {
@@ -495,6 +631,11 @@ export function Selector(props) {
         icon: "check",
         size: "sm",
         color: "accent"
+        // Stable theme target on the selected-row marker, so a theme can
+        // restyle or hide it (e.g. to compose its own selected indicator
+        // via renderOption) without a structural sibling selector.
+        ,
+        ...themeProps('selector-check')
       })]
     }, item.value);
   }, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter]);
@@ -505,10 +646,15 @@ export function Selector(props) {
 
     // Nothing matched across every group/option: show the empty state.
     if (isSearching && filteredItems.length === 0) {
+      // role="presentation" keeps the message out of the listbox's
+      // accessibility tree (role="listbox" only permits option/group
+      // children); the no-results outcome is announced via the
+      // result-count live region instead.
       return [/*#__PURE__*/_jsx("div", {
-        ...{
+        role: "presentation",
+        ...mergeProps(themeProps('selector-empty-state'), {
           className: "x1b2ylru x2b8uid xv1l7n4 x9ynric xcr08ib"
-        },
+        }),
         children: "No results found"
       }, "empty")];
     }
@@ -562,9 +708,15 @@ export function Selector(props) {
     }
     return elements;
   }, [options, renderItem, hasSearch, searchQuery, filteredItems]);
+
+  // The detached message box renders its own leading status icon, so the
+  // on-field icon would duplicate it — keep the chevron indicator instead.
+  const showStatusIcon = status != null && effectiveStatusVariant !== 'detached';
+  const showStatusTooltip = status != null && effectiveStatusVariant === 'tooltip' && !!status.message;
   const selectorContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       ref: el => {
+        anchorRef.current = el;
         popover.triggerRef(el);
         // Anchor + hover/focus listeners for the disabled-message tooltip.
         // Handlers are gated internally by isEnabled, and anchor names
@@ -574,9 +726,11 @@ export function Selector(props) {
       onClick: onTriggerClick,
       "data-testid": testId,
       ...mergeProps(themeProps('selector', {
+        variant,
         size,
-        status: status?.type ?? null
-      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, !selectedItem && styles.triggerPlaceholder, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
+        status: status?.type ?? null,
+        disabled: isDisabled ? 'disabled' : null
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, !selectedItem && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
       children: [startIcon && renderIconSlot(startIcon, {
         size: 'sm',
         color: 'secondary'
@@ -608,7 +762,7 @@ export function Selector(props) {
         ,
         disabled: isDisabled && !showsDisabledMessage,
         "aria-disabled": showsDisabledMessage ? 'true' : undefined,
-        onKeyDown: onKeyDown,
+        onKeyDown: handleTriggerKeyDown,
         tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
         ...{
           className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz"
@@ -650,38 +804,43 @@ export function Selector(props) {
           ,
           ...themeProps('selector-clear-icon')
         })
-      }), /*#__PURE__*/_jsx("span", {
+      }), showStatusIcon ? showStatusTooltip ? /*#__PURE__*/_jsx("button", {
+        ref: statusTooltip.ref,
+        type: "button",
+        "aria-label": t(STATUS_BUTTON_LABEL_KEY[status.type]),
+        "aria-describedby": statusTooltip.describedBy,
+        onClick: e => e.stopPropagation(),
         ...{
-          0: {
-            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike"
-          },
-          2: {
-            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0"
-          },
-          1: {
-            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike xq2gx43"
-          },
-          3: {
-            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0 xq2gx43"
-          }
-        }[!!(!status && popover.isOpen) << 1 | !!status << 0],
-        children: status ? /*#__PURE__*/_jsx(Icon, {
+          className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1heor9g x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: STATUS_ICON_MAP[status.type],
           size: "sm",
-          color: STATUS_ICON_COLOR_MAP[status.type]
-        }) : /*#__PURE__*/_jsx(Icon, {
-          icon: "chevronDown",
-          size: "sm",
-          color: "inherit"
-          // Stable theme target on the chevron glyph itself, so a theme can
-          // restyle just this icon (color, size, hover) — and its
-          // open/closed state — via `defineTheme`. Same-element rules in
-          // @layer astryx-theme win over the icon's own base color/size,
-          // which a button-level target could not reach.
-          ,
-          ...themeProps('selector-indicator-icon', {
-            state: popover.isOpen ? 'expanded' : 'collapsed'
-          })
+          color: STATUS_ICON_COLOR_MAP[status.type],
+          xstyle: styles.triggerIcon
+        })
+      }) : /*#__PURE__*/_jsx(Icon, {
+        icon: STATUS_ICON_MAP[status.type],
+        size: "sm",
+        color: STATUS_ICON_COLOR_MAP[status.type],
+        xstyle: styles.triggerIcon
+      }) : /*#__PURE__*/_jsx(Icon, {
+        icon: "chevronDown",
+        size: "sm",
+        color: "secondary"
+        // The rotation rides on the glyph, alongside the box and color
+        // the wrapper used to provide, so one element carries the mark,
+        // its open/closed transform, and the theme target.
+        ,
+        xstyle: [styles.triggerIcon, styles.triggerIconRotation, popover.isOpen && styles.triggerIconOpen]
+        // Stable theme target on the chevron glyph itself, so a theme can
+        // restyle just this icon (color, size, hover) — and its
+        // open/closed state — via `defineTheme`. Same-element rules in
+        // @layer astryx-theme win over the icon's own base color/size,
+        // which a button-level target could not reach.
+        ,
+        ...themeProps('selector-indicator-icon', {
+          state: popover.isOpen ? 'expanded' : 'collapsed'
         })
       })]
     }), popover.render(hasSearch ? /*#__PURE__*/_jsxs("div", {
@@ -691,8 +850,13 @@ export function Selector(props) {
         role: "listbox",
         "aria-labelledby": triggerId,
         ...{
-          className: "x9f619 xuyqlj2 x1odjw0f x9epnlk x1hc1fzr x1ey1afo"
-        },
+          0: {
+            className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj x1hc1fzr x1ey1afo"
+          },
+          1: {
+            className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x1hc1fzr x1ey1afo x2hg6jq"
+          }
+        }[!!(variant !== 'ghost') << 0],
         children: renderOptions()
       })]
     }) : /*#__PURE__*/_jsx("div", {
@@ -702,19 +866,25 @@ export function Selector(props) {
       "aria-labelledby": triggerId,
       ...{
         0: {
-          className: "x9f619 xuyqlj2 x1odjw0f x9epnlk x1hc1fzr x1ey1afo"
+          className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj x1hc1fzr x1ey1afo"
+        },
+        2: {
+          className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x1hc1fzr x1ey1afo x2hg6jq"
         },
         1: {
-          className: "x9f619 xuyqlj2 x1odjw0f x9epnlk xg01cxk xq2gx43"
+          className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj xg01cxk xq2gx43"
+        },
+        3: {
+          className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x2hg6jq xg01cxk xq2gx43"
         }
-      }[!!!isPositioned << 0],
+      }[!!(variant !== 'ghost') << 1 | !!!isPositioned << 0],
       children: renderOptions()
     }), {
       placement: popoverPlacement,
       alignment: 'start',
       xstyle: [styles.popover, layerAnimations[popoverPlacement]],
       style: popoverOffsetStyle
-    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+    }), showStatusTooltip && statusTooltip.renderTooltip(status?.message ?? ''), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
   if (inputGroup) {
     return selectorContent;
@@ -733,7 +903,7 @@ export function Selector(props) {
       message: status.message,
       messageID: status.message ? statusMessageId : undefined
     } : undefined,
-    statusVariant: statusVariant,
+    statusVariant: effectiveStatusVariant,
     labelTooltip: labelTooltip,
     width: width,
     children: selectorContent

package/dist/Selector/hooks.d.ts

@@ -5,7 +5,7 @@ interface UseSelectedItemOffsetOptions {
     selectedItemIndex: number;
     listboxId: string;
     listboxRef: RefObject<HTMLDivElement | null>;
-    triggerRef: RefObject<HTMLButtonElement | null>;
+    anchorRef: RefObject<HTMLElement | null>;
 }
 interface UseSelectedItemOffsetResult {
     offset: number;
@@ -13,15 +13,15 @@ interface UseSelectedItemOffsetResult {
 }
 /**
  * Calculates the offset needed to position the dropdown so that the selected
- * item appears centered over the trigger button (macOS-style selector).
+ * item appears centered over the outer selector control (macOS-style selector).
  *
- * The desired dropdown top is calculated directly from the trigger center and
+ * The desired dropdown top is calculated directly from the anchor center and
  * selected-item center, then clamped to the viewport. This preserves the
  * default "selected item over trigger" behavior while letting the menu slide
  * upward near the bottom edge or downward near the top edge instead of being
  * clipped off-screen.
  */
-export declare function useSelectedItemOffset({ isOpen, selectedItemIndex, listboxId, listboxRef, triggerRef, }: UseSelectedItemOffsetOptions): UseSelectedItemOffsetResult;
+export declare function useSelectedItemOffset({ isOpen, selectedItemIndex, listboxId, listboxRef, anchorRef, }: UseSelectedItemOffsetOptions): UseSelectedItemOffsetResult;
 interface UseComboboxOptions {
     selectableItems: SelectorOptionData[];
     value?: string;
@@ -38,6 +38,13 @@ interface UseComboboxOptions {
      * navigation owns those keys there) or when there is no value.
      */
     onClear?: () => void;
+    /**
+     * With `hasSearch`, printable characters typed on the trigger are appended to
+     * the search query (opening the popup if needed), so type-to-find works
+     * without a separate open step. Characters keep arriving here until focus
+     * lands in the search input, which then owns its own typing.
+     */
+    onSearchSeed?: (char: string) => void;
     listboxId: string;
 }
 interface UseComboboxResult {
@@ -50,8 +57,13 @@ interface UseComboboxResult {
     onItemMouseEnter: (item: SelectorOptionData, index: number) => void;
 }
 /**
- * Handles keyboard navigation, typeahead search, and selection for combobox/listbox patterns.
+ * Handles keyboard navigation and selection for combobox/listbox patterns.
+ *
+ * Type-to-select is not handled here: callers that want it compose the shared
+ * `useTypeahead` hook and run it ahead of this handler (see Selector). That
+ * keeps matching consistent with the other collections and leaves consumers
+ * whose own input already filters the items (CommandPalette) untouched.
  */
-export declare function useCombobox({ selectableItems, value, isDisabled, isOpen, hasSearch, onOpen, onClose, onSelect, onClear, listboxId, }: UseComboboxOptions): UseComboboxResult;
+export declare function useCombobox({ selectableItems, value, isDisabled, isOpen, hasSearch, onOpen, onClose, onSelect, onClear, onSearchSeed, listboxId, }: UseComboboxOptions): UseComboboxResult;
 export {};
 //# sourceMappingURL=hooks.d.ts.map

package/dist/Selector/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/Selector/hooks.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMhD,UAAU,4BAA4B;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACjD;AAED,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE,4BAA4B,GAAG,2BAA2B,CA6E5D;AAMD,UAAU,kBAAkB;IAC1B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,EACf,KAAK,EACL,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,kBAAkB,GAAG,iBAAiB,CAqOxC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/Selector/hooks.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAyBhD,UAAU,4BAA4B;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC1C;AAED,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,4BAA4B,GAAG,2BAA2B,CAgF5D;AAMD,UAAU,kBAAkB;IAC1B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,EACf,KAAK,EACL,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,GAAG,iBAAiB,CA2NxC"}