@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/TabList/__tests__/TabListOverflow.interaction.browser.spec.ts

@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file TabListOverflow.interaction.browser.spec.ts
+ * @input The built Overflow and WithMenu TabList stories, in a real browser,
+ *   on a page whose reset lets flex items shrink below their content
+ *   (`* { min-width: 0 }`)
+ * @output Proof that every stop in an overflowing strip, each hugging tab
+ *   and a TabMenu trigger, keeps at least its content's width while the
+ *   strip scrolls
+ * @position Layout evidence for Tab's and TabMenu's hug sizing in
+ *   /packages/core/src/TabList
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+/** Opens a built story and waits for its tab strip. */
+async function openStory(page: Page, id: string): Promise<void> {
+  const params = new URLSearchParams({id, viewMode: 'story'});
+  await page.goto(`${storybook.origin}/iframe.html?${params}`);
+  await page.locator('.astryx-tab-strip').first().waitFor();
+}
+
+/** A common page reset that lets flex items shrink below their content. */
+async function allowShrinkBelowContent(page: Page): Promise<void> {
+  await page.addStyleTag({content: '* { min-width: 0; }'});
+}
+
+/** Each stop's rendered width against its content's, and the strip's overflow. */
+async function measureStrip(page: Page) {
+  return page.evaluate(() => {
+    const strip = document.querySelector('.astryx-tab-strip');
+    if (strip == null) {
+      throw new Error('no tab strip');
+    }
+    let scroller: Element | null = strip;
+    while (
+      scroller != null &&
+      scroller.scrollWidth <= scroller.clientWidth + 1
+    ) {
+      scroller = scroller.parentElement;
+    }
+    const stops = [
+      ...strip.querySelectorAll<HTMLElement>(
+        'button:not(.astryx-tab-scroll-button)',
+      ),
+    ].map(stop => ({
+      label: stop.textContent?.trim() ?? '',
+      width: stop.getBoundingClientRect().width,
+      content: stop.scrollWidth,
+    }));
+    return {stops, scrolls: scroller != null};
+  });
+}
+
+test('in a narrow strip every hugging tab keeps its label width and the strip scrolls', async ({
+  page,
+}) => {
+  await page.setViewportSize({width: 362, height: 700});
+  await openStory(page, 'core-tablist--overflow');
+  await allowShrinkBelowContent(page);
+  const {stops, scrolls} = await measureStrip(page);
+  expect(stops.length).toBeGreaterThan(4);
+  for (const stop of stops) {
+    expect(stop.width, stop.label).toBeGreaterThanOrEqual(stop.content - 1);
+  }
+  expect(scrolls).toBe(true);
+});
+
+test('in a narrow strip with a TabMenu, the menu trigger keeps its width too', async ({
+  page,
+}) => {
+  await page.setViewportSize({width: 170, height: 700});
+  await openStory(page, 'core-tablist--with-menu');
+  await allowShrinkBelowContent(page);
+  const {stops} = await measureStrip(page);
+  const trigger = stops.find(stop => stop.label.startsWith('More'));
+  expect(trigger).toBeDefined();
+  for (const stop of stops) {
+    expect(stop.width, stop.label).toBeGreaterThanOrEqual(stop.content - 1);
+  }
+});

package/src/TabList/__tests__/Tabs.a11y.chromium.spec.ts

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

package/src/Table/Table.spec.md

@@ -15,9 +15,12 @@ verified_by:
     apps/storybook/stories/Table.stories.tsx,
     packages/core/src/Table/Table.test.tsx,
     packages/core/src/Table/__tests__/TableScroll.a11y.chromium.spec.ts,
+    packages/core/src/Table/__tests__/Table.a11y.test.tsx,
+    packages/core/src/Table/__tests__/Table.a11y.chromium.spec.ts,
     packages/core/src/Table/Table.perf.test.tsx,
     packages/core/src/Table/plugins/selection/useTableSelection.test.tsx,
     packages/core/src/Table/plugins/sortable/useTableSortable.test.tsx,
+    packages/core/src/Table/plugins/sortable/__tests__/useTableSortable.a11y.test.tsx,
     packages/core/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx,
     packages/cli/foundation/discovery/theming-targets.test.mjs,
     packages/cli/api/theme/targets/targets.test.mjs,
@@ -67,6 +70,8 @@ generated anatomy, accessibility, migration, and evidence belong to each listed
   Table element, or Scroll-region behavior changes. 0.7.0 removes the deprecated
   `base-table` target alias while preserving `table`.
 - Controlled/uncontrolled behavior: unchanged
+- FR15 adds `useTableRowExpansion`'s optional `animatedLayout` option, an
+  additive change; without it, rows change at once as before.
 - Migration decision: `spec:AST-025` FR12, FR14, FR19, FR21, and DEC-1; replace
   `base-table` theme keys and `.astryx-base-table` selectors with `table` and
   `.astryx-table`, or run `astryx upgrade --from 0.6.3 --apply --path .`
@@ -103,7 +108,8 @@ Consumer migration instructions belong in consumer docs and release notes.
   concerns for `useTableRowStatus`.
 - New targets for current untargeted plugin parts, or correction of current
   target-reachability gaps.
-- New public API, theme target, or alias.
+- New public API, theme target, or alias, beyond `useTableRowExpansion`'s
+  optional `animatedLayout` option (FR15).
 
 ## Public concepts
 
@@ -119,21 +125,23 @@ documented in `Table.doc.mjs` and the member and module docs.
 
 ## Behavioral and layout contract
 
-| ID   | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Basis                                                                  | Evidence state                                                                                        |
-| ---- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| FR1  | By default, Styled Table renders one named Scroll region around one observed content box and one semantic Table. The Scroll region enters the keyboard order and contains inline overscroll only while inline content effectively overflows; fitting content passes scroll gestures to its ancestor. Explicit scroll-wrapper plugin HTML attributes remain authoritative.                                                                                                                                                                                                                                                                                                           | `spec:AST-025` FR12, FR14, FR19, FR21; current source, docs, and tests | Verified fitting and inline-overflow transitions through the shared `useScrollableArea` behavior core |
-| FR2  | Data-driven mode renders a Body section and a Header section with Column header cells when columns are present. Each data item renders a standard Row and Cells; an empty data array instead renders the configured empty-state row when enabled. It never creates a Footer section.                                                                                                                                                                                                                                                                                                                                                                                                | Current source, docs, and tests                                        | Verified current behavior; no new behavior decided                                                    |
-| FR3  | Children mode passes caller composition through to the Table. TableHeader, TableBody, and TableFooter provide the respective sections, and TableRow, TableHeaderCell, and TableCell provide standard rows and cells.                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Current source, docs, and tests                                        | Verified current composition; no new API or DOM rule                                                  |
-| FR4  | `Table.doc.mjs` is the canonical aggregate consumer owner for the eight current targets: `table`, `table-scroll-wrapper`, `table-header`, `table-body`, `table-footer`, `table-row`, `table-cell`, and `table-header-cell`. Member docs retain direct lookup metadata through `subComponentOf: 'Table'`.                                                                                                                                                                                                                                                                                                                                                                            | Current docs and CLI target tests                                      | Verified parent ownership; focused placement coverage is partial                                      |
-| FR5  | For a sortable column, useTableSortable renders a Sort control around the column label, an Icon-owned Sort indicator glyph, and a numeric Sort priority only while multi-sort has more than one active entry.                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Current source, docs, and tests                                        | Control and priority are tested; glyph presence is source-inspected only                              |
-| FR6  | useTableSelection renders CheckboxInput-owned Selection controls in the generated selection Column header cell and each selectable body Cell; selection remains row state rather than separate anatomy.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Current source, docs, and tests                                        | Verified stable delegated controls; no target or state change                                         |
-| FR7  | For an expandable row, useTableRowExpansion renders an Expansion control with an Icon-owned Expansion glyph and conditionally appends an Expanded detail panel whose cell spans the column count captured by that plugin's `transformColumns` step.                                                                                                                                                                                                                                                                                                                                                                                                                                 | Current source, docs, and tests                                        | Verified stable plugin parts; current target gaps remain                                              |
-| FR8  | Empty data renders the default compact EmptyState unless the caller supplies replacement content or disables it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Current source, docs, and tests                                        | Verified conditional delegation; caller content remains outside ownership                             |
-| FR9  | Table converts the caller's named plugin record into one ordered array after its built-in styling plugin. Known names use the current canonical sequence `columnSettings → sort → tree → selection → pagination`; every other name follows that known set while preserving its record insertion order.                                                                                                                                                                                                                                                                                                                                                                              | Current source and docs                                                | Current shared ordering; canonical-name coverage is source-inspected                                  |
-| FR10 | Every applicable non-context transform runs sequentially in the resolved plugin-array order, so a later plugin receives the value returned by every earlier successful plugin. A throwing transform reports a development error and leaves the prior accumulated value in the pipeline.                                                                                                                                                                                                                                                                                                                                                                                             | Current source and tests                                               | Sequential composition is tested; failure isolation is source-inspected                               |
-| FR11 | `transformColumns` completes before element transforms. Table then applies table, header-cell/header-row, body-cell/body-row, scroll-wrapper, and context phases at their render points. Header-cell contributions use `before`, `content`, `after`, `overlay`, and `below` slots. Context transforms run in reverse so the first plugin becomes the outermost provider.                                                                                                                                                                                                                                                                                                            | Current source, types, and tests                                       | Transform application is tested; complete cross-phase order is source-inspected                       |
-| FR12 | When built-in and named plugin references are unchanged, Table reuses the resolved plugin array; unknown/custom plugin value identity and insertion order remain stable inputs to memoization.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Current source and performance tests                                   | Current performance contract; focused named-order coverage is partial                                 |
-| FR13 | In data-driven mode, each explicit column whose `width` is omitted keeps one equal flexible share and a 60px readability floor. A column sets its own floor with `proportional(value, {minWidth})`, which replaces the 60px floor for that column; Table has no table-wide floor setting. Resolution is a pure function of the final column definitions: row values, rendered header/body measurement, locale, sorting, filtering, virtualization, and loading state do not change any floor. Explicit pixel and proportional widths retain their authored floors. When the resolved floors exceed available inline space, the existing Scroll region provides horizontal overflow. | `component:Table/DEC-2`; current source and tests                      | Verified by width-resolution unit coverage and the ResponsiveScroll real-browser geometry fixture     |
+| ID   | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Basis                                                                  | Evidence state                                                                                                                                                                       |
+| ---- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| FR1  | By default, Styled Table renders one named Scroll region around one observed content box and one semantic Table. The Scroll region enters the keyboard order and contains inline overscroll only while inline content effectively overflows; fitting content passes scroll gestures to its ancestor. Explicit scroll-wrapper plugin HTML attributes remain authoritative.                                                                                                                                                                                                                                                                                                           | `spec:AST-025` FR12, FR14, FR19, FR21; current source, docs, and tests | Verified fitting and inline-overflow transitions through the shared `useScrollableArea` behavior core                                                                                |
+| FR2  | Data-driven mode renders a Body section and a Header section with Column header cells when columns are present. Each data item renders a standard Row and Cells; an empty data array instead renders the configured empty-state row when enabled. It never creates a Footer section.                                                                                                                                                                                                                                                                                                                                                                                                | Current source, docs, and tests                                        | Verified current behavior; no new behavior decided                                                                                                                                   |
+| FR3  | Children mode passes caller composition through to the Table. TableHeader, TableBody, and TableFooter provide the respective sections, and TableRow, TableHeaderCell, and TableCell provide standard rows and cells.                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Current source, docs, and tests                                        | Verified current composition; no new API or DOM rule                                                                                                                                 |
+| FR4  | `Table.doc.mjs` is the canonical aggregate consumer owner for the eight current targets: `table`, `table-scroll-wrapper`, `table-header`, `table-body`, `table-footer`, `table-row`, `table-cell`, and `table-header-cell`. Member docs retain direct lookup metadata through `subComponentOf: 'Table'`.                                                                                                                                                                                                                                                                                                                                                                            | Current docs and CLI target tests                                      | Verified parent ownership; focused placement coverage is partial                                                                                                                     |
+| FR5  | For a sortable column, useTableSortable renders a Sort control around the column label, an Icon-owned Sort indicator glyph, and a numeric Sort priority only while multi-sort has more than one active entry.                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Current source, docs, and tests                                        | Control and priority are tested; glyph presence is source-inspected only                                                                                                             |
+| FR6  | useTableSelection renders CheckboxInput-owned Selection controls in the generated selection Column header cell and each selectable body Cell; selection remains row state rather than separate anatomy.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Current source, docs, and tests                                        | Verified stable delegated controls; no target or state change                                                                                                                        |
+| FR7  | For an expandable row, useTableRowExpansion renders an Expansion control with an Icon-owned Expansion glyph and conditionally appends an Expanded detail panel whose cell spans the column count captured by that plugin's `transformColumns` step.                                                                                                                                                                                                                                                                                                                                                                                                                                 | Current source, docs, and tests                                        | Verified stable plugin parts; current target gaps remain                                                                                                                             |
+| FR8  | Empty data renders the default compact EmptyState unless the caller supplies replacement content or disables it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Current source, docs, and tests                                        | Verified conditional delegation; caller content remains outside ownership                                                                                                            |
+| FR9  | Table converts the caller's named plugin record into one ordered array after its built-in styling plugin. Known names use the current canonical sequence `columnSettings → sort → tree → selection → pagination`; every other name follows that known set while preserving its record insertion order.                                                                                                                                                                                                                                                                                                                                                                              | Current source and docs                                                | Current shared ordering; canonical-name coverage is source-inspected                                                                                                                 |
+| FR10 | Every applicable non-context transform runs sequentially in the resolved plugin-array order, so a later plugin receives the value returned by every earlier successful plugin. A throwing transform reports a development error and leaves the prior accumulated value in the pipeline.                                                                                                                                                                                                                                                                                                                                                                                             | Current source and tests                                               | Sequential composition is tested; failure isolation is source-inspected                                                                                                              |
+| FR11 | `transformColumns` completes before element transforms. Table then applies table, header-cell/header-row, body-cell/body-row, scroll-wrapper, and context phases at their render points. Header-cell contributions use `before`, `content`, `after`, `overlay`, and `below` slots. Context transforms run in reverse so the first plugin becomes the outermost provider.                                                                                                                                                                                                                                                                                                            | Current source, types, and tests                                       | Transform application is tested; complete cross-phase order is source-inspected                                                                                                      |
+| FR12 | When built-in and named plugin references are unchanged, Table reuses the resolved plugin array; unknown/custom plugin value identity and insertion order remain stable inputs to memoization.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Current source and performance tests                                   | Current performance contract; focused named-order coverage is partial                                                                                                                |
+| FR13 | In data-driven mode, each explicit column whose `width` is omitted keeps one equal flexible share and a 60px readability floor. A column sets its own floor with `proportional(value, {minWidth})`, which replaces the 60px floor for that column; Table has no table-wide floor setting. Resolution is a pure function of the final column definitions: row values, rendered header/body measurement, locale, sorting, filtering, virtualization, and loading state do not change any floor. Explicit pixel and proportional widths retain their authored floors. When the resolved floors exceed available inline space, the existing Scroll region provides horizontal overflow. | `component:Table/DEC-2`; current source and tests                      | Verified by width-resolution unit coverage and the ResponsiveScroll real-browser geometry fixture                                                                                    |
+| FR14 | Wherever Table shows a row divider, including while rows glide and in pinned columns, the divider has the width, style and colour the row's border would have: the theme's tokens and any app override on `tr`, `tbody` or `td` borders, so customizations still show.                                                                                                                                                                                                                                                                                                                                                                                                              | `component:Table/DEC-3`                                                | Not implemented: rows do not glide yet, the pinned-column divider is pending, and an open detail panel's divider draws the default tokens, which `table-cell` overrides do not reach |
+| FR15 | `useTableRowExpansion` takes an `animatedLayout` option, the handle `spec:AST-105` FR1 defines: when an Expanded detail row opens, the panel plays in and the rows after it glide to their new places; when one closes, it hides at once and the rows after it glide up into its space (`spec:AST-105` Coverage). The Expansion glyph turns on the same motion; under reduced motion the rows move without travel (`spec:AST-105` FR4). Without the option, rows change at once. A table that draws column lines (`dividers="grid"` or `"columns"`) does not glide yet: with the option its panel and rows change at once, as without it, and the glyph keeps its own turn.         | `spec:AST-105` FR1, FR4; owner decision, 2026-10-26                    | Not implemented                                                                                                                                                                      |
 
 ### Current evidence and gaps
 
@@ -311,7 +319,8 @@ for this aggregate ownership.
 - `architecture:interaction-modality` owns shared keyboard and pointer modality;
   Table and its plugins retain their current local interactions.
 - `architecture:public-component-api` owns the stable props, components, hooks,
-  exports, and compatibility boundary; this documentation adds no API.
+  exports, and compatibility boundary; this record adds only
+  `useTableRowExpansion`'s optional `animatedLayout` option (FR15).
 - `module:Table/useTableRowStatus` owns the row-status module's API, generated
   anatomy, resolution and warning precedence, accessibility, performance,
   migration, and evidence. Table owns only the shared plugin protocol and its
@@ -319,19 +328,22 @@ for this aggregate ownership.
 
 ## Verification map
 
-| Contract            | Verification                                                                                                                                                                             | Representative states                                                                                                           | Mutation or failure expectation                                                                                                                                                                                                                                           | Audit section             |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
-| FR1-FR3             | `Table.test.tsx` render, structure, fit/overflow transitions, children-mode, section, and target assertions                                                                              | Fitting and inline-overflowing data-driven tables, empty data, and children composition                                         | Removing Table, Scroll region, observed content box, conditional keyboard access, or effective-axis containment fails existing role, structure, state, class, style, or prop-forwarding assertions; Row and Cell are conditional on rendered data or caller composition.  | `audit:Table/anatomy`     |
-| FR4                 | CLI discovery and API target tests plus source inspection                                                                                                                                | Direct member docs and unfiltered/scoped target output                                                                          | Duplicating a parent/member target or changing the canonical owner fails parent-aware discovery assertions; section target placement remains source-inspected.                                                                                                            | `audit:Table/theming`     |
-| FR5                 | `plugins/sortable/useTableSortable.test.tsx` plus source inspection                                                                                                                      | Unsorted, ascending, descending, and multi-sort                                                                                 | Removing the Sort control, conditional priority, or ARIA state fails existing assertions. Removing the Sort indicator glyph does not currently fail a focused test; glyph presence and delegated Icon target placement remain source-inspected.                           | `audit:Table/anatomy`     |
-| FR6                 | `plugins/selection/useTableSelection.test.tsx`                                                                                                                                           | Select all, individual, disabled, and non-selectable                                                                            | Removing header/body Selection controls or row selection state fails existing structure, label, interaction, and ARIA assertions; delegated CheckboxInput target placement remains source-inspected.                                                                      | `audit:Table/anatomy`     |
-| FR7                 | `plugins/rowExpansion/useTableRowExpansion.test.tsx` plus source inspection                                                                                                              | Collapsed, expanded, and non-expandable rows                                                                                    | Removing the Expansion control, conditional detail panel, captured-count `colSpan`, or ARIA state fails existing assertions in the covered plugin order; later column transforms, delegated Icon target placement, and untargeted panel wrappers remain source-inspected. | `audit:Table/anatomy`     |
-| FR8                 | `Table.test.tsx` empty-state suite plus EmptyState public target metadata                                                                                                                | Default, custom, disabled, and non-empty                                                                                        | Removing conditional empty behavior fails existing assertions; default EmptyState delegation remains source-inspected.                                                                                                                                                    | `audit:Table/anatomy`     |
-| FR9-FR11            | `Table.test.tsx`, `types.ts`, `BaseTable.tsx`, and `useBaseTablePlugins.ts`                                                                                                              | Built-in plus known and custom named plugins; every transform phase                                                             | Sequential composition, base-before-user behavior, transform application, and slot output have focused coverage; complete known-name sorting, phase order, exception continuation, and context nesting remain source-inspected.                                           | `audit:Table/plugins`     |
-| FR12, PR1           | `Table.perf.test.tsx` plus `useBaseTablePlugins.ts` source inspection                                                                                                                    | Same plugin references, recreated record, and changed plugin value                                                              | Unchanged plugin values must preserve the resolved array and representative no-op row-update budgets; focused named-record identity coverage remains partial.                                                                                                             | `audit:Table/performance` |
-| FR13, PR3           | `Table.test.tsx`, `plugins/columnResize/useTableColumnResize.test.tsx`, `plugins/stickyColumns/useTableStickyColumns.test.tsx`, and `Table.stories.tsx` ResponsiveScroll play assertions | Width-less columns with empty, short, and long-token rows; mixed explicit widths; pinned columns; narrow and fitting containers | Removing the 60px floor, deriving it from row content, changing explicit width semantics, desynchronizing resize bounds or sticky offsets, or preventing the existing Scroll region from activating fails focused unit or real-browser geometry assertions.               | `audit:Table/layout`      |
-| Module backlink     | `scripts/check-knowledge.mjs`                                                                                                                                                            | Active parent and colocated module record                                                                                       | A missing, duplicate, mis-parented, wrong-kind, misnamed, or undiscovered module record fails knowledge validation.                                                                                                                                                       | `audit:Table/modules`     |
-| Theming anatomy map | `scripts/check-knowledge.mjs`, `themingTargets.test.ts`, and CLI parent-aware target discovery tests                                                                                     | Canonical anatomy and eight current targets                                                                                     | Missing, extra, duplicated, prefixed, stale, or independently owned member mappings fail repository validation or discovery coverage.                                                                                                                                     | `audit:Table/theming`     |
+| Contract               | Verification                                                                                                                                                                                                                                                                                                                                                                                                    | Representative states                                                                                                                                                                             | Mutation or failure expectation                                                                                                                                                                                                                                                                                                                                                                                   | Audit section               |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| FR1-FR3                | `Table.test.tsx` render, structure, fit/overflow transitions, children-mode, section, and target assertions                                                                                                                                                                                                                                                                                                     | Fitting and inline-overflowing data-driven tables, empty data, and children composition                                                                                                           | Removing Table, Scroll region, observed content box, conditional keyboard access, or effective-axis containment fails existing role, structure, state, class, style, or prop-forwarding assertions; Row and Cell are conditional on rendered data or caller composition.                                                                                                                                          | `audit:Table/anatomy`       |
+| FR4                    | CLI discovery and API target tests plus source inspection                                                                                                                                                                                                                                                                                                                                                       | Direct member docs and unfiltered/scoped target output                                                                                                                                            | Duplicating a parent/member target or changing the canonical owner fails parent-aware discovery assertions; section target placement remains source-inspected.                                                                                                                                                                                                                                                    | `audit:Table/theming`       |
+| FR5                    | `plugins/sortable/useTableSortable.test.tsx`; the sort module contract (`plugins/sortable/__tests__/useTableSortable.a11y.ts`, self-tested by `useTableSortable.a11y.test.tsx`), which the Table binding composes onto the base Table contract for its sorted state (`__tests__/Table.a11y.test.tsx`, `__tests__/Table.a11y.chromium.spec.ts`); plus source inspection                                          | Unsorted, ascending, descending, and multi-sort                                                                                                                                                   | Removing the Sort control, conditional priority, or ARIA state fails existing assertions. Removing the Sort indicator glyph does not currently fail a focused test; glyph presence and delegated Icon target placement remain source-inspected.                                                                                                                                                                   | `audit:Table/anatomy`       |
+| FR6                    | `plugins/selection/useTableSelection.test.tsx`                                                                                                                                                                                                                                                                                                                                                                  | Select all, individual, disabled, and non-selectable                                                                                                                                              | Removing header/body Selection controls or row selection state fails existing structure, label, interaction, and ARIA assertions; delegated CheckboxInput target placement remains source-inspected.                                                                                                                                                                                                              | `audit:Table/anatomy`       |
+| FR7                    | `plugins/rowExpansion/useTableRowExpansion.test.tsx` plus source inspection                                                                                                                                                                                                                                                                                                                                     | Collapsed, expanded, and non-expandable rows                                                                                                                                                      | Removing the Expansion control, conditional detail panel, captured-count `colSpan`, or ARIA state fails existing assertions in the covered plugin order; later column transforms, delegated Icon target placement, and untargeted panel wrappers remain source-inspected.                                                                                                                                         | `audit:Table/anatomy`       |
+| FR8                    | `Table.test.tsx` empty-state suite plus EmptyState public target metadata                                                                                                                                                                                                                                                                                                                                       | Default, custom, disabled, and non-empty                                                                                                                                                          | Removing conditional empty behavior fails existing assertions; default EmptyState delegation remains source-inspected.                                                                                                                                                                                                                                                                                            | `audit:Table/anatomy`       |
+| FR9-FR11               | `Table.test.tsx`, `types.ts`, `BaseTable.tsx`, and `useBaseTablePlugins.ts`                                                                                                                                                                                                                                                                                                                                     | Built-in plus known and custom named plugins; every transform phase                                                                                                                               | Sequential composition, base-before-user behavior, transform application, and slot output have focused coverage; complete known-name sorting, phase order, exception continuation, and context nesting remain source-inspected.                                                                                                                                                                                   | `audit:Table/plugins`       |
+| FR12, PR1              | `Table.perf.test.tsx` plus `useBaseTablePlugins.ts` source inspection                                                                                                                                                                                                                                                                                                                                           | Same plugin references, recreated record, and changed plugin value                                                                                                                                | Unchanged plugin values must preserve the resolved array and representative no-op row-update budgets; focused named-record identity coverage remains partial.                                                                                                                                                                                                                                                     | `audit:Table/performance`   |
+| FR13, PR3              | `Table.test.tsx`, `plugins/columnResize/useTableColumnResize.test.tsx`, `plugins/stickyColumns/useTableStickyColumns.test.tsx`, and `Table.stories.tsx` ResponsiveScroll play assertions                                                                                                                                                                                                                        | Width-less columns with empty, short, and long-token rows; mixed explicit widths; pinned columns; narrow and fitting containers                                                                   | Removing the 60px floor, deriving it from row content, changing explicit width semantics, desynchronizing resize bounds or sticky offsets, or preventing the existing Scroll region from activating fails focused unit or real-browser geometry assertions.                                                                                                                                                       | `audit:Table/layout`        |
+| FR14                   | Real-browser computed-style checks of the divider mid-glide, in pinned columns, and under an open detail panel (pending)                                                                                                                                                                                                                                                                                        | a theme with a custom divider colour; an app override of a row's border; both mid-glide and on a pinned cell; an open detail panel's divider under the same theme and override                    | a divider whose width, style or colour differs from the row's border, or that drops a theme or app override, fails                                                                                                                                                                                                                                                                                                | `audit:Table/theming`       |
+| FR15                   | Real-browser tests of row expansion with and without `animatedLayout` (pending)                                                                                                                                                                                                                                                                                                                                 | open and close with the handle; without it; reduced motion under a coarse and a fine pointer; a glyph turn beside the glide; a `dividers="grid"` and a `dividers="columns"` table with the option | rows that jump with the handle in a table without column lines, a closing panel that animates or leaves its space empty before the rows arrive, a panel and rows on different motion, a glyph on its own timing beside the glide, travel under reduced motion, or any motion without the handle a table with column lines that glides or animates its panel, or one whose glyph does not keep its own turn, fails | `audit:Table/plugins`       |
+| Accessibility contract | `__tests__/Table.a11y.test.tsx` and `__tests__/Table.a11y.chromium.spec.ts` bind Table to the base Table contract (`internal/a11y-spec`), composing each module's contract only for the states rendered with that module: the sort module contract (`plugins/sortable/__tests__/useTableSortable.a11y.ts`) for the sorted state; `__tests__/TableScroll.a11y.chromium.spec.ts` keeps the Scroll region evidence | Labelled data-driven, sorted descending, composed RTL with row headers, and empty data                                                                                                            | Losing the table role or declared name, row, header, or cell roles, or a part leaving its row or the table, fails the base binding; a missing or stale `aria-sort` fails the composed sort module contract.                                                                                                                                                                                                       | `audit:Table/accessibility` |
+| Module backlink        | `scripts/check-knowledge.mjs`                                                                                                                                                                                                                                                                                                                                                                                   | Active parent and colocated module record                                                                                                                                                         | A missing, duplicate, mis-parented, wrong-kind, misnamed, or undiscovered module record fails knowledge validation.                                                                                                                                                                                                                                                                                               | `audit:Table/modules`       |
+| Theming anatomy map    | `scripts/check-knowledge.mjs`, `themingTargets.test.ts`, and CLI parent-aware target discovery tests                                                                                                                                                                                                                                                                                                            | Canonical anatomy and eight current targets                                                                                                                                                       | Missing, extra, duplicated, prefixed, stale, or independently owned member mappings fail repository validation or discovery coverage.                                                                                                                                                                                                                                                                             | `audit:Table/theming`       |
 
 ## Decision log
 
@@ -359,6 +371,18 @@ sorting, filtering, virtualization, empty and loading states, SSR, and hydration
 cannot change any floor. Rejected: deriving the floor from rendered or sampled
 content, because it shifts with data and view state.
 
+### DEC-3 — A drawn divider keeps the row border's source
+
+**Reference:** `component:Table/DEC-3`
+**Decider:** `cixzhang`, `2026-10-26`
+
+A divider drawn in place of the real border, during a row glide or in a
+pinned column, reads the row border's width, style and colour, from theme tokens and app overrides alike, so a
+themed or customized table looks the same while rows move and where columns
+are pinned.
+
+Rejected: a drawn divider with its own fixed look.
+
 ## Open questions
 
 None.

package/src/Table/TableCell.tsx

@@ -38,6 +38,7 @@ import {
   mergeXStyle,
 } from './useTableCellStyles';
 import {mergeProps} from '../utils';
+import {glidingDividerStyles} from './glidingDivider';
 import {themeProps} from '../utils/themeProps';
 
 /** Props for TableCell — thin `<td>` wrapper */
@@ -145,6 +146,12 @@ const contextMenuCellStyles = stylex.create({
 
 const dividerRowStyles = stylex.create({
   cell: {
+    // The width this cell's divider draws, for a pinned cell's own divider
+    // to match (plugins/stickyColumns). Private plumbing, not a theme API.
+    '--_table-row-divider-width': {
+      default: borderVars['--border-width'],
+      [stylex.when.ancestor(':last-child', tableRowMarker)]: '0px',
+    },
     borderBottomWidth: {
       default: borderVars['--border-width'],
       // Skip border on cells in the last body row to avoid a
@@ -228,6 +235,8 @@ export function TableCell({
           dividerColumnStyles.cell,
         ),
         ...(hasContextMenu ? [contextMenuCellStyles.cell] : []),
+        // While a glide moves the row, its divider moves with it.
+        glidingDividerStyles.cell,
       ]
     : [];
 

package/src/Table/TableHeaderCell.tsx

@@ -83,6 +83,8 @@ const headerStyles = stylex.create({
 
 const headerDividerStyles = stylex.create({
   cell: {
+    // For a pinned header cell's own divider to match (plugins/stickyColumns).
+    '--_table-row-divider-width': borderVars['--border-width'],
     borderBottomWidth: borderVars['--border-width'],
     borderBottomStyle: 'solid',
     borderBottomColor: colorVars['--color-border'],

package/src/Table/TableRow.tsx

@@ -21,6 +21,7 @@ import * as stylex from '@stylexjs/stylex';
 import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 import type {StyleXStyles} from '../theme/types';
 import {tableRowMarker} from './table.stylex';
+import {glidingDividerStyles} from './glidingDivider';
 import {TableContext} from './TableContext';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
@@ -182,6 +183,8 @@ export function TableRow({
   if (ctx.dividers === 'rows' || ctx.dividers === 'grid') {
     // Note: last-body-row border removal is handled by TableCell
     // to avoid affecting the header row in <thead>.
+    // While a glide moves the row, its divider moves with it.
+    rowStyles.push(glidingDividerStyles.row);
   }
 
   if (xstyle) {

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

@@ -0,0 +1,129 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y scope ^(internal/a11y-spec/src/patterns/table\.|packages/core/src/Table/|apps/storybook/stories/TableA11y)
+
+/** Real-browser and accessibility-tree binding evidence for Table. */
+
+import {
+  expect,
+  test,
+  type CDPSession,
+  type Locator,
+  type Page,
+} from '@playwright/test';
+import {
+  blockingResults,
+  checkAccessibilitySpec,
+  formatFailures,
+  neverExercised,
+  summarize,
+  type BindingResult,
+} from '@astryxdesign/a11y-spec';
+import {
+  createChromiumHarness,
+  holdMotionStill,
+} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+import {TABLE_A11Y_STATES, type TableA11yRow} from './Table.a11y.states';
+import {tableContractFor} from './Table.a11y.contracts';
+
+const SUBJECT_SELECTOR = '[data-a11y-table]';
+const ROWS = `${SUBJECT_SELECTOR} > thead > tr, ${SUBJECT_SELECTOR} > tbody > tr`;
+const COLUMN_HEADERS = `${SUBJECT_SELECTOR} > thead > tr > th`;
+const ROW_HEADERS = `${SUBJECT_SELECTOR} > tbody > tr > th`;
+const FIRST_ROW_CELLS = `${SUBJECT_SELECTOR} > tbody > tr:first-child > td`;
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => storybook?.close());
+
+function storyUrl(id: string): string {
+  return `${storybook.origin}/iframe.html?id=${id}&viewMode=story`;
+}
+
+function relatedFor(page: Page, state: TableA11yRow): Record<string, Locator> {
+  const related: Record<string, Locator> = {};
+  const designate = (selector: string, prefix: string, count: number) => {
+    const elements = page.locator(selector);
+    for (let index = 0; index < count; index += 1) {
+      related[`${prefix}-${index}`] = elements.nth(index);
+    }
+  };
+  designate(ROWS, 'row', state.facts.rows);
+  designate(COLUMN_HEADERS, 'column-header', state.facts.columnHeaders.length);
+  designate(ROW_HEADERS, 'row-header', state.facts.rowHeaders.length);
+  designate(FIRST_ROW_CELLS, 'cell', state.facts.cells);
+  return related;
+}
+
+async function runState(
+  page: Page,
+  cdp: CDPSession,
+  state: TableA11yRow,
+): Promise<BindingResult> {
+  return checkAccessibilitySpec({
+    spec: tableContractFor(state),
+    binding: 'Table',
+    state: state.id,
+    facts: state.facts,
+    mount: async () => {
+      await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
+      await holdMotionStill(page);
+      const subject = page.locator(SUBJECT_SELECTOR);
+      await subject.waitFor({state: 'attached'});
+      await expect(subject).toHaveCount(1);
+      await expect(page.locator(ROWS)).toHaveCount(state.facts.rows);
+      await expect(page.locator(COLUMN_HEADERS)).toHaveCount(
+        state.facts.columnHeaders.length,
+      );
+      await expect(page.locator(ROW_HEADERS)).toHaveCount(
+        state.facts.rowHeaders.length,
+      );
+      await expect(page.locator(FIRST_ROW_CELLS)).toHaveCount(
+        state.facts.cells,
+      );
+      return createChromiumHarness({
+        page,
+        cdp,
+        subject,
+        related: relatedFor(page, state),
+      });
+    },
+  });
+}
+
+test('every Table expectation is exercised by at least one Table state', async ({
+  page,
+}) => {
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of TABLE_A11Y_STATES) {
+    results.push(await runState(page, cdp, state));
+  }
+  expect(neverExercised(results)).toEqual([]);
+});
+
+for (const state of TABLE_A11Y_STATES) {
+  test(`Table [${state.id}] — ${state.summary}`, async ({page}) => {
+    const cdp = await page.context().newCDPSession(page);
+    const result = await runState(page, cdp, state);
+    const report = summarize(tableContractFor(state), [result]);
+    expect(formatFailures(blockingResults([result]))).toBe('');
+    expect(
+      result.results
+        .filter(row => row.status === 'fail')
+        .map(row => `${row.expectation}: ${row.detail ?? ''}`),
+      'this binding expects no failures',
+    ).toEqual([]);
+    expect(report.unrunLayers).toEqual([]);
+    expect(report.counts.unexpectedPass).toBe(0);
+  });
+}

package/src/Table/__tests__/Table.a11y.contracts.ts

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * The contract each Table binding state checks: the base table contract, plus
+ * a module's contract for the states rendered with that module.
+ */
+
+import {
+  TABLE_PATTERN,
+  type PatternContract,
+  type TableStateFacts,
+} from '@astryxdesign/a11y-spec';
+import {
+  TABLE_SORTABLE_PATTERN,
+  type TableSortFacts,
+} from '../plugins/sortable/__tests__/useTableSortable.a11y';
+import type {TableA11yState} from './Table.a11y.states';
+
+/** Whether a state renders with useTableSortable. */
+export function tableUsesSort(state: TableA11yState): boolean {
+  return state.modules.includes('sort');
+}
+
+export function tableContractFor(
+  state: TableA11yState,
+): PatternContract<TableStateFacts> {
+  return (
+    tableUsesSort(state) ? TABLE_SORTABLE_PATTERN : TABLE_PATTERN
+  ) as PatternContract<TableStateFacts>;
+}
+
+/** The sort a state declares, or none when it renders without the sort module. */
+export function tableSortFor(state: TableA11yState): TableSortFacts['sort'] {
+  return 'sort' in state.facts ? state.facts.sort : [];
+}