@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/CommandPalette/__tests__/CommandPalette.a11y.chromium.spec.ts

@@ -0,0 +1,599 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CommandPalette.a11y.chromium.spec.ts
+ * @input Uses the component-owned Storybook fixture and exact-head build stamp
+ * @output Chromium screenshots and fail-closed semantic sensor receipts
+ * @position Browser evidence for the CommandPalette audit
+ */
+
+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('test-results/command-palette-audit-evidence');
+const STORY_ID = 'core-commandpalette--audit-matrix';
+const WIDE = {width: 1024, height: 900};
+const NARROW = {width: 320, height: 900};
+
+interface Case {
+  state: string;
+  mode: 'light' | 'dark';
+  direction: 'ltr' | 'rtl';
+  viewport: {width: number; height: number};
+}
+
+const CASES: Case[] = [
+  {state: 'wide-light-ltr', mode: 'light', direction: 'ltr', viewport: WIDE},
+  {state: 'wide-dark-ltr', mode: 'dark', direction: 'ltr', viewport: WIDE},
+  {state: 'wide-light-rtl', mode: 'light', direction: 'rtl', viewport: WIDE},
+  {state: 'wide-dark-rtl', mode: 'dark', direction: 'rtl', viewport: WIDE},
+  {
+    state: 'narrow-light',
+    mode: 'light',
+    direction: 'ltr',
+    viewport: NARROW,
+  },
+  {
+    state: 'narrow-dark',
+    mode: 'dark',
+    direction: 'ltr',
+    viewport: NARROW,
+  },
+];
+
+const frames: Record<string, unknown>[] = [];
+const stateVisualMatrix: Record<string, unknown>[] = [];
+const contrastPairMatrix: Record<string, unknown>[] = [];
+let storybook: StaticServer;
+let checkoutSha: string;
+let storybookSha: string;
+let browserVersion = 'unknown';
+
+test.beforeAll(async () => {
+  checkoutSha = execFileSync('git', ['rev-parse', 'HEAD'], {
+    encoding: 'utf8',
+  }).trim();
+  const expectedHead = process.env.ASTRYX_HEAD_SHA;
+  if (expectedHead && expectedHead !== checkoutSha) {
+    throw new Error('The audited checkout does not match the PR head');
+  }
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+  const stamp = await fetch(`${storybook.origin}/astryx-build-sha.txt`);
+  if (!stamp.ok) {
+    throw new Error(
+      `The Storybook build has no source stamp (${stamp.status})`,
+    );
+  }
+  storybookSha = (await stamp.text()).trim();
+  if (storybookSha !== checkoutSha) {
+    throw new Error(
+      'The served Storybook build does not match the audited checkout',
+    );
+  }
+  fs.mkdirSync(OUTPUT, {recursive: true});
+});
+
+test.afterAll(async () => {
+  if (checkoutSha && storybookSha) {
+    fs.writeFileSync(
+      path.join(OUTPUT, 'manifest.json'),
+      `${JSON.stringify(
+        {
+          version: 1,
+          component: 'core/CommandPalette',
+          headSha: checkoutSha,
+          storybookSha,
+          browser: browserVersion,
+          frames,
+          stateVisualMatrix,
+          contrastPairMatrix,
+        },
+        null,
+        2,
+      )}\n`,
+    );
+  }
+  await storybook?.close();
+});
+
+async function capture(page: Page, scenario: Case) {
+  const errors: string[] = [];
+  const onPageError = (error: Error) =>
+    errors.push(`pageerror: ${String(error)}`);
+  const onConsole = (message: {type(): string; text(): string}) => {
+    if (message.type() === 'error') {
+      errors.push(`console: ${message.text()}`);
+    }
+  };
+  page.on('pageerror', onPageError);
+  page.on('console', onConsole);
+
+  try {
+    await page.setViewportSize(scenario.viewport);
+    await page.emulateMedia({reducedMotion: 'reduce'});
+    browserVersion = page.context().browser()?.version() ?? 'unknown';
+    await page.goto(
+      `${storybook.origin}/iframe.html?id=${STORY_ID}&viewMode=story&globals=colorMode:${scenario.mode};astryxTheme:neutral;direction:${scenario.direction}`,
+    );
+
+    const canvas = page.locator('#storybook-root');
+    const subject = canvas.locator('[data-command-palette-audit-matrix]');
+    await subject.waitFor();
+    await expect(subject.locator('[role="region"]')).toHaveCount(3);
+    await expect(
+      subject
+        .getByRole('region', {name: 'Pending command palette'})
+        .locator('.astryx-spinner[role="status"]'),
+    ).toHaveCount(1);
+    await page.waitForTimeout(200);
+    await holdMotionStill(page);
+    await page.evaluate(async () => document.fonts.ready);
+    await page.waitForFunction(
+      expected =>
+        document.documentElement.getAttribute('data-theme') === expected,
+      scenario.mode,
+    );
+    await page.waitForFunction(
+      expected =>
+        document.querySelector('#storybook-root [dir]')?.getAttribute('dir') ===
+        expected,
+      scenario.direction,
+    );
+    await subject.scrollIntoViewIfNeeded();
+    await page.evaluate(async () => {
+      await new Promise<void>(resolve =>
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+      );
+    });
+
+    const initialBox = await subject.boundingBox();
+    if (initialBox == null) {
+      throw new Error(`${scenario.state}: the audit matrix has no layout box`);
+    }
+    await page.evaluate(async () => {
+      await new Promise<void>(resolve =>
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+      );
+    });
+    const settledBox = await subject.boundingBox();
+    if (settledBox == null) {
+      throw new Error(
+        `${scenario.state}: the audit matrix lost its layout box before capture`,
+      );
+    }
+    const geometryDelta = Math.max(
+      Math.abs(settledBox.x - initialBox.x),
+      Math.abs(settledBox.y - initialBox.y),
+      Math.abs(settledBox.width - initialBox.width),
+      Math.abs(settledBox.height - initialBox.height),
+    );
+
+    const observed = await subject.evaluate((node, expectedDirection) => {
+      type Color = {r: number; g: number; b: number; a: number};
+      const elements = <T extends Element>(selector: string) => [
+        ...node.querySelectorAll<T>(selector),
+      ];
+      const geometry = (element: Element) => {
+        const rect = element.getBoundingClientRect();
+        return {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+          right: rect.right,
+          bottom: rect.bottom,
+        };
+      };
+      const parseColor = (value: string): Color => {
+        const channels = value.match(/[\d.]+/g)?.map(Number);
+        if (!channels || channels.length < 3) {
+          throw new Error(`Cannot parse computed color: ${value}`);
+        }
+        return {
+          r: channels[0] ?? 0,
+          g: channels[1] ?? 0,
+          b: channels[2] ?? 0,
+          a: channels[3] ?? 1,
+        };
+      };
+      const composite = (foreground: Color, background: Color): Color => {
+        const a = foreground.a + background.a * (1 - foreground.a);
+        if (a === 0) {
+          return {r: 0, g: 0, b: 0, a: 0};
+        }
+        return {
+          r:
+            (foreground.r * foreground.a +
+              background.r * background.a * (1 - foreground.a)) /
+            a,
+          g:
+            (foreground.g * foreground.a +
+              background.g * background.a * (1 - foreground.a)) /
+            a,
+          b:
+            (foreground.b * foreground.a +
+              background.b * background.a * (1 - foreground.a)) /
+            a,
+          a,
+        };
+      };
+      const renderedBackground = (element: Element): Color => {
+        const layers: Color[] = [];
+        let current: Element | null = element;
+        while (current) {
+          const layer = parseColor(getComputedStyle(current).backgroundColor);
+          if (layer.a > 0) {
+            layers.push(layer);
+          }
+          if (layer.a >= 0.999) {
+            break;
+          }
+          current = current.parentElement;
+        }
+        return layers
+          .reverse()
+          .reduce(
+            (background, foreground) => composite(foreground, background),
+            {r: 255, g: 255, b: 255, a: 1},
+          );
+      };
+      const formatColor = ({r, g, b, a}: Color) =>
+        `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${a.toFixed(3)})`;
+      const luminance = ({r, g, b}: Color) => {
+        const channel = (value: number) => {
+          const normalized = value / 255;
+          return normalized <= 0.04045
+            ? normalized / 12.92
+            : ((normalized + 0.055) / 1.055) ** 2.4;
+        };
+        return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+      };
+      const contrast = (left: Color, right: Color) => {
+        const leftLuminance = luminance(left);
+        const rightLuminance = luminance(right);
+        return (
+          (Math.max(leftLuminance, rightLuminance) + 0.05) /
+          (Math.min(leftLuminance, rightLuminance) + 0.05)
+        );
+      };
+      const isVisible = (element: Element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return (
+          rect.width > 0 &&
+          rect.height > 0 &&
+          style.display !== 'none' &&
+          style.visibility !== 'hidden' &&
+          style.opacity !== '0'
+        );
+      };
+      const measure = (
+        element: Element,
+        part: string,
+        type: 'text' | 'non-text',
+        colorValue?: string,
+        styleOverride?: CSSStyleDeclaration,
+      ) => {
+        const style = styleOverride ?? getComputedStyle(element);
+        const background = renderedBackground(element);
+        const foreground = parseColor(colorValue ?? style.color);
+        const renderedForeground = composite(foreground, background);
+        const ratio = contrast(renderedForeground, background);
+        const fontSize = Number.parseFloat(style.fontSize);
+        const fontWeight =
+          style.fontWeight === 'bold'
+            ? 700
+            : Number.parseFloat(style.fontWeight) || 400;
+        const threshold =
+          type === 'non-text' ||
+          fontSize >= 24 ||
+          (fontSize >= 18.66 && fontWeight >= 700)
+            ? 3
+            : 4.5;
+        return {
+          part,
+          type,
+          state: 'rest',
+          meaningful: true,
+          foreground: colorValue ?? style.color,
+          renderedForeground: formatColor(renderedForeground),
+          renderedBackdrop: formatColor(background),
+          fontSize,
+          fontWeight,
+          ratio: Number(ratio.toFixed(2)),
+          threshold,
+          exception: null,
+          passed: ratio + 1e-6 >= threshold,
+        };
+      };
+
+      const regions = elements<HTMLElement>('[role="region"]');
+      const inputs = elements<HTMLInputElement>('[role="combobox"]');
+      const lists = elements<HTMLElement>('[role="listbox"]');
+      const options = elements<HTMLElement>('[role="option"]');
+      const groups = elements<HTMLElement>('[role="group"]');
+      const empties = elements<HTMLElement>('.astryx-command-palette-empty');
+      const footers = elements<HTMLElement>('.astryx-command-palette-footer');
+      const icons = elements<HTMLElement>(
+        '.astryx-command-palette-input .astryx-icon',
+      );
+      const spinners = elements<HTMLElement>(
+        '.astryx-command-palette-input .astryx-spinner',
+      );
+      const spinnerArcs = elements<SVGCircleElement>(
+        '.astryx-command-palette-input .astryx-spinner circle:last-of-type',
+      );
+      const shortcuts = elements<HTMLElement>(
+        '.astryx-command-palette-footer .astryx-kbd',
+      );
+      const headings = elements<HTMLElement>('h2');
+      const groupHeadings = elements<HTMLElement>(
+        '.astryx-command-palette-group-heading',
+      );
+      const targetSelectors = [
+        '.astryx-command-palette-input',
+        '.astryx-command-palette-list',
+        '.astryx-command-palette-item',
+        '.astryx-command-palette-group',
+        '.astryx-command-palette-group-heading',
+        '.astryx-command-palette-empty',
+        '.astryx-command-palette-footer',
+      ];
+      const targets = targetSelectors.flatMap(selector => elements(selector));
+      const footerText = footers.flatMap(footer => [
+        ...footer.querySelectorAll<HTMLElement>(':scope > span'),
+      ]);
+
+      const contrastPairs = [
+        ...headings
+          .filter(isVisible)
+          .map((element, index) =>
+            measure(element, `section-heading-${index + 1}`, 'text'),
+          ),
+        ...groupHeadings
+          .filter(isVisible)
+          .map((element, index) =>
+            measure(element, `group-heading-${index + 1}`, 'text'),
+          ),
+        ...inputs.filter(isVisible).map((element, index) => {
+          const placeholder = getComputedStyle(element, '::placeholder');
+          return measure(
+            element,
+            `input-placeholder-${index + 1}`,
+            'text',
+            placeholder.color,
+            placeholder,
+          );
+        }),
+        ...options
+          .filter(isVisible)
+          .map((element, index) =>
+            measure(element, `option-${index + 1}`, 'text'),
+          ),
+        ...empties
+          .filter(isVisible)
+          .map((element, index) =>
+            measure(element, `empty-${index + 1}`, 'text'),
+          ),
+        ...footerText
+          .filter(isVisible)
+          .map((element, index) =>
+            measure(element, `footer-hint-${index + 1}`, 'text'),
+          ),
+        ...shortcuts.flatMap((shortcut, shortcutIndex) =>
+          [...shortcut.querySelectorAll<HTMLElement>('kbd')]
+            .filter(isVisible)
+            .map((element, keyIndex) =>
+              measure(
+                element,
+                `shortcut-${shortcutIndex + 1}-key-${keyIndex + 1}`,
+                'text',
+              ),
+            ),
+        ),
+        ...icons
+          .filter(isVisible)
+          .map((element, index) =>
+            measure(element, `search-icon-${index + 1}`, 'non-text'),
+          ),
+        ...spinnerArcs
+          .filter(isVisible)
+          .map((element, index) =>
+            measure(
+              element,
+              `loading-spinner-${index + 1}`,
+              'non-text',
+              getComputedStyle(element).stroke,
+            ),
+          ),
+      ];
+
+      return {
+        declaredDirection: expectedDirection,
+        computedDirections: regions.map(
+          region => getComputedStyle(region).direction,
+        ),
+        text: (node as HTMLElement).innerText,
+        counts: {
+          regions: regions.length,
+          inputs: inputs.length,
+          lists: lists.length,
+          options: options.length,
+          groups: groups.length,
+          groupHeadings: groupHeadings.length,
+          empties: empties.length,
+          footers: footers.length,
+          icons: icons.length,
+          spinners: spinners.length,
+          shortcuts: shortcuts.length,
+          targets: targets.length,
+        },
+        inputLinks: inputs.map(input => ({
+          name: input.getAttribute('aria-label'),
+          controls: input.getAttribute('aria-controls'),
+          controlsExistingList:
+            input.getAttribute('aria-controls') != null &&
+            lists.some(list => list.id === input.getAttribute('aria-controls')),
+          expanded: input.getAttribute('aria-expanded'),
+        })),
+        selectedValues: options
+          .filter(option => option.getAttribute('aria-selected') === 'true')
+          .map(option => option.getAttribute('data-value')),
+        regions: regions.map(region => ({
+          name: region.getAttribute('aria-label'),
+          geometry: geometry(region),
+        })),
+        targetGeometry: targets.map(geometry),
+        noHorizontalOverflow:
+          document.documentElement.scrollWidth <= window.innerWidth + 1 &&
+          targets.every(element => {
+            const rect = element.getBoundingClientRect();
+            return rect.left >= -1 && rect.right <= window.innerWidth + 1;
+          }),
+        contrastPairs,
+      };
+    }, scenario.direction);
+
+    expect(observed.computedDirections).toEqual([
+      scenario.direction,
+      scenario.direction,
+      scenario.direction,
+    ]);
+    expect(observed.counts).toEqual({
+      regions: 3,
+      inputs: 3,
+      lists: 1,
+      options: 4,
+      groups: 2,
+      groupHeadings: 2,
+      empties: 2,
+      footers: 3,
+      icons: 3,
+      spinners: 1,
+      shortcuts: 12,
+      targets: 19,
+    });
+    expect(observed.inputLinks).toEqual([
+      expect.objectContaining({
+        name: 'Search commands',
+        controlsExistingList: true,
+        expanded: 'true',
+      }),
+      expect.objectContaining({
+        name: 'Search commands',
+        controls: null,
+        controlsExistingList: false,
+        expanded: 'false',
+      }),
+      expect.objectContaining({
+        name: 'Search commands',
+        controls: null,
+        controlsExistingList: false,
+        expanded: 'false',
+      }),
+    ]);
+    expect(observed.selectedValues).toEqual(['settings']);
+    expect(observed.text).toContain('Grouped results');
+    expect(observed.text).toContain('Empty bootstrap');
+    expect(observed.text).toContain('Pending bootstrap');
+    expect(observed.text).toContain('Type to search');
+    expect(observed.text).toContain('Create a command');
+    expect(observed.text).toContain('Navigate');
+    expect(observed.text).toContain('Select');
+    expect(observed.text).toContain('Close');
+    expect(observed.noHorizontalOverflow).toBe(true);
+    expect(geometryDelta).toBeLessThanOrEqual(0.5);
+    expect(observed.contrastPairs.length).toBeGreaterThanOrEqual(30);
+    expect(observed.contrastPairs.every(pair => pair.passed)).toBe(true);
+    expect(errors).toEqual([]);
+
+    const file = `CommandPalette__${scenario.state}.png`;
+    const png = await subject.screenshot({animations: 'disabled'});
+    const stateRows = [
+      {
+        scenario: scenario.state,
+        state: 'grouped-results-selected',
+        visible: true,
+        optionCount: 4,
+        groupCount: 2,
+        selectedValue: 'settings',
+      },
+      {
+        scenario: scenario.state,
+        state: 'empty-bootstrap',
+        visible: true,
+        emptyCount: 1,
+        listboxPresent: false,
+        comboboxExpanded: false,
+      },
+      {
+        scenario: scenario.state,
+        state: 'pending-bootstrap',
+        visible: true,
+        spinnerCount: 1,
+        emptyStateRemainsMounted: true,
+        listboxPresent: false,
+        comboboxExpanded: false,
+      },
+    ];
+    const contrastRows = observed.contrastPairs.map(pair => ({
+      scenario: scenario.state,
+      ...pair,
+    }));
+    const receipt = {
+      state: scenario.state,
+      mode: scenario.mode,
+      direction: scenario.direction,
+      viewport: scenario.viewport,
+      headSha: checkoutSha,
+      storybookSha,
+      image: file,
+      imageSha256: createHash('sha256').update(png).digest('hex'),
+      imageSize: {
+        width: png.readUInt32BE(16),
+        height: png.readUInt32BE(20),
+      },
+      geometryDelta,
+      observed,
+      stateVisualMatrix: stateRows,
+      contrastPairMatrix: contrastRows,
+      browser: browserVersion,
+      passed: true,
+    };
+    fs.writeFileSync(path.join(OUTPUT, file), png);
+    fs.writeFileSync(
+      path.join(OUTPUT, `${file}.sensors.json`),
+      `${JSON.stringify(receipt, null, 2)}\n`,
+    );
+    frames.push({
+      state: scenario.state,
+      mode: scenario.mode,
+      direction: scenario.direction,
+      viewport: scenario.viewport,
+      passed: true,
+      image: receipt.image,
+    });
+    stateVisualMatrix.push(...stateRows);
+    contrastPairMatrix.push(...contrastRows);
+  } finally {
+    page.off('pageerror', onPageError);
+    page.off('console', onConsole);
+  }
+}
+
+for (const scenario of CASES) {
+  test(`captures ${scenario.state}`, async ({page}) => {
+    await capture(page, scenario);
+  });
+}

package/src/ComplexSelector/ComplexSelector.doc.mjs

@@ -146,8 +146,9 @@ export const docs = {
           name: 'statusVariant',
           type: "'attached' | 'detached' | 'tooltip'",
           description:
-            'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment; detached when variant is ghost); detached floats below as a separate element with spacing; tooltip reveals the message in an info-tip button.',
-          default: "'attached'",
+            'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment; detached when variant is secondary or ghost); detached floats below as a separate element with spacing; tooltip reveals the message in an info-tip button.',
+          default:
+            "'attached' for input selectors; 'detached' for secondary and ghost selectors",
         },
         {
           name: 'size',
@@ -157,9 +158,9 @@ export const docs = {
         },
         {
           name: 'variant',
-          type: "'input' | 'ghost'",
+          type: "'input' | 'secondary' | 'ghost'",
           description:
-            'Visual trigger style. Input is the bordered form treatment; ghost matches toolbar buttons.',
+            'Visual trigger style. Input is the bordered form treatment; secondary matches the secondary buttons of the active theme (borderless and neutral-filled by default); ghost is borderless and transparent to match ghost buttons.',
           default: "'input'",
         },
         {
@@ -264,7 +265,7 @@ export const docs = {
       {
         guidance: true,
         description:
-          'Use variant="ghost" with a startIcon when the selector is triggered from a toolbar. Use alignment="end" when a wide surface should align its end edge to the trigger.',
+          'Use variant="secondary" beside secondary buttons, or variant="ghost" beside ghost buttons; add a startIcon when it helps identify the trigger. Use alignment="end" when a wide surface should align its end edge to the trigger.',
       },
       {
         guidance: true,
@@ -316,7 +317,7 @@ export const docsDense = {
   group: 'Selector',
   category: 'Form Controls',
   description:
-    'Input/ghost trigger + dialog-popover shell for rich custom selectors. Content gets value/onChange/close/state; content owns semantics. Use focus hooks and evaluate custom content against WCAG 2.2.',
+    'Input/secondary/ghost trigger + dialog-popover shell for rich custom selectors. Content gets value/onChange/close/state; content owns semantics. Use focus hooks and evaluate custom content against WCAG 2.2.',
   usage: {
     anatomy,
     description:
@@ -376,7 +377,8 @@ export const docsDense = {
     changeAction: 'Async action after onChange; drives optimistic value/busy.',
     children: 'Render custom dialog content from (value,onChange,close,state).',
     triggerLabel: 'Closed trigger label/content.',
-    variant: 'input for forms; ghost for toolbar triggers.',
+    variant:
+      'input for forms; secondary beside secondary buttons; ghost beside ghost buttons.',
     startIcon: 'Leading trigger icon.',
     placement: 'Popup placement.',
     alignment: 'Popup alignment.',
@@ -397,7 +399,7 @@ export const docsDense = {
     controlClassName: 'Class name for the visual control box.',
     controlStyle: 'Inline styles for the visual control box.',
     statusVariant:
-      'How status message is placed: attached overlaps below input (detached for ghost); detached floats below w/ spacing; tooltip shows on status icon.',
+      'How status message is placed: attached overlaps below input (detached for secondary and ghost); detached floats below w/ spacing; tooltip shows on status icon.',
     accessibility:
       'Custom content must provide its own accessible structure. Use focus hooks and evaluate against WCAG 2.2.',
   },

package/src/ComplexSelector/ComplexSelector.spec.md

@@ -23,7 +23,7 @@ design_specs: []
 architecture:
   [architecture:component-theming-surface, architecture:layer-runtime]
 contributing: []
-system_specs: []
+system_specs: [spec:AST-079/DEC-1]
 ---
 
 # ComplexSelector component contract
@@ -98,7 +98,8 @@ remain documented in `ComplexSelector.doc.mjs`.
 
 ### Representative states
 
-- Input and ghost variants use the same six-part anatomy and current targets.
+- Input, secondary, and ghost variants use the same six-part anatomy and current
+  targets.
 - The start slot is absent when `startIcon` is omitted. When present, exactly
   one of Icon-rendered start icon or Caller-rendered start content applies.
 - The Popup remains mounted in both states: it is hidden while closed and shown
@@ -188,13 +189,17 @@ caller-owned ReactNode content.
 
 ## Decision log
 
-- **DEC-1 — Anchored mode through `renderTrigger`.** A picker anchored in a row the
-  caller owns cannot host the Field shell or a nested button. The caller
-  renders the control and spreads the given props; the component keeps owning
-  open state through the existing `handleRef`/`onOpenChange`. Rejected: an
-  `anchorRef` plus a controlled `isOpen`, per the rule already written on
-  `ComplexSelectorHandle`. Proposed in a pull request; FR5 becomes policy only
-  when an owner approves this record.
+- **DEC-1 — Anchored mode through `renderTrigger`.**
+
+  **Decider:** pending owner review
+
+  A picker anchored in a row the caller owns cannot host the Field shell or a
+  nested button. The caller renders the control and spreads the given props; the
+  component keeps owning open state through the existing
+  `handleRef`/`onOpenChange`.
+
+  Rejected: an `anchorRef` plus a controlled `isOpen`, per the rule already
+  written on `ComplexSelectorHandle`.
 
 ## Open questions