@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/MobileNav/MobileNavToggle.tsx

@@ -4,13 +4,17 @@
 
 /**
  * @file MobileNavToggle.tsx
- * @input Uses React, Button, Icon, AppShell mobile context
+ * @input Uses React, Button, Icon, AppShell mobile context; forwards host props
+ *   to the Button
  * @output Exports MobileNavToggle component
  * @position Standalone toggle button; can be placed anywhere in the AppShell tree.
  *
  * Hamburger button that opens/closes the mobile nav drawer.
  * Reads from AppShell mobile context — renders nothing above the mobile breakpoint.
  * Can be placed anywhere in the component tree (TopNav, content area, custom toolbar, etc.).
+ * Host attributes and DOM handlers reach the button; its `aria-expanded` and
+ * `aria-controls` stay component-owned, and a caller `onClick` runs after the
+ * toggle.
  */
 
 import React, {type ReactNode} from 'react';
@@ -19,10 +23,11 @@ import {Icon} from '../Icon';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import type {BaseProps} from '../BaseProps';
 import {useTranslator} from '../i18n';
+import {composeEventHandlers} from '../utils';
 
-export interface MobileNavToggleProps extends Pick<
-  BaseProps,
-  'xstyle' | 'className' | 'style'
+export interface MobileNavToggleProps extends Omit<
+  BaseProps<HTMLButtonElement>,
+  'aria-expanded' | 'aria-controls'
 > {
   ref?: React.Ref<HTMLButtonElement>;
   /**
@@ -66,6 +71,8 @@ export function MobileNavToggle({
   xstyle,
   className,
   style,
+  onClick,
+  ...rest
 }: MobileNavToggleProps) {
   const t = useTranslator();
   const label = labelFromProps ?? t('@astryx.mobileNav.toggle.open');
@@ -84,11 +91,12 @@ export function MobileNavToggle({
 
   return (
     <Button
+      {...rest}
       ref={ref}
       variant="ghost"
       label={label}
       icon={children ?? <Icon icon="menu" color="inherit" />}
-      onClick={toggleMobileNav}
+      onClick={composeEventHandlers(toggleMobileNav, onClick)}
       aria-expanded={isMobileNavOpen}
       aria-controls={mobileNavId || undefined}
       data-testid={testId ?? 'mobile-nav-toggle'}

package/src/MobileNav/__tests__/MobileNavWidth.a11y.chromium.spec.ts

@@ -0,0 +1,103 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y always
+
+/**
+ * @file MobileNavWidth.a11y.chromium.spec.ts
+ * @input Built MobileNav stories and real Chromium touch input in phone
+ *   contexts
+ * @output Browser evidence that the drawer is never wider than 85% of the
+ *   viewport: on a 320 px phone it leaves a 48 px strip of the page, and a
+ *   tap on the strip closes it; on a 402 px phone it keeps its 320 px width
+ * @position Chromium proof for MobileNav's width cap (`dynamicStyles.width`
+ *   in MobileNav.tsx); the jsdom layer is MobileNav.test.tsx
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+/** Opens the default story's drawer with a tap and waits for the slide-in. */
+async function openNav(page: Page) {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-mobilenav--default&viewMode=story`,
+  );
+  await page.getByRole('button', {name: 'Open Navigation'}).tap();
+  const nav = page.getByRole('dialog');
+  await expect(nav).toBeVisible();
+  const drawer = nav.locator('[tabindex="-1"]').first();
+  await drawer.evaluate(async element => {
+    await Promise.all(element.getAnimations().map(async a => a.finished));
+  });
+  const box = await drawer.boundingBox();
+  const viewport = page.viewportSize();
+  if (box == null || viewport == null) {
+    throw new Error('the drawer did not render');
+  }
+  // The backdrop strip is on whichever side the drawer left free.
+  const strip =
+    box.x > 0.5
+      ? {from: 0, to: box.x}
+      : {from: box.x + box.width, to: viewport.width};
+  return {nav, box, strip, viewport};
+}
+
+test.describe('on a 320 px phone', () => {
+  test.use({
+    hasTouch: true,
+    isMobile: true,
+    viewport: {width: 320, height: 568},
+    deviceScaleFactor: 1,
+  });
+
+  test('the drawer leaves a strip of the page, and a tap on it closes the drawer', async ({
+    page,
+  }) => {
+    const {nav, box, strip, viewport} = await openNav(page);
+
+    // 85% of 320 px: the default 320 px drawer is capped at 272 px.
+    expect(box.width).toBeCloseTo(272, 0);
+    expect(strip.to - strip.from).toBeCloseTo(48, 0);
+
+    // The strip is backdrop (the dialog itself), not drawer.
+    const at = {x: (strip.from + strip.to) / 2, y: viewport.height / 2};
+    expect(
+      await page.evaluate(
+        ({x, y}) => document.elementFromPoint(x, y)?.tagName.toLowerCase(),
+        at,
+      ),
+    ).toBe('dialog');
+
+    await page.touchscreen.tap(at.x, at.y);
+    await expect(nav).toBeHidden();
+  });
+});
+
+test.describe('on a 402 px phone', () => {
+  test.use({
+    hasTouch: true,
+    isMobile: true,
+    viewport: {width: 402, height: 714},
+    deviceScaleFactor: 1,
+  });
+
+  test('the drawer keeps its 320 px width', async ({page}) => {
+    const {box, strip} = await openNav(page);
+
+    // 85% of 402 px is 341.7 px: the cap does not bind.
+    expect(box.width).toBeCloseTo(320, 0);
+    expect(strip.to - strip.from).toBeCloseTo(82, 0);
+  });
+});

package/src/MoreMenu/MoreMenu.doc.mjs

@@ -104,7 +104,7 @@ export const docs = {
     {
       name: 'presentation',
       type: "'popover' | 'bottom-sheet' | 'adaptive'",
-      description: 'Presentation policy forwarded to DropdownMenu. `adaptive` keeps the anchored popover on pointer-based layouts and uses a BottomSheet at 768px and below when the primary pointer is coarse.',
+      description: 'Presentation policy forwarded to DropdownMenu. `adaptive` keeps the anchored popover on pointer-based layouts and uses a BottomSheet on a compact touch screen: a coarse primary pointer, and a viewport narrower than the theme `md` breakpoint (768px by default) or shorter than 500px.',
       default: "'popover'",
     },
     {
@@ -204,7 +204,7 @@ export const docsZh = {
     {
       name: 'presentation',
       type: "'popover' | 'bottom-sheet' | 'adaptive'",
-      description: '菜单呈现策略。`adaptive` 在指针布局中使用锚定浮层，在主指针为粗略指针且宽度不超过 768px 时使用 BottomSheet。',
+      description: '菜单呈现策略。`adaptive` 在指针布局中使用锚定浮层，在主指针为粗略指针且视口宽度小于主题的 `md` 断点（默认 768px）或高度小于 500px 时使用 BottomSheet。',
       default: "'popover'",
     },
     {

package/src/MoreMenu/MoreMenu.spec.md

@@ -1,18 +1,21 @@
 ---
 schema_version: 3
-template_version: 3
+template_version: 7
 kind: component
 id: component:MoreMenu
-authority: draft
+authority: current
 archive_reason: null
 superseded_by: null
-approved_by: null
-approved_at: null
+approved_by: cixzhang
+approved_at: 2026-10-26
 owners: [cixzhang]
 review_triggers: [theming]
 verified_by:
   [
     packages/core/src/MoreMenu/MoreMenu.test.tsx,
+    packages/core/src/DropdownMenu/__tests__/MenuButton.a11y.test.tsx,
+    packages/core/src/DropdownMenu/__tests__/MenuButton.a11y.chromium.spec.ts,
+    apps/storybook/stories/MoreMenu.stories.tsx,
     packages/core/src/DropdownMenu/DropdownMenu.test.tsx,
     packages/core/src/Button/Button.test.tsx,
     packages/core/src/Icon/Icon.test.tsx,
@@ -30,28 +33,54 @@ architecture:
     architecture:layer-runtime,
   ]
 contributing: []
-system_specs: []
+system_specs: [spec:AST-020]
 ---
 
 # MoreMenu component contract
 
+## Contract at a glance
+
+| Area                    | Contract                                                                                                                                                                                                                                            |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Public contract         | `MoreMenu` with `items`, `label` (default "More options"), `variant` (`ghost`), `size` (surrounding size context, else `md`), `icon`, `isDisabled`, `placement`, `alignment`, `presentation`, `isMenuOpen`, and `onOpenChange`; target `more-menu`. |
+| Behavior                | An icon-only overflow Button with a tooltip that opens a DropdownMenu of `items`; MoreMenu forwards open state, placement, alignment, and presentation to DropdownMenu and adds no menu runtime of its own.                                         |
+| End-user impact         | Users find secondary actions behind one named "More options" button; keyboard users open it as an APG menu button.                                                                                                                                  |
+| Builder impact          | None.                                                                                                                                                                                                                                               |
+| Compatibility/readiness | Records shipped behavior; no public change. Two implementation gaps (see Current-state impact).                                                                                                                                                     |
+| Review checks           | Reject moving `more-menu` onto the trigger, a parallel menu runtime, or a trigger that loses its name, `aria-haspopup`, `aria-expanded`, or `aria-controls`.                                                                                        |
+| Governing rules         | `spec:AST-020` (pattern bindings); `architecture:component-theming-surface`; `architecture:layer-runtime`; `family:overlay-dismissal`.                                                                                                              |
+
+This table is a review projection; the body below is authoritative.
+
 ## Intent
 
 MoreMenu provides a visible icon-only overflow trigger and delegates its action
-presentation to DropdownMenu. This draft records current consumer anatomy and
-theming ownership without changing runtime behavior, styling, targets, or public
-API.
+presentation to DropdownMenu. It owns the trigger's defaults, the `more-menu`
+target on the composed panel, and what it forwards to DropdownMenu. Consumer
+usage lives in `MoreMenu.doc.mjs`.
 
 ## Compatibility and migration
 
 - Released default preserved: `yes`
-- Compatibility class: additive documentation only; runtime, DOM, styling,
+- Compatibility class: records shipped behavior; runtime, DOM, styling,
   targets, and public API remain unchanged
-- Controlled/uncontrolled behavior: unchanged
+- Controlled/uncontrolled behavior: `isMenuOpen` and `onOpenChange` pass to
+  DropdownMenu unchanged
 - Migration decision: none
 
 Consumer migration instructions belong in consumer docs and release notes.
 
+## Current-state impact
+
+- **The bottom-sheet trigger drops the ref.** With `presentation="bottom-sheet"`,
+  or `presentation="adaptive"` on a compact touch screen, DropdownMenu replaces the `ref` MoreMenu passes to the trigger, so a caller's
+  ref stays empty. `architecture:public-component-api` INV8 has the ref reach
+  the element the contract promises.
+- **The arrow-key opening rows are advisory.** The shared menu-button binding
+  runs AR1's ArrowDown and ArrowUp opening rows as advisory, so a keyboard open
+  that misses the first or last row does not fail either binding lane.
+  `spec:AST-020` FR9 makes an adopted expectation required.
+
 ## Ownership boundary
 
 **Owns**
@@ -66,28 +95,28 @@ Consumer migration instructions belong in consumer docs and release notes.
 - Default semantic trigger artwork resolution — delegated to the Icon registry;
   the current artwork renders directly inside Button and does not carry Icon's
   `icon` target. Arbitrary caller-rendered trigger content remains caller-owned.
-- Menu-panel lifecycle and presentation switching — delegated to
-  `component:DropdownMenu`.
+- Menu-panel lifecycle and presentation switching — owned by DropdownMenu and
+  uncontracted here.
 - Anchored action rows, sections, dividers, selectable indicators, and nested
-  flyouts — delegated to `component:DropdownMenu`.
+  flyouts — owned by DropdownMenu and uncontracted here.
 - BottomSheet action rows and lists — delegated through DropdownMenu to
   `component:List`; the touch frame remains owned by `component:BottomSheet`.
 - Shared layer lifecycle or dismissal policy.
 
 ## Public concepts
 
-No new public concept is introduced. Consumer props and usage remain documented
-in `MoreMenu.doc.mjs`; its action data and presentation values remain those of
-DropdownMenu.
+No component-local concept. Action data and presentation values are
+DropdownMenu's; consumer props are documented in `MoreMenu.doc.mjs`.
 
 ## Behavioral and layout contract
 
-| ID  | Candidate invariant                                                                                                                                                                                                                                                                                                           | Basis                           | Draft review state                                  |
-| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | --------------------------------------------------- |
-| FR1 | Every current render contains one icon-only Trigger button and one DropdownMenu-owned Menu surface. Anchored presentation uses Pointer action rows; BottomSheet presentation uses Touch action rows. The default trigger icon resolves through the Icon registry, while a caller may replace it with arbitrary React content. | Current source, docs, and tests | Verified current behavior; no new behavior decided  |
-| FR2 | The current `more-menu` target is applied to the composed DropdownMenu panel as an additional class. It is not applied to the Trigger button.                                                                                                                                                                                 | Current source, docs, and tests | Verified current target placement; no target change |
-| FR3 | Button owns the Trigger button and the Icon registry owns default semantic trigger artwork resolution. DropdownMenu owns Pointer action rows; List owns Touch action rows rendered through DropdownMenu's BottomSheet path.                                                                                                   | Current source and owner docs   | Verified current delegation; no ownership change    |
-| FR4 | MoreMenu forwards the current open state, placement, alignment, and pointer/touch presentation policy to DropdownMenu without adding a parallel menu runtime.                                                                                                                                                                 | Current source and tests        | Verified composition; no behavior change            |
+| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                    | Basis                           |
+| --- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
+| FR1 | Every render contains one icon-only Trigger button. The anchored presentation also renders one DropdownMenu-owned Menu surface; the bottom-sheet presentation renders its Menu surface only while the sheet is open. Anchored presentation uses Pointer action rows; BottomSheet presentation uses Touch action rows. The default trigger icon is the active registry's `moreHorizontal` artwork; `icon` replaces it with any React content. | Current source, docs, and tests |
+| FR2 | The `more-menu` target is applied to the composed DropdownMenu panel as an additional class, before any caller `className`. It is not applied to the Trigger button.                                                                                                                                                                                                                                                                         | Current source, docs, and tests |
+| FR3 | Button owns the Trigger button and the Icon registry owns default semantic trigger artwork resolution. DropdownMenu owns Pointer action rows; List owns Touch action rows rendered through DropdownMenu's BottomSheet path.                                                                                                                                                                                                                  | Current source and owner docs   |
+| FR4 | MoreMenu forwards open state, placement, alignment, presentation, `xstyle`, `style`, and `data-testid` to DropdownMenu without adding a parallel menu runtime, and shows no chevron. Its default position matches DropdownMenu's.                                                                                                                                                                                                            | Current source and tests        |
+| FR5 | The trigger is named by `label` (else the translated `@astryx.moreMenu.label`, "More options"), shows that name as its tooltip, uses `variant` (default `ghost`) and `size` (default from the surrounding size context, else `md`), forwards `ref` to the trigger in the anchored presentation, and honors `isDisabled`: a disabled trigger opens from no key or press.                                                                      | Current source and tests        |
 
 ### Allowed variation
 
@@ -112,28 +141,25 @@ DropdownMenu.
 
 ### Transformation and precedence order
 
-- No new icon-resolution, presentation-resolution, open-state, positioning, or
-  styling precedence rule is introduced.
+- **ORD1 — Trigger icon.** `icon`, then the registry's `moreHorizontal`.
+- **ORD2 — Size.** `size`, then the surrounding size context, then `md`.
 
 ### Performance and resources
 
-- No new loading, listener, measurement, or render constraint is introduced.
+- No resource rule; MoreMenu adds no listener or measurement of its own.
 
 ## Accessibility contract
 
-This draft does not change or extend MoreMenu's existing accessible label,
-tooltip, icon-only Button semantics, focus behavior, keyboard operation, or
-dismissal behavior.
-
-- **AR1 — The anchored trigger is a Menu Button through DropdownMenu.** In the
-  anchored pointer presentation MoreMenu's icon-only trigger adopts the APG
-  Menu Button pattern's required parts as `component:DropdownMenu/AR4` records
-  them — `button` role, its accessible label as the name,
-  `aria-haspopup="menu"`, `aria-expanded`, `aria-controls`, Enter or Space
-  opening with focus on the first enabled row — and the same named exception
-  for ArrowDown and ArrowUp opening. MoreMenu adds nothing of its own to that
-  contract. In the bottom-sheet presentation the trigger opens a dialog and says
-  `aria-haspopup="dialog"`, outside this pattern.
+- **AR1 — The anchored trigger is a Menu Button.** In the anchored pointer
+  presentation MoreMenu's icon-only trigger meets the APG Menu Button pattern's
+  required parts: `button` role, its label as the name, `aria-haspopup="menu"`,
+  `aria-expanded`, `aria-controls`, and Enter or Space opening with focus on the
+  first enabled row. ArrowDown opening on the first and ArrowUp on the last
+  enabled row go beyond the pattern's required set and are a named exception
+  (`spec:AST-020` FR15), kept because they ship. A pointer open focuses the menu container, and the first
+  ArrowDown then moves to the first row. In the bottom-sheet presentation the
+  trigger opens a dialog and says `aria-haspopup="dialog"`, outside this
+  pattern.
 
 ## Design relationships
 
@@ -143,7 +169,7 @@ dismissal behavior.
 | Icon-resolved trigger icon      | Draws semantic three-dot artwork from the active Icon registry.                  | Icon registry                  | Supporting        | FR1, FR3           |
 | Caller-rendered trigger content | Presents arbitrary caller content supplied through the icon override.            | Caller-supplied content        | Context-dependent | FR1, FR3           |
 | Menu surface                    | Adds MoreMenu's target to the composed DropdownMenu panel, not the trigger.      | Current source and public docs | Prominent         | FR1, FR2           |
-| Pointer action row              | Presents an action or nested flyout trigger in the anchored presentation.        | `component:DropdownMenu`       | Prominent         | FR1, FR3, FR4      |
+| Pointer action row              | Presents an action or nested flyout trigger in the anchored presentation.        | DropdownMenu                   | Prominent         | FR1, FR3, FR4      |
 | Touch action row                | Presents an action or drill-in entry through ListItem in the touch presentation. | `component:List`               | Prominent         | FR1, FR3, FR4      |
 
 The Menu surface is the DropdownMenu panel itself. It carries both
@@ -193,8 +219,7 @@ presentation.
   resolution. MoreMenu's default artwork uses that registry but currently
   bypasses Icon's painted `icon` target.
 - `architecture:interaction-modality` owns the shared pointer, touch, keyboard,
-  and adaptive-presentation boundaries inherited through DropdownMenu; this
-  draft changes none of them.
+  and adaptive-presentation boundaries inherited through DropdownMenu.
 - `architecture:layer-runtime` owns the current DropdownMenu Popover host, native
   light-dismiss reconciliation, and BottomSheet host distinction. MoreMenu adds
   no parallel layer runtime.
@@ -205,26 +230,36 @@ presentation.
 
 ## Verification map
 
-| Contract            | Verification                                                                                                                                                                                                                                                            | Representative states                                                           | Mutation or failure expectation                                                                                                                                    | Audit section                  |
-| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
-| FR1, FR4            | `MoreMenu.test.tsx` render, pointer, bottom-sheet, placement, and controlled suites                                                                                                                                                                                     | Default, custom icon, pointer, touch                                            | Replacing the composition or changing forwarded behavior fails existing render/interaction tests.                                                                  | `audit:MoreMenu/anatomy`       |
-| FR2                 | MoreMenu target test, source inspection, and theming target inventories                                                                                                                                                                                                 | Closed trigger and composed menu panel                                          | Moving `more-menu` onto the trigger or removing it from the panel fails target evidence.                                                                           | `audit:MoreMenu/theming`       |
-| FR3                 | MoreMenu, DropdownMenu, Button, Icon, and List source/owner tests                                                                                                                                                                                                       | Trigger, icon branches, pointer rows, touch rows                                | A composed part loses its owner target or is documented as a new MoreMenu-owned descendant.                                                                        | `audit:MoreMenu/theming`       |
-| AR1                 | `MoreMenu.test.tsx` "renders trigger button with default aria-label" and "has aria-haspopup and aria-expanded attributes"; keyboard opening verified through DropdownMenu's AR4 tests; MoreMenu-bound Menu Button accessibility contract (`internal/a11y-spec`) pending | Default and custom-icon triggers; closed/open; Enter, Space, ArrowDown, ArrowUp | The trigger loses its label, `aria-haspopup="menu"`, `aria-expanded` or `aria-controls`, or a keyboard open does not land on the first (ArrowUp: last) enabled row | `audit:MoreMenu/accessibility` |
-| Layer relationships | `MoreMenu.test.tsx`, `DropdownMenu.test.tsx`, and current layer/dismissal records                                                                                                                                                                                       | Light dismiss, Escape, pointer, touch                                           | Documentation gives MoreMenu a parallel runtime or misstates the current dismissal owner.                                                                          | `audit:MoreMenu/behavior`      |
-| Theming anatomy map | `scripts/check-knowledge.mjs`                                                                                                                                                                                                                                           | Canonical anatomy and current target                                            | Missing, extra, prefixed, stale, or unclassified mappings fail repository validation.                                                                              | `audit:MoreMenu/theming`       |
+| Contract            | Verification                                                                                                                                                                                                                                                                                  | Representative states                                                           | Mutation or failure expectation                                                                                                                           | Audit section                  |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
+| FR1, FR4            | `MoreMenu.test.tsx` render, pointer, bottom-sheet, and placement suites                                                                                                                                                                                                                       | Default, custom icon, pointer, touch                                            | Replacing the composition or changing forwarded behavior fails existing render/interaction tests.                                                         | `audit:MoreMenu/anatomy`       |
+| FR2                 | MoreMenu target test, source inspection, and theming target inventories                                                                                                                                                                                                                       | Closed trigger and composed menu panel                                          | Moving `more-menu` onto the trigger or removing it from the panel fails target evidence.                                                                  | `audit:MoreMenu/theming`       |
+| FR3                 | MoreMenu, DropdownMenu, Button, Icon, and List source/owner tests                                                                                                                                                                                                                             | Trigger, icon branches, pointer rows, touch rows                                | A composed part loses its owner target or is documented as a new MoreMenu-owned descendant.                                                               | `audit:MoreMenu/theming`       |
+| FR5                 | `MoreMenu.test.tsx` label, custom-label, ref, disabled-keys, and closed-while-disabled tests                                                                                                                                                                                                  | Default and custom label; disabled                                              | A lost name, or a disabled trigger that opens, fails.                                                                                                     | `audit:MoreMenu/behavior`      |
+| AR1                 | `MoreMenu.test.tsx` label, popup, and pointer-focus tests; the menu-button pattern binding `MenuButton.a11y.test.tsx` and `MenuButton.a11y.chromium.spec.ts`, which render MoreMenu states; `DropdownMenu.test.tsx` ArrowDown and ArrowUp trigger-key tests on the shared Button trigger path | Default and custom-icon triggers; closed/open; Enter, Space, ArrowDown, ArrowUp | The trigger loses its label, `aria-haspopup="menu"`, `aria-expanded` or `aria-controls`, or an Enter or Space open does not land on the first enabled row | `audit:MoreMenu/accessibility` |
+| Layer relationships | `MoreMenu.test.tsx`, `DropdownMenu.test.tsx`, and current layer/dismissal records                                                                                                                                                                                                             | Light dismiss, Escape, pointer, touch                                           | Documentation gives MoreMenu a parallel runtime or misstates the current dismissal owner.                                                                 | `audit:MoreMenu/behavior`      |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                                                                                                                                                                                                                                                                 | Canonical anatomy and current target                                            | Missing, extra, prefixed, stale, or unclassified mappings fail repository validation.                                                                     | `audit:MoreMenu/theming`       |
+
+Read from source, with no focused test yet:
+
+- FR1: the registry's `moreHorizontal` as the default trigger icon.
+- FR2: `more-menu` coming before a caller `className`, and its absence from the
+  Trigger button.
+- FR4: forwarding `isMenuOpen`, `onOpenChange`, `xstyle`, and `style`, and the
+  absence of a chevron.
+- FR5: the tooltip, the `ghost` default, the size from the surrounding size
+  context, the `md` default, and the ref reaching the trigger button.
+- AR1: `aria-haspopup="dialog"` in the bottom-sheet presentation.
 
 ## Decision log
 
-None. This draft records current facts and introduces no component-local design,
-API, theming, modality, or layer-system decision.
+No component-local decision is recorded.
 
 ## Open questions
 
 - **OQ1 — Should the default trigger artwork render through Icon's public
   target?** (`human-api`) The current registry lookup preserves semantic artwork
-  replacement but leaves the painted glyph outside the `icon` target; this
-  draft does not change that reachability.
+  replacement but leaves the painted glyph outside the `icon` target.
 
 ## Content boundary
 

package/src/MultiSelector/CreateRow.a11y.chromium.spec.ts

@@ -1,11 +1,14 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
 
 /**
  * @file CreateRow.a11y.chromium.spec.ts
  * @input The `Core/MultiSelector` CreateFromQuery story in a built Storybook.
  * @output Real-engine proof of the create row's appear/disappear cycle: what
  *   the live region says as the row comes and goes, and where the highlight
- *   lands when the row vanishes mid-type.
+ *   lands when the row vanishes mid-type. The region clears itself after each
+ *   announcement, so the spec reads a record of what it exposed rather than
+ *   its live text.
  * @position Run with `pnpm test:a11y-contract`; a DOM emulator cannot show
  *   the live region and the active descendant as a screen reader sees them
  *   across a sequence of keystrokes.
@@ -30,15 +33,61 @@ test.afterAll(async () => {
   await storybook?.close();
 });
 
-async function polite(page: Page): Promise<string> {
+/**
+ * Records every message the polite region exposes, in order. The region
+ * clears itself 2 s after its last announcement, so a read of its live text
+ * that a slow runner makes late finds it empty; the record keeps what was
+ * said.
+ */
+async function recordPolite(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const exposed: string[] = [];
+    (window as unknown as {__polite: string[]}).__polite = exposed;
+    new MutationObserver(() => {
+      const text =
+        document
+          .querySelector('[data-astryx-live-region="polite"]')
+          ?.textContent?.trim() ?? '';
+      if (text !== '' && text !== exposed.at(-1)) {
+        exposed.push(text);
+      }
+    }).observe(document.body, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+    });
+  });
+}
+
+/** How many messages the polite region has exposed so far. */
+async function politeCount(page: Page): Promise<number> {
+  return page.evaluate(
+    () => (window as unknown as {__polite: string[]}).__polite.length,
+  );
+}
+
+/** The latest message the polite region exposed after the first `since`. */
+async function politeSince(page: Page, since: number): Promise<string> {
   return page.evaluate(
-    () =>
-      document
-        .querySelector('[data-astryx-live-region="polite"]')
-        ?.textContent?.trim() ?? '',
+    start =>
+      (window as unknown as {__polite: string[]}).__polite
+        .slice(start)
+        .at(-1) ?? '',
+    since,
   );
 }
 
+/**
+ * Matches a polite region whose newest message is `message`. Messages written
+ * before the region exposes the previous one are joined in order
+ * (spec:AST-086 FR9), so typing faster than a frame can leave the previous
+ * keystroke's message ahead of the one under test.
+ */
+function newestMessage(message: string): RegExp {
+  const escaped = message.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return new RegExp(`(^|\\s)${escaped}$`);
+}
+
 async function activeDescendantText(page: Page): Promise<string | null> {
   return page.evaluate(() => {
     const id = document.activeElement?.getAttribute('aria-activedescendant');
@@ -54,11 +103,14 @@ test('the create row is announced as it appears and the highlight survives it va
   );
   const search = page.getByRole('combobox');
   await expect(search).toBeFocused();
+  await recordPolite(page);
 
   // "Bu": a partial match plus the create row above it.
   await search.pressSequentially('Bu');
   await expect(page.getByRole('option')).toHaveText(['Create "Bu"', 'Bug']);
-  await expect.poll(async () => polite(page)).toBe('1 result');
+  await expect
+    .poll(async () => politeSince(page, 0))
+    .toMatch(newestMessage('1 result'));
 
   // Highlight the create row, then type the letter that makes it vanish: the
   // highlight must not be left pointing at a row that no longer exists.
@@ -74,15 +126,21 @@ test('the create row is announced as it appears and the highlight survives it va
 
   // A query that matches nothing: the row is the whole result and the region
   // says so rather than "No results found".
+  const beforeUrgent = await politeCount(page);
   await search.fill('');
   await search.pressSequentially('Urgent');
   await expect(page.getByRole('option')).toHaveText(['Create "Urgent"']);
-  await expect.poll(async () => polite(page)).toBe('Create "Urgent"');
+  await expect
+    .poll(async () => politeSince(page, beforeUrgent))
+    .toMatch(newestMessage('Create "Urgent"'));
 
   // Enter commits: the caller adds the option, the search clears, and the new
   // label is a real row.
+  const beforeEnter = await politeCount(page);
   await search.press('Enter');
-  await expect.poll(async () => polite(page)).toBe('Urgent created');
+  await expect
+    .poll(async () => politeSince(page, beforeEnter))
+    .toMatch(newestMessage('Urgent created'));
   await expect(search).toHaveValue('');
   await expect(page.getByRole('option', {name: 'Urgent'})).toHaveAttribute(
     'aria-selected',

package/src/MultiSelector/MultiSelector.disabledFocus.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y always
 
 /**
  * @file MultiSelector.disabledFocus.a11y.chromium.spec.ts