@astryxdesign/core 0.6.2 → 0.6.3-canary.0899f21

package/src/RadioList/RadioListItem.tsx

@@ -23,6 +23,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {RadioListContext} from './RadioList';
+import {colorVars, radiusVars} from '../theme/tokens.stylex';
 import {mergeProps, isRenderable, rtlStyles} from '../utils';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
@@ -39,6 +40,25 @@ const styles = stylex.create({
     flexShrink: 0,
     isolation: 'isolate',
   },
+  // The row remains the large press target, but nested links and buttons keep
+  // their independent action and do not make the radio appear pressed. This
+  // owner-drawn layer also survives a theme replacing the indicator component.
+  indicatorPressOverlay: {
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      borderRadius: radiusVars['--radius-full'],
+      pointerEvents: 'none',
+      backgroundColor: {
+        default: 'transparent',
+        [stylex.when.ancestor(
+          ':active:not(:has(a:active,button:active,[role="button"]:active,[role="link"]:active))',
+          indicatorScope,
+        )]: colorVars['--color-overlay-pressed'],
+      },
+    },
+  },
   input: {
     position: 'absolute',
     top: '50%',
@@ -222,7 +242,11 @@ export function RadioListItem({
 
   const radioCircle = (
     <div
-      {...stylex.props(styles.radioWrapper, wrapperSizeStyles[size])}
+      {...stylex.props(
+        styles.radioWrapper,
+        wrapperSizeStyles[size],
+        !isDisabled && styles.indicatorPressOverlay,
+      )}
       {...focusProps}>
       <input
         ref={radioRef}

package/src/ScrollableArea/ScrollableArea.tsx

@@ -12,6 +12,7 @@
  * - /packages/core/src/ScrollableArea/ScrollableArea.test.tsx
  * - /packages/core/src/ScrollableArea/ScrollableArea.doc.mjs
  * - /apps/storybook/stories/ScrollableArea.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/ScrollableArea/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';

package/src/ScrollableArea/modules/useScrollableArea.spec.md

@@ -10,7 +10,12 @@ approved_by: cixzhang
 approved_at: 2026-09-11
 owners: [cixzhang]
 review_triggers: [public-api, behavior, accessibility]
-verified_by: [packages/core/src/hooks/useScrollableArea.test.tsx]
+verified_by:
+  [
+    packages/core/src/hooks/useScrollableArea.test.tsx,
+    packages/core/src/hooks/scrollKeyboardDelegation.test.ts,
+    packages/core/src/BottomSheet/__tests__/BottomSheetKeyboard.a11y.browser.spec.ts,
+  ]
 parent_component: component:ScrollableArea
 references: [architecture:public-component-api, spec:AST-025/DEC-1]
 ---
@@ -47,24 +52,25 @@ and scroll chaining without inserting structure.
 
 ## Public API and concepts
 
-| Concept        | Closed values or states            | Meaning                               | Default                   | Owner                                     | Stability |
-| -------------- | ---------------------------------- | ------------------------------------- | ------------------------- | ----------------------------------------- | --------- |
-| axis           | `inline`, `block`, `both`          | requested logical scroll intent       | required                  | `spec:AST-025`                            | stable    |
-| keyboard owner | `content`, named `viewport`        | where keyboard scrolling is reached   | required                  | `spec:AST-025`                            | stable    |
-| overscroll     | `allow`, `contain`                 | edge propagation on effective axes    | `allow`                   | `spec:AST-025`                            | stable    |
-| axis state     | `isScrollable`, `atStart`, `atEnd` | effective ownership and logical edges | inactive, both edges true | `module:ScrollableArea/useScrollableArea` | stable    |
+| Concept        | Closed values or states                                | Meaning                                 | Default                   | Owner                                     | Stability |
+| -------------- | ------------------------------------------------------ | --------------------------------------- | ------------------------- | ----------------------------------------- | --------- |
+| axis           | `inline`, `block`, `both`                              | requested logical scroll intent         | required                  | `spec:AST-025`                            | stable    |
+| keyboard owner | `content`, named `viewport`, named `contentOrViewport` | fixed or automatic keyboard scroll path | required                  | `spec:AST-025`                            | stable    |
+| overscroll     | `allow`, `contain`                                     | edge propagation on effective axes      | `allow`                   | `spec:AST-025`                            | stable    |
+| axis state     | `isScrollable`, `atStart`, `atEnd`                     | effective ownership and logical edges   | inactive, both edges true | `module:ScrollableArea/useScrollableArea` | stable    |
 
 ## Behavioral contract
 
-| ID  | Invariant                                                                                                                                                                             | Basis                       | Acceptance and implementation state     |
-| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------------------- |
-| FR1 | An axis MUST be effective only when requested, computed overflow is scroll-capable, and geometry exceeds 1px.                                                                         | `spec:AST-025` FR1–FR4      | implemented                             |
-| FR2 | Viewport and content geometry MUST be observed; invalidations MUST coalesce and preserve the last valid state while unmeasurable.                                                     | `spec:AST-025` FR5–FR9      | implemented                             |
-| FR3 | Logical edges and behavior-owned physical overflow MUST map through direction and horizontal, vertical, or sideways writing modes without requiring adopters to recreate the mapping. | `spec:AST-025` FR1, FR3–FR4 | implemented                             |
-| FR4 | The nearest registered effective owner MUST win independently by axis.                                                                                                                | `spec:AST-025` FR10, FR18   | implemented privately for future Sticky |
-| FR5 | Viewport keyboard props and overscroll containment MUST appear only while applicable requested axes are effective.                                                                    | `spec:AST-025` FR12–FR14    | implemented                             |
-| FR6 | Prop getters MUST compose refs and preserve caller handlers/classes/styles/ARIA while behavior-owned accessibility and non-cancellable behavior win conflicts.                        | `spec:AST-025` IR4          | implemented                             |
-| FR7 | The viewport prop getter MUST consume caller `xstyle` and internally compose geometry-driven `clip`/`auto`/`hidden` overflow plus explicit fitting Sticky containment.                | `spec:AST-025` FR21         | implemented                             |
+| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                        | Basis                       | Acceptance and implementation state     |
+| --- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------------------- |
+| FR1 | An axis MUST be effective only when requested, computed overflow is scroll-capable, and geometry exceeds 1px.                                                                                                                                                                                                                                                                    | `spec:AST-025` FR1–FR4      | implemented                             |
+| FR2 | Viewport and content geometry MUST be observed; invalidations MUST coalesce and preserve the last valid state while unmeasurable.                                                                                                                                                                                                                                                | `spec:AST-025` FR5–FR9      | implemented                             |
+| FR3 | Logical edges and behavior-owned physical overflow MUST map through direction and horizontal, vertical, or sideways writing modes without requiring adopters to recreate the mapping.                                                                                                                                                                                            | `spec:AST-025` FR1, FR3–FR4 | implemented                             |
+| FR4 | The nearest registered effective owner MUST win independently by axis.                                                                                                                                                                                                                                                                                                           | `spec:AST-025` FR10, FR18   | implemented privately for future Sticky |
+| FR5 | Viewport keyboard props and overscroll containment MUST appear only while applicable requested axes are effective.                                                                                                                                                                                                                                                               | `spec:AST-025` FR12–FR14    | implemented                             |
+| FR6 | Prop getters MUST compose refs and preserve caller handlers/classes/styles/ARIA while behavior-owned accessibility and non-cancellable behavior win conflicts.                                                                                                                                                                                                                   | `spec:AST-025` IR4          | implemented                             |
+| FR7 | The viewport prop getter MUST consume caller `xstyle` and internally compose geometry-driven `clip`/`auto`/`hidden` overflow plus explicit fitting Sticky containment.                                                                                                                                                                                                           | `spec:AST-025` FR21         | implemented                             |
+| FR8 | `contentOrViewport` MUST retain the named overflowing viewport, inspect the first sequential descendant on forward Tab entry, and delegate only to a native link/button outside navigation-key-owning surfaces. Reverse traversal from the delegated first child skips the viewport. Pointer/programmatic focus never delegates; eligibility is checked again on the next entry. | `spec:AST-025` FR12–FR13    | implemented                             |
 
 ### Transformation and precedence order
 
@@ -82,9 +88,20 @@ and scroll chaining without inserting structure.
 
 ## Accessibility contract
 
-- **AR1 — Named viewport owner.** Viewport-owned access requires a label and adds
-  the viewport to the tab order only while an applicable axis is effective.
-- **AR2 — Focus continuity.** State changes never move or blur focus.
+- **AR1 — Named viewport owner.** Fixed viewport and automatic access require a
+  label and retain `tabIndex=0` while effectively scrollable. Automatic access
+  delegates only on forward keyboard entry; the descendant retains its own name
+  inside the named viewport group/region.
+- **AR2 — Focus continuity.** Content, eligibility, and geometry changes never
+  move or blur focus. A viewport losing overflow while focused remains
+  programmatically focusable. Reverse traversal from the delegated first child
+  skips the viewport, including after visiting later descendants.
+- **AR3 — Conservative eligibility.** Inspect the first sequential target; do not
+  search past an excluded one for a link/button. Composite roles, editable
+  surfaces, native or registered nested scroll owners, positive tab ordering,
+  popup triggers, and unproven interactive roles retain the viewport path.
+- **AR4 — Native scrolling.** Delegation MUST preserve Arrow/Page access to both
+  scroll edges without implementing JavaScript scrolling.
 
 ## Design relationships
 
@@ -97,9 +114,9 @@ No visual representation is owned by this hook.
 
 ## Verification map
 
-| Contract         | Verification                                                   | Representative states                                                                 | Mutation or failure expectation                                                                                |
-| ---------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| FR1–FR6, AR1–AR2 | `useScrollableArea.test.tsx` plus real-browser Storybook probe | horizontal/vertical/sideways, LTR/RTL, fit/overflow/edge, nested owners, focused loss | style-only or geometry-only ownership, physical-edge leakage, stale state, ref loss, or dead containment fails |
+| Contract         | Verification                                                                                                     | Representative states                                                                                                                                  | Mutation or failure expectation                                                                                                                 |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| FR1–FR8, AR1–AR4 | `useScrollableArea.test.tsx`, `scrollKeyboardDelegation.test.ts`, and `BottomSheetKeyboard.a11y.browser.spec.ts` | horizontal/vertical/sideways, LTR/RTL, fit/overflow/edge, fixed/automatic keyboard owners, dynamic descendant eligibility, nested owners, focused loss | style-only or geometry-only ownership, physical-edge leakage, duplicate/missing keyboard path, stale state, ref loss, or dead containment fails |
 
 ## Decision log
 
@@ -111,6 +128,17 @@ No visual representation is owned by this hook.
 One returned prop object per owned element keeps refs, accessibility, handlers,
 and behavior together without making consumer spread order part of correctness.
 
+### DEC-2 — Automatic ownership is shared behavior
+
+**Reference:** `module:ScrollableArea/useScrollableArea/DEC-2`
+**Decider:** cixzhang, 2026-09-13
+
+`contentOrViewport` retains the named overflowing viewport and delegates only on
+forward Tab entry to a safe first sequential native link/button. This replaces
+continuous keyboard-eligibility observation. Geometry observation is unchanged;
+keyboard eligibility adds no subtree or ancestor observers and is inspected anew
+at each entry. BottomSheet is a proving composition of this shared behavior.
+
 ## Open questions
 
 None.

package/src/SegmentedControl/SegmentedControl.doc.mjs

@@ -129,9 +129,9 @@ export const docs = {
         category: 'Color contrast',
         criterion: '1.4.3 Contrast (Minimum)',
         requirement: '4.5:1',
-        states: ['Rest', 'Hover', 'Selected'],
+        states: ['Rest', 'Hover', 'Pointer down', 'Selected'],
         description:
-          'Each label must have at least 4.5:1 contrast with its segment background. Check unselected, Hover, and selected colors as they appear on screen.',
+          'Each label must have at least 4.5:1 contrast with its segment background. Check unselected, Hover, Pointer down, and selected colors as they appear on screen. For Hover and Pointer down, measure the final background after the overlay is applied.',
       },
       {
         name: 'Essential icon',

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -15,6 +15,7 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {hasPressedArm} from '../__tests__/pressState';
 import {SegmentedControl} from './SegmentedControl';
 import {SegmentedControlItem} from './SegmentedControlItem';
 import {
@@ -672,3 +673,33 @@ describe('forced colors (WCAG 1.4.11)', () => {
     expect(getAllInjectedCss()).toContain('forced-color-adjust: none;');
   });
 });
+
+describe('pressed state', () => {
+  it('paints the pressed overlay on a segment while it is pressed', () => {
+    render(
+      <SegmentedControl value="grid" onChange={() => {}} label="View mode">
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" />
+      </SegmentedControl>,
+    );
+    // The unselected segment is the one a press can change; it carries the
+    // system's hover and pressed overlay.
+    expect(hasPressedArm(screen.getByRole('radio', {name: 'List'}))).toBe(true);
+    // The selected segment keeps its raised surface as it is.
+    expect(hasPressedArm(screen.getByRole('radio', {name: 'Grid'}))).toBe(
+      false,
+    );
+  });
+
+  it('does not press a disabled segment', () => {
+    render(
+      <SegmentedControl value="grid" onChange={() => {}} label="View mode">
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" isDisabled />
+      </SegmentedControl>,
+    );
+    expect(hasPressedArm(screen.getByRole('radio', {name: 'List'}))).toBe(
+      false,
+    );
+  });
+});

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -33,6 +33,7 @@ import {mergeProps, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 
 export interface SegmentedControlItemProps extends BaseProps<HTMLButtonElement> {
   ref?: React.Ref<HTMLButtonElement>;
@@ -91,14 +92,6 @@ const styles = stylex.create({
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
   },
-  hover: {
-    backgroundColor: {
-      default: null,
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': colorVars['--color-overlay-hover'],
-      },
-    },
-  },
   selected: {
     // Forced colors (Windows High Contrast) strips the painted surface fill
     // and box shadow, which would leave the selected segment with no state
@@ -248,7 +241,11 @@ export function SegmentedControlItem({
           sizeStyles[size],
           isFill && styles.fill,
           isSelected && styles.selected,
-          !isSelected && !isItemDisabled && styles.hover,
+          // The shared hover and pressed overlay, on the segments a press can
+          // change: the selected segment keeps its raised surface as it is.
+          !isSelected &&
+            !isItemDisabled &&
+            interactionOverlayStyles.backgroundColor,
           isItemDisabled && styles.disabled,
           xstyle,
         ),

package/src/Selector/Selector.doc.mjs

@@ -83,7 +83,7 @@ const anatomy = [
     name: 'Option selection indicator',
     required: false,
     description:
-      'Resolved selection mark rendered for each option in its checked or unchecked state.',
+      'Resolved selection mark rendered for each option in its checked or unchecked state. Its layout space collapses when the resolved indicator draws nothing.',
   },
   {
     name: 'Option divider',
@@ -330,7 +330,7 @@ export const docs = {
       name: 'indicatorPosition',
       type: "'start' | 'end'",
       description:
-        '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.',
+        'Which logical edge of the option row carries a rendered selection mark. An empty mark consumes no space, so selected and unselected labels may shift or have different available width. end is the house convention shared with Typeahead and CommandPalette.',
       default: "'end'",
     },
     {

package/src/Selector/Selector.spec.md

@@ -14,6 +14,10 @@ verified_by:
   [
     packages/core/src/Selector/Selector.test.tsx,
     packages/core/src/Selector/Selector.source-build.test.mjs,
+    packages/core/src/Selector/__tests__/Selector.listbox.a11y.test.tsx,
+    packages/core/src/Selector/__tests__/Listbox.a11y.chromium.spec.ts,
+    apps/storybook/stories/Selector.stories.tsx,
+    .github/scripts/story-play-guard.js,
   ]
 modules: []
 families: [family:input-fields]
@@ -42,8 +46,8 @@ 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.
+- `indicatorPosition` defaults to `end`; a rendered selection mark occupies
+  space at that logical edge, while an empty resolved indicator occupies none.
 - `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
@@ -51,9 +55,7 @@ connection between the closed trigger and its selection surface.
 - `isReadOnly` is additive and defaults to `false`. It preserves the selected
   value, focus, and form participation while removing selection-surface and
   editing affordances. `isDisabled` takes precedence when both are set.
-- `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.
+- `spec:AST-004/DEC-1` governs the state-derived indicator-space behavior in FR3.
 
 ## Ownership boundary
 
@@ -84,7 +86,7 @@ and examples remain in `Selector.doc.mjs`.
 | ---------------------- | -------------------------------------- | -------------------------------------------------------- | ----------------------------------------- | --------- | -------- | --------- | ------------------------------- |
 | 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 |
+| selected-mark position | `start`, `end`                         | Logical edge containing a rendered selection mark        | 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  |
@@ -94,20 +96,20 @@ and examples remain in `Selector.doc.mjs`.
 
 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                |
-| FR6 | While `isReadOnly` is true, the selected value remains focusable and form-submittable, while the selection surface, clear action, disclosure indicator, and every value-change path are unavailable.              | Read-only interaction, form, and accessibility tests        |
+| 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 | An option whose resolved selection indicator draws no content reserves no mark-column space. Visible selected or themed replacement indicators remain in layout at `indicatorPosition`; the resulting state-dependent label position or available width is intentional, and row content keeps its existing overflow behavior. | `itemMarkColumn`, focused indicator tests, and Chromium evidence stories |
+| 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                             |
+| FR6 | While `isReadOnly` is true, the selected value remains focusable and form-submittable, while the selection surface, clear action, disclosure indicator, and every value-change path are unavailable.                                                                                                                          | Read-only interaction, form, and accessibility 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.
+- **AV1 — Indicator rendering.** A theme may replace the check indicator. A
+  replacement that draws in both selected and unselected states keeps its mark
+  space in both states; only resolved empty output collapses.
 - **AV2 — Option content.** `renderOption` may replace visible option content,
   while Selector keeps row role, selection, disabled state, navigation, and
   theming state.
@@ -116,17 +118,17 @@ These requirements describe shipped behavior on current `main`.
 
 ### 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                                   |
-| read-only                | Value stays focusable and submittable; menu, clear, and disclosure affordances are absent | Value rendering, status, and busy presentation         |
-| selected/unselected rows | Row semantics and theming state are correct; both reserve the indicator column            | Start/end position and themed indicator representation |
+| 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                                       |
+| read-only                | Value stays focusable and submittable; menu, clear, and disclosure affordances are absent | Value rendering, status, and busy presentation             |
+| selected/unselected rows | Empty marks consume no width; visible marks retain space at the logical edge              | State-dependent label position/width and themed indicators |
 
 ### Transformation and precedence order
 
@@ -174,12 +176,12 @@ These requirements describe shipped behavior on current `main`.
 
 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    |
+| Anatomy or state                 | Current representation requirement                                                                 | Representation authority   | Hierarchy role          | Component contract |
+| -------------------------------- | -------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------- | ------------------ |
+| selected mark and option spacing | Empty resolved marks collapse; visible marks retain space, so row label geometry may vary by state | `spec:AST-004/DEC-1`       | 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
+The first row implements the state-derived spacing decision in
 `spec:AST-004/DEC-1`.
 
 ### Theming anatomy
@@ -255,16 +257,15 @@ content stays outside that target, while the targeted option row remains.
 current anatomy row.
 
 This map records only shipped reachability. It does not treat the accepted,
-unimplemented option-source behavior in `spec:AST-001` or indicator-space change
-in `spec:AST-004` as current runtime behavior.
+unimplemented option-source behavior in `spec:AST-001` as current runtime behavior.
+`spec:AST-004` governs FR3's shipped indicator-space behavior without adding a
+new theming target.
 
 ## 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.
+- `spec:AST-004/DEC-1` owns FR3's shipped indicator-space behavior.
 - `spec:AST-011/DEC-1` owns the additive read-only state: caller-owned policy can
   preserve a focusable, submittable value without exposing selection controls.
 - `family:input-fields` owns family-wide state display, behavior, appearance,
@@ -274,20 +275,21 @@ in `spec:AST-004` as current runtime behavior.
 
 ## 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`        |
-| FR6, AR4              | read-only interaction, form, ARIA, and theme-state tests                                   | search/non-search, clearable, open→read-only, disabled precedence | A value changes, popup or edit affordance remains, form value disappears, or read-only semantics are absent    | `audit:Selector/accessibility`   |
-| 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`     |
+| 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              | Focused `Selector.test.tsx` computed-display checks plus guarded Chromium Storybook matrix and stable visual stories | popover/bottom sheet, narrow/wide, start/end, LTR/RTL, selected/unselected, check/radio | Empty output reserves width, visible output collapses, logical placement flips incorrectly, or row content overflows                    | `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`   |
+| AR1, AV2              | `Selector.listbox.a11y.test.tsx` and `Listbox.a11y.chromium.spec.ts` against the shared Listbox contract             | popover/sheet, flat/grouped, selected/unselected, disabled, search, loading, custom RTL | A new or wider loss of role, listbox/option name, state, or ownership gates; the exact unnamed no-search sheet state remains known debt | `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`        |
+| FR6, AR4              | read-only interaction, form, ARIA, and theme-state tests                                                             | search/non-search, clearable, open→read-only, disabled precedence                       | A value changes, popup or edit affordance remains, form value disappears, or read-only semantics are absent                             | `audit:Selector/accessibility`   |
+| 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`.
+No component-local future decision is recorded here. FR3 implements the
+system decision owned by `spec:AST-004/DEC-1`.
 
 ## Open questions
 

package/src/Selector/Selector.test.tsx

@@ -3728,67 +3728,73 @@ describe('Selector indicatorPosition', () => {
     ).toBeTruthy();
   });
 
-  it('reserves the mark column on every row, at either position', () => {
-    // The default check draws nothing when unchecked, so without a reserved
-    // column the chosen row would be laid out differently from the rest —
-    // indented at the start, truncating earlier at the end. Every row is two
-    // children wide either way, so a row's geometry does not depend on whether
-    // it happens to be the chosen one.
-    const {unmount} = render(
-      <Selector
-        label="Fruit"
-        options={OPTIONS}
-        value="Banana"
-        onChange={() => {}}
-        indicatorPosition="start"
-        isDefaultOpen
-      />,
-    );
-    for (const row of openRows()) {
-      expect(row.children).toHaveLength(2);
-    }
-    unmount();
-
-    render(
-      <Selector
-        label="Fruit"
-        options={OPTIONS}
-        value="Banana"
-        onChange={() => {}}
-        isDefaultOpen
-      />,
-    );
-    for (const row of openRows()) {
-      expect(row.children).toHaveLength(2);
-    }
-  });
-
-  it('positions a themed replacement indicator the same way', () => {
-    const theme = defineTheme({
-      name: 'selector-start-radio-mark-test',
-      indicators: {check: RadioIndicator},
-    });
-    render(
-      <Theme theme={theme}>
+  it.each(['start', 'end'] as const)(
+    'collapses an empty default mark at the logical %s edge',
+    indicatorPosition => {
+      render(
         <Selector
           label="Fruit"
           options={OPTIONS}
           value="Banana"
           onChange={() => {}}
-          indicatorPosition="start"
+          indicatorPosition={indicatorPosition}
           isDefaultOpen
-        />
-      </Theme>,
-    );
-    for (const row of openRows()) {
-      const radio = row.querySelector('.astryx-radio')!;
-      const content = row.querySelector('.astryx-selector-option')!;
-      expect(
-        content.compareDocumentPosition(radio) &
-          Node.DOCUMENT_POSITION_PRECEDING,
-      ).toBeTruthy();
-    }
-  });
+        />,
+      );
+
+      for (const row of openRows()) {
+        const isSelected = row.getAttribute('aria-selected') === 'true';
+        const markColumn =
+          indicatorPosition === 'start'
+            ? row.firstElementChild
+            : row.lastElementChild;
+        expect(markColumn).not.toBeNull();
+        expect(markColumn).toHaveStyle({
+          display: isSelected ? 'inline-flex' : 'none',
+        });
+      }
+    },
+  );
+
+  it.each(['start', 'end'] as const)(
+    'keeps a themed indicator in layout at the logical %s edge',
+    indicatorPosition => {
+      const theme = defineTheme({
+        name: `selector-${indicatorPosition}-radio-mark-test`,
+        indicators: {check: RadioIndicator},
+      });
+      render(
+        <Theme theme={theme}>
+          <Selector
+            label="Fruit"
+            options={OPTIONS}
+            value="Banana"
+            onChange={() => {}}
+            indicatorPosition={indicatorPosition}
+            isDefaultOpen
+          />
+        </Theme>,
+      );
+
+      for (const row of openRows()) {
+        const markColumn =
+          indicatorPosition === 'start'
+            ? row.firstElementChild
+            : row.lastElementChild;
+        const radio = row.querySelector('.astryx-radio');
+        const content = row.querySelector('.astryx-selector-option');
+        expect(markColumn).toHaveStyle({display: 'inline-flex'});
+        expect(radio).not.toBeNull();
+        expect(content).not.toBeNull();
+        expect(
+          content!.compareDocumentPosition(radio!) &
+            (indicatorPosition === 'start'
+              ? Node.DOCUMENT_POSITION_PRECEDING
+              : Node.DOCUMENT_POSITION_FOLLOWING),
+        ).toBeTruthy();
+      }
+    },
+  );
 });
 
 describe('Selector popup theme target', () => {