@tangible/ui 0.0.1

package/tui-manifest.json

@@ -0,0 +1,1858 @@
+{
+  "version": "0.0.1",
+  "generated": "2026-01-31T03:28:47.490Z",
+  "components": {
+    "Accordion": {
+      "props": {
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "value": {
+          "type": "string | string[]",
+          "required": false,
+          "description": "Controlled: currently open item value\nControlled: currently open item values"
+        },
+        "onValueChange": {
+          "type": "((value: string) => void) | ((value: string[]) => void)",
+          "required": false,
+          "description": "Callback when open item changes (undefined when all closed in collapsible mode)\nCallback when open items change"
+        },
+        "collapsible": {
+          "type": "boolean",
+          "required": false,
+          "description": "Allow closing all items (otherwise one stays open)"
+        }
+      },
+      "cssTokens": [
+        "--tui-accordion-bg",
+        "--tui-accordion-bg-open",
+        "--tui-accordion-border",
+        "--tui-accordion-radius",
+        "--tui-accordion-padding",
+        "--tui-accordion-gap",
+        "--tui-accordion-indicator",
+        "--tui-accordion-trigger-hover"
+      ],
+      "story": {
+        "title": "Components/Accordion",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": [
+        "Item",
+        "Trigger",
+        "Panel"
+      ],
+      "description": "Expandable content sections with single or multiple selection modes",
+      "gotchas": [
+        {
+          "note": "type='single' allows one panel open at a time; type='multiple' allows many"
+        },
+        {
+          "note": "collapsible prop (single mode only) allows closing the open panel"
+        },
+        {
+          "note": "headingLevel prop wraps trigger in semantic heading element"
+        },
+        {
+          "note": "Uses grid-template-rows animation for smooth expand/collapse"
+        },
+        {
+          "note": "Keyboard: Arrow keys navigate triggers, Enter/Space toggle"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Single mode",
+          "code": "<Accordion type=\"single\" collapsible defaultValue=\"item1\">\n  <Accordion.Item value=\"item1\">\n    <Accordion.Trigger>First item</Accordion.Trigger>\n    <Accordion.Panel>First content</Accordion.Panel>\n  </Accordion.Item>\n  <Accordion.Item value=\"item2\">\n    <Accordion.Trigger>Second item</Accordion.Trigger>\n    <Accordion.Panel>Second content</Accordion.Panel>\n  </Accordion.Item>\n</Accordion>"
+        },
+        {
+          "name": "Multiple mode",
+          "code": "<Accordion type=\"multiple\" defaultValue={['a', 'b']}>\n  <Accordion.Item value=\"a\">\n    <Accordion.Trigger>Section A</Accordion.Trigger>\n    <Accordion.Panel>Content A</Accordion.Panel>\n  </Accordion.Item>\n  <Accordion.Item value=\"b\">\n    <Accordion.Trigger>Section B</Accordion.Trigger>\n    <Accordion.Panel>Content B</Accordion.Panel>\n  </Accordion.Item>\n</Accordion>"
+        },
+        {
+          "name": "With heading",
+          "code": "<Accordion.Item value=\"faq\" headingLevel={3}>\n  <Accordion.Trigger>Frequently Asked</Accordion.Trigger>\n  <Accordion.Panel>Answer here</Accordion.Panel>\n</Accordion.Item>"
+        }
+      ],
+      "related": [
+        "Tabs"
+      ]
+    },
+    "Avatar": {
+      "props": {
+        "src": {
+          "type": "string",
+          "required": false,
+          "description": "Image source URL"
+        },
+        "name": {
+          "type": "string",
+          "required": false,
+          "description": "User's name - used for alt text and generating initials fallback"
+        },
+        "size": {
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\"",
+          "required": false,
+          "defaultValue": "md",
+          "description": "Size of the avatar"
+        },
+        "shape": {
+          "type": "\"circle\" | \"square\"",
+          "required": false,
+          "defaultValue": "circle",
+          "description": "Shape of the avatar"
+        },
+        "indicator": {
+          "type": "ReactNode",
+          "required": false,
+          "description": "Status indicator element (icon, badge, etc.)"
+        },
+        "indicatorLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the indicator (e.g., \"Online\", \"Verified\", \"3 notifications\")"
+        },
+        "indicatorPosition": {
+          "type": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\"",
+          "required": false,
+          "defaultValue": "bottom-right",
+          "description": "Position of the indicator"
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS class"
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/Avatar",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Button": {
+      "props": {
+        "label": {
+          "type": "ReactNode",
+          "required": false,
+          "description": "Button label text. If provided, renders as the button content.\nUse this for simple text buttons."
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false,
+          "description": "Rich content for the button. Used when label is not provided.\nUse this for buttons with custom markup."
+        },
+        "size": {
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "md",
+          "description": "Size of the button."
+        },
+        "theme": {
+          "type": "\"primary\" | \"secondary\" | \"danger\" | \"destructive\"",
+          "required": false,
+          "defaultValue": "primary",
+          "description": "Semantic color theme.\nNote: Defaults to 'primary' (unlike IconButton which defaults to 'secondary')\nbecause Buttons are typically primary CTAs."
+        },
+        "variant": {
+          "type": "\"solid\" | \"outline\" | \"ghost\" | \"link\"",
+          "required": false,
+          "defaultValue": "solid",
+          "description": "Visual style variant."
+        },
+        "fullWidth": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Make button full width of container."
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disabled state. Prevents interaction."
+        },
+        "loading": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Loading state. Shows spinner and prevents interaction."
+        },
+        "target": {
+          "type": "HTMLAttributeAnchorTarget",
+          "required": false,
+          "description": "Link target (for anchor variant)."
+        },
+        "rel": {
+          "type": "string",
+          "required": false,
+          "description": "Link rel attribute (for anchor variant)."
+        },
+        "onClick": {
+          "type": "(MouseEventHandler<HTMLButtonElement | HTMLAnchorElement> & MouseEventHandler<HTMLButtonElement>) | (MouseEventHandler<...> & MouseEventHandler<...>)",
+          "required": false,
+          "description": "Click handler. Works for both button and anchor variants."
+        },
+        "leftIconName": {
+          "type": "IconName",
+          "required": false,
+          "description": "Icon to display before the label.\nUse icon registry paths like \"system/check\".\n@example leftIconName=\"system/check\""
+        },
+        "rightIconName": {
+          "type": "IconName",
+          "required": false,
+          "description": "Icon to display after the label.\nUse icon registry paths like \"system/chevron-right\".\n@example rightIconName=\"system/chevron-right\""
+        },
+        "leftIcon": {
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom left icon element. Overrides leftIconName."
+        },
+        "rightIcon": {
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom right icon element. Overrides rightIconName."
+        },
+        "iconSize": {
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "sm",
+          "description": "Size of icons."
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS class names.\nNote: Use sparingly. Prefer component API tokens for customization."
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles."
+        },
+        "id": {
+          "type": "string",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": false
+        },
+        "role": {
+          "type": "AriaRole",
+          "required": false
+        },
+        "onChange": {
+          "type": "FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>",
+          "required": false
+        },
+        "href": {
+          "type": "string",
+          "required": false,
+          "description": "URL for the link. When provided, Button renders as <a>."
+        }
+      },
+      "cssTokens": [
+        "--tui-button-bg",
+        "--tui-button-fg",
+        "--tui-button-border",
+        "--tui-button-radius",
+        "--tui-button-bg-interact",
+        "--tui-button-fg-interact",
+        "--tui-button-border-interact"
+      ],
+      "story": {
+        "title": "Primitives/Button",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": "Primary action button with polymorphic rendering (button or anchor)",
+      "gotchas": [
+        {
+          "note": "Renders as <a> when href is provided - TypeScript discriminates the union"
+        },
+        {
+          "note": "Uses !important for bg/color/border to defeat WordPress button styles"
+        },
+        {
+          "note": "Don't use raw <a> for navigation links in button contexts",
+          "instead": "Button variant='link' href={...}"
+        },
+        {
+          "note": "loading state replaces left icon with spinner and disables interaction"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Primary CTA",
+          "code": "<Button label=\"Save Changes\" />"
+        },
+        {
+          "name": "With icon",
+          "code": "<Button label=\"Add Item\" leftIconName=\"system/plus\" />"
+        },
+        {
+          "name": "As link",
+          "code": "<Button label=\"Learn more\" href=\"/docs\" variant=\"link\" />"
+        },
+        {
+          "name": "Danger action",
+          "code": "<Button label=\"Delete\" theme=\"danger\" leftIconName=\"system/trash\" />"
+        },
+        {
+          "name": "Secondary outline",
+          "code": "<Button label=\"Cancel\" variant=\"outline\" theme=\"secondary\" />"
+        }
+      ],
+      "related": [
+        "IconButton"
+      ]
+    },
+    "Card": {
+      "props": {
+        "inline": {
+          "type": "boolean",
+          "required": false
+        },
+        "elevated": {
+          "type": "boolean",
+          "required": false
+        },
+        "interactive": {
+          "type": "boolean",
+          "required": false
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false
+        },
+        "as": {
+          "type": "\"article\" | \"div\" | \"section\"",
+          "required": false
+        },
+        "onClick": {
+          "type": "MouseEventHandler<HTMLElement>",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": false
+        },
+        "id": {
+          "type": "string",
+          "required": false
+        },
+        "role": {
+          "type": "AriaRole",
+          "required": false
+        },
+        "rel": {
+          "type": "string",
+          "required": false
+        },
+        "onChange": {
+          "type": "FormEventHandler<HTMLElement> | FormEventHandler<HTMLDivElement>",
+          "required": false
+        }
+      },
+      "cssTokens": [
+        "--tui-card-bg",
+        "--tui-card-border",
+        "--tui-card-border-interact",
+        "--tui-card-radius",
+        "--tui-card-shadow",
+        "--tui-card-shadow-interact",
+        "--tui-card-padding",
+        "--tui-card-foot-basis"
+      ],
+      "story": {
+        "title": "Components/Card",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": [
+        "Head",
+        "Body",
+        "Foot",
+        "Link"
+      ],
+      "description": "Content container with semantic structure and optional inline layout",
+      "gotchas": [
+        {
+          "note": "Uses container queries for responsive inline layout, not viewport media queries"
+        },
+        {
+          "note": "Card.Link creates a stretched link covering the entire card - use for clickable cards"
+        },
+        {
+          "note": "interactive prop enables hover states; combine with onClick for full button semantics"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "<Card><Card.Head>Title</Card.Head><Card.Body>Content here</Card.Body></Card>"
+        },
+        {
+          "name": "With footer",
+          "code": "<Card><Card.Body>Content</Card.Body><Card.Foot><Button label=\"Action\" /></Card.Foot></Card>"
+        },
+        {
+          "name": "Clickable card",
+          "code": "<Card interactive><Card.Body>Click me<Card.Link href=\"/details\" /></Card.Body></Card>"
+        },
+        {
+          "name": "Elevated",
+          "code": "<Card elevated><Card.Body>Shadowed card</Card.Body></Card>"
+        }
+      ],
+      "related": [
+        "Notice"
+      ]
+    },
+    "Chip": {
+      "props": {
+        "as": {
+          "type": "\"span\" | \"div\" | \"a\"",
+          "required": false,
+          "defaultValue": "span"
+        },
+        "href": {
+          "type": "string",
+          "required": false
+        },
+        "target": {
+          "type": "HTMLAttributeAnchorTarget",
+          "required": false
+        },
+        "rel": {
+          "type": "string",
+          "required": false
+        },
+        "size": {
+          "type": "\"xs\" | \"sm\" | \"md\"",
+          "required": false,
+          "defaultValue": "md"
+        },
+        "theme": {
+          "type": "\"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\"",
+          "required": false,
+          "defaultValue": "secondary"
+        },
+        "variant": {
+          "type": "\"default\" | \"outline\" | \"ghost\" | \"solid\" | \"flush\"",
+          "required": false,
+          "defaultValue": "default"
+        },
+        "selected": {
+          "type": "boolean",
+          "required": false
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false
+        },
+        "interactive": {
+          "type": "boolean",
+          "required": false
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "leftIcon": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "rightIcon": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "onClick": {
+          "type": "MouseEventHandler<HTMLElement>",
+          "required": false
+        },
+        "id": {
+          "type": "string",
+          "required": false
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": false
+        },
+        "role": {
+          "type": "AriaRole",
+          "required": false
+        },
+        "onChange": {
+          "type": "FormEventHandler<HTMLSpanElement>",
+          "required": false
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/Chip",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Chips": {
+      "props": {
+        "density": {
+          "type": "\"xs\" | \"sm\" | \"md\"",
+          "required": false,
+          "defaultValue": "sm",
+          "description": "Gap between chips"
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "role": {
+          "type": "AriaRole",
+          "required": false,
+          "defaultValue": "group"
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Composites/Chips",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "ContentIndicator": {
+      "props": {
+        "icon": {
+          "type": "IconName",
+          "required": true,
+          "description": "Icon to display in the center.\nUses the icon registry path format: \"category/name\"\n@example \"lms/question-mark\""
+        },
+        "size": {
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "'sm'",
+          "description": "Size of the indicator.\n- `'xs'`: 16px circle\n- `'sm'`: 24px circle (default)\n- `'md'`: 32px circle\n- `'lg'`: 40px circle"
+        },
+        "theme": {
+          "type": "\"default\" | \"info\" | \"success\" | \"warning\" | \"danger\"",
+          "required": false,
+          "defaultValue": "'default'",
+          "description": "Color theme for the indicator."
+        },
+        "variant": {
+          "type": "\"ring\" | \"solid\"",
+          "required": false,
+          "defaultValue": "'ring'",
+          "description": "Visual variant.\n- `'ring'`: Hollow circle with border (default)\n- `'solid'`: Filled circle with icon in contrasting color"
+        },
+        "label": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the indicator.\nRequired for meaningful icons. Omit only if the icon is purely decorative\nand context is provided by surrounding content."
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS class names."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/ContentIndicator",
+        "tags": [
+          "autodocs",
+          "stable",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Dropdown": {
+      "props": {
+        "open": {
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state."
+        },
+        "defaultOpen": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Default open state for uncontrolled usage."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/Dropdown",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Icon": {
+      "props": {
+        "name": {
+          "type": "IconName",
+          "required": false,
+          "description": "Icon name from registry (e.g., \"system/check\")"
+        },
+        "emoji": {
+          "type": "string",
+          "required": false,
+          "description": "Emoji or unicode character (alternative to name)"
+        },
+        "label": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for informative icons. Required if icon conveys meaning."
+        },
+        "size": {
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\"",
+          "required": false,
+          "description": "Icon size. Defaults to inherit from parent font-size."
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/Icon",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "IconButton": {
+      "props": {
+        "icon": {
+          "type": "IconName",
+          "required": true,
+          "description": "Icon to display. Required — this is the button's visual content.\n@example icon=\"system/close\""
+        },
+        "label": {
+          "type": "string",
+          "required": true,
+          "description": "Accessible label. Required — icon-only buttons must have a label\nfor screen readers since there's no visible text.\n@example label=\"Close modal\""
+        },
+        "size": {
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "'sm'",
+          "description": "Size of the button.\n- `'xs'`: 24px\n- `'sm'`: 32px (default)\n- `'md'`: 40px\n- `'lg'`: 48px"
+        },
+        "theme": {
+          "type": "\"primary\" | \"secondary\" | \"danger\"",
+          "required": false,
+          "defaultValue": "'secondary'",
+          "description": "Semantic color theme.\nNote: Defaults to 'secondary' (unlike Button which defaults to 'primary')\nbecause IconButtons are typically used for toolbar/utility actions."
+        },
+        "variant": {
+          "type": "\"solid\" | \"outline\" | \"ghost\"",
+          "required": false,
+          "defaultValue": "'ghost'",
+          "description": "Visual style variant.\n- `'solid'`: Filled background\n- `'outline'`: Border only, transparent background\n- `'ghost'`: No border or background, icon only"
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false,
+          "description": "Disabled state."
+        },
+        "loading": {
+          "type": "boolean",
+          "required": false,
+          "description": "Loading state — shows spinner, disables interaction."
+        },
+        "pressed": {
+          "type": "boolean",
+          "required": false,
+          "description": "Pressed state for toggle buttons.\nWhen true, applies aria-pressed=\"true\" and active styling.\n@example pressed={isMuted}"
+        },
+        "showTooltip": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show the label as a tooltip on hover.\nSince icon-only buttons have no visible text, this helps sighted\nusers discover what the button does."
+        },
+        "tooltipSide": {
+          "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+          "required": false,
+          "defaultValue": "'top'",
+          "description": "Tooltip placement side."
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS class names."
+        },
+        "id": {
+          "type": "string",
+          "required": false
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": false
+        },
+        "role": {
+          "type": "AriaRole",
+          "required": false
+        },
+        "rel": {
+          "type": "string",
+          "required": false
+        },
+        "onChange": {
+          "type": "FormEventHandler<HTMLButtonElement> | FormEventHandler<HTMLAnchorElement>",
+          "required": false
+        },
+        "onClick": {
+          "type": "MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>",
+          "required": false
+        },
+        "href": {
+          "type": "string",
+          "required": false
+        },
+        "target": {
+          "type": "HTMLAttributeAnchorTarget",
+          "required": false
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/IconButton",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Modal": {
+      "props": {
+        "onClose": {
+          "type": "() => void",
+          "required": true
+        },
+        "size": {
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "required": false
+        }
+      },
+      "cssTokens": [
+        "--tui-modal-z",
+        "--tui-modal-max",
+        "--tui-modal-backdrop",
+        "--tui-modal-bg",
+        "--tui-modal-border",
+        "--tui-modal-radius",
+        "--tui-modal-padding",
+        "--tui-modal-shadow"
+      ],
+      "story": {
+        "title": "Components/Modal",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": [
+        "Head",
+        "Body",
+        "Foot",
+        "Close"
+      ],
+      "description": "Accessible dialog with focus trap, backdrop, and portal rendering",
+      "gotchas": [
+        {
+          "note": "Always provide labelledBy pointing to a heading id for accessibility"
+        },
+        {
+          "note": "Body uses two-layer wrapper for scroll + :has() composition"
+        },
+        {
+          "note": "Portals to nearest .tui-interface ancestor or creates one"
+        },
+        {
+          "note": "showCloseButton adds built-in dismiss; use Modal.Close for custom placement"
+        },
+        {
+          "note": "stickyHead/stickyFoot keep header/footer visible when body scrolls"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "<Modal isOpen={open} onClose={close} labelledBy=\"modal-title\">\n  <Modal.Head><h2 id=\"modal-title\">Title</h2></Modal.Head>\n  <Modal.Body>Content</Modal.Body>\n  <Modal.Foot><Button label=\"Close\" onClick={close} /></Modal.Foot>\n</Modal>"
+        },
+        {
+          "name": "With close button",
+          "code": "<Modal isOpen={open} onClose={close} showCloseButton labelledBy=\"title\">\n  <Modal.Head><h2 id=\"title\">Confirm</h2></Modal.Head>\n  <Modal.Body>Are you sure?</Modal.Body>\n</Modal>"
+        }
+      ],
+      "related": [
+        "Notice"
+      ]
+    },
+    "Notice": {
+      "props": {
+        "inline": {
+          "type": "boolean",
+          "required": false,
+          "description": "Inline layout: icon/title on left, content center, actions right"
+        },
+        "elevated": {
+          "type": "boolean",
+          "required": false,
+          "description": "Add box shadow"
+        },
+        "interactive": {
+          "type": "boolean",
+          "required": false,
+          "description": "Enable hover/focus visual states. If combined with onClick,\nadds role=\"button\" and keyboard handling (Enter/Space)."
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false,
+          "description": "Disable interactions"
+        },
+        "stripe": {
+          "type": "boolean",
+          "required": false,
+          "description": "Show left accent stripe in theme color"
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false
+        },
+        "as": {
+          "type": "\"section\" | \"div\"",
+          "required": false
+        },
+        "theme": {
+          "type": "\"info\" | \"success\" | \"warning\" | \"danger\"",
+          "required": false,
+          "description": "Visual intent"
+        },
+        "announce": {
+          "type": "\"off\" | \"assertive\" | \"polite\"",
+          "required": false,
+          "description": "Controls screen-reader announcement behavior.\n- off: no live region\n- polite: role=status\n- assertive: role=alert"
+        },
+        "ariaLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible name when there is no visible title in Notice.Head.\nOnly use when Notice.Head has no title prop - if both exist, the visible title takes precedence."
+        },
+        "dismissible": {
+          "type": "boolean",
+          "required": false,
+          "description": "Renders a dismiss button"
+        },
+        "onDismiss": {
+          "type": "() => void",
+          "required": false
+        },
+        "exitAnimation": {
+          "type": "\"none\" | \"collapse\" | \"fade\"",
+          "required": false,
+          "description": "Exit animation to play when dismissed.\n- none: onDismiss called immediately (default)\n- collapse: fade + height collapse (for inline/block notices)\n- fade: fade out with slight scale (for overlays/toasts)"
+        },
+        "focusable": {
+          "type": "boolean",
+          "required": false,
+          "description": "If true, the notice container will be focusable (tabIndex=-1).\nUseful for programmatic focus management in toast/notification systems.\nNot for keyboard navigation - use interactive + onClick for clickable notices."
+        },
+        "onClick": {
+          "type": "MouseEventHandler<HTMLElement>",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": false
+        },
+        "id": {
+          "type": "string",
+          "required": false
+        },
+        "role": {
+          "type": "AriaRole",
+          "required": false
+        },
+        "rel": {
+          "type": "string",
+          "required": false
+        },
+        "onChange": {
+          "type": "FormEventHandler<HTMLElement> | FormEventHandler<HTMLDivElement>",
+          "required": false
+        }
+      },
+      "cssTokens": [
+        "--tui-notice-bg",
+        "--tui-notice-border",
+        "--tui-notice-stripe",
+        "--tui-notice-fg",
+        "--tui-notice-radius",
+        "--tui-notice-padding",
+        "--tui-notice-foot-basis"
+      ],
+      "story": {
+        "title": "Components/Notice",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": [
+        "Head",
+        "Body",
+        "Foot"
+      ],
+      "description": "Contextual message component with semantic themes and optional dismissal",
+      "gotchas": [
+        {
+          "note": "Use announce='polite' for status messages, 'assertive' for alerts"
+        },
+        {
+          "note": "stripe prop adds left accent bar in theme color"
+        },
+        {
+          "note": "Exit animations via ref: noticeRef.current.exit('collapse')"
+        },
+        {
+          "note": "Has default export (unlike other components) - should be removed"
+        },
+        {
+          "note": "Uses container queries for responsive inline layout"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Info",
+          "code": "<Notice theme=\"info\" stripe>\n  <Notice.Head icon={<Icon name=\"system/help\" />} title=\"Did you know?\" />\n  <Notice.Body>Here's some helpful information.</Notice.Body>\n</Notice>"
+        },
+        {
+          "name": "Dismissible warning",
+          "code": "<Notice theme=\"warning\" dismissible onDismiss={() => setShow(false)}>\n  <Notice.Body>This action cannot be undone.</Notice.Body>\n</Notice>"
+        },
+        {
+          "name": "Alert",
+          "code": "<Notice theme=\"danger\" announce=\"assertive\">\n  <Notice.Head title=\"Error\" />\n  <Notice.Body>Something went wrong.</Notice.Body>\n</Notice>"
+        }
+      ],
+      "related": [
+        "Card",
+        "Modal"
+      ]
+    },
+    "OverlapStack": {
+      "props": {
+        "overlap": {
+          "type": "string | number",
+          "required": false,
+          "description": "Overlap amount in pixels (negative) or CSS length string."
+        },
+        "max": {
+          "type": "number",
+          "required": false,
+          "description": "Maximum visible items. Overflow becomes +N badge."
+        },
+        "frame": {
+          "type": "boolean",
+          "required": false,
+          "description": "Enable clipping frame on item wrappers.\nAdds border-radius and overflow:hidden. Customise via tokens:\n- `--tui-overlap-stack-item-radius` (default: full)\n- `--tui-overlap-stack-border-width` (default: 0)\n- `--tui-overlap-stack-border-color` (default: bg-surface)"
+        },
+        "renderOverflow": {
+          "type": "(count: number) => ReactNode",
+          "required": false,
+          "description": "Custom renderer for overflow badge. Receives count of hidden items."
+        },
+        "overflowLabel": {
+          "type": "(count: number) => string",
+          "required": false,
+          "defaultValue": "(count: number) => `${count} more`",
+          "description": "Accessible label for the overflow badge. For i18n support.\nFunction receives count and returns label string."
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": true,
+          "description": "Children to stack"
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional class name"
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles"
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Components/OverlapStack",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Pager": {
+      "props": {
+        "currentPage": {
+          "type": "number",
+          "required": true,
+          "description": "Current page (1-indexed)"
+        },
+        "totalPages": {
+          "type": "number",
+          "required": true,
+          "description": "Total number of pages"
+        },
+        "pageSize": {
+          "type": "number",
+          "required": false,
+          "description": "Current page size (for page size selector)"
+        },
+        "pageSizeOptions": {
+          "type": "number[]",
+          "required": false,
+          "description": "Available page size options"
+        },
+        "mode": {
+          "type": "\"simple\" | \"ends\" | \"full\" | \"smart\"",
+          "required": false,
+          "defaultValue": "smart",
+          "description": "Pagination mode: 'simple' (prev/next only), 'ends', 'full', 'smart'"
+        },
+        "maxNumbers": {
+          "type": "number",
+          "required": false,
+          "defaultValue": "7",
+          "description": "Max page number buttons in smart mode"
+        },
+        "navStyle": {
+          "type": "\"text\" | \"icon\"",
+          "required": false,
+          "defaultValue": "text",
+          "description": "Style for prev/next: 'text' shows labels, 'icon' shows chevrons"
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional class name"
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/Pager",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Progress": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom content to render inside the progress indicator.\n- Line mode with `inside`: Replaces default content inside the bar\n- Circle mode with `inside`: Replaces centered content\n- Segmented mode: Replaces the segment labels area below the bar"
+        },
+        "size": {
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "'md'",
+          "description": "Size of the progress bar, affecting height and font size.\n- `'xs'`: 12px font, thinnest bar (for dense step indicators)\n- `'sm'`: 14px font, thinner bar\n- `'md'`: 16px font, standard bar (default)\n- `'lg'`: 20px font, thicker bar"
+        },
+        "max": {
+          "type": "number",
+          "required": false,
+          "defaultValue": "100",
+          "description": "Maximum value for the progress calculation.\nProgress percentage = (value / max) × 100"
+        },
+        "showLabels": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to display labels.\nWhen false, hides all label content regardless of other props."
+        },
+        "labelledBy": {
+          "type": "string",
+          "required": false,
+          "description": "ARIA: ID of an element that labels this progress bar.\nTakes precedence over `ariaLabel` and `defaultLabel`."
+        },
+        "ariaLabel": {
+          "type": "string",
+          "required": false,
+          "description": "ARIA: Accessible name for the progress bar.\nUse when no visible label exists. Takes precedence over `defaultLabel`."
+        },
+        "defaultLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Fallback accessible name, rendered as visually-hidden text.\nOnly used if neither `labelledBy` nor `ariaLabel` is provided."
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS class names to apply to the root element."
+        },
+        "mode": {
+          "type": "\"line\" | \"circle\"",
+          "required": false,
+          "defaultValue": "'line'\n'line'",
+          "description": "Display mode. Segmented progress only supports line mode.\nDisplay mode of the progress indicator.\n- `'line'`: Horizontal bar (default)\n- `'circle'`: Circular/ring indicator"
+        },
+        "segments": {
+          "type": "ProgressSegment[]",
+          "required": false,
+          "description": "Segments to display, ordered front-to-back (z1, z2, z3...).\nMaximum 5 segments have default colors; beyond that, override via CSS.\nNot available in standard mode. Use segmented mode instead."
+        },
+        "value": {
+          "type": "number",
+          "required": false,
+          "defaultValue": "0",
+          "description": "Not available in segmented mode.\nCurrent progress value (0–100, or use with `max` prop)."
+        },
+        "indeterminate": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Not supported in segmented mode.\nWhen true, shows an animated indeterminate state.\nUse for operations where progress percentage is unknown.\nIgnores `value` when enabled."
+        },
+        "labelPosition": {
+          "type": "\"above\" | \"inline\" | \"below\" | \"inside\"",
+          "required": false,
+          "defaultValue": "'inline'",
+          "description": "Not available in segmented mode. Labels appear below the bar.\nWhere to display the labels relative to the progress bar.\n- `'above'`: Labels in a row above the bar\n- `'inline'`: Labels beside the bar horizontally (default)\n- `'below'`: Labels in a row below the bar\n- `'inside'`: Label content inside/overlapping the bar (or centered in circle)\n\nWhen both `labelStart` and `labelEnd` are provided with `above`, `inline`,\nor `below`, they appear on opposite sides (space-between)."
+        },
+        "labelStart": {
+          "type": "ReactNode",
+          "required": false,
+          "description": "Not available in segmented mode.\nLabel content for the start (left) position.\nUse with `labelPosition` to control placement.\n@example labelStart=\"33% Complete\""
+        },
+        "labelEnd": {
+          "type": "ReactNode",
+          "required": false,
+          "description": "Not available in segmented mode.\nLabel content for the end (right) position.\nUse with `labelPosition` to control placement.\n@example labelEnd=\"3/9 Steps\""
+        },
+        "variant": {
+          "type": "\"ring\" | \"solid\"",
+          "required": false,
+          "defaultValue": "'ring'",
+          "description": "Visual variant for circle mode.\n- `'ring'`: Hollow centre (default) — shows progress as a ring/donut\n- `'solid'`: Filled centre — shows as a solid filled circle\n\nOnly applies when `mode=\"circle\"`. Ignored in line mode."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/Progress",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Rating": {
+      "props": {
+        "value": {
+          "type": "number",
+          "required": false,
+          "description": "Controlled value (1..max). Use with onChange"
+        },
+        "max": {
+          "type": "number",
+          "required": false,
+          "defaultValue": "5",
+          "description": "Maximum icons shown"
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false,
+          "description": "Disable interaction (keeps semantics)"
+        },
+        "readOnly": {
+          "type": "boolean",
+          "required": false,
+          "description": "Presentational readOnly (no form semantics)"
+        },
+        "name": {
+          "type": "string",
+          "required": false,
+          "description": "Name for the radio group (if you care about form posts)"
+        },
+        "size": {
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "lg",
+          "description": "Size maps to icon + spacing"
+        },
+        "theme": {
+          "type": "\"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\"",
+          "required": false,
+          "defaultValue": "secondary",
+          "description": "Theme feeds foreground color tokens"
+        },
+        "onChange": {
+          "type": "(value: number) => void",
+          "required": false,
+          "description": "Called on change (controlled or uncontrolled)"
+        },
+        "allowClear": {
+          "type": "boolean",
+          "required": false,
+          "description": "Allow clicking the current selection to clear back to 0"
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "gap": {
+          "type": "string",
+          "required": false,
+          "description": "Gap override (e.g. '0.25rem') – otherwise uses density utilities"
+        },
+        "ariaLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the rating group. Defaults to \"Rating: X of Y\""
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/Rating",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "SegmentedControl": {
+      "props": {
+        "value": {
+          "type": "SegmentedControlValue",
+          "required": false,
+          "description": "Controlled selected value"
+        },
+        "onValueChange": {
+          "type": "(value: SegmentedControlValue) => void",
+          "required": false,
+          "description": "Callback when selection changes"
+        },
+        "variant": {
+          "type": "\"pill\" | \"outline\" | \"underline\"",
+          "required": false,
+          "description": "Visual style"
+        },
+        "size": {
+          "type": "\"sm\" | \"md\"",
+          "required": false,
+          "description": "Size scale"
+        },
+        "orientation": {
+          "type": "\"horizontal\" | \"vertical\"",
+          "required": false,
+          "description": "Layout direction"
+        },
+        "loop": {
+          "type": "boolean",
+          "required": false,
+          "description": "Whether arrow keys wrap around"
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false,
+          "description": "Disable all items"
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional classes"
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Components/SegmentedControl",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Sidebar": {
+      "props": {
+        "position": {
+          "type": "\"left\" | \"right\"",
+          "required": false,
+          "defaultValue": "'left'",
+          "description": "Sidebar position. Affects border placement and drawer slide direction."
+        },
+        "drawer": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Enable drawer mode (mobile overlay).\nWhen true, sidebar renders via portal with backdrop and focus trap."
+        },
+        "isOpen": {
+          "type": "boolean",
+          "required": false,
+          "description": "Drawer open state. Required when `drawer={true}`."
+        },
+        "onClose": {
+          "type": "() => void",
+          "required": false,
+          "description": "Callback to close the drawer.\nCalled when ESC is pressed or backdrop is clicked."
+        },
+        "ariaLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the aside landmark.\nTypically omit this if using `ariaLabel` on `Sidebar.Nav` instead."
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": true,
+          "description": "Sidebar content (Header, Nav, etc.)."
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS class names."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Components/Sidebar",
+        "tags": [
+          "autodocs",
+          "stable",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "StepIndicator": {
+      "props": {
+        "value": {
+          "type": "number",
+          "required": false,
+          "defaultValue": "0",
+          "description": "Progress value (0-100).\n\nStatus is inferred from value by default:\n- `value = 0` → not-started\n- `0 < value < 100` → in-progress\n- `value >= 100` → complete\n\nUse the `status` prop to override inference (e.g., for locked steps)."
+        },
+        "status": {
+          "type": "\"not-started\" | \"in-progress\" | \"complete\" | \"locked\"",
+          "required": false,
+          "description": "Override the inferred status.\n\nBy default, status is derived from `value`. Set this explicitly for:\n- `'locked'` — Shows lock icon regardless of value\n- Force a specific state when value doesn't reflect actual status"
+        },
+        "icon": {
+          "type": "IconName",
+          "required": false,
+          "description": "Custom icon to display instead of the default status icons.\n\n- Shows for `not-started` and `in-progress` states\n- `complete` always shows checkmark (completion is universal)\n- `locked` always shows lock (access restriction is universal)\n\nUse for content-type indicators like quizzes, readings, videos.\n@example icon=\"lms/question-mark\""
+        },
+        "size": {
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "'sm'",
+          "description": "Size of the indicator.\n- `'xs'`: 16px circle\n- `'sm'`: 24px circle (default)\n- `'md'`: 32px circle\n- `'lg'`: 40px circle"
+        },
+        "showValue": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Show percentage text in center (only visible for in-progress status)."
+        },
+        "label": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the indicator.\nUsed as aria-label when the indicator conveys unique information.\nIf omitted, defaults to \"Step status: {status}\"."
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS class names."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/StepIndicator",
+        "tags": [
+          "autodocs",
+          "stable",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "StepList": {
+      "props": {
+        "ariaLabel": {
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the navigation landmark.\nUse either `ariaLabel` or `ariaLabelledBy`, not both."
+        },
+        "ariaLabelledBy": {
+          "type": "string",
+          "required": false,
+          "description": "ID of a visible heading that labels the navigation.\nUse either `ariaLabel` or `ariaLabelledBy`, not both."
+        },
+        "ariaCurrent": {
+          "type": "\"step\" | \"page\"",
+          "required": false,
+          "defaultValue": "'step'",
+          "description": "What `aria-current` value to use for the current item.\n- `'step'`: For step-by-step progressions (default)\n- `'page'`: For page navigation"
+        },
+        "current": {
+          "type": "string",
+          "required": false,
+          "description": "Value of the currently active step.\nThe matching StepList.Item will receive `aria-current` and current styling."
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": true,
+          "description": "StepList.Item children."
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS class names."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Components/StepList",
+        "tags": [
+          "autodocs",
+          "stable",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Tabs": {
+      "props": {
+        "variant": {
+          "type": "\"pill\" | \"underline\" | \"outline\"",
+          "required": false,
+          "description": "Visual style"
+        },
+        "activationMode": {
+          "type": "\"auto\" | \"manual\"",
+          "required": false,
+          "description": "Auto: select on focus. Manual: arrow keys move focus only, Enter/Space selects."
+        },
+        "value": {
+          "type": "string",
+          "required": false,
+          "description": "Controlled active tab"
+        },
+        "onValueChange": {
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback when active tab changes"
+        },
+        "orientation": {
+          "type": "\"horizontal\" | \"vertical\"",
+          "required": false,
+          "description": "Affects arrow key mapping and aria-orientation"
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional classes"
+        }
+      },
+      "cssTokens": [
+        "--tui-tabs-gap",
+        "--tui-tabs-list-bg",
+        "--tui-tabs-list-padding",
+        "--tui-tabs-list-radius",
+        "--tui-tabs-tab-padding",
+        "--tui-tabs-tab-radius",
+        "--tui-tabs-tab-bg",
+        "--tui-tabs-tab-fg",
+        "--tui-tabs-tab-bg-active",
+        "--tui-tabs-tab-fg-active",
+        "--tui-tabs-tab-bg-hover",
+        "--tui-tabs-tab-border",
+        "--tui-tabs-indicator",
+        "--tui-tabs-indicator-size"
+      ],
+      "story": {
+        "title": "Components/Tabs",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": [
+        "List",
+        "Tab",
+        "Panel"
+      ],
+      "description": "Accessible tabbed interface with keyboard navigation and multiple visual variants",
+      "gotchas": [
+        {
+          "note": "Tabs.List requires aria-label or aria-labelledby for accessibility"
+        },
+        {
+          "note": "Tab value must match corresponding Panel value"
+        },
+        {
+          "note": "Use activationMode='manual' for tabs that trigger expensive operations"
+        },
+        {
+          "note": "Supports controlled (value prop) and uncontrolled (defaultValue) modes"
+        },
+        {
+          "note": "Keyboard: Arrow keys move focus, Enter/Space select in manual mode"
+        }
+      ],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "<Tabs defaultValue=\"tab1\">\n  <Tabs.List aria-label=\"Example tabs\">\n    <Tabs.Tab value=\"tab1\">First</Tabs.Tab>\n    <Tabs.Tab value=\"tab2\">Second</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"tab1\">First content</Tabs.Panel>\n  <Tabs.Panel value=\"tab2\">Second content</Tabs.Panel>\n</Tabs>"
+        },
+        {
+          "name": "Pill variant",
+          "code": "<Tabs variant=\"pill\" defaultValue=\"a\">\n  <Tabs.List aria-label=\"Options\">\n    <Tabs.Tab value=\"a\">Option A</Tabs.Tab>\n    <Tabs.Tab value=\"b\">Option B</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"a\">Content A</Tabs.Panel>\n  <Tabs.Panel value=\"b\">Content B</Tabs.Panel>\n</Tabs>"
+        },
+        {
+          "name": "With icons",
+          "code": "<Tabs.Tab value=\"settings\" icon=\"system/settings\">Settings</Tabs.Tab>"
+        }
+      ],
+      "related": [
+        "SegmentedControl"
+      ]
+    },
+    "Toolbar": {
+      "props": {
+        "orientation": {
+          "type": "\"horizontal\" | \"vertical\"",
+          "required": false,
+          "description": "Toolbar orientation - affects arrow key direction"
+        },
+        "loop": {
+          "type": "boolean",
+          "required": false,
+          "description": "Whether arrow keys wrap from end to start (does not affect Home/End)"
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles for layout integration"
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Components/Toolbar",
+        "tags": [
+          "autodocs",
+          "a11y"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Tooltip": {
+      "props": {
+        "open": {
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state."
+        },
+        "defaultOpen": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Default open state for uncontrolled usage."
+        },
+        "delayDuration": {
+          "type": "number",
+          "required": false,
+          "description": "Override provider's delay for this tooltip."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/Tooltip",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    }
+  },
+  "utilities": {
+    "layout": [
+      "tui-grid",
+      "tui-grid--auto",
+      "tui-grid--cols-{1-12}",
+      "tui-flex",
+      "tui-inline-flex",
+      "tui-stack",
+      "tui-col-span-{1-12}",
+      "tui-col-span-full",
+      "tui-row-span-{1-12}",
+      "tui-row-span-full",
+      "tui-container",
+      "tui-container--size"
+    ],
+    "flexModifiers": [
+      "is-wrap",
+      "is-nowrap"
+    ],
+    "alignment": [
+      "is-align-stretch",
+      "is-align-start",
+      "is-align-center",
+      "is-align-end",
+      "is-justify-start",
+      "is-justify-center",
+      "is-justify-end",
+      "is-justify-between",
+      "is-justify-around",
+      "is-justify-evenly",
+      "is-align-self-start",
+      "is-align-self-center",
+      "is-align-self-end",
+      "is-align-self-stretch",
+      "is-place-start",
+      "is-place-center",
+      "is-place-end"
+    ],
+    "density": [
+      "is-density-none",
+      "is-density-{xxs|xs|sm|md|lg|xl|xxl}",
+      "is-density-inline-none",
+      "is-density-inline-{xxs|xs|sm|md|lg|xl|xxl}",
+      "is-density-block-none",
+      "is-density-block-{xxs|xs|sm|md|lg|xl|xxl}"
+    ],
+    "spacing": [
+      "tui-margin-none",
+      "tui-margin-auto",
+      "tui-margin-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-margin-block-none",
+      "tui-margin-block-auto",
+      "tui-margin-block-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-margin-block-start-none",
+      "tui-margin-block-start-auto",
+      "tui-margin-block-start-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-margin-block-end-none",
+      "tui-margin-block-end-auto",
+      "tui-margin-block-end-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-margin-inline-none",
+      "tui-margin-inline-auto",
+      "tui-margin-inline-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-margin-inline-start-none",
+      "tui-margin-inline-start-auto",
+      "tui-margin-inline-start-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-margin-inline-end-none",
+      "tui-margin-inline-end-auto",
+      "tui-margin-inline-end-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-padding-none",
+      "tui-padding-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-padding-block-none",
+      "tui-padding-block-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-padding-block-start-none",
+      "tui-padding-block-start-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-padding-block-end-none",
+      "tui-padding-block-end-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-padding-inline-none",
+      "tui-padding-inline-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-padding-inline-start-none",
+      "tui-padding-inline-start-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-padding-inline-end-none",
+      "tui-padding-inline-end-{xxs|xs|sm|md|lg|xl|xxl}"
+    ],
+    "typography": [
+      "tui-text-{xxs|xs|sm|md|lg|xl|xxl}",
+      "tui-text-bold",
+      "tui-text-normal",
+      "tui-text-primary",
+      "tui-text-secondary",
+      "tui-text-info",
+      "tui-text-warning",
+      "tui-text-danger",
+      "tui-text-success",
+      "tui-text-white",
+      "tui-text-contrast-high",
+      "tui-text-contrast-low"
+    ],
+    "borders": [
+      "tui-border",
+      "tui-border-0",
+      "tui-border-t",
+      "tui-border-b",
+      "tui-border-l",
+      "tui-border-r",
+      "tui-border-primary",
+      "tui-border-secondary",
+      "tui-border-info",
+      "tui-border-warning",
+      "tui-border-danger",
+      "tui-border-success",
+      "tui-border-contrast-high",
+      "tui-border-contrast-low",
+      "tui-rounded-none",
+      "tui-rounded-xs",
+      "tui-rounded-sm",
+      "tui-rounded-md",
+      "tui-rounded-lg",
+      "tui-rounded-xl",
+      "tui-rounded-full"
+    ],
+    "visibility": [
+      "tui-visually-hidden",
+      "tui-visually-hidden--focusable",
+      "tui-hidden"
+    ],
+    "position": [
+      "tui-position-static",
+      "tui-position-relative",
+      "tui-position-absolute",
+      "tui-stretched-link-container",
+      "tui-stretched-link"
+    ],
+    "elevation": [
+      "is-layer-surface",
+      "is-layer-elevated",
+      "is-layer-overlay",
+      "is-layer-modal",
+      "is-layer-top"
+    ]
+  },
+  "icons": {
+    "sets": {
+      "cred": 12,
+      "lms": 7,
+      "player": 24,
+      "reaction": 36,
+      "system": 74
+    },
+    "total": 153,
+    "manifest": "./icons/manifest.json"
+  }
+}