@astryxdesign/core 0.4.7-canary.d895769 → 0.4.7-canary.de6d448

package/dist/Table/plugins/pagination/useTablePagination.d.ts

@@ -88,6 +88,9 @@ export interface UseTablePaginationConfig {
     align?: 'start' | 'center' | 'end';
     /**
      * Accessible label for the pagination nav landmark.
+     * When `position` is 'both', the two navs get distinct names by suffixing
+     * this label — "{label} (top)" above and "{label} (bottom)" below — so
+     * same-type landmarks stay distinguishable to assistive technology.
      * @default 'Table pagination'
      */
     label?: string;

package/dist/Table/plugins/pagination/useTablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTablePagination.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/pagination/useTablePagination.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAgC7C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,wBAAwB;IAGvC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IAEb,sEAAsE;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAIrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAIlB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAI3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAE1D;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAE/C;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAInC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,MAAM,EAAE,wBAAwB,GAC/B,WAAW,CAAC,CAAC,CAAC,CAmGhB"}
+{"version":3,"file":"useTablePagination.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/pagination/useTablePagination.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAgC7C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,wBAAwB;IAGvC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IAEb,sEAAsE;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAIrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAIlB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAI3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAE1D;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAE/C;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAInC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,MAAM,EAAE,wBAAwB,GAC/B,WAAW,CAAC,CAAC,CAAC,CAgIhB"}

package/dist/Table/plugins/pagination/useTablePagination.js

@@ -116,6 +116,14 @@ export function useTablePagination(config) {
     label: labelFromProps
   } = config;
   const label = labelFromProps ?? t('@astryx.table.pagination.label');
+  // position='both' renders two nav landmarks; suffix the base label so each
+  // gets a unique accessible name (axe landmark-unique).
+  const labelAbove = t('@astryx.table.pagination.labelAbove', {
+    label
+  });
+  const labelBelow = t('@astryx.table.pagination.labelBelow', {
+    label
+  });
 
   // Same guard as Pagination itself: 0/NaN/negative pageSize would produce an
   // Infinity/NaN totalPages here, which bypasses Pagination's own coercion
@@ -143,12 +151,16 @@ export function useTablePagination(config) {
   const configRef = useRef({
     paginationProps,
     position,
-    align
+    align,
+    labelAbove,
+    labelBelow
   });
   configRef.current = {
     paginationProps,
     position,
-    align
+    align,
+    labelAbove,
+    labelBelow
   };
 
   // Stable plugin object \u2014 created once, reads config via ref.
@@ -157,7 +169,9 @@ export function useTablePagination(config) {
       const {
         position: pos,
         paginationProps: props,
-        align: a
+        align: a,
+        labelAbove: above,
+        labelBelow: below
       } = configRef.current;
       if (pos === 'none') {
         return children;
@@ -172,7 +186,10 @@ export function useTablePagination(config) {
       const makeWrapper = side => /*#__PURE__*/_jsx("div", {
         ...stylex.props(styles.wrapper, side === 'below' && styles.marginTop, side === 'above' && styles.marginBottom, a === 'center' && styles.alignCenter, a === 'end' && styles.alignEnd, a === 'start' && styles.alignStart),
         children: /*#__PURE__*/_jsx(Pagination, {
-          ...props
+          ...props,
+          // Two navs with the same name are indistinguishable landmarks;
+          // give each side a unique name when both render.
+          label: pos === 'both' ? side === 'above' ? above : below : props.label
         })
       });
       return /*#__PURE__*/_jsxs(_Fragment, {

package/locales/en.json

@@ -813,7 +813,15 @@
   },
   "@astryx.table.pagination.label": {
     "defaultMessage": "Table pagination",
-    "description": "Screen-reader-only accessible name for the pagination `<nav>` appended below a data table. Kept separate from `@astryx.pagination.label` so translations may diverge."
+    "description": "Screen-reader-only accessible name for a table's pagination `<nav>` (rendered below and/or above the table per the plugin's position config). Kept separate from `@astryx.pagination.label` so translations may diverge. When position='both', this string is interpolated as the {label} value into `@astryx.table.pagination.labelAbove`/`labelBelow` — keep it compatible with those suffix templates."
+  },
+  "@astryx.table.pagination.labelAbove": {
+    "defaultMessage": "{label} (top)",
+    "description": "Accessible name for the pagination `<nav>` rendered above the table when position='both' renders two navs. `label` is the resolved base label (default \"Table pagination\" or consumer-supplied); the suffix keeps the two same-type landmarks distinguishable."
+  },
+  "@astryx.table.pagination.labelBelow": {
+    "defaultMessage": "{label} (bottom)",
+    "description": "Accessible name for the pagination `<nav>` rendered below the table when position='both' renders two navs. `label` is the resolved base label (default \"Table pagination\" or consumer-supplied); the suffix keeps the two same-type landmarks distinguishable."
   },
   "@astryx.timeInput.placeholder": {
     "defaultMessage": "Select a time",

package/locales/pseudo.json

@@ -611,6 +611,12 @@
   "@astryx.table.pagination.label": {
     "defaultMessage": "⟦Ţàƀłé þàĝíñàţíóñ⟧"
   },
+  "@astryx.table.pagination.labelAbove": {
+    "defaultMessage": "⟦{label} (ţóþ)⟧"
+  },
+  "@astryx.table.pagination.labelBelow": {
+    "defaultMessage": "⟦{label} (ƀóţţóɱ)⟧"
+  },
   "@astryx.timeInput.placeholder": {
     "defaultMessage": "⟦Šéłéçţ à ţíɱé⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.4.7-canary.d895769",
+  "version": "0.4.7-canary.de6d448",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -661,7 +661,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.4.7-canary.d895769",
+    "@astryxdesign/cli": "0.4.7-canary.de6d448",
     "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",

package/src/Table/plugins/pagination/useTablePagination.test.tsx

@@ -229,7 +229,7 @@ describe('useTablePagination', () => {
       ).toBeTruthy();
     });
 
-    it('transformTableContext renders Pagination above and below', () => {
+    it('transformTableContext renders distinctly named Pagination above and below', () => {
       render(
         <PaginatedTable
           data={generateItems(30)}
@@ -237,10 +237,40 @@ describe('useTablePagination', () => {
           position="both"
         />,
       );
-      const navs = screen.getAllByRole('navigation', {
-        name: 'Table pagination',
+      const table = screen.getByRole('table');
+      // Each nav landmark gets a unique accessible name (axe landmark-unique)
+      const topNav = screen.getByRole('navigation', {
+        name: 'Table pagination (top)',
+      });
+      const bottomNav = screen.getByRole('navigation', {
+        name: 'Table pagination (bottom)',
       });
-      expect(navs).toHaveLength(2);
+      // Top nav comes before the table, bottom nav after it in DOM order
+      expect(
+        table.compareDocumentPosition(topNav) &
+          Node.DOCUMENT_POSITION_PRECEDING,
+      ).toBeTruthy();
+      expect(
+        table.compareDocumentPosition(bottomNav) &
+          Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy();
+    });
+
+    it('position="both" interpolates a consumer label into distinct nav names', () => {
+      render(
+        <PaginatedTable
+          data={generateItems(30)}
+          pageSize={10}
+          position="both"
+          label="Users table"
+        />,
+      );
+      expect(
+        screen.getByRole('navigation', {name: 'Users table (top)'}),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('navigation', {name: 'Users table (bottom)'}),
+      ).toBeInTheDocument();
     });
 
     it('transformTableContext does not render Pagination when position is none', () => {

package/src/Table/plugins/pagination/useTablePagination.tsx

@@ -164,6 +164,9 @@ export interface UseTablePaginationConfig {
 
   /**
    * Accessible label for the pagination nav landmark.
+   * When `position` is 'both', the two navs get distinct names by suffixing
+   * this label — "{label} (top)" above and "{label} (bottom)" below — so
+   * same-type landmarks stay distinguishable to assistive technology.
    * @default 'Table pagination'
    */
   label?: string;
@@ -211,6 +214,10 @@ export function useTablePagination<T extends Record<string, unknown>>(
     label: labelFromProps,
   } = config;
   const label = labelFromProps ?? t('@astryx.table.pagination.label');
+  // position='both' renders two nav landmarks; suffix the base label so each
+  // gets a unique accessible name (axe landmark-unique).
+  const labelAbove = t('@astryx.table.pagination.labelAbove', {label});
+  const labelBelow = t('@astryx.table.pagination.labelBelow', {label});
 
   // Same guard as Pagination itself: 0/NaN/negative pageSize would produce an
   // Infinity/NaN totalPages here, which bypasses Pagination's own coercion
@@ -240,8 +247,20 @@ export function useTablePagination<T extends Record<string, unknown>>(
 
   // Keep current config in a ref so the plugin can read the latest values
   // without needing to recreate the plugin object on every change.
-  const configRef = useRef({paginationProps, position, align});
-  configRef.current = {paginationProps, position, align};
+  const configRef = useRef({
+    paginationProps,
+    position,
+    align,
+    labelAbove,
+    labelBelow,
+  });
+  configRef.current = {
+    paginationProps,
+    position,
+    align,
+    labelAbove,
+    labelBelow,
+  };
 
   // Stable plugin object \u2014 created once, reads config via ref.
   return useMemo(
@@ -251,6 +270,8 @@ export function useTablePagination<T extends Record<string, unknown>>(
           position: pos,
           paginationProps: props,
           align: a,
+          labelAbove: above,
+          labelBelow: below,
         } = configRef.current;
         if (pos === 'none') {
           return children;
@@ -277,7 +298,18 @@ export function useTablePagination<T extends Record<string, unknown>>(
               a === 'end' && styles.alignEnd,
               a === 'start' && styles.alignStart,
             )}>
-            <Pagination {...props} />
+            <Pagination
+              {...props}
+              // Two navs with the same name are indistinguishable landmarks;
+              // give each side a unique name when both render.
+              label={
+                pos === 'both'
+                  ? side === 'above'
+                    ? above
+                    : below
+                  : props.label
+              }
+            />
           </div>
         );
 

package/src/Table/useTablePagination.doc.mjs

@@ -72,6 +72,12 @@ export const docs = {
       description: 'Horizontal alignment of the pagination controls.',
       default: "'center'",
     },
+    {
+      name: 'label',
+      type: 'string',
+      description: "Accessible name for the pagination nav landmark. With position='both' the two navs get distinct names — the label suffixed as '(top)' and '(bottom)' — so same-type landmarks stay unique (axe landmark-unique).",
+      default: "'Table pagination'",
+    },
   ],
 };
 
@@ -129,5 +135,6 @@ export const docsDense = {
     pageSize: 'Items per page. Default 10.',
     variant: "Pagination variant: 'pages'|'count'|'compact'|'dots'|'none'.",
     position: "Render position: 'below'|'above'|'both'|'none'.",
+    label: "Accessible name for the nav landmark; position='both' emits '<label> (top)' / '<label> (bottom)'.",
   },
 };

package/src/__tests__/apiContractDrift.test.tsx

@@ -1,80 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-
-import {docs as ButtonDocs} from '../Button/Button.doc.mjs';
-import {docs as ContextMenuDocs} from '../ContextMenu/ContextMenu.doc.mjs';
-import {docs as DialogDocs} from '../Dialog/Dialog.doc.mjs';
-import {docs as LinkDocs} from '../Link/Link.doc.mjs';
-import {docs as MoreMenuDocs} from '../MoreMenu/MoreMenu.doc.mjs';
-import {docs as NumberInputDocs} from '../NumberInput/NumberInput.doc.mjs';
-import {docs as PowerSearchDocs} from '../PowerSearch/PowerSearch.doc.mjs';
-import {docs as SelectorDocs} from '../Selector/Selector.doc.mjs';
-import {docs as TextInputDocs} from '../TextInput/TextInput.doc.mjs';
-import {docs as ToastDocs} from '../Toast/Toast.doc.mjs';
-import {docs as TokenizerDocs} from '../Tokenizer/Tokenizer.doc.mjs';
-
-// `docs` is the ComponentDoc union (single vs multi component); narrow it
-// for structural access to either the top-level props or the first
-// sub-component's props.
-function getProps(docs: unknown): {name: string}[] {
-  const doc = docs as {
-    props?: {name: string}[];
-    components?: {props?: {name: string}[]}[];
-  };
-  return doc.props || doc.components?.[0]?.props || [];
-}
-
-describe('API Contract Drift Audit (#4163)', () => {
-  it('documents Button link mode props', () => {
-    const props = getProps(ButtonDocs).map(p => p.name);
-    expect(props).toContain('href');
-    expect(props).toContain('as');
-    expect(props).toContain('target');
-    expect(props).toContain('rel');
-  });
-
-  it('documents Toast onDismiss callback', () => {
-    const props = getProps(ToastDocs).map(p => p.name);
-    expect(props).toContain('onDismiss');
-  });
-
-  it('documents ContextMenu and MoreMenu onOpenChange callback', () => {
-    const contextProps = getProps(ContextMenuDocs).map(p => p.name);
-    const moreProps = getProps(MoreMenuDocs).map(p => p.name);
-    expect(contextProps).toContain('onOpenChange');
-    expect(moreProps).toContain('onOpenChange');
-  });
-
-  it('documents Selector startIcon and isLoading props', () => {
-    const props = getProps(SelectorDocs).map(p => p.name);
-    expect(props).toContain('startIcon');
-    expect(props).toContain('isLoading');
-  });
-
-  it('documents TextInput and NumberInput onEnter / onKeyDown callbacks', () => {
-    const textProps = getProps(TextInputDocs).map(p => p.name);
-    const numProps = getProps(NumberInputDocs).map(p => p.name);
-    expect(textProps).toContain('onEnter');
-    expect(textProps).toContain('onKeyDown');
-    expect(numProps).toContain('onEnter');
-    expect(numProps).toContain('onKeyDown');
-  });
-
-  it('documents PowerSearch and Tokenizer onFocus / onBlur callbacks', () => {
-    const powerProps = getProps(PowerSearchDocs).map(p => p.name);
-    const tokProps = getProps(TokenizerDocs).map(p => p.name);
-    expect(powerProps).toContain('onFocus');
-    expect(powerProps).toContain('onBlur');
-    expect(tokProps).toContain('onFocus');
-    expect(tokProps).toContain('onBlur');
-  });
-
-  it('documents Link download / referrerPolicy and Dialog padding props', () => {
-    const linkProps = getProps(LinkDocs).map(p => p.name);
-    const dialogProps = getProps(DialogDocs).map(p => p.name);
-    expect(linkProps).toContain('download');
-    expect(linkProps).toContain('referrerPolicy');
-    expect(dialogProps).toContain('padding');
-  });
-});

package/src/__tests__/fieldContract.test.tsx

@@ -1,24 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-
-import {docs as FieldDocs} from '../Field/Field.doc.mjs';
-
-// `docs` is the ComponentDoc union (single vs multi component); narrow it
-// for structural access to either the top-level props or the first
-// sub-component's props.
-function getProps(docs: unknown): {name: string}[] {
-  const doc = docs as {
-    props?: {name: string}[];
-    components?: {props?: {name: string}[]}[];
-  };
-  return doc.props || doc.components?.[0]?.props || [];
-}
-
-describe('Field Component API Contract Drift (#4163)', () => {
-  it('documents Field labelID and isGroupLabel props', () => {
-    const props = getProps(FieldDocs).map(p => p.name);
-    expect(props).toContain('labelID');
-    expect(props).toContain('isGroupLabel');
-  });
-});

package/src/__tests__/inputWidthContract.test.tsx

@@ -1,69 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-
-import {docs as CheckboxInputDocs} from '../CheckboxInput/CheckboxInput.doc.mjs';
-import {docs as CheckboxListDocs} from '../CheckboxList/CheckboxList.doc.mjs';
-import {docs as DateInputDocs} from '../DateInput/DateInput.doc.mjs';
-import {docs as DateRangeInputDocs} from '../DateRangeInput/DateRangeInput.doc.mjs';
-import {docs as DateTimeInputDocs} from '../DateTimeInput/DateTimeInput.doc.mjs';
-import {docs as FileInputDocs} from '../FileInput/FileInput.doc.mjs';
-import {docs as MultiSelectorDocs} from '../MultiSelector/MultiSelector.doc.mjs';
-import {docs as NumberInputDocs} from '../NumberInput/NumberInput.doc.mjs';
-import {docs as RadioListDocs} from '../RadioList/RadioList.doc.mjs';
-import {docs as SelectorDocs} from '../Selector/Selector.doc.mjs';
-import {docs as SliderDocs} from '../Slider/Slider.doc.mjs';
-import {docs as SwitchDocs} from '../Switch/Switch.doc.mjs';
-import {docs as TextAreaDocs} from '../TextArea/TextArea.doc.mjs';
-import {docs as TextInputDocs} from '../TextInput/TextInput.doc.mjs';
-import {docs as TimeInputDocs} from '../TimeInput/TimeInput.doc.mjs';
-import {docs as TokenizerDocs} from '../Tokenizer/Tokenizer.doc.mjs';
-import {docs as TypeaheadDocs} from '../Typeahead/Typeahead.doc.mjs';
-
-const inputDocsSuite = [
-  {name: 'CheckboxInput', docs: CheckboxInputDocs},
-  {name: 'CheckboxList', docs: CheckboxListDocs},
-  {name: 'DateInput', docs: DateInputDocs},
-  {name: 'DateRangeInput', docs: DateRangeInputDocs},
-  {name: 'DateTimeInput', docs: DateTimeInputDocs},
-  {name: 'FileInput', docs: FileInputDocs},
-  {name: 'MultiSelector', docs: MultiSelectorDocs},
-  {name: 'NumberInput', docs: NumberInputDocs},
-  {name: 'RadioList', docs: RadioListDocs},
-  {name: 'Selector', docs: SelectorDocs},
-  {name: 'Slider', docs: SliderDocs},
-  {name: 'Switch', docs: SwitchDocs},
-  {name: 'TextArea', docs: TextAreaDocs},
-  {name: 'TextInput', docs: TextInputDocs},
-  {name: 'TimeInput', docs: TimeInputDocs},
-  {name: 'Tokenizer', docs: TokenizerDocs},
-  {name: 'Typeahead', docs: TypeaheadDocs},
-];
-
-describe('Input Family width Prop Contract (#4163)', () => {
-  inputDocsSuite.forEach(({name, docs}) => {
-    it(`documents the width prop for ${name}`, () => {
-      // `docs` is the ComponentDoc union (single vs multi component); narrow it
-      // for structural access to either the top-level props or the first
-      // sub-component's props.
-      const doc = docs as {
-        props?: {name: string; type: string}[];
-        components?: {props?: {name: string; type: string}[]}[];
-      };
-      const propsList = (doc.props || doc.components?.[0]?.props) as {
-        name: string;
-        type: string;
-      }[];
-      expect(
-        propsList,
-        `${name}.doc.mjs must expose a props array`,
-      ).toBeDefined();
-      const widthProp = propsList.find(p => p.name === 'width');
-      expect(
-        widthProp,
-        `${name}.doc.mjs must document the width prop`,
-      ).toBeDefined();
-      expect(widthProp?.type).toBe('SizeValue');
-    });
-  });
-});

package/src/__tests__/structuralComponentContract.test.tsx

@@ -1,39 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-
-import {docs as CodeBlockDocs} from '../CodeBlock/CodeBlock.doc.mjs';
-import {docs as StackDocs} from '../Stack/Stack.doc.mjs';
-import {docs as ToolbarDocs} from '../Toolbar/Toolbar.doc.mjs';
-
-// `docs` is the ComponentDoc union (single vs multi component); narrow it
-// for structural access to either the top-level props or the first
-// sub-component's props.
-function getProps(docs: unknown): {name: string}[] {
-  const doc = docs as {
-    props?: {name: string}[];
-    components?: {props?: {name: string}[]}[];
-  };
-  return doc.props || doc.components?.[0]?.props || [];
-}
-
-describe('Structural Component API Contract Drift (#4163)', () => {
-  it('documents CodeBlock highlightMode prop', () => {
-    const props = getProps(CodeBlockDocs).map(p => p.name);
-    expect(props).toContain('highlightMode');
-  });
-
-  it('documents Toolbar dividers prop', () => {
-    const props = getProps(ToolbarDocs).map(p => p.name);
-    expect(props).toContain('dividers');
-  });
-
-  it('documents Stack direction and base props', () => {
-    const props = getProps(StackDocs).map(p => p.name);
-    expect(props).toContain('direction');
-    expect(props).toContain('gap');
-    expect(props).toContain('padding');
-    expect(props).toContain('width');
-    expect(props).toContain('height');
-  });
-});