@astryxdesign/core 0.7.3-canary.fba04ed → 0.7.3

package/src/DropdownMenu/DropdownMenuRadioGroup.spec.md

@@ -0,0 +1,190 @@
+---
+schema_version: 3
+template_version: 7
+kind: component
+id: component:DropdownMenuRadioGroup
+authority: draft
+archive_reason: null
+superseded_by: null
+approved_by: null
+approved_at: null
+owners: [cixzhang]
+review_triggers: [public-api, behavior, accessibility, theming, testing]
+verified_by:
+  [
+    packages/core/src/DropdownMenu/DropdownMenuSelectable.test.tsx,
+    packages/core/src/DropdownMenu/DropdownMenu.test.tsx,
+    packages/core/src/DropdownMenu/__tests__/Menu.a11y.test.tsx,
+    apps/storybook/stories/DropdownMenuRadioGroup.stories.tsx,
+    apps/storybook/rtl-audit/verified-not-applicable.json,
+    scripts/check-knowledge.mjs,
+  ]
+modules: []
+families: []
+design_specs: []
+architecture:
+  [
+    architecture:public-component-api,
+    architecture:component-test-sufficiency,
+    architecture:interaction-modality,
+  ]
+contributing: []
+system_specs: [spec:AST-020, spec:AST-029]
+---
+
+# DropdownMenuRadioGroup component contract
+
+## Contract at a glance
+
+| Area                    | Contract                                                                                                                                                                                          |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Public contract         | One controlled, named single-selection group of `DropdownMenuRadioItem` children with value, change callback, close policy, root inputs, and an explicit React 19 ref.                            |
+| Behavior                | The group supplies selection and close-policy context; radio items emit values; the parent DropdownMenu owns keyboard navigation and menu lifecycle.                                              |
+| End-user impact         | Assistive technology encounters one named group with exactly one current choice when a value matches, while pointer and keyboard selection stay aligned.                                          |
+| Builder impact          | Keep the value controlled, provide a stable accessible label, and place only DropdownMenuRadioItem options inside the group.                                                                      |
+| Compatibility/readiness | Patch-compatible additive `ref` prop on the existing group root. Existing runtime behavior, exports, defaults, and theme surfaces remain unchanged; authority stays `draft` until owner approval. |
+| Review checks           | Reject unnamed groups, local selection state, dropped root inputs, a second keyboard owner, or a close policy that bypasses the controlled callback.                                              |
+| Governing rules         | WAI-ARIA menu pattern; `architecture:public-component-api/INV5–INV9`; `architecture:component-test-sufficiency/INV1–INV7`; `spec:AST-020/FR1,FR2,FR6`.                                            |
+
+This table is a review projection; the body below is authoritative.
+
+## Intent
+
+DropdownMenuRadioGroup renders one named `role="group"` wrapper inside the
+pointer presentation of DropdownMenu. It owns controlled selection context,
+close policy, root composition, and the tokenized gap between children.
+DropdownMenuRadioItem owns each `menuitemradio` row and its checked state;
+DropdownMenu owns focus movement, typeahead, keyboard activation, presentation,
+and menu open/close lifecycle.
+
+## Compatibility and migration
+
+- Released default preserved: yes (`hasCloseOnSelect=true`).
+- Compatibility class: additive patch; declares and forwards the React 19 `ref`
+  prop to the existing group root without changing existing behavior.
+- Controlled behavior: `value` is caller-owned and `onChange` is the only commit path.
+- Migration decision: none.
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- One `role="group"` root with an `aria-label` from the required `label` prop.
+- Controlled `value`, `onChange`, and `hasCloseOnSelect` context for radio items.
+- Composition of `children`, supported host inputs, ref, `className`, `style`, and
+  `xstyle` on the group root.
+- Column layout and the semantic menu inter-item gap.
+
+**Does not own / non-goals**
+
+- The `menuitemradio` role, `aria-checked`, disabled behavior, indicator paint,
+  label, description, icon, or end content — owned by DropdownMenuRadioItem.
+- Focus entry, arrow-key navigation, typeahead, Enter/Space synthesis, and menu
+  close implementation — owned by DropdownMenu and shared menu hooks.
+- Touch and bottom-sheet selectable-row rendering — owned by the parent presentation.
+- Uncontrolled selection state or child-value registration.
+
+## Public concepts
+
+| Concept         | Closed values or states                       | Meaning                                                              | Default  | Owner                    | Stability | Invalid-value behavior                                |
+| --------------- | --------------------------------------------- | -------------------------------------------------------------------- | -------- | ------------------------ | --------- | ----------------------------------------------------- |
+| Selection       | matching value; no matching value             | Controls which child reports checked.                                | none     | caller and radio item    | stable    | No match leaves every child unchecked.                |
+| Commit          | child value                                   | Emits the selected child value through `onChange`.                   | required | group context            | stable    | Children outside the group throw from the item owner. |
+| Close policy    | close; remain open                            | Controls whether an item asks DropdownMenu to close after selection. | close    | group context and parent | stable    | Omission closes.                                      |
+| Accessible name | required label; optional labelledby           | Names the group; `aria-labelledby` may point at visible text.        | label    | group root               | stable    | `label` remains required by the public type.          |
+| Root surface    | ref; DOM/data/ARIA; class/style/xstyle/events | Extends the group root while preserving its role and name.           | omitted  | public component API     | stable    | Accepted inputs compose; owned role and label win.    |
+
+## Behavioral and layout contract
+
+Draft requirements identify their basis so observed code is not mistaken for an
+intentional decision.
+
+| ID  | Candidate invariant                                                                                                                                                          | Basis                                                       | Draft review state |
+| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------ |
+| FR1 | The root MUST expose `role="group"` and a non-empty accessible name. The required `label` supplies `aria-label`; caller `aria-labelledby` MAY reference visible text.        | WAI-ARIA menu pattern; released source/docs                 | verify             |
+| FR2 | The group MUST remain controlled. It MUST compare each radio item's value with caller `value` and MUST emit a selected child value only through caller `onChange`.           | Released public API and focused tests                       | verify             |
+| FR3 | `hasCloseOnSelect` MUST default to true. When false, successful selection MUST update through `onChange` while the parent menu remains open.                                 | Released behavior and focused tests                         | verify             |
+| FR4 | DropdownMenu MUST remain the only keyboard owner. The group adds no tab stop, key handler, typeahead, or click synthesis; it only provides context to child rows.            | `architecture:interaction-modality`; parent tests           | verify             |
+| FR5 | Ref, supported host attributes and handlers, `className`, `style`, and `xstyle` MUST reach or compose on the group root without replacing the owned role or `aria-label`.    | `architecture:public-component-api/INV5–INV9`; source/tests | verify             |
+| FR6 | The wrapper MUST remain a logical column whose tokenized gap matches the surrounding menu's item rhythm; it MUST NOT add component-specific directional paint or navigation. | Current source; token and bidirectionality rules            | verify             |
+
+### Allowed variation
+
+- **AV1 — Children.** The number, labels, descriptions, icons, and supporting
+  content of DropdownMenuRadioItem children may vary.
+- **AV2 — Selection.** Any string value, including no matching value, may be
+  caller-controlled without adding local group state.
+- **AV3 — Root styling.** Caller style inputs may extend the wrapper while the
+  role, accessible label, column flow, and child semantics remain intact.
+
+### Representative states
+
+| State             | Required invariant                                                         | Allowed variation                    |
+| ----------------- | -------------------------------------------------------------------------- | ------------------------------------ |
+| Matching value    | Exactly the matching child reports `aria-checked=true`.                    | Child content and menu size.         |
+| No matching value | Every child reports `aria-checked=false`.                                  | Empty or unmatched caller value.     |
+| Default close     | Selection emits the value and closes through the parent.                   | Pointer or synthesized keyboard act. |
+| Retained open     | Selection emits the value, updates controlled state, and leaves menu open. | Result copy and selected child.      |
+| RTL / narrow      | Column order and tokenized gap hold with no horizontal overflow.           | Parent menu placement.               |
+
+### Transformation and precedence order
+
+- **ORD1 — Selection.** Child activation → disabled guard in the item owner →
+  group `onChange(value)` → optional parent close.
+- **ORD2 — Root composition.** Base column/gap → caller `xstyle`; supported host
+  inputs and class/style compose while owned role and label remain fixed.
+
+### Performance and resources
+
+- **PR1 — Context only.** The group memoizes a small context value and owns no
+  Effect, listener, observer, timer, request, DOM read, or resource lifecycle.
+
+## Accessibility contract
+
+- **AR1 — Named group.** The wrapper is one named `group` inside the parent menu.
+- **AR2 — Radio rows.** Child items own `menuitemradio` and `aria-checked`; the
+  group does not add nested native inputs or duplicate row semantics.
+- **AR3 — Keyboard ownership.** DropdownMenu owns focus collection and activation;
+  the group itself never enters the tab or arrow-key sequence.
+
+## Design relationships
+
+| Anatomy or state | Design requirement                                               | Representation authority           | Hierarchy role | Component contract |
+| ---------------- | ---------------------------------------------------------------- | ---------------------------------- | -------------- | ------------------ |
+| Group wrapper    | Logical column with the menu's semantic inter-item gap.          | Current source and spacing tokens  | structural     | FR1, FR5, FR6      |
+| Selected child   | One child reflects caller value through `aria-checked`.          | DropdownMenuRadioItem              | prominent      | FR2, AR2           |
+| Direction/narrow | Child order and gap hold without physical-direction assumptions. | Bidirectionality and parent layout | structural     | FR6                |
+
+No new component-local visual decision is settled by this draft.
+
+## Family and system relationships
+
+- `architecture:public-component-api` owns root input composition and released compatibility.
+- `architecture:component-test-sufficiency` owns proportionate observable evidence.
+- `architecture:interaction-modality` and DropdownMenu own keyboard behavior.
+- `spec:AST-020` supplies WCAG/APG adoption and evidence-layer boundaries.
+- `spec:AST-029` keeps this observational draft separate from the audit receipt.
+
+## Verification map
+
+| Contract       | Verification                                                                   | Representative states                | Mutation or failure expectation                                                           | Audit section                               |
+| -------------- | ------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------------------------------------------------------------------- | ------------------------------------------- |
+| FR1–FR4, AR1–3 | `DropdownMenuSelectable.test.tsx`; reusable Menu contracts; scoped axe         | matching, none, close, retained-open | An unnamed group, wrong checked row, skipped callback, unwanted close, or key owner fails | `audit:DropdownMenuRadioGroup/§1,§4,§6`     |
+| FR5            | root/ref/handler tests; lint and typecheck                                     | ref, host attributes, class/style    | An accepted input is dropped or overrides the owned role/name                             | `audit:DropdownMenuRadioGroup/§3`           |
+| FR6            | source-hashed RTL N/A receipt plus exact-head Neutral/Butter/RTL/narrow frames | LTR, RTL, 320px, light/dark          | Physical direction, lost tokenized gap, collapsed geometry, or horizontal overflow fails  | `audit:DropdownMenuRadioGroup/§2,§5,§9,§10` |
+
+## Decision log
+
+None. This draft records current facts and introduces no product decision.
+
+## Open questions
+
+None.
+
+## Content boundary
+
+This file does not duplicate consumer prop tables/examples, current audit scores,
+screenshot matrices, implementation steps, or parent/item contracts. The audit
+pull request owns the closed run evidence required by `spec:AST-029/FR5`.

package/src/DropdownMenu/DropdownMenuRadioGroup.tsx

@@ -14,7 +14,7 @@
  * menuitemradio rows.
  */
 
-import {useMemo, type ReactNode} from 'react';
+import {useMemo, type ReactNode, type Ref} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
@@ -51,9 +51,9 @@ export interface DropdownMenuRadioGroupProps extends Omit<
   /**
    * Accessible name for the group, announced by screen readers so the radios
    * read as a named set (e.g. "Sort by"). Applied as the group's `aria-label`.
-   * Required -- an unnamed radio group is an accessibility defect. Pass
-   * `aria-labelledby` (via base props) instead if the name already exists as a
-   * visible element on the page.
+   * Required even when `aria-labelledby` (via base props) points to visible
+   * text; that visible reference becomes the computed name while `label`
+   * remains the fallback.
    */
   label: string;
   /**
@@ -63,6 +63,10 @@ export interface DropdownMenuRadioGroupProps extends Omit<
    * @default true
    */
   hasCloseOnSelect?: boolean;
+  /**
+   * Ref forwarded to the role="group" root.
+   */
+  ref?: Ref<HTMLDivElement>;
   /**
    * The `DropdownMenuRadioItem`s that make up the group.
    */
@@ -92,6 +96,7 @@ export function DropdownMenuRadioGroup({
   label,
   hasCloseOnSelect = true,
   children,
+  ref,
   xstyle,
   className,
   style,
@@ -105,6 +110,7 @@ export function DropdownMenuRadioGroup({
   return (
     <div
       {...rest}
+      ref={ref}
       role="group"
       aria-label={label}
       {...mergeProps(stylex.props(styles.group, xstyle), {className, style})}>

package/src/DropdownMenu/DropdownMenuSelectable.test.tsx

@@ -9,6 +9,7 @@
  *   outcomes live in their reusable contracts; Menu retains navigation.
  */
 
+import {useState} from 'react';
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -328,6 +329,98 @@ describe('DropdownMenuRadioGroup / RadioItem', () => {
       screen.getByRole('menuitemradio', {name: 'Oldest', hidden: true}),
     );
     expect(onChange).toHaveBeenCalledWith('oldest');
+    expect(
+      screen.getByRole('menuitemradio', {name: 'Newest', hidden: true}),
+    ).toHaveAttribute('aria-checked', 'true');
+    expect(
+      screen.getByRole('menuitemradio', {name: 'Oldest', hidden: true}),
+    ).toHaveAttribute('aria-checked', 'false');
+    expect(HTMLElement.prototype.hidePopover).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps the menu open while controlled selection updates when requested', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    function ControlledGroup() {
+      const [value, setValue] = useState('newest');
+      return (
+        <DropdownMenu button={{label: 'Sort'}}>
+          <DropdownMenuRadioGroup
+            value={value}
+            onChange={nextValue => {
+              onChange(nextValue);
+              setValue(nextValue);
+            }}
+            label="Sort by"
+            hasCloseOnSelect={false}>
+            <DropdownMenuRadioItem value="newest" label="Newest" />
+            <DropdownMenuRadioItem value="oldest" label="Oldest" />
+          </DropdownMenuRadioGroup>
+        </DropdownMenu>
+      );
+    }
+
+    render(<ControlledGroup />);
+    await user.click(screen.getByRole('button', {name: /Sort/}));
+    const oldest = screen.getByRole('menuitemradio', {
+      name: 'Oldest',
+      hidden: true,
+    });
+    await user.click(oldest);
+
+    expect(onChange).toHaveBeenCalledWith('oldest');
+    expect(oldest).toHaveAttribute('aria-checked', 'true');
+    expect(HTMLElement.prototype.hidePopover).not.toHaveBeenCalled();
+  });
+
+  it('names and composes the group root when no value matches', async () => {
+    const user = userEvent.setup();
+    const ref = vi.fn();
+    const onClick = vi.fn();
+    render(
+      <>
+        <span id="sort-label">Visible sort label</span>
+        <DropdownMenu button={{label: 'Sort'}}>
+          <DropdownMenuRadioGroup
+            ref={ref}
+            role="tree"
+            aria-label="Consumer label"
+            aria-labelledby="sort-label"
+            data-owner="consumer"
+            className="consumer-group"
+            style={{inlineSize: 240}}
+            onClick={onClick}
+            value={undefined}
+            onChange={() => {}}
+            label="Sort fallback">
+            <DropdownMenuRadioItem value="newest" label="Newest" />
+            <DropdownMenuRadioItem value="oldest" label="Oldest" />
+          </DropdownMenuRadioGroup>
+        </DropdownMenu>
+      </>,
+    );
+    await user.click(screen.getByRole('button', {name: /Sort/}));
+
+    const group = screen.getByRole('group', {
+      name: 'Visible sort label',
+      hidden: true,
+    });
+    expect(group).toHaveAttribute('role', 'group');
+    expect(group).toHaveAttribute('aria-label', 'Sort fallback');
+    expect(group).toHaveAttribute('aria-labelledby', 'sort-label');
+    expect(group).toHaveAttribute('data-owner', 'consumer');
+    expect(group).toHaveClass('consumer-group');
+    expect(group).toHaveStyle({inlineSize: '240px'});
+    expect(ref).toHaveBeenCalledWith(group);
+    expect(
+      screen
+        .getAllByRole('menuitemradio', {hidden: true})
+        .every(item => item.getAttribute('aria-checked') === 'false'),
+    ).toBe(true);
+
+    fireEvent.click(group);
+    expect(onClick).toHaveBeenCalledTimes(1);
   });
 
   it('throws when a radio item is used outside a group', () => {

package/src/DropdownMenu/__tests__/DropdownMenuRadioGroupAudit.a11y.chromium.spec.ts

@@ -0,0 +1,327 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DropdownMenuRadioGroupAudit.a11y.chromium.spec.ts
+ * @input Exact-head DropdownMenuRadioGroup story across themes, modes, direction, and viewport widths
+ * @output Screenshots and fail-closed sensor receipts for the DropdownMenuRadioGroup component audit
+ * @position Component-owned Night Watch browser evidence; CI runs it only for a DropdownMenuRadioGroup audit pull request
+ */
+
+import {createHash} from 'node:crypto';
+import {execFileSync} from 'node:child_process';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import {expect, test, type Page} from '@playwright/test';
+import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+const OUTPUT = path.resolve('dropdown-menu-radio-group-audit-evidence');
+const STORY_ID = 'core-dropdownmenuradiogroup--controlled-selection';
+const WIDE = {width: 1024, height: 768};
+const NARROW = {width: 320, height: 720};
+
+type Mode = 'light' | 'dark';
+type Direction = 'ltr' | 'rtl';
+type Theme = 'neutral' | 'butter';
+type AuditCase = {
+  key: string;
+  mode: Mode;
+  direction: Direction;
+  theme: Theme;
+  viewport: {width: number; height: number};
+};
+
+const cases: AuditCase[] = [
+  {
+    key: 'neutral-light',
+    mode: 'light',
+    direction: 'ltr',
+    theme: 'neutral',
+    viewport: WIDE,
+  },
+  {
+    key: 'neutral-dark',
+    mode: 'dark',
+    direction: 'ltr',
+    theme: 'neutral',
+    viewport: WIDE,
+  },
+  {
+    key: 'butter-light',
+    mode: 'light',
+    direction: 'ltr',
+    theme: 'butter',
+    viewport: WIDE,
+  },
+  {
+    key: 'butter-dark',
+    mode: 'dark',
+    direction: 'ltr',
+    theme: 'butter',
+    viewport: WIDE,
+  },
+  {
+    key: 'rtl-light',
+    mode: 'light',
+    direction: 'rtl',
+    theme: 'neutral',
+    viewport: WIDE,
+  },
+  {
+    key: 'rtl-dark',
+    mode: 'dark',
+    direction: 'rtl',
+    theme: 'neutral',
+    viewport: WIDE,
+  },
+  {
+    key: 'narrow-light',
+    mode: 'light',
+    direction: 'ltr',
+    theme: 'neutral',
+    viewport: NARROW,
+  },
+  {
+    key: 'narrow-dark',
+    mode: 'dark',
+    direction: 'ltr',
+    theme: 'neutral',
+    viewport: NARROW,
+  },
+];
+
+test.describe.configure({mode: 'serial', retries: 0});
+let server: StaticServer;
+let checkoutSha: string;
+let storybookSha: string;
+
+function storyUrl(item: AuditCase) {
+  return `${server.origin}/iframe.html?id=${STORY_ID}&viewMode=story&globals=colorMode:${item.mode};astryxTheme:${item.theme};direction:${item.direction}`;
+}
+
+async function settle(page: Page) {
+  await holdMotionStill(page);
+  await page.evaluate(async () => document.fonts.ready);
+  await page.waitForTimeout(40);
+}
+
+test.beforeAll(async () => {
+  fs.rmSync(OUTPUT, {recursive: true, force: true});
+  fs.mkdirSync(OUTPUT, {recursive: true});
+  checkoutSha = execFileSync('git', ['rev-parse', 'HEAD'], {
+    encoding: 'utf8',
+  }).trim();
+  const expected = process.env.ASTRYX_HEAD_SHA;
+  if (expected && expected !== checkoutSha) {
+    throw new Error(
+      `checkout ${checkoutSha} does not match expected head ${expected}`,
+    );
+  }
+  server = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+  const response = await fetch(`${server.origin}/astryx-build-sha.txt`);
+  if (!response.ok) {
+    throw new Error(`Storybook build has no SHA stamp (${response.status})`);
+  }
+  storybookSha = (await response.text()).trim();
+  if (storybookSha !== checkoutSha) {
+    throw new Error(
+      `Storybook ${storybookSha} does not match checkout ${checkoutSha}`,
+    );
+  }
+});
+
+test.afterAll(async () => {
+  await server?.close();
+});
+
+for (const item of cases) {
+  test(item.key, async ({browser}) => {
+    const context = await browser.newContext({
+      viewport: item.viewport,
+      colorScheme: item.mode,
+      reducedMotion: 'reduce',
+    });
+    const page = await context.newPage();
+    const pageErrors: string[] = [];
+    page.on('pageerror', error => pageErrors.push(String(error)));
+    await page.goto(storyUrl(item), {waitUntil: 'load'});
+    await page.locator('#storybook-root').waitFor();
+
+    const fixture = page.getByTestId('dropdown-menu-radio-group-audit');
+    const menu = page.getByRole('menu').last();
+    const group = menu.getByRole('group', {name: 'Sort options'});
+    await expect(group).toBeVisible();
+    const radios = group.getByRole('menuitemradio');
+    await expect(radios).toHaveCount(3);
+    await expect(fixture).toHaveAttribute('data-close-request-count', '0');
+    await expect(radios.first()).toHaveAttribute('aria-checked', 'true');
+    await radios.nth(1).click();
+    await expect(radios.nth(1)).toHaveAttribute('aria-checked', 'true');
+    await expect(fixture).toHaveAttribute('data-close-request-count', '0');
+    await expect(menu).toBeVisible();
+    await settle(page);
+
+    const observed = await group.evaluate(element => {
+      const currentRadios = Array.from(
+        element.querySelectorAll<HTMLElement>('[role="menuitemradio"]'),
+      );
+      const groupStyle = getComputedStyle(element);
+      const groupBox = element.getBoundingClientRect();
+      const currentMenu = element.closest<HTMLElement>('[role="menu"]');
+      const rows = currentRadios.map(row => {
+        const box = row.getBoundingClientRect();
+        const style = getComputedStyle(row);
+        const indicator = row.querySelector<HTMLElement>(
+          '.astryx-dropdown-menu-radio',
+        );
+        const indicatorBox = indicator?.getBoundingClientRect() ?? null;
+        return {
+          role: row.getAttribute('role'),
+          checked: row.getAttribute('aria-checked'),
+          text: row.textContent?.replace(/\s+/g, ' ').trim() ?? null,
+          color: style.color,
+          geometry: {x: box.x, y: box.y, width: box.width, height: box.height},
+          indicator:
+            indicatorBox === null
+              ? null
+              : {width: indicatorBox.width, height: indicatorBox.height},
+        };
+      });
+      return {
+        theme: document
+          .querySelector('[data-astryx-theme]')
+          ?.getAttribute('data-astryx-theme'),
+        mode: document.documentElement.getAttribute('data-theme'),
+        direction: groupStyle.direction,
+        viewport: {width: innerWidth, height: innerHeight},
+        reducedMotion: matchMedia('(prefers-reduced-motion: reduce)').matches,
+        closeRequestCount:
+          element
+            .closest('[data-close-request-count]')
+            ?.getAttribute('data-close-request-count') ?? null,
+        horizontalOverflow:
+          document.documentElement.scrollWidth > innerWidth + 1,
+        fonts: document.fonts.status,
+        group: {
+          role: element.getAttribute('role'),
+          ariaLabel: element.getAttribute('aria-label'),
+          display: groupStyle.display,
+          flexDirection: groupStyle.flexDirection,
+          rowGap: groupStyle.rowGap,
+          menuRowGap:
+            currentMenu === null ? null : getComputedStyle(currentMenu).rowGap,
+          geometry: {
+            x: groupBox.x,
+            y: groupBox.y,
+            width: groupBox.width,
+            height: groupBox.height,
+          },
+        },
+        rows,
+      };
+    });
+
+    const semanticsPass =
+      observed.group.role === 'group' &&
+      observed.group.ariaLabel === 'Sort options' &&
+      observed.rows.length === 3 &&
+      observed.rows.every(row => row.role === 'menuitemradio') &&
+      observed.rows.filter(row => row.checked === 'true').length === 1 &&
+      observed.rows[1]?.checked === 'true' &&
+      observed.rows[1]?.text?.includes('Oldest first') === true &&
+      observed.closeRequestCount === '0';
+    const layoutPass =
+      observed.group.display === 'flex' &&
+      observed.group.flexDirection === 'column' &&
+      observed.group.menuRowGap !== null &&
+      observed.group.rowGap === observed.group.menuRowGap &&
+      Number.parseFloat(observed.group.rowGap) > 0 &&
+      observed.group.geometry.width > 0 &&
+      observed.group.geometry.height > 0 &&
+      observed.rows.every(
+        row => row.geometry.width > 0 && row.geometry.height > 0,
+      ) &&
+      (observed.rows[1]?.geometry.y ?? 0) >
+        (observed.rows[0]?.geometry.y ?? Number.POSITIVE_INFINITY);
+    const paintPass = observed.rows.every(
+      row =>
+        row.color !== 'rgba(0, 0, 0, 0)' &&
+        row.indicator !== null &&
+        row.indicator.width > 0 &&
+        row.indicator.height > 0,
+    );
+
+    const png = await page.screenshot({animations: 'disabled', fullPage: true});
+    const image = `${item.key}.png`;
+    const receipt = {
+      schemaVersion: 1,
+      expected: {
+        build: checkoutSha,
+        storyId: STORY_ID,
+        mode: item.mode,
+        direction: item.direction,
+        theme: item.theme,
+        viewport: item.viewport,
+      },
+      observed: {build: storybookSha, ...observed, pageErrors},
+      image: {
+        file: image,
+        sha256: createHash('sha256').update(png).digest('hex'),
+        width: png.readUInt32BE(16),
+        height: png.readUInt32BE(20),
+      },
+      checks: {semanticsPass, layoutPass, paintPass},
+      passed:
+        storybookSha === checkoutSha &&
+        pageErrors.length === 0 &&
+        observed.theme === item.theme &&
+        observed.mode === item.mode &&
+        observed.direction === item.direction &&
+        observed.viewport.width === item.viewport.width &&
+        observed.viewport.height === item.viewport.height &&
+        observed.reducedMotion &&
+        !observed.horizontalOverflow &&
+        observed.fonts === 'loaded' &&
+        semanticsPass &&
+        layoutPass &&
+        paintPass,
+    };
+    fs.writeFileSync(path.join(OUTPUT, image), png);
+    fs.writeFileSync(
+      path.join(OUTPUT, `${item.key}.sensors.json`),
+      `${JSON.stringify(receipt, null, 2)}\n`,
+    );
+    expect(receipt.passed).toBe(true);
+    await context.close();
+  });
+}
+
+test('manifest is complete', () => {
+  const receipts = fs
+    .readdirSync(OUTPUT)
+    .filter(file => file.endsWith('.sensors.json'));
+  fs.writeFileSync(
+    path.join(OUTPUT, 'manifest.json'),
+    `${JSON.stringify(
+      {
+        schemaVersion: 1,
+        component: 'core/DropdownMenuRadioGroup',
+        build: checkoutSha,
+        frames: cases.map(item => ({
+          key: item.key,
+          image: `${item.key}.png`,
+          receipt: `${item.key}.sensors.json`,
+        })),
+      },
+      null,
+      2,
+    )}\n`,
+  );
+  expect(receipts).toHaveLength(cases.length);
+});