@astryxdesign/core 0.5.2-canary.c9c8564 → 0.5.2-canary.e03511b

package/src/SegmentedControl/SegmentedControl.spec.md

@@ -0,0 +1,151 @@
+---
+schema_version: 1
+template_version: 3
+kind: component
+id: component:SegmentedControl
+authority: draft
+archive_reason: null
+superseded_by: null
+approved_by: null
+approved_at: null
+owners: [cixzhang]
+review_triggers: [theming, accessibility]
+verified_by:
+  [
+    packages/core/src/SegmentedControl/SegmentedControl.test.tsx,
+    packages/core/src/theme/themingTargets.test.ts,
+    scripts/check-knowledge.mjs,
+  ]
+families: []
+design_specs: []
+architecture: [architecture:component-theming-surface]
+contributing: []
+system_specs: []
+---
+
+# SegmentedControl component contract
+
+## Intent
+
+SegmentedControl presents a group of mutually exclusive choices through
+SegmentedControlItem children. This draft records the current consumer anatomy
+and theming ownership without changing selection behavior, targets, or public
+API.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`
+- Compatibility class: additive documentation only; runtime, DOM, styling,
+  targets, and public API remain unchanged
+- Controlled/uncontrolled behavior: unchanged; selection remains controlled by
+  `value` and `onChange`
+- Migration decision: none
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- The radiogroup control and its current `segmented-control` theming target.
+- SegmentedControlItem's segment button and its current
+  `segmented-control-item` theming target.
+- Rendering optional icon content and a visible label inside a segment.
+
+**Does not own / non-goals**
+
+- The artwork supplied through an item's `icon` prop — owned by the caller.
+- A separate anatomy part or target for selected state; selection is state on the
+  segment target.
+- A visible control-level label; the control's required `label` is its accessible
+  name and is not rendered as visual anatomy.
+
+## Public concepts
+
+No new public concept is introduced. Consumer props and usage remain documented
+in `SegmentedControl.doc.mjs` and `SegmentedControlItem.doc.mjs`.
+
+## Behavioral and layout contract
+
+| ID  | Candidate invariant                                                                                           | Basis                           | Draft review state                                 |
+| --- | ------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------- |
+| FR1 | The radiogroup container carries the current `segmented-control` target and renders its supplied children.    | Current source, docs, and tests | Verified current behavior; no new behavior decided |
+| FR2 | Each SegmentedControlItem renders one radio button carrying the current `segmented-control-item` target.      | Current source, docs, and tests | Verified current behavior; no new behavior decided |
+| FR3 | A visible item label and optional icon render inside the item without separate public targets.                | Current source and tests        | Verified current behavior; no target change        |
+| FR4 | Selected and disabled remain reflected states on `segmented-control-item`, not standalone anatomy or targets. | Current source, docs, and tests | Verified current behavior; no target change        |
+
+### Allowed variation
+
+- A segment may render its visible label, an icon and label, or an icon while the
+  required label supplies the accessible name.
+
+### Representative states
+
+- Selected, unselected, disabled, and enabled items retain the same anatomy.
+  Selection and disabled styling vary on the segment target.
+
+### Transformation and precedence order
+
+- No new selection, focus, layout, or styling precedence rule is introduced.
+
+### Performance and resources
+
+- No new performance or resource rule is introduced.
+
+## Accessibility contract
+
+This draft does not change or extend the existing radiogroup, radio, accessible
+name, roving focus, disabled-message, or selection behavior.
+
+## Design relationships
+
+| Anatomy or state | Design requirement                                          | Representation authority       | Hierarchy role | Component contract |
+| ---------------- | ----------------------------------------------------------- | ------------------------------ | -------------- | ------------------ |
+| Control          | Presents the current grouped choice container.              | Current source and public docs | Supporting     | FR1                |
+| Segment          | Presents one mutually exclusive choice and its item states. | Current source and public docs | Prominent      | FR2, FR4           |
+| Label            | Identifies a segment visually when not hidden.              | Current source and public docs | Prominent      | FR3                |
+| Icon             | Presents optional caller-supplied artwork within a segment. | Caller-supplied content        | Supporting     | FR3                |
+
+Selection is a state of Segment, not a separate anatomy part.
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Control": {"target": "segmented-control"},
+  "Segment": {"target": "segmented-control-item"},
+  "Label": {"inherits": "segmented-control-item"},
+  "Icon": {"inherits": "segmented-control-item"}
+}
+```
+
+## Family and system relationships
+
+- `architecture:component-theming-surface` owns anatomy qualification, inherited
+  parts, and state-on-target rules.
+
+## Verification map
+
+| Contract            | Verification                                                | Representative states                          | Mutation or failure expectation                                                        | Audit section                    |
+| ------------------- | ----------------------------------------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------- |
+| FR1, FR2            | `SegmentedControl.test.tsx` radiogroup and rendering suites | Control with multiple segment items            | Removing the group or item semantics fails existing role and content assertions.       | `audit:SegmentedControl/anatomy` |
+| FR3                 | `SegmentedControl.test.tsx` label and icon suites           | Visible label, icon with label, icon-only item | Removing or changing current label/icon rendering fails existing DOM assertions.       | `audit:SegmentedControl/anatomy` |
+| FR4                 | `SegmentedControl.test.tsx` selection and disabled suites   | Selected, unselected, and disabled items       | Breaking reflected item state fails current ARIA, class, or data-attribute assertions. | `audit:SegmentedControl/theming` |
+| Target inventory    | `packages/core/src/theme/themingTargets.test.ts`            | Control and item targets                       | Runtime and documented target metadata drift fails target validation.                  | `audit:SegmentedControl/theming` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                               | Canonical anatomy and both current targets     | Missing, extra, prefixed, or stale mappings fail repository validation.                | `audit:SegmentedControl/theming` |
+
+## Decision log
+
+None. This draft records current facts and introduces no component-local design,
+selection, accessibility, or API decision.
+
+## Open questions
+
+None.
+
+## Content boundary
+
+This file does not duplicate consumer prop tables, examples, selection or focus
+mechanics, implementation steps, or system rules. It links to their owners.

package/src/Selector/Selector.doc.mjs

@@ -194,6 +194,13 @@ export const docs = {
         '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'",
     },
+    {
+      name: 'presentation',
+      type: "'popover' | 'bottom-sheet' | 'adaptive'",
+      description:
+        'How the option list is presented. adaptive uses a bottom sheet on compact touch screens and an anchored popover otherwise.',
+      default: "'popover'",
+    },
     {
       name: 'width',
       type: 'SizeValue',
@@ -253,6 +260,11 @@ export const docs = {
         description:
           'Use variant="ghost" when a selector sits in a toolbar with ghost buttons. If validation status is needed there, prefer statusVariant="tooltip" so the toolbar height stays compact.',
       },
+      {
+        guidance: true,
+        description:
+          'Use presentation="adaptive" when the selector should become a bottom sheet on compact touch screens.',
+      },
       {
         guidance: false,
         description:

package/src/Selector/Selector.spec.md

@@ -0,0 +1,202 @@
+---
+schema_version: 1
+template_version: 3
+kind: component
+id: component:Selector
+authority: current
+archive_reason: null
+superseded_by: null
+approved_by: cixzhang
+approved_at: 2026-08-30
+owners: [cixzhang, imdreamrunner]
+review_triggers: [public-api, behavior, layout, theming, accessibility]
+verified_by:
+  [
+    packages/core/src/Selector/Selector.test.tsx,
+    packages/core/src/Selector/Selector.source-build.test.mjs,
+  ]
+families: []
+design_specs: []
+architecture:
+  [
+    architecture:component-theming-surface,
+    architecture:icon-resolution-and-component-slots,
+    architecture:interaction-modality,
+    architecture:layer-runtime,
+    architecture:public-component-api,
+  ]
+contributing: []
+system_specs: [spec:AST-004/DEC-1]
+---
+
+# Selector component contract
+
+## Intent
+
+Selector lets a person choose one value from a moderate list while keeping the
+trigger usable as a form field or compact toolbar control. It owns single-value
+selection, option navigation, search within the supplied options, and the
+connection between the closed trigger and its selection surface.
+
+## Compatibility and migration
+
+- Released defaults and behavior remain unchanged by this record.
+- `indicatorPosition` defaults to `end`; every option row currently reserves the
+  indicator column at the configured logical edge.
+- `presentation` defaults to `popover`. `bottom-sheet` is an explicit modal
+  presentation, and `adaptive` selects it on compact coarse-pointer screens.
+- `hasClear` changes the value contract to include `null`; that distinction is
+  already part of the public type.
+- `spec:AST-004/DEC-1` accepts a future change that collapses an empty indicator
+  column. It is not shipped behavior and does not replace FR3 until implementation,
+  visual verification, and an update to this current contract land together.
+
+## Ownership boundary
+
+**Owns**
+
+- Choosing one value from supplied options.
+- Trigger, listbox, option, search, empty, loading, and disabled behavior.
+- Keyboard navigation and announcements for that selection flow.
+- Selector-specific composition of shared Field, Layer, adaptive presentation,
+  and indicator behavior.
+
+**Does not own / non-goals**
+
+- Action or navigation menus; DropdownMenu owns those.
+- Multi-value selection; MultiSelector owns it.
+- Product-specific option content or filtering performed outside the supplied
+  option list.
+- Family-wide input sizing, loading, end-lane, or disabled-reason policy. The
+  draft `family:input-fields` record is non-authoritative context only.
+
+## Public concepts
+
+This table names semantic concepts reviewers need. Prop syntax, complete defaults,
+and examples remain in `Selector.doc.mjs`.
+
+| Concept                | Closed values or states                | Meaning                                                 | Availability by variant/orientation/state | Default   | Owner    | Stability | Invalid-value behavior          |
+| ---------------------- | -------------------------------------- | ------------------------------------------------------- | ----------------------------------------- | --------- | -------- | --------- | ------------------------------- |
+| trigger variant        | `input`, `ghost`                       | Form-field or toolbar presentation                      | All trigger states                        | `input`   | Selector | released  | TypeScript rejects other values |
+| size                   | `sm`, `md`, `lg`                       | Trigger and option-row density                          | All presentations                         | `md`      | Selector | released  | TypeScript rejects other values |
+| selected-mark position | `start`, `end`                         | Logical edge containing the reserved selection column   | Every option row                          | `end`     | Selector | released  | TypeScript rejects other values |
+| presentation           | `popover`, `bottom-sheet`, `adaptive`  | Anchored pointer surface or modal compact-touch surface | All trigger variants                      | `popover` | Selector | released  | TypeScript rejects other values |
+| popup semantics        | `listbox`; modal dialog containing one | Semantics follow the active presentation                | Popover; bottom sheet                     | `listbox` | Selector | released  | No separate role prop is public |
+| option-row state       | `selected`, `disabled`                 | Stable theming state on each option row                 | Every rendered option                     | neither   | Selector | released  | Unknown states are not emitted  |
+
+## Behavioral and layout contract
+
+These requirements describe shipped behavior on current `main`.
+
+| ID  | Shipped invariant                                                                                                                                                                                                 | Evidence                                                    |
+| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
+| FR1 | Selecting an enabled option updates the one selected value, closes the active presentation, and returns the trigger to its stable closed state.                                                                   | Consumer docs and selection interaction tests               |
+| FR2 | Without explicit placement, a non-search popover aligns the selected row over the trigger and clamps it to the viewport. Search popovers and explicit placement use normal Layer positioning.                     | Consumer docs, implementation, and geometry tests           |
+| FR3 | Every option row reserves one selection-mark column at `indicatorPosition`, even when the default unchecked indicator draws nothing. The column has a minimum width and can grow for a larger themed replacement. | `itemMarkColumn`, indicator-position tests, and theme tests |
+| FR4 | `popover` uses an anchored Popover. `bottom-sheet` uses a modal BottomSheet. `adaptive` resolves to the modal bottom sheet on compact coarse-pointer screens and Popover otherwise.                               | Presentation controller and adaptive-presentation tests     |
+| FR5 | While `isLoading` is true, the trigger exposes busy state and the listbox suppresses empty and no-results output.                                                                                                 | Loading, empty-state, and announcement tests                |
+
+### Allowed variation
+
+- **AV1 — Indicator rendering.** A theme may replace the check indicator. The
+  replacement may draw in both selected and unselected states; the current row
+  still reserves its indicator column.
+- **AV2 — Option content.** `renderOption` may replace visible option content,
+  while Selector keeps row role, selection, disabled state, navigation, and
+  theming state.
+- **AV3 — Selected value content.** `renderValue` may replace the closed value
+  display without changing the placeholder or trigger's selection role.
+
+### Representative states
+
+| State                    | Required invariant                                                                   | Allowed variation                                      |
+| ------------------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------ |
+| closed with no value     | Label and placeholder identify the field                                             | Consumer placeholder text                              |
+| closed with a value      | Selected option is represented in the trigger                                        | Custom `renderValue` content                           |
+| pointer / popover        | Anchored surface exposes the listbox without modal-dialog semantics                  | Default or explicit placement                          |
+| compact coarse pointer   | BottomSheet exposes a modal dialog containing the listbox                            | Explicit `bottom-sheet` or resolved `adaptive`         |
+| searching                | Visible options, keyboard navigation, and announced result count use one filter      | Consumer search and empty text                         |
+| loading                  | Trigger is busy; empty and no-results output is suppressed                           | Consumer loading duration                              |
+| disabled with reason     | Trigger remains focusable enough to expose the reason while activation stays blocked | Consumer reason text                                   |
+| selected/unselected rows | Row semantics and theming state are correct; both reserve the indicator column       | Start/end position and themed indicator representation |
+
+### Transformation and precedence order
+
+- **ORD1 — Option normalization precedes filtering and selection.** Strings and
+  option objects become one option shape before search, keyboard matching,
+  rendering, and value comparison.
+- **ORD2 — Caller-selected content wins deliberately.** `startIcon` takes
+  precedence over a selected option's icon; explicit placement takes precedence
+  over selected-item overlay alignment.
+
+### Performance and resources
+
+- **PR1 — Search does not add effect-driven result-count renders.** The next
+  filtered count is derived from the input change and announced once for that
+  query.
+- **PR2 — Geometry work is scoped to the open popover.** Selected-item alignment
+  may read browser layout while opening; it does not impose document-wide or
+  persistent observation while closed.
+
+## Accessibility contract
+
+- **AR1 — Semantics follow presentation.** The anchored presentation exposes a
+  listbox through a Popover and the trigger uses `aria-haspopup="listbox"`. The
+  touch presentation exposes a modal BottomSheet dialog containing the listbox
+  and the trigger uses `aria-haspopup="dialog"`.
+- **AR2 — Focus follows the active interaction model.** The anchored presentation
+  keeps the combobox relationship at the trigger/search control. The modal touch
+  presentation moves focus into its search control or listbox and restores focus
+  to the trigger when it closes.
+- **AR3 — Keyboard selection matches the visible set.** Arrow, Home/End,
+  typeahead, search, Enter, Escape, and Tab behavior operate on the options a
+  person can currently perceive.
+
+## Design relationships
+
+No current design spec is linked.
+
+| Anatomy or state                 | Current representation requirement                                                      | Representation authority   | Hierarchy role          | Component contract |
+| -------------------------------- | --------------------------------------------------------------------------------------- | -------------------------- | ----------------------- | ------------------ |
+| selected mark and option spacing | Every row reserves the indicator column, preserving label alignment and available width | existing shipped behavior  | supporting              | FR3                |
+| input versus ghost trigger       | none recorded                                                                           | existing released behavior | form or toolbar control | Public concepts    |
+
+The approved but unimplemented replacement for the first row is owned by
+`spec:AST-004/DEC-1`.
+
+## Family and system relationships
+
+- The current architecture links in frontmatter own public API, theming, icon
+  resolution, interaction modality, and Layer behavior used by Selector.
+- `spec:AST-004/DEC-1` owns the accepted future indicator-space change. Its
+  `accepted` phase is direction for implementation, not evidence that the runtime
+  has changed.
+- `family:input-fields` remains a draft. It may inform future reconciliation, but
+  this current component contract neither backlinks to it in frontmatter nor
+  depends on it for present policy.
+
+## Verification map
+
+| Contract              | Verification                                                                               | Representative states                              | Mutation or failure expectation                                                                                | Audit section                    |
+| --------------------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| FR1, AR2, AR3         | `Selector.test.tsx` selection, focus, and keyboard suites                                  | closed/open, search/non-search, disabled option    | Removing selection wiring, focus movement, or keyboard behavior fails the named interaction tests              | `audit:Selector/behavior`        |
+| FR2                   | placement and selected-item geometry tests                                                 | default, explicit, RTL, transformed entry          | Using the wrong positioning model fails the expected position-area or margin                                   | `audit:Selector/behavior`        |
+| FR3, AV1              | `itemMarkColumn` source inspection plus indicator-position and replacement-indicator tests | start/end, selected/unselected, check/radio        | Removing the wrapper fails row-structure tests; changing its reserved width requires source/layout review      | `audit:Selector/design-rendered` |
+| FR4, AR1, AR2         | presentation tests plus `aria-haspopup` source review                                      | pointer, compact coarse pointer, search/non-search | Wrong Popover/dialog roles or focus destinations fail tests; `aria-haspopup` values require source/a11y review | `audit:Selector/accessibility`   |
+| FR5                   | loading, empty-state, and live-region tests                                                | empty options, unmatched search, loading           | Empty/no-results output appears or is announced while loading                                                  | `audit:Selector/behavior`        |
+| source-build contract | `Selector.source-build.test.mjs`                                                           | package source compiled by consumer Babel          | Moving evaluated StyleX values outside the supported source form fails compilation                             | `audit:Selector/code-health`     |
+
+## Decision log
+
+No component-local future decision is recorded here. Accepted unimplemented work
+is owned by `spec:AST-004`.
+
+## Open questions
+
+None.
+
+## Content boundary
+
+This file does not copy the full prop reference, examples, current audit score,
+family proposals, or future implementation steps. Those remain with their
+existing owners.

package/src/Selector/Selector.test.tsx

@@ -10,6 +10,7 @@
  */
 
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {readFileSync} from 'node:fs';
 import {
   act,
   render,
@@ -19,6 +20,7 @@ import {
   within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import * as stylex from '@stylexjs/stylex';
 import {useState} from 'react';
 import type {ReactNode} from 'react';
 import {Selector} from './Selector';
@@ -35,6 +37,7 @@ import {defineTheme} from '../theme/defineTheme';
 import {Theme} from '../theme/Theme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
 import {spacingVars} from '../theme/tokens.stylex';
+import {selectorPresentationStyles} from './selectorPresentation.stylex';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -45,6 +48,28 @@ function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
 beforeEach(() => {
   // The live regions are a document-level singleton; start each test clean.
   __resetLiveRegionsForTest();
+  __resetInteractionModalityForTest();
+  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(),
+    })),
+  );
   HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
     this.setAttribute('popover-open', '');
     const event = new Event('toggle', {bubbles: false});
@@ -228,6 +253,116 @@ function mockSelectorRects({
 }
 
 describe('Selector', () => {
+  it('uses a bottom sheet and closes after a selection when requested', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        onChange={onChange}
+        presentation="bottom-sheet"
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await user.click(trigger);
+
+    expect(
+      await screen.findByRole('dialog', {name: 'Fruit'}),
+    ).toBeInTheDocument();
+    expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+
+    await user.click(screen.getByRole('option', {name: /Banana/}));
+    expect(onChange).toHaveBeenCalledWith('Banana');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('restores touch focus without painting a trigger focus ring', async () => {
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        onChange={() => {}}
+        presentation="bottom-sheet"
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    fireEvent.pointerDown(trigger, {pointerType: 'touch'});
+    fireEvent.click(trigger, {detail: 1});
+    const option = await screen.findByRole('option', {name: /Banana/});
+    fireEvent.pointerDown(option, {pointerType: 'touch'});
+    fireEvent.click(option, {detail: 1});
+
+    trigger.focus();
+    expect(trigger).toHaveFocus();
+    expect(trigger.parentElement).toHaveClass(
+      stylex.props(selectorPresentationStyles.pointerRestoredFocus).className!,
+    );
+  });
+
+  it('uses content-hugging height without extra bottom content padding', () => {
+    const source = readFileSync(
+      'packages/core/src/Selector/SelectorBottomSheet.tsx',
+      'utf8',
+    );
+
+    expect(source).toContain('height="hug"');
+    expect(source).toContain('paddingBlockStart={4}');
+    expect(source).toContain('paddingBlockEnd={0}');
+  });
+
+  it('moves keyboard focus into a bottom-sheet listbox', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector label="Fruit" options={OPTIONS} presentation="bottom-sheet" />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    trigger.focus();
+    await user.keyboard('{Enter}');
+
+    await waitFor(() => expect(screen.getByRole('listbox')).toHaveFocus());
+  });
+
+  it('uses a bottom sheet for adaptive presentation on compact touch', async () => {
+    vi.stubGlobal(
+      'matchMedia',
+      vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(max-width: 768px) and (pointer: coarse)',
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    );
+    const user = userEvent.setup();
+    render(
+      <Selector label="Fruit" options={OPTIONS} presentation="adaptive" />,
+    );
+
+    await user.click(screen.getByRole('combobox'));
+    expect(
+      await screen.findByRole('dialog', {name: 'Fruit'}),
+    ).toBeInTheDocument();
+    expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+  });
+
+  it('keeps adaptive presentation anchored without compact touch', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector label="Fruit" options={OPTIONS} presentation="adaptive" />,
+    );
+
+    await user.click(screen.getByRole('combobox'));
+    expect(HTMLElement.prototype.showPopover).toHaveBeenCalledOnce();
+    expect(HTMLDialogElement.prototype.showModal).not.toHaveBeenCalled();
+  });
+
   it('renders with placeholder when no value', () => {
     render(<Selector label="Fruit" options={OPTIONS} placeholder="Pick one" />);
     expect(screen.getByRole('combobox')).toHaveTextContent('Pick one');