@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/components-buttons-split-button.json

@@ -0,0 +1,670 @@
+{
+  "meta": {
+    "id": "Components-SplitButton",
+    "title": "Split button",
+    "exportName": "SplitButton",
+    "description": "A split button merges a main action with a dropdown for related, less common actions.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/split-button/split-button.mdx",
+    "menu": [
+      "Components",
+      "Buttons",
+      "Split button"
+    ],
+    "route": "components/buttons/split-button",
+    "tags": [
+      "component",
+      "buttons",
+      "actions",
+      "controls"
+    ],
+    "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": "Visuals",
+        "href": "#visuals",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Solid",
+        "href": "#solid",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Outlined",
+        "href": "#outlined",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Ghost",
+        "href": "#ghost",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Icons",
+        "href": "#icons",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Size",
+        "href": "#size",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      }
+    ],
+    "figmaLink": "https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?m=auto&node-id=5748-39095&t=N9rn8aDkNAPrLOn4-1",
+    "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\nA split button merges a main action that is immediate with a secondary dropdown\nmenu that holds related actions that are used less often. This component\nprovides quick access to essential functions while offering a complete list of\noptions, all while saving space.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=5602-17630&p=f&focus-id=6765-49694&m=dev)\n\n## Variables\n\nGet familiar with the features.\n\n### Visuals\n\n#### Solid\n\nMost common styling of the split button. Try to keep only one solid primary\ntoned button in an area for user clarity for the most important task. Too many\nin an area can cause confusion.\n\n```jsx live\nconst App = () => {\n  return (\n    <SplitButton\n      variant=\"solid\"\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"More publish options\"\n    >\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  );\n}\n```\n\n#### Outlined\n\nOutlined styled buttons are for secondary or less important actions.\n\n```jsx live\nconst App = () => {\n  return (\n    <SplitButton\n      variant=\"outline\"\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"More publish options\"\n    >\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  );\n}\n```\n\n#### Ghost\n\nGhost styled buttons are helpful for UI simplification. You will find these in\nsmaller sizes within places like toolbars.\n\n```jsx live\nconst App = () => {\n  return (\n    <SplitButton\n      variant=\"ghost\"\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"More publish options\"\n    >\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  );\n}\n```\n\n### Icons\n\nKeep consistency in mind for icons and consider other patterns that are nearby.\n\n```jsx live\nconst App = () => (\n    <SplitButton\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"More document actions\"\n      icon={<Icons.Share />}\n    >\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  )\n\n```\n\n### Size\n\nThere are three sizes to split buttons, the default size is medium (md), extra\nsmall (xs), and 2x-small (2xs).\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\" gap=\"400\" alignItems=\"center\">\n    <SplitButton tone=\"primary\" size=\"md\" onAction={(id) => {}} aria-label=\"publish options\">\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n    <SplitButton tone=\"primary\" size=\"xs\" onAction={(id) => {}} aria-label=\"publish options\">\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n    <SplitButton tone=\"primary\" size=\"2xs\" onAction={(id) => {}} aria-label=\"publish options\">\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  </Stack>\n)\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nA split button merges a main action that is immediate with a secondary dropdown\nmenu that holds related actions that are used less often. This component\nprovides quick access to essential functions while offering a complete list of\noptions, all while saving space.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=5602-17630&p=f&focus-id=6765-49694&m=dev)\n\n## Variables\n\nGet familiar with the features.\n\n### Visuals\n\n#### Solid\n\nMost common styling of the split button. Try to keep only one solid primary\ntoned button in an area for user clarity for the most important task. Too many\nin an area can cause confusion.\n\n```jsx live\nconst App = () => {\n  return (\n    <SplitButton\n      variant=\"solid\"\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"More publish options\"\n    >\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  );\n}\n```\n\n#### Outlined\n\nOutlined styled buttons are for secondary or less important actions.\n\n```jsx live\nconst App = () => {\n  return (\n    <SplitButton\n      variant=\"outline\"\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"More publish options\"\n    >\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  );\n}\n```\n\n#### Ghost\n\nGhost styled buttons are helpful for UI simplification. You will find these in\nsmaller sizes within places like toolbars.\n\n```jsx live\nconst App = () => {\n  return (\n    <SplitButton\n      variant=\"ghost\"\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"More publish options\"\n    >\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  );\n}\n```\n\n### Icons\n\nKeep consistency in mind for icons and consider other patterns that are nearby.\n\n```jsx live\nconst App = () => (\n    <SplitButton\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"More document actions\"\n      icon={<Icons.Share />}\n    >\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  )\n\n```\n\n### Size\n\nThere are three sizes to split buttons, the default size is medium (md), extra\nsmall (xs), and 2x-small (2xs).\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\" gap=\"400\" alignItems=\"center\">\n    <SplitButton tone=\"primary\" size=\"md\" onAction={(id) => {}} aria-label=\"publish options\">\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n    <SplitButton tone=\"primary\" size=\"xs\" onAction={(id) => {}} aria-label=\"publish options\">\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n    <SplitButton tone=\"primary\" size=\"2xs\" onAction={(id) => {}} aria-label=\"publish options\">\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  </Stack>\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": "Visuals",
+          "href": "#visuals",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Solid",
+          "href": "#solid",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Outlined",
+          "href": "#outlined",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Ghost",
+          "href": "#ghost",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Icons",
+          "href": "#icons",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size",
+          "href": "#size",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "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  return (\n    <SplitButton\n      variant=\"solid\"\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"More publish options\"\n    >\n      <Menu.Item id=\"publish\">Publish</Menu.Item>\n      <Menu.Item id=\"publish-next\">Publish and open next</Menu.Item>\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n    </SplitButton>\n  );\n}\n```\n\n### Accessibility standards\n\n- **Keyboard navigation:** The component must be fully keyboard accessible. The\n  Tab key should focus on the primary button first.\n- **Dual focus:** The primary action and the dropdown trigger must be treated as\n  two distinct focusable elements or as a single component where the arrow key\n  can be used to open the menu once the button is focused.\n- **ARIA roles:** The primary button uses role=\"button\". The dropdown trigger\n  should use role=\"button\" combined with aria-haspopup=\"true\" to indicate that\n  it controls a pop-up menu.\n- **Labeling:** Provide clear, unique aria-label text for both the primary\n  action and the dropdown trigger to ensure screen readers convey the intended\n  function of each segment.\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\n```tsx\nimport { SplitButton, Menu, type SplitButtonProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe simplest implementation combines a primary action button with a dropdown menu:\n\n```jsx live-dev\nconst App = () => (\n  <SplitButton\n    onAction={(id) => alert(`Action: ${id}`)}\n    aria-label=\"More actions\"\n  >\n    <Menu.Item id=\"save\">Save</Menu.Item>\n    <Menu.Item id=\"save-publish\">Save and Publish</Menu.Item>\n    <Menu.Item id=\"save-next\">Save and Continue</Menu.Item>\n  </SplitButton>\n)\n```\n\nThe component automatically selects the first enabled `Menu.Item` as the primary action. Clicking the primary button executes that action, while the dropdown trigger opens a menu with all available options.\n\n## Usage examples\n\n### With icon\n\nAdd an icon to the primary button for visual emphasis:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\">\n    <SplitButton\n      onAction={(id) => alert(`Action: ${id}`)}\n      aria-label=\"Save options\"\n      icon={<Icons.Save />}\n    >\n      <Menu.Item id=\"save\">Save</Menu.Item>\n      <Menu.Item id=\"save-copy\">Save as Copy</Menu.Item>\n      <Menu.Item id=\"save-template\">Save as Template</Menu.Item>\n    </SplitButton>\n\n    <SplitButton\n      onAction={(id) => alert(`Action: ${id}`)}\n      aria-label=\"Share options\"\n      icon={<Icons.Share />}\n    >\n      <Menu.Item id=\"share\">Share Document</Menu.Item>\n      <Menu.Item id=\"copy-link\">Copy Link</Menu.Item>\n      <Menu.Item id=\"email\">Send via Email</Menu.Item>\n    </SplitButton>\n  </Stack>\n)\n```\n\n### Size options\n\nThe component supports three size variants to match your interface density:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n    <SplitButton\n      size=\"2xs\"\n      onAction={(id) => alert(`Action: ${id}`)}\n      aria-label=\"Extra small actions\"\n      icon={<Icons.Save />}\n    >\n      <Menu.Item id=\"save\">Save</Menu.Item>\n      <Menu.Item id=\"export\">Export</Menu.Item>\n    </SplitButton>\n\n    <SplitButton\n      size=\"xs\"\n      onAction={(id) => alert(`Action: ${id}`)}\n      aria-label=\"Small actions\"\n      icon={<Icons.Save />}\n    >\n      <Menu.Item id=\"save\">Save</Menu.Item>\n      <Menu.Item id=\"export\">Export</Menu.Item>\n    </SplitButton>\n\n    <SplitButton\n      size=\"md\"\n      onAction={(id) => alert(`Action: ${id}`)}\n      aria-label=\"Medium actions\"\n      icon={<Icons.Save />}\n    >\n      <Menu.Item id=\"save\">Save</Menu.Item>\n      <Menu.Item id=\"export\">Export</Menu.Item>\n    </SplitButton>\n  </Stack>\n)\n```\n\n### Visual variants\n\nChoose between visual variants to match your design context:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Stack direction=\"row\" gap=\"300\" wrap=\"wrap\">\n      <SplitButton\n        variant=\"solid\"\n        colorPalette=\"primary\"\n        onAction={(id) => alert(`Action: ${id}`)}\n        aria-label=\"Solid variant actions\"\n        icon={<Icons.Save />}\n      >\n        <Menu.Item id=\"save\">Save</Menu.Item>\n        <Menu.Item id=\"export\">Export</Menu.Item>\n      </SplitButton>\n\n      <SplitButton\n        variant=\"subtle\"\n        colorPalette=\"neutral\"\n        onAction={(id) => alert(`Action: ${id}`)}\n        aria-label=\"Subtle variant actions\"\n        icon={<Icons.Save />}\n      >\n        <Menu.Item id=\"save\">Save</Menu.Item>\n        <Menu.Item id=\"export\">Export</Menu.Item>\n      </SplitButton>\n\n      <SplitButton\n        variant=\"outline\"\n        colorPalette=\"primary\"\n        onAction={(id) => alert(`Action: ${id}`)}\n        aria-label=\"Outline variant actions\"\n        icon={<Icons.Save />}\n      >\n        <Menu.Item id=\"save\">Save</Menu.Item>\n        <Menu.Item id=\"export\">Export</Menu.Item>\n      </SplitButton>\n\n      <SplitButton\n        variant=\"ghost\"\n        colorPalette=\"primary\"\n        onAction={(id) => alert(`Action: ${id}`)}\n        aria-label=\"Ghost variant actions\"\n        icon={<Icons.Save />}\n      >\n        <Menu.Item id=\"save\">Save</Menu.Item>\n        <Menu.Item id=\"export\">Export</Menu.Item>\n      </SplitButton>\n    </Stack>\n  </Stack>\n)\n```\n\n### Color palettes\n\nUse different color palettes to indicate action importance:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n    <SplitButton\n      variant=\"solid\"\n      colorPalette=\"primary\"\n      onAction={(id) => alert(`Action: ${id}`)}\n      aria-label=\"Primary actions\"\n      icon={<Icons.Save />}\n    >\n      <Menu.Item id=\"save\">Save</Menu.Item>\n      <Menu.Item id=\"export\">Export</Menu.Item>\n    </SplitButton>\n\n    <SplitButton\n      variant=\"outline\"\n      colorPalette=\"critical\"\n      onAction={(id) => alert(`Action: ${id}`)}\n      aria-label=\"Critical actions\"\n      icon={<Icons.Delete />}\n    >\n      <Menu.Item id=\"delete\">Delete</Menu.Item>\n      <Menu.Item id=\"archive\">Archive</Menu.Item>\n    </SplitButton>\n\n    <SplitButton\n      variant=\"subtle\"\n      colorPalette=\"neutral\"\n      onAction={(id) => alert(`Action: ${id}`)}\n      aria-label=\"Neutral actions\"\n      icon={<Icons.MoreVert />}\n    >\n      <Menu.Item id=\"view\">View Details</Menu.Item>\n      <Menu.Item id=\"edit\">Edit</Menu.Item>\n    </SplitButton>\n  </Stack>\n)\n```\n\n### With sections and separators\n\nOrganize menu items into logical groups:\n\n```jsx live-dev\nconst App = () => (\n  <SplitButton\n    onAction={(id) => alert(`Action: ${id}`)}\n    aria-label=\"Document actions\"\n    icon={<Icons.Save />}\n  >\n    <Menu.Section label=\"File Actions\">\n      <Menu.Item id=\"save\">Save Document</Menu.Item>\n      <Menu.Item id=\"save-as\">Save As Copy</Menu.Item>\n      <Menu.Item id=\"export\">Export PDF</Menu.Item>\n    </Menu.Section>\n\n    <Separator />\n\n    <Menu.Section label=\"Share\">\n      <Menu.Item id=\"share-link\">Share Link</Menu.Item>\n      <Menu.Item id=\"send-email\">Send via Email</Menu.Item>\n    </Menu.Section>\n\n    <Separator />\n\n    <Menu.Section label=\"Manage\">\n      <Menu.Item id=\"archive\">Archive</Menu.Item>\n      <Menu.Item id=\"delete\" isCritical>\n        Delete Document\n      </Menu.Item>\n    </Menu.Section>\n  </SplitButton>\n)\n```\n\n### Menu item states\n\nUse `isDisabled` and `isCritical` props on menu items:\n\n```jsx live-dev\nconst App = () => (\n  <SplitButton\n    onAction={(id) => alert(`Action: ${id}`)}\n    aria-label=\"Task actions\"\n    icon={<Icons.Task />}\n  >\n    <Menu.Item id=\"complete\">Complete Task</Menu.Item>\n    <Menu.Item id=\"edit\">Edit Task</Menu.Item>\n    <Menu.Item id=\"duplicate\">Duplicate Task</Menu.Item>\n    <Menu.Item id=\"share\" isDisabled>\n      Share Task (Pro only)\n    </Menu.Item>\n    <Menu.Item id=\"delete\" isCritical>\n      Delete Task\n    </Menu.Item>\n  </SplitButton>\n)\n```\n\n**Automatic primary selection behavior:**\n- When the first `Menu.Item` is disabled, the component automatically selects the next enabled item as the primary action\n- If all items are disabled, the primary button shows the first item but is disabled\n\n### Disabled state\n\nDisable the entire split button:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\">\n    <SplitButton\n      onAction={(id) => alert(`Action: ${id}`)}\n      aria-label=\"Enabled actions\"\n      icon={<Icons.Save />}\n    >\n      <Menu.Item id=\"save\">Save</Menu.Item>\n      <Menu.Item id=\"export\">Export</Menu.Item>\n    </SplitButton>\n\n    <SplitButton\n      isDisabled\n      onAction={(id) => alert(`Action: ${id}`)}\n      aria-label=\"Disabled actions\"\n      icon={<Icons.Save />}\n    >\n      <Menu.Item id=\"save\">Save</Menu.Item>\n      <Menu.Item id=\"export\">Export</Menu.Item>\n    </SplitButton>\n  </Stack>\n)\n```\n\n### Controlled menu state\n\nControl the menu's open/closed state programmatically:\n\n```jsx live-dev\nconst App = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Stack direction=\"row\" gap=\"300\">\n        <Button size=\"xs\" onPress={() => setIsOpen(true)}>\n          Open Menu\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" onPress={() => setIsOpen(false)}>\n          Close Menu\n        </Button>\n      </Stack>\n      <Text fontSize=\"sm\">\n        Menu is {isOpen ? 'open' : 'closed'}\n      </Text>\n      <SplitButton\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        onAction={(id) => {\n          alert(`Action: ${id}`);\n          setIsOpen(false);\n        }}\n        aria-label=\"Controlled menu actions\"\n        icon={<Icons.Save />}\n      >\n        <Menu.Item id=\"save\">Save</Menu.Item>\n        <Menu.Item id=\"save-publish\">Save and Publish</Menu.Item>\n        <Menu.Item id=\"save-next\">Save and Continue</Menu.Item>\n      </SplitButton>\n    </Stack>\n  );\n}\n```\n\n### Uncontrolled menu state\n\nUse `defaultOpen` for uncontrolled menu behavior:\n\n```jsx live-dev\nconst App = () => {\n  const [lastAction, setLastAction] = useState<string>('None');\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Text fontSize=\"sm\">\n        Last action: {lastAction}\n      </Text>\n      <SplitButton\n        defaultOpen={true}\n        onAction={(id) => setLastAction(id)}\n        aria-label=\"Uncontrolled menu actions\"\n        icon={<Icons.Save />}\n      >\n        <Menu.Item id=\"save\">Save</Menu.Item>\n        <Menu.Item id=\"save-publish\">Save and Publish</Menu.Item>\n        <Menu.Item id=\"save-next\">Save and Continue</Menu.Item>\n      </SplitButton>\n    </Stack>\n  );\n}\n```\n\n## Component requirements\n\n### Menu.Item requirements\n\nThe SplitButton requires `Menu.Item` children with the following structure:\n- Each `Menu.Item` **must** have an `id` prop (used for the `onAction` callback)\n- Items without an `id` prop are ignored during primary action selection\n- The component automatically selects the first enabled `Menu.Item` as the primary action\n- If all items are disabled, the primary button shows the first item but is disabled\n\n## Accessibility\n\nThe SplitButton handles most accessibility requirements internally. However, you must provide an `aria-label` for the dropdown trigger button:\n\n```tsx\n<SplitButton\n  aria-label=\"More save options\"\n  onAction={handleAction}\n>\n  <Menu.Item id=\"save\">Save</Menu.Item>\n  <Menu.Item id=\"export\">Export</Menu.Item>\n</SplitButton>\n```\n\nIf your use case requires tracking and analytics for this component, it is good practice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"document-actions-split-button\";\n\nexport const DocumentActions = () => (\n  <SplitButton\n    id={PERSISTENT_ID}\n    aria-label=\"Document actions\"\n    onAction={handleAction}\n  >\n    <Menu.Item id=\"save\">Save</Menu.Item>\n    <Menu.Item id=\"export\">Export</Menu.Item>\n  </SplitButton>\n);\n```\n\n#### Keyboard navigation\n\nThe component supports full keyboard interaction:\n- `Tab` / `Shift+Tab`: Move focus between the primary button and dropdown trigger\n- `Enter` / `Space` (on primary button): Execute the primary action\n- `Enter` / `Space` (on dropdown trigger): Open/close the menu\n- `Arrow Up` / `Arrow Down`: Navigate menu items when menu is open\n- `Enter` (on menu item): Execute the selected action and close menu\n- `Escape`: Close the menu\n\n## API reference\n\n<PropsTable id=\"SplitButton\" />\n\n## Common patterns\n\n### Document operations\n\nCommon pattern for document save operations with multiple options:\n\n```jsx live-dev\nconst App = () => {\n  const [status, setStatus] = useState<string>('No action taken');\n  const [isSaving, setIsSaving] = useState(false);\n\n  const handleAction = async (id: string) => {\n    setIsSaving(true);\n    setStatus(`Executing: ${id}...`);\n    \n    // Simulate async operation\n    await new Promise(resolve => setTimeout(resolve, 1000));\n    \n    setIsSaving(false);\n    setStatus(`Completed: ${id}`);\n  };\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <SplitButton\n        onAction={handleAction}\n        aria-label=\"Save options\"\n        icon={<Icons.Save />}\n        isDisabled={isSaving}\n      >\n        <Menu.Item id=\"save\">Save Draft</Menu.Item>\n        <Menu.Item id=\"save-publish\">Save and Publish</Menu.Item>\n        <Menu.Item id=\"save-schedule\">Save and Schedule</Menu.Item>\n        <Menu.Item id=\"save-template\">Save as Template</Menu.Item>\n      </SplitButton>\n      <Text fontSize=\"sm\" color=\"neutral.11\">\n        {status}\n      </Text>\n    </Stack>\n  );\n}\n```\n\n### Conditional actions based on state\n\nShow different actions based on application state:\n\n```jsx live-dev\nconst App = () => {\n  const [isPublished, setIsPublished] = useState(false);\n  const [lastAction, setLastAction] = useState<string>('');\n\n  const handleAction = (id: string) => {\n    if (id === 'publish') {\n      setIsPublished(true);\n      setLastAction('Document published');\n    } else if (id === 'unpublish') {\n      setIsPublished(false);\n      setLastAction('Document unpublished');\n    } else {\n      setLastAction(`Action: ${id}`);\n    }\n  };\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Text fontSize=\"sm\" fontWeight=\"semibold\">\n        Status: {isPublished ? 'Published' : 'Draft'}\n      </Text>\n      \n      {isPublished ? (\n        <SplitButton\n          onAction={handleAction}\n          aria-label=\"Published document actions\"\n          icon={<Icons.Visibility />}\n          colorPalette=\"primary\"\n        >\n          <Menu.Item id=\"unpublish\">Unpublish</Menu.Item>\n          <Menu.Item id=\"update\">Update Published Version</Menu.Item>\n          <Menu.Item id=\"analytics\">View Analytics</Menu.Item>\n          <Menu.Item id=\"share\">Share Link</Menu.Item>\n        </SplitButton>\n      ) : (\n        <SplitButton\n          onAction={handleAction}\n          aria-label=\"Draft document actions\"\n          icon={<Icons.Save />}\n        >\n          <Menu.Item id=\"publish\">Publish Document</Menu.Item>\n          <Menu.Item id=\"save-draft\">Save Draft</Menu.Item>\n          <Menu.Item id=\"preview\">Preview</Menu.Item>\n          <Menu.Item id=\"discard\">Discard Changes</Menu.Item>\n        </SplitButton>\n      )}\n      \n      {lastAction && (\n        <Text fontSize=\"sm\" color=\"neutral.11\">\n          {lastAction}\n        </Text>\n      )}\n    </Stack>\n  );\n}\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using SplitButton within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Rendering Tests\n\nVerify the SplitButton renders with expected structure and elements\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 { SplitButton, Menu, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"SplitButton - Basic rendering\", () => {\n  it(\"renders primary button and dropdown trigger\", () => {\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"More actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n          <Menu.Item id=\"export\">Export</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    // Primary button should show first action\n    const buttons = screen.getAllByRole(\"button\");\n    expect(buttons.length).toBeGreaterThanOrEqual(2);\n\n    // Dropdown trigger should have aria-label\n    const dropdownTrigger = screen.getByRole(\"button\", {\n      name: /More actions/i,\n    });\n    expect(dropdownTrigger).toBeInTheDocument();\n  });\n\n  it(\"displays first enabled menu item as primary action\", () => {\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save Document</Menu.Item>\n          <Menu.Item id=\"export\">Export</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    // Primary button should show \"Save Document\"\n    expect(screen.getByText(\"Save Document\")).toBeInTheDocument();\n  });\n\n  it(\"renders with icon in primary button\", () => {\n    const TestIcon = () => <svg data-testid=\"test-icon\" />;\n\n    render(\n      <NimbusProvider>\n        <SplitButton\n          onAction={vi.fn()}\n          aria-label=\"Actions\"\n          icon={<TestIcon />}\n        >\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByTestId(\"test-icon\")).toBeInTheDocument();\n  });\n\n  it(\"renders with different sizes\", () => {\n    const { rerender } = render(\n      <NimbusProvider>\n        <SplitButton size=\"2xs\" onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"button\", { name: /Actions/i })\n    ).toBeInTheDocument();\n\n    rerender(\n      <NimbusProvider>\n        <SplitButton size=\"md\" onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"button\", { name: /Actions/i })\n    ).toBeInTheDocument();\n  });\n});\n```\n\n### Interaction Tests\n\nTest user interactions with primary button and dropdown menu\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 { SplitButton, Menu, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"SplitButton - Interactions\", () => {\n  it(\"executes primary action when primary button is clicked\", async () => {\n    const user = userEvent.setup();\n    const handleAction = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={handleAction} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n          <Menu.Item id=\"export\">Export</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const primaryButton = screen.getByText(\"Save\");\n    await user.click(primaryButton);\n\n    expect(handleAction).toHaveBeenCalledWith(\"save\");\n  });\n\n  it(\"opens dropdown menu when trigger is clicked\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"More actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n          <Menu.Item id=\"export\">Export</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const dropdownTrigger = screen.getByRole(\"button\", {\n      name: /More actions/i,\n    });\n    await user.click(dropdownTrigger);\n\n    await waitFor(() => {\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n    });\n  });\n\n  it(\"executes selected menu item action\", async () => {\n    const user = userEvent.setup();\n    const handleAction = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={handleAction} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n          <Menu.Item id=\"export\">Export</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    // Open menu\n    const dropdownTrigger = screen.getByRole(\"button\", { name: /Actions/i });\n    await user.click(dropdownTrigger);\n\n    // Click menu item\n    await waitFor(() => {\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n    });\n\n    const exportItem = screen.getByRole(\"menuitem\", { name: /Export/i });\n    await user.click(exportItem);\n\n    expect(handleAction).toHaveBeenCalledWith(\"export\");\n  });\n\n  it(\"closes menu after selecting an item\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n          <Menu.Item id=\"export\">Export</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    // Open menu\n    const dropdownTrigger = screen.getByRole(\"button\", { name: /Actions/i });\n    await user.click(dropdownTrigger);\n\n    await waitFor(() => {\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n    });\n\n    // Select item\n    const saveItem = screen.getByRole(\"menuitem\", { name: /Save/i });\n    await user.click(saveItem);\n\n    // Menu should close\n    await waitFor(() => {\n      expect(screen.queryByRole(\"menu\")).not.toBeInTheDocument();\n    });\n  });\n});\n```\n\n### Primary Action Selection Tests\n\nTest automatic primary action selection logic\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 { SplitButton, Menu, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"SplitButton - Primary action selection\", () => {\n  it(\"selects first enabled item when first item is disabled\", () => {\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\" isDisabled>\n            Save\n          </Menu.Item>\n          <Menu.Item id=\"export\">Export</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    // Primary button should show \"Export\" (first enabled item)\n    expect(screen.getByText(\"Export\")).toBeInTheDocument();\n  });\n\n  it(\"shows first item even if all items are disabled\", () => {\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\" isDisabled>\n            Save\n          </Menu.Item>\n          <Menu.Item id=\"export\" isDisabled>\n            Export\n          </Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    // Primary button should show first item\n    expect(screen.getByText(\"Save\")).toBeInTheDocument();\n  });\n\n  it(\"handles Menu.Items nested in Menu.Section\", () => {\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Section label=\"File\">\n            <Menu.Item id=\"save\">Save</Menu.Item>\n            <Menu.Item id=\"export\">Export</Menu.Item>\n          </Menu.Section>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    // Should still find and display first item from section\n    expect(screen.getByText(\"Save\")).toBeInTheDocument();\n  });\n});\n```\n\n### Controlled Mode Tests\n\nTest controlled menu 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 { SplitButton, Menu, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"SplitButton - Controlled mode\", () => {\n  it(\"respects controlled isOpen prop\", async () => {\n    const { rerender } = render(\n      <NimbusProvider>\n        <SplitButton\n          isOpen={false}\n          onOpenChange={vi.fn()}\n          onAction={vi.fn()}\n          aria-label=\"Actions\"\n        >\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.queryByRole(\"menu\")).not.toBeInTheDocument();\n\n    rerender(\n      <NimbusProvider>\n        <SplitButton\n          isOpen={true}\n          onOpenChange={vi.fn()}\n          onAction={vi.fn()}\n          aria-label=\"Actions\"\n        >\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    await waitFor(() => {\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n    });\n  });\n\n  it(\"calls onOpenChange when menu state changes\", async () => {\n    const user = userEvent.setup();\n    const handleOpenChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <SplitButton\n          onOpenChange={handleOpenChange}\n          onAction={vi.fn()}\n          aria-label=\"Actions\"\n        >\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const dropdownTrigger = screen.getByRole(\"button\", { name: /Actions/i });\n    await user.click(dropdownTrigger);\n\n    expect(handleOpenChange).toHaveBeenCalledWith(true);\n  });\n});\n```\n\n### Uncontrolled Mode Tests\n\nTest uncontrolled menu state with defaultOpen\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 { SplitButton, Menu, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"SplitButton - Uncontrolled mode\", () => {\n  it(\"opens menu by default when defaultOpen is true\", async () => {\n    render(\n      <NimbusProvider>\n        <SplitButton defaultOpen={true} onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    await waitFor(() => {\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n    });\n  });\n\n  it(\"manages internal state when uncontrolled\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.queryByRole(\"menu\")).not.toBeInTheDocument();\n\n    const dropdownTrigger = screen.getByRole(\"button\", { name: /Actions/i });\n    await user.click(dropdownTrigger);\n\n    await waitFor(() => {\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n    });\n\n    // Click outside or press escape to close\n    await user.keyboard(\"{Escape}\");\n\n    await waitFor(() => {\n      expect(screen.queryByRole(\"menu\")).not.toBeInTheDocument();\n    });\n  });\n});\n```\n\n### State Tests\n\nTest different component states (disabled, menu item states)\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 { SplitButton, Menu, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"SplitButton - States\", () => {\n  it(\"disables both buttons when isDisabled is true\", () => {\n    render(\n      <NimbusProvider>\n        <SplitButton isDisabled onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const buttons = screen.getAllByRole(\"button\");\n    buttons.forEach((button) => {\n      expect(button).toBeDisabled();\n    });\n  });\n\n  it(\"disables primary button when primary action is disabled\", () => {\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\" isDisabled>\n            Save\n          </Menu.Item>\n          <Menu.Item id=\"export\" isDisabled>\n            Export\n          </Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const primaryButton = screen.getByText(\"Save\");\n    expect(primaryButton).toBeDisabled();\n  });\n\n  it(\"disables dropdown trigger when no actionable items exist\", () => {\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\" isDisabled>\n            Save\n          </Menu.Item>\n          <Menu.Item id=\"export\" isDisabled>\n            Export\n          </Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const dropdownTrigger = screen.getByRole(\"button\", { name: /Actions/i });\n    expect(dropdownTrigger).toBeDisabled();\n  });\n\n  it(\"renders critical menu items\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n          <Menu.Item id=\"delete\" isCritical>\n            Delete\n          </Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const dropdownTrigger = screen.getByRole(\"button\", { name: /Actions/i });\n    await user.click(dropdownTrigger);\n\n    await waitFor(() => {\n      expect(\n        screen.getByRole(\"menuitem\", { name: /Delete/i })\n      ).toBeInTheDocument();\n    });\n  });\n});\n```\n\n### Accessibility Tests\n\nVerify ARIA attributes and keyboard navigation\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 { SplitButton, Menu, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"SplitButton - Accessibility\", () => {\n  it(\"has proper ARIA attributes on dropdown trigger\", () => {\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"More actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const dropdownTrigger = screen.getByRole(\"button\", {\n      name: /More actions/i,\n    });\n    expect(dropdownTrigger).toHaveAttribute(\"aria-label\", \"More actions\");\n    expect(dropdownTrigger).toHaveAttribute(\"aria-expanded\", \"false\");\n  });\n\n  it(\"updates aria-expanded when menu opens\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const dropdownTrigger = screen.getByRole(\"button\", { name: /Actions/i });\n    expect(dropdownTrigger).toHaveAttribute(\"aria-expanded\", \"false\");\n\n    await user.click(dropdownTrigger);\n\n    await waitFor(() => {\n      expect(dropdownTrigger).toHaveAttribute(\"aria-expanded\", \"true\");\n    });\n  });\n\n  it(\"supports keyboard navigation in menu\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n          <Menu.Item id=\"export\">Export</Menu.Item>\n          <Menu.Item id=\"print\">Print</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const dropdownTrigger = screen.getByRole(\"button\", { name: /Actions/i });\n    await user.click(dropdownTrigger);\n\n    await waitFor(() => {\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n    });\n\n    const menuItems = screen.getAllByRole(\"menuitem\");\n\n    // First item should have focus initially\n    await waitFor(() => {\n      expect(menuItems[0]).toHaveFocus();\n    });\n\n    // Navigate down\n    await user.keyboard(\"{ArrowDown}\");\n    expect(menuItems[1]).toHaveFocus();\n\n    // Navigate down again\n    await user.keyboard(\"{ArrowDown}\");\n    expect(menuItems[2]).toHaveFocus();\n  });\n\n  it(\"closes menu with Escape key\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const dropdownTrigger = screen.getByRole(\"button\", { name: /Actions/i });\n    await user.click(dropdownTrigger);\n\n    await waitFor(() => {\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n    });\n\n    await user.keyboard(\"{Escape}\");\n\n    await waitFor(() => {\n      expect(screen.queryByRole(\"menu\")).not.toBeInTheDocument();\n    });\n  });\n\n  it(\"primary button is keyboard accessible\", async () => {\n    const user = userEvent.setup();\n    const handleAction = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={handleAction} aria-label=\"Actions\">\n          <Menu.Item id=\"save\">Save</Menu.Item>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    // Tab to primary button\n    await user.tab();\n\n    const primaryButton = screen.getByText(\"Save\");\n    expect(primaryButton).toHaveFocus();\n\n    // Activate with Enter\n    await user.keyboard(\"{Enter}\");\n\n    expect(handleAction).toHaveBeenCalledWith(\"save\");\n  });\n});\n```\n\n### Menu Content Tests\n\nTest rendering of menu sections and separators\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 { SplitButton, Menu, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"SplitButton - Menu content\", () => {\n  it(\"renders menu with sections\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <Menu.Section label=\"File\">\n            <Menu.Item id=\"save\">Save</Menu.Item>\n            <Menu.Item id=\"export\">Export</Menu.Item>\n          </Menu.Section>\n          <Menu.Section label=\"Edit\">\n            <Menu.Item id=\"copy\">Copy</Menu.Item>\n          </Menu.Section>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    const dropdownTrigger = screen.getByRole(\"button\", { name: /Actions/i });\n    await user.click(dropdownTrigger);\n\n    await waitFor(() => {\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n    });\n\n    // Check for section labels\n    expect(screen.getByText(\"File\")).toBeInTheDocument();\n    expect(screen.getByText(\"Edit\")).toBeInTheDocument();\n\n    // Check for menu items\n    expect(screen.getByRole(\"menuitem\", { name: /Save/i })).toBeInTheDocument();\n    expect(screen.getByRole(\"menuitem\", { name: /Copy/i })).toBeInTheDocument();\n  });\n\n  it(\"handles empty menu gracefully\", () => {\n    render(\n      <NimbusProvider>\n        <SplitButton onAction={vi.fn()} aria-label=\"Actions\">\n          <></>\n        </SplitButton>\n      </NimbusProvider>\n    );\n\n    // Should render with fallback text\n    expect(screen.getByText(/No actions available/i)).toBeInTheDocument();\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-buttons-splitbutton--docs)\n- [React Aria Menu](https://react-spectrum.adobe.com/react-aria/Menu.html)\n- [ARIA Menu Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/)\n- [Menu Component](/components/navigation/menu)\n- [Button Component](/components/inputs/button)\n- [IconButton Component](/components/inputs/iconbutton)\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": "With icon",
+          "href": "#with-icon",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size options",
+          "href": "#size-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visual variants",
+          "href": "#visual-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Color palettes",
+          "href": "#color-palettes",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With sections and separators",
+          "href": "#with-sections-and-separators",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Menu item states",
+          "href": "#menu-item-states",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Disabled state",
+          "href": "#disabled-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled menu state",
+          "href": "#controlled-menu-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Uncontrolled menu state",
+          "href": "#uncontrolled-menu-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Menu.Item requirements",
+          "href": "#menuitem-requirements",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            4,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Common patterns",
+          "href": "#common-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Document operations",
+          "href": "#document-operations",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Conditional actions based on state",
+          "href": "#conditional-actions-based-on-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering Tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Interaction Tests",
+          "href": "#interaction-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Primary Action Selection Tests",
+          "href": "#primary-action-selection-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled Mode Tests",
+          "href": "#controlled-mode-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Uncontrolled Mode Tests",
+          "href": "#uncontrolled-mode-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "State Tests",
+          "href": "#state-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility Tests",
+          "href": "#accessibility-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Menu Content Tests",
+          "href": "#menu-content-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nThe SplitButton provides a space-efficient way to present a primary action\nalongside related secondary actions, maintaining visual hierarchy while offering\ncomprehensive functionality.\n\n### Best practices\n\n- **Clear primary action:** The main button segment must perform the most common\n  or default action immediately upon being clicked. The label must be clear and\n  action-oriented.\n  - **If there is no default action** and you still want to use a button with a\n    dropdown menu, consider using the menu component with a regular button (with\n    a dropdown icon) as a trigger. In this case, the dropdown menu will open\n    always when clicking the button and no default action will be triggered.\n    Especially useful when all actions are equally important\n- **Visual distinction:** Clearly separate the primary action button from the\n  dropdown trigger. This visually communicates that the two segments perform\n  different functions.\n- **Dropdown content:** Keep the list of secondary actions concise and logically\n  ordered (by frequency or relevance).\n- **State persistence:** When a user selects a secondary action from the\n  dropdown, consider making that action the new primary button action if the\n  user is likely to repeat it, or if it fits the new context.\n- **Sizing and responsiveness:** Ensure both the primary button and the dropdown\n  trigger have adequate touch target sizes. The dropdown menu should be\n  positioned to avoid obscuring important content and should adapt well on\n  mobile devices.\n\n### Usage\n\n> [!TIP]\\\n> When to use\n\n- **Primary action focus:** Use a split button when one specific action (e.g.,\n  \"Save,\" \"Download\") is performed significantly more often than its related\n  alternatives (e.g., \"Save and Share,\" \"Download as PDF\").\n- **Contextual actions:** The dropdown menu must contain actions that are\n  directly related to the primary button's function.\n- **Space efficiency:** Use split buttons in toolbars or dense interfaces where\n  presenting every option as a full button would lead to clutter.\n\n> [!CAUTION]\\\n> When not to use\n\n- **When all actions are equally important:** Don't use a split button if all\n  the related actions are performed with equal frequency or importance. Grouping\n  them this way implies hierarchy where none exists, and a simple button group\n  or vertical menu list might be clearer.\n- **When actions are unrelated:** Avoid grouping actions that have no logical\n  connection under the same component. The primary button and all dropdown\n  options must share a clear, single context.\n- **When the primary action changes frequently:** If the default action changes\n  based on complex context or user state, constantly swapping the main button\n  label can confuse the user and create visual instability. Use a standard\n  dropdown menu where all options, including the default, are consistently\n  located inside.\n- **When discovery is crucial:** If users must know all available options (e.g.,\n  legally required export formats), burying them in a secondary dropdown menu is\n  a poor choice. Displaying them as separate full buttons or in an obvious\n  button group is better.\n- **For primary navigation:** A split button is an action control, not a primary\n  navigation tool. Using it to link to major sections can confuse users about\n  whether they are performing an action or moving to a new page.\n- **When screen space is not an issue:** If you have ample space, displaying the\n  top two or three most common actions as individual, labeled buttons can\n  sometimes be faster and more transparent than hiding them in a dropdown.\n- **When the dropdown contains complex controls:** Avoid filling the dropdown\n  with complex inputs, multi-step forms, or large amounts of text. A split\n  button dropdown should only contain simple, single-click actions.\n\n### Split buttons in use\n\n> [!TIP]\\\n> Do\n>\n> - Do prioritize the primary action. Ensure the main, large section performs\n>   the most common or default action immediately upon being clicked.\n> - Do group related actions. Include only closely related actions in the\n>   secondary dropdown menu.\n> - Do keep the dropdown menu concise. It should contain simple, single-click\n>   actions, not complex forms or long text.\n\n```jsx live\nconst App = () => {\n  return (\n    <SplitButton\n      variant=\"solid\"\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"More publish options\"\n    >\n      <Menu.Item id=\"save\">Save as draft</Menu.Item>\n      <Menu.Item id=\"schedule-publish\">Schedule publish date</Menu.Item>\n      <Menu.Item id=\"revert\">Revert to last save</Menu.Item>\n    </SplitButton>\n  );\n}\n```\n\n> [!CAUTION]\\\n> Don't\n>\n> - Don’t add icons that don’t make sense with the action. If one uses an icon,\n>   all options should have a corresponding icon. Don’t use icons on both sides.\n> - Don't dynamically swap the primary button's function based on minor changes\n>   in the user's state.\n> - Don't group actions that have different contexts or objectives.\n> - Don't use a split button as a primary site navigation tool.\n> - Don't hide legally required or critical options in the dropdown.\n> - Don't use the dropdown to house long forms, multi-step processes, or complex\n>   configuration settings.\n\n```jsx live\nconst App = () => {\n  return (\n    <SplitButton\n      variant=\"solid\"\n      tone=\"primary\"\n      onAction={(actionId) => alert(`Action: ${actionId}`)}\n      aria-label=\"ridiculous actions\"\n      icon={<Icons.Snowshoeing/>}\n    >\n      <Menu.Item id=\"download\">Download Report</Menu.Item>\n      <Menu.Item id=\"edit-permissions\">Edit user permissions</Menu.Item>\n      <Menu.Item id=\"go-home\">Go to Homepage</Menu.Item>\n      <Menu.Item id=\"send-email\">⭐️ Send email update</Menu.Item>\n    </SplitButton>\n  );\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": "Usage",
+          "href": "#usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Split buttons in use",
+          "href": "#split-buttons-in-use",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}