@astryxdesign/core 0.7.2-canary.fdd384f → 0.7.2

package/src/Toolbar/__tests__/Toolbar.a11y.renders.tsx

@@ -0,0 +1,63 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Toolbar.a11y.renders.tsx
+ * @input One toolbar binding state from Toolbar.a11y.states.ts
+ * @output The React tree every lane renders for that state (the jsdom test directly, the story through Storybook): a page button before the Toolbar, the Toolbar, and a page button after it
+ * @position Shared fixture for the Toolbar binding
+ */
+
+import type {ReactElement} from 'react';
+import {Button} from '../../Button/Button';
+import {VStack} from '../../VStack/VStack';
+import {Toolbar} from '../Toolbar';
+import type {ToolbarBindingState, ToolbarControl} from './Toolbar.a11y.states';
+
+/**
+ * One slot's controls. A slot lays its children out in a row, so a vertical
+ * toolbar's caller stacks them, as a product toolbar would, to arrange the
+ * controls on the axis the state declares.
+ */
+function controls(
+  list: ReadonlyArray<ToolbarControl>,
+  orientation: ToolbarBindingState['facts']['orientation'],
+): ReactElement | undefined {
+  if (list.length === 0) {
+    return undefined;
+  }
+  const buttons = list.map(control => (
+    <Button
+      key={control.label}
+      label={control.label}
+      variant="ghost"
+      isDisabled={control.isDisabled}
+    />
+  ));
+  return orientation === 'vertical' ? (
+    <VStack gap={1}>{buttons}</VStack>
+  ) : (
+    <>{buttons}</>
+  );
+}
+
+export function renderToolbarState(
+  state: Pick<
+    ToolbarBindingState,
+    'label' | 'startControls' | 'endControls' | 'facts'
+  >,
+): ReactElement {
+  return (
+    <div dir={state.facts.direction} style={{padding: 24, maxWidth: 640}}>
+      <button type="button">Before the toolbar</button>
+      <Toolbar
+        label={state.label}
+        orientation={state.facts.orientation}
+        startContent={controls(state.startControls, state.facts.orientation)}
+        endContent={controls(state.endControls, state.facts.orientation)}
+      />
+      <button type="button">After the toolbar</button>
+    </div>
+  );
+}

package/src/Toolbar/__tests__/Toolbar.a11y.states.ts

@@ -0,0 +1,142 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Toolbar.a11y.states.ts
+ * @input Toolbar's representative states and the facts TOOLBAR_PATTERN reads
+ * @output TOOLBAR_BINDING_STATES and the explicit ownership exclusions for this binding
+ * @position Binding inventory shared by the jsdom test and the Chromium spec (Toolbar under spec:AST-020 FR15)
+ */
+
+import type {ToolbarStateFacts} from '@astryxdesign/a11y-spec';
+
+export interface ToolbarControl {
+  readonly label: string;
+  readonly isDisabled?: boolean;
+}
+
+export interface ToolbarBindingState {
+  readonly id: string;
+  readonly summary: string;
+  readonly storyId: string;
+  /** The Toolbar `label`, which names the toolbar. */
+  readonly label: string;
+  /** Controls in the start slot, in order. */
+  readonly startControls: ReadonlyArray<ToolbarControl>;
+  /** Controls in the end slot, in order. */
+  readonly endControls: ReadonlyArray<ToolbarControl>;
+  /** Relation name → accessible name of the control it designates. */
+  readonly controls: Readonly<
+    Record<'first-control' | 'second-control' | 'last-control', string>
+  >;
+  readonly facts: ToolbarStateFacts;
+}
+
+const story = (id: string) => `a11y-toolbar--${id}`;
+
+const FORMATTING = [
+  {label: 'Bold'},
+  {label: 'Italic'},
+  {label: 'Underline'},
+] as const;
+
+const FORMATTING_CONTROLS = {
+  'first-control': 'Bold',
+  'second-control': 'Italic',
+  'last-control': 'Settings',
+} as const;
+
+const HORIZONTAL_LTR: ToolbarStateFacts = {
+  orientation: 'horizontal',
+  direction: 'ltr',
+  wraps: true,
+  homeEnd: true,
+};
+
+export const TOOLBAR_BINDING_STATES = [
+  {
+    id: 'horizontal',
+    summary:
+      'a named horizontal Toolbar with three formatting buttons in the start slot and Settings in the end slot',
+    storyId: story('horizontal'),
+    label: 'Text formatting',
+    startControls: FORMATTING,
+    endControls: [{label: 'Settings'}],
+    controls: FORMATTING_CONTROLS,
+    facts: HORIZONTAL_LTR,
+  },
+  {
+    id: 'horizontal-rtl',
+    summary:
+      'the same Toolbar inside a right-to-left container, where ArrowLeft moves to the next control',
+    storyId: story('horizontal-rtl'),
+    label: 'Text formatting',
+    startControls: FORMATTING,
+    endControls: [{label: 'Settings'}],
+    controls: FORMATTING_CONTROLS,
+    facts: {...HORIZONTAL_LTR, direction: 'rtl'},
+  },
+  {
+    id: 'vertical',
+    summary:
+      'a vertical Toolbar of drawing tools, moved through with ArrowDown and ArrowUp',
+    storyId: story('vertical'),
+    label: 'Drawing tools',
+    startControls: [{label: 'Select'}, {label: 'Pen'}, {label: 'Eraser'}],
+    endControls: [],
+    controls: {
+      'first-control': 'Select',
+      'second-control': 'Pen',
+      'last-control': 'Eraser',
+    },
+    facts: {...HORIZONTAL_LTR, orientation: 'vertical'},
+  },
+  {
+    id: 'first-control-disabled',
+    summary:
+      'a Toolbar whose first button is disabled, so Tab enters on the first enabled button and the arrows skip the disabled one',
+    storyId: story('first-control-disabled'),
+    label: 'Edit actions',
+    startControls: [
+      {label: 'Undo', isDisabled: true},
+      {label: 'Cut'},
+      {label: 'Copy'},
+    ],
+    endControls: [{label: 'Paste'}],
+    controls: {
+      'first-control': 'Cut',
+      'second-control': 'Copy',
+      'last-control': 'Paste',
+    },
+    facts: HORIZONTAL_LTR,
+  },
+] as const satisfies ReadonlyArray<ToolbarBindingState>;
+
+export const TOOLBAR_EXCLUSIONS = [
+  {
+    id: 'control-semantics',
+    owner:
+      'the button, toggle-button and menu-button patterns and their bindings',
+    reason:
+      'Each control placed in a Toolbar exposes its own role, name, state and activation through its own pattern; this binding renders plain Buttons only so the toolbar container and the movement between controls are what is checked.',
+  },
+  {
+    id: 'caret-guard-and-nested-popovers',
+    owner:
+      'Toolbar.test.tsx (caret-guard, nested popover and onKeyDown composition suites)',
+    reason:
+      'Leaving caret keys to a text field mid-line, leaving keys inside an open MoreMenu to that menu, and composing a caller onKeyDown are binding behaviour the APG leaves to the author, so no state here places a text field or popover in the toolbar.',
+  },
+  {
+    id: 'three-lane-layout',
+    owner:
+      'Toolbar.test.tsx (centerContent and three-slot layout tests) and the repository visual gate',
+    reason:
+      'Center content switches the row to a three-column grid, but the controls stay in DOM order inside the same toolbar element and the same roving tab stop walks them, so the role, name, Tab stop and arrow order this contract reads do not change; the grid itself is layout paint.',
+  },
+  {
+    id: 'outer-chrome',
+    owner: 'component:Section and the repository visual gate',
+    reason:
+      'Variant, dividers, block padding and edge compensation are Section and layout paint around the toolbar row; they change no role, name, Tab stop or arrow movement, so every state uses the default transparent chrome.',
+  },
+] as const;

package/src/Toolbar/__tests__/Toolbar.a11y.test.tsx

@@ -0,0 +1,126 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/** @vitest-environment jsdom */
+
+/**
+ * @file Toolbar.a11y.test.tsx
+ * @input TOOLBAR_PATTERN bound to Toolbar's representative states
+ * @output jsdom-lane proof of the DOM expectations and an honest "unrun" report for the browser layers
+ * @position Binding test for Toolbar (the Chromium spec covers the rest)
+ */
+
+import {cleanup, render, screen} from '@testing-library/react';
+import {describe, expect, it} from 'vitest';
+import {
+  TOOLBAR_PATTERN,
+  checkAccessibilitySpec,
+  createJsdomHarness,
+  expectAccessibilitySpec,
+  summarize,
+  type BindingResult,
+} from '@astryxdesign/a11y-spec';
+import {renderToolbarState} from './Toolbar.a11y.renders';
+import {
+  TOOLBAR_BINDING_STATES,
+  TOOLBAR_EXCLUSIONS,
+  type ToolbarBindingState,
+} from './Toolbar.a11y.states';
+
+function toolbarFor(state: ToolbarBindingState): HTMLElement {
+  return screen.getByRole('toolbar', {name: state.label});
+}
+
+function relatedFor(
+  state: ToolbarBindingState,
+): Readonly<Record<string, Element>> {
+  const related: Record<string, Element> = {
+    before: screen.getByRole('button', {name: 'Before the toolbar'}),
+    after: screen.getByRole('button', {name: 'After the toolbar'}),
+  };
+  for (const [relation, name] of Object.entries(state.controls)) {
+    related[relation] = screen.getByRole('button', {name});
+  }
+  return related;
+}
+
+async function checkState(state: ToolbarBindingState): Promise<BindingResult> {
+  return checkAccessibilitySpec({
+    spec: TOOLBAR_PATTERN,
+    binding: 'Toolbar',
+    state: state.id,
+    facts: state.facts,
+    mount: async () => {
+      render(renderToolbarState(state));
+      return createJsdomHarness({
+        subject: toolbarFor(state),
+        related: relatedFor(state),
+      });
+    },
+    unmount: cleanup,
+  });
+}
+
+describe('Toolbar — toolbar pattern, jsdom lane', () => {
+  it.each(
+    TOOLBAR_BINDING_STATES.map(
+      state => [state.id, state.summary, state] as const,
+    ),
+  )('%s — %s', async (_id, _summary, state) => {
+    await expectAccessibilitySpec({
+      spec: TOOLBAR_PATTERN,
+      binding: 'Toolbar',
+      state: state.id,
+      facts: state.facts,
+      render: () => {
+        render(renderToolbarState(state));
+      },
+      subject: () => toolbarFor(state),
+      related: () => relatedFor(state),
+      cleanup,
+    });
+  });
+
+  it('runs the DOM layer and reports the browser-owned outcomes as unrun', async () => {
+    const results: BindingResult[] = [];
+    for (const state of TOOLBAR_BINDING_STATES) {
+      results.push(await checkState(state));
+    }
+    const report = summarize(TOOLBAR_PATTERN, results);
+    expect(report.counts.pass).toBeGreaterThan(0);
+    expect(report.unrunLayers).toEqual(['accessibility-tree', 'real-browser']);
+    expect(report.counts.unexpectedPass).toBe(0);
+  });
+});
+
+describe('toolbar binding inventory', () => {
+  it('gives every representative state a distinct checked-in story', () => {
+    const stories = TOOLBAR_BINDING_STATES.map(state => state.storyId);
+    expect(new Set(stories).size).toBe(stories.length);
+  });
+
+  it('keeps control semantics, editing and popover keys, the three-lane layout, and outer chrome explicit', () => {
+    expect(TOOLBAR_EXCLUSIONS.map(row => row.id)).toEqual([
+      'control-semantics',
+      'caret-guard-and-nested-popovers',
+      'three-lane-layout',
+      'outer-chrome',
+    ]);
+    for (const exclusion of TOOLBAR_EXCLUSIONS) {
+      expect(exclusion.owner.length, exclusion.id).toBeGreaterThan(20);
+      expect(exclusion.reason.length, exclusion.id).toBeGreaterThan(80);
+    }
+  });
+
+  it('renders the toolbar and every control relation it names for every state', () => {
+    for (const state of TOOLBAR_BINDING_STATES) {
+      render(renderToolbarState(state));
+      const toolbar = toolbarFor(state);
+      for (const name of Object.values(state.controls)) {
+        expect(
+          toolbar.contains(screen.getByRole('button', {name})),
+          `${state.id}: ${name}`,
+        ).toBe(true);
+      }
+      cleanup();
+    }
+  });
+});

package/src/TopNav/TopNavMegaMenu.test.tsx

@@ -769,6 +769,31 @@ describe('TopNavMegaMenu — drawer mode', () => {
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
 
+  it('makes collapsed items inert and hidden from assistive technology', async () => {
+    const user = userEvent.setup();
+    render(
+      <TopNavRenderContext value="drawer">
+        <TopNavMegaMenu
+          label="Products"
+          items={<TopNavMegaMenuItem title="Analytics" href="/analytics" />}
+        />
+      </TopNavRenderContext>,
+    );
+    const trigger = screen.getByRole('button', {name: 'Products'});
+    const region = document.getElementById(
+      trigger.getAttribute('aria-controls') ?? '',
+    );
+
+    expect(region).toHaveAttribute('inert');
+    expect(region).toHaveAttribute('aria-hidden', 'true');
+    expect(screen.queryByRole('link', {name: 'Analytics'})).toBeNull();
+
+    await user.click(trigger);
+    expect(region).not.toHaveAttribute('inert');
+    expect(region).toHaveAttribute('aria-hidden', 'false');
+    expect(screen.getByRole('link', {name: 'Analytics'})).toBeInTheDocument();
+  });
+
   it('clips the drawer section only while it is collapsed', async () => {
     // The ring paints outside the item, so a permanent clip would cut it off.
     const user = userEvent.setup();

package/src/TopNav/TopNavMegaMenu.tsx

@@ -599,6 +599,8 @@ function DrawerMegaMenu({
       {/* Animated expand/collapse container */}
       <div
         id={`${menuId}-items`}
+        aria-hidden={!isExpanded}
+        inert={!isExpanded ? true : undefined}
         {...stylex.props(
           styles.drawerItems,
           isExpanded && styles.drawerItemsExpanded,

package/src/TopNav/TopNavMenu.test.tsx

@@ -233,12 +233,14 @@ describe('TopNavMenu — drawer focus ring', () => {
     expectSharedFocusRing(screen.getByRole('button', {name: /Products/}));
   });
 
-  it('draws the shared ring on a drawer item', () => {
+  it('draws the shared ring on a drawer item', async () => {
+    const user = userEvent.setup();
     render(
       <TopNavRenderContext value="drawer">
         <TopNavMenu label="Products" items={mockItems} />
       </TopNavRenderContext>,
     );
+    await user.click(screen.getByRole('button', {name: /Products/}));
     expectSharedFocusRing(screen.getByRole('link', {name: /Analytics/}));
   });
 
@@ -262,6 +264,30 @@ describe('TopNavMenu — drawer focus ring', () => {
   });
 });
 
+describe('TopNavMenu — drawer collapsed section', () => {
+  it('makes collapsed items inert and hidden from assistive technology', async () => {
+    const user = userEvent.setup();
+    render(
+      <TopNavRenderContext value="drawer">
+        <TopNavMenu label="Products" items={mockItems} />
+      </TopNavRenderContext>,
+    );
+    const trigger = screen.getByRole('button', {name: /Products/});
+    const region = document.getElementById(
+      trigger.getAttribute('aria-controls') ?? '',
+    );
+
+    expect(region).toHaveAttribute('inert');
+    expect(region).toHaveAttribute('aria-hidden', 'true');
+    expect(screen.queryByRole('link', {name: /Analytics/})).toBeNull();
+
+    await user.click(trigger);
+    expect(region).not.toHaveAttribute('inert');
+    expect(region).toHaveAttribute('aria-hidden', 'false');
+    expect(screen.getByRole('link', {name: /Analytics/})).toBeInTheDocument();
+  });
+});
+
 describe('TopNavMenu pass-through props', () => {
   it('forwards pass-through props to the trigger button', () => {
     render(

package/src/TopNav/TopNavMenu.tsx

@@ -494,6 +494,8 @@ export function TopNavMenu({
         </button>
         <div
           id={`${menuId}-items`}
+          aria-hidden={!drawerExpanded}
+          inert={!drawerExpanded ? true : undefined}
           {...stylex.props(
             drawerStyles.items,
             drawerExpanded && drawerStyles.itemsExpanded,

package/src/postinstall.test.mjs

@@ -11,17 +11,22 @@
  */
 
 import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import {spawnSync} from 'node:child_process';
 import * as fs from 'node:fs';
 import * as os from 'node:os';
 import * as path from 'node:path';
+import {fileURLToPath} from 'node:url';
 // Core's own package-local contract copy — what actually runs at install time.
 import {
   isAstryxInitialized,
+  isAstryxPromptInReach,
   shouldNudge,
   AGENT_DOC_PATHS,
   INIT_MARKERS,
   SETUP_NUDGE,
+  setupNudge,
 } from '../scripts/agent-doc-state.mjs';
+import {cliInvocation} from '../scripts/postinstall.mjs';
 // Dev-only, monorepo-relative: core must not depend on the CLI at runtime (the
 // CLI peer-depends on core), but the test can read the source and the generator.
 import * as cliLeaf from '../../cli/foundation/agent-docs/agent-doc-state.mjs';
@@ -92,12 +97,58 @@ describe('core postinstall — one authoritative source, no drift', () => {
     expect(AGENT_DOC_PATHS).toEqual(cliLeaf.AGENT_DOC_PATHS);
     expect(INIT_MARKERS).toEqual(cliLeaf.INIT_MARKERS);
     expect(SETUP_NUDGE).toBe(cliLeaf.SETUP_NUDGE);
+    expect(setupNudge('pnpm exec astryx')).toBe(
+      cliLeaf.setupNudge('pnpm exec astryx'),
+    );
   });
 
   it('agrees with the CLI leaf on a real project', () => {
     write('AGENTS.md', `# doc\n${MARKER}\nbody`);
     expect(isAstryxInitialized(tmp)).toBe(cliLeaf.isAstryxInitialized(tmp));
   });
+
+  it('agrees with the CLI leaf on a monorepo package', () => {
+    fs.mkdirSync(path.join(tmp, '.git'));
+    write('AGENTS.md', MARKER);
+    write('packages/app/package.json', '{"name":"app"}');
+    const app = path.join(tmp, 'packages/app');
+    expect(isAstryxPromptInReach(app)).toBe(true);
+    expect(isAstryxPromptInReach(app)).toBe(cliLeaf.isAstryxPromptInReach(app));
+  });
+});
+
+// Install time, end to end: core's real script and its contract copy, installed
+// under a monorepo's node_modules, run the way npm runs them for a package.
+describe('core postinstall — inside a monorepo package', () => {
+  const CORE = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+  const install = () => {
+    const installed = path.join(tmp, 'node_modules/@astryxdesign/core/scripts');
+    fs.mkdirSync(installed, {recursive: true});
+    for (const file of ['postinstall.mjs', 'agent-doc-state.mjs']) {
+      fs.copyFileSync(path.join(CORE, 'scripts', file), path.join(installed, file));
+    }
+    return spawnSync(process.execPath, [path.join(installed, 'postinstall.mjs')], {
+      env: {...process.env, INIT_CWD: path.join(tmp, 'packages/app'), npm_command: 'install'},
+      encoding: 'utf8',
+    });
+  };
+  beforeEach(() => {
+    fs.mkdirSync(path.join(tmp, '.git'));
+    write('packages/app/package.json', '{"name":"app"}');
+  });
+
+  it('stays quiet when init ran at the repository root', () => {
+    write('AGENTS.md', MARKER);
+    const r = install();
+    expect(r.status).toBe(0);
+    expect(r.stdout).toBe('');
+  });
+
+  it('still nudges when no folder up to the repository root ran init', () => {
+    const r = install();
+    expect(r.status).toBe(0);
+    expect(r.stdout).toMatch(/finish setup and install the Astryx agent prompt/);
+  });
 });
 
 describe('core postinstall — shouldNudge', () => {
@@ -135,3 +186,31 @@ describe('core postinstall — shouldNudge', () => {
     }
   });
 });
+
+describe('core postinstall — the nudge names the command the CLI would print', () => {
+  it('words the nudge around the stem it is given', () => {
+    expect(setupNudge('pnpm exec astryx')).toContain(
+      'run `pnpm exec astryx init` to finish setup',
+    );
+    expect(SETUP_NUDGE).toContain('run `npx @astryxdesign/cli init`');
+  });
+
+  it("asks the project's installed CLI for its stem", async () => {
+    write('package.json', '{"name":"app"}');
+    write('pnpm-lock.yaml', '');
+    write('node_modules/.bin/astryx', '');
+    fs.mkdirSync(path.join(tmp, 'node_modules/@astryxdesign'), {
+      recursive: true,
+    });
+    fs.symlinkSync(
+      path.resolve(import.meta.dirname, '../../cli'),
+      path.join(tmp, 'node_modules/@astryxdesign/cli'),
+    );
+    expect(await cliInvocation(tmp)).toBe('pnpm exec astryx');
+  });
+
+  it('has no stem to offer when the CLI is not installed', async () => {
+    write('package.json', '{"name":"app"}');
+    expect(await cliInvocation(tmp)).toBeUndefined();
+  });
+});

package/src/reset.a11y.chromium.spec.ts

@@ -4,7 +4,8 @@
  * @file reset.a11y.chromium.spec.ts
  * @input packages/core/src/reset.css, alone on a blank Chromium page
  * @output Browser evidence that the reset reaches ::before, ::after,
- *   ::placeholder and the search field's cancel button
+ *   ::placeholder, the search field's cancel button and the dropdown marker
+ *   of a field with a list
  * @position reset.css integration proof. A pseudo-element inside :where() is
  *   invalid, and the forgiving list drops it without an error, so only a
  *   shipping engine shows which of the reset's rules still match.
@@ -13,6 +14,8 @@
 import * as fs from 'node:fs';
 import {fileURLToPath} from 'node:url';
 import {expect, test, type Page} from '@playwright/test';
+// @ts-expect-error -- pngjs ships no declarations; runtime support is pinned.
+import {PNG} from 'pngjs';
 
 const RESET_CSS = fs.readFileSync(
   fileURLToPath(new URL('./reset.css', import.meta.url)),
@@ -154,6 +157,54 @@ test('a search field has no cancel button to clear it', async ({page}) => {
   await expect(query).toHaveValue('query');
 });
 
+test('the dropdown marker of a field with a list sits in its middle', async ({
+  page,
+}) => {
+  // Chromium shows the marker while the pointer is over the field and draws
+  // it as a glyph set on the field's line-height, the 1.5 the reset inherits.
+  await page.evaluate(() => {
+    const field = document.createElement('input');
+    field.id = 'fruit';
+    field.setAttribute('list', 'fruits');
+    const options = document.createElement('datalist');
+    options.id = 'fruits';
+    options.append(new Option('Apple'));
+    document.body.append(field, options);
+  });
+  await page.addStyleTag({
+    content: `
+      #fruit {
+        display: block;
+        width: 240px;
+        padding: 7px 11px;
+        border: 1px solid;
+        line-height: 1.5;
+      }
+    `,
+  });
+  const field = page.locator('#fruit');
+  await field.hover();
+  const png = PNG.sync.read(await field.screenshot({caret: 'hide'}));
+  // The marker is the only ink in the field's last 32px, inside the border.
+  const inkRows: number[] = [];
+  for (let y = 2; y < png.height - 2; y++) {
+    for (let x = png.width - 32; x < png.width - 2; x++) {
+      const offset = (y * png.width + x) * 4;
+      const luminance =
+        (png.data[offset] + png.data[offset + 1] + png.data[offset + 2]) / 3;
+      if (luminance < 160) {
+        inkRows.push(y);
+        break;
+      }
+    }
+  }
+  expect(inkRows.length, 'the hovered field shows its marker').toBeGreaterThan(
+    0,
+  );
+  const markerMiddle = (inkRows[0] + inkRows[inkRows.length - 1] + 1) / 2;
+  expect(Math.abs(markerMiddle - png.height / 2)).toBeLessThanOrEqual(1);
+});
+
 test('a later layer and an unlayered rule still override the reset', async ({
   page,
 }) => {

package/src/reset.css

@@ -265,6 +265,15 @@
     color: var(--color-text-secondary, light-dark(#4E606F, #AAAFB5));
   }
 
+  /*
+   * Chromium draws the dropdown marker of a field with a `list` as a glyph
+   * set on the line-height the field inherits, so with any line-height above
+   * 1 the marker sits below the middle of the field.
+   */
+  :where([list])::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
   /*
    * Remove the inner padding and cancel buttons in search inputs
    * for Chrome and Safari.

package/src/reset.test.ts

@@ -172,6 +172,17 @@ describe('reset.css pseudo-element rules', () => {
     ).toBe(true);
   });
 
+  it('sets the dropdown marker of a field with a list on a single line', () => {
+    const marker = ruleBlocks.filter(({selector}) =>
+      topLevelSelectors(selector).some(entry =>
+        entry.endsWith('::-webkit-calendar-picker-indicator'),
+      ),
+    );
+    expect(marker.map(({body}) => body).join('\n')).toMatch(
+      /line-height:\s*1;/,
+    );
+  });
+
   it('falls back to the --color-text-secondary default for placeholders', () => {
     // A page that loads only the reset never defines the token. The fallback
     // repeats the token's own default, so that page shows the placeholder an