@astryxdesign/core 0.7.1-canary.f2beffa → 0.7.1-canary.fb02ee9

package/dist/Field/InputClearButton.d.ts

@@ -1,8 +1,9 @@
 /**
  * @file InputClearButton.tsx
- * @input Uses React, Button, and Icon
- * @output Exports the public InputClearButton and an internal popup-aware variant,
- *   both with a contextual tooltip matching their required label.
+ * @input Uses React, Button, Icon, and the i18n translator
+ * @output Exports the public InputClearButton and an internal popup-aware variant.
+ *   Both show the localized generic "Clear" tooltip and keep the caller's
+ *   contextual label as the accessible name.
  * @position Shared primitive. Every input that renders a clear affordance —
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
@@ -13,7 +14,10 @@
 import type { ReactNode } from 'react';
 import * as stylex from '@stylexjs/stylex';
 export interface InputClearButtonProps {
-    /** Contextual accessible name for the button, such as "Clear Search". */
+    /**
+     * Contextual accessible name for the button, such as "Clear Search". The
+     * visible tooltip is always the localized generic "Clear".
+     */
     label: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     xstyle?: stylex.StyleXStyles;

package/dist/Field/InputClearButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAkD3C,MAAM,WAAW,qBAAqB;IACpC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,6BAA8B,SAAQ,qBAAqB;IACnE,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACtD,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACtD;AAiDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAExE;yBAFe,gBAAgB;;;AAIhC,4EAA4E;AAC5E,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,6BAA6B,GACnC,SAAS,CAEX"}
+{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAmD3C,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,6BAA8B,SAAQ,qBAAqB;IACnE,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACtD,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACtD;AAsDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAMxE;yBANe,gBAAgB;;;AAQhC,4EAA4E;AAC5E,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,6BAA6B,GACnC,SAAS,CAMX"}

package/dist/Field/InputClearButton.js

@@ -4,9 +4,10 @@
 
 /**
  * @file InputClearButton.tsx
- * @input Uses React, Button, and Icon
- * @output Exports the public InputClearButton and an internal popup-aware variant,
- *   both with a contextual tooltip matching their required label.
+ * @input Uses React, Button, Icon, and the i18n translator
+ * @output Exports the public InputClearButton and an internal popup-aware variant.
+ *   Both show the localized generic "Clear" tooltip and keep the caller's
+ *   contextual label as the accessible name.
  * @position Shared primitive. Every input that renders a clear affordance —
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
@@ -17,6 +18,7 @@
 import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
+import { useTranslator } from "../i18n/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -34,6 +36,7 @@ const styles = {
 };
 function renderInputClearButton({
   label,
+  tooltip,
   onClick,
   onPointerDown,
   onClickCapture,
@@ -49,8 +52,13 @@ function renderInputClearButton({
   return /*#__PURE__*/_jsx(Button, {
     variant: "ghost",
     size: "sm",
-    label: label,
-    tooltip: label,
+    label: label
+    // The field's label already sits beside the glyph, so the tooltip names
+    // only the action; repeating a long label reads as awkward copy. The
+    // contextual label stays the accessible name, which still contains
+    // the visible word (WCAG 2.5.3, label in name).
+    ,
+    tooltip: tooltip,
     className: buttonTargetClassName,
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "close",
@@ -70,11 +78,19 @@ function renderInputClearButton({
   });
 }
 export function InputClearButton(props) {
-  return renderInputClearButton(props);
+  const t = useTranslator();
+  return renderInputClearButton({
+    ...props,
+    tooltip: t('@astryx.inputClearButton.tooltip')
+  });
 }
 
 /** Internal variant used while popup-aware clear behavior is rolled out. */
 export function InternalInputClearButton(props) {
-  return renderInputClearButton(props);
+  const t = useTranslator();
+  return renderInputClearButton({
+    ...props,
+    tooltip: t('@astryx.inputClearButton.tooltip')
+  });
 }
 InputClearButton.displayName = 'InputClearButton';

package/dist/i18n/generated-locales/en.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/en.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkcpD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"en.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/en.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmcpD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/i18n/generated-locales/en.generated.js

@@ -359,6 +359,7 @@ const runtimeCatalog = {
   '@astryx.tableTree.expandAllRows': 'Expand all rows',
   '@astryx.textArea.charactersRemaining': '{count, number} {count, plural, one {character} other {characters}} remaining',
   '@astryx.textArea.charactersOverLimit': '{count, number} {count, plural, one {character} other {characters}} over the limit',
+  '@astryx.inputClearButton.tooltip': 'Clear',
   '@astryx.textInput.clearLabel': 'Clear {label}',
   '@astryx.thumbnail.remove': 'Remove {accessibleName}',
   '@astryx.thumbnail.open': 'Open {accessibleName}',

package/dist/i18n/generated-locales/pseudo.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pseudo.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/pseudo.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2cpD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"pseudo.generated.d.ts","sourceRoot":"","sources":["../../../src/i18n/generated-locales/pseudo.generated.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA4cpD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/i18n/generated-locales/pseudo.generated.js

@@ -359,6 +359,7 @@ const runtimeCatalog = {
   '@astryx.tableTree.expandAllRows': '⟦Éẋþàñð àłł řóŵš⟧',
   '@astryx.textArea.charactersRemaining': '⟦{count, number} {count, plural, one {character} other {characters}} řéɱàíñíñĝ⟧',
   '@astryx.textArea.charactersOverLimit': '⟦{count, number} {count, plural, one {character} other {characters}} óṽéř ţĥé łíɱíţ⟧',
+  '@astryx.inputClearButton.tooltip': '⟦Çłéàř⟧',
   '@astryx.textInput.clearLabel': '⟦Çłéàř {label}⟧',
   '@astryx.thumbnail.remove': '⟦Řéɱóṽé {accessibleName}⟧',
   '@astryx.thumbnail.open': '⟦Óþéñ {accessibleName}⟧',

package/locales/en.json

@@ -1407,6 +1407,10 @@
     "defaultMessage": "{count, number} {count, plural, one {character} other {characters}} over the limit",
     "description": "Screen-reader-only assertive announcement when the user has typed past a TextArea's maxLength. `{count}` is how many characters over — example: `3 characters over the limit`."
   },
+  "@astryx.inputClearButton.tooltip": {
+    "defaultMessage": "Clear",
+    "description": "Tooltip shown on hover or keyboard focus over the X button inside an input that clears its value. Verb, imperative. Shown alone beside the field, so it names only the action; the screen-reader label names the field separately."
+  },
   "@astryx.textInput.clearLabel": {
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that clears the value from a TextInput. Example: `Clear Email`, `Clear Name`."

package/locales/pseudo.json

@@ -1055,6 +1055,9 @@
   "@astryx.textArea.charactersOverLimit": {
     "defaultMessage": "⟦{count, number} {count, plural, one {character} other {characters}} óṽéř ţĥé łíɱíţ⟧"
   },
+  "@astryx.inputClearButton.tooltip": {
+    "defaultMessage": "⟦Çłéàř⟧"
+  },
   "@astryx.textInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.1-canary.f2beffa",
+  "version": "0.7.1-canary.fb02ee9",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -787,8 +787,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.1-canary.f2beffa",
-    "@astryxdesign/cli": "0.7.1-canary.f2beffa",
+    "@astryxdesign/a11y-spec": "0.7.1-canary.fb02ee9",
+    "@astryxdesign/cli": "0.7.1-canary.fb02ee9",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Collapsible/CollapsibleGroup.spec.md

@@ -133,6 +133,7 @@ Consumer migration instructions belong in consumer docs and release notes.
 - **AR1 — Child semantics remain primary.** Group coordination MUST preserve each Collapsible button's accessible name, `aria-expanded`, `aria-controls`, controlled region, and keyboard activation.
 - **AR2 — Presentation adds no competing interaction.** The divider wrapper MUST NOT add a role, focus target, accessible name, or keyboard behavior.
 - **AR3 — Direction stays with Collapsible.** Group chevron defaults MUST preserve `component:Collapsible/AR1–AR3`, including the inward leading cue under LTR and RTL.
+- **AR4 — The group adopts the APG Accordion pattern's required parts** (`spec:AST-020/FR15`): each direct item's header is a `button` whose accessible name is the item's title, with `aria-expanded` reflecting its panel, `aria-controls` naming the panel it reveals, and `aria-disabled` when it cannot be toggled; every enabled header sits in the page Tab order and Enter or Space toggles its panel, in `single` mode collapsing the sibling that was open; a disabled header carries `aria-disabled`, drops out of the Tab order, and cannot be toggled. Not adopted: a heading element around each header (this record requires none; the caller's document structure supplies headings), the optional `region` role on panels, and arrow-key or Home/End movement between headers — the group is a set of independent disclosures, not one composite control.
 
 ## Design relationships
 
@@ -171,17 +172,25 @@ The Group container is CollapsibleGroup's conditional aggregate wrapper. The oth
 
 ## Verification map
 
-| Contract               | Verification                                                                        | Representative states                                     | Mutation or failure expectation                                                                                                           | Audit section                          |
-| ---------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| FR1–FR4, ORD1          | `CollapsibleGroup.test.tsx`; `useCollapsible.test.tsx`                              | single/multiple; controlled/uncontrolled; valued/unvalued | A sibling stays open in single mode, closes in multiple mode, controlled state mutates internally, or an unvalued item loses local state. | `audit:CollapsibleGroup/behavior`      |
-| FR5–FR6, ORD2–ORD3     | `CollapsibleGroup.test.tsx`; `Collapsible.test.tsx`; `themingTargets.test.ts`       | plain/divided; each density; group/item/nested position   | Wrapper/target reachability changes, defaults stop reaching direct items, or presentation leaks into nested content.                      | `audit:CollapsibleGroup/theming`       |
-| AR1–AR3                | DOM and Chromium accessibility suites; component-owned Storybook fixture; RTL audit | open/closed; single/multiple; leading/trailing; LTR/RTL   | Disclosure semantics diverge from state, the wrapper becomes interactive, or leading direction stops mirroring.                           | `audit:CollapsibleGroup/accessibility` |
-| PR1–PR2, FR7           | source review plus context and interaction tests                                    | unchanged and changed state/presentation inputs           | An Effect/resource appears, unchanged payload broadcasts a new identity, or changed group behavior fails to reach consumers.              | `audit:CollapsibleGroup/code-health`   |
-| Consumer documentation | CLI component projection, docs checks, and `CollapsibleGroup.stories.tsx`           | every public concept and representative composition       | A released prop/default is undiscoverable or the owned browser route loses representative state coverage.                                 | `audit:CollapsibleGroup/docs`          |
+| Contract               | Verification                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Representative states                                                                            | Mutation or failure expectation                                                                                                                 | Audit section                          |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| FR1–FR4, ORD1          | `CollapsibleGroup.test.tsx`; `useCollapsible.test.tsx`                                                                                                                                                                                                                                                                                                                                                                                                       | single/multiple; controlled/uncontrolled; valued/unvalued                                        | A sibling stays open in single mode, closes in multiple mode, controlled state mutates internally, or an unvalued item loses local state.       | `audit:CollapsibleGroup/behavior`      |
+| FR5–FR6, ORD2–ORD3     | `CollapsibleGroup.test.tsx`; `Collapsible.test.tsx`; `themingTargets.test.ts`                                                                                                                                                                                                                                                                                                                                                                                | plain/divided; each density; group/item/nested position                                          | Wrapper/target reachability changes, defaults stop reaching direct items, or presentation leaks into nested content.                            | `audit:CollapsibleGroup/theming`       |
+| AR4                    | `Collapsible.test.tsx` (disabled trigger: `aria-disabled`, out of the Tab order, no toggle); `CollapsibleGroup.test.tsx` (single/multiple coordination, `aria-expanded`, Enter activation); `Collapsible.a11y.test.tsx` and `Collapsible.a11y.chromium.spec.ts` (disclosure semantics, Space, Tab reachability for a lone item); grouped Tab order, Space in a group, and no arrow-key movement under the Accordion contract (`internal/a11y-spec`, pending) | single/multiple; open/closed; a disabled item, open or closed; Tab order; Enter/Space round trip | A header loses its button role, name, `aria-expanded`, or `aria-controls`; Enter or Space stops toggling; arrow keys move focus between headers | `audit:CollapsibleGroup/accessibility` |
+| AR1–AR3                | DOM and Chromium accessibility suites; component-owned Storybook fixture; RTL audit                                                                                                                                                                                                                                                                                                                                                                          | open/closed; single/multiple; leading/trailing; LTR/RTL                                          | Disclosure semantics diverge from state, the wrapper becomes interactive, or leading direction stops mirroring.                                 | `audit:CollapsibleGroup/accessibility` |
+| PR1–PR2, FR7           | source review plus context and interaction tests                                                                                                                                                                                                                                                                                                                                                                                                             | unchanged and changed state/presentation inputs                                                  | An Effect/resource appears, unchanged payload broadcasts a new identity, or changed group behavior fails to reach consumers.                    | `audit:CollapsibleGroup/code-health`   |
+| Consumer documentation | CLI component projection, docs checks, and `CollapsibleGroup.stories.tsx`                                                                                                                                                                                                                                                                                                                                                                                    | every public concept and representative composition                                              | A released prop/default is undiscoverable or the owned browser route loses representative state coverage.                                       | `audit:CollapsibleGroup/docs`          |
 
 ## Decision log
 
-None. This audit records shipped behavior and delegates chevron representation to the current Collapsible contract; it makes no new product decision.
+### DEC-1 — Adopt Accordion's required parts; keep the headers independent
+
+**Reference:** `component:CollapsibleGroup/DEC-1`
+**Decider:** `cixzhang`, `2026-10-13`
+
+The group's headers already play the accordion header's role, so they carry its name, state, relationship, and Enter/Space activation (AR4). They stay in the page Tab order without arrow-key or Home/End movement because the group coordinates independent disclosures rather than acting as one composite control; a heading wrapper is left to the caller's document structure.
+
+Rejected: arrow-key movement between headers; a required heading element around each header.
 
 ## Open questions
 

package/src/Field/InputClearButton.test.tsx

@@ -25,6 +25,7 @@ import {
   type InputClearButtonProps,
 } from './InputClearButton';
 import {Icon, registerIcons, resetIcons} from '../Icon';
+import {InternationalizationProvider} from '../i18n';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
 import {declaredValue} from '../__tests__/stylexDeclarations';
@@ -95,13 +96,23 @@ describe('InputClearButton public props', () => {
 });
 
 describe('InputClearButton', () => {
-  it('uses the contextual label for the tooltip and accessible name', async () => {
+  it('shows a generic "Clear" tooltip while the accessible name keeps the field label', async () => {
+    // A long field label repeated in the tooltip reads as awkward copy
+    // ("Clear Assigned engineering partner"); the field's own label already
+    // sits beside the glyph. The contextual name stays for assistive tech.
     const showPopover = vi.spyOn(HTMLElement.prototype, 'showPopover');
-    render(<InputClearButton label="Clear Search" onClick={() => {}} />);
+    render(
+      <InputClearButton
+        label="Clear Assigned engineering partner"
+        onClick={() => {}}
+      />,
+    );
 
-    const button = screen.getByRole('button', {name: 'Clear Search'});
+    const button = screen.getByRole('button', {
+      name: 'Clear Assigned engineering partner',
+    });
     const tooltip = screen.getByRole('tooltip', {hidden: true});
-    expect(tooltip).toHaveTextContent(/^Clear Search$/);
+    expect(tooltip).toHaveTextContent(/^Clear$/);
     expect(button.getAttribute('aria-describedby')).toBe(tooltip.id);
 
     fireEvent.mouseEnter(button);
@@ -109,6 +120,20 @@ describe('InputClearButton', () => {
     showPopover.mockRestore();
   });
 
+  it('localizes the tooltip through the catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="en"
+        overrides={{en: {'@astryx.inputClearButton.tooltip': 'Leeren'}}}>
+        <InputClearButton label="Suche leeren" onClick={() => {}} />
+      </InternationalizationProvider>,
+    );
+    expect(screen.getByRole('button', {name: 'Suche leeren'})).toBeTruthy();
+    expect(screen.getByRole('tooltip', {hidden: true})).toHaveTextContent(
+      /^Leeren$/,
+    );
+  });
+
   it('renders a real button with the given accessible label', () => {
     render(<InputClearButton label="Clear" onClick={() => {}} />);
     const button = screen.getByRole('button', {name: 'Clear'});

package/src/Field/InputClearButton.tsx

@@ -4,9 +4,10 @@
 
 /**
  * @file InputClearButton.tsx
- * @input Uses React, Button, and Icon
- * @output Exports the public InputClearButton and an internal popup-aware variant,
- *   both with a contextual tooltip matching their required label.
+ * @input Uses React, Button, Icon, and the i18n translator
+ * @output Exports the public InputClearButton and an internal popup-aware variant.
+ *   Both show the localized generic "Clear" tooltip and keep the caller's
+ *   contextual label as the accessible name.
  * @position Shared primitive. Every input that renders a clear affordance —
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
@@ -19,6 +20,7 @@ import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
+import {useTranslator} from '../i18n';
 import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
@@ -67,7 +69,10 @@ const styles = stylex.create({
 });
 
 export interface InputClearButtonProps {
-  /** Contextual accessible name for the button, such as "Clear Search". */
+  /**
+   * Contextual accessible name for the button, such as "Clear Search". The
+   * visible tooltip is always the localized generic "Clear".
+   */
   label: string;
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
   xstyle?: stylex.StyleXStyles;
@@ -83,10 +88,11 @@ interface InternalInputClearButtonProps extends InputClearButtonProps {
 type InputClearButtonRenderProps = InputClearButtonProps &
   Partial<
     Pick<InternalInputClearButtonProps, 'onPointerDown' | 'onClickCapture'>
-  >;
+  > & {tooltip: string};
 
 function renderInputClearButton({
   label,
+  tooltip,
   onClick,
   onPointerDown,
   onClickCapture,
@@ -100,7 +106,11 @@ function renderInputClearButton({
       variant="ghost"
       size="sm"
       label={label}
-      tooltip={label}
+      // The field's label already sits beside the glyph, so the tooltip names
+      // only the action; repeating a long label reads as awkward copy. The
+      // contextual label stays the accessible name, which still contains
+      // the visible word (WCAG 2.5.3, label in name).
+      tooltip={tooltip}
       className={buttonTargetClassName}
       icon={
         <Icon
@@ -128,14 +138,22 @@ function renderInputClearButton({
 }
 
 export function InputClearButton(props: InputClearButtonProps): ReactNode {
-  return renderInputClearButton(props);
+  const t = useTranslator();
+  return renderInputClearButton({
+    ...props,
+    tooltip: t('@astryx.inputClearButton.tooltip'),
+  });
 }
 
 /** Internal variant used while popup-aware clear behavior is rolled out. */
 export function InternalInputClearButton(
   props: InternalInputClearButtonProps,
 ): ReactNode {
-  return renderInputClearButton(props);
+  const t = useTranslator();
+  return renderInputClearButton({
+    ...props,
+    tooltip: t('@astryx.inputClearButton.tooltip'),
+  });
 }
 
 InputClearButton.displayName = 'InputClearButton';

package/src/Grid/Grid.spec.md

@@ -44,36 +44,6 @@ layout, targets, or public API.
 
 Consumer migration instructions belong in consumer docs and release notes.
 
-### DEP-0010 — Deprecate the fixed meaning of numeric `Grid` `columns`
-
-| Field            | Value                                                                                                                                                                                               |
-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| id               | `DEP-0010`                                                                                                                                                                                          |
-| cleanup          | `CLN-0019`                                                                                                                                                                                          |
-| package          | `@astryxdesign/core`                                                                                                                                                                                |
-| surface          | `Grid` `columns={N}`, which renders exactly N equal tracks (`repeat(N, 1fr)`)                                                                                                                       |
-| old contract     | A numeric `columns` value is an explicit equal-width track count at every width                                                                                                                     |
-| replacement      | `columns={{count: N, isFixed: true}}` keeps exactly N tracks                                                                                                                                        |
-| direct authority | `component:Grid`, with `family:layout-primitives` representative matrix row "Grid / fixed columns". Owners: `cixzhang` (`component:Grid`); `cixzhang`, `imdreamrunner` (`family:layout-primitives`) |
-| warning          | Consumer docs and the release notes name `DEP-0010` and the fixed shape. No runtime warning (`spec:AST-017` FR29)                                                                                   |
-| migration        | Mechanical where the fixed count is wanted: rewrite `columns={N}` to `columns={{count: N, isFixed: true}}`. Keeping the number accepts the new reflow                                               |
-| codemod          | None yet. A preserving codemod is mechanical, but it would opt every caller out of the change it exists to deliver                                                                                  |
-| downstream       | In-repo fixed rows such as week rows use the fixed shape                                                                                                                                            |
-| transition       | no prior transition                                                                                                                                                                                 |
-| state            | `proposed`                                                                                                                                                                                          |
-| open decision    | This record is draft and lists new responsive behavior as a non-goal; the family matrix pins numeric columns as fixed. Both need an owner ruling                                                    |
-| target plan      | `CLN-0019` in the next minor release                                                                                                                                                                |
-
-### CLN-0019 — Numeric `columns` means at most N columns
-
-| Field     | Value                                                                                                                                                                                                 |
-| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| id        | `CLN-0019`                                                                                                                                                                                            |
-| lifecycle | `DEP-0010`                                                                                                                                                                                            |
-| delta     | A numeric `columns` value renders up to N columns of at least 12rem and fewer when the grid is narrower; a `GridSpan` in such a grid takes the full row once the grid has fewer columns than it spans |
-| rollback  | Restore `repeat(N, 1fr)` for numeric `columns` from the final-patch baseline                                                                                                                          |
-| state     | `pending` — lands in a declared minor with its `[breaking]` Changeset                                                                                                                                 |
-
 ## Ownership boundary
 
 **Owns**
@@ -110,6 +80,43 @@ in the canonical `Grid.doc.mjs` and the subordinate `GridSpan.doc.mjs`;
 - A Spanning item may span columns, rows, both, or neither while retaining the
   same target.
 
+### Responsive contract
+
+The `columns` prop decides how many column tracks Grid lays out and whether
+that count changes with the container's width. Other inputs change the result
+only by changing what `columns` has to fit: `width` and `maxWidth` set the
+container width a reflowing shape measures against; an `xstyle`, `className`,
+or `style` that sets the track template (including under a media query)
+replaces the computed one; and a numeric GridSpan wider than the grid's tracks
+makes the browser add implicit tracks to the whole grid, which later items flow
+into. No other prop changes the count.
+
+| `columns`                   | Behavior                                                                                                                                                                                                                                                    | Reflows |
+| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `N` (number)                | Exactly N tracks that share the row equally at every container width; a child wider than its share widens its track and can push the grid past a narrow container.                                                                                          | never   |
+| `{minWidth}`                | As many tracks as fit while each stays at least `minWidth` px wide. A container narrower than `minWidth` keeps one `minWidth`-wide track that overflows it. Empty tracks keep their width.                                                                  | yes     |
+| `{minWidth, repeat: 'fit'}` | As above, and empty tracks collapse so the present items stretch across the row.                                                                                                                                                                            | yes     |
+| `{minWidth, max}`           | Up to `max` tracks, each at least `minWidth` px and never narrower than an equal share of the row; fewer tracks as the container narrows, down to one track that shrinks to the container rather than overflowing it. `repeat: 'fit'` applies the same way. | yes     |
+| omitted, `0`, or negative   | One track.                                                                                                                                                                                                                                                  | never   |
+
+- `gap` and `columnGap` count toward the width a reflowing shape has to fit, so
+  the full count is reached only when the container has room for the tracks and
+  the gaps between them. They never change the count of a numeric `columns`.
+- `height`, `minHeight`, `rowHeight`, `align`, and `justify` size or place the
+  container and its items and do not change the column count.
+- GridSpan spans `k` tracks, or the whole row for `'full'`. `'full'` never
+  adds tracks. A numeric span wider than the grid's current tracks makes the
+  browser add implicit tracks to the grid for the remainder; they persist for
+  every row, items placed before and after the span flow into them, and once
+  they exist `'full'` covers only the explicit tracks. In a reflowing grid keep
+  spans within the smallest count the grid can reach or use `'full'`.
+- For columns that reflow on small screens, use `{minWidth, max}`: `max` is
+  what lets the last track shrink to a narrow container, so `{minWidth}` alone
+  still overflows a phone narrower than `minWidth`. A numeric `columns` never
+  reflows, so a four-up numeric row on a phone renders four narrow tracks, or
+  overflows when a child cannot shrink to its share; that is the fixed
+  contract, not a defect.
+
 ### Representative states
 
 | State          | Required invariant                                        | Allowed variation                                     |
@@ -178,8 +185,19 @@ relationship.
 
 ## Decision log
 
-None. This draft records current facts and introduces no component-local design,
-layout, accessibility, or API decision.
+### DEC-1 — Numeric `columns` stays fixed; reflow uses the existing object form
+
+**Decider:** `cixzhang`, `2026-10-11`
+
+`columns={N}` means exactly N equal tracks at every width, and a grid that
+reflows on small screens uses `{minWidth, max?, repeat?}`. Two shapes, one
+responsibility each: the number is the fixed contract, the object form is the
+responsive one, and the record and the docs say so where a caller first meets
+`columns`.
+
+Rejected: redefining the number as "at most N" (breaks every released numeric
+grid and needs an opt-out shape); a `{count, isFixed}` shape (duplicates the
+number and the `max` cap).
 
 ## Open questions
 

package/src/Markdown/Markdown.fr23.perf.test.ts

@@ -19,8 +19,10 @@
  * The timed region inside each process is the spec's protocol, unsmoothed:
  * ten untimed warmups, then one median of nine alternating paired rounds,
  * for a stable plugin list and a recreated equivalent one, against the
- * omitted baseline. One over-budget A/B triggers two fresh-process attempts;
- * the unchanged budget fails only when at least two of the three exceed it.
+ * omitted baseline. A first attempt within budget on both paths certifies
+ * them. Otherwise up to nine fresh-process attempts decide each path on its
+ * own: a path fails the unchanged budget when a majority of the nine (five)
+ * exceed it, and collection stops as soon as both paths are decided.
  */
 
 import {execFileSync} from 'node:child_process';
@@ -166,18 +168,64 @@ function logBenchmarkResult(result: BenchmarkResult, attempt: number): void {
   );
 }
 
+/** The two paths FR23 measures; each is held to the budget on its own. */
+const FR23_PATHS = ['stable', 'recreated'] as const;
+type FR23Path = (typeof FR23_PATHS)[number];
+
+/**
+ * Fresh-process attempts that decide a path after a noisy first one. On CI a
+ * clean representative set measures about 1.19 at 500 sections with about
+ * ±0.04 of sample noise, so a single attempt lands over the budget roughly
+ * one time in ten; a majority of nine does so well under one time in a
+ * thousand, while a slowdown of 0.1 or more still exceeds it nearly always.
+ */
+const FR23_ATTEMPTS = 9;
+const FR23_MAJORITY = Math.floor(FR23_ATTEMPTS / 2) + 1;
+
+function attemptsOverBudget(
+  attempts: ReadonlyArray<BenchmarkResult>,
+  fr23Path: FR23Path,
+): number {
+  return attempts.filter(result => result[fr23Path] > FR23_BUDGET).length;
+}
+
+/** Whether the remaining attempts can no longer change this path's verdict. */
+function pathDecided(
+  attempts: ReadonlyArray<BenchmarkResult>,
+  fr23Path: FR23Path,
+): boolean {
+  const over = attemptsOverBudget(attempts, fr23Path);
+  return over >= FR23_MAJORITY || attempts.length - over >= FR23_MAJORITY;
+}
+
 function collectFR23Attempts(
   sections: number,
   runAttempt: (sections: number) => BenchmarkResult = runSettledBenchmark,
 ): ReadonlyArray<BenchmarkResult> {
   const attempts = [runAttempt(sections)];
-  if (exceedsFR23Budget(attempts[0])) {
-    attempts.push(runAttempt(sections));
+  if (!exceedsFR23Budget(attempts[0])) {
+    return attempts;
+  }
+  while (
+    attempts.length < FR23_ATTEMPTS &&
+    !FR23_PATHS.every(fr23Path => pathDecided(attempts, fr23Path))
+  ) {
     attempts.push(runAttempt(sections));
   }
   return attempts;
 }
 
+/** The paths whose attempts exceed the budget in a majority of nine. */
+function pathsOverBudget(
+  attempts: ReadonlyArray<BenchmarkResult>,
+): ReadonlyArray<FR23Path> {
+  return FR23_PATHS.filter(fr23Path =>
+    attempts.length > 1
+      ? attemptsOverBudget(attempts, fr23Path) >= FR23_MAJORITY
+      : attemptsOverBudget(attempts, fr23Path) > 0,
+  );
+}
+
 describe('Markdown FR23 helper overhead', () => {
   it('reports one nine-pair median without selecting the cheapest baseline', () => {
     // Paired ratios: four 1.1s, one 1.2, four 10s. The median is 1.2,
@@ -218,35 +266,104 @@ describe('Markdown FR23 helper overhead', () => {
     }
   });
 
-  it('retries one over-budget A/B twice and uses the three-attempt majority', () => {
+  describe('deciding each path from fresh-process attempts', () => {
     const result = (stable: number, recreated: number): BenchmarkResult => ({
-      sections: 200,
+      sections: 500,
       stable,
       recreated,
       control: 1,
     });
-    const passFirst = [result(1.2, 1.22)];
-    expect(collectFR23Attempts(200, () => passFirst.shift()!)).toHaveLength(1);
-
-    const retryResults = [
-      result(1.27, 1.1),
-      result(1.2, 1.22),
-      result(1.18, 1.19),
-    ];
-    const attempts = collectFR23Attempts(200, () => retryResults.shift()!);
-    expect(attempts).toHaveLength(3);
-    expect(attempts.filter(exceedsFR23Budget)).toHaveLength(1);
-
-    const majorityResults = [
-      result(1.27, 1.1),
-      result(1.2, 1.26),
-      result(1.18, 1.19),
-    ];
-    expect(
-      collectFR23Attempts(200, () => majorityResults.shift()!).filter(
-        exceedsFR23Budget,
-      ),
-    ).toHaveLength(2);
+    const run = (results: BenchmarkResult[]) => {
+      const queue = [...results];
+      let calls = 0;
+      const attempts = collectFR23Attempts(500, () => {
+        calls++;
+        const next = queue.shift();
+        if (next == null) {
+          throw new Error('asked for an unplanned attempt');
+        }
+        return next;
+      });
+      return {attempts, calls, failing: pathsOverBudget(attempts)};
+    };
+
+    it('certifies both paths from one attempt within budget', () => {
+      const {calls, failing} = run([result(1.2, 1.22)]);
+      expect(calls).toBe(1);
+      expect(failing).toEqual([]);
+    });
+
+    it('fails a single attempt over budget only if no retry ran', () => {
+      expect(pathsOverBudget([result(1.26, 1.2)])).toEqual(['stable']);
+    });
+
+    it('judges each path by its own majority, not either path per attempt', () => {
+      // Main run 38393555595: stable was over in attempt 1 and recreated in
+      // attempt 2, which the old either-path-per-attempt count read as a
+      // two-of-three failure although neither path was over in a majority.
+      const {attempts, failing} = run([
+        result(1.256, 1.201),
+        result(1.145, 1.275),
+        result(1.183, 1.187),
+        result(1.18, 1.2),
+        result(1.19, 1.21),
+        result(1.2, 1.22),
+        result(1.17, 1.19),
+      ]);
+      // Each path needs five attempts within budget; each had one over.
+      expect(attempts).toHaveLength(6);
+      expect(failing).toEqual([]);
+    });
+
+    it('stops as soon as both paths are decided', () => {
+      // Recreated is decided after five passes, stable after one more.
+      const {calls} = run([
+        result(1.3, 1.2),
+        result(1.2, 1.2),
+        result(1.2, 1.2),
+        result(1.2, 1.2),
+        result(1.2, 1.2),
+        result(1.2, 1.2),
+      ]);
+      expect(calls).toBe(6);
+    });
+
+    it('fails a path that is over budget in a majority of nine', () => {
+      const {attempts, failing} = run([
+        result(1.3, 1.2),
+        result(1.27, 1.2),
+        result(1.2, 1.2),
+        result(1.26, 1.21),
+        result(1.22, 1.2),
+        result(1.28, 1.19),
+        result(1.26, 1.2),
+      ]);
+      expect(attempts).toHaveLength(7);
+      expect(failing).toEqual(['stable']);
+    });
+
+    it('fails a consistent slowdown on both paths after five attempts', () => {
+      const {calls, failing} = run(
+        Array.from({length: 9}, () => result(1.4, 1.42)),
+      );
+      expect(calls).toBe(5);
+      expect(failing).toEqual(['stable', 'recreated']);
+    });
+
+    it('never runs more than nine attempts', () => {
+      const {calls} = run([
+        result(1.3, 1.3),
+        result(1.2, 1.2),
+        result(1.3, 1.3),
+        result(1.2, 1.2),
+        result(1.3, 1.3),
+        result(1.2, 1.2),
+        result(1.3, 1.3),
+        result(1.2, 1.2),
+        result(1.3, 1.3),
+      ]);
+      expect(calls).toBe(9);
+    });
   });
 
   it.each([200, 500])(
@@ -257,28 +374,32 @@ describe('Markdown FR23 helper overhead', () => {
       // attempt counts: a value over budget is machine noise, so that process
       // is replaced before its A/B result can certify or fail the helpers.
       //
-      // A single over-budget A/B is also noisy at this threshold. Retry that
-      // result twice in fresh processes and fail only when a majority (at
-      // least two of the three independent attempts) exceeds the unchanged
-      // 1.25 budget.
+      // A single over-budget A/B is also noisy at this threshold. Each path
+      // is then decided by a majority of up to nine fresh-process attempts
+      // against the unchanged 1.25 budget.
       const attempts = collectFR23Attempts(sections);
-      if (attempts.length === 3) {
+      if (attempts.length > 1) {
         console.log(
           `  ${sections} sections: first A/B exceeded ${FR23_BUDGET};` +
-            ' retried twice in fresh processes',
+            ` decided each path from ${attempts.length} fresh processes`,
         );
       }
       attempts.forEach((result, index) =>
         logBenchmarkResult(result, index + 1),
       );
-      const overBudget = attempts.filter(exceedsFR23Budget).length;
+      const failing = pathsOverBudget(attempts);
       expect(
-        overBudget,
-        `${overBudget} of ${attempts.length} fresh FR23 attempts exceeded ` +
-          `the ${FR23_BUDGET} budget`,
-      ).toBeLessThan(2);
+        failing,
+        failing
+          .map(
+            fr23Path =>
+              `${fr23Path}: ${attemptsOverBudget(attempts, fr23Path)} of ` +
+              `${attempts.length} fresh FR23 attempts exceeded the ${FR23_BUDGET} budget`,
+          )
+          .join('; '),
+      ).toEqual([]);
     },
-    300_000,
+    600_000,
   );
 
   it('fails loudly when the benchmark process cannot produce a result', () => {

package/src/i18n/generated-locales/en.generated.ts

@@ -386,6 +386,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '{count, number} {count, plural, one {character} other {characters}} remaining',
   '@astryx.textArea.charactersOverLimit':
     '{count, number} {count, plural, one {character} other {characters}} over the limit',
+  '@astryx.inputClearButton.tooltip': 'Clear',
   '@astryx.textInput.clearLabel': 'Clear {label}',
   '@astryx.thumbnail.remove': 'Remove {accessibleName}',
   '@astryx.thumbnail.open': 'Open {accessibleName}',

package/src/i18n/generated-locales/pseudo.generated.ts

@@ -393,6 +393,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '⟦{count, number} {count, plural, one {character} other {characters}} řéɱàíñíñĝ⟧',
   '@astryx.textArea.charactersOverLimit':
     '⟦{count, number} {count, plural, one {character} other {characters}} óṽéř ţĥé łíɱíţ⟧',
+  '@astryx.inputClearButton.tooltip': '⟦Çłéàř⟧',
   '@astryx.textInput.clearLabel': '⟦Çłéàř {label}⟧',
   '@astryx.thumbnail.remove': '⟦Řéɱóṽé {accessibleName}⟧',
   '@astryx.thumbnail.open': '⟦Óþéñ {accessibleName}⟧',