@agent-ui-kit/web-components 0.0.5 → 0.0.7

package/dist/api.json

@@ -1,7 +1,7 @@
 {
   "package": "@agent-ui-kit/web-components",
-  "version": "0.0.5",
-  "generated": "2026-03-21T01:58:54.648Z",
+  "version": "0.0.7",
+  "generated": "2026-03-21T16:06:31.470Z",
   "description": "Complete web component library for agent-powered interfaces. Framework-agnostic, light DOM, CSS-first.",
   "css": "https://unpkg.com/@agent-ui-kit/web-components/dist/agent-ui.css",
   "register": "https://unpkg.com/@agent-ui-kit/web-components/dist/register.js",
@@ -48,6 +48,73 @@
           "any"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-accordion-item-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Bottom border color separating accordion items."
+        },
+        {
+          "name": "--aui-accordion-item-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between chevron and header text."
+        },
+        {
+          "name": "--aui-accordion-item-padding-block",
+          "default": "var(--aui-pad-control-block)",
+          "description": "Vertical padding of header and content."
+        },
+        {
+          "name": "--aui-accordion-item-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Horizontal padding of header and content."
+        },
+        {
+          "name": "--aui-accordion-item-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for the header text."
+        },
+        {
+          "name": "--aui-accordion-item-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for the header text."
+        },
+        {
+          "name": "--aui-accordion-item-font-weight",
+          "default": "var(--aui-font-weight-semibold)",
+          "description": "Font weight for the header text."
+        },
+        {
+          "name": "--aui-accordion-item-line-height",
+          "default": "var(--aui-control-line-height)",
+          "description": "Line height for the header text."
+        },
+        {
+          "name": "--aui-accordion-item-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color of the header."
+        },
+        {
+          "name": "--aui-accordion-item-color-hover",
+          "default": "var(--aui-ink-strong)",
+          "description": "Header text color on hover."
+        },
+        {
+          "name": "--aui-accordion-item-background-hover",
+          "default": "var(--aui-fill-hover, var(--aui-action-hover))",
+          "description": "Header background on hover."
+        },
+        {
+          "name": "--aui-accordion-item-chevron-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of the expand/collapse chevron icon."
+        },
+        {
+          "name": "--aui-accordion-item-color-disabled",
+          "default": "var(--aui-ink-disabled, var(--aui-ink-muted))",
+          "description": "Header text color when disabled."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-accordion-item>\n  <span data-trigger>Section Title</span>\n  <p>Collapsible content here.</p>\n</aui-accordion-item>\n",
@@ -92,6 +159,13 @@
           "aui-accordion-item"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-accordion-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the accordion container top border and item dividers."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-accordion>\n  <aui-accordion-item>\n    <span data-trigger>Section 1</span>\n    <p>Content 1</p>\n  </aui-accordion-item>\n  <aui-accordion-item>\n    <span data-trigger>Section 2</span>\n    <p>Content 2</p>\n  </aui-accordion-item>\n</aui-accordion>\n",
@@ -161,6 +235,58 @@
           "any"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-agent-activity-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color of the activity indicator."
+        },
+        {
+          "name": "--aui-agent-activity-font-size",
+          "default": "var(--aui-font-size-sm, 0.8125rem)",
+          "description": "Font size of the activity label."
+        },
+        {
+          "name": "--aui-agent-activity-gap",
+          "default": "var(--aui-space)",
+          "description": "Gap between status row and content area."
+        },
+        {
+          "name": "--aui-agent-activity-padding-block",
+          "default": "var(--aui-space)",
+          "description": "Block padding of the activity container."
+        },
+        {
+          "name": "--aui-agent-activity-padding-inline",
+          "default": "var(--aui-agent-bubble-pad-inline, 0.875rem)",
+          "description": "Inline padding of the activity container."
+        },
+        {
+          "name": "--aui-agent-activity-row-gap",
+          "default": "calc(var(--aui-space) * 1.5)",
+          "description": "Gap between items in the status row (arrow, label, dots, timer)."
+        },
+        {
+          "name": "--aui-agent-activity-content-padding-inline-start",
+          "default": "calc(var(--aui-space) * 3)",
+          "description": "Left indent of the expandable content area."
+        },
+        {
+          "name": "--aui-agent-activity-content-font-family",
+          "default": "var(--aui-font-mono, monospace)",
+          "description": "Font family for the trace content area."
+        },
+        {
+          "name": "--aui-agent-activity-content-font-size",
+          "default": "var(--aui-font-size-sm, 0.8125rem)",
+          "description": "Font size for the trace content area."
+        },
+        {
+          "name": "--aui-agent-activity-content-max-height",
+          "default": "var(--aui-agent-activity-max-height, 20rem)",
+          "description": "Maximum height of the expandable content area before scrolling."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-agent-activity type=\"typing\" active></aui-agent-activity>\n",
@@ -221,6 +347,18 @@
           "aui-agent-thread"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-agent-feed-gap",
+          "default": "var(--aui-pad-gap-container)",
+          "description": "Gap between thread groups in the feed."
+        },
+        {
+          "name": "--aui-agent-feed-padding",
+          "default": "var(--aui-pad-container, var(--aui-space))",
+          "description": "Padding around the feed container."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-agent-feed auto-scroll scrollable style=\"height: 24rem;\">\n  <aui-agent-thread role=\"user\" sender=\"You\">\n    <aui-agent-message role=\"user\">\n      <aui-agent-text format=\"plain\">Can you help me write a Python script that reads a CSV file and groups rows by the \"department\" column?</aui-agent-text>\n    </aui-agent-message>\n  </aui-agent-thread>\n  <aui-agent-thread role=\"assistant\" sender=\"Claude\">\n    <aui-avatar>C</aui-avatar>\n    <aui-agent-message role=\"assistant\">\n      <aui-agent-text>Sure! Here's a script using `pandas` to group CSV rows by department:\n\n```python\nimport pandas as pd\n\ndf = pd.read_csv(\"data.csv\")\ngrouped = df.groupby(\"department\")\n\nfor name, group in grouped:\n    print(f\"\\n--- {name} ---\")\n    print(group.to_string(index=False))\n```\n\nThis reads `data.csv`, groups by the **department** column, and prints each group. Want me to add export to separate files?</aui-agent-text>\n    </aui-agent-message>\n  </aui-agent-thread>\n</aui-agent-feed>\n",
@@ -305,6 +443,128 @@
           "any"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-agent-message-border-radius",
+          "default": "var(--aui-agent-bubble-radius, var(--aui-radius))",
+          "description": "Border radius for message bubbles."
+        },
+        {
+          "name": "--aui-agent-message-border-radius-tight",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Tighter radius for grouped bubble corners near the avatar."
+        },
+        {
+          "name": "--aui-agent-message-background",
+          "default": "var(--aui-agent-bubble-assistant, transparent)",
+          "description": "Background of assistant message bubbles."
+        },
+        {
+          "name": "--aui-agent-message-color",
+          "default": "var(--aui-agent-bubble-assistant-ink, var(--aui-ink))",
+          "description": "Text color of assistant message bubbles."
+        },
+        {
+          "name": "--aui-agent-message-border",
+          "default": "var(--aui-agent-bubble-assistant-border, var(--aui-border-muted))",
+          "description": "Border color of assistant message bubbles."
+        },
+        {
+          "name": "--aui-agent-message-gap",
+          "default": "var(--aui-space)",
+          "description": "Gap between content areas within a message bubble."
+        },
+        {
+          "name": "--aui-agent-message-user-background",
+          "default": "var(--aui-agent-bubble-user, var(--aui-accent-solid))",
+          "description": "Background of user message bubbles."
+        },
+        {
+          "name": "--aui-agent-message-user-color",
+          "default": "var(--aui-agent-bubble-user-ink, white)",
+          "description": "Text color of user message bubbles."
+        },
+        {
+          "name": "--aui-agent-message-user-border",
+          "default": "var(--aui-agent-bubble-user-border, transparent)",
+          "description": "Border color of user message bubbles."
+        },
+        {
+          "name": "--aui-agent-message-streaming-opacity",
+          "default": "var(--aui-agent-streaming-opacity, 0.85)",
+          "description": "Opacity applied to streaming messages."
+        },
+        {
+          "name": "--aui-agent-message-error-border",
+          "default": "var(--aui-border-danger, oklch(0.6 0.2 25))",
+          "description": "Border color for error-status messages."
+        },
+        {
+          "name": "--aui-agent-message-actions-gap",
+          "default": "var(--aui-space)",
+          "description": "Gap between action buttons in the toolbar."
+        },
+        {
+          "name": "--aui-agent-message-actions-padding-inline",
+          "default": "var(--aui-agent-bubble-pad-inline)",
+          "description": "Inline padding of the actions toolbar."
+        },
+        {
+          "name": "--aui-agent-message-action-font-size",
+          "default": "var(--aui-font-size-sm, 0.8125rem)",
+          "description": "Font size of action buttons."
+        },
+        {
+          "name": "--aui-agent-message-action-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color of action buttons."
+        },
+        {
+          "name": "--aui-agent-message-action-padding",
+          "default": "calc(var(--aui-space) * 0.5) calc(var(--aui-space) * 1)",
+          "description": "Padding of individual action buttons."
+        },
+        {
+          "name": "--aui-agent-message-action-gap",
+          "default": "calc(var(--aui-space) * 0.5)",
+          "description": "Gap between icon and label within an action button."
+        },
+        {
+          "name": "--aui-agent-message-action-background-hover",
+          "default": "var(--aui-fill-hover, var(--aui-action-hover))",
+          "description": "Background of action buttons on hover."
+        },
+        {
+          "name": "--aui-agent-message-action-color-hover",
+          "default": "var(--aui-ink)",
+          "description": "Text color of action buttons on hover."
+        },
+        {
+          "name": "--aui-agent-message-popover-padding",
+          "default": "calc(var(--aui-space) * 0.5)",
+          "description": "Padding inside the popover actions toolbar."
+        },
+        {
+          "name": "--aui-agent-message-popover-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background of the popover actions toolbar."
+        },
+        {
+          "name": "--aui-agent-message-popover-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the popover actions toolbar."
+        },
+        {
+          "name": "--aui-agent-message-popover-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the popover actions toolbar."
+        },
+        {
+          "name": "--aui-agent-message-popover-shadow",
+          "default": "var(--aui-shadow-lg, 0 4px 16px oklch(0% 0 0 / 0.12))",
+          "description": "Box shadow of the popover actions toolbar."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-agent-message role=\"assistant\" status=\"sent\" message-id=\"msg-001\">\n  <aui-agent-text>Based on your project structure, I recommend using a **monorepo** with the following layout:\n\n- `packages/core` — shared utilities and types\n- `packages/ui` — component library\n- `apps/web` — main application\n\nThis keeps dependencies clean and enables independent versioning for each package.</aui-agent-text>\n</aui-agent-message>\n",
@@ -414,6 +674,83 @@
           "any"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-agent-prompt-background",
+          "default": "var(--aui-control)",
+          "description": "Background of the prompt container."
+        },
+        {
+          "name": "--aui-agent-prompt-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the prompt container."
+        },
+        {
+          "name": "--aui-agent-prompt-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the prompt container."
+        },
+        {
+          "name": "--aui-agent-prompt-border-hover",
+          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
+          "description": "Border color on hover."
+        },
+        {
+          "name": "--aui-agent-prompt-focus-color",
+          "default": "var(--aui-focus)",
+          "description": "Focus ring color when textarea is focused."
+        },
+        {
+          "name": "--aui-agent-prompt-surface-padding-block",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Block padding of the textarea surface."
+        },
+        {
+          "name": "--aui-agent-prompt-surface-padding-inline",
+          "default": "calc(var(--aui-space) * 3)",
+          "description": "Inline padding of the textarea surface."
+        },
+        {
+          "name": "--aui-agent-prompt-toolbar-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the bottom toolbar separator."
+        },
+        {
+          "name": "--aui-agent-prompt-toolbar-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Gap between items in the toolbar."
+        },
+        {
+          "name": "--aui-agent-prompt-toolbar-padding",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Padding of the toolbar area."
+        },
+        {
+          "name": "--aui-agent-prompt-ghost-background-hover",
+          "default": "var(--aui-fill-hover)",
+          "description": "Hover background in ghost variant."
+        },
+        {
+          "name": "--aui-agent-prompt-outline-border",
+          "default": "var(--aui-stroke)",
+          "description": "Border color in outline variant."
+        },
+        {
+          "name": "--aui-agent-prompt-outline-background-hover",
+          "default": "var(--aui-fill-hover)",
+          "description": "Hover background in outline variant."
+        },
+        {
+          "name": "--aui-agent-prompt-inline-surface-padding-block",
+          "default": "calc(var(--aui-space) * 1.5)",
+          "description": "Block padding of the textarea in inline mode."
+        },
+        {
+          "name": "--aui-agent-prompt-inline-submit-margin",
+          "default": "calc(var(--aui-space) * 1.5)",
+          "description": "Inline-end margin for the submit button in inline mode."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-agent-prompt>\n  <aui-textarea placeholder=\"Describe what you need help with...\"></aui-textarea>\n</aui-agent-prompt>\n",
@@ -466,6 +803,93 @@
         ],
         "children": []
       },
+      "tokens": [
+        {
+          "name": "--aui-agent-seeds-padding-block",
+          "default": "var(--aui-agent-seed-pad-block, var(--aui-space))",
+          "description": "Block padding of the seeds container."
+        },
+        {
+          "name": "--aui-agent-seeds-padding-inline",
+          "default": "var(--aui-agent-seed-pad-inline, 0.875rem)",
+          "description": "Inline padding of the seeds container."
+        },
+        {
+          "name": "--aui-agent-seeds-gap",
+          "default": "var(--aui-agent-seed-gap, var(--aui-space))",
+          "description": "Gap between chip rows."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-gap",
+          "default": "calc(var(--aui-space) * 0.5)",
+          "description": "Gap between icon and label within a chip."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-padding-block",
+          "default": "calc(var(--aui-space) * 0.5)",
+          "description": "Block padding of each chip."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-padding-inline",
+          "default": "calc(var(--aui-space) * 1.5)",
+          "description": "Inline padding of each chip."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for chip text."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-font-size",
+          "default": "var(--aui-font-size-sm, 0.8125rem)",
+          "description": "Font size for chip text."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-line-height",
+          "default": "var(--aui-line-height)",
+          "description": "Line height for chip text."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color of chips."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-border",
+          "default": "var(--aui-stroke, var(--aui-border-muted))",
+          "description": "Border color of chips."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of chips."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-background",
+          "default": "transparent",
+          "description": "Background of chips at rest."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-background-hover",
+          "default": "var(--aui-fill-hover, var(--aui-action-hover))",
+          "description": "Background of chips on hover."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-border-hover",
+          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
+          "description": "Border color of chips on hover."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-color-hover",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color of chips on hover."
+        },
+        {
+          "name": "--aui-agent-seeds-chip-background-active",
+          "default": "var(--aui-fill-active, var(--aui-action-active))",
+          "description": "Background of chips when active/pressed."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-agent-seeds options='[{\"value\":\"clarify\",\"label\":\"Clarify user problem\"},{\"value\":\"context\",\"label\":\"Define user context\"},{\"value\":\"deliverable\",\"label\":\"Select deliverable\"},{\"value\":\"timeline\",\"label\":\"Set timeline\"}]'>\n</aui-agent-seeds>\n",
@@ -498,6 +922,83 @@
         ],
         "children": []
       },
+      "tokens": [
+        {
+          "name": "--aui-agent-text-padding-block",
+          "default": "var(--aui-agent-bubble-pad-block, 0.625rem)",
+          "description": "Block padding of the text container."
+        },
+        {
+          "name": "--aui-agent-text-padding-inline",
+          "default": "var(--aui-agent-bubble-pad-inline, 0.875rem)",
+          "description": "Inline padding of the text container."
+        },
+        {
+          "name": "--aui-agent-text-prose-gap",
+          "default": "var(--aui-agent-prose-gap, calc(var(--aui-space) * 2))",
+          "description": "Vertical gap between prose elements (paragraphs, headings, etc.)."
+        },
+        {
+          "name": "--aui-agent-text-heading-font-weight",
+          "default": "var(--aui-font-weight-bold, 600)",
+          "description": "Font weight for headings inside rendered markdown."
+        },
+        {
+          "name": "--aui-agent-text-blockquote-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Left border color of blockquotes."
+        },
+        {
+          "name": "--aui-agent-text-blockquote-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color of blockquotes."
+        },
+        {
+          "name": "--aui-agent-text-code-font-family",
+          "default": "var(--aui-font-mono, monospace)",
+          "description": "Font family for inline code."
+        },
+        {
+          "name": "--aui-agent-text-code-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Background of inline code spans."
+        },
+        {
+          "name": "--aui-agent-text-code-border-radius",
+          "default": "calc(var(--aui-radius) * 0.5)",
+          "description": "Border radius of inline code spans."
+        },
+        {
+          "name": "--aui-agent-text-pre-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Background of code blocks."
+        },
+        {
+          "name": "--aui-agent-text-pre-border-radius",
+          "default": "calc(var(--aui-radius) * 0.5)",
+          "description": "Border radius of code blocks."
+        },
+        {
+          "name": "--aui-agent-text-pre-padding",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Padding inside code blocks."
+        },
+        {
+          "name": "--aui-agent-text-link-color",
+          "default": "var(--aui-ink-accent, var(--aui-accent-solid))",
+          "description": "Text color of links."
+        },
+        {
+          "name": "--aui-agent-text-link-color-hover",
+          "default": "var(--aui-ink-hover)",
+          "description": "Text color of links on hover."
+        },
+        {
+          "name": "--aui-agent-text-hr-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of horizontal rules."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-agent-text>## Getting Started\n\nTo install the package, run:\n\n```bash\nnpm install @agent-ui/kit\n```\n\n### Key features\n\n- **Zero dependencies** — no runtime bloat\n- **Web standards** — built on custom elements\n- **Accessible** — ARIA roles and keyboard nav built in\n\n> Note: Requires a modern browser with custom element support.\n\nSee the [documentation](https://example.com/docs) for the full API reference.</aui-agent-text>\n",
@@ -554,6 +1055,38 @@
           "any"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-agent-thread-column-gap",
+          "default": "var(--aui-agent-message-gap, calc(var(--aui-space) * 2))",
+          "description": "Gap between avatar column and message column."
+        },
+        {
+          "name": "--aui-agent-thread-max-width",
+          "default": "var(--aui-agent-bubble-max-width, 85%)",
+          "description": "Maximum width of the thread group."
+        },
+        {
+          "name": "--aui-agent-thread-context-gap",
+          "default": "var(--aui-space)",
+          "description": "Gap between items in the context area (metadata row)."
+        },
+        {
+          "name": "--aui-agent-thread-bubbles-gap",
+          "default": "var(--aui-space)",
+          "description": "Gap between consecutive message bubbles."
+        },
+        {
+          "name": "--aui-agent-thread-user-avatar-background",
+          "default": "var(--aui-agent-bubble-user)",
+          "description": "Background of the user avatar circle."
+        },
+        {
+          "name": "--aui-agent-thread-user-avatar-color",
+          "default": "var(--aui-agent-bubble-user-ink)",
+          "description": "Text/icon color of the user avatar."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-agent-thread role=\"assistant\" sender=\"Claude\">\n  <aui-avatar>C</aui-avatar>\n  <aui-agent-message role=\"assistant\">\n    <aui-agent-text>I've analyzed your codebase and found three potential performance bottlenecks in the data processing pipeline. Let me walk through each one.</aui-agent-text>\n  </aui-agent-message>\n</aui-agent-thread>\n",
@@ -592,23 +1125,38 @@
         },
         "context": "The root layout for full-page applications. Manages the relationship between sidebar width and content column flex.\n"
       },
-      "tokens": {
-        "color": [
-          "--aui-doc",
-          "--aui-ink",
-          "--aui-panel",
-          "--aui-border"
-        ],
-        "typography": [
-          "--aui-font-family"
-        ],
-        "sizing": [
-          "--aui-space",
-          "--aui-radius",
-          "--aui-pad-control-block",
-          "--aui-size"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-app-shell-background",
+          "default": "var(--aui-doc)",
+          "description": "Background color for the application shell."
+        },
+        {
+          "name": "--aui-app-shell-color",
+          "default": "var(--aui-ink)",
+          "description": "Default text color for the shell."
+        },
+        {
+          "name": "--aui-app-shell-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for the shell."
+        },
+        {
+          "name": "--aui-app-shell-panel-background",
+          "default": "var(--aui-panel)",
+          "description": "Background color for the main content panel."
+        },
+        {
+          "name": "--aui-app-shell-panel-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius for the main content panel."
+        },
+        {
+          "name": "--aui-app-shell-panel-border-color",
+          "default": "var(--aui-border)",
+          "description": "Border color for sticky header/footer inside main."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-app-shell>\n  <aui-sidebar width=\"240\" collapsible>\n    <aui-sidebar-header>\n      <aui-nav-item label=\"App\" icon=\"grid\"></aui-nav-item>\n    </aui-sidebar-header>\n    <aui-sidebar-content>\n      <aui-nav-item label=\"Home\" icon=\"home\"></aui-nav-item>\n      <aui-nav-item label=\"Settings\" icon=\"settings\"></aui-nav-item>\n    </aui-sidebar-content>\n  </aui-sidebar>\n  <aui-page>\n    <aui-page-context>\n      <aui-breadcrumb>\n        <aui-breadcrumb-item label=\"Home\"></aui-breadcrumb-item>\n      </aui-breadcrumb>\n    </aui-page-context>\n    <aui-page-main>\n      <main>Page content</main>\n    </aui-page-main>\n  </aui-page>\n</aui-app-shell>\n",
@@ -648,6 +1196,58 @@
         ],
         "children": null
       },
+      "tokens": [
+        {
+          "name": "--aui-breadcrumb-item-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Gap between separator and breadcrumb text."
+        },
+        {
+          "name": "--aui-breadcrumb-item-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for breadcrumb text."
+        },
+        {
+          "name": "--aui-breadcrumb-item-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for breadcrumb text."
+        },
+        {
+          "name": "--aui-breadcrumb-item-line-height",
+          "default": "var(--aui-control-line-height)",
+          "description": "Line height for breadcrumb text."
+        },
+        {
+          "name": "--aui-breadcrumb-item-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Default text color of breadcrumb items."
+        },
+        {
+          "name": "--aui-breadcrumb-item-separator-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of the separator character between items."
+        },
+        {
+          "name": "--aui-breadcrumb-item-link-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of breadcrumb link text."
+        },
+        {
+          "name": "--aui-breadcrumb-item-link-color-hover",
+          "default": "var(--aui-ink)",
+          "description": "Color of breadcrumb link text on hover."
+        },
+        {
+          "name": "--aui-breadcrumb-item-color-current",
+          "default": "var(--aui-ink)",
+          "description": "Text color of the current page item."
+        },
+        {
+          "name": "--aui-breadcrumb-item-font-weight-current",
+          "default": "var(--aui-font-weight-semibold)",
+          "description": "Font weight of the current page item."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-breadcrumb>\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/settings\">Settings</aui-breadcrumb-item>\n  <aui-breadcrumb-item current>Profile</aui-breadcrumb-item>\n</aui-breadcrumb>\n",
@@ -694,6 +1294,23 @@
           "aui-breadcrumb-item"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-breadcrumb-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for breadcrumb text."
+        },
+        {
+          "name": "--aui-breadcrumb-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for breadcrumb text."
+        },
+        {
+          "name": "--aui-breadcrumb-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Gap between breadcrumb items."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-breadcrumb>\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/settings\">Settings</aui-breadcrumb-item>\n  <aui-breadcrumb-item current>Profile</aui-breadcrumb-item>\n</aui-breadcrumb>\n",
@@ -1027,34 +1644,93 @@
           "description": "Native click event. Blocked when disabled or loading. Fires form submit/reset when type is set. Navigates when href is set.\n"
         }
       },
-      "tokens": {
-        "sizing": [
-          "--aui-size",
-          "--aui-font-size",
-          "--aui-font-family",
-          "--aui-icon-size"
-        ],
-        "spacing": [
-          "--aui-pad-control-block",
-          "--aui-pad-control-inline",
-          "--aui-pad-gap-control",
-          "--aui-space"
-        ],
-        "color": [
-          "--aui-fill",
-          "--aui-stroke",
-          "--aui-indicator",
-          "--aui-ink",
-          "--aui-focus"
-        ],
-        "shape": [
-          "--aui-radius"
-        ],
-        "motion": [
-          "--aui-duration",
-          "--aui-easing"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-button-size",
+          "default": "var(--aui-size)",
+          "description": "Overall height and minimum width."
+        },
+        {
+          "name": "--aui-button-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for the label text."
+        },
+        {
+          "name": "--aui-button-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Label font size."
+        },
+        {
+          "name": "--aui-button-font-weight",
+          "default": "var(--aui-control-font-weight)",
+          "description": "Label font weight."
+        },
+        {
+          "name": "--aui-button-line-height",
+          "default": "var(--aui-control-line-height)",
+          "description": "Label line height."
+        },
+        {
+          "name": "--aui-button-letter-spacing",
+          "default": "var(--aui-letter-spacing)",
+          "description": "Label letter spacing."
+        },
+        {
+          "name": "--aui-button-icon-size",
+          "default": "var(--aui-icon-size)",
+          "description": "Size of leading and trailing icons."
+        },
+        {
+          "name": "--aui-button-color",
+          "default": "var(--aui-indicator, var(--aui-ink))",
+          "description": "Text and icon color."
+        },
+        {
+          "name": "--aui-button-background",
+          "default": "var(--aui-fill)",
+          "description": "Background fill color."
+        },
+        {
+          "name": "--aui-button-border",
+          "default": "var(--aui-stroke)",
+          "description": "Border color."
+        },
+        {
+          "name": "--aui-button-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Corner radius."
+        },
+        {
+          "name": "--aui-button-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Horizontal padding."
+        },
+        {
+          "name": "--aui-button-padding-block",
+          "default": "var(--aui-pad-control-block)",
+          "description": "Vertical padding."
+        },
+        {
+          "name": "--aui-button-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between icon and label slots."
+        },
+        {
+          "name": "--aui-button-color-hover",
+          "default": "var(--aui-indicator-hover, var(--aui-ink-hover))",
+          "description": "Text and icon color on hover."
+        },
+        {
+          "name": "--aui-button-background-hover",
+          "default": "var(--aui-fill-hover)",
+          "description": "Background fill on hover."
+        },
+        {
+          "name": "--aui-button-border-hover",
+          "default": "var(--aui-stroke-hover)",
+          "description": "Border color on hover."
+        }
+      ],
       "use-cases": [
         "Primary call-to-action in forms and action bars.",
         "Ghost/outline secondary actions alongside primary buttons.",
@@ -1129,44 +1805,171 @@
           "default": "",
           "description": "Selected date in ISO format (YYYY-MM-DD)."
         },
-        "min": {
-          "syntax": "key-value",
-          "type": "string",
-          "default": "",
-          "description": "Minimum selectable date. Dates before this are disabled."
+        "min": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Minimum selectable date. Dates before this are disabled."
+        },
+        "max": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Maximum selectable date. Dates after this are disabled."
+        },
+        "range": {
+          "syntax": "boolean",
+          "description": "Enables range selection (click start, hover to preview, click to commit)."
+        }
+      },
+      "modifiers": {
+        "disabled": {
+          "syntax": "boolean",
+          "description": "Disables all interaction."
+        }
+      },
+      "a11y": {
+        "role": "group",
+        "keyboard": {
+          "ArrowLeft": "Previous day.",
+          "ArrowRight": "Next day.",
+          "ArrowUp": "Same day previous week.",
+          "ArrowDown": "Same day next week.",
+          "Home": "First day of current week.",
+          "End": "Last day of current week.",
+          "PageUp": "Previous month (Shift previous year).",
+          "PageDown": "Next month (Shift next year).",
+          "Enter": "Select focused date.",
+          "Space": "Select focused date."
+        }
+      },
+      "tokens": [
+        {
+          "name": "--aui-calendar-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Gap between calendar sections (header, weekdays, grid)."
+        },
+        {
+          "name": "--aui-calendar-padding",
+          "default": "calc(var(--aui-space) * 3)",
+          "description": "Outer padding of the calendar container."
+        },
+        {
+          "name": "--aui-calendar-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius for the calendar container."
+        },
+        {
+          "name": "--aui-calendar-background",
+          "default": "var(--aui-card)",
+          "description": "Background color of the calendar."
+        },
+        {
+          "name": "--aui-calendar-color",
+          "default": "var(--aui-ink)",
+          "description": "Default text color for the calendar."
+        },
+        {
+          "name": "--aui-calendar-font-size",
+          "default": "var(--aui-font-sm)",
+          "description": "Base font size for calendar content."
+        },
+        {
+          "name": "--aui-calendar-grid-gap",
+          "default": "2px",
+          "description": "Gap between day cells in the grid."
+        },
+        {
+          "name": "--aui-calendar-weekday-font-size",
+          "default": "var(--aui-font-xs)",
+          "description": "Font size for weekday labels."
+        },
+        {
+          "name": "--aui-calendar-weekday-font-weight",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Font weight for weekday labels."
+        },
+        {
+          "name": "--aui-calendar-weekday-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color for weekday labels."
+        },
+        {
+          "name": "--aui-calendar-cell-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius for day and month/year cells."
+        },
+        {
+          "name": "--aui-calendar-cell-background-hover",
+          "default": "var(--aui-control)",
+          "description": "Background color on cell hover."
+        },
+        {
+          "name": "--aui-calendar-cell-color-hover",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color on cell hover."
+        },
+        {
+          "name": "--aui-calendar-cell-padding-block",
+          "default": "var(--aui-pad-control-block)",
+          "description": "Block padding for month/year cells."
+        },
+        {
+          "name": "--aui-calendar-cell-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline padding for month/year cells."
+        },
+        {
+          "name": "--aui-calendar-today-background",
+          "default": "var(--aui-control)",
+          "description": "Background color for the today cell."
+        },
+        {
+          "name": "--aui-calendar-today-color",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color for the today cell."
+        },
+        {
+          "name": "--aui-calendar-today-font-weight",
+          "default": "var(--aui-font-weight-semibold)",
+          "description": "Font weight for the today cell."
+        },
+        {
+          "name": "--aui-calendar-selected-background",
+          "default": "var(--aui-accent, var(--aui-solid))",
+          "description": "Background color for selected cells."
+        },
+        {
+          "name": "--aui-calendar-selected-color",
+          "default": "var(--aui-solid-ink,",
+          "description": "Text color for selected cells."
         },
-        "max": {
-          "syntax": "key-value",
-          "type": "string",
-          "default": "",
-          "description": "Maximum selectable date. Dates after this are disabled."
+        {
+          "name": "--aui-calendar-selected-font-weight",
+          "default": "var(--aui-font-weight-semibold)",
+          "description": "Font weight for selected cells."
         },
-        "range": {
-          "syntax": "boolean",
-          "description": "Enables range selection (click start, hover to preview, click to commit)."
-        }
-      },
-      "modifiers": {
-        "disabled": {
-          "syntax": "boolean",
-          "description": "Disables all interaction."
-        }
-      },
-      "a11y": {
-        "role": "group",
-        "keyboard": {
-          "ArrowLeft": "Previous day.",
-          "ArrowRight": "Next day.",
-          "ArrowUp": "Same day previous week.",
-          "ArrowDown": "Same day next week.",
-          "Home": "First day of current week.",
-          "End": "Last day of current week.",
-          "PageUp": "Previous month (Shift previous year).",
-          "PageDown": "Next month (Shift next year).",
-          "Enter": "Select focused date.",
-          "Space": "Select focused date."
+        {
+          "name": "--aui-calendar-outside-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color for days outside the current month."
+        },
+        {
+          "name": "--aui-calendar-disabled-color",
+          "default": "var(--aui-ink-disabled)",
+          "description": "Text color for disabled dates."
+        },
+        {
+          "name": "--aui-calendar-header-font-weight",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Font weight for header navigation buttons."
+        },
+        {
+          "name": "--aui-calendar-header-title-color",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color for the month/year title button."
         }
-      },
+      ],
       "events": {
         "aui:change": {
           "description": "Fired on single date selection. Detail contains { value }."
@@ -1303,13 +2106,28 @@
           "description": "Floating indicator at right center of the viewport."
         }
       },
-      "tokens": {
-        "custom": [
-          "--_canvas-x — Current pan X offset in px",
-          "--_canvas-y — Current pan Y offset in px",
-          "--_canvas-zoom — Current zoom level (1 = 100%)"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-canvas-background",
+          "default": "var(--aui-doc)",
+          "description": "Background color of the canvas surface."
+        },
+        {
+          "name": "--aui-canvas-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the canvas container."
+        },
+        {
+          "name": "--aui-canvas-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color when the bordered attribute is set."
+        },
+        {
+          "name": "--aui-canvas-focus-color",
+          "default": "var(--aui-focus)",
+          "description": "Focus ring color when the canvas is focused."
+        }
+      ],
       "events": {
         "aui:canvas-pan": {
           "description": "Fires on pan change. Detail contains { x, y }."
@@ -1457,26 +2275,83 @@
           "description": "Fires when checked state changes."
         }
       },
-      "tokens": {
-        "sizing": [
-          "--aui-size",
-          "--aui-widget-size",
-          "--aui-font-size"
-        ],
-        "color": [
-          "--aui-ink",
-          "--aui-control",
-          "--aui-fill",
-          "--aui-stroke",
-          "--aui-solid",
-          "--aui-on-solid",
-          "--aui-focus"
-        ],
-        "motion": [
-          "--aui-duration",
-          "--aui-easing"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-checkbox-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Gap between checkbox box and label."
+        },
+        {
+          "name": "--aui-checkbox-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Label font family."
+        },
+        {
+          "name": "--aui-checkbox-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Label font size."
+        },
+        {
+          "name": "--aui-checkbox-line-height",
+          "default": "var(--aui-control-line-height-relaxed)",
+          "description": "Label line height."
+        },
+        {
+          "name": "--aui-checkbox-color",
+          "default": "var(--aui-ink)",
+          "description": "Label text color."
+        },
+        {
+          "name": "--aui-checkbox-box-size",
+          "default": "var(--aui-widget-size)",
+          "description": "Width and height of the visual checkbox box."
+        },
+        {
+          "name": "--aui-checkbox-box-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Unchecked box background."
+        },
+        {
+          "name": "--aui-checkbox-box-border",
+          "default": "var(--aui-stroke)",
+          "description": "Unchecked box border color."
+        },
+        {
+          "name": "--aui-checkbox-box-border-radius",
+          "default": "calc(var(--aui-radius) * 0.4)",
+          "description": "Box corner radius."
+        },
+        {
+          "name": "--aui-checkbox-checked-background",
+          "default": "var(--aui-accent)",
+          "description": "Checked box background."
+        },
+        {
+          "name": "--aui-checkbox-checked-border",
+          "default": "var(--aui-accent)",
+          "description": "Checked box border color."
+        },
+        {
+          "name": "--aui-checkbox-checked-color",
+          "default": "var(--aui-solid-ink)",
+          "description": "Check mark color."
+        },
+        {
+          "name": "--aui-checkbox-border-hover",
+          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
+          "description": "Box border color on hover."
+        },
+        {
+          "name": "--aui-checkbox-background-disabled",
+          "default": "var(--aui-fill-disabled, var(--aui-action-disabled))",
+          "description": "Box background when disabled."
+        },
+        {
+          "name": "--aui-checkbox-border-disabled",
+          "default": "var(--aui-stroke-disabled, var(--aui-border-disabled))",
+          "description": "Box border color when disabled."
+        }
+      ],
       "css-notes": {
         "attr-audit": [
           "AB1: [checked], [indeterminate], [disabled] — all visual via attributes",
@@ -1545,6 +2420,58 @@
           "description": "Group heading text."
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-command-group-gap",
+          "default": "var(--aui-space)",
+          "description": "Gap between group items."
+        },
+        {
+          "name": "--aui-command-group-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color between adjacent groups."
+        },
+        {
+          "name": "--aui-command-group-heading-size",
+          "default": "var(--aui-size)",
+          "description": "Minimum height of the group heading."
+        },
+        {
+          "name": "--aui-command-group-heading-padding-block",
+          "default": "var(--aui-pad-control-block)",
+          "description": "Block padding for the group heading."
+        },
+        {
+          "name": "--aui-command-group-heading-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline padding for the group heading."
+        },
+        {
+          "name": "--aui-command-group-heading-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for the group heading."
+        },
+        {
+          "name": "--aui-command-group-heading-font-size",
+          "default": "var(--aui-group-header-font)",
+          "description": "Font size for the group heading."
+        },
+        {
+          "name": "--aui-command-group-heading-font-weight",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Font weight for the group heading."
+        },
+        {
+          "name": "--aui-command-group-heading-letter-spacing",
+          "default": "0.05em",
+          "description": "Letter spacing for the uppercase group heading."
+        },
+        {
+          "name": "--aui-command-group-heading-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color for the group heading."
+        }
+      ],
       "a11y": {
         "role": "group"
       },
@@ -1577,6 +2504,53 @@
           "description": "Placeholder text."
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-command-input-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between input icon and text surface."
+        },
+        {
+          "name": "--aui-command-input-size",
+          "default": "var(--aui-size)",
+          "description": "Maximum height of the input row."
+        },
+        {
+          "name": "--aui-command-input-padding-block",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Block (vertical) padding for the input."
+        },
+        {
+          "name": "--aui-command-input-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline (horizontal) padding for the input."
+        },
+        {
+          "name": "--aui-command-input-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Bottom border color separating input from results."
+        },
+        {
+          "name": "--aui-command-input-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for input text."
+        },
+        {
+          "name": "--aui-command-input-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for input text."
+        },
+        {
+          "name": "--aui-command-input-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color for the input."
+        },
+        {
+          "name": "--aui-command-input-color-placeholder",
+          "default": "var(--aui-ink-placeholder, var(--aui-ink-muted))",
+          "description": "Placeholder text color."
+        }
+      ],
       "a11y": {
         "role": "searchbox"
       },
@@ -1620,6 +2594,73 @@
           "description": "Extra search terms not visible in the label."
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-command-item-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between item icon and label."
+        },
+        {
+          "name": "--aui-command-item-size",
+          "default": "var(--aui-size)",
+          "description": "Minimum height of the command item."
+        },
+        {
+          "name": "--aui-command-item-padding-block",
+          "default": "var(--aui-pad-control-block)",
+          "description": "Block (vertical) padding for items."
+        },
+        {
+          "name": "--aui-command-item-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline (horizontal) padding for items."
+        },
+        {
+          "name": "--aui-command-item-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for item text."
+        },
+        {
+          "name": "--aui-command-item-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for item text."
+        },
+        {
+          "name": "--aui-command-item-line-height",
+          "default": "var(--aui-control-line-height)",
+          "description": "Line height for item text."
+        },
+        {
+          "name": "--aui-command-item-color",
+          "default": "var(--aui-ink)",
+          "description": "Default text color for items."
+        },
+        {
+          "name": "--aui-command-item-border-radius",
+          "default": "calc(var(--aui-radius) - var(--aui-space))",
+          "description": "Border radius for item highlight."
+        },
+        {
+          "name": "--aui-command-item-background-hover",
+          "default": "var(--aui-fill-hover, var(--aui-action-hover))",
+          "description": "Background color on hover or keyboard focus."
+        },
+        {
+          "name": "--aui-command-item-color-hover",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color on hover or keyboard focus."
+        },
+        {
+          "name": "--aui-command-item-color-selected",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color for selected items."
+        },
+        {
+          "name": "--aui-command-item-color-disabled",
+          "default": "var(--aui-ink-disabled, var(--aui-ink-muted))",
+          "description": "Text color for disabled items."
+        }
+      ],
       "a11y": {
         "role": "option"
       },
@@ -1688,6 +2729,33 @@
           "description": "Fired on Escape key. Parent dialog can listen to close."
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-command-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background color for the command palette."
+        },
+        {
+          "name": "--aui-command-color",
+          "default": "var(--aui-ink)",
+          "description": "Default text color for command palette content."
+        },
+        {
+          "name": "--aui-command-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color for the command palette container."
+        },
+        {
+          "name": "--aui-command-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius for the command palette container."
+        },
+        {
+          "name": "--aui-command-gap",
+          "default": "var(--aui-space)",
+          "description": "Gap between command palette sections."
+        }
+      ],
       "composition": {
         "parents": [
           "aui-dialog",
@@ -1891,27 +2959,23 @@
           "description": "Fires on interactive containers. Navigates to href if set."
         }
       },
-      "tokens": {
-        "color": [
-          "--aui-card",
-          "--aui-doc",
-          "--aui-border-muted",
-          "--aui-border-hover",
-          "--aui-focus"
-        ],
-        "shape": [
-          "--aui-radius"
-        ],
-        "shadow": [
-          "--aui-shadow-sm",
-          "--aui-shadow-md",
-          "--aui-shadow-lg"
-        ],
-        "motion": [
-          "--aui-duration",
-          "--aui-easing"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-container-background",
+          "default": "var(--aui-card, var(--aui-doc))",
+          "description": "Background color of the container surface."
+        },
+        {
+          "name": "--aui-container-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the container."
+        },
+        {
+          "name": "--aui-container-font-size",
+          "default": "var(--aui-font-lg)",
+          "description": "Base font size for the container."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <aui-stack gap=\"1\">\n      <aui-heading>Project Settings</aui-heading>\n      <aui-text muted size=\"sm\">Make changes to your project here. Click save when you're done.</aui-text>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-field label=\"Name\">\n          <aui-input placeholder=\"Acme Dashboard\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Description\" description=\"This will be visible to all team members.\">\n          <aui-textarea placeholder=\"A real-time analytics dashboard for the Acme team.\"></aui-textarea>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"trailing\">\n      <aui-stack direction=\"row\" gap=\"2\">\n        <aui-button scrim>Cancel</aui-button>\n        <aui-button primary accent>Save changes</aui-button>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>\n",
@@ -2018,22 +3082,48 @@
           "description": "Fires when the dialog closes (Escape, backdrop click, or API)."
         }
       },
-      "tokens": {
-        "color": [
-          "--aui-modal",
-          "--aui-doc",
-          "--aui-border-muted",
-          "--aui-ink",
-          "--aui-backdrop-color",
-          "--aui-backdrop-opacity"
-        ],
-        "shadow": [
-          "--aui-shadow-lg"
-        ],
-        "shape": [
-          "--aui-radius"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-dialog-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background color of the dialog content panel."
+        },
+        {
+          "name": "--aui-dialog-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color inside the dialog."
+        },
+        {
+          "name": "--aui-dialog-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the dialog and child separators."
+        },
+        {
+          "name": "--aui-dialog-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the dialog content panel."
+        },
+        {
+          "name": "--aui-dialog-shadow",
+          "default": "var(--aui-shadow-lg)",
+          "description": "Box shadow of the dialog content panel."
+        },
+        {
+          "name": "--aui-dialog-width",
+          "default": "min(90vw, 32rem)",
+          "description": "Width of the dialog content panel (default size)."
+        },
+        {
+          "name": "--aui-dialog-backdrop-color",
+          "default": "var(--aui-backdrop-color, oklch(0% 0 0))",
+          "description": "Color of the backdrop overlay."
+        },
+        {
+          "name": "--aui-dialog-backdrop-opacity",
+          "default": "var(--aui-backdrop-opacity, 0.3)",
+          "description": "Opacity of the backdrop overlay."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-container bordered max-width=\"md\">\n  <aui-header>\n    <span>Confirm</span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <p>Are you sure you want to delete this item? This action cannot be undone.</p>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"trailing\">\n      <aui-stack direction=\"row\" gap=\"2\">\n        <aui-button ghost>Cancel</aui-button>\n        <aui-button primary danger>Delete</aui-button>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>\n",
@@ -2125,24 +3215,43 @@
           "description": "Fires when the drawer closes."
         }
       },
-      "tokens": {
-        "color": [
-          "--aui-modal",
-          "--aui-doc",
-          "--aui-border-muted",
-          "--aui-ink",
-          "--aui-backdrop-color",
-          "--aui-backdrop-opacity"
-        ],
-        "sizing": [
-          "--aui-drawer-width",
-          "--aui-drawer-height"
-        ],
-        "motion": [
-          "--aui-duration",
-          "--aui-easing"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-drawer-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background color of the drawer content panel."
+        },
+        {
+          "name": "--aui-drawer-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color inside the drawer."
+        },
+        {
+          "name": "--aui-drawer-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the drawer edge and child separators."
+        },
+        {
+          "name": "--aui-drawer-width",
+          "default": "24rem",
+          "description": "Width of the drawer when anchored left or right."
+        },
+        {
+          "name": "--aui-drawer-height",
+          "default": "24rem",
+          "description": "Height of the drawer when anchored top or bottom."
+        },
+        {
+          "name": "--aui-drawer-backdrop-color",
+          "default": "var(--aui-backdrop-color, oklch(0% 0 0))",
+          "description": "Color of the backdrop overlay."
+        },
+        {
+          "name": "--aui-drawer-backdrop-opacity",
+          "default": "var(--aui-backdrop-opacity, 0.3)",
+          "description": "Opacity of the backdrop overlay."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-container bordered max-width=\"sm\">\n  <aui-header>\n    <span>Filters</span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n        <aui-field label=\"Category\">\n          <aui-input placeholder=\"All\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Status\">\n          <aui-radio-group name=\"status\">\n            <aui-radio label=\"Active\" value=\"active\"></aui-radio>\n            <aui-radio label=\"Archived\" value=\"archived\"></aui-radio>\n          </aui-radio-group>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"trailing\">\n      <aui-button primary accent>Apply</aui-button>\n    </span>\n  </aui-footer>\n</aui-container>\n",
@@ -2349,25 +3458,33 @@
           "aui-stack",
           "any"
         ],
-        "children": [
-          "aui-editor-layer"
-        ],
-        "context": "Use as the root canvas for any editor. Place aui-editor-layer children inside for guaranteed z-index stacking. The editor creates a viewport wrapper and moves all children into it.\n"
-      },
-      "tokens": {
-        "color": [
-          "--aui-doc",
-          "--aui-border-muted",
-          "--aui-accent",
-          "--aui-focus"
-        ],
-        "motion": [
-          "--_editor-zoom",
-          "--_editor-pan-x",
-          "--_editor-pan-y",
-          "--_editor-grid-size"
-        ]
+        "children": [
+          "aui-editor-layer"
+        ],
+        "context": "Use as the root canvas for any editor. Place aui-editor-layer children inside for guaranteed z-index stacking. The editor creates a viewport wrapper and moves all children into it.\n"
       },
+      "tokens": [
+        {
+          "name": "--aui-editor-background",
+          "default": "var(--aui-doc)",
+          "description": "Background color of the editor stage."
+        },
+        {
+          "name": "--aui-editor-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the editor container."
+        },
+        {
+          "name": "--aui-editor-selection-color",
+          "default": "var(--aui-accent)",
+          "description": "Color of the selection rectangle border and fill."
+        },
+        {
+          "name": "--aui-editor-focus-color",
+          "default": "var(--aui-focus)",
+          "description": "Focus ring color when the editor is focused."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-editor background=\"dots\" style=\"width: 100%; height: 20rem;\">\n  <aui-editor-layer name=\"content\">\n    <aui-text>Pannable content on a dot grid</aui-text>\n  </aui-editor-layer>\n</aui-editor>\n",
@@ -2538,24 +3655,48 @@
           "[required] appends asterisk to label"
         ]
       },
-      "tokens": {
-        "spacing": [
-          "--aui-space"
-        ],
-        "typography": [
-          "--aui-font-family",
-          "--aui-font-size",
-          "--aui-text-line-height",
-          "--aui-control-line-height-relaxed"
-        ],
-        "color": [
-          "--aui-ink",
-          "--aui-ink-muted",
-          "--aui-ink-disabled",
-          "--aui-border-danger",
-          "--aui-danger"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-field-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Vertical gap between label, control, and description."
+        },
+        {
+          "name": "--aui-field-label-font-size",
+          "default": "var(--aui-font-sm)",
+          "description": "Label text font size."
+        },
+        {
+          "name": "--aui-field-label-font-weight",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Label text font weight."
+        },
+        {
+          "name": "--aui-field-label-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Label text color."
+        },
+        {
+          "name": "--aui-field-label-line-height",
+          "default": "var(--aui-control-line-height-relaxed)",
+          "description": "Label text line height."
+        },
+        {
+          "name": "--aui-field-description-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Description text color."
+        },
+        {
+          "name": "--aui-field-description-font-size",
+          "default": "var(--aui-font-sm)",
+          "description": "Description text font size."
+        },
+        {
+          "name": "--aui-field-error-color",
+          "default": "var(--aui-danger, oklch(0.65 0.2 25))",
+          "description": "Error message text color."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-field label=\"Email\">\n  <aui-input type=\"email\" placeholder=\"you@example.com\"></aui-input>\n</aui-field>\n",
@@ -2855,6 +3996,43 @@
         "children": "none",
         "context": "Place inside aui-graph-node. The port-id is referenced by noodle selectors as \"nodeId:portId\".\n"
       },
+      "tokens": [
+        {
+          "name": "--aui-graph-port-size",
+          "default": "8px",
+          "description": "Diameter of the port dot."
+        },
+        {
+          "name": "--aui-graph-port-background",
+          "default": "var(--aui-doc)",
+          "description": "Fill color of the port dot (unfilled state)."
+        },
+        {
+          "name": "--aui-graph-port-border-width",
+          "default": "2px",
+          "description": "Border width of the port dot."
+        },
+        {
+          "name": "--aui-graph-port-border-color",
+          "default": "var(--aui-border)",
+          "description": "Default border color of the port dot."
+        },
+        {
+          "name": "--aui-graph-port-border-color-input",
+          "default": "var(--aui-success)",
+          "description": "Border color for input-type ports."
+        },
+        {
+          "name": "--aui-graph-port-border-color-output",
+          "default": "var(--aui-accent)",
+          "description": "Border color for output-type ports."
+        },
+        {
+          "name": "--aui-graph-port-hover-shadow",
+          "default": "0 0 6px color-mix(in srgb, var(--aui-accent) 40%, transparent)",
+          "description": "Box shadow on hover."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-graph-port port-id=\"out\" side=\"right\" type=\"output\"></aui-graph-port>\n",
@@ -2966,6 +4144,43 @@
           "aria-orientation": "Set from orientation attribute."
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-gripper-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Color of the feedback line at rest."
+        },
+        {
+          "name": "--aui-gripper-color-hover",
+          "default": "var(--aui-accent)",
+          "description": "Color of the feedback line on hover."
+        },
+        {
+          "name": "--aui-gripper-color-dragging",
+          "default": "var(--aui-accent)",
+          "description": "Color of the accent bar while dragging."
+        },
+        {
+          "name": "--aui-gripper-size",
+          "default": "2px",
+          "description": "Width/height of the feedback line at rest."
+        },
+        {
+          "name": "--aui-gripper-size-dragging",
+          "default": "6px",
+          "description": "Width/height of the accent bar while dragging."
+        },
+        {
+          "name": "--aui-gripper-border-radius",
+          "default": "2px",
+          "description": "Border radius of the feedback line at rest."
+        },
+        {
+          "name": "--aui-gripper-border-radius-dragging",
+          "default": "6px",
+          "description": "Border radius of the accent bar while dragging."
+        }
+      ],
       "events": {
         "aui:resize-start": {
           "description": "Fired when drag begins."
@@ -3048,11 +4263,23 @@
           "aria-hidden": "Set to \"true\" when no label (decorative icon)."
         }
       },
-      "tokens": {
-        "sizing": [
-          "--aui-icon-size"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-icon-width",
+          "default": "var(--aui-icon-size)",
+          "description": "Icon width."
+        },
+        {
+          "name": "--aui-icon-height",
+          "default": "var(--aui-icon-size)",
+          "description": "Icon height."
+        },
+        {
+          "name": "--aui-icon-color",
+          "default": "currentColor",
+          "description": "Icon fill color, inherited from parent."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n  <aui-icon name=\"house\"></aui-icon>\n  <aui-icon name=\"gear\"></aui-icon>\n  <aui-icon name=\"magnifying-glass\"></aui-icon>\n  <aui-icon name=\"heart\"></aui-icon>\n  <aui-icon name=\"star\"></aui-icon>\n  <aui-icon name=\"user\"></aui-icon>\n  <aui-icon name=\"pencil\"></aui-icon>\n  <aui-icon name=\"trash\"></aui-icon>\n  <aui-icon name=\"plus\"></aui-icon>\n  <aui-icon name=\"check\"></aui-icon>\n  <aui-icon name=\"warning\"></aui-icon>\n  <aui-icon name=\"info\"></aui-icon>\n</aui-stack>\n",
@@ -3116,6 +4343,78 @@
           "Backspace": "Clear current cell and move to previous."
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-input-otp-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between cells."
+        },
+        {
+          "name": "--aui-input-otp-cell-size",
+          "default": "var(--aui-size)",
+          "description": "Width and height of each cell."
+        },
+        {
+          "name": "--aui-input-otp-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Cell text font family."
+        },
+        {
+          "name": "--aui-input-otp-font-size",
+          "default": "var(--aui-font-xl)",
+          "description": "Cell text font size."
+        },
+        {
+          "name": "--aui-input-otp-font-weight",
+          "default": "var(--aui-font-weight-semibold)",
+          "description": "Cell text font weight."
+        },
+        {
+          "name": "--aui-input-otp-color",
+          "default": "var(--aui-ink)",
+          "description": "Cell text color."
+        },
+        {
+          "name": "--aui-input-otp-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Cell background color."
+        },
+        {
+          "name": "--aui-input-otp-border",
+          "default": "var(--aui-stroke)",
+          "description": "Cell border color."
+        },
+        {
+          "name": "--aui-input-otp-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Cell corner radius."
+        },
+        {
+          "name": "--aui-input-otp-border-hover",
+          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
+          "description": "Cell border color on hover."
+        },
+        {
+          "name": "--aui-input-otp-border-filled",
+          "default": "var(--aui-solid, var(--aui-accent, oklch(0.55 0.2 260)))",
+          "description": "Cell border color when filled."
+        },
+        {
+          "name": "--aui-input-otp-background-disabled",
+          "default": "var(--aui-fill-disabled, var(--aui-action-disabled))",
+          "description": "Cell background when disabled."
+        },
+        {
+          "name": "--aui-input-otp-color-disabled",
+          "default": "var(--aui-ink-disabled, var(--aui-ink-muted))",
+          "description": "Cell text color when disabled."
+        },
+        {
+          "name": "--aui-input-otp-border-disabled",
+          "default": "var(--aui-stroke-disabled, var(--aui-border-disabled))",
+          "description": "Cell border color when disabled."
+        }
+      ],
       "events": {
         "aui:complete": {
           "description": "Fired when all cells are filled. detail.value contains the code."
@@ -3369,37 +4668,93 @@
           ":not(:has(> input:not(:placeholder-shown))) — hides clear button when empty"
         ]
       },
-      "tokens": {
-        "sizing": [
-          "--aui-size",
-          "--aui-font-size",
-          "--aui-icon-size"
-        ],
-        "spacing": [
-          "--aui-pad-control-block",
-          "--aui-pad-control-inline"
-        ],
-        "color": [
-          "--aui-ink",
-          "--aui-ink-muted",
-          "--aui-ink-placeholder",
-          "--aui-ink-disabled",
-          "--aui-control",
-          "--aui-fill",
-          "--aui-fill-disabled",
-          "--aui-stroke",
-          "--aui-stroke-hover",
-          "--aui-stroke-disabled",
-          "--aui-focus"
-        ],
-        "shape": [
-          "--aui-radius"
-        ],
-        "motion": [
-          "--aui-duration",
-          "--aui-easing"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-input-size",
+          "default": "var(--aui-size)",
+          "description": "Overall height and minimum width."
+        },
+        {
+          "name": "--aui-input-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for input text."
+        },
+        {
+          "name": "--aui-input-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Input text font size."
+        },
+        {
+          "name": "--aui-input-font-weight",
+          "default": "var(--aui-control-font-weight)",
+          "description": "Input text font weight."
+        },
+        {
+          "name": "--aui-input-line-height",
+          "default": "var(--aui-control-line-height-relaxed)",
+          "description": "Input text line height."
+        },
+        {
+          "name": "--aui-input-letter-spacing",
+          "default": "var(--aui-letter-spacing)",
+          "description": "Input text letter spacing."
+        },
+        {
+          "name": "--aui-input-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color."
+        },
+        {
+          "name": "--aui-input-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Background fill color."
+        },
+        {
+          "name": "--aui-input-border",
+          "default": "var(--aui-stroke)",
+          "description": "Border color."
+        },
+        {
+          "name": "--aui-input-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Corner radius."
+        },
+        {
+          "name": "--aui-input-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Horizontal padding."
+        },
+        {
+          "name": "--aui-input-padding-block",
+          "default": "var(--aui-pad-control-block)",
+          "description": "Vertical padding."
+        },
+        {
+          "name": "--aui-input-placeholder-color",
+          "default": "var(--aui-ink-placeholder, var(--aui-ink-muted))",
+          "description": "Placeholder text color."
+        },
+        {
+          "name": "--aui-input-icon-size",
+          "default": "var(--aui-icon-size)",
+          "description": "Size of leading and trailing icons."
+        },
+        {
+          "name": "--aui-input-icon-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of leading and trailing icons."
+        },
+        {
+          "name": "--aui-input-border-hover",
+          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
+          "description": "Border color on hover."
+        },
+        {
+          "name": "--aui-input-border-focus",
+          "default": "var(--aui-focus)",
+          "description": "Border and outline color on focus."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-input placeholder=\"Enter text\"></aui-input>",
@@ -3601,6 +4956,53 @@
       "type": "component",
       "summary": "Groups related options with an optional label and divider.",
       "description": "Wraps aui-option elements into a labeled section within aui-select. In dropdown/list/combobox modes, renders an uppercase heading above the group. Use divider attribute to add a visual separator before the group. In bar mode, groups are layout-transparent (display: contents) with labels hidden — adjacent groups are separated by auto-stamped vertical dividers. When a group overflows, all its items move to the overflow menu together, rendered under a divider + uppercase header.\n",
+      "tokens": [
+        {
+          "name": "--aui-optgroup-gap",
+          "default": "var(--aui-space)",
+          "description": "Vertical gap between group label and options."
+        },
+        {
+          "name": "--aui-optgroup-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Separator border color between groups."
+        },
+        {
+          "name": "--aui-optgroup-label-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Group label font family."
+        },
+        {
+          "name": "--aui-optgroup-label-font-size",
+          "default": "var(--aui-group-header-font)",
+          "description": "Group label font size."
+        },
+        {
+          "name": "--aui-optgroup-label-font-weight",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Group label font weight."
+        },
+        {
+          "name": "--aui-optgroup-label-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Group label text color."
+        },
+        {
+          "name": "--aui-optgroup-label-size",
+          "default": "var(--aui-size)",
+          "description": "Group label minimum height."
+        },
+        {
+          "name": "--aui-optgroup-label-padding-block",
+          "default": "var(--aui-pad-control-block)",
+          "description": "Group label vertical padding."
+        },
+        {
+          "name": "--aui-optgroup-label-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Group label horizontal padding."
+        }
+      ],
       "attributes": {
         "label": {
           "type": "string",
@@ -3653,6 +5055,53 @@
           "description": "Display label override. When empty, textContent is used.\n"
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-option-color",
+          "default": "var(--aui-ink)",
+          "description": "Option text color."
+        },
+        {
+          "name": "--aui-option-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Option corner radius."
+        },
+        {
+          "name": "--aui-option-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Horizontal padding."
+        },
+        {
+          "name": "--aui-option-padding-block",
+          "default": "var(--aui-pad-control-block)",
+          "description": "Vertical padding."
+        },
+        {
+          "name": "--aui-option-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between content slots."
+        },
+        {
+          "name": "--aui-option-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Option text font size."
+        },
+        {
+          "name": "--aui-option-min-height",
+          "default": "var(--aui-size)",
+          "description": "Minimum row height."
+        },
+        {
+          "name": "--aui-option-color-hover",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color on hover and keyboard highlight."
+        },
+        {
+          "name": "--aui-option-background-hover",
+          "default": "var(--aui-fill-hover, var(--aui-action-hover))",
+          "description": "Background on hover and keyboard highlight."
+        }
+      ],
       "a11y": {
         "role": "option",
         "aria": {
@@ -3708,13 +5157,28 @@
           "pattern": "First child is the leading section (e.g. back button), center child is typically aui-breadcrumb, trailing aside holds action buttons. Grid adapts from 1 to 3 columns based on which children are present.\n"
         }
       },
-      "tokens": {
-        "sizing": [
-          "--aui-pad-control-block",
-          "--aui-size",
-          "--aui-space"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-page-context-min-height",
+          "default": "calc(var(--aui-pad-control-block) * 2 + var(--aui-size))",
+          "description": "Minimum height of the context bar."
+        },
+        {
+          "name": "--aui-page-context-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Gap between grid columns in the context bar."
+        },
+        {
+          "name": "--aui-page-context-padding-block",
+          "default": "var(--aui-space)",
+          "description": "Block padding of the context bar."
+        },
+        {
+          "name": "--aui-page-context-padding-inline",
+          "default": "calc(var(--aui-space) * 3)",
+          "description": "Inline padding of the context bar."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-page-context>\n  <div>\n    <aui-button icon=\"arrow-left\" hide-label label=\"Back\"></aui-button>\n  </div>\n  <aui-breadcrumb>\n    <aui-breadcrumb-item label=\"Home\"></aui-breadcrumb-item>\n    <aui-breadcrumb-item label=\"Projects\"></aui-breadcrumb-item>\n  </aui-breadcrumb>\n  <aside>\n    <aui-button icon=\"plus\" label=\"New\"></aui-button>\n  </aside>\n</aui-page-context>\n",
@@ -3744,16 +5208,38 @@
           "pattern": "Direct child should be a <main> element containing the page content. The main element gets panel styling with rounded corners, hidden scrollbar, and supports sticky header/footer children.\n"
         }
       },
-      "tokens": {
-        "color": [
-          "--aui-panel",
-          "--aui-border"
-        ],
-        "sizing": [
-          "--aui-space",
-          "--aui-radius"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-page-main-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Gap between the main panel and adjacent elements."
+        },
+        {
+          "name": "--aui-page-main-padding-block-end",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Bottom padding of the page-main area."
+        },
+        {
+          "name": "--aui-page-main-padding-inline-end",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Right padding of the page-main area."
+        },
+        {
+          "name": "--aui-page-main-background",
+          "default": "var(--aui-panel)",
+          "description": "Background of the main content panel."
+        },
+        {
+          "name": "--aui-page-main-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the main content panel."
+        },
+        {
+          "name": "--aui-page-main-border-color",
+          "default": "var(--aui-border)",
+          "description": "Border color for sticky header/footer separators."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-page-main>\n  <main>\n    <header>Sticky page header</header>\n    <section>Scrollable content</section>\n    <footer>Sticky page footer</footer>\n  </main>\n</aui-page-main>\n",
@@ -3828,7 +5314,74 @@
         "change": {
           "description": "Fired when page changes. detail.page is the new page number."
         }
-      },
+      },
+      "tokens": [
+        {
+          "name": "--aui-pagination-gap",
+          "default": "2px",
+          "description": "Gap between page buttons."
+        },
+        {
+          "name": "--aui-pagination-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for page numbers."
+        },
+        {
+          "name": "--aui-pagination-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for page numbers."
+        },
+        {
+          "name": "--aui-pagination-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color of page buttons."
+        },
+        {
+          "name": "--aui-pagination-color-hover",
+          "default": "var(--aui-ink)",
+          "description": "Text color of page buttons on hover."
+        },
+        {
+          "name": "--aui-pagination-background-hover",
+          "default": "var(--aui-fill-hover, var(--aui-action-hover))",
+          "description": "Background color of page buttons on hover."
+        },
+        {
+          "name": "--aui-pagination-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of page buttons."
+        },
+        {
+          "name": "--aui-pagination-padding-inline",
+          "default": "calc(var(--aui-pad-control-inline) * 0.5)",
+          "description": "Horizontal padding inside page buttons."
+        },
+        {
+          "name": "--aui-pagination-current-background",
+          "default": "var(--aui-solid, var(--aui-accent, oklch(0.55 0.2 260)))",
+          "description": "Background color of the current page button."
+        },
+        {
+          "name": "--aui-pagination-current-color",
+          "default": "var(--aui-on-solid,",
+          "description": "Text color of the current page button."
+        },
+        {
+          "name": "--aui-pagination-current-font-weight",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Font weight of the current page button."
+        },
+        {
+          "name": "--aui-pagination-arrow-font-size",
+          "default": "var(--aui-font-xl)",
+          "description": "Font size for prev/next arrow icons."
+        },
+        {
+          "name": "--aui-pagination-ellipsis-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of the ellipsis indicators."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-pagination page=\"3\" total=\"10\"></aui-pagination>",
@@ -3901,6 +5454,43 @@
           "description": "Resize priority. High-priority panes absorb delta first during cascade resize. Low-priority panes resize last.\n"
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-pane-accent",
+          "default": "var(--aui-focus)",
+          "description": "Accent color for edge indicators during drag."
+        },
+        {
+          "name": "--aui-pane-border",
+          "default": "var(--aui-border)",
+          "description": "Border color for pane header divider."
+        },
+        {
+          "name": "--aui-pane-background",
+          "default": "var(--aui-panel)",
+          "description": "Background color for the pane header."
+        },
+        {
+          "name": "--aui-pane-content-padding",
+          "default": "calc(2 * var(--aui-space))",
+          "description": "Padding inside the pane content area."
+        },
+        {
+          "name": "--aui-pane-header-font-size",
+          "default": "var(--aui-group-header-font)",
+          "description": "Font size for the pane header label."
+        },
+        {
+          "name": "--aui-pane-header-font-weight",
+          "default": "var(--aui-font-weight-semibold)",
+          "description": "Font weight for the pane header label."
+        },
+        {
+          "name": "--aui-pane-header-letter-spacing",
+          "default": "0.04em",
+          "description": "Letter spacing for the uppercase pane header label."
+        }
+      ],
       "composition": {
         "parents": [
           "aui-panes"
@@ -4308,25 +5898,78 @@
           "description": "Fires when this radio becomes selected."
         }
       },
-      "tokens": {
-        "sizing": [
-          "--aui-size",
-          "--aui-widget-size",
-          "--aui-font-size"
-        ],
-        "color": [
-          "--aui-ink",
-          "--aui-control",
-          "--aui-fill",
-          "--aui-stroke",
-          "--aui-solid",
-          "--aui-focus"
-        ],
-        "motion": [
-          "--aui-duration",
-          "--aui-easing"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-radio-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Gap between circle and label."
+        },
+        {
+          "name": "--aui-radio-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Label font family."
+        },
+        {
+          "name": "--aui-radio-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Label font size."
+        },
+        {
+          "name": "--aui-radio-line-height",
+          "default": "var(--aui-control-line-height-relaxed)",
+          "description": "Label line height."
+        },
+        {
+          "name": "--aui-radio-color",
+          "default": "var(--aui-ink)",
+          "description": "Label text color."
+        },
+        {
+          "name": "--aui-radio-circle-size",
+          "default": "var(--aui-widget-size)",
+          "description": "Width and height of the radio circle."
+        },
+        {
+          "name": "--aui-radio-circle-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Unchecked circle background."
+        },
+        {
+          "name": "--aui-radio-circle-border",
+          "default": "var(--aui-stroke)",
+          "description": "Unchecked circle border color."
+        },
+        {
+          "name": "--aui-radio-checked-background",
+          "default": "var(--aui-accent)",
+          "description": "Selected circle background."
+        },
+        {
+          "name": "--aui-radio-checked-border",
+          "default": "var(--aui-accent)",
+          "description": "Selected circle border color."
+        },
+        {
+          "name": "--aui-radio-checked-dot-color",
+          "default": "var(--aui-solid-ink)",
+          "description": "Inner dot color when selected."
+        },
+        {
+          "name": "--aui-radio-border-hover",
+          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
+          "description": "Circle border on hover."
+        },
+        {
+          "name": "--aui-radio-background-disabled",
+          "default": "var(--aui-fill-disabled, var(--aui-action-disabled))",
+          "description": "Circle background when disabled."
+        },
+        {
+          "name": "--aui-radio-border-disabled",
+          "default": "var(--aui-stroke-disabled, var(--aui-border-disabled))",
+          "description": "Circle border when disabled."
+        }
+      ],
       "css-notes": {
         "attr-audit": [
           "AB1: [checked], [disabled] — visual state via attributes",
@@ -4417,28 +6060,48 @@
         "associated": true,
         "value": "Current slider value."
       },
-      "tokens": {
-        "sizing": [
-          "--aui-size",
-          "--aui-widget-size"
-        ],
-        "spacing": [
-          "--aui-pad-control-block"
-        ],
-        "color": [
-          "--aui-control",
-          "--aui-fill",
-          "--aui-stroke",
-          "--aui-solid",
-          "--aui-focus"
-        ],
-        "shape": [
-          "--aui-radius-round"
-        ],
-        "motion": [
-          "--aui-easing"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-range-track-background",
+          "default": "var(--aui-control)",
+          "description": "Track background color."
+        },
+        {
+          "name": "--aui-range-track-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Track border color."
+        },
+        {
+          "name": "--aui-range-track-border-radius",
+          "default": "calc(var(--aui-widget-size) / 2)",
+          "description": "Track corner radius (pill shape)."
+        },
+        {
+          "name": "--aui-range-fill-background",
+          "default": "var(--aui-accent, var(--aui-solid))",
+          "description": "Active fill color from min to current value."
+        },
+        {
+          "name": "--aui-range-thumb-background",
+          "default": "var(--aui-solid-ink, #fff)",
+          "description": "Thumb fill color."
+        },
+        {
+          "name": "--aui-range-thumb-border",
+          "default": "var(--aui-accent, var(--aui-solid))",
+          "description": "Thumb border color."
+        },
+        {
+          "name": "--aui-range-thumb-border-radius",
+          "default": "var(--aui-radius-round)",
+          "description": "Thumb corner radius."
+        },
+        {
+          "name": "--aui-range-thumb-shadow",
+          "default": "var(--aui-shadow-sm, 0 1px 4px oklch(0% 0 0 / 0.15))",
+          "description": "Thumb drop shadow."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-range></aui-range>",
@@ -4472,6 +6135,23 @@
           "any"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-root-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Base font family for the app shell."
+        },
+        {
+          "name": "--aui-root-color",
+          "default": "var(--aui-ink)",
+          "description": "Default text color for the app shell."
+        },
+        {
+          "name": "--aui-root-background",
+          "default": "var(--aui-doc)",
+          "description": "Background color of the app shell."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-container bordered style=\"min-height: 12rem;\">\n  <aui-header><span>App Title</span></aui-header>\n  <aui-content><aui-inset><p>Main content area</p></aui-inset></aui-content>\n  <aui-footer><span slot=\"leading\">v0.1</span></aui-footer>\n</aui-container>\n",
@@ -4518,6 +6198,63 @@
         ],
         "children": null
       },
+      "tokens": [
+        {
+          "name": "--aui-segment-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between icon and label inside the segment."
+        },
+        {
+          "name": "--aui-segment-padding-inline",
+          "default": "calc(var(--aui-pad-control-inline) - var(--aui-space))",
+          "description": "Horizontal padding of the segment."
+        },
+        {
+          "name": "--aui-segment-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for segment label text."
+        },
+        {
+          "name": "--aui-segment-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for segment label text."
+        },
+        {
+          "name": "--aui-segment-font-weight",
+          "default": "var(--aui-control-font-weight)",
+          "description": "Font weight for segment labels."
+        },
+        {
+          "name": "--aui-segment-line-height",
+          "default": "var(--aui-control-line-height)",
+          "description": "Line height for segment label text."
+        },
+        {
+          "name": "--aui-segment-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color of inactive segments."
+        },
+        {
+          "name": "--aui-segment-color-hover",
+          "default": "var(--aui-ink)",
+          "description": "Text color on hover."
+        },
+        {
+          "name": "--aui-segment-color-selected",
+          "default": "var(--aui-neutral-11)",
+          "description": "Text color of the selected segment."
+        },
+        {
+          "name": "--aui-segment-border-radius",
+          "default": "calc(var(--aui-radius) - var(--aui-pad-control-block) / 2)",
+          "description": "Border radius of individual segments."
+        },
+        {
+          "name": "--aui-segment-color-disabled",
+          "default": "var(--aui-ink-disabled, var(--aui-ink-muted))",
+          "description": "Text color of disabled segments."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-segment value=\"list\">List</aui-segment>",
@@ -4572,6 +6309,43 @@
           "aui-segment"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-segmented-control-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Background color of the segmented control container."
+        },
+        {
+          "name": "--aui-segmented-control-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the container."
+        },
+        {
+          "name": "--aui-segmented-control-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the container."
+        },
+        {
+          "name": "--aui-segmented-control-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for segment labels."
+        },
+        {
+          "name": "--aui-segmented-control-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for segment labels."
+        },
+        {
+          "name": "--aui-segmented-control-indicator-background",
+          "default": "white",
+          "description": "Background color of the floating selection indicator."
+        },
+        {
+          "name": "--aui-segmented-control-indicator-shadow",
+          "default": "var(--aui-shadow-sm)",
+          "description": "Box shadow of the floating selection indicator."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-segmented-control value=\"list\">\n  <aui-segment value=\"list\" selected>List</aui-segment>\n  <aui-segment value=\"grid\">Grid</aui-segment>\n  <aui-segment value=\"board\">Board</aui-segment>\n</aui-segmented-control>\n",
@@ -4654,6 +6428,98 @@
           "description": "Children fill available space equally (bar mode)."
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-select-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for the select trigger and options."
+        },
+        {
+          "name": "--aui-select-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for the select trigger and options."
+        },
+        {
+          "name": "--aui-select-font-weight",
+          "default": "var(--aui-control-font-weight)",
+          "description": "Font weight for the trigger label."
+        },
+        {
+          "name": "--aui-select-color",
+          "default": "var(--aui-ink)",
+          "description": "Default text color."
+        },
+        {
+          "name": "--aui-select-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Background color of the trigger button."
+        },
+        {
+          "name": "--aui-select-border-color",
+          "default": "var(--aui-stroke)",
+          "description": "Border color of the trigger button."
+        },
+        {
+          "name": "--aui-select-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius for the trigger and dropdown."
+        },
+        {
+          "name": "--aui-select-size",
+          "default": "var(--aui-size)",
+          "description": "Height of the trigger button."
+        },
+        {
+          "name": "--aui-select-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline padding for the trigger."
+        },
+        {
+          "name": "--aui-select-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between trigger icon, label, and chevron."
+        },
+        {
+          "name": "--aui-select-icon-size",
+          "default": "var(--aui-icon-size)",
+          "description": "Size of the chevron icon."
+        },
+        {
+          "name": "--aui-select-placeholder-color",
+          "default": "var(--aui-ink-placeholder, var(--aui-ink-muted))",
+          "description": "Placeholder text color."
+        },
+        {
+          "name": "--aui-select-chevron-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of the dropdown chevron icon."
+        },
+        {
+          "name": "--aui-select-border-color-hover",
+          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
+          "description": "Border color on hover."
+        },
+        {
+          "name": "--aui-select-dropdown-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background color of the dropdown popover."
+        },
+        {
+          "name": "--aui-select-dropdown-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the dropdown popover."
+        },
+        {
+          "name": "--aui-select-dropdown-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the dropdown popover."
+        },
+        {
+          "name": "--aui-select-dropdown-shadow",
+          "default": "var(--aui-shadow-lg, 0 4px 16px oklch(0% 0 0 / 0.12))",
+          "description": "Box shadow for the dropdown popover."
+        }
+      ],
       "bar-overflow": {
         "description": "In bar mode, items overflow into a \"...\" popover menu when the container is too narrow. Control which items overflow first using data-priority on children. Groups (aui-optgroup) overflow as a unit — all items in a group move to the overflow menu together. In the bar, group labels are hidden and auto-stamped dividers separate adjacent groups. In the overflow menu, groups render with a horizontal divider + uppercase group header label above their items.\n",
         "data-priority": {
@@ -4934,28 +6800,93 @@
           "Drag": "Resize handle supports pointer drag to resize width."
         }
       },
-      "tokens": {
-        "sizing": [
-          "--aui-sidebar-width",
-          "--aui-sidebar-width-min",
-          "--aui-sidebar-width-max",
-          "--aui-sidebar-width-collapsed",
-          "--aui-sidebar-header-height"
-        ],
-        "color": [
-          "--aui-doc",
-          "--aui-border",
-          "--aui-action-active",
-          "--aui-ink",
-          "--aui-ink-muted",
-          "--aui-ink-strong",
-          "--aui-focus"
-        ],
-        "motion": [
-          "--aui-duration",
-          "--aui-easing"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-sidebar-border-color",
+          "default": "var(--aui-border)",
+          "description": "Border color between sidebar and content."
+        },
+        {
+          "name": "--aui-sidebar-label-font-size",
+          "default": "calc(var(--aui-font-size) * 0.75)",
+          "description": "Font size for section labels."
+        },
+        {
+          "name": "--aui-sidebar-label-font-weight",
+          "default": "var(--aui-font-weight-semibold)",
+          "description": "Font weight for section labels."
+        },
+        {
+          "name": "--aui-sidebar-label-letter-spacing",
+          "default": "0.06em",
+          "description": "Letter spacing for uppercase section labels."
+        },
+        {
+          "name": "--aui-sidebar-label-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color for section labels."
+        },
+        {
+          "name": "--aui-sidebar-label-padding-block",
+          "default": "var(--aui-space)",
+          "description": "Block padding for section labels."
+        },
+        {
+          "name": "--aui-sidebar-label-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline padding for section labels."
+        },
+        {
+          "name": "--aui-sidebar-nav-color",
+          "default": "var(--aui-ink)",
+          "description": "Default text color for navigation items."
+        },
+        {
+          "name": "--aui-sidebar-nav-color-active",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color for the active navigation item."
+        },
+        {
+          "name": "--aui-sidebar-nav-font-weight-active",
+          "default": "var(--aui-font-weight-semibold)",
+          "description": "Font weight for the active navigation item."
+        },
+        {
+          "name": "--aui-sidebar-header-nav-font-weight",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Font weight for header/footer nav items."
+        },
+        {
+          "name": "--aui-sidebar-header-nav-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius for header/footer nav items."
+        },
+        {
+          "name": "--aui-sidebar-header-nav-color-hover",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color on header/footer nav item hover."
+        },
+        {
+          "name": "--aui-sidebar-header-nav-background-hover",
+          "default": "var(--aui-action)",
+          "description": "Background color on header/footer nav item hover."
+        },
+        {
+          "name": "--aui-sidebar-resize-handle-background",
+          "default": "var(--aui-action-active)",
+          "description": "Background color of the resize handle on hover/drag."
+        },
+        {
+          "name": "--aui-sidebar-connector-color",
+          "default": "var(--aui-border)",
+          "description": "Color of the vertical connector line on open nav groups."
+        },
+        {
+          "name": "--aui-sidebar-indicator-color",
+          "default": "var(--aui-focus)",
+          "description": "Color of the sliding active indicator bar."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-sidebar width=\"260\" collapsible>\n  <aui-sidebar-header>\n    <aui-nav-item label=\"Workspace\" icon=\"grid\"></aui-nav-item>\n  </aui-sidebar-header>\n  <aui-sidebar-content>\n    <aui-nav-item label=\"Dashboard\" icon=\"home\"></aui-nav-item>\n    <aui-nav-item label=\"Settings\" icon=\"settings\"></aui-nav-item>\n  </aui-sidebar-content>\n  <aui-sidebar-footer>\n    <aui-nav-item label=\"Account\" icon=\"user\"></aui-nav-item>\n  </aui-sidebar-footer>\n</aui-sidebar>\n",
@@ -5070,30 +7001,88 @@
           "description": "Fires when checked state changes."
         }
       },
-      "tokens": {
-        "sizing": [
-          "--aui-size",
-          "--aui-widget-size",
-          "--aui-font-size"
-        ],
-        "color": [
-          "--aui-ink",
-          "--aui-ink-muted",
-          "--aui-control",
-          "--aui-fill",
-          "--aui-stroke",
-          "--aui-solid",
-          "--aui-on-solid",
-          "--aui-focus"
-        ],
-        "shape": [
-          "--aui-radius-round"
-        ],
-        "motion": [
-          "--aui-duration",
-          "--aui-easing"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-switch-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Gap between track and label."
+        },
+        {
+          "name": "--aui-switch-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Label font family."
+        },
+        {
+          "name": "--aui-switch-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Label font size."
+        },
+        {
+          "name": "--aui-switch-line-height",
+          "default": "var(--aui-control-line-height-relaxed)",
+          "description": "Label line height."
+        },
+        {
+          "name": "--aui-switch-color",
+          "default": "var(--aui-ink)",
+          "description": "Label text color."
+        },
+        {
+          "name": "--aui-switch-track-background",
+          "default": "var(--aui-action, var(--aui-control, var(--aui-fill)))",
+          "description": "Unchecked track fill."
+        },
+        {
+          "name": "--aui-switch-track-border",
+          "default": "var(--aui-stroke)",
+          "description": "Track border color."
+        },
+        {
+          "name": "--aui-switch-track-border-radius",
+          "default": "var(--aui-radius-round)",
+          "description": "Track corner radius (pill shape)."
+        },
+        {
+          "name": "--aui-switch-thumb-background",
+          "default": "var(--aui-solid-ink, #fff)",
+          "description": "Thumb fill color."
+        },
+        {
+          "name": "--aui-switch-thumb-border-radius",
+          "default": "var(--aui-radius-round)",
+          "description": "Thumb corner radius."
+        },
+        {
+          "name": "--aui-switch-thumb-shadow",
+          "default": "var(--aui-shadow-sm, 0 1px 3px oklch(0% 0 0 / 0.15))",
+          "description": "Thumb drop shadow."
+        },
+        {
+          "name": "--aui-switch-checked-background",
+          "default": "var(--aui-accent)",
+          "description": "Checked track fill."
+        },
+        {
+          "name": "--aui-switch-checked-border",
+          "default": "var(--aui-accent)",
+          "description": "Checked track border color."
+        },
+        {
+          "name": "--aui-switch-border-hover",
+          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
+          "description": "Track border on hover."
+        },
+        {
+          "name": "--aui-switch-background-disabled",
+          "default": "var(--aui-fill-disabled, var(--aui-action-disabled))",
+          "description": "Track background when disabled."
+        },
+        {
+          "name": "--aui-switch-border-disabled",
+          "default": "var(--aui-stroke-disabled, var(--aui-border-disabled))",
+          "description": "Track border when disabled."
+        }
+      ],
       "css-notes": {
         "attr-audit": [
           "AB1: [checked], [disabled] — visual state via attributes",
@@ -5204,6 +7193,68 @@
         ],
         "children": null
       },
+      "tokens": [
+        {
+          "name": "--aui-tab-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between icon and label inside the tab."
+        },
+        {
+          "name": "--aui-tab-padding-block",
+          "default": "calc(var(--aui-pad-control-block) * 1.5)",
+          "description": "Vertical padding of the tab trigger."
+        },
+        {
+          "name": "--aui-tab-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Horizontal padding of the tab trigger."
+        },
+        {
+          "name": "--aui-tab-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for tab label text."
+        },
+        {
+          "name": "--aui-tab-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for tab label text."
+        },
+        {
+          "name": "--aui-tab-font-weight",
+          "default": "var(--aui-control-font-weight)",
+          "description": "Font weight for inactive tab labels."
+        },
+        {
+          "name": "--aui-tab-line-height",
+          "default": "var(--aui-control-line-height)",
+          "description": "Line height for tab label text."
+        },
+        {
+          "name": "--aui-tab-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color of inactive tabs."
+        },
+        {
+          "name": "--aui-tab-color-hover",
+          "default": "var(--aui-ink)",
+          "description": "Text color on hover."
+        },
+        {
+          "name": "--aui-tab-color-selected",
+          "default": "var(--aui-accent)",
+          "description": "Text color of the selected tab."
+        },
+        {
+          "name": "--aui-tab-font-weight-selected",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Font weight of the selected tab."
+        },
+        {
+          "name": "--aui-tab-color-disabled",
+          "default": "var(--aui-ink-disabled, var(--aui-ink-muted))",
+          "description": "Text color of disabled tabs."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-tabs value=\"general\">\n  <aui-tab value=\"general\">General</aui-tab>\n  <aui-tab value=\"advanced\">Advanced</aui-tab>\n  <aui-tab value=\"security\">Security</aui-tab>\n  <aui-tab-panel value=\"general\">General settings content.</aui-tab-panel>\n  <aui-tab-panel value=\"advanced\">Advanced settings content.</aui-tab-panel>\n  <aui-tab-panel value=\"security\">Security settings content.</aui-tab-panel>\n</aui-tabs>\n",
@@ -5260,6 +7311,28 @@
           "aui-tab-panel"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-tabs-separator-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Color of the separator line beneath tabs."
+        },
+        {
+          "name": "--aui-tabs-indicator-color",
+          "default": "var(--aui-accent)",
+          "description": "Color of the sliding active indicator."
+        },
+        {
+          "name": "--aui-tabs-indicator-size",
+          "default": "2px",
+          "description": "Thickness of the active indicator bar."
+        },
+        {
+          "name": "--aui-tabs-indicator-radius",
+          "default": "1px",
+          "description": "Border radius of the indicator bar ends."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-tabs value=\"general\">\n  <aui-tab value=\"general\">General</aui-tab>\n  <aui-tab value=\"advanced\">Advanced</aui-tab>\n  <aui-tab-panel value=\"general\">General content</aui-tab-panel>\n  <aui-tab-panel value=\"advanced\">Advanced content</aui-tab-panel>\n</aui-tabs>\n",
@@ -5307,6 +7380,33 @@
         ],
         "children": null
       },
+      "tokens": [
+        {
+          "name": "--aui-table-cell-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for cell content."
+        },
+        {
+          "name": "--aui-table-cell-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color for data cells."
+        },
+        {
+          "name": "--aui-table-cell-size",
+          "default": "var(--aui-size)",
+          "description": "Minimum height of the data cell."
+        },
+        {
+          "name": "--aui-table-cell-padding-block",
+          "default": "var(--aui-pad-control-block)",
+          "description": "Block (vertical) padding for data cells."
+        },
+        {
+          "name": "--aui-table-cell-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline (horizontal) padding for data cells."
+        }
+      ],
       "examples": [
         {
           "html": "See aui-table for full usage.",
@@ -5423,6 +7523,38 @@
         ],
         "children": null
       },
+      "tokens": [
+        {
+          "name": "--aui-table-header-font-weight",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Font weight for header text."
+        },
+        {
+          "name": "--aui-table-header-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for header text."
+        },
+        {
+          "name": "--aui-table-header-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color for header cells."
+        },
+        {
+          "name": "--aui-table-header-size",
+          "default": "var(--aui-size)",
+          "description": "Minimum height of the header cell."
+        },
+        {
+          "name": "--aui-table-header-padding-block",
+          "default": "var(--aui-pad-control-block)",
+          "description": "Block (vertical) padding for header cells."
+        },
+        {
+          "name": "--aui-table-header-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline (horizontal) padding for header cells."
+        }
+      ],
       "examples": [
         {
           "html": "See aui-table for full usage.",
@@ -5445,6 +7577,28 @@
         ],
         "children": null
       },
+      "tokens": [
+        {
+          "name": "--aui-table-row-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color between rows."
+        },
+        {
+          "name": "--aui-table-row-head-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Background color for header rows."
+        },
+        {
+          "name": "--aui-table-row-hover-background",
+          "default": "var(--aui-fill-hover, var(--aui-action-hover))",
+          "description": "Background color on row hover."
+        },
+        {
+          "name": "--aui-table-row-hover-color",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color on row hover."
+        }
+      ],
       "examples": [
         {
           "html": "See aui-table for full usage.",
@@ -5573,6 +7727,78 @@
           "description": "Returns a copy of the currently selected row IDs. Each ID comes from the row's `id` field (or a JSON-stringified fallback).\n"
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-table-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for the table."
+        },
+        {
+          "name": "--aui-table-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Base font size for table content."
+        },
+        {
+          "name": "--aui-table-color",
+          "default": "var(--aui-ink)",
+          "description": "Default text color for the table."
+        },
+        {
+          "name": "--aui-table-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color for table outline and dividers."
+        },
+        {
+          "name": "--aui-table-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius for the outer table container."
+        },
+        {
+          "name": "--aui-table-toolbar-background",
+          "default": "var(--aui-fill)",
+          "description": "Background color for the search toolbar."
+        },
+        {
+          "name": "--aui-table-toolbar-gap",
+          "default": "var(--aui-gap)",
+          "description": "Gap between toolbar items."
+        },
+        {
+          "name": "--aui-table-toolbar-padding",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Padding for the search toolbar."
+        },
+        {
+          "name": "--aui-table-footer-background",
+          "default": "var(--aui-fill)",
+          "description": "Background color for the pagination footer."
+        },
+        {
+          "name": "--aui-table-footer-font-size",
+          "default": "var(--aui-font-xs)",
+          "description": "Font size for footer text."
+        },
+        {
+          "name": "--aui-table-footer-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color for footer content."
+        },
+        {
+          "name": "--aui-table-footer-padding",
+          "default": "var(--aui-pad-control-block) var(--aui-pad-control-inline)",
+          "description": "Padding for the pagination footer."
+        },
+        {
+          "name": "--aui-table-footer-gap",
+          "default": "var(--aui-gap)",
+          "description": "Gap between footer items."
+        },
+        {
+          "name": "--aui-table-selected-background",
+          "default": "var(--aui-action-hover, var(--aui-fill-hover))",
+          "description": "Background color for selected rows."
+        }
+      ],
       "a11y": {
         "role": "table"
       },
@@ -5771,32 +7997,98 @@
           "description": "Fires on blur."
         }
       },
-      "tokens": {
-        "sizing": [
-          "--aui-size",
-          "--aui-font-size"
-        ],
-        "spacing": [
-          "--aui-pad-control-block",
-          "--aui-pad-control-inline"
-        ],
-        "color": [
-          "--aui-ink",
-          "--aui-ink-muted",
-          "--aui-ink-placeholder",
-          "--aui-control",
-          "--aui-fill",
-          "--aui-stroke",
-          "--aui-focus"
-        ],
-        "shape": [
-          "--aui-radius"
-        ],
-        "motion": [
-          "--aui-duration",
-          "--aui-easing"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-textarea-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for textarea text."
+        },
+        {
+          "name": "--aui-textarea-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Textarea text font size."
+        },
+        {
+          "name": "--aui-textarea-font-weight",
+          "default": "var(--aui-control-font-weight)",
+          "description": "Textarea text font weight."
+        },
+        {
+          "name": "--aui-textarea-line-height",
+          "default": "var(--aui-text-line-height)",
+          "description": "Text line height."
+        },
+        {
+          "name": "--aui-textarea-letter-spacing",
+          "default": "var(--aui-letter-spacing)",
+          "description": "Text letter spacing."
+        },
+        {
+          "name": "--aui-textarea-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color."
+        },
+        {
+          "name": "--aui-textarea-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Background fill color."
+        },
+        {
+          "name": "--aui-textarea-border",
+          "default": "var(--aui-stroke)",
+          "description": "Border color."
+        },
+        {
+          "name": "--aui-textarea-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Corner radius."
+        },
+        {
+          "name": "--aui-textarea-padding-block",
+          "default": "calc((var(--aui-size) - 1lh) / 2)",
+          "description": "Vertical padding, centered to first line height."
+        },
+        {
+          "name": "--aui-textarea-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Horizontal padding."
+        },
+        {
+          "name": "--aui-textarea-placeholder-color",
+          "default": "var(--aui-ink-placeholder, var(--aui-ink-muted))",
+          "description": "Placeholder text color."
+        },
+        {
+          "name": "--aui-textarea-border-hover",
+          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
+          "description": "Border color on hover."
+        },
+        {
+          "name": "--aui-textarea-focus-outline",
+          "default": "2px solid var(--aui-focus)",
+          "description": "Outline style on focus."
+        },
+        {
+          "name": "--aui-textarea-focus-border",
+          "default": "var(--aui-focus)",
+          "description": "Border color on focus."
+        },
+        {
+          "name": "--aui-textarea-background-disabled",
+          "default": "var(--aui-fill-disabled, var(--aui-action-disabled))",
+          "description": "Background when disabled."
+        },
+        {
+          "name": "--aui-textarea-color-disabled",
+          "default": "var(--aui-ink-disabled, var(--aui-ink-muted))",
+          "description": "Text color when disabled."
+        },
+        {
+          "name": "--aui-textarea-border-disabled",
+          "default": "var(--aui-stroke-disabled, var(--aui-border-disabled))",
+          "description": "Border color when disabled."
+        }
+      ],
       "css-notes": {
         "attr-audit": [
           "AB1: [disabled], [readonly], [autogrow] — visual state via attributes",
@@ -5871,6 +8163,93 @@
           "description": "Fired when the toast is dismissed (auto or manual)."
         }
       },
+      "tokens": [
+        {
+          "name": "--aui-toast-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for toast message text."
+        },
+        {
+          "name": "--aui-toast-font-size",
+          "default": "var(--aui-font-size, 0.875rem)",
+          "description": "Font size for toast message text."
+        },
+        {
+          "name": "--aui-toast-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color of the toast."
+        },
+        {
+          "name": "--aui-toast-background",
+          "default": "var(--aui-card, var(--aui-doc,",
+          "description": "Background color of the toast."
+        },
+        {
+          "name": "--aui-toast-border",
+          "default": "var(--aui-border-muted, oklch(0.8 0 0))",
+          "description": "Border color of the toast."
+        },
+        {
+          "name": "--aui-toast-border-radius",
+          "default": "var(--aui-radius, 0.5rem)",
+          "description": "Border radius of the toast."
+        },
+        {
+          "name": "--aui-toast-shadow",
+          "default": "var(--aui-shadow-lg, 0 4px 16px oklch(0% 0 0 / 0.12))",
+          "description": "Box shadow of the toast."
+        },
+        {
+          "name": "--aui-toast-gap",
+          "default": "var(--aui-pad-gap-control, 0.5rem)",
+          "description": "Gap between message and close button."
+        },
+        {
+          "name": "--aui-toast-padding",
+          "default": "0.75rem 1rem",
+          "description": "Padding inside the toast."
+        },
+        {
+          "name": "--aui-toast-close-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of the close button icon."
+        },
+        {
+          "name": "--aui-toast-close-color-hover",
+          "default": "var(--aui-ink)",
+          "description": "Color of the close button icon on hover."
+        },
+        {
+          "name": "--aui-toast-close-size",
+          "default": "1.25rem",
+          "description": "Size of the close button hit area."
+        },
+        {
+          "name": "--aui-toast-close-border-radius",
+          "default": "var(--aui-radius, 0.25rem)",
+          "description": "Border radius of the close button."
+        },
+        {
+          "name": "--aui-toast-intent-info",
+          "default": "var(--aui-info, oklch(0.6 0.15 250))",
+          "description": "Accent color for info intent toasts."
+        },
+        {
+          "name": "--aui-toast-intent-success",
+          "default": "var(--aui-success, oklch(0.6 0.2 145))",
+          "description": "Accent color for success intent toasts."
+        },
+        {
+          "name": "--aui-toast-intent-warning",
+          "default": "var(--aui-warning, oklch(0.75 0.15 75))",
+          "description": "Accent color for warning intent toasts."
+        },
+        {
+          "name": "--aui-toast-intent-danger",
+          "default": "var(--aui-danger, oklch(0.6 0.2 25))",
+          "description": "Accent color for danger intent toasts."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-toast open message=\"Item saved successfully\" success duration=\"0\"></aui-toast>",
@@ -5946,24 +8325,48 @@
           "description": "Tooltip appears on focusin and disappears on focusout of the anchor element.\n"
         }
       },
-      "tokens": {
-        "color": [
-          "--aui-tooltip-ink",
-          "--aui-tooltip-fill"
-        ],
-        "shape": [
-          "--aui-radius"
-        ],
-        "motion": [
-          "--aui-easing"
-        ],
-        "typography": [
-          "--aui-font-family"
-        ],
-        "shadow": [
-          "--aui-shadow-sm"
-        ]
-      },
+      "tokens": [
+        {
+          "name": "--aui-tooltip-padding",
+          "default": "0.375rem 0.625rem",
+          "description": "Padding inside the tooltip surface."
+        },
+        {
+          "name": "--aui-tooltip-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for tooltip text."
+        },
+        {
+          "name": "--aui-tooltip-font-size",
+          "default": "var(--aui-font-xs)",
+          "description": "Font size for tooltip text."
+        },
+        {
+          "name": "--aui-tooltip-color",
+          "default": "var(--aui-solid-ink)",
+          "description": "Text color of the tooltip."
+        },
+        {
+          "name": "--aui-tooltip-background",
+          "default": "var(--aui-solid)",
+          "description": "Background color of the tooltip surface."
+        },
+        {
+          "name": "--aui-tooltip-border-radius",
+          "default": "var(--aui-radius, 0.375rem)",
+          "description": "Border radius of the tooltip surface."
+        },
+        {
+          "name": "--aui-tooltip-shadow",
+          "default": "var(--aui-shadow-sm, 0 1px 3px oklch(0% 0 0 / 0.15))",
+          "description": "Box shadow of the tooltip surface."
+        },
+        {
+          "name": "--aui-tooltip-offset",
+          "default": "0.375rem",
+          "description": "Distance between tooltip and its anchor element."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-button hide-label ghost label=\"Settings\">\n  <aui-icon name=\"gear\" slot=\"leading\"></aui-icon>\n</aui-button>\n<aui-tooltip content=\"Settings\" position=\"bottom\"></aui-tooltip>\n",
@@ -6023,6 +8426,83 @@
         ]
       },
       "description": "A tree node that supports expand/collapse and arbitrary nesting. The caret indicator uses aui-icon name=\"caret-right\" (rotated when expanded) and is automatically stamped by the component.\n",
+      "tokens": [
+        {
+          "name": "--aui-tree-item-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between caret, icon, and label."
+        },
+        {
+          "name": "--aui-tree-item-padding-block",
+          "default": "calc(var(--aui-pad-control-block) * 0.5)",
+          "description": "Vertical padding of the tree item row."
+        },
+        {
+          "name": "--aui-tree-item-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Horizontal padding of the tree item row."
+        },
+        {
+          "name": "--aui-tree-item-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for the tree item label."
+        },
+        {
+          "name": "--aui-tree-item-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for the tree item label."
+        },
+        {
+          "name": "--aui-tree-item-line-height",
+          "default": "var(--aui-control-line-height)",
+          "description": "Line height for the tree item label."
+        },
+        {
+          "name": "--aui-tree-item-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color of tree items."
+        },
+        {
+          "name": "--aui-tree-item-color-hover",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color on hover."
+        },
+        {
+          "name": "--aui-tree-item-background-hover",
+          "default": "var(--aui-fill-hover, var(--aui-action-hover))",
+          "description": "Background color on hover."
+        },
+        {
+          "name": "--aui-tree-item-color-selected",
+          "default": "var(--aui-ink-strong)",
+          "description": "Text color of the selected item."
+        },
+        {
+          "name": "--aui-tree-item-background-selected",
+          "default": "var(--aui-action-selected, var(--aui-control))",
+          "description": "Background color of the selected item."
+        },
+        {
+          "name": "--aui-tree-item-font-weight-selected",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Font weight of the selected item."
+        },
+        {
+          "name": "--aui-tree-item-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the tree item row."
+        },
+        {
+          "name": "--aui-tree-item-caret-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of the expand/collapse caret icon."
+        },
+        {
+          "name": "--aui-tree-item-color-disabled",
+          "default": "var(--aui-ink-disabled, var(--aui-ink-muted))",
+          "description": "Text color when disabled."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-tree>\n  <aui-tree-item expanded>\n    <span data-trigger>Parent node</span>\n    <aui-tree-item><span data-trigger>Child A</span></aui-tree-item>\n    <aui-tree-item selected><span data-trigger>Child B (selected)</span></aui-tree-item>\n    <aui-tree-item disabled><span data-trigger>Child C (disabled)</span></aui-tree-item>\n  </aui-tree-item>\n</aui-tree>\n",
@@ -6051,6 +8531,18 @@
           "aui-tree-item"
         ]
       },
+      "tokens": [
+        {
+          "name": "--aui-tree-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for tree item text."
+        },
+        {
+          "name": "--aui-tree-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for tree item text."
+        }
+      ],
       "examples": [
         {
           "html": "<aui-tree>\n  <aui-tree-item expanded>\n    <span data-trigger>Documents</span>\n    <aui-tree-item><span data-trigger>report.pdf</span></aui-tree-item>\n    <aui-tree-item><span data-trigger>notes.txt</span></aui-tree-item>\n  </aui-tree-item>\n  <aui-tree-item>\n    <span data-trigger>Images</span>\n    <aui-tree-item><span data-trigger>photo.jpg</span></aui-tree-item>\n  </aui-tree-item>\n</aui-tree>\n",