@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/SelectableCard/SelectableCard.tsx

@@ -59,7 +59,11 @@ import {useMergedRefs} from '../hooks/useMergedRefs';
 // element the controller writes to (`pressedAlpha`) at the press's strength,
 // 1 while on and 1 → 0 over the release, and inherited resolved by the
 // `::after` that paints it. See interactionOverlay.stylex.ts.
-const pressedOverlayColor = 'var(--_press-paint)';
+const pressedOverlayImage = 'var(--_press-paint-image)';
+/** Written by the press controller while it paints a press. */
+const PRESSED_ON = '[data-astryx-press="on"]';
+/** Written by the press controller for the press's release. */
+const PRESSED_FADING = '[data-astryx-press="fading"]';
 
 const styles = stylex.create({
   interactive: {
@@ -78,16 +82,18 @@ const styles = stylex.create({
   },
   // Hover and pressed overlay. Hover is guarded by @media (hover: hover) so
   // touch devices don't show a stuck hover state; the press has two arms,
-  // `:active` for a mouse and `data-astryx-press` for a finger.
+  // `:active` for a mouse and `data-astryx-press` for the press controller.
   overlay: {
-    // The `::after` layer paints whatever `--_press-overlay` says, and the
-    // interaction arms set that variable on the element itself. Setting the
-    // pseudo-element's colour from compound keys (`:active::after`) would
-    // leave the touch arms unable to outrank the mouse arm: a pseudo-element
-    // key carries the highest generated priority, and the `data-astryx-press`
-    // attribute the touch press model writes must win over `:active`, which
-    // still matches under a finger (see interactionOverlay.stylex.ts). Same
-    // enabled guard as the shared overlay utility.
+    // The `::after` layer paints the hover and mouse states as its colour,
+    // `--_press-overlay`, which their arms set on the element itself (same
+    // enabled guard as the shared overlay utility). The press the controller
+    // paints (a finger's, and on a touch-first device a mouse's or a key's)
+    // is the same layer's image, keyed on the `data-astryx-press` attribute
+    // the controller writes. Every arm of that press is a plain property of
+    // the `::after`, which outranks the layer's own defaults in a layered
+    // stylesheet and a flat one alike. A custom property's attribute arm
+    // does not: a layered build emits the property's default outside the
+    // priority layers its attribute arms land in, and the default wins.
     '--_press-overlay': {
       default: 'transparent',
       ':where(:not(:disabled,[aria-disabled="true"]))': {
@@ -102,33 +108,43 @@ const styles = stylex.create({
             colorVars['--color-overlay-hover'],
           ':active': colorVars['--color-overlay-pressed'],
         },
-        // The touch arms paint through the press's strength, which the
-        // card's `pressedAlpha` arms own: 1 on the first frame of a believed
-        // press, then 1 → 0 over the release. The `::after` inherits the
-        // resolved colour and repaints with it on every frame of the fade.
-        '[data-astryx-press="on"]': pressedOverlayColor,
-        '[data-astryx-press="fading"]': pressedOverlayColor,
       },
     },
-    // A believed touch press paints on the first frame, and the release is the
-    // strength's own animation, so neither may pass through the layer's colour
-    // transition (it would fade the onset in, and drag behind the release).
-    // The mouse states keep the fast fade.
-    '--_press-overlay-transition': {
-      default: durationVars['--duration-fast'],
-      '[data-astryx-press="on"]': '0s',
-      '[data-astryx-press="fading"]': '0s',
-    },
     '::after': {
       content: '""',
       position: 'absolute',
       inset: 0,
       borderRadius: 'inherit',
       pointerEvents: 'none',
-      transitionProperty: 'background-color',
-      transitionDuration: 'var(--_press-overlay-transition)',
+      // A press the controller paints shows on its first frame and fades on
+      // its strength's own animation, so the colour it replaces drops out at
+      // once rather than crossfading: no transition while it paints. The
+      // mouse states keep the fast fade.
+      transitionProperty: {
+        default: 'background-color',
+        [PRESSED_ON]: 'none',
+        [PRESSED_FADING]: 'none',
+      },
+      transitionDuration: durationVars['--duration-fast'],
       transitionTimingFunction: easeVars['--ease-standard'],
-      backgroundColor: 'var(--_press-overlay)',
+      // While the controller paints, the colour yields to the image: a
+      // touchscreen beside a fine pointer still matches `:active` under a
+      // finger, and the press would otherwise paint twice.
+      backgroundColor: {
+        default: 'var(--_press-overlay)',
+        [PRESSED_ON]: 'transparent',
+        [PRESSED_FADING]: 'transparent',
+      },
+      // The press at its strength, which the card's `pressedAlpha` arms own:
+      // 1 on the first frame of a believed press, then 1 → 0 over the
+      // release. The `::after` inherits the resolved paint and repaints with
+      // it on every frame of the fade. Read only inside this element's own
+      // arms, so a pressed ancestor's strength never paints here.
+      backgroundImage: {
+        default: null,
+        [PRESSED_ON]: pressedOverlayImage,
+        [PRESSED_FADING]: pressedOverlayImage,
+      },
     },
   },
   disabled: {
@@ -318,17 +334,17 @@ export interface SelectableCardProps extends Omit<BaseProps, 'onChange'> {
  * the accessible role, label, and checked state. The card surface
  * is a plain <div> — no role or tabIndex on the container.
  *
- * @compositionHint Use for multi-select or single-select card groups.
- * Manage selection state externally — use a Set for multi-select
- * or a single value for radio-style selection.
+ * @compositionHint Use for multi-select card groups, managing selection
+ * state externally in a Set. Not for single-select: each card is a
+ * checkbox, so assistive technology announces a multi-select group.
  * For navigation/action cards, use ClickableCard instead.
  *
  * @example
  * ```
  * <SelectableCard
  *   label="Option A"
- *   isSelected={selected === 'a'}
- *   onChange={() => setSelected('a')}>
+ *   isSelected={selected.has('a')}
+ *   onChange={isSelected => toggle('a', isSelected)}>
  *   <Text type="body" weight="bold">Option A</Text>
  * </SelectableCard>
  * ```

package/src/Selector/Selector.sheetActiveDescendant.test.tsx

@@ -0,0 +1,95 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Selector.sheetActiveDescendant.test.tsx
+ * @input Uses vitest, Testing Library, and Selector with its bottom-sheet
+ *   module held until the test releases it
+ * @output Tests that the bottom-sheet trigger names an active option only once
+ *   that option is in the document, while the sheet's surface is still loading
+ * @position Tests; Selector's touch presentation on first open, alongside
+ *   Selector.test.tsx. The held module stands in for the code-split sheet a
+ *   real first open waits for.
+ */
+
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {render, screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const sheetModule = vi.hoisted(() => {
+  let release: () => void = () => {};
+  const loaded = new Promise<void>(resolve => {
+    release = resolve;
+  });
+  return {loaded, release: () => release()};
+});
+
+vi.mock('../BottomSheet/BottomSheet', async importOriginal => {
+  await sheetModule.loaded;
+  return importOriginal();
+});
+
+import {Selector} from './Selector';
+
+// jsdom has no modal dialogs or media queries; stand in for them the way
+// Selector.test.tsx does.
+beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn(function (
+    this: HTMLDialogElement,
+  ) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
+});
+
+afterEach(() => {
+  sheetModule.release();
+  vi.unstubAllGlobals();
+});
+
+describe('Selector bottom-sheet active option', () => {
+  it('names no active option on the trigger until the sheet has rendered it', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        presentation="bottom-sheet"
+      />,
+    );
+    const trigger = screen.getByRole('combobox');
+    trigger.focus();
+    await user.keyboard('{Enter}');
+
+    // Open, but the sheet's surface has not loaded: no option exists yet, so
+    // the trigger must not point at one.
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.queryByRole('option', {hidden: true})).toBeNull();
+    expect(trigger).not.toHaveAttribute('aria-activedescendant');
+
+    // The first real load of the sheet module under the test transform can
+    // take a few seconds.
+    sheetModule.release();
+    await screen.findByRole('listbox', {hidden: true}, {timeout: 5_000});
+    await waitFor(() =>
+      expect(trigger).toHaveAttribute('aria-activedescendant'),
+    );
+    expect(
+      document.getElementById(trigger.getAttribute('aria-activedescendant')!),
+    ).toHaveAttribute('role', 'option');
+  });
+});

package/src/Selector/Selector.spec.md

@@ -7,7 +7,7 @@ authority: current
 archive_reason: null
 superseded_by: null
 approved_by: cixzhang
-approved_at: 2026-08-30
+approved_at: 2026-10-24
 owners: [cixzhang, imdreamrunner]
 review_triggers: [public-api, behavior, layout, theming, accessibility]
 verified_by:
@@ -48,7 +48,7 @@ connection between the closed trigger and its selection surface.
 ## Compatibility and migration
 
 - Released defaults and behavior are unchanged except the `presentation`
-  default, which DEC-1 sets.
+  default, which DEC-1 sets, and `adaptive`'s compact test (below).
 - `indicatorPosition` defaults to `end`; a rendered selection mark occupies
   space at that logical edge, while an empty resolved indicator occupies none.
 - `presentation` defaults to `adaptive` (DEC-1): the modal bottom sheet on
@@ -57,6 +57,13 @@ connection between the closed trigger and its selection surface.
   stable-default change, so it ships as `[breaking]` in a scheduled minor under
   `spec:AST-017`; callers that need the anchored popover on every device pass
   `popover`.
+- `adaptive`'s compact test becomes `spec:AST-012` FR9 (width below the
+  effective `md` point or height below 500) in place of the shipped
+  `(max-width: 768px)` query: a coarse-pointer screen exactly 768 pixels wide and at least 500 tall opens the popover, and a coarse-pointer screen wider than 768 but under
+  500 tall opens the bottom sheet. Both surfaces keep selection working, so no
+  caller must change source and the change is not breaking under
+  `spec:AST-017` FR1; `popover` and `bottom-sheet` pin one surface. It is
+  pending until the shared resolver conforms; FR4 describes the shipped query.
 - `hasClear` changes the value contract to include `null`; that distinction is
   already part of the public type.
 - `isReadOnly` is additive and defaults to `false`. It preserves the selected
@@ -355,8 +362,9 @@ FR3 implements the system decision owned by `spec:AST-004/DEC-1`.
 
 An omitted `presentation` resolves `adaptive` (FR4): the modal bottom sheet on
 compact coarse-pointer screens and the anchored popover elsewhere, so
-fine-pointer and large-screen output matches `popover`. `adaptive` keeps its
-width-and-pointer query; a pointer-only test belongs to `spec:AST-043` OQ1.
+fine-pointer and large-screen output matches `popover`. `adaptive` resolves
+through `spec:AST-094` FR13: a coarse primary pointer and the `spec:AST-012` FR9
+compact definition.
 Rejected: keeping `popover` as the default, because a phone then gets a
 pointer-sized anchored list unless the caller opts in.
 

package/src/Selector/Selector.test.tsx

@@ -39,6 +39,21 @@ import {generateThemeCSS} from '../theme/generateThemeRules';
 import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {selectorPresentationStyles} from './selectorPresentation.stylex';
 import {groupStyles} from '../InputGroup/groupStyles';
+import {COMPACT_TOUCH_PRESENTATION_QUERY} from '../hooks/useAdaptivePresentation';
+
+/**
+ * Enters a search query as one change. Typing it key by key can land several
+ * keystrokes in one frame, whose result announcements are then joined into
+ * one (spec:AST-086 FR9), so a test of what one query announces pastes it.
+ */
+async function enterQuery(
+  user: ReturnType<typeof userEvent.setup>,
+  input: HTMLElement,
+  query: string,
+): Promise<void> {
+  await user.click(input);
+  await user.paste(query);
+}
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -378,7 +393,7 @@ describe('Selector', () => {
     vi.stubGlobal(
       'matchMedia',
       vi.fn().mockImplementation((query: string) => ({
-        matches: query === '(max-width: 768px) and (pointer: coarse)',
+        matches: query === COMPACT_TOUCH_PRESENTATION_QUERY,
         media: query,
         onchange: null,
         addEventListener: vi.fn(),
@@ -1246,7 +1261,7 @@ describe('Selector', () => {
         />,
       );
       await user.click(screen.getByRole('button', {name: 'Fruit'}));
-      await user.type(screen.getByRole('combobox', h), 'xyz');
+      await enterQuery(user, screen.getByRole('combobox', h), 'xyz');
 
       // The panel message is role="presentation", so the live region is the
       // only thing a screen reader gets — it has to say the same words.
@@ -1277,7 +1292,7 @@ describe('Selector', () => {
         />,
       );
       await user.click(screen.getByRole('button', {name: 'Fruit'}));
-      await user.type(screen.getByRole('combobox', h), 'xyz');
+      await enterQuery(user, screen.getByRole('combobox', h), 'xyz');
 
       await waitFor(() =>
         expect(politeRegion()?.textContent).toBe(
@@ -1328,7 +1343,7 @@ describe('Selector', () => {
         />,
       );
       await user.click(screen.getByRole('button', {name: 'Fruit'}));
-      await user.type(screen.getByRole('combobox', h), 'xyz');
+      await enterQuery(user, screen.getByRole('combobox', h), 'xyz');
 
       await waitFor(() =>
         expect(politeRegion()?.textContent).toBe('Nothing like that here'),
@@ -1362,7 +1377,7 @@ describe('Selector', () => {
       }
       const {rerender} = render(<Deferred loaded={false} />);
 
-      await user.type(screen.getByRole('combobox', h), 'xyz');
+      await enterQuery(user, screen.getByRole('combobox', h), 'xyz');
       // Loading: the panel shows nothing, so the region claims nothing.
       expect(politeRegion()?.textContent ?? '').toBe('');
 
@@ -1682,7 +1697,7 @@ describe('Selector', () => {
         );
         await user.click(screen.getByRole('button', {name: 'Fruit'}));
         // "ban" matches only Banana. Exact, so "1 résultats" would fail.
-        await user.type(screen.getByRole('combobox', h), 'ban');
+        await enterQuery(user, screen.getByRole('combobox', h), 'ban');
         await waitFor(() => {
           expect(politeRegion()?.textContent).toBe('1 résultat');
         });
@@ -1706,7 +1721,7 @@ describe('Selector', () => {
           </InternationalizationProvider>,
         );
         await user.click(screen.getByRole('button', {name: 'Fruit'}));
-        await user.type(screen.getByRole('combobox', h), 'xyz');
+        await enterQuery(user, screen.getByRole('combobox', h), 'xyz');
         await waitFor(() => {
           expect(politeRegion()?.textContent).toBe('Aucun résultat');
         });
@@ -2817,7 +2832,7 @@ describe('Selector', () => {
       vi.mocked(matchMedia).mockImplementation(
         (query: string) =>
           ({
-            matches: query === '(max-width: 768px) and (pointer: coarse)',
+            matches: query === COMPACT_TOUCH_PRESENTATION_QUERY,
             media: query,
             onchange: null,
             addEventListener: vi.fn(),
@@ -3829,6 +3844,50 @@ describe('Selector search affordances', () => {
     expect(search).toHaveFocus();
   });
 
+  // iOS raises the software keyboard only for a focus made while the browser
+  // still dispatches the tap, and a UIKit search field's clear button makes
+  // the field first responder even when it was not editing.
+  it('puts focus back in the search input inside the tap on clear, after the input lost focus', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Apple"
+        onChange={() => {}}
+        hasSearch
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Fruit'}));
+    const search = screen.getByRole<HTMLInputElement>('combobox', {
+      hidden: true,
+    });
+    await user.type(search, 'ap');
+    const clear = screen.getByRole('button', {
+      name: 'Clear Search options',
+      hidden: true,
+    });
+    // The person dismissed the keyboard: the input no longer has focus.
+    act(() => search.blur());
+    expect(search).not.toHaveFocus();
+
+    const focusedDuring: (string | undefined)[] = [];
+    const focus = HTMLElement.prototype.focus;
+    Object.defineProperty(search, 'focus', {
+      configurable: true,
+      value(options?: FocusOptions) {
+        focusedDuring.push(window.event?.type);
+        focus.call(search, options);
+      },
+    });
+    fireEvent.click(clear, {detail: 1});
+
+    // No frame has run: the focus is in place when the tap's dispatch returns.
+    expect(search).toHaveValue('');
+    expect(search).toHaveFocus();
+    expect(focusedDuring).toEqual(['click']);
+  });
+
   it('does not render the clear button when the query is empty', async () => {
     const user = userEvent.setup();
     render(
@@ -4920,3 +4979,50 @@ describe('Selector and option actions (not adopted)', () => {
     }
   });
 });
+
+describe('Selector caller aria-labelledby', () => {
+  const FRUITS = ['Apple', 'Banana', 'Cherry'];
+
+  it('names the trigger by its label and a caller aria-labelledby', () => {
+    render(
+      <>
+        <span id="lunch-heading">Lunch</span>
+        <Selector
+          label="Fruit"
+          options={FRUITS}
+          onChange={() => {}}
+          aria-labelledby="lunch-heading"
+        />
+      </>,
+    );
+    const trigger = screen.getByRole('combobox', {name: 'Fruit Lunch'});
+    expect(trigger.getAttribute('aria-labelledby')?.split(' ')).toContain(
+      'lunch-heading',
+    );
+  });
+
+  it('names a grouped trigger by the group, its label, and a caller aria-labelledby', () => {
+    render(
+      <>
+        <span id="lunch-heading">Lunch</span>
+        <InputGroup label="Order">
+          <Selector
+            label="Fruit"
+            options={FRUITS}
+            onChange={() => {}}
+            aria-labelledby="lunch-heading"
+          />
+        </InputGroup>
+      </>,
+    );
+    expect(
+      screen.getByRole('combobox', {name: 'Order Fruit Lunch'}),
+    ).toBeInTheDocument();
+  });
+
+  it('leaves a standalone trigger named by its label element without a caller aria-labelledby', () => {
+    render(<Selector label="Fruit" options={FRUITS} onChange={() => {}} />);
+    const trigger = screen.getByRole('combobox', {name: 'Fruit'});
+    expect(trigger).not.toHaveAttribute('aria-labelledby');
+  });
+});

package/src/Selector/Selector.tsx

@@ -20,6 +20,7 @@
  */
 
 import React, {
+  use,
   useCallback,
   useEffect,
   useId,
@@ -79,6 +80,7 @@ import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {SelectorOption} from './SelectorOption';
 import {SelectorRowLayoutContext} from './SelectorRowLayoutContext';
 import {getInputARIA, isImeKeyEvent, mergeProps} from '../utils';
+import {joinAriaIDs} from '../utils/inputAria';
 import {warnOnce} from '../utils/devWarning';
 import {useSize} from '../SizeContext/SizeContext';
 import {
@@ -93,8 +95,9 @@ import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
-import {groupStyles} from '../InputGroup/groupStyles';
+import {groupStyles, inputGroupItemProps} from '../InputGroup/groupStyles';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
+import {InputGroupInternalContext} from '../InputGroup/InputGroupInternalContext';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {useTranslator} from '../i18n';
 import type {AdaptivePresentation} from '../hooks/useAdaptivePresentation';
@@ -951,7 +954,7 @@ export function Selector<T extends SelectorOptionType>(
     description,
     isOptional = false,
     isRequired = false,
-    isDisabled = false,
+    isDisabled: isDisabledProp = false,
     isReadOnly = false,
     disabledMessage,
     options,
@@ -988,10 +991,14 @@ export function Selector<T extends SelectorOptionType>(
     onFocus,
     onKeyDown: onKeyDownProp,
     'aria-describedby': ariaDescribedByProp,
+    'aria-labelledby': ariaLabelledByProp,
     hasClear: hasClearProp,
     id,
     ...restProps
   } = props as SelectorPropsClearable<T>;
+  const inputGroup = useInputGroup();
+  const inputGroupState = use(InputGroupInternalContext);
+  const isDisabled = isDisabledProp || inputGroupState.isDisabled;
   const {rest, container} = useFieldInputStyling('Selector', restProps, {
     containerXstyle,
     containerClassName,
@@ -1023,6 +1030,7 @@ export function Selector<T extends SelectorOptionType>(
   const emptyStateRef = useRef<HTMLDivElement>(null);
   const descriptionId = useId();
   const statusMessageId = useId();
+  const fieldLabelId = useId();
   const inputLabelId = useId();
   const readOnlyDescriptionId = useId();
   const searchId = useId();
@@ -1035,7 +1043,6 @@ export function Selector<T extends SelectorOptionType>(
     ref,
   );
   const searchRef = useRef<HTMLInputElement>(null);
-  const inputGroup = useInputGroup();
 
   const [searchQuery, setSearchQuery] = useState('');
   // Mirrors searchQuery for the seed path, which runs before focus reaches the
@@ -1086,6 +1093,12 @@ export function Selector<T extends SelectorOptionType>(
     ],
     inputGroup,
   );
+  // A caller aria-labelledby names the trigger together with the field's own
+  // label (the Field label standalone, the group and input labels in a group).
+  const triggerLabelledBy =
+    ariaLabelledByProp != null
+      ? joinAriaIDs(ariaLabelledBy ?? fieldLabelId, ariaLabelledByProp)
+      : ariaLabelledBy;
 
   // Flatten options for keyboard navigation
   const selectableItems = useMemo(
@@ -1127,6 +1140,14 @@ export function Selector<T extends SelectorOptionType>(
 
   // Ref for listbox to measure selected item position
   const listboxRef = useRef<HTMLDivElement>(null);
+  // The trigger may name the active option only once the listbox holding it
+  // is in the document. The bottom sheet loads its surface on first open, so
+  // the trigger expands a moment before its options exist.
+  const [isListboxMounted, setIsListboxMounted] = useState(false);
+  const attachListbox = useCallback((node: HTMLDivElement | null) => {
+    listboxRef.current = node;
+    setIsListboxMounted(node != null);
+  }, []);
 
   // Typeahead is defined below (it needs the popover), but closing and clearing
   // must drop its pending buffer — otherwise a stale prefix survives the reset
@@ -1803,7 +1824,7 @@ export function Selector<T extends SelectorOptionType>(
       {renderSearch()}
       <Divider />
       <div
-        ref={listboxRef}
+        ref={attachListbox}
         id={listboxId}
         role="listbox"
         aria-labelledby={triggerId}
@@ -1822,7 +1843,7 @@ export function Selector<T extends SelectorOptionType>(
     </div>
   ) : (
     <div
-      ref={listboxRef}
+      ref={attachListbox}
       id={listboxId}
       role="listbox"
       {...listboxPress.menuProps}
@@ -1914,7 +1935,7 @@ export function Selector<T extends SelectorOptionType>(
     'aria-describedby':
       [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') ||
       undefined,
-    'aria-labelledby': ariaLabelledBy,
+    'aria-labelledby': triggerLabelledBy,
     'aria-required': isEffectivelyRequired ? 'true' : undefined,
     'aria-invalid': status?.type === 'error' ? 'true' : undefined,
     'aria-busy': isBusy || undefined,
@@ -1950,6 +1971,7 @@ export function Selector<T extends SelectorOptionType>(
         }}
         onClick={onTriggerClick}
         {...pressable}
+        {...(inputGroup ? inputGroupItemProps : undefined)}
         {...mergeProps(
           themeProps('selector', {
             variant,
@@ -2028,6 +2050,7 @@ export function Selector<T extends SelectorOptionType>(
             !isEffectivelyReadOnly &&
             !hasSearch &&
             surface.isOpen &&
+            isListboxMounted &&
             highlightedIndex >= 0
               ? getItemId(highlightedIndex)
               : undefined
@@ -2128,6 +2151,7 @@ export function Selector<T extends SelectorOptionType>(
       isLabelHidden={isLabelHidden}
       description={description}
       inputID={triggerId}
+      labelID={ariaLabelledByProp != null ? fieldLabelId : undefined}
       descriptionID={description ? descriptionId : undefined}
       isOptional={isOptional}
       isRequired={isRequired}