@workday/canvas-kit-mcp 16.0.14 → 16.0.16

package/dist/cli.js

@@ -18,7 +18,7 @@ import { z } from "zod";
 // package.json
 var package_default = {
   name: "@workday/canvas-kit-mcp",
-  version: "16.0.14",
+  version: "16.0.16",
   description: "MCP package for Canvas Kit",
   author: "Workday, Inc. (https://www.workday.com)",
   license: "Apache-2.0",
@@ -88,6 +88,11 @@ var ACCESSIBILITY_SCENARIOS = [
   "overview",
   "page-structure",
   "tables",
+  "expandable-rows",
+  "nested-rows",
+  "selectable-rows",
+  "filterable-column-headers",
+  "sortable-column-headers",
   "popups",
   "aria-live",
   "headers",
@@ -96,6 +101,33 @@ var ACCESSIBILITY_SCENARIOS = [
   "forms",
   "color-contrast"
 ];
+var TABLE_PATTERN_SCENARIOS = [
+  "tables",
+  "expandable-rows",
+  "nested-rows",
+  "selectable-rows",
+  "filterable-column-headers",
+  "sortable-column-headers",
+  "forms"
+];
+function expandAccessibilityScenarioSlugs(slugs) {
+  const result = [];
+  const seen = /* @__PURE__ */ new Set();
+  const add = (slug) => {
+    if (!seen.has(slug)) {
+      seen.add(slug);
+      result.push(slug);
+    }
+  };
+  for (const slug of slugs) {
+    if (slug === "tables") {
+      TABLE_PATTERN_SCENARIOS.forEach(add);
+    } else {
+      add(slug);
+    }
+  }
+  return result;
+}
 var ACCESSIBILITY_COMPONENTS = [
   "action-bar",
   "ai-ingress-button-(ai)",
@@ -226,13 +258,16 @@ function resolveAccessibilityScenarioSlugs({
   scenario
 }) {
   if (component && scenario) {
-    return [.../* @__PURE__ */ new Set([...getAccessibilityScenarioSlugsForComponent(component), scenario])];
+    return expandAccessibilityScenarioSlugs([
+      ...getAccessibilityScenarioSlugsForComponent(component),
+      scenario
+    ]);
   }
   if (component) {
-    return getAccessibilityScenarioSlugsForComponent(component);
+    return expandAccessibilityScenarioSlugs(getAccessibilityScenarioSlugsForComponent(component));
   }
   if (scenario) {
-    return [scenario];
+    return expandAccessibilityScenarioSlugs([scenario]);
   }
   return [];
 }
@@ -278,9 +313,29 @@ var config_default = {
       slug: "page-structure"
     },
     {
-      source: "accessibility/TablesAdvanced.mdx",
+      source: "accessibility/tables/Overview.mdx",
       slug: "tables"
     },
+    {
+      source: "accessibility/tables/ExpandableRows.mdx",
+      slug: "expandable-rows"
+    },
+    {
+      source: "accessibility/tables/NestedRows.mdx",
+      slug: "nested-rows"
+    },
+    {
+      source: "accessibility/tables/SelectableRows.mdx",
+      slug: "selectable-rows"
+    },
+    {
+      source: "accessibility/tables/FilterableColumnHeaders.mdx",
+      slug: "filterable-column-headers"
+    },
+    {
+      source: "accessibility/tables/SortableColumnHeaders.mdx",
+      slug: "sortable-column-headers"
+    },
     {
       source: "accessibility/Popups.mdx",
       slug: "popups"
@@ -302,7 +357,7 @@ var config_default = {
       slug: "windows-high-contrast"
     },
     {
-      source: "accessibility/TestingTableWithFormFields.mdx",
+      source: "accessibility/tables/WithFormFields.mdx",
       slug: "forms"
     },
     {
@@ -389,8 +444,8 @@ var stories_config_default = {
       title: "Components/Containers/Table",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs",
       mdxPath: "modules/react/table/stories/Table.mdx",
-      mdxProse: "# Canvas Kit Table\n\n`Table` is a simple styled compound component that renders a\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to\npresent information in a two-dimensional table comprised of rows and columns of cells containing\ndata. `Table` is built off of `BaseTable` and is using\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nUsers may not want to use a `caption` so they can import\n[Heading](https://workday.github.io/canvas-kit/?path=/docs/components-text-heading--docs) or\n[Text](https://workday.github.io/canvas-kit/?path=/docs/components-text-text--docs) instead. This\nwill give the user more flexibility around the customization of the title/heading of their table.\n```tsx\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {Heading} from '@workday/canvas-kit-react/text';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n  parentContainerStyles: createStyles({\n    marginBlockEnd: system.gap.md,\n  }),\n  tableHeaderStyles: createStyles({\n    backgroundColor: system.color.surface.raised,\n  }),\n};\n\nexport const BasicWithHeading = () => {\n  const headingID = useUniqueId();\n\n  return (\n    <>\n      <Heading as=\"h3\" id={headingID} size=\"small\" cs={styleOverrides.parentContainerStyles}>\n        Pizza Toppings\n      </Heading>\n      <Table aria-labelledby={headingID}>\n        <Table.Head>\n          <Table.Row>\n            <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n              Toppings\n            </Table.Header>\n            <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n              Amount\n            </Table.Header>\n          </Table.Row>\n        </Table.Head>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell>Pepperoni</Table.Cell>\n            <Table.Cell>2.5 oz</Table.Cell>\n          </Table.Row>\n          <Table.Row>\n            <Table.Cell>Mozzarella</Table.Cell>\n            <Table.Cell>5 oz</Table.Cell>\n          </Table.Row>\n          <Table.Row>\n            <Table.Cell>Basil</Table.Cell>\n            <Table.Cell>10 Leaves</Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </>\n  );\n};\n```\n\n### Right to Left\n\nTable supports right-to-left languages when specified in the CanvasProvider theme.\n```tsx\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n  backgroundColor: system.color.surface.raised,\n});\n\nexport const RightToLeft = () => {\n  return (\n    <CanvasProvider dir=\"rtl\">\n      <Table>\n        <Table.Caption>\u05DE\u05E9\u05E7\u05D0\u05D5\u05EA \u05E7\u05E4\u05D4 \u05D5\u05D2\u05D3\u05DC\u05D9\u05DD</Table.Caption>\n        <Table.Head>\n          <Table.Row>\n            <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n              \u05DE\u05B7\u05E9\u05C1\u05E7\u05B6\u05D4\n            </Table.Header>\n            <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n              \u05D2\u05D5\u05D3\u05DC\n            </Table.Header>\n          </Table.Row>\n        </Table.Head>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell>\u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\n            <Table.Cell>1 \u05D2\u05E8</Table.Cell>\n          </Table.Row>\n          <Table.Row>\n            <Table.Cell>\u05DE\u05E7\u05D9\u05D0\u05D8\u05D5</Table.Cell>\n            <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\n          </Table.Row>\n          <Table.Row>\n            <Table.Cell>\u05D2\u05D6\u05D9\u05E8\u05D4</Table.Cell>\n            <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5, 1 \u05D2\u05E8\u05DD \u05D7\u05DC\u05D1 \u05DE\u05D5\u05E7\u05E6\u05E3</Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </CanvasProvider>\n  );\n};\n```\n\n### Example with Caption\n\nUsers are free to use a `caption` instead of a heading. A `caption` is not required but it is good\nfor\n[accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)\npurposes.\n```tsx\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n  backgroundColor: system.color.surface.default,\n});\n\nexport const Basic = () => {\n  return (\n    <Table>\n      <Table.Caption>Coffee Drinks and Sizes</Table.Caption>\n      <Table.Head>\n        <Table.Row>\n          <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n            Drink\n          </Table.Header>\n          <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n            Size\n          </Table.Header>\n        </Table.Row>\n      </Table.Head>\n      <Table.Body>\n        <Table.Row>\n          <Table.Cell>Espresso</Table.Cell>\n          <Table.Cell>1 oz</Table.Cell>\n        </Table.Row>\n        <Table.Row>\n          <Table.Cell>Macchiato</Table.Cell>\n          <Table.Cell>2 oz Espresso</Table.Cell>\n        </Table.Row>\n        <Table.Row>\n          <Table.Cell>Cortado</Table.Cell>\n          <Table.Cell>2 oz Espresso, 1 oz Foamed Milk</Table.Cell>\n        </Table.Row>\n        <Table.Row></Table.Row>\n        <Table.Row>\n          <Table.Cell>Cappuccino</Table.Cell>\n          <Table.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</Table.Cell>\n        </Table.Row>\n      </Table.Body>\n    </Table>\n  );\n};\n```\n\n### Fixed Column\n\nUsers may add styles to the `Table.Header` to render a fixed column. The example below assigns a\n`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the\n`width` if you would only like the fixed column to be triggered if necessary.\n```tsx\nimport React from 'react';\n\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {Heading} from '@workday/canvas-kit-react/text';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n  parentContainerStyles: createStyles({\n    marginBlockEnd: system.gap.md,\n  }),\n  tableStyles: createStyles({\n    width: px2rem(690),\n  }),\n  tableHeaderStyles: createStyles({\n    position: 'sticky',\n    left: '0',\n    backgroundColor: system.color.surface.raised,\n    borderInlineEnd: `${px2rem(2)} solid ${system.color.border.default}`,\n  }),\n};\n\nexport const FixedColumn = () => {\n  const headingID = useUniqueId();\n  const exampleData = [\n    {\n      make: 'Porsche',\n      model: '992 911 GT3',\n      year: '2022',\n      price: 'Starts at $160,000',\n      engine: '4.0L Flat 6',\n      transmission: 'PDK or 7-Speed Manual',\n      horsepower: '502hp',\n      torque: '346 lb-ft',\n      curbWeight: '3,164 lbs',\n    },\n    {\n      make: 'BMW',\n      model: 'M5 Competition',\n      year: '2018',\n      price: 'Starts at $105,000',\n      engine: 'Twin-Turbo 4.4L V8',\n      transmission: 'Automatic',\n      horsepower: '627hp',\n      torque: '553 lb-ft',\n      curbWeight: '4,345 lbs',\n    },\n    {\n      make: 'Alfa Romeo',\n      model: '1750 GTV',\n      year: '1970',\n      price: '$30,000 - $55,000',\n      engine: '1.75L Inline 4',\n      transmission: 'Manual',\n      horsepower: '122hp',\n      torque: '137 lb-ft',\n      curbWeight: '2,140 lbs',\n    },\n    {\n      make: 'Lotus',\n      model: 'Emira',\n      year: '2023',\n      price: 'Starts at $78,000',\n      engine: 'Supercharged 3.5L V6',\n      transmission: 'Automatic or 6-Speed Manual',\n      horsepower: '400hp',\n      torque: '317 lb-ft',\n      curbWeight: '3520 lbs',\n    },\n    {\n      make: 'Toyota',\n      model: 'Supra',\n      year: '1998',\n      price: '$40,000 - $80,000',\n      engine: '3.0L Inline 6',\n      transmission: 'Automatic or 6-Speed Manual',\n      horsepower: '320hp',\n      torque: '315 lb-ft',\n      curbWeight: '3,599 lbs',\n    },\n    {\n      make: 'Nissan',\n      model: 'Skyline GT-R',\n      year: '1994',\n      price: '$45,000 - $90,000',\n      engine: '2.6L Twin-Turbo Inline 6',\n      transmission: '5-Speed Manual',\n      horsepower: '276hp',\n      torque: '260 lb-ft',\n      curbWeight: '3,153 lbs',\n    },\n  ];\n  return (\n    <>\n      <Heading as=\"h3\" id={headingID} size=\"small\" cs={styleOverrides.parentContainerStyles}>\n        Performance Car Specs\n      </Heading>\n      <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>\n        <Table.Head>\n          <Table.Row>\n            <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n              Make\n            </Table.Header>\n            <Table.Header scope=\"col\">Model</Table.Header>\n            <Table.Header scope=\"col\">Year</Table.Header>\n            <Table.Header scope=\"col\">Price</Table.Header>\n            <Table.Header scope=\"col\">Engine</Table.Header>\n            <Table.Header scope=\"col\">Transmission</Table.Header>\n            <Table.Header scope=\"col\">Horsepower</Table.Header>\n            <Table.Header scope=\"col\">Torque</Table.Header>\n            <Table.Header scope=\"col\">Curb Weight</Table.Header>\n          </Table.Row>\n        </Table.Head>\n        <Table.Body>\n          {exampleData.map((item, index) => (\n            <React.Fragment key={index}>\n              <Table.Row>\n                <Table.Header scope=\"row\" cs={styleOverrides.tableHeaderStyles}>\n                  {item.make}\n                </Table.Header>\n                <Table.Cell>{item.model}</Table.Cell>\n                <Table.Cell>{item.year}</Table.Cell>\n                <Table.Cell>{item.price}</Table.Cell>\n                <Table.Cell>{item.engine}</Table.Cell>\n                <Table.Cell>{item.transmission}</Table.Cell>\n                <Table.Cell>{item.horsepower}</Table.Cell>\n                <Table.Cell>{item.torque}</Table.Cell>\n                <Table.Cell>{item.curbWeight}</Table.Cell>\n              </Table.Row>\n            </React.Fragment>\n          ))}\n        </Table.Body>\n      </Table>\n    </>\n  );\n};\n```\n\n### Base Html Table Example\n\nIf a user needs a standard HTML\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can\nuse the `BaseTable` component.\n```tsx\nimport {BaseTable} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n  backgroundColor: system.color.surface.raised,\n});\n\nexport const BaseHtmlTable = () => {\n  return (\n    <BaseTable>\n      <BaseTable.Caption>Coffee Drinks and Sizes</BaseTable.Caption>\n      <BaseTable.Head>\n        <BaseTable.Row>\n          <BaseTable.Header scope=\"col\" cs={tableHeaderStyles}>\n            Drink\n          </BaseTable.Header>\n          <BaseTable.Header scope=\"col\" cs={tableHeaderStyles}>\n            Size\n          </BaseTable.Header>\n        </BaseTable.Row>\n      </BaseTable.Head>\n      <BaseTable.Body>\n        <BaseTable.Row>\n          <BaseTable.Cell>Espresso</BaseTable.Cell>\n          <BaseTable.Cell>1 oz</BaseTable.Cell>\n        </BaseTable.Row>\n        <BaseTable.Row>\n          <BaseTable.Cell>Macchiato</BaseTable.Cell>\n          <BaseTable.Cell>2 oz Espresso</BaseTable.Cell>\n        </BaseTable.Row>\n        <BaseTable.Row>\n          <BaseTable.Cell>Cortado</BaseTable.Cell>\n          <BaseTable.Cell>2 oz Espresso, 1 oz Foamed Milk</BaseTable.Cell>\n        </BaseTable.Row>\n        <BaseTable.Row></BaseTable.Row>\n        <BaseTable.Row>\n          <BaseTable.Cell>Cappuccino</BaseTable.Cell>\n          <BaseTable.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</BaseTable.Cell>\n        </BaseTable.Row>\n      </BaseTable.Body>\n    </BaseTable>\n  );\n};\n```\n\n### Which Component Should I Use?\n\n> If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)\n> features with their Table, then use the\n> [Table](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#basic-example)\n> component.\n\n> If a user **does not** want\n> [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their\n> Table, then use the\n> [BaseTable](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#base-html-table-example)\n> component.\n\n### Advanced\n\nYou can also find several advanced Table examples in our Storybook Examples section.\n\n- [Expandable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#expandable-rows)\n- [Selectable Rows ](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#selectable-rows)\n- [Filterable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#filterable-column-headers)\n- [Sortable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#sortable-column-headers)\n\n### Custom Styles\n\nTable and its subcomponents support custom styling via the `cs` prop. For more information, check\nour\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Component API\n\n",
-      accessibilityProse: ""
+      mdxProse: "# Canvas Kit Table\n\n`Table` is a simple styled compound component that renders a\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to\npresent information in a two-dimensional table comprised of rows and columns of cells containing\ndata. `Table` is built off of `BaseTable` and is using\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nUsers may not want to use a `caption` so they can import\n[Heading](https://workday.github.io/canvas-kit/?path=/docs/components-text-heading--docs) or\n[Text](https://workday.github.io/canvas-kit/?path=/docs/components-text-text--docs) instead. This\nwill give the user more flexibility around the customization of the title/heading of their table.\n```tsx\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {Heading} from '@workday/canvas-kit-react/text';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n  parentContainerStyles: createStyles({\n    marginBlockEnd: system.gap.md,\n  }),\n  tableHeaderStyles: createStyles({\n    backgroundColor: system.color.surface.raised,\n  }),\n};\n\nexport const BasicWithHeading = () => {\n  const headingID = useUniqueId();\n\n  return (\n    <>\n      <Heading as=\"h3\" id={headingID} size=\"small\" cs={styleOverrides.parentContainerStyles}>\n        Pizza Toppings\n      </Heading>\n      <Table aria-labelledby={headingID}>\n        <Table.Head>\n          <Table.Row>\n            <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n              Toppings\n            </Table.Header>\n            <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n              Amount\n            </Table.Header>\n          </Table.Row>\n        </Table.Head>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell>Pepperoni</Table.Cell>\n            <Table.Cell>2.5 oz</Table.Cell>\n          </Table.Row>\n          <Table.Row>\n            <Table.Cell>Mozzarella</Table.Cell>\n            <Table.Cell>5 oz</Table.Cell>\n          </Table.Row>\n          <Table.Row>\n            <Table.Cell>Basil</Table.Cell>\n            <Table.Cell>10 Leaves</Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </>\n  );\n};\n```\n\n### Right to Left\n\nTable supports right-to-left languages when specified in the CanvasProvider theme.\n```tsx\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n  backgroundColor: system.color.surface.raised,\n});\n\nexport const RightToLeft = () => {\n  return (\n    <CanvasProvider dir=\"rtl\">\n      <Table>\n        <Table.Caption>\u05DE\u05E9\u05E7\u05D0\u05D5\u05EA \u05E7\u05E4\u05D4 \u05D5\u05D2\u05D3\u05DC\u05D9\u05DD</Table.Caption>\n        <Table.Head>\n          <Table.Row>\n            <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n              \u05DE\u05B7\u05E9\u05C1\u05E7\u05B6\u05D4\n            </Table.Header>\n            <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n              \u05D2\u05D5\u05D3\u05DC\n            </Table.Header>\n          </Table.Row>\n        </Table.Head>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell>\u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\n            <Table.Cell>1 \u05D2\u05E8</Table.Cell>\n          </Table.Row>\n          <Table.Row>\n            <Table.Cell>\u05DE\u05E7\u05D9\u05D0\u05D8\u05D5</Table.Cell>\n            <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\n          </Table.Row>\n          <Table.Row>\n            <Table.Cell>\u05D2\u05D6\u05D9\u05E8\u05D4</Table.Cell>\n            <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5, 1 \u05D2\u05E8\u05DD \u05D7\u05DC\u05D1 \u05DE\u05D5\u05E7\u05E6\u05E3</Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </CanvasProvider>\n  );\n};\n```\n\n### Example with Caption\n\nUsers are free to use a `caption` instead of a heading. A `caption` is not required but it is good\nfor\n[accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)\npurposes.\n```tsx\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n  backgroundColor: system.color.surface.default,\n});\n\nexport const Basic = () => {\n  return (\n    <Table>\n      <Table.Caption>Coffee Drinks and Sizes</Table.Caption>\n      <Table.Head>\n        <Table.Row>\n          <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n            Drink\n          </Table.Header>\n          <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n            Size\n          </Table.Header>\n        </Table.Row>\n      </Table.Head>\n      <Table.Body>\n        <Table.Row>\n          <Table.Cell>Espresso</Table.Cell>\n          <Table.Cell>1 oz</Table.Cell>\n        </Table.Row>\n        <Table.Row>\n          <Table.Cell>Macchiato</Table.Cell>\n          <Table.Cell>2 oz Espresso</Table.Cell>\n        </Table.Row>\n        <Table.Row>\n          <Table.Cell>Cortado</Table.Cell>\n          <Table.Cell>2 oz Espresso, 1 oz Foamed Milk</Table.Cell>\n        </Table.Row>\n        <Table.Row></Table.Row>\n        <Table.Row>\n          <Table.Cell>Cappuccino</Table.Cell>\n          <Table.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</Table.Cell>\n        </Table.Row>\n      </Table.Body>\n    </Table>\n  );\n};\n```\n\n### Fixed Column\n\nUsers may add styles to the `Table.Header` to render a fixed column. The example below assigns a\n`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the\n`width` if you would only like the fixed column to be triggered if necessary.\n```tsx\nimport React from 'react';\n\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {Heading} from '@workday/canvas-kit-react/text';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n  parentContainerStyles: createStyles({\n    marginBlockEnd: system.gap.md,\n  }),\n  tableStyles: createStyles({\n    width: px2rem(690),\n  }),\n  tableHeaderStyles: createStyles({\n    position: 'sticky',\n    left: '0',\n    backgroundColor: system.color.surface.raised,\n    borderInlineEnd: `${px2rem(2)} solid ${system.color.border.default}`,\n  }),\n};\n\nexport const FixedColumn = () => {\n  const headingID = useUniqueId();\n  const exampleData = [\n    {\n      make: 'Porsche',\n      model: '992 911 GT3',\n      year: '2022',\n      price: 'Starts at $160,000',\n      engine: '4.0L Flat 6',\n      transmission: 'PDK or 7-Speed Manual',\n      horsepower: '502hp',\n      torque: '346 lb-ft',\n      curbWeight: '3,164 lbs',\n    },\n    {\n      make: 'BMW',\n      model: 'M5 Competition',\n      year: '2018',\n      price: 'Starts at $105,000',\n      engine: 'Twin-Turbo 4.4L V8',\n      transmission: 'Automatic',\n      horsepower: '627hp',\n      torque: '553 lb-ft',\n      curbWeight: '4,345 lbs',\n    },\n    {\n      make: 'Alfa Romeo',\n      model: '1750 GTV',\n      year: '1970',\n      price: '$30,000 - $55,000',\n      engine: '1.75L Inline 4',\n      transmission: 'Manual',\n      horsepower: '122hp',\n      torque: '137 lb-ft',\n      curbWeight: '2,140 lbs',\n    },\n    {\n      make: 'Lotus',\n      model: 'Emira',\n      year: '2023',\n      price: 'Starts at $78,000',\n      engine: 'Supercharged 3.5L V6',\n      transmission: 'Automatic or 6-Speed Manual',\n      horsepower: '400hp',\n      torque: '317 lb-ft',\n      curbWeight: '3520 lbs',\n    },\n    {\n      make: 'Toyota',\n      model: 'Supra',\n      year: '1998',\n      price: '$40,000 - $80,000',\n      engine: '3.0L Inline 6',\n      transmission: 'Automatic or 6-Speed Manual',\n      horsepower: '320hp',\n      torque: '315 lb-ft',\n      curbWeight: '3,599 lbs',\n    },\n    {\n      make: 'Nissan',\n      model: 'Skyline GT-R',\n      year: '1994',\n      price: '$45,000 - $90,000',\n      engine: '2.6L Twin-Turbo Inline 6',\n      transmission: '5-Speed Manual',\n      horsepower: '276hp',\n      torque: '260 lb-ft',\n      curbWeight: '3,153 lbs',\n    },\n  ];\n  return (\n    <>\n      <Heading as=\"h3\" id={headingID} size=\"small\" cs={styleOverrides.parentContainerStyles}>\n        Performance Car Specs\n      </Heading>\n      <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>\n        <Table.Head>\n          <Table.Row>\n            <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n              Make\n            </Table.Header>\n            <Table.Header scope=\"col\">Model</Table.Header>\n            <Table.Header scope=\"col\">Year</Table.Header>\n            <Table.Header scope=\"col\">Price</Table.Header>\n            <Table.Header scope=\"col\">Engine</Table.Header>\n            <Table.Header scope=\"col\">Transmission</Table.Header>\n            <Table.Header scope=\"col\">Horsepower</Table.Header>\n            <Table.Header scope=\"col\">Torque</Table.Header>\n            <Table.Header scope=\"col\">Curb Weight</Table.Header>\n          </Table.Row>\n        </Table.Head>\n        <Table.Body>\n          {exampleData.map((item, index) => (\n            <React.Fragment key={index}>\n              <Table.Row>\n                <Table.Header scope=\"row\" cs={styleOverrides.tableHeaderStyles}>\n                  {item.make}\n                </Table.Header>\n                <Table.Cell>{item.model}</Table.Cell>\n                <Table.Cell>{item.year}</Table.Cell>\n                <Table.Cell>{item.price}</Table.Cell>\n                <Table.Cell>{item.engine}</Table.Cell>\n                <Table.Cell>{item.transmission}</Table.Cell>\n                <Table.Cell>{item.horsepower}</Table.Cell>\n                <Table.Cell>{item.torque}</Table.Cell>\n                <Table.Cell>{item.curbWeight}</Table.Cell>\n              </Table.Row>\n            </React.Fragment>\n          ))}\n        </Table.Body>\n      </Table>\n    </>\n  );\n};\n```\n\n### Base Html Table Example\n\nIf a user needs a standard HTML\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can\nuse the `BaseTable` component.\n```tsx\nimport {BaseTable} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n  backgroundColor: system.color.surface.raised,\n});\n\nexport const BaseHtmlTable = () => {\n  return (\n    <BaseTable>\n      <BaseTable.Caption>Coffee Drinks and Sizes</BaseTable.Caption>\n      <BaseTable.Head>\n        <BaseTable.Row>\n          <BaseTable.Header scope=\"col\" cs={tableHeaderStyles}>\n            Drink\n          </BaseTable.Header>\n          <BaseTable.Header scope=\"col\" cs={tableHeaderStyles}>\n            Size\n          </BaseTable.Header>\n        </BaseTable.Row>\n      </BaseTable.Head>\n      <BaseTable.Body>\n        <BaseTable.Row>\n          <BaseTable.Cell>Espresso</BaseTable.Cell>\n          <BaseTable.Cell>1 oz</BaseTable.Cell>\n        </BaseTable.Row>\n        <BaseTable.Row>\n          <BaseTable.Cell>Macchiato</BaseTable.Cell>\n          <BaseTable.Cell>2 oz Espresso</BaseTable.Cell>\n        </BaseTable.Row>\n        <BaseTable.Row>\n          <BaseTable.Cell>Cortado</BaseTable.Cell>\n          <BaseTable.Cell>2 oz Espresso, 1 oz Foamed Milk</BaseTable.Cell>\n        </BaseTable.Row>\n        <BaseTable.Row></BaseTable.Row>\n        <BaseTable.Row>\n          <BaseTable.Cell>Cappuccino</BaseTable.Cell>\n          <BaseTable.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</BaseTable.Cell>\n        </BaseTable.Row>\n      </BaseTable.Body>\n    </BaseTable>\n  );\n};\n```\n\n### Which Component Should I Use?\n\n> If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)\n> features with their Table, then use the\n> [Table](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#basic-example)\n> component.\n\n> If a user **does not** want\n> [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their\n> Table, then use the\n> [BaseTable](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#base-html-table-example)\n> component.\n\n### Advanced\n\nYou can also find several advanced Table examples in our\n[Guides > Accessibility > Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs)\nsection.\n\n- [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)\n- [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)\n- [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)\n- [Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)\n- [Sortable Column Headers](?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)\n- [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)\n\n### Custom Styles\n\nTable and its subcomponents support custom styling via the `cs` prop. For more information, check\nour\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Accessibility\n\n`Table` is a styled compound wrapper around native HTML table elements (`<table>`, `<caption>`,\n`<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`). Assistive technology can announce column\nand row headers as users move through cells **only when** the markup is a real data table with\ncorrect headers and an accessible name. `Table` does **not** include a model, roving tabindex, or\nbuilt-in sort, filter, selection, or expand behavior.\n\nUse `Table` for tabular data with a relationship between rows and columns\u2014not for page layout.\nPrefer **`Table`** (CSS Grid) unless the design needs a standard HTML table layout without Grid;\nthen use **`BaseTable`**. The same accessibility requirements apply to both. For interactive table\npatterns, follow\n[Guides > Accessibility > Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs)\ninstead of inventing ARIA. See also\n[Table Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/table/).\n\n### Minimum accessible structure\n\nThe following matches the [Example with Caption](#example-with-caption) (`Basic` story): native\ntable markup with **`Table.Caption`** as the accessible name and **`scope=\"col\"`** on column\nheaders. The [Basic Example](#basic-example) uses a visible **`Heading`** and **`aria-labelledby`**\ninstead of a caption; that is an equally valid naming pattern (see **Accessibility Requirements**).\n\n```tsx\n\n<Table>\n  <Table.Caption>Coffee Drinks and Sizes</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.Header scope=\"col\">Drink</Table.Header>\n      <Table.Header scope=\"col\">Size</Table.Header>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Espresso</Table.Cell>\n      <Table.Cell>1 oz</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Macchiato</Table.Cell>\n      <Table.Cell>2 oz Espresso</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>;\n```\n\nPut **`Table.Caption`** first when you use it (HTML requires `<caption>` as the first child of\n`<table>`). Pair every column header with **`scope=\"col\"`**. Do not render empty **`Table.Row`**\nelements.\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically when you compose `Table` (or `BaseTable`) with its\nsubcomponents. **Do not duplicate them** in consuming code.\n\n**Native table semantics** (_applied by `createComponent` element mapping_):\n\n- `Table`: `<table>`\n- `Table.Caption`: `<caption>`\n- `Table.Head`: `<thead>`\n- `Table.Body`: `<tbody>`\n- `Table.Footer`: `<tfoot>`\n- `Table.Row`: `<tr>` (`Table.Row` also sets CSS Grid column tracks from the count of valid child\n  cells; this is layout only)\n- `Table.Header`: `<th>`\n- `Table.Cell`: `<td>`\n\n**Keyboard** (_standard `Table` behavior_):\n\n`Table` uses native `<table>` keyboard behavior. Do not add custom key handlers or grid-widget keys\non a data table.\n\nWhen **`Table`** overflows (the root stencil uses `overflow: auto`), add **`tabIndex={0}`** so\nkeyboard users can focus and scroll it, as in the [Fixed Column](#fixed-column) example. Omit\n**`tabIndex`** when the table does not scroll.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- The table is announced as a table, with its accessible name from **`Table.Caption`** or\n  **`aria-labelledby`** / **`aria-label`** on **`Table`**\n- Moving across a row announces the **column** header (`scope=\"col\"`)\n- Moving down a column announces the **row** header when body cells use **`Table.Header`** with\n  **`scope=\"row\"`**\n- Interactive controls inside cells are announced with their own name and role when focused\n\n### Accessibility Requirements\n\nRequired in application code for an accessible `Table`. There is **no** `useTableModel`. Canvas Kit\ndoes **not** set `scope`, an accessible name, `tabIndex`, or `id` / `headers` cell associations \u2014\nsupply those in application code when the table below requires them. Rows marked _(conditional)_\napply only when the situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** generate a simple data table with **`Table.Caption`**,\n**`Table.Head`** / **`Table.Body`**, **`scope=\"col\"`** on column headers, and **`Table.Cell`** for\nbody data. Omit **`Table.Footer`**, row headers, **`tabIndex`**, `id` / `headers` associations,\n**`aria-sort`**, **`aria-expanded`**, **`aria-level`**, selection checkboxes, and filter/sort popups\nunless the spec calls for those patterns.\n\n**Heading instead of caption** _(conditional)_:\n\nWhen the design uses a visible heading (or other text) instead of **`Table.Caption`**, give that\nheading a unique `id` and set **`aria-labelledby`** on **`Table`**. Do not also render\n**`Table.Caption`** unless the design needs both a caption and extra labelling. See\n[Basic Example](#basic-example).\n\n```tsx\n<Heading as=\"h3\" id={headingId}>\n  Pizza Toppings\n</Heading>\n<Table aria-labelledby={headingId}>{/* \u2026 */}</Table>\n```\n\n**Interactive and advanced patterns** _(conditional)_:\n\nDo not invent table ARIA. Copy the matching Canvas Kit guide when the spec includes that behavior:\n\n- [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)\n- [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)\n- [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)\n- [Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)\n- [Sortable Column Headers](?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)\n- [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)\n\n| Requirement                                           | How to satisfy                                                                                                                                                                                                                                                             |\n| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Data table, not layout                                | Compose **`Table`** (or **`BaseTable`**) with **`Head`**, **`Body`**, **`Row`**, **`Header`**, and **`Cell`**. Do not use a table to position non-tabular UI.                                                                                                              |\n| Accessible name                                       | **`Table.Caption`** with a descriptive title, **or** **`aria-labelledby`** on **`Table`** pointing at a visible heading `id` (see **Heading instead of caption**). Canvas Kit does not set **`aria-labelledby`**.                                                          |\n| Column headers                                        | Set **`scope=\"col\"`** on every **`Table.Header`** in **`Table.Head`**. **`Table.Header`** renders `<th>` but does not set `scope`. Do not use **`Table.Cell`** (`<td>`) for column headers.                                                                                |\n| Row headers _(conditional)_                           | When the first (or identifying) column names each row, set **`scope=\"row\"`** on **`Table.Header`** in the body, as in [Fixed Column](#fixed-column). Do not rely on `<th>` alone.                                                                                          |\n| Keyboard access to overflow _(conditional)_           | If the table scrolls, set **`tabIndex={0}`** on **`Table`**. Omit it when content does not overflow.                                                                                                                                                                       |\n| Footer _(conditional)_                                | **`Table.Footer`** only when the design includes summary or footer rows.                                                                                                                                                                                                   |\n| Form controls in cells _(conditional)_                | Label every control (prefer **`FormField`**). See [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs) and [Form Field](?path=/docs/components-inputs-form-field--docs).                                                             |\n| Sort, filter, select, expand, or nest _(conditional)_ | Follow the matching [Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs) guide. **Ask the developer** which pattern the spec requires before generating `aria-sort`, `aria-expanded`, `aria-level`, `aria-owns`, live regions, or selection checkboxes. |\n\n**Summary for code generation:**\n\n- **REQUIRED:** semantic `Table` composition, accessible name (caption or `aria-labelledby`),\n  `scope=\"col\"` on column headers\n- **CONDITIONAL:** heading + `aria-labelledby`, `scope=\"row\"`, `tabIndex={0}` for overflow,\n  `Table.Footer`, form-field labelling in cells, advanced table patterns from the guides\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Manually set `role=\"table\"`, `role=\"row\"`, `role=\"columnheader\"`, `role=\"rowheader\"`, or\n  `role=\"cell\"` on **`Table`** subcomponents \u2014 they already render native table elements\n- Omit **`scope`** on **`Table.Header`**, or use **`Table.Cell`** for column or row headers\n- Generate `id` / `headers` associations on cells for a simple data table \u2014 use **`scope`** instead\n  (see **Accessibility Requirements**)\n- Leave the table unnamed (no **`Table.Caption`**, **`aria-labelledby`**, or **`aria-label`**), or\n  set **`aria-labelledby`** when **`Table.Caption`** already names the table\n- Use a table for page layout\n- Add **`tabIndex={0}`** on a table that does not scroll, or omit it on a horizontally/vertically\n  scrollable table\n- Set **`aria-sort`**, **`aria-expanded`**, **`aria-level`**, **`aria-owns`**, or selection\n  checkboxes by default \u2014 those belong to specific\n  [Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs) and need a matching design\n  spec\n- Nest a `<table>` inside a cell to fake hierarchy, or add extra **`Table.Body`** elements to fake a\n  tree \u2014 see [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)\n- Put a \"Select All\" checkbox in a column header **`Table.Header`** without following\n  [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)\n- Place unlabeled inputs in cells, or rely on the column header alone without checking\n  [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)\n- Generate **`role=\"grid\"`** / grid-widget keyboard behavior on **`Table`** \u2014 CSS Grid on\n  **`Table.Row`** is visual layout, not an ARIA grid\n\n## Component API\n\n",
+      accessibilityProse: '## Accessibility\n\n`Table` is a styled compound wrapper around native HTML table elements (`<table>`, `<caption>`,\n`<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`). Assistive technology can announce column\nand row headers as users move through cells **only when** the markup is a real data table with\ncorrect headers and an accessible name. `Table` does **not** include a model, roving tabindex, or\nbuilt-in sort, filter, selection, or expand behavior.\n\nUse `Table` for tabular data with a relationship between rows and columns\u2014not for page layout.\nPrefer **`Table`** (CSS Grid) unless the design needs a standard HTML table layout without Grid;\nthen use **`BaseTable`**. The same accessibility requirements apply to both. For interactive table\npatterns, follow\n[Guides > Accessibility > Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs)\ninstead of inventing ARIA. See also\n[Table Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/table/).\n\n### Minimum accessible structure\n\nThe following matches the [Example with Caption](#example-with-caption) (`Basic` story): native\ntable markup with **`Table.Caption`** as the accessible name and **`scope="col"`** on column\nheaders. The [Basic Example](#basic-example) uses a visible **`Heading`** and **`aria-labelledby`**\ninstead of a caption; that is an equally valid naming pattern (see **Accessibility Requirements**).\n\n```tsx\n\n<Table>\n  <Table.Caption>Coffee Drinks and Sizes</Table.Caption>\n  <Table.Head>\n    <Table.Row>\n      <Table.Header scope="col">Drink</Table.Header>\n      <Table.Header scope="col">Size</Table.Header>\n    </Table.Row>\n  </Table.Head>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Espresso</Table.Cell>\n      <Table.Cell>1 oz</Table.Cell>\n    </Table.Row>\n    <Table.Row>\n      <Table.Cell>Macchiato</Table.Cell>\n      <Table.Cell>2 oz Espresso</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table>;\n```\n\nPut **`Table.Caption`** first when you use it (HTML requires `<caption>` as the first child of\n`<table>`). Pair every column header with **`scope="col"`**. Do not render empty **`Table.Row`**\nelements.\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically when you compose `Table` (or `BaseTable`) with its\nsubcomponents. **Do not duplicate them** in consuming code.\n\n**Native table semantics** (_applied by `createComponent` element mapping_):\n\n- `Table`: `<table>`\n- `Table.Caption`: `<caption>`\n- `Table.Head`: `<thead>`\n- `Table.Body`: `<tbody>`\n- `Table.Footer`: `<tfoot>`\n- `Table.Row`: `<tr>` (`Table.Row` also sets CSS Grid column tracks from the count of valid child\n  cells; this is layout only)\n- `Table.Header`: `<th>`\n- `Table.Cell`: `<td>`\n\n**Keyboard** (_standard `Table` behavior_):\n\n`Table` uses native `<table>` keyboard behavior. Do not add custom key handlers or grid-widget keys\non a data table.\n\nWhen **`Table`** overflows (the root stencil uses `overflow: auto`), add **`tabIndex={0}`** so\nkeyboard users can focus and scroll it, as in the [Fixed Column](#fixed-column) example. Omit\n**`tabIndex`** when the table does not scroll.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- The table is announced as a table, with its accessible name from **`Table.Caption`** or\n  **`aria-labelledby`** / **`aria-label`** on **`Table`**\n- Moving across a row announces the **column** header (`scope="col"`)\n- Moving down a column announces the **row** header when body cells use **`Table.Header`** with\n  **`scope="row"`**\n- Interactive controls inside cells are announced with their own name and role when focused\n\n### Accessibility Requirements\n\nRequired in application code for an accessible `Table`. There is **no** `useTableModel`. Canvas Kit\ndoes **not** set `scope`, an accessible name, `tabIndex`, or `id` / `headers` cell associations \u2014\nsupply those in application code when the table below requires them. Rows marked _(conditional)_\napply only when the situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** generate a simple data table with **`Table.Caption`**,\n**`Table.Head`** / **`Table.Body`**, **`scope="col"`** on column headers, and **`Table.Cell`** for\nbody data. Omit **`Table.Footer`**, row headers, **`tabIndex`**, `id` / `headers` associations,\n**`aria-sort`**, **`aria-expanded`**, **`aria-level`**, selection checkboxes, and filter/sort popups\nunless the spec calls for those patterns.\n\n**Heading instead of caption** _(conditional)_:\n\nWhen the design uses a visible heading (or other text) instead of **`Table.Caption`**, give that\nheading a unique `id` and set **`aria-labelledby`** on **`Table`**. Do not also render\n**`Table.Caption`** unless the design needs both a caption and extra labelling. See\n[Basic Example](#basic-example).\n\n```tsx\n<Heading as="h3" id={headingId}>\n  Pizza Toppings\n</Heading>\n<Table aria-labelledby={headingId}>{/* \u2026 */}</Table>\n```\n\n**Interactive and advanced patterns** _(conditional)_:\n\nDo not invent table ARIA. Copy the matching Canvas Kit guide when the spec includes that behavior:\n\n- [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)\n- [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)\n- [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)\n- [Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)\n- [Sortable Column Headers](?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)\n- [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)\n\n| Requirement                                           | How to satisfy                                                                                                                                                                                                                                                             |\n| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Data table, not layout                                | Compose **`Table`** (or **`BaseTable`**) with **`Head`**, **`Body`**, **`Row`**, **`Header`**, and **`Cell`**. Do not use a table to position non-tabular UI.                                                                                                              |\n| Accessible name                                       | **`Table.Caption`** with a descriptive title, **or** **`aria-labelledby`** on **`Table`** pointing at a visible heading `id` (see **Heading instead of caption**). Canvas Kit does not set **`aria-labelledby`**.                                                          |\n| Column headers                                        | Set **`scope="col"`** on every **`Table.Header`** in **`Table.Head`**. **`Table.Header`** renders `<th>` but does not set `scope`. Do not use **`Table.Cell`** (`<td>`) for column headers.                                                                                |\n| Row headers _(conditional)_                           | When the first (or identifying) column names each row, set **`scope="row"`** on **`Table.Header`** in the body, as in [Fixed Column](#fixed-column). Do not rely on `<th>` alone.                                                                                          |\n| Keyboard access to overflow _(conditional)_           | If the table scrolls, set **`tabIndex={0}`** on **`Table`**. Omit it when content does not overflow.                                                                                                                                                                       |\n| Footer _(conditional)_                                | **`Table.Footer`** only when the design includes summary or footer rows.                                                                                                                                                                                                   |\n| Form controls in cells _(conditional)_                | Label every control (prefer **`FormField`**). See [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs) and [Form Field](?path=/docs/components-inputs-form-field--docs).                                                             |\n| Sort, filter, select, expand, or nest _(conditional)_ | Follow the matching [Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs) guide. **Ask the developer** which pattern the spec requires before generating `aria-sort`, `aria-expanded`, `aria-level`, `aria-owns`, live regions, or selection checkboxes. |\n\n**Summary for code generation:**\n\n- **REQUIRED:** semantic `Table` composition, accessible name (caption or `aria-labelledby`),\n  `scope="col"` on column headers\n- **CONDITIONAL:** heading + `aria-labelledby`, `scope="row"`, `tabIndex={0}` for overflow,\n  `Table.Footer`, form-field labelling in cells, advanced table patterns from the guides\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Manually set `role="table"`, `role="row"`, `role="columnheader"`, `role="rowheader"`, or\n  `role="cell"` on **`Table`** subcomponents \u2014 they already render native table elements\n- Omit **`scope`** on **`Table.Header`**, or use **`Table.Cell`** for column or row headers\n- Generate `id` / `headers` associations on cells for a simple data table \u2014 use **`scope`** instead\n  (see **Accessibility Requirements**)\n- Leave the table unnamed (no **`Table.Caption`**, **`aria-labelledby`**, or **`aria-label`**), or\n  set **`aria-labelledby`** when **`Table.Caption`** already names the table\n- Use a table for page layout\n- Add **`tabIndex={0}`** on a table that does not scroll, or omit it on a horizontally/vertically\n  scrollable table\n- Set **`aria-sort`**, **`aria-expanded`**, **`aria-level`**, **`aria-owns`**, or selection\n  checkboxes by default \u2014 those belong to specific\n  [Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs) and need a matching design\n  spec\n- Nest a `<table>` inside a cell to fake hierarchy, or add extra **`Table.Body`** elements to fake a\n  tree \u2014 see [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)\n- Put a "Select All" checkbox in a column header **`Table.Header`** without following\n  [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)\n- Place unlabeled inputs in cells, or rely on the column header alone without checking\n  [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)\n- Generate **`role="grid"`** / grid-widget keyboard behavior on **`Table`** \u2014 CSS Grid on\n  **`Table.Row`** is visual layout, not an ARIA grid'
     },
     skeleton: {
       title: "Components/Indicators/Skeleton",
@@ -522,8 +577,8 @@ var stories_config_default = {
       title: "Components/Inputs/Checkbox",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-inputs-checkbox--docs",
       mdxPath: "modules/react/checkbox/stories/Checkbox.mdx",
-      mdxProse: "# Canvas Kit Checkbox\n\nCheckboxes allow a user to select zero, one, or multiple values from a predefined list of 7 or less\noptions.\n\n[> Workday Design Reference](https://design.workday.com/components/inputs/checkboxes)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nCheckbox may be used on its own without [Form Field](/components/inputs/form-field/) since it\nincludes a `<label>` with a `for` attribute referencing the underlying `<input type=\"checkbox\">`\nelement.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const Basic = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Inverse\n\nCheckbox with inverse variation\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = createStyles({\n  backgroundColor: system.color.surface.contrast.default,\n  padding: system.padding.md,\n});\n\nexport const Inverse = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <Flex cs={styleOverrides}>\n      <Checkbox\n        variant=\"inverse\"\n        checked={checked}\n        label=\"I agree to the terms\"\n        onChange={handleChange}\n      />\n    </Flex>\n  );\n};\n```\n\n### Disabled\n\nSet the `disabled` prop of the Checkbox to prevent users from interacting with it.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const Disabled = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField>\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          disabled={true}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Indeterminate\n\nSet the `indeterminate` prop of the Checkbox to `true` to indicate the Checkbox is neither checked\nnor unchecked.\n\nA common use case for an indeterminate Checkbox is when the value of a parent Checkbox is dependent\non a number of child Checkboxes. The parent Checkbox is set to the indeterminate state if some (but\nnot all) of its children are checked.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {Box} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = createStyles({\n  marginInlineStart: system.gap.xl,\n  marginBlockStart: system.gap.sm,\n});\n\nexport const Indeterminate = () => {\n  const [pizzaChecked, setPizzaChecked] = React.useState(false);\n  const [pizzaIndeterminate, setPizzaIndeterminate] = React.useState(false);\n\n  const [toppings, setToppings] = React.useState([\n    {name: 'Pepperoni', checked: false},\n    {name: 'Sausage', checked: false},\n    {name: 'Bell Peppers', checked: false},\n    {name: 'Olives', checked: false},\n    {name: 'Onions', checked: false},\n  ]);\n\n  const handlePizzaChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = event.target.checked;\n\n    if (checked || (!checked && pizzaIndeterminate)) {\n      setPizzaChecked(true);\n      setToppings(\n        toppings.map(topping => ({\n          ...topping,\n          checked: true,\n        }))\n      );\n    } else {\n      setPizzaChecked(false);\n      setToppings(\n        toppings.map(topping => ({\n          ...topping,\n          checked: false,\n        }))\n      );\n    }\n\n    setPizzaIndeterminate(false);\n  };\n\n  const handleToppingChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n    const newToppings = toppings.map(topping => ({...topping}));\n    newToppings[index].checked = event.target.checked;\n    setToppings(newToppings);\n\n    const anyToppingChecked = newToppings.filter(topping => topping.checked).length > 0;\n    const anyToppingUnchecked = newToppings.filter(topping => !topping.checked).length > 0;\n    const allToppingChecked = !anyToppingUnchecked;\n    setPizzaIndeterminate(anyToppingChecked && anyToppingUnchecked);\n    setPizzaChecked(allToppingChecked);\n  };\n\n  return (\n    <>\n      <Checkbox\n        checked={pizzaChecked}\n        indeterminate={pizzaIndeterminate}\n        label=\"Supreme Pizza Toppings\"\n        onChange={handlePizzaChange}\n      />\n      <Box cs={styleOverrides}>\n        {toppings.map((topping, index) => (\n          <Checkbox\n            checked={topping.checked}\n            key={topping.name}\n            label={topping.name}\n            onChange={event => handleToppingChange(event, index)}\n          />\n        ))}\n      </Box>\n    </>\n  );\n};\n```\n\n### Ref Forwarding\n\nCheckbox supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\n`ref` to its underlying `<input type=\"checkbox\">` element.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\nimport {Box} from '@workday/canvas-kit-react/layout';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst boxStyles = createStyles({\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nexport const RefForwarding = () => {\n  const [checked, setChecked] = React.useState(false);\n  const ref = React.useRef(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  const handleClick = () => {\n    ref.current.click();\n  };\n\n  return (\n    <>\n      <Box cs={boxStyles}>\n        <FormField>\n          <FormField.Label>Confirm</FormField.Label>\n          <FormField.Field>\n            <FormField.Input\n              as={Checkbox}\n              checked={checked}\n              label=\"I agree to the terms\"\n              onChange={handleChange}\n              ref={ref}\n            />\n          </FormField.Field>\n        </FormField>\n      </Box>\n      <PrimaryButton onClick={handleClick}>Check Agreement to Terms</PrimaryButton>\n    </>\n  );\n};\n```\n\n### Label Position Horizontal\n\nSet the `orientation` prop of the Form Field to designate the position of the label relative to the\ninput component. By default, the orientation will be set to `vertical`.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const LabelPosition = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField orientation=\"horizontalStart\">\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Required\n\nSet the `required` prop of a wrapping Form Field to `true` to indicate that the field is required.\nLabels for required fields are suffixed by a red asterisk.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const Required = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField isRequired={true}>\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Error States\n\nSet the `error` prop of the wrapping Form Field to `\"caution\"` or `\"error\"` to set the Checkbox to\nthe Alert or Error state, respectively. You will also need to set the `hintId` and `hintText` props\non the Form Field to meet accessibility standards. You may wish to omit the `label` prop on the Form\nField given that Checkbox already includes a label.\n\nThe `error` prop may be applied directly to the Checkbox with a value of `\"caution\"` or `\"error\"` if\nForm Field is not being used.\n\n#### Caution\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const Caution = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField error=\"caution\">\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n#### Error\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormField} from '@workday/canvas-kit-react/form-field';\n\nexport const Error = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormField error=\"error\">\n      <FormField.Label>Confirm</FormField.Label>\n      <FormField.Field>\n        <FormField.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n        <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>\n      </FormField.Field>\n    </FormField>\n  );\n};\n```\n\n### Custom Styles\n\nCheckbox supports custom styling via the `cs` prop. For more information, check our\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Component API\n\n## Specifications\n\n",
-      accessibilityProse: ""
+      mdxProse: "# Canvas Kit Checkbox\n\nCheckboxes allow a user to select zero, one, or multiple values from a predefined list of 7 or less\noptions.\n\n[> Workday Design Reference](https://design.workday.com/components/inputs/checkboxes)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nCheckbox may be used on its own without [Form Field](/components/inputs/form-field/) since it\nincludes a `<label>` with a `for` attribute referencing the underlying `<input type=\"checkbox\">`\nelement. For checkboxes grouped with **`FormFieldGroup`**, see\n[FormField accessibility](/components/inputs/form-field/#accessibility) for hint, error, caution,\nand required state wiring.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\n\nexport const Basic = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return <Checkbox checked={checked} label=\"I agree to the terms\" onChange={handleChange} />;\n};\n```\n\n### Inverse\n\nCheckbox with inverse variation\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = createStyles({\n  backgroundColor: system.color.surface.contrast.default,\n  padding: system.padding.md,\n});\n\nexport const Inverse = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <Flex cs={styleOverrides}>\n      <Checkbox\n        variant=\"inverse\"\n        checked={checked}\n        label=\"I agree to the terms\"\n        onChange={handleChange}\n      />\n    </Flex>\n  );\n};\n```\n\n### Disabled\n\nSet the `disabled` prop of the Checkbox to prevent users from interacting with it.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\n\nexport const Disabled = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <Checkbox checked={checked} disabled label=\"I agree to the terms\" onChange={handleChange} />\n  );\n};\n```\n\n### Indeterminate\n\nSet the `indeterminate` prop of the Checkbox to `true` to indicate the Checkbox is neither checked\nnor unchecked.\n\nA common use case for an indeterminate Checkbox is when the value of a parent Checkbox is dependent\non a number of child Checkboxes. The parent Checkbox is set to the indeterminate state if some (but\nnot all) of its children are checked.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst listStyles = createStyles({\n  listStyle: 'none',\n  margin: 0,\n  padding: 0,\n});\n\nconst nestedListStyles = createStyles({\n  listStyle: 'none',\n  margin: 0,\n  marginInlineStart: system.gap.xl,\n  marginBlockStart: system.gap.sm,\n  padding: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: system.gap.sm,\n});\n\nexport const Indeterminate = () => {\n  const [pizzaChecked, setPizzaChecked] = React.useState(false);\n  const [pizzaIndeterminate, setPizzaIndeterminate] = React.useState(false);\n\n  const [toppings, setToppings] = React.useState([\n    {name: 'Pepperoni', checked: false},\n    {name: 'Sausage', checked: false},\n    {name: 'Bell Peppers', checked: false},\n    {name: 'Olives', checked: false},\n    {name: 'Onions', checked: false},\n  ]);\n\n  const handlePizzaChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = event.target.checked;\n\n    if (checked || (!checked && pizzaIndeterminate)) {\n      setPizzaChecked(true);\n      setToppings(\n        toppings.map(topping => ({\n          ...topping,\n          checked: true,\n        }))\n      );\n    } else {\n      setPizzaChecked(false);\n      setToppings(\n        toppings.map(topping => ({\n          ...topping,\n          checked: false,\n        }))\n      );\n    }\n\n    setPizzaIndeterminate(false);\n  };\n\n  const handleToppingChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n    const newToppings = toppings.map(topping => ({...topping}));\n    newToppings[index].checked = event.target.checked;\n    setToppings(newToppings);\n\n    const anyToppingChecked = newToppings.filter(topping => topping.checked).length > 0;\n    const anyToppingUnchecked = newToppings.filter(topping => !topping.checked).length > 0;\n    const allToppingChecked = !anyToppingUnchecked;\n    setPizzaIndeterminate(anyToppingChecked && anyToppingUnchecked);\n    setPizzaChecked(allToppingChecked);\n  };\n\n  return (\n    <ul className={listStyles}>\n      <li>\n        <Checkbox\n          checked={pizzaChecked}\n          indeterminate={pizzaIndeterminate}\n          label=\"Supreme Pizza Toppings\"\n          onChange={handlePizzaChange}\n        />\n        <ul className={nestedListStyles}>\n          {toppings.map((topping, index) => (\n            <li key={topping.name}>\n              <Checkbox\n                checked={topping.checked}\n                label={topping.name}\n                onChange={event => handleToppingChange(event, index)}\n              />\n            </li>\n          ))}\n        </ul>\n      </li>\n    </ul>\n  );\n};\n```\n\n> **Accessibility Note**: Use semantic unordered list markup so that screen readers can communicate\n> the nested hierarchy of the components to users.\n\n### Ref Forwarding\n\nCheckbox supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward\n`ref` to its underlying `<input type=\"checkbox\">` element.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {changeFocus} from '@workday/canvas-kit-react/common';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst containerStyles = createStyles({\n  gap: system.gap.md,\n  alignItems: 'flex-start',\n  flexDirection: 'column',\n});\n\nexport const RefForwarding = () => {\n  const [checked, setChecked] = React.useState(false);\n  const ref = React.useRef<HTMLInputElement>(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  const handleClick = () => {\n    changeFocus(ref.current);\n  };\n\n  return (\n    <Flex cs={containerStyles}>\n      <Checkbox checked={checked} label=\"I agree to the terms\" onChange={handleChange} ref={ref} />\n      <PrimaryButton onClick={handleClick}>Focus Checkbox</PrimaryButton>\n    </Flex>\n  );\n};\n```\n\n### Label Position Horizontal\n\nSet the `orientation` prop of the wrapping FormFieldGroup to designate the position of the group\nlabel relative to the checkboxes. By default, the orientation will be set to `vertical`.\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\n\nexport const LabelPosition = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormFieldGroup orientation=\"horizontalStart\">\n      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>\n      <FormFieldGroup.Field>\n        <FormFieldGroup.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormFieldGroup.Field>\n    </FormFieldGroup>\n  );\n};\n```\n\n### Required\n\nSet the `isRequired` prop of a wrapping FormFieldGroup to `true` to indicate that the field is\nrequired. Labels for required fields are suffixed by a red asterisk.\n\nA standalone checkbox does not need **`FormFieldGroup`**. This example wraps a single checkbox so\n`isRequired` can show the required asterisk on **`FormFieldGroup.Label`**. Use that wrapper only\nwhen the spec includes a required state (or a group name, hint, error, or caution). See\n[Accessibility](#accessibility).\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\n\nexport const Required = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormFieldGroup isRequired={true}>\n      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>\n      <FormFieldGroup.Field>\n        <FormFieldGroup.Input\n          as={Checkbox}\n          checked={checked}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n      </FormFieldGroup.Field>\n    </FormFieldGroup>\n  );\n};\n```\n\n### Error States\n\nSet the `error` prop of the wrapping FormFieldGroup to `\"caution\"` or `\"error\"` to set the Checkbox\nto the Alert or Error state, respectively. Render `FormFieldGroup.Hint` with the message text so\nassistive technology can associate the hint with the group. Keep the Checkbox `label` so each\ncontrol retains its own accessible name; `FormFieldGroup.Label` only provides the group name.\n\nThe `error` prop may be applied directly to the Checkbox with a value of `\"caution\"` or `\"error\"` if\nFormFieldGroup is not being used.\n\n#### Caution\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\n\nexport const Caution = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormFieldGroup error=\"caution\">\n      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>\n      <FormFieldGroup.Field>\n        <FormFieldGroup.Input\n          as={Checkbox}\n          checked={checked}\n          error={Checkbox.ErrorType.Caution}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n        <FormFieldGroup.Hint>You must agree to the terms before proceeding</FormFieldGroup.Hint>\n      </FormFieldGroup.Field>\n    </FormFieldGroup>\n  );\n};\n```\n\n#### Error\n```tsx\nimport React from 'react';\n\nimport {Checkbox} from '@workday/canvas-kit-react/checkbox';\nimport {FormFieldGroup} from '@workday/canvas-kit-react/form-field';\n\nexport const Error = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setChecked(event.target.checked);\n  };\n\n  return (\n    <FormFieldGroup error=\"error\">\n      <FormFieldGroup.Label>Confirm</FormFieldGroup.Label>\n      <FormFieldGroup.Field>\n        <FormFieldGroup.Input\n          as={Checkbox}\n          checked={checked}\n          error={Checkbox.ErrorType.Error}\n          label=\"I agree to the terms\"\n          onChange={handleChange}\n        />\n        <FormFieldGroup.Hint>You must agree to the terms before proceeding</FormFieldGroup.Hint>\n      </FormFieldGroup.Field>\n    </FormFieldGroup>\n  );\n};\n```\n\n### Custom Styles\n\nCheckbox supports custom styling via the `cs` prop. For more information, check our\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Accessibility\n\nThe primary accessibility goal is a visible, programmatically determinable name and a checked,\nunchecked, or mixed state that assistive technology can expose. Use **Checkbox** when the user can\nselect zero, one, or many independent options. For mutually exclusive choices, use\n[**Radio**](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.\nWhen checkboxes answer the same question, or need hint, error, caution, or required association, see\n[FormField's accessibility documentation](/components/inputs/form-field/#accessibility).\n\n### Minimum Accessible Structure\n\nThe following matches the [Basic Example](#basic-example): a **`Checkbox`** with a non-empty\n**`label`**. **`FormFieldGroup`** is not required for a single standalone checkbox with no hint,\nerror, caution, or required state.\n\n```tsx\n\n<Checkbox label=\"I agree to the terms\" />;\n```\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically on **`Checkbox`**. When checkboxes that answer the same\nquestion are composed with **`FormFieldGroup`** subcomponents, that grouping wiring is also applied\nautomatically. **Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by Checkbox_):\n\n- **`Checkbox`**: Renders a native `<input type=\"checkbox\">`. Canvas Kit assigns an `id` with\n  `useUniqueId` unless you pass **`id`**.\n- **`label`**: Renders a visible `<label htmlFor={id}>` so the control has an accessible name and\n  clicking the text activates the input.\n- **`indeterminate`**: Sets `aria-checked=\"mixed\"` and the input's native `indeterminate` property.\n  Otherwise `aria-checked` follows the **`checked`** prop.\n- **`disabled`**: Maps to the native `disabled` attribute.\n- **`ref`**: Forwards to the underlying `<input type=\"checkbox\">`.\n\n**Keyboard** (_native checkbox behavior_):\n\n**`Checkbox`** uses native `<input type=\"checkbox\">` keyboard behavior (tab order, Space to toggle,\nand label activation). Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On focus, assistive technology announces the Checkbox **`label`** and checked, unchecked, or mixed\n  state\n- Disabled checkboxes are announced as unavailable\n\nFor group, hint, error, and required association, see\n[FormField's Built-in Behaviors](/components/inputs/form-field/#built-in-behaviors).\n\n### Accessibility Requirements\n\nRequired in application code for an accessible Checkbox. Rows marked _(conditional)_ apply only when\nthe situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** use a visible, non-empty Checkbox **`label`**. Omit\n**`FormFieldGroup`** unless the spec includes a group name, more than one independent option for the\nsame question, or hint, error, caution, or required state. Omit **`FormFieldGroup.Hint`**,\n**`isRequired`**, **`error`**, **`indeterminate`**, **`disabled`**, a custom **`id`**, and a\n**`ref`** unless the spec requires them.\n\n**Choose a composition:**\n\n- Standalone **`Checkbox`** with **`label`** \u2014 one control with no hint, error, caution, or required\n  state\n- **`FormFieldGroup`** \u2014 one question with two or more independent options, or any checkbox that\n  needs a group name, hint, error, caution, or required state\n- Nested `<ul>` / `<li>` \u2014 parent checkbox with nested children and **`indeterminate`**. Do not use\n  **`FormFieldGroup`** for that hierarchy. Checkboxes that answer different questions stay in\n  separate compositions.\n\n**Programmatic focus** _(conditional \u2014 omit by default)_:\n\nAttach a `ref` only when the product must move focus to the checkbox after an action (for example,\n**Submit** in [Ref Forwarding](#ref-forwarding)). Do not attach a `ref` or call `focus()` unless the\ndesign or developer asks for it.\n\n| Requirement                             | How to satisfy                                                                                                                                                                                                                                                                                                                                                                                                                       |\n| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Accessible name                         | Non-empty **`label`** on every **`Checkbox`**. **`FormFieldGroup.Label`** names the group only (`div` with an `id`); it is not a `<label>` and does not replace **`label`**.                                                                                                                                                                                                                                                         |\n| Group wiring _(conditional)_            | When the spec is one question with two or more independent options, or includes a group name, hint, error, caution, or required state: **`FormFieldGroup`** + **`FormFieldGroup.Label`** + **`FormFieldGroup.Input as={Checkbox}`**. Put hint, error, caution, and required on the group \u2014 see [FormField accessibility](/components/inputs/form-field/#accessibility). See [Required](#required) and [Error States](#error-states). |\n| Visual error or caution _(conditional)_ | When **`FormFieldGroup`** has `error=\"error\"` or `error=\"caution\"`, also set **`error`** on **`Checkbox`** to the same state so the visual ring appears. See [Caution](#caution) and [Error](#error).                                                                                                                                                                                                                                |\n| Indeterminate parent _(conditional)_    | When a parent checkbox's value depends on nested children and some (but not all) children are checked: set **`indeterminate`** on the parent **`Checkbox`**; keep a non-empty **`label`** on the parent and on each child; nest the children in a `<ul>` inside the parent's `<li>`. See [Indeterminate](#indeterminate).                                                                                                            |\n| Disabled _(conditional)_                | `disabled` on **`Checkbox`** when the spec marks the option unavailable. See [Disabled](#disabled).                                                                                                                                                                                                                                                                                                                                  |\n| Programmatic focus _(conditional)_      | `ref` on **`Checkbox`** (or **`FormFieldGroup.Input`**) and move focus when the product requires it \u2014 omit by default (see **Programmatic focus** above and [Ref Forwarding](#ref-forwarding)).                                                                                                                                                                                                                                      |\n\n**Summary for code generation:**\n\n- **REQUIRED:** non-empty **`label`**\n- **CONDITIONAL:** **`FormFieldGroup`** for one question with two or more independent options, or\n  for hint, error, caution, or required; **`error`** on **`Checkbox`** when the group is in caution\n  or error; nested list + **`indeterminate`** for a parent/child tree; disabled; programmatic focus\n  via `ref`. See [FormField accessibility](/components/inputs/form-field/#accessibility) for group\n  hint, error, caution, and required.\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Manually set `aria-checked` or `htmlFor` on **`Checkbox`**, or pass an **`id`** when the spec does\n  not require a known id \u2014 Canvas Kit wires `aria-checked` and `htmlFor`, and assigns an `id` with\n  `useUniqueId` unless you pass one (see **If no design spec is provided**)\n- Ignore **Choose a composition** \u2014 do not wrap a standalone checkbox with no group name, hint,\n  error, caution, or required state in **`FormFieldGroup`**; do not put different questions in one\n  group; do not use **`FormFieldGroup`** for a parent/child indeterminate tree\n- Wrap **`Checkbox`** with **`FormField.Input`** \u2014 **`Checkbox`** already renders its own `<label>`.\n  When a group is required, use **`FormFieldGroup.Input as={Checkbox}`** (see **Group wiring**)\n- Omit **`label`** because **`FormFieldGroup.Label`** is present \u2014 the group label does not name the\n  individual control\n- Set `aria-checked=\"mixed\"` without **`indeterminate`**\n- Use **`aria-disabled`** instead of **`disabled`** \u2014 **`Checkbox`** maps unavailability to the\n  native **`disabled`** prop\n- Use **`disabled`** when the spec says users must still focus the control to hear why it is\n  unavailable. Only in that case keep the checkbox enabled and put the explanation in\n  **`FormFieldGroup.Hint`** or on an adjacent focusable control\n- Use **Checkbox** for mutually exclusive choices \u2014 use\n  [**Radio**](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead\n\n## Component API\n\n## Specifications\n\n",
+      accessibilityProse: '## Accessibility\n\nThe primary accessibility goal is a visible, programmatically determinable name and a checked,\nunchecked, or mixed state that assistive technology can expose. Use **Checkbox** when the user can\nselect zero, one, or many independent options. For mutually exclusive choices, use\n[**Radio**](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.\nWhen checkboxes answer the same question, or need hint, error, caution, or required association, see\n[FormField\'s accessibility documentation](/components/inputs/form-field/#accessibility).\n\n### Minimum Accessible Structure\n\nThe following matches the [Basic Example](#basic-example): a **`Checkbox`** with a non-empty\n**`label`**. **`FormFieldGroup`** is not required for a single standalone checkbox with no hint,\nerror, caution, or required state.\n\n```tsx\n\n<Checkbox label="I agree to the terms" />;\n```\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically on **`Checkbox`**. When checkboxes that answer the same\nquestion are composed with **`FormFieldGroup`** subcomponents, that grouping wiring is also applied\nautomatically. **Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by Checkbox_):\n\n- **`Checkbox`**: Renders a native `<input type="checkbox">`. Canvas Kit assigns an `id` with\n  `useUniqueId` unless you pass **`id`**.\n- **`label`**: Renders a visible `<label htmlFor={id}>` so the control has an accessible name and\n  clicking the text activates the input.\n- **`indeterminate`**: Sets `aria-checked="mixed"` and the input\'s native `indeterminate` property.\n  Otherwise `aria-checked` follows the **`checked`** prop.\n- **`disabled`**: Maps to the native `disabled` attribute.\n- **`ref`**: Forwards to the underlying `<input type="checkbox">`.\n\n**Keyboard** (_native checkbox behavior_):\n\n**`Checkbox`** uses native `<input type="checkbox">` keyboard behavior (tab order, Space to toggle,\nand label activation). Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On focus, assistive technology announces the Checkbox **`label`** and checked, unchecked, or mixed\n  state\n- Disabled checkboxes are announced as unavailable\n\nFor group, hint, error, and required association, see\n[FormField\'s Built-in Behaviors](/components/inputs/form-field/#built-in-behaviors).\n\n### Accessibility Requirements\n\nRequired in application code for an accessible Checkbox. Rows marked _(conditional)_ apply only when\nthe situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** use a visible, non-empty Checkbox **`label`**. Omit\n**`FormFieldGroup`** unless the spec includes a group name, more than one independent option for the\nsame question, or hint, error, caution, or required state. Omit **`FormFieldGroup.Hint`**,\n**`isRequired`**, **`error`**, **`indeterminate`**, **`disabled`**, a custom **`id`**, and a\n**`ref`** unless the spec requires them.\n\n**Choose a composition:**\n\n- Standalone **`Checkbox`** with **`label`** \u2014 one control with no hint, error, caution, or required\n  state\n- **`FormFieldGroup`** \u2014 one question with two or more independent options, or any checkbox that\n  needs a group name, hint, error, caution, or required state\n- Nested `<ul>` / `<li>` \u2014 parent checkbox with nested children and **`indeterminate`**. Do not use\n  **`FormFieldGroup`** for that hierarchy. Checkboxes that answer different questions stay in\n  separate compositions.\n\n**Programmatic focus** _(conditional \u2014 omit by default)_:\n\nAttach a `ref` only when the product must move focus to the checkbox after an action (for example,\n**Submit** in [Ref Forwarding](#ref-forwarding)). Do not attach a `ref` or call `focus()` unless the\ndesign or developer asks for it.\n\n| Requirement                             | How to satisfy                                                                                                                                                                                                                                                                                                                                                                                                                       |\n| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Accessible name                         | Non-empty **`label`** on every **`Checkbox`**. **`FormFieldGroup.Label`** names the group only (`div` with an `id`); it is not a `<label>` and does not replace **`label`**.                                                                                                                                                                                                                                                         |\n| Group wiring _(conditional)_            | When the spec is one question with two or more independent options, or includes a group name, hint, error, caution, or required state: **`FormFieldGroup`** + **`FormFieldGroup.Label`** + **`FormFieldGroup.Input as={Checkbox}`**. Put hint, error, caution, and required on the group \u2014 see [FormField accessibility](/components/inputs/form-field/#accessibility). See [Required](#required) and [Error States](#error-states). |\n| Visual error or caution _(conditional)_ | When **`FormFieldGroup`** has `error="error"` or `error="caution"`, also set **`error`** on **`Checkbox`** to the same state so the visual ring appears. See [Caution](#caution) and [Error](#error).                                                                                                                                                                                                                                |\n| Indeterminate parent _(conditional)_    | When a parent checkbox\'s value depends on nested children and some (but not all) children are checked: set **`indeterminate`** on the parent **`Checkbox`**; keep a non-empty **`label`** on the parent and on each child; nest the children in a `<ul>` inside the parent\'s `<li>`. See [Indeterminate](#indeterminate).                                                                                                            |\n| Disabled _(conditional)_                | `disabled` on **`Checkbox`** when the spec marks the option unavailable. See [Disabled](#disabled).                                                                                                                                                                                                                                                                                                                                  |\n| Programmatic focus _(conditional)_      | `ref` on **`Checkbox`** (or **`FormFieldGroup.Input`**) and move focus when the product requires it \u2014 omit by default (see **Programmatic focus** above and [Ref Forwarding](#ref-forwarding)).                                                                                                                                                                                                                                      |\n\n**Summary for code generation:**\n\n- **REQUIRED:** non-empty **`label`**\n- **CONDITIONAL:** **`FormFieldGroup`** for one question with two or more independent options, or\n  for hint, error, caution, or required; **`error`** on **`Checkbox`** when the group is in caution\n  or error; nested list + **`indeterminate`** for a parent/child tree; disabled; programmatic focus\n  via `ref`. See [FormField accessibility](/components/inputs/form-field/#accessibility) for group\n  hint, error, caution, and required.\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Manually set `aria-checked` or `htmlFor` on **`Checkbox`**, or pass an **`id`** when the spec does\n  not require a known id \u2014 Canvas Kit wires `aria-checked` and `htmlFor`, and assigns an `id` with\n  `useUniqueId` unless you pass one (see **If no design spec is provided**)\n- Ignore **Choose a composition** \u2014 do not wrap a standalone checkbox with no group name, hint,\n  error, caution, or required state in **`FormFieldGroup`**; do not put different questions in one\n  group; do not use **`FormFieldGroup`** for a parent/child indeterminate tree\n- Wrap **`Checkbox`** with **`FormField.Input`** \u2014 **`Checkbox`** already renders its own `<label>`.\n  When a group is required, use **`FormFieldGroup.Input as={Checkbox}`** (see **Group wiring**)\n- Omit **`label`** because **`FormFieldGroup.Label`** is present \u2014 the group label does not name the\n  individual control\n- Set `aria-checked="mixed"` without **`indeterminate`**\n- Use **`aria-disabled`** instead of **`disabled`** \u2014 **`Checkbox`** maps unavailability to the\n  native **`disabled`** prop\n- Use **`disabled`** when the spec says users must still focus the control to hear why it is\n  unavailable. Only in that case keep the checkbox enabled and put the explanation in\n  **`FormFieldGroup.Hint`** or on an adjacent focusable control\n- Use **Checkbox** for mutually exclusive choices \u2014 use\n  [**Radio**](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead'
     },
     card: {
       title: "Components/Containers/Card",
@@ -690,11 +745,36 @@ function getServer() {
       description: "Guidance for landmarks, headings, navigation, and logical focus order in Canvas Kit applications.",
       slug: "page-structure"
     },
-    "accessibility/TablesAdvanced.mdx": {
+    "accessibility/tables/Overview.mdx": {
       title: "Canvas Kit Table Accessibility",
-      description: "Guidance for semantic data tables, interactive tables, sorting, filtering, row selection, and table focus behavior.",
+      description: "Index of Canvas Kit accessible table patterns, including when to use semantic tables and links to expandable rows, nested rows, selectable rows, filterable and sortable column headers, and tables with form fields.",
       slug: "tables"
     },
+    "accessibility/tables/ExpandableRows.mdx": {
+      title: "Canvas Kit Expandable Rows Table Pattern",
+      description: "Guidance for accordion-style expandable table rows: aria-expanded on the chevron, tooltip naming, and colspan detail rows. This is a research example, not a Canvas Kit primitive.",
+      slug: "expandable-rows"
+    },
+    "accessibility/tables/NestedRows.mdx": {
+      title: "Canvas Kit Nested Rows Table Pattern",
+      description: "Guidance for hierarchical records as additional table rows in one table: tree-column chevrons, aria-expanded, aria-describedby, and aria-level. Distinct from expandable (colspan) rows. This is a research example, not a Canvas Kit primitive.",
+      slug: "nested-rows"
+    },
+    "accessibility/tables/SelectableRows.mdx": {
+      title: "Canvas Kit Selectable Rows Table Pattern",
+      description: "Guidance for row-selection checkboxes in tables: avoiding Select All as a column header, tooltip names, aria-describedby to row headers, and thead/tbody considerations.",
+      slug: "selectable-rows"
+    },
+    "accessibility/tables/FilterableColumnHeaders.mdx": {
+      title: "Canvas Kit Filterable Column Headers Table Pattern",
+      description: "Guidance for filter popups in table column headers: focus redirect, initial focus, aria-owns for reading order, tooltip filtered state, and live-region result counts.",
+      slug: "filterable-column-headers"
+    },
+    "accessibility/tables/SortableColumnHeaders.mdx": {
+      title: "Canvas Kit Sortable Column Headers Table Pattern",
+      description: "Guidance for sortable table column headers: aria-sort on th, TertiaryButton in the header, and tooltip descriptions that apply only while focusing the sort control.",
+      slug: "sortable-column-headers"
+    },
     "accessibility/Popups.mdx": {
       title: "Canvas Kit Popup and Overlay Accessibility",
       description: "Guidance for dialogs, modals, popups, menus, tooltips, focus management, dismissal, and reading order.",
@@ -720,7 +800,7 @@ function getServer() {
       description: "Guidance for forced colors and Windows High Contrast themes, including focus, state, border, and icon visibility.",
       slug: "windows-high-contrast"
     },
-    "accessibility/TestingTableWithFormFields.mdx": {
+    "accessibility/tables/WithFormFields.mdx": {
       title: "Canvas Kit Form Accessibility",
       description: "Guidance from existing Canvas Kit accessibility documentation for form fields in table contexts.",
       slug: "forms"