@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/components-navigation-accordion.json

@@ -0,0 +1,643 @@
+{
+  "meta": {
+    "id": "Components-Accordion",
+    "title": "Accordion",
+    "exportName": "Accordion",
+    "description": "A collapsable component lets users show and hide sections of related content on a page.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/accordion/accordion.mdx",
+    "menu": [
+      "Components",
+      "Navigation",
+      "Accordion"
+    ],
+    "route": "components/navigation/accordion",
+    "tags": [
+      "component",
+      "accordion",
+      "expandable",
+      "disclosure",
+      "panels"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Size",
+        "href": "#size",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Medium",
+        "href": "#medium",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Small",
+        "href": "#small",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Content",
+        "href": "#content",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      }
+    ],
+    "figmaLink": "https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=2702-5711&t=kxCRBAio5yKpfcU0-4",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nThe primary difference between accordion types lies in whether they use\nadditional controls for accessing information or offer a simple click-to-expand\ninteraction.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[React ARIA](https://react-spectrum.adobe.com/react-aria/useDisclosure.html)\n[ARIA Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=2702-5711&t=kxCRBAio5yKpfcU0-4)\n\n## Variables\n\nGet familiar with the features.\n\n### Size\n\n#### Medium\n\nThe default size for forms.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root>\n    <Accordion.Item>\n      <Accordion.Header>\n        Headline\n        <Accordion.HeaderRightContent>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\">\n            <Icons.Edit />\n          </IconButton>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\">\n            <Icons.PushPin />\n          </IconButton>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\">\n            <Icons.FileCopy />\n          </IconButton>\n          <IconButton colorPalette=\"critical\" variant=\"ghost\">\n            <Icons.Delete />\n          </IconButton>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>Content goes here</Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n#### Small\n\nUse for small condensed areas, or if there is a user preference for more\ncondensed forms.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root size=\"sm\">\n    <Accordion.Item>\n      <Accordion.Header>\n        Headline\n        <Accordion.HeaderRightContent >\n          <Stack direction=\"horizontal\" alignItems=\"center\">\n          <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n            <Icons.Edit />\n          </IconButton>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n            <Icons.PushPin />\n          </IconButton>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n            <Icons.FileCopy />\n          </IconButton>\n          <IconButton colorPalette=\"critical\" variant=\"ghost\" size=\"sm\">\n            <Icons.Delete />\n          </IconButton>\n          </Stack>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>Content goes here</Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n### Content\n\nThe main use for accordions is for forms and filters. Custom content can be\ncreated for the body of the accordion.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root size=\"sm\">\n    <Accordion.Item>\n      <Accordion.Header>\n        Details\n        <Accordion.HeaderRightContent>\n          <Stack direction=\"horizontal\" alignItems=\"center\">\n            <Button colorPalette=\"primary\" size=\"xs\" variant=\"outline\">\n              <Icons.Undo />\n              Revert\n            </Button>\n            <Button colorPalette=\"primary\" size=\"xs\" variant=\"solid\">\n              Save changes\n            </Button>\n          </Stack>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>\n        <Stack direction=\"vertical\" gap=\"200\">\n          <FormField.Root>\n            <FormField.Label>First name</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"john\" w=\"100%\"/>\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Last name</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"doe\" w=\"100%\"/>\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Birthday</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"10.05.1982\" w=\"100%\"/>\n            </FormField.Input>\n          </FormField.Root>\n        </Stack>\n      </Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nThe primary difference between accordion types lies in whether they use\nadditional controls for accessing information or offer a simple click-to-expand\ninteraction.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[React ARIA](https://react-spectrum.adobe.com/react-aria/useDisclosure.html)\n[ARIA Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=2702-5711&t=kxCRBAio5yKpfcU0-4)\n\n## Variables\n\nGet familiar with the features.\n\n### Size\n\n#### Medium\n\nThe default size for forms.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root>\n    <Accordion.Item>\n      <Accordion.Header>\n        Headline\n        <Accordion.HeaderRightContent>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\">\n            <Icons.Edit />\n          </IconButton>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\">\n            <Icons.PushPin />\n          </IconButton>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\">\n            <Icons.FileCopy />\n          </IconButton>\n          <IconButton colorPalette=\"critical\" variant=\"ghost\">\n            <Icons.Delete />\n          </IconButton>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>Content goes here</Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n#### Small\n\nUse for small condensed areas, or if there is a user preference for more\ncondensed forms.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root size=\"sm\">\n    <Accordion.Item>\n      <Accordion.Header>\n        Headline\n        <Accordion.HeaderRightContent >\n          <Stack direction=\"horizontal\" alignItems=\"center\">\n          <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n            <Icons.Edit />\n          </IconButton>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n            <Icons.PushPin />\n          </IconButton>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n            <Icons.FileCopy />\n          </IconButton>\n          <IconButton colorPalette=\"critical\" variant=\"ghost\" size=\"sm\">\n            <Icons.Delete />\n          </IconButton>\n          </Stack>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>Content goes here</Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n### Content\n\nThe main use for accordions is for forms and filters. Custom content can be\ncreated for the body of the accordion.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root size=\"sm\">\n    <Accordion.Item>\n      <Accordion.Header>\n        Details\n        <Accordion.HeaderRightContent>\n          <Stack direction=\"horizontal\" alignItems=\"center\">\n            <Button colorPalette=\"primary\" size=\"xs\" variant=\"outline\">\n              <Icons.Undo />\n              Revert\n            </Button>\n            <Button colorPalette=\"primary\" size=\"xs\" variant=\"solid\">\n              Save changes\n            </Button>\n          </Stack>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>\n        <Stack direction=\"vertical\" gap=\"200\">\n          <FormField.Root>\n            <FormField.Label>First name</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"john\" w=\"100%\"/>\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Last name</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"doe\" w=\"100%\"/>\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Birthday</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"10.05.1982\" w=\"100%\"/>\n            </FormField.Input>\n          </FormField.Root>\n        </Stack>\n      </Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size",
+          "href": "#size",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Medium",
+          "href": "#medium",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Small",
+          "href": "#small",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Content",
+          "href": "#content",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root>\n    <Accordion.Item>\n      <Accordion.Header>\n        Headline\n        <Accordion.HeaderRightContent>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\">\n            <Icons.Edit />\n          </IconButton>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\">\n            <Icons.PushPin />\n          </IconButton>\n          <IconButton colorPalette=\"primary\" variant=\"ghost\">\n            <Icons.FileCopy />\n          </IconButton>\n          <IconButton colorPalette=\"critical\" variant=\"ghost\">\n            <Icons.Delete />\n          </IconButton>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>Content goes here</Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n### Accessibility standards\n\n- **Use appropriate HTML elements:** Use `<button>` for headers controlling\n  panels. Employ separate elements for content panels. Establish clear\n  relationships between triggers and content programmatically.\n- **Headings:** Utilize heading elements (`<h3>`, `<h2>`, etc.) for accordion\n  headers. Provide semantic structure for navigation by assistive technologies.\n- **ARIA Roles:** Apply `role=\"region\"` to content panels for landmark\n  identification.\n- **aria-expanded:** Dynamically update on the `<button>` controlling the panel.\n  `aria-expanded=\"true\"` for visible panels. `aria-expanded=\"false\"` for hidden\n  panels.\n- **aria-controls:** Set on the `<button>` to reference the id of its controlled\n  content panel. Explicitly link the button to the content.\n- **aria-labelledby:** Apply to the content panel (with `role=\"region\"`).\n  Reference the id of the accordion's header button.\n- **Keyboard navigation:** Ensure full keyboard operability. Allow focus to\n  reach each accordion header (`<button>`) using Tab. Enable toggling panel\n  visibility using Space or Enter on focused headers. Consider arrow key\n  navigation between headers (enhancement).\n- **Focus visible:** Provide a clear visual focus indicator for focused\n  accordion headers (`<button>`). Assist keyboard users in identifying the\n  selected element.\n- **Content visibility for assistive technologies:** Ensure content of collapsed\n  panels is not focusable via keyboard and hidden from screen readers (e.g.,\n  `aria-hidden=\"true\"`, `display: none`).\n- **Color contrast:** Maintain sufficient color contrast for text within headers\n  and content panels. Ensure readability against background colors.\n- **Clear indicators:** Provide visual cues for expanded/collapsed states (e.g.,\n  arrows, +/-). Hide decorative indicators from screen readers\n  (`aria-hidden=\"true\"`).\n- **Avoid less accessible methods:** Avoid relying solely on `<details>` and\n  `<summary>` for complex accordions. ARIA attributes offer more reliable and\n  controllable accessibility.\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\nImport the Accordion compound component and its TypeScript types:\n\n```tsx\nimport { Accordion, type AccordionRootProps } from \"@commercetools/nimbus\";\n```\n\n### Basic usage\n\nThe Accordion is a compound component with multiple parts that work together. At\nminimum, you need `Accordion.Root`, `Accordion.Item`, `Accordion.Header`, and\n`Accordion.Content`:\n\n```jsx live-dev\nconst App = () => {\n  return (\n    <Accordion.Root>\n      <Accordion.Item value=\"item-1\">\n        <Accordion.Header>First Section</Accordion.Header>\n        <Accordion.Content>\n          <Text>\n            This is the content for the first section. Click the header to\n            expand or collapse this content area.\n          </Text>\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item value=\"item-2\">\n        <Accordion.Header>Second Section</Accordion.Header>\n        <Accordion.Content>\n          <Text>\n            This is the content for the second section. Only one section can\n            be open at a time by default.\n          </Text>\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item value=\"item-3\">\n        <Accordion.Header>Third Section</Accordion.Header>\n        <Accordion.Content>\n          <Text>\n            This is the content for the third section. Each item needs a\n            unique value for proper identification.\n          </Text>\n        </Accordion.Content>\n      </Accordion.Item>\n    </Accordion.Root>\n  );\n};\n```\n\n## Usage examples\n\n### Size variants\n\nThe Accordion component supports two size variants: `sm` (small) and `md`\n(medium, default). The size affects the font size, icon size, and padding:\n\n```jsx live-dev\nconst App = () => {\n  return (\n    <Stack direction=\"column\" gap=\"600\">\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Small Size</Text>\n        <Accordion.Root size=\"sm\">\n          <Accordion.Item value=\"sm-1\">\n            <Accordion.Header>Compact Header</Accordion.Header>\n            <Accordion.Content>\n              <Text>Smaller padding and font size for dense layouts.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"sm-2\">\n            <Accordion.Header>Another Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Perfect for sidebars or constrained spaces.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </Stack>\n\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Medium Size (Default)</Text>\n        <Accordion.Root size=\"md\">\n          <Accordion.Item value=\"md-1\">\n            <Accordion.Header>Standard Header</Accordion.Header>\n            <Accordion.Content>\n              <Text>Default size with comfortable spacing for most use cases.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"md-2\">\n            <Accordion.Header>Another Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Provides good balance between readability and space efficiency.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </Stack>\n    </Stack>\n  );\n};\n```\n\n### Multiple item expansion\n\nBy default, only one accordion item can be expanded at a time. Use the\n`allowsMultipleExpanded` prop to allow multiple items to be open simultaneously:\n\n```jsx live-dev\nconst App = () => {\n  return (\n    <Stack direction=\"column\" gap=\"600\">\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Single Expansion (Default)</Text>\n        <Accordion.Root>\n          <Accordion.Item value=\"single-1\">\n            <Accordion.Header>First Section</Accordion.Header>\n            <Accordion.Content>\n              <Text>Opening this closes other sections automatically.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"single-2\">\n            <Accordion.Header>Second Section</Accordion.Header>\n            <Accordion.Content>\n              <Text>Only one section can be open at a time.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"single-3\">\n            <Accordion.Header>Third Section</Accordion.Header>\n            <Accordion.Content>\n              <Text>This is the default behavior for accordions.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </Stack>\n\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Multiple Expansion</Text>\n        <Accordion.Root allowsMultipleExpanded>\n          <Accordion.Item value=\"multi-1\">\n            <Accordion.Header>First Section</Accordion.Header>\n            <Accordion.Content>\n              <Text>Multiple sections can be open at the same time.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"multi-2\">\n            <Accordion.Header>Second Section</Accordion.Header>\n            <Accordion.Content>\n              <Text>This is useful for comparison or reference scenarios.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"multi-3\">\n            <Accordion.Header>Third Section</Accordion.Header>\n            <Accordion.Content>\n              <Text>Users can expand as many sections as they need.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </Stack>\n    </Stack>\n  );\n};\n```\n\n### Disabled state\n\nDisable the entire accordion or individual items to prevent user interaction:\n\n```jsx live-dev\nconst App = () => {\n  return (\n    <Stack direction=\"column\" gap=\"600\">\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Fully Disabled Accordion</Text>\n        <Accordion.Root isDisabled>\n          <Accordion.Item value=\"disabled-1\">\n            <Accordion.Header>Disabled Header</Accordion.Header>\n            <Accordion.Content>\n              <Text>This content cannot be accessed.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"disabled-2\">\n            <Accordion.Header>Another Disabled Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>All items are disabled when the root is disabled.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </Stack>\n\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Partially Disabled Accordion</Text>\n        <Accordion.Root>\n          <Accordion.Item value=\"enabled-1\">\n            <Accordion.Header>Active Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>This item is enabled and can be interacted with.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"disabled-item\" isDisabled>\n            <Accordion.Header>Disabled Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>This content is disabled.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"enabled-2\">\n            <Accordion.Header>Another Active Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Individual items can be disabled while others remain active.</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </Stack>\n    </Stack>\n  );\n};\n```\n\n### Uncontrolled mode\n\nUse `defaultExpandedKeys` to set which items are initially expanded without\nmanaging state yourself:\n\n```jsx live-dev\nconst App = () => {\n  return (\n    <Accordion.Root\n      allowsMultipleExpanded\n      defaultExpandedKeys={[\"features\", \"accessibility\"]}\n    >\n      <Accordion.Item value=\"features\">\n        <Accordion.Header>Key Features</Accordion.Header>\n        <Accordion.Content>\n          <Text>\n            This section is expanded by default. The accordion manages its own state\n            internally, making it simple to use when you don't need external control.\n          </Text>\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item value=\"accessibility\">\n        <Accordion.Header>Accessibility</Accordion.Header>\n        <Accordion.Content>\n          <Text>\n            Also expanded by default. Users can expand/collapse items, and the component\n            tracks the state automatically.\n          </Text>\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item value=\"usage\">\n        <Accordion.Header>Usage Guidelines</Accordion.Header>\n        <Accordion.Content>\n          <Text>\n            This section starts collapsed. Uncontrolled mode is ideal for simple\n            accordions where you don't need to track the expanded state externally.\n          </Text>\n        </Accordion.Content>\n      </Accordion.Item>\n    </Accordion.Root>\n  );\n};\n```\n\n### Controlled mode\n\nFor full control over the expanded state, use the `expandedKeys` and\n`onExpandedChange` props. This is useful when you need to:\n\n- Synchronize accordion state with URL parameters\n- Track analytics when sections are expanded\n- Implement custom expand/collapse logic\n- Integrate with external state management\n\n```jsx live-dev\nconst App = () => {\n  const [expandedKeys, setExpandedKeys] = React.useState(new Set([\"section-1\"]));\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Text fontWeight=\"600\">\n        Expanded sections: {expandedKeys.size}\n      </Text>\n      <Text fontSize=\"350\" color=\"neutral.11\">\n        Current: {Array.from(expandedKeys).join(\", \") || \"none\"}\n      </Text>\n\n      <Accordion.Root\n        allowsMultipleExpanded\n        expandedKeys={expandedKeys}\n        onExpandedChange={setExpandedKeys}\n      >\n        <Accordion.Item value=\"section-1\">\n          <Accordion.Header>First Section</Accordion.Header>\n          <Accordion.Content>\n            <Text>\n              The parent component has full control over which sections are expanded.\n              You can track state changes, persist to localStorage, or sync with URLs.\n            </Text>\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item value=\"section-2\">\n          <Accordion.Header>Second Section</Accordion.Header>\n          <Accordion.Content>\n            <Text>\n              Controlled mode gives you complete flexibility to implement custom\n              behavior around the accordion's expanded state.\n            </Text>\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item value=\"section-3\">\n          <Accordion.Header>Third Section</Accordion.Header>\n          <Accordion.Content>\n            <Text>\n              Use this pattern when you need to integrate the accordion with\n              application-level state management or routing.\n            </Text>\n          </Accordion.Content>\n        </Accordion.Item>\n      </Accordion.Root>\n\n      <Button\n        size=\"md\"\n        variant=\"outline\"\n        onClick={() => setExpandedKeys(new Set([\"section-1\", \"section-2\", \"section-3\"]))}\n      >\n        Expand All\n      </Button>\n      <Button\n        size=\"md\"\n        variant=\"outline\"\n        onClick={() => setExpandedKeys(new Set())}\n      >\n        Collapse All\n      </Button>\n    </Stack>\n  );\n};\n```\n\n### Header with right-aligned content\n\nAdd buttons, badges, or other elements to the right side of accordion headers\nusing `Accordion.HeaderRightContent`:\n\n```jsx live-dev\nconst App = () => {\n  const [counts, setCounts] = React.useState({ item1: 0, item2: 0, item3: 0 });\n\n  const handleIncrement = (item: keyof typeof counts, event: React.MouseEvent) => {\n    event.stopPropagation(); // Prevent accordion from toggling\n    setCounts(prev => ({ ...prev, [item]: prev[item] + 1 }));\n  };\n\n  return (\n    <Accordion.Root>\n      <Accordion.Item value=\"item-1\">\n        <Accordion.Header>\n          Settings\n          <Accordion.HeaderRightContent>\n            <Button\n              size=\"xs\"\n              variant=\"ghost\"\n              onClick={(e) => handleIncrement('item1', e)}\n            >\n              Edit ({counts.item1})\n            </Button>\n          </Accordion.HeaderRightContent>\n        </Accordion.Header>\n        <Accordion.Content>\n          <Text>\n            Configure your account settings. The edit button in the header doesn't\n            trigger the accordion toggle, allowing independent actions.\n          </Text>\n        </Accordion.Content>\n      </Accordion.Item>\n\n      <Accordion.Item value=\"item-2\">\n        <Accordion.Header>\n          Notifications\n          <Accordion.HeaderRightContent>\n            <Badge colorPalette=\"warning\" size=\"xs\">\n              3 new\n            </Badge>\n            <Button\n              size=\"xs\"\n              variant=\"ghost\"\n              onClick={(e) => handleIncrement('item2', e)}\n              marginLeft=\"200\"\n            >\n              Clear ({counts.item2})\n            </Button>\n          </Accordion.HeaderRightContent>\n        </Accordion.Header>\n        <Accordion.Content>\n          <Text>\n            View your recent notifications. You can add multiple elements to the\n            right side of the header, like badges and action buttons.\n          </Text>\n        </Accordion.Content>\n      </Accordion.Item>\n\n      <Accordion.Item value=\"item-3\">\n        <Accordion.Header>\n          Privacy\n          <Accordion.HeaderRightContent>\n            <Icons.Lock fontSize=\"500\" color=\"neutral.11\" />\n          </Accordion.HeaderRightContent>\n        </Accordion.Header>\n        <Accordion.Content>\n          <Text>\n            Manage your privacy preferences. Icons can also be added to provide\n            visual context or status indicators.\n          </Text>\n        </Accordion.Content>\n      </Accordion.Item>\n    </Accordion.Root>\n  );\n};\n```\n\n## Component requirements\n\n## Accessibility\n\nThe Accordion component is built with React Aria and follows the WAI-ARIA\nAccordion pattern. It provides:\n\n**Role:**\n\n- Each accordion item has `role=\"group\"`\n- Headers are implemented as `button` elements\n\n**Labeling:**\n\n- Headers use `aria-expanded` to indicate their state (true/false)\n- Content panels are properly associated with their headers\n- Each item should have a unique `value` prop for proper identification\n\n**Keyboard navigation:**\n\n- `Space` or `Enter` - Toggle the focused accordion item\n- `Tab` - Move focus to the next focusable element\n- `Shift + Tab` - Move focus to the previous focusable element\n- Arrow keys - Navigate between accordion headers (when focus is on a header)\n\nIf your use case requires tracking and analytics for this component, it is good\npractice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"user-settings-accordion\";\n\nexport const SettingsAccordion = () => (\n  <Accordion.Root id={PERSISTENT_ID}>\n    <Accordion.Item value=\"profile\">\n      <Accordion.Header>Profile Settings</Accordion.Header>\n      <Accordion.Content>\n        <Text>Edit your profile information</Text>\n      </Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n## API reference\n\n<PropsTable id=\"Accordion\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Accordion\nwithin your application. As the component's internal functionality is already\ntested by Nimbus, these patterns help you verify your integration and\napplication-specific logic.\n\n### Test Setup\n\nConfigure your testing environment for Accordion components\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Accordion, NimbusProvider, Text } from \"@commercetools/nimbus\";\n\ndescribe(\"Accordion - Test Setup\", () => {\n  it(\"renders accordion with basic structure\", () => {\n    render(\n      <NimbusProvider>\n        <Accordion.Root>\n          <Accordion.Item value=\"test-item\">\n            <Accordion.Header>Test Header</Accordion.Header>\n            <Accordion.Content>\n              <Text>Test Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"button\", { name: \"Test Header\" })\n    ).toBeInTheDocument();\n    expect(screen.getByRole(\"group\", { hidden: true })).toBeInTheDocument();\n  });\n\n  it(\"renders multiple accordion items\", () => {\n    render(\n      <NimbusProvider>\n        <Accordion.Root>\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>First Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>First Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"item-2\">\n            <Accordion.Header>Second Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Second Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"button\", { name: \"First Item\" })\n    ).toBeInTheDocument();\n    expect(\n      screen.getByRole(\"button\", { name: \"Second Item\" })\n    ).toBeInTheDocument();\n  });\n});\n```\n\n### User Interactions\n\nTest user interactions with accordion items\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Accordion, NimbusProvider, Text } from \"@commercetools/nimbus\";\n\ndescribe(\"Accordion - User Interactions\", () => {\n  it(\"expands and collapses items when clicked\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <Accordion.Root>\n          <Accordion.Item value=\"test-item\">\n            <Accordion.Header>Clickable Header</Accordion.Header>\n            <Accordion.Content>\n              <Text>Hidden Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    const header = screen.getByRole(\"button\", { name: \"Clickable Header\" });\n    const content = screen.getByRole(\"group\", { hidden: true });\n\n    // Initially collapsed\n    expect(content).not.toBeVisible();\n    expect(header).toHaveAttribute(\"aria-expanded\", \"false\");\n\n    // Click to expand\n    await user.click(header);\n    expect(content).toBeVisible();\n    expect(header).toHaveAttribute(\"aria-expanded\", \"true\");\n\n    // Click to collapse\n    await user.click(header);\n    expect(content).not.toBeVisible();\n    expect(header).toHaveAttribute(\"aria-expanded\", \"false\");\n  });\n\n  it(\"handles keyboard navigation with Space and Enter\", async () => {\n    const user = userEvent.setup();\n    render(\n      <NimbusProvider>\n        <Accordion.Root>\n          <Accordion.Item value=\"keyboard-item\">\n            <Accordion.Header>Keyboard Test</Accordion.Header>\n            <Accordion.Content>\n              <Text>Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    const header = screen.getByRole(\"button\", { name: \"Keyboard Test\" });\n    const content = screen.getByRole(\"group\", { hidden: true });\n\n    // Focus the header using tab navigation\n    await user.tab();\n    await waitFor(() => {\n      expect(header).toHaveFocus();\n    });\n\n    // Expand with Enter key\n    await user.keyboard(\"{Enter}\");\n    await waitFor(() => {\n      expect(content).toBeVisible();\n    });\n\n    // Collapse with Space key\n    await user.keyboard(\" \");\n    await waitFor(() => {\n      expect(content).not.toBeVisible();\n    });\n  });\n});\n```\n\n### Multiple Item Expansion\n\nTest accordion behavior with multiple expanded items\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Accordion, NimbusProvider, Text } from \"@commercetools/nimbus\";\n\ndescribe(\"Accordion - Multiple Expansion\", () => {\n  it(\"allows only one item expanded by default\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <Accordion.Root>\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>First Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>First Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"item-2\">\n            <Accordion.Header>Second Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Second Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    const firstHeader = screen.getByRole(\"button\", { name: \"First Item\" });\n    const secondHeader = screen.getByRole(\"button\", { name: \"Second Item\" });\n    const panels = screen.getAllByRole(\"group\", { hidden: true });\n\n    // Expand first item\n    await user.click(firstHeader);\n    expect(panels[0]).toBeVisible();\n    expect(panels[1]).not.toBeVisible();\n\n    // Expand second item - first should close\n    await user.click(secondHeader);\n    expect(panels[0]).not.toBeVisible();\n    expect(panels[1]).toBeVisible();\n  });\n\n  it(\"allows multiple items expanded when allowsMultipleExpanded is true\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <Accordion.Root allowsMultipleExpanded>\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>First Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>First Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"item-2\">\n            <Accordion.Header>Second Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Second Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    const firstHeader = screen.getByRole(\"button\", { name: \"First Item\" });\n    const secondHeader = screen.getByRole(\"button\", { name: \"Second Item\" });\n    const panels = screen.getAllByRole(\"group\", { hidden: true });\n\n    // Expand first item\n    await user.click(firstHeader);\n    expect(panels[0]).toBeVisible();\n\n    // Expand second item - first should remain open\n    await user.click(secondHeader);\n    expect(panels[0]).toBeVisible();\n    expect(panels[1]).toBeVisible();\n  });\n});\n```\n\n### Controlled Mode\n\nTest controlled accordion state management\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Accordion, NimbusProvider, Text } from \"@commercetools/nimbus\";\n\ndescribe(\"Accordion - Controlled Mode\", () => {\n  it(\"respects controlled expandedKeys prop\", () => {\n    render(\n      <NimbusProvider>\n        <Accordion.Root expandedKeys={[\"item-1\"]}>\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>First Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>First Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"item-2\">\n            <Accordion.Header>Second Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Second Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    const panels = screen.getAllByRole(\"group\", { hidden: true });\n\n    // First item should be expanded, second collapsed\n    expect(panels[0]).toBeVisible();\n    expect(panels[1]).not.toBeVisible();\n  });\n\n  it(\"calls onExpandedChange when items are toggled\", async () => {\n    const user = userEvent.setup();\n    const handleExpandedChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <Accordion.Root\n          expandedKeys={[]}\n          onExpandedChange={handleExpandedChange}\n        >\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>Test Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Test Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    const header = screen.getByRole(\"button\", { name: \"Test Item\" });\n\n    await user.click(header);\n\n    // React Aria returns a Set for expandedKeys\n    expect(handleExpandedChange).toHaveBeenCalledWith(new Set([\"item-1\"]));\n  });\n\n  it(\"supports uncontrolled mode with defaultExpandedKeys\", () => {\n    render(\n      <NimbusProvider>\n        <Accordion.Root\n          allowsMultipleExpanded\n          defaultExpandedKeys={[\"item-1\", \"item-3\"]}\n        >\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>First Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>First Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"item-2\">\n            <Accordion.Header>Second Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Second Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"item-3\">\n            <Accordion.Header>Third Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Third Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    const panels = screen.getAllByRole(\"group\", { hidden: true });\n\n    // First and third items should be expanded by default\n    expect(panels[0]).toBeVisible();\n    expect(panels[1]).not.toBeVisible();\n    expect(panels[2]).toBeVisible();\n  });\n});\n```\n\n### Disabled State\n\nTest accordion disabled state behavior\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Accordion, NimbusProvider, Text } from \"@commercetools/nimbus\";\n\ndescribe(\"Accordion - Disabled State\", () => {\n  it(\"disables all items when root is disabled\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <Accordion.Root isDisabled>\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>Disabled Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    const header = screen.getByRole(\"button\", { name: \"Disabled Item\" });\n    const content = screen.getByRole(\"group\", { hidden: true });\n\n    expect(header).toBeDisabled();\n\n    // Clicking should not expand\n    await user.click(header);\n    expect(content).not.toBeVisible();\n  });\n\n  it(\"disables individual items\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <Accordion.Root>\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>Enabled Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Enabled Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n          <Accordion.Item value=\"item-2\" isDisabled>\n            <Accordion.Header>Disabled Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Disabled Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    const enabledHeader = screen.getByRole(\"button\", { name: \"Enabled Item\" });\n    const disabledHeader = screen.getByRole(\"button\", {\n      name: \"Disabled Item\",\n    });\n    const panels = screen.getAllByRole(\"group\", { hidden: true });\n\n    // Enabled item should work\n    await user.click(enabledHeader);\n    expect(panels[0]).toBeVisible();\n\n    // Disabled item should not work\n    expect(disabledHeader).toBeDisabled();\n    await user.click(disabledHeader);\n    expect(panels[1]).not.toBeVisible();\n  });\n});\n```\n\n### Header Right Content\n\nTest accordion header with right-aligned content\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Accordion, NimbusProvider, Text } from \"@commercetools/nimbus\";\n\ndescribe(\"Accordion - Header Right Content\", () => {\n  it(\"renders right-aligned content in header\", () => {\n    render(\n      <NimbusProvider>\n        <Accordion.Root>\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>\n              Item Title\n              <Accordion.HeaderRightContent>\n                <Text>Extra Info</Text>\n              </Accordion.HeaderRightContent>\n            </Accordion.Header>\n            <Accordion.Content>\n              <Text>Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Item Title\")).toBeInTheDocument();\n    expect(screen.getByText(\"Extra Info\")).toBeInTheDocument();\n  });\n\n  it(\"allows interactions with header right content without toggling accordion\", async () => {\n    const user = userEvent.setup();\n    const handleButtonClick = vi.fn((e: React.MouseEvent) => {\n      e.stopPropagation();\n    });\n\n    render(\n      <NimbusProvider>\n        <Accordion.Root>\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>\n              Item Title\n              <Accordion.HeaderRightContent>\n                <button onClick={handleButtonClick}>Action</button>\n              </Accordion.HeaderRightContent>\n            </Accordion.Header>\n            <Accordion.Content>\n              <Text>Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    const actionButton = screen.getByRole(\"button\", { name: \"Action\" });\n    const content = screen.getByRole(\"group\", { hidden: true });\n\n    // Click action button\n    await user.click(actionButton);\n\n    // Action should be called\n    expect(handleButtonClick).toHaveBeenCalled();\n\n    // Accordion should remain collapsed\n    expect(content).not.toBeVisible();\n  });\n});\n```\n\n### Size Variants\n\nTest accordion size variant rendering\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Accordion, NimbusProvider, Text } from \"@commercetools/nimbus\";\n\ndescribe(\"Accordion - Size Variants\", () => {\n  it(\"renders small size variant\", () => {\n    render(\n      <NimbusProvider>\n        <Accordion.Root size=\"sm\">\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>Small Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    // Verify the component renders with the size variant\n    expect(\n      screen.getByRole(\"button\", { name: \"Small Item\" })\n    ).toBeInTheDocument();\n    expect(screen.getByRole(\"group\", { hidden: true })).toBeInTheDocument();\n  });\n\n  it(\"renders medium size variant (default)\", () => {\n    render(\n      <NimbusProvider>\n        <Accordion.Root size=\"md\">\n          <Accordion.Item value=\"item-1\">\n            <Accordion.Header>Medium Item</Accordion.Header>\n            <Accordion.Content>\n              <Text>Content</Text>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </NimbusProvider>\n    );\n\n    // Verify the component renders with the size variant\n    expect(\n      screen.getByRole(\"button\", { name: \"Medium Item\" })\n    ).toBeInTheDocument();\n    expect(screen.getByRole(\"group\", { hidden: true })).toBeInTheDocument();\n  });\n});\n```\n\n\n## Resources\n\n- [Accordion Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-accordion--docs)\n- [React Aria DisclosureGroup Documentation](https://react-spectrum.adobe.com/react-aria/DisclosureGroup.html)\n- [WAI-ARIA Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size variants",
+          "href": "#size-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Multiple item expansion",
+          "href": "#multiple-item-expansion",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Disabled state",
+          "href": "#disabled-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Uncontrolled mode",
+          "href": "#uncontrolled-mode",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled mode",
+          "href": "#controlled-mode",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Header with right-aligned content",
+          "href": "#header-with-right-aligned-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Test Setup",
+          "href": "#test-setup",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "User Interactions",
+          "href": "#user-interactions",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Multiple Item Expansion",
+          "href": "#multiple-item-expansion-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled Mode",
+          "href": "#controlled-mode-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Disabled State",
+          "href": "#disabled-state-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Header Right Content",
+          "href": "#header-right-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size Variants",
+          "href": "#size-variants-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nAccordion guidelines offer a set of standardized rules and recommendations that\nensure consistency, usability, and accessibility across all design elements and\ninteractions.\n\n### Best practices\n\n- **Label clarity:** Headers must be clear and descriptive so users understand\n  what information is contained within each section.\n- **Visual cues:** Use clear visual cues to indicate that a section can be\n  expanded and its current state. If other icons and controls are present,\n  ensure that their use is clear and explained.\n- **Accessibility:** Ensure accordions are accessible to users with\n  disabilities, including keyboard navigation and screen reader compatibility.\n- **Avoid nesting too deeply:** Overly nested accordions can become confusing\n  and difficult to navigate.\n\n### Common accordion controls\n\nThese are some common patterns for accordions controls. These are included in\nthe figma library components to make designing common shared uses easier.\n\n#### Revert and save\n\nThis action allows users to discard any unsaved changes they've made to the\ncontrols since the last successful save or the default settings were loaded.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\" alignItems=\"center\">\n    <Button colorPalette=\"primary\" size=\"xs\" variant=\"outline\">\n      <Icons.Undo />\n      Revert\n    </Button>\n    <Button colorPalette=\"primary\" size=\"xs\" variant=\"solid\">\n      Save changes\n    </Button>\n  </Stack>\n);\n```\n\n#### Cancel and save\n\nSimilar to revert and save, there is a difference in persistence and scope.\n\"Revert\" often implies going back to a saved state, affecting changes made over\na longer period, while \"Cancel\" typically discards unsaved changes from the\ncurrent interaction.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\" alignItems=\"center\">\n    <Button colorPalette=\"primary\" size=\"xs\" variant=\"outline\">\n      Cancel\n    </Button>\n    <Button colorPalette=\"primary\" size=\"xs\" variant=\"solid\">\n      Save\n    </Button>\n  </Stack>\n);\n```\n\n#### Four icon buttons\n\nUse up to four icons to allow your user to control the information within the\nassociated accordion.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\" alignItems=\"center\">\n    <IconButton colorPalette=\"primary\" variant=\"ghost\">\n      <Icons.Edit />\n    </IconButton>\n    <IconButton colorPalette=\"primary\" variant=\"ghost\">\n      <Icons.PushPin />\n    </IconButton>\n    <IconButton colorPalette=\"primary\" variant=\"ghost\">\n      <Icons.FileCopy />\n    </IconButton>\n    <IconButton colorPalette=\"critical\" variant=\"ghost\">\n      <Icons.Delete />\n    </IconButton>\n  </Stack>\n);\n```\n\n#### Delete\n\nSingle icon button, this is a common used control, used to delete the entire\naccordion and content.\n\n```jsx live\nconst App = () => (\n  <IconButton colorPalette=\"critical\" variant=\"ghost\">\n    <Icons.Delete />\n  </IconButton>\n);\n```\n\n#### Switch\n\nThe use of switch often signals the effect of the settings being applied, or\nactivating the content within to be edited by the user.\n\n```jsx live\nconst App = () => <Switch size=\"md\">Inactive</Switch>;\n```\n\n#### Select input\n\nAllowing the users to select from a list. This control often controls the type\nof form that will be shown for user completion.\n\n```jsx live\nconst App = () => (\n  <Select.Root\n    aria-label=\"Select an option\"\n    data-testid=\"select\"\n    selectedKey=\"1\"\n  >\n    <Select.Options>\n      <Select.Option id=\"1\">Input value</Select.Option>\n    </Select.Options>\n  </Select.Root>\n);\n```\n\n#### Custom controls\n\nIf these more typical controls do not suit the needs of your feature, create\ncontrols that best suit your needs.\n\n### Usage\n\nAccordions are a versatile component that can effectively manage and present\ninformation in a concise and organized way, improving usability and saving\nscreen space.\n\n> [!TIP]\\\n> When to use\n\n- **Lengthy content:** Use an accordion when you have a significant amount of\n  content to display.\n- **Logically grouped content:** Use an accordion when the content can be\n  logically grouped under headings.\n- **Limited vertical space:** Use an accordion when vertical space is limited.\n- **Non-essential information:** Use an accordion when users don't need to see\n  all the information at once.\n- **Simplifying complex forms/settings:** Use an accordion when you want to\n  simplify complex forms or settings.\n\n> [!CAUTION]\\\n> When not to use\n\n- **Brief content:** Do not use an accordion when content is brief and easily\n  fits on the screen. Hiding small amounts of information behind clicks is\n  unnecessary.\n- **Deeply nested content:** Do not use an accordion if the content is deeply\n  nested. Multiple layers of accordions can become confusing and difficult to\n  navigate.\n- **Outgrowing component:** Do not use an accordion when controls and content\n  are outgrowing the component. If the content becomes too complex, consider an\n  alternative UI component.\n\n### Accordion nesting\n\nAvoid nesting accordions because they hide information and make it hard for\nusers to predict the content of deeper nested components. Instead, create\nsimple, well-organized pages that use accordions to hold information in\nmeaningful ways for the user.\n\n> [!TIP]\\\n> **Do**\n>\n> - Do organize the right information within accordions, if all closed, users\n>   should be able to navigate information easily.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root size=\"sm\">\n    <Accordion.Item>\n      <Accordion.Header>General information</Accordion.Header>\n      <Accordion.Content>\n        <Stack gap=\"400\">\n          <FormField.Root>\n            <FormField.Label>Product name</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"Cozy coffee mug\" w=\"100%\" />\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Product description</FormField.Label>\n            <FormField.Input>\n              <TextInput\n                size=\"sm\"\n                value=\"A 15oz hand-thrown mug made by artisans.\"\n                w=\"100%\"\n              />\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Product key</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"Cozy-coffee-mug\" w=\"100%\" />\n            </FormField.Input>\n          </FormField.Root>\n        </Stack>\n      </Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Do not nest accordions excessively.\n> - Do not use accordion controls when nested to reduce complexity.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root size=\"sm\">\n    <Accordion.Item>\n      <Accordion.Header>\n        Product Details\n        <Accordion.HeaderRightContent>\n          <Stack direction=\"horizontal\" alignItems=\"center\">\n            <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n              <Icons.Edit />\n            </IconButton>\n            <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n              <Icons.PushPin />\n            </IconButton>\n            <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n              <Icons.FileCopy />\n            </IconButton>\n            <IconButton colorPalette=\"critical\" variant=\"ghost\" size=\"sm\">\n              <Icons.Delete />\n            </IconButton>\n          </Stack>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>\n        <Accordion.Root size=\"sm\">\n          <Accordion.Item>\n            <Accordion.Header>\n              Variants\n              <Accordion.HeaderRightContent>\n                <Switch size=\"sm\">Inactive</Switch>\n              </Accordion.HeaderRightContent>\n            </Accordion.Header>\n            <Accordion.Content>\n              <Accordion.Root size=\"sm\">\n                <Accordion.Item>\n                  <Accordion.Header>\n                    Attributes\n                    <Accordion.HeaderRightContent>\n                      <IconButton\n                        colorPalette=\"critical\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                      >\n                        <Icons.Delete />\n                      </IconButton>\n                    </Accordion.HeaderRightContent>\n                  </Accordion.Header>\n                  <Accordion.Content>\n                    An accordion in an accordion... Inception.\n                  </Accordion.Content>\n                </Accordion.Item>\n              </Accordion.Root>\n            </Accordion.Content>\n          </Accordion.Item>\n        </Accordion.Root>\n      </Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n### Accordion controls\n\nMake it easy for users to understand what the attached controls do, and how to\ninteract with them when needed.\n\n> [!TIP]\\\n> **Do**\n>\n> - Use tools that the user expects to use in the area to complete their tasks.\n>   There should be no confusion on what the tools are for and what their\n>   effects should be.\n> - Include tooltips to describe icon buttons when used.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root size=\"sm\">\n    <Accordion.Item>\n      <Accordion.Header>\n        General information\n        <Accordion.HeaderRightContent>\n          <Stack direction=\"horizontal\" alignItems=\"center\">\n            <Tooltip.Root>\n              <Button colorPalette=\"primary\" size=\"xs\" variant=\"outline\">\n                Cancel\n              </Button>\n              <Tooltip.Content>Cancel information changes</Tooltip.Content>\n            </Tooltip.Root>\n            <Tooltip.Root>\n              <Button colorPalette=\"primary\" size=\"xs\" variant=\"solid\">\n                Save\n              </Button>\n              <Tooltip.Content>\n                Save general information changes\n              </Tooltip.Content>\n            </Tooltip.Root>\n          </Stack>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>\n        <Stack gap=\"400\">\n          <FormField.Root>\n            <FormField.Label>Product name</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"Cozy coffee mug\" w=\"100%\" />\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Product description</FormField.Label>\n            <FormField.Input>\n              <TextInput\n                size=\"sm\"\n                value=\"A 15oz hand-thrown mug made by artisans.\"\n                w=\"100%\"\n              />\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Product key</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"Cozy-coffee-mug\" w=\"100%\" />\n            </FormField.Input>\n          </FormField.Root>\n        </Stack>\n      </Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Do not add controls that have seemingly no reason to be there for the\n>   majority of the users. If certain controls require permissions, consider\n>   hiding them from certain users to simplify workspaces.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root size=\"sm\">\n    <Accordion.Item>\n      <Accordion.Header>\n        General information\n        <Accordion.HeaderRightContent>\n          <Stack direction=\"horizontal\" alignItems=\"center\">\n            <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n              <Icons.Edit />\n            </IconButton>\n            <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n              <Icons.PushPin />\n            </IconButton>\n            <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n              <Icons.FileCopy />\n            </IconButton>\n            <IconButton colorPalette=\"critical\" variant=\"ghost\" size=\"sm\">\n              <Icons.Delete />\n            </IconButton>\n          </Stack>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>\n        <Stack gap=\"400\">\n          <FormField.Root>\n            <FormField.Label>Product name</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"Cozy coffee mug\" w=\"100%\" />\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Product description</FormField.Label>\n            <FormField.Input>\n              <TextInput\n                size=\"sm\"\n                value=\"A 15oz hand-thrown mug made by artisans.\"\n                w=\"100%\"\n              />\n            </FormField.Input>\n          </FormField.Root>\n          <FormField.Root>\n            <FormField.Label>Product key</FormField.Label>\n            <FormField.Input>\n              <TextInput size=\"sm\" value=\"Cozy-coffee-mug\" w=\"100%\" />\n            </FormField.Input>\n          </FormField.Root>\n        </Stack>\n      </Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n### Content\n\nWhether content is custom or using typical forms, think of basic hierarchy to\nkeep content usable and easy to understand.\n\n> [!TIP]\\\n> **Do**\n>\n> - Use left alignment and consistent styling for any content within accordions.\n> - Combine like topics and content together well to help the user understand\n>   what is expected within each accordion.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root size=\"sm\" w=\"3/4\">\n    <Accordion.Item>\n      <Accordion.Header>Review the B2C sample data feature</Accordion.Header>\n      <Accordion.Content>\n        <Stack gap=\"400\">\n          <Image\n            src=\"/images/accordion/sample-data.png\"\n            alt=\"B2C sample data\"\n            width=\"100%\"\n          />\n          <Text fontWeight=\"700\">Sample data imported</Text>\n          <Text>\n            Great to have you here! We’ve imported sample data, including\n            currency, tax information, shipping methods, products, and\n            customers.\n          </Text>\n          <Button colorPalette=\"primary\" size=\"sm\" variant=\"solid\" w=\"1/2\">\n            <Icons.RemoveRedEye />\n            Let's get started\n          </Button>\n        </Stack>\n      </Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Do not use anything other than left alignment of text and forms when\n>   possible.\n> - Do not overstuff accordions with unrelated information or odds and ends.\n>   Accordions are not junk drawers.\n> - Do not use controls that are undefined and confusing to use.\n\n```jsx live\nconst App = () => (\n  <Accordion.Root size=\"sm\" w=\"3/4\">\n    <Accordion.Item>\n      <Accordion.Header>\n        Internal managed inventory\n        <Accordion.HeaderRightContent>\n          <Stack direction=\"vertical\" alignItems=\"center\">\n            <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n              <Icons.ReceiptLong />\n            </IconButton>\n            <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n              <Icons.Bedtime />\n            </IconButton>\n            <IconButton colorPalette=\"primary\" variant=\"ghost\" size=\"sm\">\n              <Icons.Sell />\n            </IconButton>\n            <IconButton colorPalette=\"critical\" variant=\"ghost\" size=\"sm\">\n              <Icons.Delete />\n            </IconButton>\n          </Stack>\n        </Accordion.HeaderRightContent>\n      </Accordion.Header>\n      <Accordion.Content>\n        <Stack gap=\"400\">\n          <Badge colorPalette=\"positive\" w=\"1/2\">\n            <Icons.Check /> Updated and published\n          </Badge>\n          <Tabs.Root size=\"md\">\n            <Tabs.List>\n              <Tabs.Tab id=\"packaging\">Packaging</Tabs.Tab>\n              <Tabs.Tab id=\"moodboards\">Moodboards</Tabs.Tab>\n            </Tabs.List>\n            <Tabs.Panels pt=\"400\">\n              <Tabs.Panel id=\"packaging\">\n                <Stack gap=\"400\" alignItems=\"center\">\n                  <FormField.Root>\n                    <FormField.Label>How did it get here?</FormField.Label>\n                    <FormField.Input>\n                      <RadioInput.Root\n                        orientation=\"vertical\"\n                        name=\"default-example\"\n                      >\n                        <RadioInput.Option value=\"option1\">\n                          Fedex Ground\n                        </RadioInput.Option>\n                        <RadioInput.Option value=\"option2\">\n                          Lime green\n                        </RadioInput.Option>\n                        <RadioInput.Option value=\"option3\">\n                          USPS Premium\n                        </RadioInput.Option>\n                        <RadioInput.Option value=\"option4\">\n                          Yellow\n                        </RadioInput.Option>\n                        <RadioInput.Option value=\"option5\">\n                          UPS Ground\n                        </RadioInput.Option>\n                        <RadioInput.Option value=\"option6\">\n                          Fedex Domestic\n                        </RadioInput.Option>\n                        <RadioInput.Option value=\"option7\">\n                          Carrier pigeon\n                        </RadioInput.Option>\n                        <RadioInput.Option value=\"option8\">\n                          Pick up from business\n                        </RadioInput.Option>\n                      </RadioInput.Root>\n                    </FormField.Input>\n                  </FormField.Root>\n                  <FormField.Root>\n                    <FormField.Label>Packaging</FormField.Label>\n                    <FormField.Input>\n                      <TextInput\n                        size=\"sm\"\n                        value=\"Blurple with yellow stars\"\n                        w=\"100%\"\n                      />\n                    </FormField.Input>\n                    <FormField.Description>\n                      What is the color of the tissue paper used?\n                    </FormField.Description>\n                  </FormField.Root>\n                </Stack>\n              </Tabs.Panel>\n              <Tabs.Panel id=\"moodboards\">\n                <Stack gap=\"300\" alignItems=\"start\">\n                  <Stack direction=\"horizontal\" gap=\"200\" wrap=\"wrap\">\n                    <Button size=\"xs\" colorPalette=\"neutral\" variant=\"outline\">\n                      Ocean vibes\n                    </Button>\n                    <Button size=\"xs\" colorPalette=\"primary\" variant=\"solid\">\n                      Upload\n                    </Button>\n                    <Button size=\"xs\" colorPalette=\"neutral\" variant=\"ghost\">\n                      #FF5733\n                    </Button>\n                    <TextInput size=\"sm\" placeholder=\"Search inspiration...\" />\n                    <IconButton size=\"xs\" variant=\"ghost\">\n                      <Icons.Star />\n                    </IconButton>\n                  </Stack>\n                  <Text fontSize=\"xs\" color=\"neutral.600\">\n                    Last updated: Never\n                  </Text>\n                  <Stack direction=\"horizontal\" gap=\"200\" wrap=\"wrap\">\n                    <Badge colorPalette=\"primary\">Vintage</Badge>\n                    <Badge colorPalette=\"neutral\">Modern</Badge>\n                    <Badge colorPalette=\"critical\">Urgent</Badge>\n                    <Badge colorPalette=\"positive\">Approved</Badge>\n                  </Stack>\n                  <FormField.Root>\n                    <FormField.Input>\n                      <RadioInput.Root orientation=\"horizontal\">\n                        <RadioInput.Option value=\"grid\">\n                          Grid view\n                        </RadioInput.Option>\n                        <RadioInput.Option value=\"list\">\n                          Slide deck\n                        </RadioInput.Option>\n                      </RadioInput.Root>\n                    </FormField.Input>\n                  </FormField.Root>\n                </Stack>\n              </Tabs.Panel>\n            </Tabs.Panels>\n          </Tabs.Root>\n        </Stack>\n      </Accordion.Content>\n    </Accordion.Item>\n  </Accordion.Root>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Common accordion controls",
+          "href": "#common-accordion-controls",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Revert and save",
+          "href": "#revert-and-save",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Cancel and save",
+          "href": "#cancel-and-save",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Four icon buttons",
+          "href": "#four-icon-buttons",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Delete",
+          "href": "#delete",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Switch",
+          "href": "#switch",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Select input",
+          "href": "#select-input",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            2,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Custom controls",
+          "href": "#custom-controls",
+          "depth": 4,
+          "numbering": [
+            1,
+            1,
+            2,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accordion nesting",
+          "href": "#accordion-nesting",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accordion controls",
+          "href": "#accordion-controls",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Content",
+          "href": "#content",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            6
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}