@commercetools/nimbus-mcp 0.1.0 → 2.11.0

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

@@ -0,0 +1,629 @@
+{
+  "meta": {
+    "id": "Components-Steps",
+    "title": "Steps",
+    "exportName": "Steps",
+    "description": "A progress indicator with built-in navigation that visually communicates the user's position within a multi-step process such as forms, wizards, and onboarding flows.",
+    "lifecycleState": "Beta",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/steps/steps.mdx",
+    "menu": [
+      "Components",
+      "Navigation",
+      "Steps"
+    ],
+    "route": "components/navigation/steps",
+    "tags": [
+      "component",
+      "stepper",
+      "progress",
+      "wizard",
+      "navigation"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Key Features",
+        "href": "#key-features",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          2
+        ],
+        "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": "Orientation",
+        "href": "#orientation",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Horizontal",
+        "href": "#horizontal",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Vertical",
+        "href": "#vertical",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Indicator content",
+        "href": "#indicator-content",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Numbers with checkmarks",
+        "href": "#numbers-with-checkmarks",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          3,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Custom icons",
+        "href": "#custom-icons",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          3,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Step states",
+        "href": "#step-states",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Color palette",
+        "href": "#color-palette",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Guidelines",
+        "href": "#guidelines",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Best practices",
+        "href": "#best-practices",
+        "depth": 3,
+        "numbering": [
+          1,
+          3,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Accessibility",
+        "href": "#accessibility",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Accessibility standards",
+        "href": "#accessibility-standards",
+        "depth": 3,
+        "numbering": [
+          1,
+          4,
+          1
+        ],
+        "parent": "root"
+      }
+    ],
+    "figmaLink": "https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=7347-81826",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nThe Steps component helps users understand where they are in a multi-step\nprocess. It provides clear visual feedback about completed, current, and\nupcoming steps, making complex workflows feel more manageable and predictable.\n\n### Key Features\n\n- **Three size variants**: Extra small (xs), small (sm), and medium (md) to fit\n  different interface densities\n- **Two orientations**: Horizontal for wide layouts and vertical for sidebar or\n  narrow contexts\n- **Flexible indicators**: Numeric step numbers with optional checkmarks, or\n  custom icons for semantic meaning\n- **Built-in navigation**: Includes navigation triggers and content panels with\n  automatic state management\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=7347-81826)\n\n## Variables\n\nGet familiar with the features.\n\n### Size\n\nThree sizes are available to match your interface density.\n\n```jsx-live\nconst App = () => (\n  <Stack direction=\"column\" gap=\"800\">\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontWeight=\"600\" fontSize=\"350\">Extra Small (xs) - 24px indicator</Text>\n      <Steps.Root defaultStep={1} count={3} size=\"xs\">\n        <Steps.List>\n          <Steps.Item index={0}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Account</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={1}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Profile</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={2}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Review</Steps.Title>\n            </Steps.Trigger>\n          </Steps.Item>\n        </Steps.List>\n      </Steps.Root>\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontWeight=\"600\" fontSize=\"350\">Small (sm, default) - 32px indicator</Text>\n      <Steps.Root defaultStep={1} count={3} size=\"sm\">\n        <Steps.List>\n          <Steps.Item index={0}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Account</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={1}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Profile</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={2}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Review</Steps.Title>\n            </Steps.Trigger>\n          </Steps.Item>\n        </Steps.List>\n      </Steps.Root>\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontWeight=\"600\" fontSize=\"350\">Medium (md) - 40px indicator</Text>\n      <Steps.Root defaultStep={1} count={3} size=\"md\">\n        <Steps.List>\n          <Steps.Item index={0}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Account</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={1}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Profile</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={2}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Review</Steps.Title>\n            </Steps.Trigger>\n          </Steps.Item>\n        </Steps.List>\n      </Steps.Root>\n    </Stack>\n  </Stack>\n)\n```\n\n### Orientation\n\nChoose between horizontal and vertical layouts.\n\n#### Horizontal\n\nDefault orientation, best for wide layouts and wizard headers.\n\n```jsx-live\nconst App = () => (\n  <Steps.Root defaultStep={1} count={3} orientation=\"horizontal\">\n    <Steps.List>\n      <Steps.Item index={0}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Account</Steps.Title>\n            <Steps.Description>Create your account</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={1}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Profile</Steps.Title>\n            <Steps.Description>Complete your profile</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={2}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Review</Steps.Title>\n            <Steps.Description>Review and submit</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n      </Steps.Item>\n    </Steps.List>\n  </Steps.Root>\n)\n```\n\n#### Vertical\n\nBest for sidebars, narrow containers, or when steps need longer descriptions.\n\n```jsx-live\nconst App = () => (\n  <Steps.Root defaultStep={1} count={3} orientation=\"vertical\">\n    <Steps.List>\n      <Steps.Item index={0}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Account Details</Steps.Title>\n            <Steps.Description>Set up your email and password</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={1}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Personal Information</Steps.Title>\n            <Steps.Description>Enter your name and contact details</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={2}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Confirmation</Steps.Title>\n            <Steps.Description>Review and complete your setup</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n      </Steps.Item>\n    </Steps.List>\n  </Steps.Root>\n)\n```\n\n### Indicator content\n\nThe `Steps.Status` component renders different content based on step state,\nallowing you to customize what appears for complete and incomplete steps.\n\n#### Numbers with checkmarks\n\nShow step numbers that transform into checkmarks when complete.\n\n```jsx-live\nconst App = () => (\n  <Steps.Root defaultStep={1} count={3}>\n    <Steps.List>\n      <Steps.Item index={0}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Complete</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={1}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Current</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={2}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Incomplete</Steps.Title>\n        </Steps.Trigger>\n      </Steps.Item>\n    </Steps.List>\n  </Steps.Root>\n)\n```\n\n#### Custom icons\n\nDisplay semantic icons that change to checkmarks when complete, providing visual\ncontext for each step's purpose.\n\n```jsx-live\nconst App = () => (\n  <Steps.Root defaultStep={1} count={3}>\n    <Steps.List>\n      <Steps.Item index={0}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Icons.Person />} />\n          </Steps.Indicator>\n          <Steps.Title>Account</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={1}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Icons.Settings />} />\n          </Steps.Indicator>\n          <Steps.Title>Settings</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={2}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Icons.Verified />} />\n          </Steps.Indicator>\n          <Steps.Title>Verify</Steps.Title>\n        </Steps.Trigger>\n      </Steps.Item>\n    </Steps.List>\n  </Steps.Root>\n)\n```\n\n### Step states\n\nEach step visually indicates its state based on the current progress. Use the\nbuilt-in navigation triggers for seamless step management.\n\n```jsx-live\nconst App = () => (\n  <Steps.Root defaultStep={1} count={4}>\n    <Steps.List>\n      <Steps.Item index={0}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Step 1</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={1}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Step 2</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={2}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Step 3</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={3}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Step 4</Steps.Title>\n        </Steps.Trigger>\n      </Steps.Item>\n    </Steps.List>\n\n    <Stack direction=\"row\" gap=\"400\" mt=\"600\">\n      <Steps.PrevTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\">Previous</Button>\n      </Steps.PrevTrigger>\n      <Steps.NextTrigger asChild>\n        <Button variant=\"solid\" size=\"sm\">Next</Button>\n      </Steps.NextTrigger>\n    </Stack>\n  </Steps.Root>\n)\n```\n\n### Color palette\n\nCustomize the visual theme using the `colorPalette` prop.\n\n```jsx-live\nconst App = () => {\n  const renderSteps = (colorPalette) => (\n    <Steps.Root defaultStep={1} count={3} colorPalette={colorPalette}>\n      <Steps.List>\n        <Steps.Item index={0}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n            </Steps.Indicator>\n            <Steps.Title>Step 1</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n        <Steps.Item index={1}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n            </Steps.Indicator>\n            <Steps.Title>Step 2</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n        <Steps.Item index={2}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n            </Steps.Indicator>\n            <Steps.Title>Step 3</Steps.Title>\n          </Steps.Trigger>\n        </Steps.Item>\n      </Steps.List>\n    </Steps.Root>\n  );\n\n  return (\n    <Stack direction=\"column\" gap=\"600\">\n      <Stack direction=\"column\" gap=\"200\">\n        <Text fontWeight=\"600\">primary (default)</Text>\n        {renderSteps(\"primary\")}\n      </Stack>\n      <Stack direction=\"column\" gap=\"200\">\n        <Text fontWeight=\"600\">positive</Text>\n        {renderSteps(\"positive\")}\n      </Stack>\n      <Stack direction=\"column\" gap=\"200\">\n        <Text fontWeight=\"600\">critical</Text>\n        {renderSteps(\"critical\")}\n      </Stack>\n    </Stack>\n  );\n}\n```\n\n## Guidelines\n\nUse the Steps component strategically to enhance user workflow.\n\n### Best practices\n\n- **Keep labels concise**: Use short, clear step labels that describe the action\n  or content\n- **Limit step count**: Avoid more than 5-7 steps to prevent overwhelming users\n- **Provide descriptions**: Use descriptions for complex steps that need\n  additional context\n- **Maintain consistency**: Use the same indicator pattern throughout a flow\n\n> [!TIP]\\\n> When to use\n>\n> - **Multi-step forms**: Registration, checkout, surveys\n> - **Wizards**: Setup flows, configuration, onboarding\n> - **Progress tracking**: Task completion, status indicators\n\n> [!CAUTION]\\\n> When not to use\n>\n> - **Linear navigation**: Use tabs or pagination instead\n> - **Single actions**: Steps are meant for multi-step processes\n> - **Unknown step count**: Use progress bars for indeterminate progress\n\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### Accessibility standards\n\n- **Semantic structure**: Uses tablist semantics (`role=\"tablist\"` and\n  `role=\"tab\"`) for proper screen reader navigation\n- **Current step indication**: Uses `aria-selected=\"true\"` to announce the\n  active step\n- **Panel association**: Triggers reference their content panels via\n  `aria-controls`\n- **Orientation**: Communicated via `aria-orientation` attribute\n- **Keyboard navigation**: Tab moves focus between triggers; Enter/Click\n  activates a trigger\n- **Color independence**: State is communicated through both color AND visual\n  indicators (checkmarks, styling) to support users with color vision deficiency\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nThe Steps component helps users understand where they are in a multi-step\nprocess. It provides clear visual feedback about completed, current, and\nupcoming steps, making complex workflows feel more manageable and predictable.\n\n### Key Features\n\n- **Three size variants**: Extra small (xs), small (sm), and medium (md) to fit\n  different interface densities\n- **Two orientations**: Horizontal for wide layouts and vertical for sidebar or\n  narrow contexts\n- **Flexible indicators**: Numeric step numbers with optional checkmarks, or\n  custom icons for semantic meaning\n- **Built-in navigation**: Includes navigation triggers and content panels with\n  automatic state management\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=7347-81826)\n\n## Variables\n\nGet familiar with the features.\n\n### Size\n\nThree sizes are available to match your interface density.\n\n```jsx-live\nconst App = () => (\n  <Stack direction=\"column\" gap=\"800\">\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontWeight=\"600\" fontSize=\"350\">Extra Small (xs) - 24px indicator</Text>\n      <Steps.Root defaultStep={1} count={3} size=\"xs\">\n        <Steps.List>\n          <Steps.Item index={0}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Account</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={1}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Profile</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={2}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Review</Steps.Title>\n            </Steps.Trigger>\n          </Steps.Item>\n        </Steps.List>\n      </Steps.Root>\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontWeight=\"600\" fontSize=\"350\">Small (sm, default) - 32px indicator</Text>\n      <Steps.Root defaultStep={1} count={3} size=\"sm\">\n        <Steps.List>\n          <Steps.Item index={0}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Account</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={1}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Profile</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={2}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Review</Steps.Title>\n            </Steps.Trigger>\n          </Steps.Item>\n        </Steps.List>\n      </Steps.Root>\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontWeight=\"600\" fontSize=\"350\">Medium (md) - 40px indicator</Text>\n      <Steps.Root defaultStep={1} count={3} size=\"md\">\n        <Steps.List>\n          <Steps.Item index={0}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Account</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={1}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Profile</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n          <Steps.Item index={2}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n              </Steps.Indicator>\n              <Steps.Title>Review</Steps.Title>\n            </Steps.Trigger>\n          </Steps.Item>\n        </Steps.List>\n      </Steps.Root>\n    </Stack>\n  </Stack>\n)\n```\n\n### Orientation\n\nChoose between horizontal and vertical layouts.\n\n#### Horizontal\n\nDefault orientation, best for wide layouts and wizard headers.\n\n```jsx-live\nconst App = () => (\n  <Steps.Root defaultStep={1} count={3} orientation=\"horizontal\">\n    <Steps.List>\n      <Steps.Item index={0}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Account</Steps.Title>\n            <Steps.Description>Create your account</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={1}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Profile</Steps.Title>\n            <Steps.Description>Complete your profile</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={2}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Review</Steps.Title>\n            <Steps.Description>Review and submit</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n      </Steps.Item>\n    </Steps.List>\n  </Steps.Root>\n)\n```\n\n#### Vertical\n\nBest for sidebars, narrow containers, or when steps need longer descriptions.\n\n```jsx-live\nconst App = () => (\n  <Steps.Root defaultStep={1} count={3} orientation=\"vertical\">\n    <Steps.List>\n      <Steps.Item index={0}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Account Details</Steps.Title>\n            <Steps.Description>Set up your email and password</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={1}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Personal Information</Steps.Title>\n            <Steps.Description>Enter your name and contact details</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={2}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Box>\n            <Steps.Title>Confirmation</Steps.Title>\n            <Steps.Description>Review and complete your setup</Steps.Description>\n          </Box>\n        </Steps.Trigger>\n      </Steps.Item>\n    </Steps.List>\n  </Steps.Root>\n)\n```\n\n### Indicator content\n\nThe `Steps.Status` component renders different content based on step state,\nallowing you to customize what appears for complete and incomplete steps.\n\n#### Numbers with checkmarks\n\nShow step numbers that transform into checkmarks when complete.\n\n```jsx-live\nconst App = () => (\n  <Steps.Root defaultStep={1} count={3}>\n    <Steps.List>\n      <Steps.Item index={0}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Complete</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={1}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Current</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={2}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Incomplete</Steps.Title>\n        </Steps.Trigger>\n      </Steps.Item>\n    </Steps.List>\n  </Steps.Root>\n)\n```\n\n#### Custom icons\n\nDisplay semantic icons that change to checkmarks when complete, providing visual\ncontext for each step's purpose.\n\n```jsx-live\nconst App = () => (\n  <Steps.Root defaultStep={1} count={3}>\n    <Steps.List>\n      <Steps.Item index={0}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Icons.Person />} />\n          </Steps.Indicator>\n          <Steps.Title>Account</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={1}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Icons.Settings />} />\n          </Steps.Indicator>\n          <Steps.Title>Settings</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={2}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Icons.Verified />} />\n          </Steps.Indicator>\n          <Steps.Title>Verify</Steps.Title>\n        </Steps.Trigger>\n      </Steps.Item>\n    </Steps.List>\n  </Steps.Root>\n)\n```\n\n### Step states\n\nEach step visually indicates its state based on the current progress. Use the\nbuilt-in navigation triggers for seamless step management.\n\n```jsx-live\nconst App = () => (\n  <Steps.Root defaultStep={1} count={4}>\n    <Steps.List>\n      <Steps.Item index={0}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Step 1</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={1}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Step 2</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={2}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Step 3</Steps.Title>\n        </Steps.Trigger>\n        <Steps.Separator />\n      </Steps.Item>\n      <Steps.Item index={3}>\n        <Steps.Trigger>\n          <Steps.Indicator>\n            <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n          </Steps.Indicator>\n          <Steps.Title>Step 4</Steps.Title>\n        </Steps.Trigger>\n      </Steps.Item>\n    </Steps.List>\n\n    <Stack direction=\"row\" gap=\"400\" mt=\"600\">\n      <Steps.PrevTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\">Previous</Button>\n      </Steps.PrevTrigger>\n      <Steps.NextTrigger asChild>\n        <Button variant=\"solid\" size=\"sm\">Next</Button>\n      </Steps.NextTrigger>\n    </Stack>\n  </Steps.Root>\n)\n```\n\n### Color palette\n\nCustomize the visual theme using the `colorPalette` prop.\n\n```jsx-live\nconst App = () => {\n  const renderSteps = (colorPalette) => (\n    <Steps.Root defaultStep={1} count={3} colorPalette={colorPalette}>\n      <Steps.List>\n        <Steps.Item index={0}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n            </Steps.Indicator>\n            <Steps.Title>Step 1</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n        <Steps.Item index={1}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n            </Steps.Indicator>\n            <Steps.Title>Step 2</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n        <Steps.Item index={2}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status complete={<Icons.Check />} incomplete={<Steps.Number />} />\n            </Steps.Indicator>\n            <Steps.Title>Step 3</Steps.Title>\n          </Steps.Trigger>\n        </Steps.Item>\n      </Steps.List>\n    </Steps.Root>\n  );\n\n  return (\n    <Stack direction=\"column\" gap=\"600\">\n      <Stack direction=\"column\" gap=\"200\">\n        <Text fontWeight=\"600\">primary (default)</Text>\n        {renderSteps(\"primary\")}\n      </Stack>\n      <Stack direction=\"column\" gap=\"200\">\n        <Text fontWeight=\"600\">positive</Text>\n        {renderSteps(\"positive\")}\n      </Stack>\n      <Stack direction=\"column\" gap=\"200\">\n        <Text fontWeight=\"600\">critical</Text>\n        {renderSteps(\"critical\")}\n      </Stack>\n    </Stack>\n  );\n}\n```\n\n## Guidelines\n\nUse the Steps component strategically to enhance user workflow.\n\n### Best practices\n\n- **Keep labels concise**: Use short, clear step labels that describe the action\n  or content\n- **Limit step count**: Avoid more than 5-7 steps to prevent overwhelming users\n- **Provide descriptions**: Use descriptions for complex steps that need\n  additional context\n- **Maintain consistency**: Use the same indicator pattern throughout a flow\n\n> [!TIP]\\\n> When to use\n>\n> - **Multi-step forms**: Registration, checkout, surveys\n> - **Wizards**: Setup flows, configuration, onboarding\n> - **Progress tracking**: Task completion, status indicators\n\n> [!CAUTION]\\\n> When not to use\n>\n> - **Linear navigation**: Use tabs or pagination instead\n> - **Single actions**: Steps are meant for multi-step processes\n> - **Unknown step count**: Use progress bars for indeterminate progress\n\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### Accessibility standards\n\n- **Semantic structure**: Uses tablist semantics (`role=\"tablist\"` and\n  `role=\"tab\"`) for proper screen reader navigation\n- **Current step indication**: Uses `aria-selected=\"true\"` to announce the\n  active step\n- **Panel association**: Triggers reference their content panels via\n  `aria-controls`\n- **Orientation**: Communicated via `aria-orientation` attribute\n- **Keyboard navigation**: Tab moves focus between triggers; Enter/Click\n  activates a trigger\n- **Color independence**: State is communicated through both color AND visual\n  indicators (checkmarks, styling) to support users with color vision deficiency\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Key Features",
+          "href": "#key-features",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "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": "Orientation",
+          "href": "#orientation",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Horizontal",
+          "href": "#horizontal",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Vertical",
+          "href": "#vertical",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Indicator content",
+          "href": "#indicator-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Numbers with checkmarks",
+          "href": "#numbers-with-checkmarks",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Custom icons",
+          "href": "#custom-icons",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            3,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Step states",
+          "href": "#step-states",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Color palette",
+          "href": "#color-palette",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\nImport the Steps compound component and its TypeScript types:\n\n```tsx\nimport { Steps, type StepsRootProps } from \"@commercetools/nimbus\";\n```\n\n### Basic usage\n\nThe Steps component is a compound component with multiple parts that work together. At\nminimum, you need `Steps.Root`, `Steps.List`, `Steps.Item`, `Steps.Trigger`, and `Steps.Indicator`:\n\n```jsx-live-dev\nconst App = () => {\n  return (\n    <Steps.Root defaultStep={1} count={3}>\n      <Steps.List>\n        <Steps.Item index={0}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Account</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n\n        <Steps.Item index={1}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Profile</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n\n        <Steps.Item index={2}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Review</Steps.Title>\n          </Steps.Trigger>\n        </Steps.Item>\n      </Steps.List>\n    </Steps.Root>\n  );\n};\n```\n\n## Usage examples\n\n### Controlled vs Uncontrolled\n\nThe Steps component supports both controlled and uncontrolled usage patterns:\n\n**Uncontrolled** - The component manages state internally using `defaultStep`:\n\n```tsx\n<Steps.Root defaultStep={0} count={3}>...</Steps.Root>\n```\n\n**Controlled** - You manage state externally using `step` and `onStepChange`:\n\n```jsx-live-dev\nconst App = () => {\n  const [currentStep, setCurrentStep] = React.useState(0);\n\n  return (\n    <Stack direction=\"column\" gap=\"600\">\n      <Steps.Root\n        step={currentStep}\n        onStepChange={(details) => setCurrentStep(details.step)}\n        count={3}\n      >\n        <Steps.List>\n          <Steps.Item index={0}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status\n                  complete={<Icons.Check />}\n                  incomplete={<Steps.Number />}\n                />\n              </Steps.Indicator>\n              <Steps.Title>Account</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n\n          <Steps.Item index={1}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status\n                  complete={<Icons.Check />}\n                  incomplete={<Steps.Number />}\n                />\n              </Steps.Indicator>\n              <Steps.Title>Profile</Steps.Title>\n            </Steps.Trigger>\n            <Steps.Separator />\n          </Steps.Item>\n\n          <Steps.Item index={2}>\n            <Steps.Trigger>\n              <Steps.Indicator>\n                <Steps.Status\n                  complete={<Icons.Check />}\n                  incomplete={<Steps.Number />}\n                />\n              </Steps.Indicator>\n              <Steps.Title>Review</Steps.Title>\n            </Steps.Trigger>\n          </Steps.Item>\n        </Steps.List>\n      </Steps.Root>\n\n      <Text color=\"neutral.11\" fontSize=\"350\">\n        Current step: {currentStep}\n      </Text>\n    </Stack>\n  );\n};\n```\n\n### Size variants\n\nThe Steps component supports three size variants: `xs` (extra small), `sm` (small, default), and `md` (medium). The size affects the indicator dimensions and typography:\n\n```jsx-live-dev\nconst App = () => {\n  const renderSteps = (size) => (\n    <Steps.Root defaultStep={1} count={3} size={size}>\n      <Steps.List>\n        <Steps.Item index={0}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Account</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n\n        <Steps.Item index={1}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Profile</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n\n        <Steps.Item index={2}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Review</Steps.Title>\n          </Steps.Trigger>\n        </Steps.Item>\n      </Steps.List>\n    </Steps.Root>\n  );\n\n  return (\n    <Stack direction=\"column\" gap=\"800\">\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Extra Small (xs) - 24px indicator</Text>\n        {renderSteps(\"xs\")}\n      </Stack>\n\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Small (sm, default) - 32px indicator</Text>\n        {renderSteps(\"sm\")}\n      </Stack>\n\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Medium (md) - 40px indicator</Text>\n        {renderSteps(\"md\")}\n      </Stack>\n    </Stack>\n  );\n};\n```\n\n### Orientation\n\nChoose between `horizontal` (default) and `vertical` orientations to match your layout needs:\n\n```jsx-live-dev\nconst App = () => {\n  return (\n    <Stack direction=\"row\" gap=\"800\" alignItems=\"flex-start\">\n      <Stack direction=\"column\" gap=\"400\" flex=\"1\">\n        <Text fontWeight=\"600\">Horizontal (default)</Text>\n        <Steps.Root defaultStep={1} count={3} orientation=\"horizontal\">\n          <Steps.List>\n            <Steps.Item index={0}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Steps.Number />}\n                  />\n                </Steps.Indicator>\n                <Steps.Title>Account</Steps.Title>\n              </Steps.Trigger>\n              <Steps.Separator />\n            </Steps.Item>\n\n            <Steps.Item index={1}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Steps.Number />}\n                  />\n                </Steps.Indicator>\n                <Steps.Title>Profile</Steps.Title>\n              </Steps.Trigger>\n              <Steps.Separator />\n            </Steps.Item>\n\n            <Steps.Item index={2}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Steps.Number />}\n                  />\n                </Steps.Indicator>\n                <Steps.Title>Review</Steps.Title>\n              </Steps.Trigger>\n            </Steps.Item>\n          </Steps.List>\n        </Steps.Root>\n      </Stack>\n\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Vertical</Text>\n        <Steps.Root defaultStep={1} count={3} orientation=\"vertical\">\n          <Steps.List>\n            <Steps.Item index={0}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Steps.Number />}\n                  />\n                </Steps.Indicator>\n                <Box>\n                  <Steps.Title>Account</Steps.Title>\n                  <Steps.Description>Create your account</Steps.Description>\n                </Box>\n              </Steps.Trigger>\n              <Steps.Separator />\n            </Steps.Item>\n\n            <Steps.Item index={1}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Steps.Number />}\n                  />\n                </Steps.Indicator>\n                <Box>\n                  <Steps.Title>Profile</Steps.Title>\n                  <Steps.Description>Complete your profile</Steps.Description>\n                </Box>\n              </Steps.Trigger>\n              <Steps.Separator />\n            </Steps.Item>\n\n            <Steps.Item index={2}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Steps.Number />}\n                  />\n                </Steps.Indicator>\n                <Box>\n                  <Steps.Title>Review</Steps.Title>\n                  <Steps.Description>Review and submit</Steps.Description>\n                </Box>\n              </Steps.Trigger>\n            </Steps.Item>\n          </Steps.List>\n        </Steps.Root>\n      </Stack>\n    </Stack>\n  );\n};\n```\n\n### Custom indicator content\n\nThe `Steps.Indicator` wraps content that changes based on step state. Use `Steps.Status` to show different content for complete, current, and incomplete states:\n\n```jsx-live-dev\nconst App = () => {\n  return (\n    <Stack direction=\"column\" gap=\"800\">\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Numbers with checkmark on complete</Text>\n        <Steps.Root defaultStep={1} count={3}>\n          <Steps.List>\n            <Steps.Item index={0}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Steps.Number />}\n                  />\n                </Steps.Indicator>\n                <Steps.Title>Complete</Steps.Title>\n              </Steps.Trigger>\n              <Steps.Separator />\n            </Steps.Item>\n\n            <Steps.Item index={1}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Steps.Number />}\n                  />\n                </Steps.Indicator>\n                <Steps.Title>Current</Steps.Title>\n              </Steps.Trigger>\n              <Steps.Separator />\n            </Steps.Item>\n\n            <Steps.Item index={2}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Steps.Number />}\n                  />\n                </Steps.Indicator>\n                <Steps.Title>Incomplete</Steps.Title>\n              </Steps.Trigger>\n            </Steps.Item>\n          </Steps.List>\n        </Steps.Root>\n      </Stack>\n\n      <Stack direction=\"column\" gap=\"400\">\n        <Text fontWeight=\"600\">Custom icons for each step</Text>\n        <Steps.Root defaultStep={1} count={3}>\n          <Steps.List>\n            <Steps.Item index={0}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Icons.Person />}\n                  />\n                </Steps.Indicator>\n                <Steps.Title>Account</Steps.Title>\n              </Steps.Trigger>\n              <Steps.Separator />\n            </Steps.Item>\n\n            <Steps.Item index={1}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Icons.Settings />}\n                  />\n                </Steps.Indicator>\n                <Steps.Title>Settings</Steps.Title>\n              </Steps.Trigger>\n              <Steps.Separator />\n            </Steps.Item>\n\n            <Steps.Item index={2}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Status\n                    complete={<Icons.Check />}\n                    incomplete={<Icons.Verified />}\n                  />\n                </Steps.Indicator>\n                <Steps.Title>Verify</Steps.Title>\n              </Steps.Trigger>\n            </Steps.Item>\n          </Steps.List>\n        </Steps.Root>\n      </Stack>\n    </Stack>\n  );\n};\n```\n\n### With content panels and navigation\n\nUse `Steps.Content` to show content for each step and `Steps.PrevTrigger`/`Steps.NextTrigger` for built-in navigation:\n\n```jsx-live-dev\nconst App = () => {\n  return (\n    <Steps.Root defaultStep={0} count={3}>\n      <Steps.List>\n        <Steps.Item index={0}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Account</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n\n        <Steps.Item index={1}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Profile</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n\n        <Steps.Item index={2}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Review</Steps.Title>\n          </Steps.Trigger>\n        </Steps.Item>\n      </Steps.List>\n\n      <Box mt=\"600\" p=\"400\" bg=\"neutral.2\" borderRadius=\"md\">\n        <Steps.Content index={0}>\n          <Text fontWeight=\"bold\" mb=\"200\">Create your account</Text>\n          <Text>Enter your email and password to get started.</Text>\n        </Steps.Content>\n        <Steps.Content index={1}>\n          <Text fontWeight=\"bold\" mb=\"200\">Complete your profile</Text>\n          <Text>Add your personal information and preferences.</Text>\n        </Steps.Content>\n        <Steps.Content index={2}>\n          <Text fontWeight=\"bold\" mb=\"200\">Review and confirm</Text>\n          <Text>Review your information before submitting.</Text>\n        </Steps.Content>\n        <Steps.CompletedContent>\n          <Text fontWeight=\"bold\" color=\"success.9\">\n            All steps completed successfully!\n          </Text>\n        </Steps.CompletedContent>\n      </Box>\n\n      <Flex gap=\"400\" mt=\"400\">\n        <Steps.PrevTrigger asChild>\n          <Button variant=\"outline\">Back</Button>\n        </Steps.PrevTrigger>\n        <Steps.NextTrigger asChild>\n          <Button variant=\"solid\">Continue</Button>\n        </Steps.NextTrigger>\n      </Flex>\n    </Steps.Root>\n  );\n};\n```\n\n### Linear mode\n\nUse the `linear` prop to restrict navigation to sequential progress only:\n\n```jsx-live-dev\nconst App = () => {\n  return (\n    <Steps.Root defaultStep={0} count={3} linear>\n      <Steps.List>\n        <Steps.Item index={0}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Step 1</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n\n        <Steps.Item index={1}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Step 2</Steps.Title>\n          </Steps.Trigger>\n          <Steps.Separator />\n        </Steps.Item>\n\n        <Steps.Item index={2}>\n          <Steps.Trigger>\n            <Steps.Indicator>\n              <Steps.Status\n                complete={<Icons.Check />}\n                incomplete={<Steps.Number />}\n              />\n            </Steps.Indicator>\n            <Steps.Title>Step 3</Steps.Title>\n          </Steps.Trigger>\n        </Steps.Item>\n      </Steps.List>\n\n      <Box mt=\"600\" p=\"400\" bg=\"neutral.2\" borderRadius=\"md\">\n        <Steps.Content index={0}>\n          <Text>Complete this step before proceeding.</Text>\n        </Steps.Content>\n        <Steps.Content index={1}>\n          <Text>You can only go forward or back to completed steps.</Text>\n        </Steps.Content>\n        <Steps.Content index={2}>\n          <Text>Final step - you can go back but not skip ahead.</Text>\n        </Steps.Content>\n        <Steps.CompletedContent>\n          <Text fontWeight=\"bold\" color=\"success.9\">All steps completed!</Text>\n        </Steps.CompletedContent>\n      </Box>\n\n      <Flex gap=\"400\" mt=\"400\">\n        <Steps.PrevTrigger asChild>\n          <Button variant=\"outline\">Back</Button>\n        </Steps.PrevTrigger>\n        <Steps.NextTrigger asChild>\n          <Button variant=\"solid\">Next</Button>\n        </Steps.NextTrigger>\n      </Flex>\n    </Steps.Root>\n  );\n};\n```\n\n## Component structure\n\nThe Steps component is composed of the following parts:\n\n| Component | Description |\n|-----------|-------------|\n| `Steps.Root` | Container that manages step state and provides context |\n| `Steps.List` | Container for grouping step items |\n| `Steps.Item` | Container for a single step (trigger + separator) |\n| `Steps.Trigger` | Clickable element within each step for direct navigation |\n| `Steps.Indicator` | Visual marker showing step status |\n| `Steps.Number` | Displays the step number (1-indexed) |\n| `Steps.Status` | Renders different content based on step state |\n| `Steps.Title` | Displays the step title |\n| `Steps.Description` | Displays optional hint text |\n| `Steps.Separator` | Visual line connecting step indicators |\n| `Steps.Content` | Content container that auto-shows/hides based on current step |\n| `Steps.CompletedContent` | Content displayed when all steps are complete |\n| `Steps.PrevTrigger` | Navigation button to go to previous step |\n| `Steps.NextTrigger` | Navigation button to go to next step |\n| `Steps.Context` | Render prop for accessing step state |\n| `Steps.ItemContext` | Render prop for accessing current item state |\n\n## Accessibility\n\nThe Steps component implements accessibility features following WAI-ARIA patterns:\n\n**Roles:**\n\n- `Steps.List` has `role=\"tablist\"`\n- Each `Steps.Trigger` has `role=\"tab\"`\n- `Steps.Content` panels have `role=\"tabpanel\"`\n\n**State communication:**\n\n- Current step trigger has `aria-selected=\"true\"`\n- Triggers reference their content panels via `aria-controls`\n- Orientation is communicated via `aria-orientation`\n\n**Keyboard navigation:**\n\n- Tab moves focus between triggers\n- Click or Enter activates a trigger (unless `linear` mode restricts it)\n- Arrow keys can navigate between triggers\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 = \"checkout-progress-steps\";\n\nexport const CheckoutProgress = () => (\n  <Steps.Root id={PERSISTENT_ID} defaultStep={0} count={4}>\n    <Steps.List>\n      {/* ... */}\n    </Steps.List>\n  </Steps.Root>\n);\n```\n\n## API reference\n\n<PropsTable id=\"Steps\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Steps 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 component renders with correct structure\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Check } from \"@commercetools/nimbus-icons\";\nimport { Steps, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Steps - Basic rendering\", () => {\n  it(\"renders a tablist with tab items\", () => {\n    renderSteps();\n\n    // Chakra/Ark Steps uses tablist pattern\n    expect(screen.getByRole(\"tablist\")).toBeInTheDocument();\n    expect(screen.getAllByRole(\"tab\")).toHaveLength(3);\n  });\n\n  it(\"renders step titles\", () => {\n    renderSteps();\n\n    expect(screen.getByText(\"Account\")).toBeInTheDocument();\n    expect(screen.getByText(\"Profile\")).toBeInTheDocument();\n    expect(screen.getByText(\"Review\")).toBeInTheDocument();\n  });\n\n  it(\"renders step descriptions\", () => {\n    renderSteps();\n\n    expect(screen.getByText(\"Set up account\")).toBeInTheDocument();\n    expect(screen.getByText(\"Complete profile\")).toBeInTheDocument();\n    expect(screen.getByText(\"Confirm details\")).toBeInTheDocument();\n  });\n});\n```\n\n### Step State Tests\n\nVerify state attributes reflect progress\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Check } from \"@commercetools/nimbus-icons\";\nimport { Steps, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Steps - Step states\", () => {\n  it(\"assigns data-state based on step index\", () => {\n    const { container } = renderSteps();\n\n    // Query triggers which have the data-state attribute\n    // In Ark Steps: \"open\" = current step, \"closed\" = non-current steps\n    // Completed steps are identified by data-complete attribute\n    const triggers = container.querySelectorAll('[data-part=\"trigger\"]');\n    expect(triggers[0]).toHaveAttribute(\"data-state\", \"closed\"); // past (completed) step\n    expect(triggers[0]).toHaveAttribute(\"data-complete\", \"\"); // marked as complete\n    expect(triggers[1]).toHaveAttribute(\"data-state\", \"open\"); // current step\n    expect(triggers[2]).toHaveAttribute(\"data-state\", \"closed\"); // future (incomplete) step\n    expect(triggers[2]).not.toHaveAttribute(\"data-complete\"); // not complete\n  });\n\n  it(\"shows current step content via tabpanel\", () => {\n    renderSteps();\n\n    // Step 1 (index 1) is current, so its content should be visible\n    expect(screen.getByText(\"Profile content\")).toBeInTheDocument();\n    // Other content should not be visible (Ark handles this)\n  });\n});\n```\n\n### Indicator Content Tests\n\nValidate indicator content based on step state\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Check } from \"@commercetools/nimbus-icons\";\nimport { Steps, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Steps - Indicator content\", () => {\n  it(\"renders step numbers for incomplete steps\", () => {\n    renderSteps();\n\n    // Step 2 (index 1 - current) should show \"2\"\n    expect(screen.getByText(\"2\")).toBeInTheDocument();\n    // Step 3 (index 2 - incomplete) should show \"3\"\n    expect(screen.getByText(\"3\")).toBeInTheDocument();\n  });\n\n  it(\"renders complete icon for completed steps\", () => {\n    renderSteps();\n\n    // Step 1 (index 0) is complete, should show check icon\n    expect(screen.getByTestId(\"complete-icon\")).toBeInTheDocument();\n  });\n\n  it(\"renders custom icons when provided\", () => {\n    render(\n      <NimbusProvider>\n        <Steps.Root step={0} count={2}>\n          <Steps.List>\n            <Steps.Item index={0}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <span data-testid=\"custom-icon\">*</span>\n                </Steps.Indicator>\n                <Steps.Title>Account</Steps.Title>\n              </Steps.Trigger>\n              <Steps.Separator />\n            </Steps.Item>\n\n            <Steps.Item index={1}>\n              <Steps.Trigger>\n                <Steps.Indicator>\n                  <Steps.Number />\n                </Steps.Indicator>\n                <Steps.Title>Review</Steps.Title>\n              </Steps.Trigger>\n            </Steps.Item>\n          </Steps.List>\n        </Steps.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByTestId(\"custom-icon\")).toBeInTheDocument();\n  });\n});\n```\n\n### Orientation Tests\n\nVerify orientation attribute propagates correctly\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Check } from \"@commercetools/nimbus-icons\";\nimport { Steps, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Steps - Orientation\", () => {\n  it(\"passes orientation to component elements\", () => {\n    const { container } = renderSteps({ orientation: \"vertical\" });\n\n    // Check that the tablist has vertical orientation\n    const tablist = screen.getByRole(\"tablist\");\n    expect(tablist).toHaveAttribute(\"aria-orientation\", \"vertical\");\n\n    // Separators should also have vertical orientation\n    const separators = container.querySelectorAll('[data-slot=\"separator\"]');\n    expect(separators.length).toBe(2);\n    separators.forEach((separator) => {\n      expect(separator).toHaveAttribute(\"data-orientation\", \"vertical\");\n    });\n  });\n\n  it(\"defaults to horizontal orientation\", () => {\n    renderSteps();\n\n    const tablist = screen.getByRole(\"tablist\");\n    expect(tablist).toHaveAttribute(\"aria-orientation\", \"horizontal\");\n  });\n});\n```\n\n\n## Resources\n\n- [Steps Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-steps--docs)\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": "Controlled vs Uncontrolled",
+          "href": "#controlled-vs-uncontrolled",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size variants",
+          "href": "#size-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Orientation",
+          "href": "#orientation",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Custom indicator content",
+          "href": "#custom-indicator-content",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With content panels and navigation",
+          "href": "#with-content-panels-and-navigation",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Linear mode",
+          "href": "#linear-mode",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component structure",
+          "href": "#component-structure",
+          "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": "Basic Rendering Tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Step State Tests",
+          "href": "#step-state-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Indicator Content Tests",
+          "href": "#indicator-content-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Orientation Tests",
+          "href": "#orientation-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}