@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/Selector/Selector.test.tsx

@@ -38,6 +38,7 @@ import {Theme} from '../theme/Theme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
 import {spacingVars} from '../theme/tokens.stylex';
 import {selectorPresentationStyles} from './selectorPresentation.stylex';
+import {groupStyles} from '../InputGroup/groupStyles';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -605,7 +606,7 @@ describe('Selector', () => {
     const inputDropdownClass = screen.getByRole('listbox', h).className;
     unmount();
 
-    render(
+    const ghostRender = render(
       <Selector
         label="Ghost fruit"
         options={OPTIONS}
@@ -616,10 +617,24 @@ describe('Selector', () => {
     );
     await user.click(screen.getByRole('combobox'));
     const ghostDropdownClass = screen.getByRole('listbox', h).className;
+    ghostRender.unmount();
+
+    render(
+      <Selector
+        label="Secondary fruit"
+        options={OPTIONS}
+        value="Banana"
+        variant="secondary"
+        onChange={() => {}}
+      />,
+    );
+    await user.click(screen.getByRole('combobox'));
+    const secondaryDropdownClass = screen.getByRole('listbox', h).className;
 
     // The bordered input gets one extra StyleX rule for its border-width
-    // correction; the borderless ghost keeps the base menu inset.
+    // correction; the borderless secondary/ghost keep the base menu inset.
     expect(inputDropdownClass).not.toBe(ghostDropdownClass);
+    expect(secondaryDropdownClass).toBe(ghostDropdownClass);
   });
 
   it('does not apply selected-item overlay offset when placement is explicit', async () => {
@@ -822,6 +837,58 @@ describe('Selector', () => {
       expect(onChange).toHaveBeenCalledWith(null);
     });
 
+    it('returns focus to the trigger when the clear button is activated by keyboard', async () => {
+      function Controlled() {
+        const [value, setValue] = useState<string | null>('Banana');
+        return (
+          <Selector
+            label="Fruit"
+            options={OPTIONS}
+            value={value}
+            onChange={setValue}
+            hasClear
+          />
+        );
+      }
+      const user = userEvent.setup();
+      render(<Controlled />);
+      screen.getByRole('button', {name: 'Clear Fruit'}).focus();
+      await user.keyboard('{Enter}');
+      expect(
+        screen.queryByRole('button', {name: 'Clear Fruit'}),
+      ).not.toBeInTheDocument();
+      expect(screen.getByRole('combobox')).toHaveFocus();
+    });
+
+    it('leaves focus in the search input when the clear button is clicked with the list open', async () => {
+      function Controlled() {
+        const [value, setValue] = useState<string | null>('Banana');
+        return (
+          <Selector
+            label="Fruit"
+            options={OPTIONS}
+            value={value}
+            onChange={setValue}
+            hasClear
+            hasSearch
+          />
+        );
+      }
+      const user = userEvent.setup();
+      render(<Controlled />);
+      await user.click(screen.getByRole('button', {name: 'Fruit'}));
+      const search = screen.getByRole('combobox', {
+        name: 'Search options',
+        hidden: true,
+      });
+      search.focus();
+      await user.click(screen.getByRole('button', {name: 'Clear Fruit'}));
+      expect(
+        screen.queryByRole('button', {name: 'Clear Fruit'}),
+      ).not.toBeInTheDocument();
+      expect(search).toHaveFocus();
+    });
+
     it('clears the value via Delete on the focused trigger', async () => {
       const user = userEvent.setup();
       const onChange = vi.fn();
@@ -924,7 +991,10 @@ describe('Selector', () => {
       expect(screen.getByRole('combobox', h)).toBeInTheDocument();
     });
 
-    it('wires the search input as the combobox with activedescendant (comboboxes-4)', async () => {
+    // The search input's expanded state, popup relationship, and active option
+    // are bound to the shared Combobox contract (Selector.combobox.a11y.test.tsx,
+    // search-active); this keeps only the Selector-specific wiring.
+    it('moves combobox semantics to the list-autocomplete search input (comboboxes-4)', async () => {
       const user = userEvent.setup();
       render(
         <Selector
@@ -941,12 +1011,6 @@ describe('Selector', () => {
       await user.click(triggerBtn);
       const search = screen.getByRole('combobox', h);
       expect(search).toHaveAttribute('aria-autocomplete', 'list');
-      expect(search).toHaveAttribute('aria-expanded', 'true');
-      expect(search).toHaveAttribute('aria-controls');
-      // ArrowDown moves the highlight; the search input reports it via
-      // aria-activedescendant (previously silent on the trigger).
-      await user.keyboard('{ArrowDown}');
-      expect(search).toHaveAttribute('aria-activedescendant');
     });
 
     it('PageDown/PageUp jump the highlight to the last/first filtered option', async () => {
@@ -1285,7 +1349,6 @@ describe('Selector', () => {
         <Selector label="Fruit" options={[]} onChange={() => {}} isLoading />,
       );
       const trigger = screen.getByRole('combobox', {name: 'Fruit'});
-      expect(trigger).toHaveAttribute('aria-busy', 'true');
       expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
 
       await user.click(trigger);
@@ -2448,6 +2511,67 @@ describe('Selector', () => {
       expect(screen.getByText('#')).toBeInTheDocument();
     });
 
+    it.each(['input', 'secondary'] as const)(
+      'gives a grouped %s trigger the connected group geometry in every position',
+      variant => {
+        const groupClasses = stylex
+          .props(groupStyles.inGroup)
+          .className!.split(' ');
+        const selector = (label: string) => (
+          <Selector
+            label={label}
+            isLabelHidden
+            variant={variant}
+            options={OPTIONS}
+          />
+        );
+        render(
+          <>
+            <InputGroup label="First">
+              {selector('Channel first')}
+              <InputGroupText>#</InputGroupText>
+            </InputGroup>
+            <InputGroup label="Middle">
+              <InputGroupText>#</InputGroupText>
+              {selector('Channel middle')}
+              <InputGroupText>@</InputGroupText>
+            </InputGroup>
+            <InputGroup label="Last">
+              <InputGroupText>#</InputGroupText>
+              {selector('Channel last')}
+            </InputGroup>
+          </>,
+        );
+
+        // The group's row height, seam radii, and focus stacking all come from
+        // these classes; their :first-child and last-item selectors resolve the
+        // position. A secondary trigger keeps its fill but must not keep its
+        // own standalone edges or width.
+        for (const position of ['first', 'middle', 'last']) {
+          const trigger = screen.getByRole('combobox', {
+            name: new RegExp(`Channel ${position}`),
+          });
+          const box = trigger.closest('.astryx-selector') as HTMLElement;
+          const classes = new Set(box.className.split(' '));
+          expect(groupClasses.every(c => classes.has(c))).toBe(true);
+        }
+      },
+    );
+
+    it('keeps a standalone secondary trigger out of the group geometry', () => {
+      const groupClasses = stylex
+        .props(groupStyles.inGroup)
+        .className!.split(' ');
+      render(
+        <Selector label="Channel" variant="secondary" options={OPTIONS} />,
+      );
+      const box = screen
+        .getByRole('combobox')
+        .closest('.astryx-selector') as HTMLElement;
+      const classes = new Set(box.className.split(' '));
+      expect(groupClasses.some(c => classes.has(c))).toBe(false);
+    });
+
     it('keeps disabled reasons described when grouped', () => {
       render(
         <InputGroup label="Destination">
@@ -3083,6 +3207,48 @@ describe('Selector statusVariant forwarding', () => {
     );
   });
 
+  it('detaches attached status by default for the secondary variant', () => {
+    const {container} = render(
+      <Selector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        variant="secondary"
+        status={{type: 'error', message: 'Required'}}
+      />,
+    );
+    expect(container.querySelector('.astryx-selector')).toHaveAttribute(
+      'data-variant',
+      'secondary',
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'detached',
+    );
+  });
+
+  it('paints the secondary trigger with its own trigger style', () => {
+    const inputRender = render(
+      <Selector label="Fruit" options={['Apple', 'Banana']} value="Banana" />,
+    );
+    const inputTriggerClass =
+      inputRender.container.querySelector('.astryx-selector')!.className;
+    inputRender.unmount();
+
+    const secondaryRender = render(
+      <Selector
+        label="Fruit"
+        options={['Apple', 'Banana']}
+        value="Banana"
+        variant="secondary"
+      />,
+    );
+    // The neutral-filled secondary trigger must not reuse the bordered
+    // input trigger's classes; it carries the secondary trigger style.
+    expect(
+      secondaryRender.container.querySelector('.astryx-selector')!.className,
+    ).not.toBe(inputTriggerClass);
+  });
+
   it('uses a status tooltip for ghost selectors when requested', () => {
     const {container} = render(
       <Selector

package/src/Selector/Selector.tsx

@@ -6,7 +6,7 @@
  * @file Selector.tsx
  * @input Uses React, StyleX, adaptive selection surfaces, theme-resolved
  *   indicators, Field, and InputGroup context
- * @output Exports Selector with content-derived option-mark layout and token-sized single-line triggers
+ * @output Exports Selector with input, secondary, and ghost trigger treatments, content-derived option-mark layout, and token-sized single-line triggers
  * @position Core implementation; consumed by index.ts
  *
  * SYNC: When modified, update:
@@ -260,6 +260,37 @@ const styles = stylex.create({
       '[data-astryx-press="on"]': 'scale(0.98)',
     },
   },
+  // Secondary is ghost's chrome with the resting fill of a secondary
+  // button (`--color-neutral`): no border, no shadow, content width, so a
+  // selector in a nav reads as the sibling of the secondary buttons and
+  // segmented controls beside it instead of as a form field. The hover and
+  // pressed answers still come from the shared interaction overlay, layered
+  // over the fill via backgroundImage.
+  triggerSecondary: {
+    width: 'auto',
+    borderWidth: 0,
+    lineHeight: `max(${spacingVars['--spacing-5']}, 20px, 1rem)`,
+    backgroundColor: colorVars['--color-neutral'],
+    boxShadow: {
+      default: 'none',
+      ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
+        {
+          '@media (hover: hover)': 'none',
+        },
+      ':focus-within': 'none',
+    },
+    fontWeight: fontWeightVars['--font-weight-medium'],
+    transitionProperty:
+      'background-image, background-color, color, opacity, transform',
+    transform: {
+      default: 'scale(1)',
+      ':active': {
+        default: 'scale(0.98)',
+        '@media (pointer: coarse)': 'scale(1)',
+      },
+      '[data-astryx-press="on"]': 'scale(0.98)',
+    },
+  },
   triggerGhostDisabled: {
     backgroundImage: 'none',
     transform: {
@@ -311,7 +342,7 @@ const styles = stylex.create({
   },
   dropdownInput: {
     // The input trigger's text inset includes its border. Mirror that extra
-    // pixel in the menu; the borderless ghost variant needs no correction.
+    // pixel in the menu; the borderless secondary/ghost variants need no correction.
     paddingInline: `calc(${spacingVars['--spacing-1']} + ${borderVars['--border-width']})`,
   },
   // Scroll ownership by the browser's own signal, as the menus declare it: a
@@ -512,7 +543,7 @@ const STATUS_BUTTON_LABEL_KEY: Record<SelectorStatusType, string> = {
 
 export type SelectorSize = 'sm' | 'md' | 'lg';
 
-export type SelectorVariant = 'input' | 'ghost';
+export type SelectorVariant = 'input' | 'secondary' | 'ghost';
 
 export type SelectorPresentation = AdaptivePresentation;
 
@@ -655,6 +686,9 @@ interface SelectorPropsBase<
   /**
    * Visual style of the selector trigger.
    * - 'input': bordered input-style trigger for forms
+   * - 'secondary': matches the theme's secondary buttons (borderless and
+   *   neutral-filled by default), for navs and toolbars where the selector
+   *   sits beside secondary actions
    * - 'ghost': borderless trigger matching ghost buttons, for toolbars
    * @default 'input'
    */
@@ -671,7 +705,7 @@ interface SelectorPropsBase<
    * - 'attached': message overlaps directly below the bordered input (input variant only)
    * - 'detached': message floats below as a separate element with spacing
    * - 'tooltip': message is exposed from the on-field status icon
-   * @default 'attached' for input selectors; 'detached' for ghost selectors
+   * @default 'attached' for input selectors; 'detached' for secondary/ghost selectors
    */
   statusVariant?: FieldStatusVariant;
 
@@ -957,7 +991,7 @@ export function Selector<T extends SelectorOptionType>(
   const hasClear = hasClearProp === true;
   const size = useSize(sizeProp, 'md');
   const effectiveStatusVariant =
-    variant === 'ghost' && statusVariant === 'attached'
+    variant !== 'input' && statusVariant === 'attached'
       ? 'detached'
       : statusVariant;
   const isEffectivelyReadOnly = isReadOnly && !isDisabled;
@@ -1381,6 +1415,14 @@ export function Selector<T extends SelectorOptionType>(
     (e: React.MouseEvent) => {
       e.stopPropagation(); // Don't open dropdown
       clearValue();
+      // A keyboard activation (detail 0) leaves focus on the clear button,
+      // which unmounts once the value is null and would drop focus to <body>;
+      // hand it to the trigger as `hasClear` documents. A pointer press never
+      // focuses the button, so there is no focus to repair, and moving it
+      // would pull it out of an open list's search input.
+      if (e.detail === 0) {
+        triggerRef.current?.focus();
+      }
     },
     [clearValue],
   );
@@ -1408,7 +1450,7 @@ export function Selector<T extends SelectorOptionType>(
         {...themeProps('selector-search')}
         xstyle={
           surface.activePresentation === 'popover' &&
-          variant !== 'ghost' &&
+          variant === 'input' &&
           styles.searchRowInput
         }
         // When hasSearch is set, focus moves into this input on open, so it —
@@ -1753,7 +1795,7 @@ export function Selector<T extends SelectorOptionType>(
             ? styles.touchPanYPinchZoom
             : styles.touchPinchZoom,
           surface.activePresentation === 'popover' &&
-            variant !== 'ghost' &&
+            variant === 'input' &&
             styles.dropdownInput,
         )}>
         {renderOptions()}
@@ -1791,7 +1833,7 @@ export function Selector<T extends SelectorOptionType>(
         styles.dropdown,
         listboxHasOverflow ? styles.touchPanYPinchZoom : styles.touchPinchZoom,
         surface.activePresentation === 'popover' &&
-          variant !== 'ghost' &&
+          variant === 'input' &&
           styles.dropdownInput,
         surface.activePresentation === 'popover' &&
           !isPositioned &&
@@ -1884,24 +1926,27 @@ export function Selector<T extends SelectorOptionType>(
             styles.triggerContainer,
             sizeStyles[size],
             variant === 'ghost' && styles.triggerGhost,
-            variant === 'ghost' && interactionOverlayStyles.backgroundImage,
-            variant === 'ghost' && focusOutlineStyles.focusWithin,
+            variant === 'secondary' && styles.triggerSecondary,
+            variant !== 'input' && interactionOverlayStyles.backgroundImage,
+            variant !== 'input' && focusOutlineStyles.focusWithin,
             surface.isTriggerFocusRingSuppressed &&
               selectorPresentationStyles.pointerRestoredFocus,
             isDisabled && inputWrapperStyles.disabled,
             isEffectivelyReadOnly && styles.triggerReadOnly,
-            variant === 'ghost' && isDisabled && styles.triggerGhostDisabled,
-            variant === 'ghost' &&
+            variant !== 'input' && isDisabled && styles.triggerGhostDisabled,
+            variant !== 'input' &&
               isEffectivelyReadOnly &&
               styles.triggerGhostReadOnly,
             !selectedItem && styles.triggerPlaceholder,
-            variant !== 'ghost' &&
+            variant === 'input' &&
               status &&
               inputStatusBorderStyles[status.type],
-            variant !== 'ghost' &&
+            variant === 'input' &&
               status &&
               !isDisabled &&
               inputStatusHoverShadowStyles[status.type],
+            // Grouped secondary triggers keep their neutral fill but take the
+            // group's row height, connected edge radii, and focus stacking.
             variant !== 'ghost' && inputGroup && groupStyles.inGroup,
             inputGroup && styles.triggerInGroup,
             controlXstyle,

package/src/Selector/__tests__/Combobox.a11y.known-failures.ts

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Combobox.a11y.known-failures.ts
+ * @input Uses KnownFailure from @astryxdesign/a11y-spec
+ * @output Current public-safe Selector Combobox binding failures
+ * @position AST-021 debt records; operational ownership remains outside public source.
+ */
+
+import type {KnownFailure} from '@astryxdesign/a11y-spec';
+
+export const SELECTOR_COMBOBOX_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [
+  {
+    expectation: 'combobox.popup.relationship',
+    binding: 'Selector.trigger',
+    state: 'sheet-open',
+    evidenceLayer: 'dom',
+    failureEquals:
+      'aria-controls does not reference the rendered combobox popup',
+    standardsReference:
+      'WAI-ARIA 1.2 combobox: aria-controls refers to the displayed popup element; WCAG 2.2 1.3.1 Info and Relationships (Level A)',
+    userImpact:
+      'On touch screens the trigger announces that it opens a dialog, but its controls relationship points past that dialog to the list inside it, so assistive technology that follows the relationship reaches the list without the sheet that hosts it.',
+    reason:
+      'The trigger declares the sheet dialog as its popup kind while aria-controls names the inner listbox. Pointing both at one popup changes Selector runtime semantics under AR1, which needs its own decision; this test-only binding records the gap.',
+  },
+];

package/src/Selector/__tests__/Combobox.a11y.states.ts

@@ -0,0 +1,145 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Explicit Selector states bound to the reusable Combobox contract, plus the
+ * states that stay out of it and why.
+ */
+
+import type {ComboboxStateFacts} from '@astryxdesign/a11y-spec';
+
+export interface SelectorComboboxScenario {
+  readonly id:
+    'closed' | 'open' | 'read-only' | 'busy' | 'sheet-open' | 'search-active';
+  /** `trigger` is the Selector button; `search` is the popup's search input. */
+  readonly binding: 'Selector.trigger' | 'Selector.search';
+  readonly storyId: string;
+  readonly open: boolean;
+  /** Move the highlight to the first option from the search input. */
+  readonly highlightFirst?: boolean;
+  readonly props: {
+    readonly isReadOnly?: boolean;
+    readonly isLoading?: boolean;
+    readonly value?: string;
+    readonly presentation?: 'bottom-sheet';
+    readonly hasSearch?: boolean;
+  };
+  readonly facts: ComboboxStateFacts;
+}
+
+const baseFacts: ComboboxStateFacts = {
+  name: 'Fruit',
+  expanded: false,
+  popupRole: 'listbox',
+  popupVisible: false,
+  activeDescendant: false,
+  readOnly: false,
+  busy: false,
+  inertUnderOwnModal: false,
+};
+
+export const SELECTOR_COMBOBOX_SCENARIOS: ReadonlyArray<SelectorComboboxScenario> =
+  [
+    {
+      id: 'closed',
+      binding: 'Selector.trigger',
+      storyId: 'a11y-combobox-pattern--selector-closed',
+      open: false,
+      props: {},
+      facts: baseFacts,
+    },
+    {
+      id: 'open',
+      binding: 'Selector.trigger',
+      storyId: 'a11y-combobox-pattern--selector-open',
+      open: true,
+      props: {},
+      facts: {
+        ...baseFacts,
+        expanded: true,
+        popupVisible: true,
+        activeDescendant: true,
+      },
+    },
+    {
+      id: 'read-only',
+      binding: 'Selector.trigger',
+      storyId: 'a11y-combobox-pattern--selector-read-only',
+      open: false,
+      props: {isReadOnly: true, value: 'apple'},
+      facts: {...baseFacts, readOnly: true},
+    },
+    {
+      id: 'busy',
+      binding: 'Selector.trigger',
+      storyId: 'a11y-combobox-pattern--selector-busy',
+      open: false,
+      props: {isLoading: true},
+      facts: {...baseFacts, busy: true},
+    },
+    {
+      // AR1: the touch presentation's popup is a modal dialog that contains
+      // the listbox, and the trigger declares aria-haspopup="dialog".
+      id: 'sheet-open',
+      binding: 'Selector.trigger',
+      storyId: 'a11y-combobox-pattern--selector-sheet-open',
+      open: true,
+      props: {presentation: 'bottom-sheet'},
+      facts: {
+        ...baseFacts,
+        expanded: true,
+        popupRole: 'dialog',
+        popupVisible: true,
+        activeDescendant: true,
+        // The modal sheet makes the trigger inert, so the browser leaves it
+        // out of the accessibility tree until the sheet closes.
+        inertUnderOwnModal: true,
+      },
+    },
+    {
+      // With hasSearch, focus moves into the popup's search input, which owns
+      // the combobox role and reports the highlighted option.
+      id: 'search-active',
+      binding: 'Selector.search',
+      storyId: 'a11y-combobox-pattern--selector-search-active',
+      open: true,
+      highlightFirst: true,
+      props: {hasSearch: true},
+      facts: {
+        ...baseFacts,
+        name: 'Search options',
+        expanded: true,
+        popupVisible: true,
+        activeDescendant: true,
+      },
+    },
+  ];
+
+/** Selector states that change a combobox outcome but are not bound here. */
+export const SELECTOR_COMBOBOX_EXCLUSIONS = [
+  {
+    owner: 'Selector trigger with hasSearch',
+    reason:
+      'Editable search mode moves combobox semantics to the popup search input, bound as Selector.search; the trigger is not a combobox in that mode.',
+  },
+  {
+    owner: 'Selector search input inside the bottom sheet',
+    reason:
+      'The search input keeps the semantics bound in search-active; the sheet changes only its modal host, which the modal-dialog owner covers.',
+  },
+  {
+    owner: 'Selector interaction suites',
+    reason:
+      'Keyboard activation, arrow/Home/End/typeahead movement, Escape, Tab, and selection policy are verified by Selector.test.tsx (AR3); this contract encodes semantics only.',
+  },
+  {
+    owner: 'Disabled and disabledMessage triggers',
+    reason:
+      'Availability state belongs to the disabled-state owners; this contract has no disabled expectation.',
+  },
+  {
+    owner:
+      'MultiSelector, Typeahead, Tokenizer, PowerSearch, ComplexSelector, CommandPalette',
+    reason:
+      'Later bounded adopters; this first binding is limited to Selector.',
+  },
+] as const;