@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

package/dist/SelectableCard/SelectableCard.js

@@ -35,6 +35,7 @@ import { mergeProps, mergeRefs } from "../utils/index.js";
 import { Card } from "../Card/Card.js";
 import { useClickableContainer } from "../hooks/useClickableContainer.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 
 // =============================================================================
 // Styles — selection + interaction; Card handles the rest
@@ -47,12 +48,6 @@ const styles = {
     k1ekBW: "x16mfhj0",
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
-    kInvED: "x1hl8ikr",
-    $$css: true
-  },
-  focusWithin: {
-    kRYL1X: "x1irc7jg",
-    koJ47v: "xdjuwb3",
     $$css: true
   },
   overlay: {
@@ -261,11 +256,8 @@ export function SelectableCard({
     ...mergeProps(themeProps('selectable-card', {
       variant,
       selected: isSelected ? 'true' : 'false'
-    }), {
-      className: classNameProp,
-      style
-    }),
-    xstyle: [styles.interactive, styles.focusWithin, isSelected && selectedStyleForVariant(variant), !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, isDisabled && styles.disabled, xstyleProp],
+    }), focusOutlineProps.focusWithin(), classNameProp, style),
+    xstyle: [styles.interactive, isSelected && selectedStyleForVariant(variant), !isDisabled && styles.overlay, !isDisabled && styles.hoverOnPointer, isDisabled && styles.disabled, xstyleProp],
     onClick: !isDisabled ? composedOnClick : undefined,
     onMouseUp: !isDisabled ? composedOnMouseUp : undefined,
     ...props,

package/dist/Selector/Selector.d.ts

@@ -1,6 +1,7 @@
 /**
  * @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,6 +14,7 @@
  */
 import React, { type ReactNode } from 'react';
 import { type IconType } from '../Icon';
+import type { IndicatorPosition } from '../Indicator';
 import { type FieldStatusVariant } from '../Field';
 import type { LayerPlacement } from '../Layer/useLayer';
 import type { SelectorOptionType, SelectorOptionData } from './types';
@@ -143,6 +145,15 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
      * Only called for selectable options (not dividers/sections).
      */
     renderOption?: (option: SelectorOptionData) => ReactNode;
+    /**
+     * Which edge of the option row carries the selected mark. `start` reserves a
+     * mark column ahead of every label so they stay aligned, the way a native
+     * menu does; `end` is the house convention shared with Typeahead and
+     * CommandPalette.
+     *
+     * @default 'end'
+     */
+    indicatorPosition?: IndicatorPosition;
     /**
      * Whether to show a search input for filtering options.
      * @default false

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

@@ -1 +1 @@
-{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}

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
  *
@@ -20,7 +21,8 @@ import * as stylex from '@stylexjs/stylex';
 import { usePopover } from "../Popover/usePopover.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { Icon, renderIconSlot } from "../Icon/index.js";
-import { Field, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
+import { useIndicator } from "../Indicator/index.js";
+import { Field, InputClearButton, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
 import { Divider } from "../Divider/index.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import { Spinner } from "../Spinner/index.js";
@@ -30,15 +32,18 @@ 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";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { stableClassName } from "../naming.js";
 import { groupStyles } from "../InputGroup/groupStyles.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useTranslator } from "../i18n/index.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   triggerContainer: {
     kVAEAm: "x1n2onr6",
@@ -60,6 +65,21 @@ 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",
@@ -67,8 +87,6 @@ const styles = {
     kKwaWg: "x1ilzqfv xq8i9tn",
     kGVxlE: "x1gnnqk1 x1irk71m x15ysqaf",
     k63SB2: "x1e4wzip",
-    kI3sdo: "x1a2a7pz x1irc7jg",
-    kInvED: "x1wfwxd8 xscfbxq",
     k1ekBW: "xrafxwg",
     k3aq6I: "x3oybdh xk4oym4",
     $$css: true
@@ -78,6 +96,20 @@ const styles = {
     k3aq6I: "x1c071of x1pdlv7q",
     $$css: true
   },
+  statusButton: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kMwMTN: "x1heor9g",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
   popover: {
     k7Eaqz: "xrzjruh",
     $$css: true
@@ -249,6 +281,7 @@ export function Selector(props) {
     startIcon,
     htmlName,
     renderOption,
+    indicatorPosition = 'end',
     hasSearch = false,
     searchPlaceholder: searchPlaceholderFromProps,
     placement,
@@ -275,6 +308,9 @@ 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();
@@ -285,6 +321,7 @@ export function Selector(props) {
   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)
@@ -325,15 +362,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('');
@@ -346,7 +383,10 @@ export function Selector(props) {
     hasAutoFocus: false,
     // The popup's own role="listbox" is the exposed semantics; the trigger
     // keeps DOM focus, so wrapping it in a modal dialog would misrepresent it.
-    role: 'none'
+    role: 'none',
+    // The theme target belongs on the SURFACE that paints the popup, which
+    // `usePopover` owns — not on the scrolling list inside it.
+    surfaceTarget: 'selector-popup'
   });
 
   // Open dropdown on mount when isDefaultOpen is true
@@ -384,7 +424,7 @@ export function Selector(props) {
     selectedItemIndex,
     listboxId,
     listboxRef,
-    triggerRef
+    anchorRef
   });
   const selectedItemOffset = shouldOverlaySelectedItem ? rawOffset : 0;
   const isPositioned = shouldOverlaySelectedItem ? rawIsPositioned : true;
@@ -396,6 +436,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 () => {
@@ -405,10 +446,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,
@@ -416,7 +472,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,
@@ -424,24 +484,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
@@ -535,11 +627,50 @@ export function Selector(props) {
     });
   }, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
 
+  // The single-selection mark, resolved from the theme once per render. A
+  // theme that maps `check` to another indicator (a radio, say) changes every
+  // selected-option mark in the app through this one lookup.
+  const SelectionMark = useIndicator('check');
+
   // Render an individual item
   const renderItem = useCallback((item, flatIndex) => {
     const isHighlighted = flatIndex === highlightedIndex;
     const isSelected = item.value === normalizedValue;
-    return /*#__PURE__*/_jsxs("div", {
+
+    /*
+     * Rendered UNCONDITIONALLY, with the state passed down: the default
+     * check draws nothing when unchecked, but a theme that replaces the
+     * `check` indicator with a radio needs the unselected state to draw
+     * its empty circle. `{isSelected && …}` would make that impossible.
+     *
+     * `selector-check` stays the stable target for the mark's position
+     * in the row; the indicator owns what the mark looks like.
+     */
+    const mark = /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s xgomdpo"
+      },
+      children: /*#__PURE__*/_jsx(SelectionMark, {
+        state: isSelected ? 'checked' : 'unchecked',
+        size: "sm",
+        isDisabled: item.disabled ?? false,
+        ...themeProps('selector-check')
+      })
+    });
+    const optionContent = /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
+      },
+      children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
+        option: item
+      })
+    });
+    const content = indicatorPosition === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [mark, optionContent]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [optionContent, mark]
+    });
+    return /*#__PURE__*/_jsx("div", {
       id: getItemId(flatIndex),
       role: "option",
       "aria-selected": isSelected,
@@ -547,20 +678,9 @@ export function Selector(props) {
       onClick: () => onItemSelect(item),
       onMouseEnter: () => onItemMouseEnter(item, flatIndex),
       ...stylex.props(styles.item, itemSizeStyles[size], isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled),
-      children: [/*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
-        },
-        children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
-          option: item
-        })
-      }), isSelected && /*#__PURE__*/_jsx(Icon, {
-        icon: "check",
-        size: "sm",
-        color: "accent"
-      })]
+      children: content
     }, item.value);
-  }, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter]);
+  }, [renderOption, indicatorPosition, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
 
   // Render all options (handling sections/dividers)
   const renderOptions = useCallback(() => {
@@ -574,9 +694,9 @@ export function Selector(props) {
       // 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")];
     }
@@ -638,6 +758,7 @@ export function Selector(props) {
   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
@@ -649,8 +770,9 @@ export function Selector(props) {
       ...mergeProps(themeProps('selector', {
         variant,
         size,
-        status: status?.type ?? 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),
+        status: status?.type ?? null,
+        disabled: isDisabled ? 'disabled' : null
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && focusOutlineStyles.focusWithin, 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'
@@ -682,7 +804,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"
@@ -703,73 +825,47 @@ export function Selector(props) {
         disabled: isDisabled
       }), isBusy && /*#__PURE__*/_jsx(Spinner, {
         size: "sm"
-      }), hasClear && value != null && !isDisabled && /*#__PURE__*/_jsx("button", {
-        type: "button",
-        onClick: handleClear,
-        "aria-label": t('@astryx.selector.clearLabel', {
+      }), hasClear && value != null && !isDisabled && /*#__PURE__*/_jsx(InputClearButton, {
+        label: t('@astryx.selector.clearLabel', {
           label
         }),
-        ...{
-          className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-        },
+        onClick: handleClear,
+        iconClassName: stableClassName('selector-clear-icon')
+      }), 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(),
+        ...stylex.props(focusOutlineStyles.focusVisible, styles.statusButton),
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: "close",
-          size: "sm",
-          color: "secondary"
-          // Stable theme target on the clear glyph itself, so a theme can
-          // restyle just this icon (color, size, hover) 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-clear-icon')
-        })
-      }), /*#__PURE__*/_jsx("span", {
-        ...{
-          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"
-          }
-        }[!!(!showStatusIcon && popover.isOpen) << 1 | !!showStatusIcon << 0],
-        children: 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(),
-          ...{
-            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: 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", {
@@ -779,8 +875,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", {
@@ -790,16 +891,26 @@ 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',
+      // The system's standard menu clearance, except in overlay mode:
+      // there the measured negative margin owns the block geometry and
+      // the menu is meant to sit on the trigger, not clear it.
+      offset: shouldOverlaySelectedItem ? undefined : spacingVars['--spacing-1'],
       xstyle: [styles.popover, layerAnimations[popoverPlacement]],
       style: popoverOffsetStyle
     }), showStatusTooltip && statusTooltip.renderTooltip(status?.message ?? ''), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]