@astryxdesign/core 0.6.0 → 0.6.1

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

@@ -0,0 +1,121 @@
+---
+schema_version: 3
+template_version: 1
+kind: module
+id: module:ScrollableArea/useScrollableArea
+authority: current
+archive_reason: null
+superseded_by: null
+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]
+parent_component: component:ScrollableArea
+references: [architecture:public-component-api, spec:AST-025/DEC-1]
+---
+
+# useScrollableArea module contract
+
+## Intent
+
+useScrollableArea is the canonical reusable behavior core for components that
+already own a viewport and content root. It provides safe prop/ref composition,
+logical-axis measurement, live owner registration, edge state, keyboard access,
+and scroll chaining without inserting structure.
+
+## Compatibility and migration
+
+- Released default preserved: not yet released
+- Compatibility class: additive public hook and types
+- Migration decision: `spec:AST-025/DEC-1`
+
+## Ownership boundary
+
+**Owns**
+
+- Effective-axis measurement and stable logical-edge state.
+- Observation, invalidation, DOM owner registration, conditional viewport access,
+  and effective-axis chaining.
+- Safe composition of caller viewport/content props and refs.
+
+**Does not own / non-goals**
+
+- Viewport layout, paint, overflow declarations, scrollbar presentation, or
+  insertion of a content wrapper.
+- Sticky positioning and public owner lookup.
+
+## 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    |
+
+## 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                             |
+
+### Transformation and precedence order
+
+- **ORD1 — Effective state.** requested logical axis → computed physical axis →
+  scroll-capable overflow → geometry tolerance → normalized logical edge.
+- **ORD2 — Prop composition.** caller props and `xstyle` → behavior-owned
+  fitting/active overflow style → stable composed ref → behavior-owned keyboard,
+  state, and chaining outputs.
+
+### Performance and resources
+
+- **PR1 — Stable publication.** Equal effective/edge state reuses the prior object.
+- **PR2 — Shared observation.** Both element boxes use the shared ResizeObserver;
+  all secondary invalidation signals coalesce through one animation frame.
+
+## 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.
+
+## Design relationships
+
+No visual representation is owned by this hook.
+
+## Parent and system relationships
+
+- `component:ScrollableArea` owns the reference viewport/content composition.
+- `spec:AST-025` owns the shared behavior and adoption boundary.
+
+## 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 |
+
+## Decision log
+
+### DEC-1 — Prop getters are the public composition seam
+
+**Reference:** `module:ScrollableArea/useScrollableArea/DEC-1`
+**Decider:** cixzhang, 2026-09-11
+
+One returned prop object per owned element keeps refs, accessibility, handlers,
+and behavior together without making consumer spread order part of correctness.
+
+## Open questions
+
+None.
+
+## Content boundary
+
+This file does not duplicate consumer signatures/examples, ScrollableArea's
+structure/presentation, or Sticky's future API and positioning mechanism.

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -3,8 +3,11 @@
 /**
  * @file SegmentedControl.test.tsx
  * @input Uses vitest, @testing-library/react, SegmentedControl components
- * @output Unit tests for SegmentedControl and SegmentedControlItem
- * @position Testing; validates SegmentedControl component implementation
+ * @output Component-specific callback, composition, layout, optional-key, and
+ *   styling tests. Shared radio-group role, name, state, focus, and adopted
+ *   interactions live in RadioList/__tests__/RadioGroup.a11y.*.
+ * @position Component-owned regression tests that do not duplicate the reusable
+ *   radio-group contract.
  *
  * SYNC: When SegmentedControl components change, update tests to match new behavior
  */
@@ -47,41 +50,6 @@ beforeEach(() => {
 });
 
 describe('SegmentedControl', () => {
-  it('renders a radiogroup with radio buttons', () => {
-    render(
-      <SegmentedControl value="grid" onChange={() => {}} label="View mode">
-        <SegmentedControlItem value="grid" label="Grid" />
-        <SegmentedControlItem value="list" label="List" />
-      </SegmentedControl>,
-    );
-
-    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
-    expect(screen.getByRole('radiogroup')).toHaveAttribute(
-      'aria-label',
-      'View mode',
-    );
-    expect(screen.getByRole('radio', {name: 'Grid'})).toBeInTheDocument();
-    expect(screen.getByRole('radio', {name: 'List'})).toBeInTheDocument();
-  });
-
-  it('marks selected item with aria-checked', () => {
-    render(
-      <SegmentedControl value="grid" onChange={() => {}} label="View mode">
-        <SegmentedControlItem value="grid" label="Grid" />
-        <SegmentedControlItem value="list" label="List" />
-      </SegmentedControl>,
-    );
-
-    expect(screen.getByRole('radio', {name: 'Grid'})).toHaveAttribute(
-      'aria-checked',
-      'true',
-    );
-    expect(screen.getByRole('radio', {name: 'List'})).toHaveAttribute(
-      'aria-checked',
-      'false',
-    );
-  });
-
   it('calls onChange when an item is clicked', async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
@@ -230,49 +198,6 @@ describe('SegmentedControl', () => {
     expect(labelStyle.textOverflow).toBe('ellipsis');
   });
 
-  it('uses roving tabindex — selected item has tabIndex 0, others -1', () => {
-    render(
-      <SegmentedControl value="list" onChange={() => {}} label="View mode">
-        <SegmentedControlItem value="grid" label="Grid" />
-        <SegmentedControlItem value="list" label="List" />
-        <SegmentedControlItem value="table" label="Table" />
-      </SegmentedControl>,
-    );
-
-    expect(screen.getByRole('radio', {name: 'Grid'})).toHaveAttribute(
-      'tabIndex',
-      '-1',
-    );
-    expect(screen.getByRole('radio', {name: 'List'})).toHaveAttribute(
-      'tabIndex',
-      '0',
-    );
-    expect(screen.getByRole('radio', {name: 'Table'})).toHaveAttribute(
-      'tabIndex',
-      '-1',
-    );
-  });
-
-  it('keeps a tab stop when the value matches no item (tab-stop repair)', () => {
-    render(
-      <SegmentedControl
-        value="nonexistent"
-        onChange={() => {}}
-        label="View mode">
-        <SegmentedControlItem value="grid" label="Grid" />
-        <SegmentedControlItem value="list" label="List" />
-        <SegmentedControlItem value="table" label="Table" />
-      </SegmentedControl>,
-    );
-
-    // No item is selected, but the group must remain Tab-reachable: the first
-    // enabled radio is promoted to tabIndex=0.
-    expect(screen.getByRole('radio', {name: 'Grid'})).toHaveAttribute(
-      'tabIndex',
-      '0',
-    );
-  });
-
   it('promotes the first enabled item when the value matches no item and the first is disabled', () => {
     render(
       <SegmentedControl
@@ -360,7 +285,6 @@ describe('SegmentedControl keyboard navigation', () => {
     await user.keyboard('{ArrowRight}');
 
     expect(handleChange).toHaveBeenCalledWith('list');
-    expect(screen.getByRole('radio', {name: 'List'})).toHaveFocus();
   });
 
   it('navigates with ArrowLeft and selects', async () => {
@@ -379,7 +303,6 @@ describe('SegmentedControl keyboard navigation', () => {
     await user.keyboard('{ArrowLeft}');
 
     expect(handleChange).toHaveBeenCalledWith('grid');
-    expect(screen.getByRole('radio', {name: 'Grid'})).toHaveFocus();
   });
 
   it('wraps around from last to first with ArrowRight', async () => {
@@ -398,7 +321,6 @@ describe('SegmentedControl keyboard navigation', () => {
     await user.keyboard('{ArrowRight}');
 
     expect(handleChange).toHaveBeenCalledWith('grid');
-    expect(screen.getByRole('radio', {name: 'Grid'})).toHaveFocus();
   });
 
   it('wraps around from first to last with ArrowLeft', async () => {
@@ -417,7 +339,6 @@ describe('SegmentedControl keyboard navigation', () => {
     await user.keyboard('{ArrowLeft}');
 
     expect(handleChange).toHaveBeenCalledWith('table');
-    expect(screen.getByRole('radio', {name: 'Table'})).toHaveFocus();
   });
 
   it('Home key focuses first item', async () => {
@@ -460,59 +381,6 @@ describe('SegmentedControl keyboard navigation', () => {
 });
 
 describe('SegmentedControl disabled state', () => {
-  it('marks entire group as disabled', () => {
-    render(
-      <SegmentedControl
-        value="grid"
-        onChange={() => {}}
-        label="View mode"
-        isDisabled>
-        <SegmentedControlItem value="grid" label="Grid" />
-        <SegmentedControlItem value="list" label="List" />
-      </SegmentedControl>,
-    );
-
-    expect(screen.getByRole('radiogroup')).toHaveAttribute(
-      'aria-disabled',
-      'true',
-    );
-  });
-
-  it('removes the tab stop from the selected item when the group is disabled (navigation-13)', () => {
-    render(
-      <SegmentedControl
-        value="grid"
-        onChange={() => {}}
-        label="View mode"
-        isDisabled>
-        <SegmentedControlItem value="grid" label="Grid" />
-        <SegmentedControlItem value="list" label="List" />
-      </SegmentedControl>,
-    );
-    // Selected segment must not be a focusable-but-dead tab stop when disabled.
-    const selected = screen.getByRole('radio', {name: 'Grid'});
-    expect(selected).toHaveAttribute('tabIndex', '-1');
-    expect(selected).toHaveAttribute('aria-disabled', 'true');
-    // No enabled segment is tabbable either.
-    expect(screen.getByRole('radio', {name: 'List'})).toHaveAttribute(
-      'tabIndex',
-      '-1',
-    );
-  });
-
-  it('removes the tab stop from an individually disabled selected item', () => {
-    render(
-      <SegmentedControl value="grid" onChange={() => {}} label="View mode">
-        <SegmentedControlItem value="grid" label="Grid" isDisabled />
-        <SegmentedControlItem value="list" label="List" />
-      </SegmentedControl>,
-    );
-    expect(screen.getByRole('radio', {name: 'Grid'})).toHaveAttribute(
-      'tabIndex',
-      '-1',
-    );
-  });
-
   it('does not call onChange when group is disabled', async () => {
     const user = userEvent.setup({pointerEventsCheck: 0});
     const handleChange = vi.fn();
@@ -543,11 +411,6 @@ describe('SegmentedControl disabled state', () => {
       </SegmentedControl>,
     );
 
-    expect(screen.getByRole('radio', {name: 'List'})).toHaveAttribute(
-      'aria-disabled',
-      'true',
-    );
-
     await user.click(screen.getByRole('radio', {name: 'List'}));
     expect(handleChange).not.toHaveBeenCalled();
   });
@@ -634,20 +497,6 @@ describe('SegmentedControl disabled state', () => {
       expect(screen.queryByRole('tooltip', h)).not.toBeInTheDocument();
     });
 
-    it('keeps the selected segment focusable when a reason is provided', () => {
-      renderControl();
-      const selected = screen.getByRole('radio', {name: 'Grid', hidden: true});
-      expect(selected).toHaveAttribute('aria-disabled', 'true');
-      expect(selected).toHaveAttribute('tabindex', '0');
-    });
-
-    it('links the reason tooltip from the group via aria-describedby', () => {
-      renderControl();
-      const group = screen.getByRole('radiogroup');
-      const tooltip = screen.getByRole('tooltip', h);
-      expect(group.getAttribute('aria-describedby')).toContain(tooltip.id);
-    });
-
     it('blocks selection while focusable-disabled', () => {
       const onChange = vi.fn();
       renderControl({onChange});
@@ -655,22 +504,6 @@ describe('SegmentedControl disabled state', () => {
       fireEvent.click(list);
       expect(onChange).not.toHaveBeenCalled();
     });
-
-    it('drops all segments from the tab order when disabled without a reason', () => {
-      render(
-        <SegmentedControl
-          value="grid"
-          onChange={() => {}}
-          label="View mode"
-          isDisabled>
-          <SegmentedControlItem value="grid" label="Grid" />
-          <SegmentedControlItem value="list" label="List" />
-        </SegmentedControl>,
-      );
-      for (const radio of screen.getAllByRole('radio', h)) {
-        expect(radio).toHaveAttribute('tabindex', '-1');
-      }
-    });
   });
 });
 

package/src/Selector/Selector.test.tsx

@@ -3032,8 +3032,8 @@ describe('Selector clear icon theme target', () => {
     // The canonical target lands on the icon element itself (not the button),
     // so a theme can restyle just this glyph (color, size, hover) via
     // `defineTheme` — a button-level target could not reach the icon's own
-    // color/size. The original per-component name rides along for a
-    // deprecation window.
+    // color/size. The original per-component name remains as a compatibility
+    // alias.
     const icon = getClearIcon();
     expect(icon).toHaveClass('astryx-input-clear-icon');
     expect(icon).toHaveClass('astryx-selector-clear-icon');
@@ -3060,8 +3060,8 @@ describe('Selector clear icon theme target', () => {
   it('routes the clear glyph through the shared clear button, keeping the legacy target', () => {
     // The clear affordance now composes the shared InputClearButton (a ghost
     // Button with a secondary/sm glyph), so the icon carries the canonical
-    // `astryx-input-clear-icon` target and — for a deprecation window — the
-    // original `astryx-selector-clear-icon`. Aside from those target classes
+    // `astryx-input-clear-icon` target plus the supported compatibility alias
+    // `astryx-selector-clear-icon`. Aside from those target classes
     // it matches the shared button's own `close`/`sm`/`secondary` glyph
     // exactly, so the default look is defined in one place.
     render(

package/src/Spinner/Spinner.test.tsx

@@ -72,24 +72,6 @@ describe('Spinner', () => {
     expect(spinner).toHaveAttribute('data-shade', 'inherit');
   });
 
-  it('has role="status"', () => {
-    render(<Spinner data-testid="spinner" />);
-    expect(screen.getByRole('status')).toBeInTheDocument();
-  });
-
-  it('has aria-label="Loading" by default', () => {
-    render(<Spinner data-testid="spinner" />);
-    expect(screen.getByTestId('spinner')).toHaveAttribute(
-      'aria-label',
-      'Loading',
-    );
-  });
-
-  it('names the status element from the visible string label', () => {
-    render(<Spinner label="Fetching data" data-testid="spinner" />);
-    expect(screen.getByRole('status')).toHaveAccessibleName('Fetching data');
-  });
-
   it('does not duplicate a visible string label as aria-label', () => {
     render(<Spinner label="Fetching data" data-testid="spinner" />);
     const status = screen.getByRole('status');

package/src/StatusDot/StatusDot.doc.mjs

@@ -63,8 +63,8 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-status-dot', visualProps: ['variant']},
-      // Still emitted beside the names above, so themes written against
-      // them keep working. Drop in the next major.
+      // Retained beside the canonical names for backwards compatibility.
+      // New themes use the canonical targets above.
       {className: 'astryx-statusdot', visualProps: ['variant'], deprecatedFor: 'status-dot'},
     ],
   },
@@ -124,8 +124,8 @@ export const docsZh = {
   theming: {
     targets: [
       {className: 'astryx-status-dot', visualProps: ['variant']},
-      // Still emitted beside the names above, so themes written against
-      // them keep working. Drop in the next major.
+      // Retained beside the canonical names for backwards compatibility.
+      // New themes use the canonical targets above.
       {className: 'astryx-statusdot', visualProps: ['variant'], deprecatedFor: 'status-dot'},
     ],
   },

package/src/StatusDot/StatusDot.tsx

@@ -203,8 +203,8 @@ export function StatusDot({
         themeProps(
           'status-dot',
           {variant},
-          // `statusdot` ran the compound name together; themes styling it keep
-          // working until the next major.
+          // `statusdot` ran the compound name together; keep it emitted so
+          // existing themes continue to work.
           {legacyNames: ['statusdot']},
         ),
         stylex.props(

package/src/TabList/TabList.test.tsx

@@ -1316,7 +1316,7 @@ describe('TabList ARIA pattern — role="tablist"', () => {
     return vi.spyOn(console, 'warn').mockImplementation(() => {});
   }
 
-  it('speaks the tabs pattern: a labelled tablist of tabs with aria-selected', () => {
+  it('does not mix navigation semantics into explicit Tabs', () => {
     render(
       <TabList value="b" onChange={() => {}} role="tablist" aria-label="Views">
         <Tab value="a" label="Alpha" panelId="panel-a" />
@@ -1324,14 +1324,10 @@ describe('TabList ARIA pattern — role="tablist"', () => {
       </TabList>,
     );
 
-    const tablist = screen.getByRole('tablist', {name: 'Views'});
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs).toHaveLength(2);
-    expect(tabs.every(tab => tablist.contains(tab))).toBe(true);
-    expect(tabs[0]).toHaveAttribute('aria-selected', 'false');
-    expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
-    expect(tabs[1]).toHaveAttribute('aria-controls', 'panel-b');
-    expect(tabs[1]).not.toHaveAttribute('aria-current');
+    expect(screen.queryByRole('navigation')).toBeNull();
+    for (const tab of screen.getAllByRole('tab')) {
+      expect(tab).not.toHaveAttribute('aria-current');
+    }
   });
 
   it('lets the consumer name the tablist from another element', () => {

package/src/TabList/__tests__/Tabs.a11y.chromium.spec.ts

@@ -0,0 +1,191 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Tabs.a11y.chromium.spec.ts
+ * @input Uses the shared Tabs contract, Chromium harness, checked-in stories, inventory, and exact known failures
+ * @output Real-browser and accessibility-tree evidence for explicit TabList Tabs parts
+ * @position Browser lane required by AST-013; it makes no real-AT claim.
+ */
+
+import {
+  expect,
+  test,
+  type CDPSession,
+  type Locator,
+  type Page,
+} from '@playwright/test';
+import {
+  TABS_PATTERN,
+  blockingResults,
+  checkAccessibilitySpec,
+  formatFailures,
+  formatReport,
+  neverExercised,
+  summarize,
+  unmatchedKnownFailures,
+  type BindingResult,
+} from '@astryxdesign/a11y-spec';
+import {
+  createChromiumHarness,
+  holdMotionStill,
+} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+import {TABS_KNOWN_FAILURES} from './Tabs.a11y.known-failures';
+import {
+  TABS_BINDING_STATES,
+  type TabsBindingRow,
+  type TabsBindingState,
+} from './Tabs.a11y.states';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+function storyUrl(storyId: string): string {
+  return `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`;
+}
+
+function subjectFor(page: Page, state: TabsBindingRow): Locator {
+  const root = page.locator('#storybook-root');
+  if ('selector' in state.subject) {
+    return root.locator(state.subject.selector);
+  }
+  return root.getByRole(state.subject.role, {
+    name: state.subject.name,
+    includeHidden: true,
+  });
+}
+
+function relatedFor(
+  page: Page,
+  state: TabsBindingRow,
+): Readonly<Record<string, Locator>> {
+  const metadata = state as TabsBindingState;
+  const root = page.locator('#storybook-root');
+  return Object.fromEntries(
+    Object.entries(metadata.relations ?? {}).map(([name, relation]) => [
+      name,
+      root.locator(relation.selector),
+    ]),
+  );
+}
+
+async function mountState(page: Page, state: TabsBindingRow): Promise<void> {
+  await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
+  await holdMotionStill(page);
+  await subjectFor(page, state).waitFor({state: 'attached'});
+}
+
+async function runState(
+  page: Page,
+  cdp: CDPSession,
+  state: TabsBindingRow,
+): Promise<BindingResult> {
+  return checkAccessibilitySpec({
+    spec: TABS_PATTERN,
+    binding: state.binding,
+    state: state.id,
+    facts: state.facts,
+    knownFailures: TABS_KNOWN_FAILURES,
+    mount: async () => {
+      await mountState(page, state);
+      return createChromiumHarness({
+        page,
+        subject: subjectFor(page, state),
+        cdp,
+        visibleLabel: state.facts.visibleLabel ? undefined : null,
+        related: relatedFor(page, state),
+      });
+    },
+  });
+}
+
+test('every binding fact matches the rendered semantic state', async ({
+  page,
+}) => {
+  test.setTimeout(3 * 60 * 1000);
+  const cdp = await page.context().newCDPSession(page);
+  const wrong: string[] = [];
+
+  for (const state of TABS_BINDING_STATES) {
+    await mountState(page, state);
+    const subject = await createChromiumHarness({
+      page,
+      subject: subjectFor(page, state),
+      cdp,
+      related: relatedFor(page, state),
+    }).subject();
+    const computed = await subject.computed();
+
+    const expectedRole =
+      state.facts.part === 'tablist'
+        ? 'tablist'
+        : state.facts.part === 'tab'
+          ? 'tab'
+          : state.facts.active === false
+            ? null
+            : 'tabpanel';
+    if (computed.role !== expectedRole) {
+      wrong.push(
+        `${state.id}: declares role=${expectedRole}, browser exposes ${computed.role}`,
+      );
+    }
+    if (
+      state.facts.selected != null &&
+      computed.selected !== state.facts.selected
+    ) {
+      wrong.push(
+        `${state.id}: declares selected=${state.facts.selected}, browser exposes ${computed.selected}`,
+      );
+    }
+    if (
+      state.facts.disabled != null &&
+      computed.disabled !== state.facts.disabled
+    ) {
+      wrong.push(
+        `${state.id}: declares disabled=${state.facts.disabled}, browser exposes ${computed.disabled}`,
+      );
+    }
+  }
+
+  expect(wrong).toEqual([]);
+});
+
+test('every expectation is exercised by at least one bound state', async ({
+  page,
+}) => {
+  test.setTimeout(5 * 60 * 1000);
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of TABS_BINDING_STATES) {
+    results.push(await runState(page, cdp, state));
+  }
+  expect(neverExercised(results)).toEqual([]);
+  expect(unmatchedKnownFailures(TABS_KNOWN_FAILURES, results)).toEqual([]);
+});
+
+for (const state of TABS_BINDING_STATES) {
+  test(`${state.binding} [${state.id}] — ${state.summary}`, async ({page}) => {
+    test.setTimeout(3 * 60 * 1000);
+    const cdp = await page.context().newCDPSession(page);
+    const result = await runState(page, cdp, state);
+    const report = summarize(TABS_PATTERN, [result]);
+    // eslint-disable-next-line no-console -- the report is this run's artifact
+    console.log(formatReport(report));
+    expect(formatFailures(blockingResults([result]))).toBe('');
+    expect(report.unrunLayers).toEqual([]);
+    expect(report.counts.unexpectedPass).toBe(0);
+  });
+}