@epam/ai-dial-ui-kit 0.15.0-dev.9 → 0.15.0

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.9",
-  "generatedAt": "2026-09-18T14:40:00.960Z",
+  "version": "0.15.0",
+  "generatedAt": "2026-10-08T15:16:08.527Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -17,7 +17,7 @@
     "setupNotes": "## Next.js Integration\n1. Install the package. React is the only peer you have to supply — everything\n   the kit renders with, it installs itself.\n\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom\n```\n\nAdd the editor packages only if you use the `@epam/ai-dial-ui-kit/editors`\nsubpath. They are optional peers, so `npm install` stays quiet without them, and\nthe kit only reaches for them when a `Lazy*` editor actually mounts:\n\n``` bash\nnpm install monaco-editor @monaco-editor/react @uiw/react-md-editor\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
   },
   "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                             | Design name                 | Weight   | Size / Line-height                  |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text`             | Display 1                   | semibold | 32px / 48px                         |\n| `.dial-display2-text`             | Display 2                   | semibold | 28px / 40px                         |\n| `.dial-display3-text`             | Display 3                   | semibold | 22px / 32px                         |\n| `.dial-h1-text`                   | Heading 1                   | semibold | 20px / 28px                         |\n| `.dial-h2-text`                   | Heading 2                   | semibold | 18px / 26px                         |\n| `.dial-h3-text`                   | Heading 3                   | semibold | 16px / 24px                         |\n| `.dial-body-text`                 | Body Text                   | normal   | 16px / 24px                         |\n| `.dial-body-semi-text`            | Body Text (Semi Bold)       | semibold | 16px / 24px                         |\n| `.dial-body-paragraph-text`       | Body Paragraph              | normal   | 16px / 26px                         |\n| `.dial-body-paragraph-semi-text`  | Body Paragraph (Semi Bold)  | semibold | 16px / 26px                         |\n| `.dial-small-text`                | Small Text                  | normal   | 14px / 20px                         |\n| `.dial-small-semi-text`           | Small Text (Semi Bold)      | semibold | 14px / 20px                         |\n| `.dial-small-paragraph-text`      | Small Paragraph             | normal   | 14px / 24px                         |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px                         |\n| `.dial-tiny-text`                 | Tiny Text                   | normal   | 12px / 16px                         |\n| `.dial-tiny-lead-text`            | Tiny Text Lead              | normal   | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-tiny-semi-text`            | Tiny Text (Semi Bold)       | semibold | 12px / 16px                         |\n| `.dial-tiny-lead-semi-text`       | Tiny Text Lead (Semi Bold)  | semibold | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-caption-text`              | Caption                     | normal   | 10px / 12px                         |\n| `.dial-caption-lead-semi-text`    | Caption Lead (Semi Bold)    | semibold | 10px / 12px (+0.06em, uppercase)    |\n| `.dial-code-text`                 | Code                        | normal   | 14px / 20px (Fira Code / monospace) |\n| `.dial-italic-text`               | Italic                      | normal   | 18px / 22px (serif, italic)         |\n| `.dial-small-italic-text`         | Small Italic                | normal   | 14px / 20px (serif, italic)         |\n| `.dial-tiny-italic-text`          | Tiny Italic                 | normal   | 12px / 16px (serif, italic)         |\n| `.dial-caption-italic-text`       | Caption Italic              | normal   | 10px / 12px (serif, italic)         |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\n`.dial-code-text` resolves its family through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before falling back to the system monospace stack. The kit ships no font file; the host provides the face.\n\nThe `*-italic-text` classes use a serif italic face and are intended for mathematical and formula symbols. Their line-heights follow the corresponding typography size; the default 18px variant uses a fixed 22px line-height to keep standalone symbols vertically aligned without changing their container's height.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
-  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see tailwind.config.js for full list */\n}\n```\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1D4ED8` |\n| `gradient-1-hover` | `var(--bg-gradient-1-hover)` | `#6785FB` |\n| `gradient-1-active` | `var(--bg-gradient-1-active)` | `#1D4ED8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885DF2` |\n| `gradient-2-hover` | `var(--bg-gradient-2-hover)` | `#885DF2` |\n| `gradient-2-active` | `var(--bg-gradient-2-active)` | `#7C3AED` |\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent` | `var(--bg-control-accent)` | `#1D4ED8` |\n| `control-accent-hover` | `var(--bg-control-accent-hover)` | `#5976E9` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover-strong` | `var(--bg-control-neutral-hover-strong)` | `#848E9C` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-neutral-default` | `var(--bg-control-neutral-default)` | `#ACB3C3` |\n| `control-inverted` | `var(--bg-control-inverted)` | `#57647A` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#F764641A` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable-primary` | `var(--bg-control-disable-primary)` | `#DCE0E8` |\n| `control-disable-secondary` | `var(--bg-control-disable-secondary)` | `#ACB3C3` |\n| `green-1` | `var(--bg-visual-green-1)` | `#CDE8E5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#D1F0DC` |\n| `violet-1` | `var(--bg-visual-violet-1)` | `#DDE3F9` |\n| `violet-2` | `var(--bg-visual-violet-2)` | `#F1E9FF` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `xs-1` | `var(--shadow-xs-1)` | `#2764D933` |\n| `xs-2` | `var(--shadow-xs-2)` | `#161B2D08` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976E9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885DF2` |\n| `accent-focus` | `var(--stroke-accent-focus)` | `#6785FB` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n| `control-disable-primary` | `var(--stroke-control-disable-primary)` | `#848E9C` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0D6E72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065F46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#D36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#B45309` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7C3AED` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730B7` |\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-inverted` | `var(--text-control-inverted)` | `#FCFCFC` |\n| `control-disable-primary` | `var(--text-control-disable-primary)` | `#848E9C` |\n| `control-disable-secondary` | `var(--text-control-disable-secondary)` | `#DCE0E8` |\n| `control-accent-hover` | `var(--text-control-accent-hover)` | `#5976E9` |\n| `control-accent-active` | `var(--text-control-accent-active)` | `#6785FB` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#FCFCFC` |\n| `layer-1` | `var(--bg-layer-1)` | `#E0E6F0` |\n| `layer-2` | `var(--bg-layer-2)` | `#EEF1F7` |\n| `layer-3` | `var(--bg-layer-3)` | `#FCFCFC` |\n| `layer-4` | `var(--bg-layer-4)` | `#D1DBEA` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#124ACE` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#3664E2` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF5C` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#AE2F2F` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#CC4545` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#7C8293` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#D1DBEA` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#D1DBEA` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#9FA6BD` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#D1DBEA` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#696E7C` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#9FA6BD` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161B2D` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#7DA4FF` |",
+  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see tailwind.config.js for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n  --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1D4ED8` |\n| `gradient-1-hover` | `var(--bg-gradient-1-hover)` | `#6785FB` |\n| `gradient-1-active` | `var(--bg-gradient-1-active)` | `#1D4ED8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885DF2` |\n| `gradient-2-hover` | `var(--bg-gradient-2-hover)` | `#885DF2` |\n| `gradient-2-active` | `var(--bg-gradient-2-active)` | `#7C3AED` |\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-hover-subtle` | `var(--bg-control-accent-alpha-hover-subtle)` | `#2764D90A` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent-alpha-active-subtle` | `var(--bg-control-accent-alpha-active-subtle)` | `#2764D914` |\n| `control-accent` | `var(--bg-control-accent)` | `#1D4ED8` |\n| `control-accent-muted` | `var(--bg-control-accent-muted)` | `#E1EAF9` |\n| `control-accent-hover` | `var(--bg-control-accent-hover)` | `#5976E9` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover-strong` | `var(--bg-control-neutral-hover-strong)` | `#848E9C` |\n| `control-neutral-hover-muted` | `var(--bg-control-neutral-hover-muted)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-neutral-default` | `var(--bg-control-neutral-default)` | `#ACB3C3` |\n| `control-inverted` | `var(--bg-control-inverted)` | `#57647A` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha` | `var(--bg-control-error-alpha)` | `#F764641A` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#F7646426` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable-primary` | `var(--bg-control-disable-primary)` | `#DCE0E8` |\n| `control-disable-secondary` | `var(--bg-control-disable-secondary)` | `#ACB3C3` |\n| `green-1` | `var(--bg-visual-green-1)` | `#CDE8E5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#D1F0DC` |\n| `violet-1` | `var(--bg-visual-violet-1)` | `#DDE3F9` |\n| `violet-2` | `var(--bg-visual-violet-2)` | `#F1E9FF` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `xs-1` | `var(--shadow-xs-1)` | `#2764D933` |\n| `xs-2` | `var(--shadow-xs-2)` | `#161B2D08` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976E9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885DF2` |\n| `accent-focus` | `var(--stroke-accent-focus)` | `#6785FB` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n| `control-disable-primary` | `var(--stroke-control-disable-primary)` | `#848E9C` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0D6E72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065F46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#D36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#B45309` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7C3AED` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730B7` |\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-inverted` | `var(--text-control-inverted)` | `#FCFCFC` |\n| `control-disable-primary` | `var(--text-control-disable-primary)` | `#848E9C` |\n| `control-disable-secondary` | `var(--text-control-disable-secondary)` | `#DCE0E8` |\n| `control-accent-hover` | `var(--text-control-accent-hover)` | `#5976E9` |\n| `control-accent-active` | `var(--text-control-accent-active)` | `#6785FB` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#FCFCFC` |\n| `layer-1` | `var(--bg-layer-1)` | `#E0E6F0` |\n| `layer-2` | `var(--bg-layer-2)` | `#EEF1F7` |\n| `layer-3` | `var(--bg-layer-3)` | `#FCFCFC` |\n| `layer-4` | `var(--bg-layer-4)` | `#D1DBEA` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#124ACE` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#3664E2` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF5C` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#AE2F2F` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#CC4545` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#7C8293` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#D1DBEA` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#D1DBEA` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#9FA6BD` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#D1DBEA` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#696E7C` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#9FA6BD` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161B2D` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#7DA4FF` |",
   "components": [
     {
       "name": "Spinner",
@@ -180,6 +180,17 @@
       ],
       "sourceFile": "components/Skeleton/Skeleton.tsx"
     },
+    {
+      "name": "SchemaRenderer",
+      "category": "Name",
+      "generation": "2.0",
+      "description": "Renders a JSON Schema as a form, with collapsible sections, required-field\nvalidation and default values.\naliases: SchemaRenderer|JsonSchemaForm|SchemaForm\nDesign system 2.0\n\nBuilt only from 2.0 controls: `Input`, `NumberInput`, `PasswordInput`,\n`Select`, `Switch` and `RadioGroup`. A value the schema does not describe —\na key absent from `properties`, or an object with no fixed properties — is\nedited as raw JSON in a monospace `Textarea`.",
+      "props": [],
+      "examples": [
+        "<SchemaRenderer\n  schema={mySchema}\n  onChange={(v) => console.log(v)}\n  onDefaultValues={(defaults) => console.log(defaults)}\n/>"
+      ],
+      "sourceFile": "components/New/SchemaRenderer/SchemaRenderer.tsx"
+    },
     {
       "name": "Notification",
       "category": "Components_2_0",
@@ -212,6 +223,12 @@
           "required": true,
           "description": "Message text to display inside the alert"
         },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional control (typically a small `Button`) rendered at the inline end, after the text and before the close button; the caller supplies its accessible name"
+        },
         {
           "name": "closable",
           "type": "boolean",
@@ -247,7 +264,7 @@
         }
       ],
       "examples": [
-        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>\n\n<Notification\n  variant={NotificationVariant.General}\n  type={NotificationType.SectionMessage}\n  title=\"Title\"\n  message=\"Description text example\"\n/>"
+        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>\n\n<Notification\n  variant={NotificationVariant.General}\n  type={NotificationType.SectionMessage}\n  title=\"Title\"\n  message=\"Description text example\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  type={NotificationType.SectionMessage}\n  title=\"Couldn't finish this response\"\n  message=\"Something went wrong. Try again in a moment.\"\n  action={\n    <Button\n      variant={ButtonVariant.Neutral}\n      appearance={ButtonAppearance.Outlined}\n      size={ElementSize.Small}\n      label=\"Try again\"\n      onClick={handleRetry}\n    />\n  }\n/>"
       ],
       "sourceFile": "components/New/Notification/Notification.tsx"
     },
@@ -556,6 +573,71 @@
       ],
       "sourceFile": "components/New/FolderPath/FolderPath.tsx"
     },
+    {
+      "name": "Breadcrumbs",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A navigation trail: where the user is, and every level they can step back to.\naliases: Breadcrumb|NavigationPath|BreadcrumbTrail\nDesign system 2.0\n\nThe last item is the current page — drawn semibold and primary, and never a\ncontrol, since a link to the page you are already on does nothing. Every\nearlier item with an `href` or an `onClick` is a link; one with neither is\ndrawn as plain text, which is how a read-only location path is built.\n\nThe trail never wraps. Segments truncate instead, each revealing its full\nlabel in a tooltip only once it is actually clipped, and a trail longer than\n`maxVisibleItems` collapses its middle behind an ellipsis menu — the root and\nthe current page, the two segments that carry the most meaning, always stay\non screen.\n\na11y: an `<ol>` inside a named `<nav>`, with `aria-current=\"page\"` on the last\nsegment. Separators are decorative and hidden from assistive tech, so the\ntrail is announced as a list of links rather than a string of chevrons.\n\nThe trail is drawn at `dial-small-text` by default; `size` switches it to\n`dial-h2-text` for a trail that doubles as the page heading, where the\ntoken's own semibold weight applies to every segment.\n\nLabels are the caller's to translate; the two accessible names default to\nEnglish and take an override.",
+      "props": [
+        {
+          "name": "items",
+          "type": "BreadcrumbsItem[]",
+          "required": true,
+          "description": "The trail, outermost first; the last entry is the current page"
+        },
+        {
+          "name": "maxVisibleItems",
+          "type": "number",
+          "required": false,
+          "defaultValue": "DEFAULT_MAX_VISIBLE_ITEMS",
+          "description": "Segments drawn before the middle collapses behind an ellipsis menu"
+        },
+        {
+          "name": "size",
+          "type": "BreadcrumbsSize",
+          "required": false,
+          "defaultValue": "BreadcrumbsSize.Small",
+          "description": "The trail's type scale: `dial-small-text` or `dial-h2-text`"
+        },
+        {
+          "name": "separator",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": "defaultSeparator",
+          "description": "Node drawn between two segments; defaults to a right chevron"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Breadcrumb'",
+          "description": "Accessible name for the `<nav>`"
+        },
+        {
+          "name": "overflowAriaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Show hidden path segments'",
+          "description": "Accessible name for the ellipsis button"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the `<nav>`"
+        },
+        {
+          "name": "itemClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to every segment"
+        }
+      ],
+      "examples": [
+        "<Breadcrumbs\n  ariaLabel={t('File path')}\n  items={[\n    { label: t('My files'), onClick: () => open('/') },\n    { label: 'DK Test', onClick: () => open('/DK Test') },\n    { label: 'DK Test with nested' },\n  ]}\n/>"
+      ],
+      "sourceFile": "components/New/Breadcrumbs/Breadcrumbs.tsx"
+    },
     {
       "name": "DangerButton",
       "category": "Components_2_0",
@@ -623,6 +705,17 @@
       ],
       "sourceFile": "components/New/Button/ButtonWrappers.tsx"
     },
+    {
+      "name": "StarterButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A Starter Button component — a conversation starter: an outlined neutral\npill whose icons are stroked with the accent gradient\nDesign system 2.0\n\n`iconBefore` defaults to a sparkles icon; pass `null` for a label-only pill.\n\nAn SVG stroke cannot take a CSS gradient, so the button renders its own\n`linearGradient` with a per-instance id and hands it to its icons through\nthe `--dial-kit-starter-icon-stroke` custom property. Any icon that strokes\nwith `currentColor`, as Tabler icons do, picks it up.",
+      "props": [],
+      "examples": [
+        "<StarterButton\n label=\"Summarize this document\"\n onClick={handleClick}\n/>"
+      ],
+      "sourceFile": "components/New/Button/ButtonWrappers.tsx"
+    },
     {
       "name": "DangerIconButton",
       "category": "Components_2_0",
@@ -732,7 +825,7 @@
           "name": "tooltipProps",
           "type": "ButtonTooltipProps",
           "required": false,
-          "description": "Props of the 2.0  wrapping the button"
+          "description": "Props of the 2.0  wrapping the button.\nA disabled button with a visible tooltip is marked `aria-disabled` rather\nthan natively `disabled`, so it stays focusable and hoverable and the\ntooltip can still explain why it is unavailable; its click does nothing."
         },
         {
           "name": "href",
@@ -839,6 +932,12 @@
           "type": "DropdownItem[]",
           "required": true,
           "description": "DropdownItems with actions"
+        },
+        {
+          "name": "dropdownProps",
+          "type": "Pick<DropdownProps, 'listClassName' | 'matchReferenceWidth'>",
+          "required": false,
+          "description": "`listClassName` and `matchReferenceWidth` forwarded to the menu `Dropdown`"
         }
       ],
       "examples": [
@@ -908,6 +1007,13 @@
           "type": "string",
           "required": false,
           "description": "Accessible name for the underlying textarea"
+        },
+        {
+          "name": "showDragbar",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the bottom drag bar that resizes the editor height"
         }
       ],
       "examples": [
@@ -974,10 +1080,35 @@
           "type": "string",
           "required": false
         },
+        {
+          "name": "listStyle",
+          "type": "CSSProperties",
+          "required": false
+        },
         {
           "name": "ariaLabel",
           "type": "string",
           "required": false
+        },
+        {
+          "name": "triggerClassName",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "triggerLabelClassName",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "required": false
         }
       ],
       "examples": [
@@ -1006,6 +1137,11 @@
           "type": "boolean",
           "required": false,
           "defaultValue": "false"
+        },
+        {
+          "name": "labelClassName",
+          "type": "string",
+          "required": false
         }
       ],
       "examples": [],
@@ -1132,6 +1268,13 @@
           "defaultValue": "'Select all'",
           "description": "Label for the \"Select All\" checkbox."
         },
+        {
+          "name": "collapseTagOverflow",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Keep a multi-select's tags on one row, folding those that do not fit into a `+N` counter by the width available; the hover panel lists them and removes them."
+        },
         {
           "name": "selectedOptionMark",
           "type": "| MenuItemMark.Tint\n    | MenuItemMark.Check\n    | MenuItemMark.Highlight",
@@ -1285,6 +1428,12 @@
           "type": "(\n    event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,\n    val: string,\n  ) => void",
           "required": false,
           "description": "Called with the value whose tag was removed; when omitted the tags are not removable"
+        },
+        {
+          "name": "tagClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for every tag"
         }
       ],
       "examples": [],
@@ -1619,6 +1768,12 @@
           "required": false,
           "description": "Additional CSS classes applied to the overlay"
         },
+        {
+          "name": "overlayStyle",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles merged over Floating UI's own overlay styles (`position`, `inset`, `overflow: auto`)"
+        },
         {
           "name": "titleClassName",
           "type": "string",
@@ -2005,6 +2160,12 @@
           "required": false,
           "description": "Additional CSS classes applied to the floating overlay"
         },
+        {
+          "name": "listStyle",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style applied to the floating overlay, under the dropdown's own positioning styles"
+        },
         {
           "name": "outsidePressIgnoreRef",
           "type": "RefObject<HTMLElement | null>",
@@ -2199,7 +2360,7 @@
       "name": "Accordion",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\nDesign system 2.0\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a caret that rotates when\nexpanded, a title, and an optional description stacked beneath it.\n\nThe revealed content is a labelled `region`, so assistive tech announces it by the\nheader it belongs to. `nonCollapsible` renders the header as static text instead of\na permanently disabled button, which keeps a decorative panel out of the tab order.",
+      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\nDesign system 2.0\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a caret that rotates when\nexpanded, a title, and an optional description stacked beneath it.\n\nThe revealed content is a labelled `region`, so assistive tech announces it by the\nheader it belongs to. It stays mounted while collapsed so it can slide open and shut,\nand is `inert` then, out of both the tab order and the accessibility tree. `nonCollapsible` renders the header as static text instead of\na permanently disabled button, which keeps a decorative panel out of the tab order.",
       "props": [
         {
           "name": "title",
@@ -2256,6 +2417,13 @@
           "required": false,
           "description": "Fired when the header is clicked. Receives the next expanded state."
         },
+        {
+          "name": "caretPosition",
+          "type": "AccordionCaretPosition",
+          "required": false,
+          "defaultValue": "AccordionCaretPosition.End",
+          "description": "Where the header draws its caret: before or after the title."
+        },
         {
           "name": "className",
           "type": "string",
@@ -2854,7 +3022,7 @@
       "name": "Tabs",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A horizontal row of tabs, underlining the active one and showing optional count badges.\naliases: TabRow|TabNavigation|TabBar\nDesign system 2.0\n\nFollows the ARIA tabs pattern with automatic activation: only the active tab is\nin the tab order, and the arrow keys move both focus and selection. `Home` and\n`End` jump to the first and last tab, and the arrows wrap around the ends.\nTabs marked `disabled` are greyed out, cannot be clicked, and are skipped by\nkeyboard navigation.\n\nThe component renders the tabs only; the panels stay with the consumer.",
+      "description": "A row or rail of tabs, marking the active one and showing optional icons and count badges.\naliases: TabRow|TabNavigation|TabBar|VerticalTabs|SettingsNav|SideNav\nDesign system 2.0\n\nFollows the ARIA tabs pattern with automatic activation: only the active tab is\nin the tab order, and the arrow keys move both focus and selection. `Home` and\n`End` jump to the first and last tab, and the arrows wrap around the ends.\nTabs marked `disabled` are greyed out, cannot be clicked, and are skipped by\nkeyboard navigation.\n\n`TabOrientation.Horizontal` draws the default row: the active tab takes a\ngradient underline, and `ArrowLeft` / `ArrowRight` move along it.\n`TabOrientation.Vertical` draws the settings-page rail instead — full-width\nrows with the active one on a tinted pill rather than an underline, driven by\n`ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs\nlabel whole pages of a settings surface; the row, when they filter one.\n\n`className` lands on whichever element is outermost: the heading wrapper when\n`sectionLabel` is set, the `role=\"tablist\"` itself when it is not.\n\nThe component renders the tabs only; the panels stay with the consumer.",
       "props": [
         {
           "name": "tabs",
@@ -2874,6 +3042,19 @@
           "required": true,
           "description": "Fired with the tab's `id` when the user selects a tab."
         },
+        {
+          "name": "orientation",
+          "type": "TabOrientation",
+          "required": false,
+          "defaultValue": "TabOrientation.Horizontal",
+          "description": "Layout direction of the tab list."
+        },
+        {
+          "name": "sectionLabel",
+          "type": "string",
+          "required": false,
+          "description": "Heading rendered above the tabs, which also names the tab list."
+        },
         {
           "name": "ariaLabel",
           "type": "string",
@@ -2884,17 +3065,30 @@
           "name": "className",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the tab list container."
+          "description": "Additional CSS classes for the root element."
+        },
+        {
+          "name": "tabListClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the `role=\"tablist\"`."
         },
         {
           "name": "tabClassName",
           "type": "string",
           "required": false,
           "description": "Additional CSS classes applied to every tab."
+        },
+        {
+          "name": "sectionLabelClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the `sectionLabel` heading."
         }
       ],
       "examples": [
-        "<Tabs\n  ariaLabel=\"Conversation views\"\n  tabs={[\n    { id: 'all', label: 'All', count: 12 },\n    { id: 'shared', label: 'Shared with me' },\n  ]}\n  activeTabId={activeTabId}\n  onTabChange={setActiveTabId}\n/>"
+        "<Tabs\n  ariaLabel=\"Conversation views\"\n  tabs={[\n    { id: 'all', label: 'All', count: 12 },\n    { id: 'shared', label: 'Shared with me' },\n  ]}\n  activeTabId={activeTabId}\n  onTabChange={setActiveTabId}\n/>",
+        "<Tabs\norientation={TabOrientation.Vertical}\nsectionLabel={t('Settings')}\nclassName=\"w-[240px] shrink-0 border-e border-e-tertiary\"\ntabs={[\n{ id: 'preferences', label: t('Preferences'), icon: <IconSettings size={18} /> },\n{ id: 'usage', label: t('Usage'), icon: <IconChartBar size={18} /> },\n]}\nactiveTabId={activeTabId}\nonTabChange={setActiveTabId}\n/>"
       ],
       "sourceFile": "components/New/Tabs/Tabs.tsx"
     },
@@ -3050,156 +3244,1024 @@
       "sourceFile": "components/New/FileDropzone/FileDropzone.tsx"
     },
     {
-      "name": "Tag",
+      "name": "FileIcon",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe tag has one height — the 32px pill of the 2.0 design. There is no `size`\nprop: a tag sizes itself, and a caller that needs a different height is\nusually reaching for a button.\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.\n\nNo tag draws a rim; the two appearances are told apart by their fill.\n`TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill\nat all until it is selected, one hover tint shared by both states, a semibold\nlabel once selected, and the state carried on `aria-pressed` rather than by\nthe tint alone. Give it an `onClick` — a selectable tag that cannot be\nactivated is a colour and nothing else.\n\nSelecting one therefore changes its width by the difference between the\nregular and semibold label. In a wrapping filter row that is what the design\nasks for; if a fixed width matters, give the chip one.",
+      "description": "The icon of a file or folder row in a file manager: a file-type glyph picked\nby extension, or a folder, with an optional shared badge and loading state.\naliases: FileTypeIcon|EntityIcon\nDesign system 2.0\n\nThe root is a `role=\"img\"` whose name says what the item is, and that it is\nshared — the badge itself is drawn inside the image, so its tooltip is a\npointer-only hint and never the only place the state is conveyed. While\n`loading`, the root drops the role and holds a `Spinner`, which announces\nitself as a status. Pass `decorative` when the row already names the item.",
       "props": [
         {
-          "name": "label",
-          "type": "string",
+          "name": "type",
+          "type": "DialItemType",
           "required": true,
-          "description": "Text content displayed inside the tag."
+          "description": "Whether the item is a file or a folder"
         },
         {
-          "name": "icon",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Icon rendered before the label."
+          "name": "name",
+          "type": "string",
+          "required": true,
+          "description": "Item name; a file's extension is read from it"
         },
         {
-          "name": "appearance",
-          "type": "TagAppearance",
+          "name": "fileExtension",
+          "type": "string",
           "required": false,
-          "defaultValue": "TagAppearance.Outlined",
-          "description": "`outlined` is the filled chip on the raised\nlayer; `selectable` is the unfilled filter chip that tints and turns semibold when selected."
+          "description": "Extension overriding the one in `name`"
         },
         {
-          "name": "selected",
+          "name": "shared",
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "Applies the accent-tinted selected styling."
+          "description": "Draws the shared badge"
         },
         {
-          "name": "disabled",
+          "name": "loading",
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put."
+          "description": "Replaces the glyph with a spinner"
         },
         {
-          "name": "closable",
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "defaultValue": "DIAL_ICON_SIZE.MD",
+          "description": "Glyph size in px"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the root element"
+        },
+        {
+          "name": "decorative",
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "Renders the remove button. Needs `onRemove` to appear."
+          "description": "Hides the icon from assistive technology"
         },
         {
-          "name": "removeLabel",
+          "name": "label",
           "type": "string",
           "required": false,
-          "description": "Accessible name of the remove button; defaults to `Remove <label>`."
+          "description": "Accessible name, overriding the generated one"
         },
         {
-          "name": "onRemove",
-          "type": "(event: MouseEvent<HTMLButtonElement>) => void",
+          "name": "loadingLabel",
+          "type": "string",
           "required": false,
-          "description": "Called when the remove button is clicked. The click does not bubble to `onClick`."
+          "defaultValue": "'Loading'",
+          "description": "Accessible name of the spinner"
+        },
+        {
+          "name": "sharedIndicatorClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the shared badge"
+        },
+        {
+          "name": "sharedIndicatorTooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Tooltip shown over the shared badge"
         }
       ],
       "examples": [
-        "<Tag label=\"TypeScript\" />\n<Tag label=\"TypeScript\" closable onRemove={() => remove('TypeScript')} />\n<Tag label=\"Drafts\" selected onClick={() => toggle('Drafts')} />\n<Tag\n  label=\"Drafts\"\n  appearance={TagAppearance.Selectable}\n  selected={isSelected}\n  onClick={() => toggle('Drafts')}\n/>"
+        "<FileIcon name=\"report.pdf\" type={DialItemType.File} shared />\n<FileIcon name=\"Projects\" type={DialItemType.Folder} loading />"
       ],
-      "sourceFile": "components/New/Tag/Tag.tsx"
+      "sourceFile": "components/New/FileIcon/FileIcon.tsx"
     },
     {
-      "name": "TagInput",
+      "name": "FileName",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A tag input field: type a value and commit it with Enter or comma.\naliases: MultiTag|TagField|ChipInput\nDesign system 2.0\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and the tags render as s in its\ncontent slot. The field grows as tags wrap, unless `collapseTagOverflow` keeps\nthem on one line behind a `+N` chip.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).\nDuplicate tags are ignored. Backspace on an empty input removes the last tag.",
+      "description": "A file or folder name with its type icon, truncated with a tooltip when it\ndoes not fit.\naliases: FileDisplay|NameDisplay\nDesign system 2.0\n\nThe visible name already says what the item is, so the icon is decorative;\nthe shared state, which only the badge shows, is announced by a\nvisually-hidden `sharedLabel` after the name instead.\n\nWhile `loading` the icon is swapped for a `Spinner`, which is left in the\naccessibility tree so the busy state is announced.\n\nWith `details` the text switches to two lines — the name, then the metadata.",
       "props": [
         {
-          "name": "id",
+          "name": "name",
           "type": "string",
-          "required": false,
-          "description": "The id of the text input, linked to the label."
+          "required": true,
+          "description": "Full item name, with or without an extension"
         },
         {
-          "name": "value",
-          "type": "string[]",
+          "name": "type",
+          "type": "DialItemType",
           "required": false,
-          "description": "Controlled tag list."
+          "defaultValue": "DialItemType.File",
+          "description": "Whether the item is a file or a folder"
         },
         {
-          "name": "defaultValue",
-          "type": "string[]",
+          "name": "fileExtension",
+          "type": "string",
           "required": false,
-          "description": "Initial tag list when uncontrolled."
+          "description": "Extension overriding the one in `name`"
         },
         {
-          "name": "size",
-          "type": "ElementSize",
+          "name": "shared",
+          "type": "boolean",
           "required": false,
-          "defaultValue": "ElementSize.Standard",
-          "description": "Field height: standard is 40px, small is 24px."
+          "defaultValue": "false",
+          "description": "Draws the shared badge on the icon"
         },
         {
-          "name": "labelProps",
-          "type": "LabelProps",
+          "name": "loading",
+          "type": "boolean",
           "required": false,
-          "description": "Props of the  rendered above the field."
+          "defaultValue": "false",
+          "description": "Replaces the icon with a spinner"
         },
         {
-          "name": "placeholder",
+          "name": "loadingLabel",
           "type": "string",
           "required": false,
-          "description": "Placeholder shown while there are no tags."
+          "description": "Accessible name of the spinner"
         },
         {
-          "name": "caption",
-          "type": "string",
+          "name": "iconSize",
+          "type": "number",
           "required": false,
-          "description": "Helper text rendered below the field when there is no `error`."
+          "description": "Icon size in px"
         },
         {
-          "name": "error",
-          "type": "string",
+          "name": "details",
+          "type": "ReactNode",
           "required": false,
-          "description": "Error message rendered below the field (pass `invalid` too for error styling)."
+          "description": "Metadata under the name"
         },
         {
-          "name": "invalid",
+          "name": "isInvalidName",
           "type": "boolean",
           "required": false,
-          "description": "Applies the field's error styling."
+          "defaultValue": "false",
+          "description": "Mutes the name, marking it as invalid"
         },
         {
-          "name": "disabled",
-          "type": "boolean",
+          "name": "className",
+          "type": "string",
           "required": false,
-          "defaultValue": "false",
-          "description": "Disables typing and tag removal."
+          "description": "Additional CSS classes for the root element"
         },
         {
-          "name": "readOnly",
-          "type": "boolean",
+          "name": "nameClassName",
+          "type": "string",
           "required": false,
-          "defaultValue": "false",
-          "description": "Shows the tags without allowing new ones or removal."
+          "description": "Additional CSS classes for the name text"
+        },
+        {
+          "name": "sharedIndicatorClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the shared badge"
+        },
+        {
+          "name": "sharedIndicatorTooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Tooltip shown over the shared badge"
+        },
+        {
+          "name": "sharedLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Shared'",
+          "description": "Screen-reader text announcing the shared state"
+        },
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Suppresses the full-name tooltip"
+        },
+        {
+          "name": "tooltipContent",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Shown instead of the full name while truncated"
+        }
+      ],
+      "examples": [
+        "<FileName name=\"Document.pdf\" shared />\n<FileName\n  name=\"Document.pdf\"\n  details={<span className=\"dial-tiny-text text-secondary\">24 KB · Jul 20</span>}\n/>"
+      ],
+      "sourceFile": "components/New/FileName/FileName.tsx"
+    },
+    {
+      "name": "FolderName",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A folder name with the folder icon, truncated with a tooltip when it does\nnot fit.\naliases: FolderDisplay|DirectoryName\nDesign system 2.0\n\nA `FileName` fixed to `DialItemType.Folder`, so it shares every behaviour of\nit — decorative icon, visually-hidden shared label, `details` line and the\n`loading` spinner. Its root carries `dial-kit-folder-name` on top of\n`dial-kit-file-name`.",
+      "props": [],
+      "examples": [
+        "<FolderName name=\"Organization\" shared />\n<FolderName name=\"Uploads\" loading />"
+      ],
+      "sourceFile": "components/New/FolderName/FolderName.tsx"
+    },
+    {
+      "name": "SharedEntityIndicator",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A small arrow badge marking an entity as shared.\naliases: SharedIcon|AccessIndicator\nDesign system 2.0\n\nA `role=\"img\"` named by `label`, so it can stand on its own. Placed inside a\nlarger `role=\"img\"` — as `FileIcon` does — its name is folded into the\nparent's, which is why `FileIcon` names the shared state itself. The tooltip\nis a pointer-only hint: the badge is not focusable, and the tooltip never\nreaches assistive technology, so `label` is what carries the meaning.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Shared'",
+          "description": "Accessible name of the badge"
+        },
+        {
+          "name": "tooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Tooltip shown while the badge is hovered"
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "defaultValue": "12",
+          "description": "Arrow size in px"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the badge"
+        }
+      ],
+      "examples": [
+        "<SharedEntityIndicator />\n<SharedEntityIndicator tooltip=\"Shared with 3 people\" className=\"absolute -bottom-0.5 -left-0.5\" />"
+      ],
+      "sourceFile": "components/New/SharedEntityIndicator/SharedEntityIndicator.tsx"
+    },
+    {
+      "name": "BottomSheet",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A panel that slides up from the bottom edge over a dimmed page — the mobile\ncounterpart of `Popup`.\naliases: ActionSheet|Drawer|MobileSheet|BottomDrawer\nDesign system 2.0\n\nIt is a modal dialog: focus moves into it on open and stays there, returns\nto where it came from on close, and the page behind it does not scroll.\nEscape, the close button and a press on the backdrop all call `onClose`;\nthe sheet itself stays controlled by `open`.\n\nWith a `title` the header shows it centred, a close button at the end and,\nwhen `onBack` is set, a back button at the start for a sheet that drills\ninto pages of its own; the title also names the dialog. Without one there is\nno header, and `ariaLabel` names the sheet instead. The body scrolls once\nthe content is taller than 85% of the viewport.",
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": true,
+          "description": "Whether the sheet is shown"
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "required": true,
+          "description": "Called when the sheet asks to close"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "description": "Title of the header; without it the sheet has no header"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name when there is no `title`"
+        },
+        {
+          "name": "onBack",
+          "type": "() => void",
+          "required": false,
+          "description": "Shows a back button at the start of the header"
+        },
+        {
+          "name": "backAriaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Back'",
+          "description": "Accessible name of the back button"
+        },
+        {
+          "name": "closeAriaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Close'",
+          "description": "Accessible name of the close button"
+        },
+        {
+          "name": "closeOnOutsideClick",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether a press on the backdrop closes the sheet"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content of the sheet"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the sheet panel"
+        },
+        {
+          "name": "overlayClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the backdrop"
+        },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the header row"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the panel, e.g. custom properties"
+        },
+        {
+          "name": "overlayStyle",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the backdrop"
+        },
+        {
+          "name": "bodyClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the scrolling body"
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Type-scale class for the title"
+        },
+        {
+          "name": "portalId",
+          "type": "string",
+          "required": false,
+          "description": "Id of the element to portal into"
+        }
+      ],
+      "examples": [
+        "<BottomSheet open={isOpen} title=\"Select model\" onClose={() => setIsOpen(false)}>\n  <ModelList />\n</BottomSheet>"
+      ],
+      "sourceFile": "components/New/BottomSheet/BottomSheet.tsx"
+    },
+    {
+      "name": "Badge",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A short, static label: a topic, a category, or a status that is not a\ncontrol.\naliases: Label|StatusLabel|Pill|Chip\nDesign system 2.0\n\nUnlike `Tag`, a badge never responds to the pointer and never removes\nitself — reach for `Tag` when the label is something to select, filter by or\ndismiss. The badge is 24px tall and does not wrap; a long label keeps its\nwidth, so give the badge a `max-w-*` and a truncating `textClassName` where\nthat matters.\n\n`BadgeVariant.Outlined` is the neutral label, bordered on the sunken layer.\n`BadgeVariant.Filled` is a pill in one of the theme's visual colours, for\nlabels that are told apart by colour — so pair the colour with text that\nsays the same thing, since colour alone does not reach every reader. The\nfilled variant's type scale is a lead style, which uppercases itself: pass\nthe label in sentence case.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "Text of the badge"
+        },
+        {
+          "name": "variant",
+          "type": "BadgeVariant",
+          "required": false,
+          "defaultValue": "BadgeVariant.Outlined",
+          "description": "How the badge is drawn"
+        },
+        {
+          "name": "color",
+          "type": "BadgeColor",
+          "required": false,
+          "defaultValue": "BadgeColor.Blue",
+          "description": "Visual colour of a filled badge"
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Decorative icon before the label"
+        },
+        {
+          "name": "textClassName",
+          "type": "string",
+          "required": false,
+          "description": "Type-scale class for the label, replacing the variant's own"
+        }
+      ],
+      "examples": [
+        "<Badge label=\"Translation\" />\n<Badge label=\"Featured\" variant={BadgeVariant.Filled} color={BadgeColor.Green} />"
+      ],
+      "sourceFile": "components/New/Badge/Badge.tsx"
+    },
+    {
+      "name": "Avatar",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A person's or an entity's picture, or its initials on a colour picked from\nits name.\naliases: UserAvatar|InitialsAvatar|ProfilePicture\nDesign system 2.0\n\nThe same name always gets the same colour, drawn from the theme's visual\ntokens, so a list of avatars stays stable between renders and sessions. An\nimage that is missing or fails to load falls back to the initials; a new\n`src` tries the image again.\n\nAn avatar with an `alt` is a `role=\"img\"` named by it, whether it shows the\nimage or the initials. Without one it is decorative and hidden from\nassistive technology, which is right when a visible name sits beside it.",
+      "props": [
+        {
+          "name": "name",
+          "type": "string",
+          "required": true,
+          "description": "Display name the initials and the colour are derived from"
+        },
+        {
+          "name": "initials",
+          "type": "string",
+          "required": false,
+          "description": "Initials to show instead of the ones derived from `name`"
+        },
+        {
+          "name": "src",
+          "type": "string",
+          "required": false,
+          "description": "Image URL; the initials show while it is missing or broken"
+        },
+        {
+          "name": "alt",
+          "type": "string",
+          "required": false,
+          "defaultValue": "''",
+          "description": "Accessible name; empty makes the avatar decorative"
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "defaultValue": "32",
+          "description": "Width and height in px"
+        },
+        {
+          "name": "shape",
+          "type": "AvatarShape",
+          "required": false,
+          "defaultValue": "AvatarShape.Circle",
+          "description": "Outline of the avatar"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the avatar"
+        },
+        {
+          "name": "textClassName",
+          "type": "string",
+          "required": false,
+          "description": "Type-scale class for the initials, replacing the size-derived font size"
+        },
+        {
+          "name": "onImageError",
+          "type": "(event: SyntheticEvent<HTMLImageElement>) => void",
+          "required": false,
+          "description": "Called when the image fails to load"
+        }
+      ],
+      "examples": [
+        "<Avatar name=\"Ada Lovelace\" src={photoUrl} alt=\"Ada Lovelace\" />\n<Avatar name=\"Summarizer\" shape={AvatarShape.Square} size={36} />"
+      ],
+      "sourceFile": "components/New/Avatar/Avatar.tsx"
+    },
+    {
+      "name": "EntityIdentity",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The identity block of a DIAL entity: its icon, a coloured type label, the\nname and the version, with an optional featured chip.\naliases: EntityHeader|ModelHeader|AppIdentity\nDesign system 2.0\n\nThe type label is plain uppercase text coloured by `item.type`. The icon is\na square `Avatar`, so a missing or broken image falls back to the initials of\nthe name. The icon is decorative: the name next to it already names the\nentity.",
+      "props": [
+        {
+          "name": "item",
+          "type": "EntityIdentityItem",
+          "required": true,
+          "description": "The entity to display"
+        },
+        {
+          "name": "labels",
+          "type": "EntityIdentityLabels",
+          "required": false,
+          "description": "User-visible strings"
+        },
+        {
+          "name": "showVersion",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the version"
+        },
+        {
+          "name": "hasFeaturedTag",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the featured chip for a featured entity"
+        },
+        {
+          "name": "iconSize",
+          "type": "number",
+          "required": false,
+          "defaultValue": "48",
+          "description": "Icon size in px"
+        },
+        {
+          "name": "headingLevel",
+          "type": "number",
+          "required": false,
+          "defaultValue": "3",
+          "description": "Heading level of the name"
+        },
+        {
+          "name": "query",
+          "type": "string",
+          "required": false,
+          "description": "Search query highlighted in the name"
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content pinned to the bottom of the text column"
+        },
+        {
+          "name": "statusBadge",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Badge in the top-end corner"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "nameClassName",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'dial-h3-text'"
+        },
+        {
+          "name": "typeClassName",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'dial-caption-lead-semi-text'"
+        },
+        {
+          "name": "versionClassName",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'dial-tiny-text'"
+        },
+        {
+          "name": "iconClassName",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "featuredChipClassName",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<EntityIdentity\n  item={{ type: EntityType.Model, name: 'GPT-4o', version: '2024-11-20' }}\n  labels={{ type: t('Model') }}\n/>"
+      ],
+      "sourceFile": "components/New/EntityIdentity/EntityIdentity.tsx"
+    },
+    {
+      "name": "SideDrawer",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A full-height panel that slides in from the inline end over a dimmed page.\naliases: Drawer|SidePanel|SideSheet|DetailsPanel\nDesign system 2.0\n\nIt is a modal dialog while open: focus moves to the panel and stays inside,\nreturns to where it came from on close, and the page behind it does not\nscroll. Escape, the close button and a press on the backdrop all call\n`onClose`; the drawer stays controlled by `open`.\n\nThe panel stays mounted while closed, so it can slide out as well as in and\nkeep the state of whatever it holds. Closed, it is `inert` — out of both\nthe tab order and the accessibility tree — and the backdrop lets pointer\nevents through. On desktop the drawer is 540px wide with a rounded,\nbordered leading edge; on mobile it takes the full width. It slides from\nthe end in either direction, and not at all under `prefers-reduced-motion`.\n\nThe header follows `Popup`: an optional back button, the title,\n`headerActions`, and the close button. A string `header` renders an `<h2>`\nthat names the dialog; for a node, pass `ariaLabel`.",
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": true,
+          "description": "Whether the drawer is open"
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "required": true,
+          "description": "Called when the drawer asks to close"
+        },
+        {
+          "name": "header",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Header title; a string also names the dialog"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name when `header` is not a string"
+        },
+        {
+          "name": "headerActions",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Controls between the title and the close button"
+        },
+        {
+          "name": "onBack",
+          "type": "() => void",
+          "required": false,
+          "description": "Shows a back button at the start of the header"
+        },
+        {
+          "name": "backAriaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Back'",
+          "description": "Accessible name of the back button"
+        },
+        {
+          "name": "backDisabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the back button is disabled"
+        },
+        {
+          "name": "closeAriaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Close'",
+          "description": "Accessible name of the close button"
+        },
+        {
+          "name": "closeDisabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the close button is disabled"
+        },
+        {
+          "name": "hideClose",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the close button is left out"
+        },
+        {
+          "name": "closeOnOutsideClick",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether a press on the backdrop closes the drawer"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content of the drawer"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the drawer panel"
+        },
+        {
+          "name": "overlayClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the backdrop"
+        },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the header row"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the panel, e.g. custom properties"
+        },
+        {
+          "name": "overlayStyle",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the backdrop"
+        },
+        {
+          "name": "bodyClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the scrolling body"
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Type-scale class for a string title"
+        },
+        {
+          "name": "portalId",
+          "type": "string",
+          "required": false,
+          "description": "Id of the element to portal into"
+        }
+      ],
+      "examples": [
+        "<SideDrawer open={isOpen} header=\"Publish\" onClose={() => setIsOpen(false)}>\n  <PublishForm />\n</SideDrawer>"
+      ],
+      "sourceFile": "components/New/SideDrawer/SideDrawer.tsx"
+    },
+    {
+      "name": "Tag",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe tag has one height — the 32px pill of the 2.0 design. There is no `size`\nprop: a tag sizes itself, and a caller that needs a different height is\nusually reaching for a button.\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.\n\nNo tag draws a rim; the two appearances are told apart by their fill.\n`TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill\nat all until it is selected, one hover tint shared by both states, a semibold\nlabel once selected, and the state carried on `aria-pressed` rather than by\nthe tint alone. Give it an `onClick` — a selectable tag that cannot be\nactivated is a colour and nothing else.\n\nSelecting one therefore changes its width by the difference between the\nregular and semibold label. In a wrapping filter row that is what the design\nasks for; if a fixed width matters, give the chip one.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "Text content displayed inside the tag."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered before the label."
+        },
+        {
+          "name": "appearance",
+          "type": "TagAppearance",
+          "required": false,
+          "defaultValue": "TagAppearance.Outlined",
+          "description": "`outlined` is the filled chip on the raised\nlayer; `selectable` is the unfilled filter chip that tints and turns semibold when selected."
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Applies the accent-tinted selected styling."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put."
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders the remove button. Needs `onRemove` to appear."
+        },
+        {
+          "name": "removeLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name of the remove button; defaults to `Remove <label>`."
+        },
+        {
+          "name": "onRemove",
+          "type": "(event: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Called when the remove button is clicked. The click does not bubble to `onClick`."
+        }
+      ],
+      "examples": [
+        "<Tag label=\"TypeScript\" />\n<Tag label=\"TypeScript\" closable onRemove={() => remove('TypeScript')} />\n<Tag label=\"Drafts\" selected onClick={() => toggle('Drafts')} />\n<Tag\n  label=\"Drafts\"\n  appearance={TagAppearance.Selectable}\n  selected={isSelected}\n  onClick={() => toggle('Drafts')}\n/>"
+      ],
+      "sourceFile": "components/New/Tag/Tag.tsx"
+    },
+    {
+      "name": "TagInput",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A tag input field: type a value and commit it with Enter or comma.\naliases: MultiTag|TagField|ChipInput\nDesign system 2.0\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and the tags render as s in its\ncontent slot. The field grows as tags wrap, unless `collapseTagOverflow` keeps\nthem on one line behind a `+N` chip.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).\nDuplicate tags are ignored. Backspace on an empty input removes the last tag.",
+      "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The id of the text input, linked to the label."
+        },
+        {
+          "name": "value",
+          "type": "string[]",
+          "required": false,
+          "description": "Controlled tag list."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "description": "Initial tag list when uncontrolled."
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Field height: standard is 40px, small is 24px."
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the field."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder shown while there are no tags."
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the field when there is no `error`."
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the field (pass `invalid` too for error styling)."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Applies the field's error styling."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables typing and tag removal."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Shows the tags without allowing new ones or removal."
         },
         {
           "name": "collapseTagOverflow",
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "Keep the tags on one line, replacing the ones that do not fit with a `+N` chip."
+          "description": "Keep the tags on one line, replacing the ones that do not fit with a `+N` chip."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the text input; use it when there is no visible label."
+        },
+        {
+          "name": "tagListLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Tags'",
+          "description": "Accessible name of the tag list."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the field itself."
+        },
+        {
+          "name": "tagClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to every tag."
+        },
+        {
+          "name": "onChange",
+          "type": "(tags: string[]) => void",
+          "required": false,
+          "description": "Called with the new list whenever a tag is added or removed."
+        }
+      ],
+      "examples": [
+        "const [tags, setTags] = useState<string[]>(['React']);\n\n<TagInput\n  id=\"skills\"\n  labelProps={{ label: 'Skills' }}\n  placeholder=\"Add a skill\"\n  caption=\"Press Enter or comma to add\"\n  value={tags}\n  onChange={setTags}\n/>"
+      ],
+      "sourceFile": "components/New/TagInput/TagInput.tsx"
+    },
+    {
+      "name": "AutocompleteTagInput",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A tag input that suggests values while typing and also accepts its own.\naliases: Autocomplete|Combobox|TagAutocomplete|ChipAutocomplete|MultiValueAutocomplete\nDesign system 2.0\n\nTyping opens a list of the `suggestions` that match the text (by label, value\nor description) and are not already tags, capped at `maxSuggestions`, with the\nfirst one highlighted. Enter or comma adds the highlighted suggestion, or the\ntyped text when nothing matches; clicking a suggestion adds it too. The arrow\nkeys move the highlight and wrap at the ends; Escape and leaving the field\nclose the list without adding what was typed. Backspace on an empty input\nremoves the last tag, and duplicate tags are ignored. Entered text is not\nvalidated — say what format is expected through `caption`.\n\nWith `openOnFocus`, focusing or clicking the input opens the list of every\nsuggestion that is not yet a tag, uncapped by `maxSuggestions`, with nothing\nhighlighted, so Enter adds nothing the user did not choose. Picking one keeps\nthe list open for the next pick; typing filters it as usual.\n\nReach for  when there is nothing to suggest, and for a\nmultiple `Select` when only listed values are allowed.\n\nThe input follows the ARIA combobox pattern: it keeps focus while the list is\nopen, and the highlighted suggestion is announced through\n`aria-activedescendant`. The tags are a list named by `tagListLabel`, and each\nremove button is named after its tag.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).",
+      "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The id of the text input, linked to the label."
+        },
+        {
+          "name": "value",
+          "type": "string[]",
+          "required": false,
+          "description": "Controlled tag list."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "description": "Initial tag list when uncontrolled."
+        },
+        {
+          "name": "suggestions",
+          "type": "AutocompleteTagInputSuggestion[]",
+          "required": true,
+          "description": "Values offered while typing."
+        },
+        {
+          "name": "maxSuggestions",
+          "type": "number",
+          "required": false,
+          "defaultValue": "DEFAULT_MAX_SUGGESTIONS",
+          "description": "How many matching suggestions the list shows at most."
+        },
+        {
+          "name": "openOnFocus",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Opens the full list of suggestions that are not yet tags on focus or click, and keeps it open after a pick."
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Field height: standard is 40px, small is 24px."
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the field."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder shown while there are no tags."
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the field when there is no `error`."
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the field (pass `invalid` too for error styling)."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Applies the field's error styling and marks the input `aria-invalid`."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables typing and tag removal."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Shows the tags without allowing new ones or removal."
         },
         {
           "name": "ariaLabel",
           "type": "string",
           "required": false,
-          "description": "Accessible name for the text input; use it when there is no visible label."
+          "description": "Accessible name for the input; use it when there is no visible label."
         },
         {
           "name": "tagListLabel",
@@ -3208,6 +4270,12 @@
           "defaultValue": "'Tags'",
           "description": "Accessible name of the tag list."
         },
+        {
+          "name": "getRemoveTagLabel",
+          "type": "(tag: string) => string",
+          "required": false,
+          "description": "Accessible name of a tag's remove button, given the tag; pass a translated one, as the default is the English `Remove <tag>`."
+        },
         {
           "name": "className",
           "type": "string",
@@ -3226,6 +4294,12 @@
           "required": false,
           "description": "Additional CSS classes applied to every tag."
         },
+        {
+          "name": "listClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the floating suggestion list."
+        },
         {
           "name": "onChange",
           "type": "(tags: string[]) => void",
@@ -3234,9 +4308,9 @@
         }
       ],
       "examples": [
-        "const [tags, setTags] = useState<string[]>(['React']);\n\n<TagInput\n  id=\"skills\"\n  labelProps={{ label: 'Skills' }}\n  placeholder=\"Add a skill\"\n  caption=\"Press Enter or comma to add\"\n  value={tags}\n  onChange={setTags}\n/>"
+        "const [types, setTypes] = useState<string[]>([]);\n\n<AutocompleteTagInput\n  id=\"attachment-types\"\n  labelProps={{ label: 'Attachment types', required: true }}\n  caption=\"Choose a suggested MIME type or add one as <type>/<subtype>\"\n  suggestions={[\n    { value: 'image/png', label: 'PNG', description: 'image/png' },\n    { value: 'application/pdf', label: 'PDF', description: 'application/pdf' },\n  ]}\n  value={types}\n  onChange={setTypes}\n/>"
       ],
-      "sourceFile": "components/New/TagInput/TagInput.tsx"
+      "sourceFile": "components/New/AutocompleteTagInput/AutocompleteTagInput.tsx"
     },
     {
       "name": "Search",
@@ -3328,6 +4402,45 @@
           "defaultValue": "false",
           "description": "Renders the current value at the end of the label row"
         },
+        {
+          "name": "showTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders the current value in a bubble above the thumb; hidden while disabled"
+        },
+        {
+          "name": "showTicks",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders a tick mark at every step on the unfilled track; hidden while disabled"
+        },
+        {
+          "name": "leftContent",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content before the track, vertically centred on it"
+        },
+        {
+          "name": "rightContent",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content after the track, vertically centred on it"
+        },
+        {
+          "name": "showValueInput",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders a compact (24px), synced `NumberInput` after the track (clamped to `min`/`max`, snapped to `step`); replaces `rightContent`"
+        },
+        {
+          "name": "valueInputAriaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name of the value input; defaults to a string `labelProps.label`"
+        },
         {
           "name": "caption",
           "type": "string",
@@ -3468,7 +4581,7 @@
       "name": "InteractiveTooltip",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A hover panel that, unlike , can hold its own interactive\ncontent.\naliases: HoverCard|InfoPopover\nDesign system 2.0\n\nOpens next to the trigger on hover or focus, the way a tooltip does, but\nstays open while the pointer moves into the panel so its content — links,\nbuttons, anything — can be hovered and clicked. It carries no `role`, since\nARIA's `tooltip` role forbids focusable content and this is meant to hold\nsome; a panel with meaningfully interactive content should still be\nreachable without a mouse (Tab from the trigger reaches it), but a purely\ndecorative one is fine to leave out of the tab order entirely.\n\nRenders nothing on a mobile screen, where there is no hover to reveal it —\nso, as with , a control must never depend on this panel alone\nto be understood or operated.",
+      "description": "A hover panel that, unlike , can hold its own interactive\ncontent.\naliases: HoverCard|InfoPopover\nDesign system 2.0\n\nOpens next to the trigger on hover or focus, the way a tooltip does, but\nstays open while the pointer moves into the panel so its content — links,\nbuttons, anything — can be hovered and clicked. It carries no `role`, since\nARIA's `tooltip` role forbids focusable content and this is meant to hold\nsome; a panel with meaningfully interactive content should still be\nreachable without a mouse (Tab from the trigger reaches it), but a purely\ndecorative one is fine to leave out of the tab order entirely.\n\nRenders nothing on a mobile screen, where there is no hover to reveal it —\nso, as with , a control must never depend on this panel alone\nto be understood or operated. A trigger whose only job is to reveal the\npanel, such as an info chip, sets `trigger={InteractiveTooltipTrigger.Click}`\ninstead: the panel then opens on click or tap, works on every screen size,\nand no longer reacts to hover or focus. Do not use it on a trigger that has\nan action of its own, since the same tap would run both.",
       "props": [
         {
           "name": "content",
@@ -3510,6 +4623,12 @@
           "defaultValue": "false",
           "description": "Whether the panel starts open (uncontrolled only)"
         },
+        {
+          "name": "trigger",
+          "type": "InteractiveTooltipTrigger",
+          "required": false,
+          "description": "What opens the panel: hover or focus, or a click or tap that keeps it open until dismissed"
+        },
         {
           "name": "open",
           "type": "boolean",
@@ -3864,6 +4983,67 @@
       ],
       "sourceFile": "components/New/NoDataContent/NoDataContent.tsx"
     },
+    {
+      "name": "TransferQueue",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A floating panel listing the files of an upload, download, import or export\nwith a live status per row.\naliases: UploadQueue|ImportQueue|ExportQueue|UploadProgress|ProgressToast\nDesign system 2.0\n\nEach row shows the file's `FileIcon` and name, and a trailing status: a\nspinner (with a cancel control on hover or focus) while in progress, a check\non success, a warning or error icon whose reason is both its tooltip and its\naccessible name, or \"Canceled\". The header carries the host's title, a count\nof failed items, and collapse and close controls. Collapsed while work runs,\nthe rows are replaced by one aggregate `ProgressBar`.\n\nClosing while an item is in progress or has failed asks for confirmation\nfirst. Once every item has succeeded the queue closes itself after\n`autoCloseDelay`; a warned or canceled row keeps it open so it can be read.\n\nThe root is a polite `role=\"status\"` live region. Positioning is left to\nthe host — wrap it in a fixed container at the screen corner.",
+      "props": [
+        {
+          "name": "title",
+          "type": "string",
+          "required": true,
+          "description": "Heading, rendered verbatim"
+        },
+        {
+          "name": "items",
+          "type": "TransferQueueItem[]",
+          "required": true,
+          "description": "Items to show, in display order"
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "required": true,
+          "description": "Called when the queue should close"
+        },
+        {
+          "name": "onCancelItem",
+          "type": "(id: string) => void",
+          "required": false,
+          "description": "Called with an item's id when the user cancels it"
+        },
+        {
+          "name": "labels",
+          "type": "Partial<TransferQueueLabels>",
+          "required": false,
+          "description": "Overrides for the English default strings"
+        },
+        {
+          "name": "autoCloseDelay",
+          "type": "number",
+          "required": false,
+          "defaultValue": "TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS",
+          "description": "Delay before an all-succeeded queue closes itself; `0` disables"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the root panel"
+        },
+        {
+          "name": "bodyClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the list of rows"
+        }
+      ],
+      "examples": [
+        "<TransferQueue\n  title=\"Importing 2 files\"\n  items={[\n    { id: '1', name: 'report.pdf', status: TransferQueueItemStatus.Success },\n    { id: '2', name: 'data.csv', status: TransferQueueItemStatus.InProgress, percent: 40 },\n  ]}\n  onClose={handleClose}\n  onCancelItem={handleCancel}\n/>"
+      ],
+      "sourceFile": "components/New/TransferQueue/TransferQueue.tsx"
+    },
     {
       "name": "Grid",
       "category": "Components_2_0",
@@ -5552,7 +6732,8 @@
       "examples": [
         "<DialFileIcon extension=\".pdf\" />\n<DialFileIcon extension=\"tsx\" size={28} stroke={1.25} />\n<DialFileIcon extension=\"unknown\" decorative /> // decorative, hidden from AT"
       ],
-      "sourceFile": "components/FileIcon/FileIcon.tsx"
+      "sourceFile": "components/FileIcon/FileIcon.tsx",
+      "supersededBy": "FileIcon"
     },
     {
       "name": "DialFormItem",
@@ -5670,7 +6851,8 @@
       "examples": [
         "<DialSharedEntityIndicator />\n<DialSharedEntityIndicator size={12} label=\"Opens in new window\" />"
       ],
-      "sourceFile": "components/SharedEntityIndicator/SharedEntityIndicator.tsx"
+      "sourceFile": "components/SharedEntityIndicator/SharedEntityIndicator.tsx",
+      "supersededBy": "SharedEntityIndicator"
     },
     {
       "name": "DialFileName",
@@ -5750,7 +6932,8 @@
       "examples": [
         "// Without details\n<DialFileName name=\"Document.pdf\" />\n\n// With details (file size and updated date)\n<DialFileName\n  name=\"Document.pdf\"\n  details={<span className=\"text-secondary\">24 KB · Jul 20, 2025</span>}\n/>"
       ],
-      "sourceFile": "components/FileName/FileName.tsx"
+      "sourceFile": "components/FileName/FileName.tsx",
+      "supersededBy": "FileName"
     },
     {
       "name": "DialFolderName",
@@ -5827,7 +7010,8 @@
       "examples": [
         "<DialFolderName name=\"Organization\" />"
       ],
-      "sourceFile": "components/FolderName/FolderName.tsx"
+      "sourceFile": "components/FolderName/FolderName.tsx",
+      "supersededBy": "FolderName"
     },
     {
       "name": "DialResizableContainer",
@@ -8340,6 +9524,12 @@
           "required": false,
           "description": "Optional tooltip displayed when a file or folder name contains forbidden characters"
         },
+        {
+          "name": "skipForbiddenSymbolsCheckForActions",
+          "type": "boolean",
+          "required": false,
+          "description": "When provided, skips the forbidden-symbols check when building row action menus, so all actions are shown even for items whose names contain forbidden characters."
+        },
         {
           "name": "onCreateFolder",
           "type": "(\n    file: DialUploadFileItem,\n    folderPath: string,\n    fileId: string,\n  ) => void | Promise<void>",
@@ -8784,7 +9974,8 @@
       "examples": [
         "<DialSchemaRenderer\n  schema={mySchema}\n  onChange={(v) => console.log(v)}\n  onDefaultValues={(defaults) => console.log(defaults)}\n/>"
       ],
-      "sourceFile": "components/SchemaRenderer/SchemaRenderer.tsx"
+      "sourceFile": "components/SchemaRenderer/SchemaRenderer.tsx",
+      "supersededBy": "SchemaRenderer"
     },
     {
       "name": "DialJsonEditor",
@@ -8889,6 +10080,13 @@
           "type": "ReactNode",
           "required": false,
           "description": "Content to display when the editor is empty"
+        },
+        {
+          "name": "showDragbar",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the bottom drag bar that resizes the editor height"
         }
       ],
       "examples": [
@@ -9142,6 +10340,10 @@
           "name": "Static",
           "value": "'static'"
         },
+        {
+          "name": "Starter",
+          "value": "'starter'"
+        },
         {
           "name": "Success",
           "value": "'success'"
@@ -10180,7 +11382,7 @@
           "value": "'flat-sections'"
         }
       ],
-      "sourceFile": "components/SchemaRenderer/types.ts"
+      "sourceFile": "types/json-schema.ts"
     },
     {
       "name": "SchemaDisplayMode",
@@ -10195,7 +11397,7 @@
           "value": "'radio'"
         }
       ],
-      "sourceFile": "components/SchemaRenderer/types.ts"
+      "sourceFile": "types/json-schema.ts"
     },
     {
       "name": "SchemaOrientation",
@@ -10210,7 +11412,7 @@
           "value": "'column'"
         }
       ],
-      "sourceFile": "components/SchemaRenderer/types.ts"
+      "sourceFile": "types/json-schema.ts"
     },
     {
       "name": "JsonSchemaType",
@@ -10245,7 +11447,7 @@
           "value": "'null'"
         }
       ],
-      "sourceFile": "components/SchemaRenderer/types.ts"
+      "sourceFile": "types/json-schema.ts"
     },
     {
       "name": "JsonSchema",
@@ -10256,7 +11458,7 @@
           "value": "Record<string, JsonSchemaDef>"
         }
       ],
-      "sourceFile": "components/SchemaRenderer/types.ts"
+      "sourceFile": "models/json-schema.ts"
     },
     {
       "name": "JsonSchemaDef",
@@ -10355,7 +11557,7 @@
           "value": "string[]"
         }
       ],
-      "sourceFile": "components/SchemaRenderer/types.ts"
+      "sourceFile": "models/json-schema.ts"
     },
     {
       "name": "ValidationError",
@@ -10370,7 +11572,132 @@
           "value": "string"
         }
       ],
-      "sourceFile": "components/SchemaRenderer/types.ts"
+      "sourceFile": "models/json-schema.ts"
+    },
+    {
+      "name": "SchemaRendererTexts",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "noItemSchema",
+          "value": "string"
+        },
+        {
+          "name": "noItemsYet",
+          "value": "string"
+        },
+        {
+          "name": "addItem",
+          "value": "string"
+        },
+        {
+          "name": "selectTypeToAdd",
+          "value": "string"
+        },
+        {
+          "name": "noConfigurableProperties",
+          "value": "string"
+        },
+        {
+          "name": "noFieldsYet",
+          "value": "string"
+        },
+        {
+          "name": "keyColumnHeader",
+          "value": "string"
+        },
+        {
+          "name": "valueColumnHeader",
+          "value": "string"
+        },
+        {
+          "name": "addField",
+          "value": "string"
+        },
+        {
+          "name": "keyInputPlaceholder",
+          "value": "string"
+        },
+        {
+          "name": "stringInputPlaceholder",
+          "value": "string"
+        },
+        {
+          "name": "integerInputPlaceholder",
+          "value": "string"
+        },
+        {
+          "name": "numberInputPlaceholder",
+          "value": "string"
+        },
+        {
+          "name": "enumSelectPlaceholder",
+          "value": "string"
+        },
+        {
+          "name": "selectTypePlaceholder",
+          "value": "string"
+        },
+        {
+          "name": "removeItemAriaLabel",
+          "value": "string"
+        },
+        {
+          "name": "removeFieldAriaLabel",
+          "value": "string"
+        },
+        {
+          "name": "typeColumnHeader",
+          "value": "string"
+        },
+        {
+          "name": "entryTypeString",
+          "value": "string"
+        },
+        {
+          "name": "entryTypeNumber",
+          "value": "string"
+        },
+        {
+          "name": "entryTypeBoolean",
+          "value": "string"
+        },
+        {
+          "name": "entryTypeNull",
+          "value": "string"
+        },
+        {
+          "name": "entryTypeObject",
+          "value": "string"
+        },
+        {
+          "name": "entryTypeArray",
+          "value": "string"
+        },
+        {
+          "name": "entryTypeChangeWarning",
+          "value": "string"
+        },
+        {
+          "name": "booleanTrueOption",
+          "value": "string"
+        },
+        {
+          "name": "booleanFalseOption",
+          "value": "string"
+        },
+        {
+          "name": "invalidJsonError",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "models/json-schema.ts"
+    },
+    {
+      "name": "SchemaRenderField",
+      "kind": "type",
+      "sourceFile": "components/New/SchemaRenderer/types.ts",
+      "typeBody": "(\n  path: string[],\n  schema: JsonSchemaDef,\n  defaultElement: ReactElement,\n) => ReactNode"
     },
     {
       "name": "NotificationVariant",
@@ -10416,36 +11743,77 @@
           "value": "'section-message'"
         }
       ],
-      "sourceFile": "types/notification.ts"
+      "sourceFile": "types/notification.ts"
+    },
+    {
+      "name": "CalendarMode",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Date",
+          "value": "'date'"
+        },
+        {
+          "name": "DateTime",
+          "value": "'datetime'"
+        },
+        {
+          "name": "Time",
+          "value": "'time'"
+        },
+        {
+          "name": "Weekday",
+          "value": "'weekday'"
+        }
+      ],
+      "sourceFile": "types/calendar.ts"
+    },
+    {
+      "name": "CalendarValue",
+      "kind": "type",
+      "sourceFile": "components/New/Calendar/Calendar.tsx",
+      "typeBody": "Date | string | null"
+    },
+    {
+      "name": "BreadcrumbsSize",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Small",
+          "value": "'small'",
+          "comment": "14px `dial-small-text`, with a `dial-small-semi-text` current page."
+        },
+        {
+          "name": "Heading",
+          "value": "'heading'",
+          "comment": "18px `dial-h2-text`, for a trail that doubles as the page heading. The\ntoken is semibold, so every segment is — including the current page."
+        }
+      ],
+      "sourceFile": "types/breadcrumbs.ts"
     },
     {
-      "name": "CalendarMode",
-      "kind": "enum",
+      "name": "BreadcrumbsItem",
+      "kind": "interface",
       "members": [
         {
-          "name": "Date",
-          "value": "'date'"
+          "name": "label",
+          "value": "string"
         },
         {
-          "name": "DateTime",
-          "value": "'datetime'"
+          "name": "href?",
+          "value": "string"
         },
         {
-          "name": "Time",
-          "value": "'time'"
+          "name": "onClick?",
+          "value": "(event: MouseEvent<HTMLElement>) => void"
         },
         {
-          "name": "Weekday",
-          "value": "'weekday'"
+          "name": "icon?",
+          "value": "ReactNode"
         }
       ],
-      "sourceFile": "types/calendar.ts"
-    },
-    {
-      "name": "CalendarValue",
-      "kind": "type",
-      "sourceFile": "components/New/Calendar/Calendar.tsx",
-      "typeBody": "Date | string | null"
+      "sourceFile": "components/New/Breadcrumbs/Breadcrumbs.tsx",
+      "description": "One step of the trail rendered by ."
     },
     {
       "name": "TextareaResize",
@@ -10470,6 +11838,24 @@
       ],
       "sourceFile": "components/New/Textarea/Textarea.tsx"
     },
+    {
+      "name": "AccordionCaretPosition",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Start",
+          "value": "'start'",
+          "comment": "Before the title, at the header's leading edge."
+        },
+        {
+          "name": "End",
+          "value": "'end'",
+          "comment": "After the title, at the header's trailing edge."
+        }
+      ],
+      "sourceFile": "types/accordion.ts",
+      "description": "Where an `Accordion` header draws its caret."
+    },
     {
       "name": "RadioGroupItem",
       "kind": "interface",
@@ -10544,6 +11930,10 @@
           "name": "count?",
           "value": "number"
         },
+        {
+          "name": "icon?",
+          "value": "ReactNode"
+        },
         {
           "name": "disabled?",
           "value": "boolean"
@@ -10571,6 +11961,147 @@
       ],
       "sourceFile": "components/New/FilterChips/FilterChips.tsx"
     },
+    {
+      "name": "BadgeColor",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Blue",
+          "value": "'blue'"
+        },
+        {
+          "name": "Green",
+          "value": "'green'"
+        },
+        {
+          "name": "Violet",
+          "value": "'violet'"
+        },
+        {
+          "name": "Indigo",
+          "value": "'indigo'"
+        },
+        {
+          "name": "Brown",
+          "value": "'brown'"
+        },
+        {
+          "name": "Red",
+          "value": "'red'"
+        }
+      ],
+      "sourceFile": "types/badge.ts",
+      "description": "The visual colour of a `BadgeVariant.Filled` badge."
+    },
+    {
+      "name": "BadgeVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Outlined",
+          "value": "'outlined'",
+          "comment": "A neutral label with a border on the sunken layer, for topics and plain categories."
+        },
+        {
+          "name": "Filled",
+          "value": "'filled'",
+          "comment": "A pill filled with one of the visual colours, for a label that is told apart by colour."
+        }
+      ],
+      "sourceFile": "types/badge.ts",
+      "description": "How a `Badge` is drawn."
+    },
+    {
+      "name": "AvatarShape",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Circle",
+          "value": "'circle'",
+          "comment": "A circle — the avatar of a person."
+        },
+        {
+          "name": "Square",
+          "value": "'square'",
+          "comment": "A rounded square — the avatar of an application, model or other entity."
+        }
+      ],
+      "sourceFile": "types/avatar.ts",
+      "description": "The outline an `Avatar` is clipped to."
+    },
+    {
+      "name": "EntityIdentityItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "type",
+          "value": "EntityType"
+        },
+        {
+          "name": "name",
+          "value": "string"
+        },
+        {
+          "name": "version?",
+          "value": "string"
+        },
+        {
+          "name": "iconUrl?",
+          "value": "string"
+        },
+        {
+          "name": "isFeatured?",
+          "value": "boolean"
+        }
+      ],
+      "sourceFile": "components/New/EntityIdentity/EntityIdentity.tsx",
+      "description": "Identity fields of the entity rendered by `EntityIdentity`."
+    },
+    {
+      "name": "EntityIdentityLabels",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "type?",
+          "value": "string"
+        },
+        {
+          "name": "featured?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/EntityIdentity/EntityIdentity.tsx",
+      "description": "User-visible strings of `EntityIdentity`."
+    },
+    {
+      "name": "EntityType",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Model",
+          "value": "'model'"
+        },
+        {
+          "name": "Agent",
+          "value": "'agent'"
+        },
+        {
+          "name": "Toolset",
+          "value": "'toolset'"
+        },
+        {
+          "name": "Skill",
+          "value": "'skill'"
+        },
+        {
+          "name": "Prompt",
+          "value": "'prompt'",
+          "comment": "Reusable text prompt. Carries a body instead of a runtime."
+        }
+      ],
+      "sourceFile": "types/entity-type.ts",
+      "description": "The category of a DIAL catalog entity. It picks the colour of the type label and the featured chip."
+    },
     {
       "name": "TagAppearance",
       "kind": "enum",
@@ -10586,6 +12117,25 @@
       ],
       "sourceFile": "types/tag.ts"
     },
+    {
+      "name": "AutocompleteTagInputSuggestion",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "value",
+          "value": "string"
+        },
+        {
+          "name": "label",
+          "value": "string"
+        },
+        {
+          "name": "description?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/AutocompleteTagInput/utils.ts"
+    },
     {
       "name": "TooltipContainerOptions",
       "kind": "interface",
@@ -10613,6 +12163,21 @@
       ],
       "sourceFile": "components/New/Tooltip/TooltipContext.tsx"
     },
+    {
+      "name": "InteractiveTooltipTrigger",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Hover",
+          "value": "'hover'"
+        },
+        {
+          "name": "Click",
+          "value": "'click'"
+        }
+      ],
+      "sourceFile": "types/tooltip.ts"
+    },
     {
       "name": "TooltipPlacement",
       "kind": "enum",
@@ -10635,6 +12200,140 @@
         }
       ],
       "sourceFile": "types/tooltip.ts"
+    },
+    {
+      "name": "TransferQueueItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "id",
+          "value": "string"
+        },
+        {
+          "name": "name",
+          "value": "string"
+        },
+        {
+          "name": "status",
+          "value": "TransferQueueItemStatus"
+        },
+        {
+          "name": "percent?",
+          "value": "number"
+        },
+        {
+          "name": "message?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/TransferQueue/TransferQueue.tsx",
+      "description": "One file (or other named unit of work) tracked by a `TransferQueue`."
+    },
+    {
+      "name": "TransferQueueLabels",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "cancelItemAriaLabel",
+          "value": "(name: string) => string"
+        },
+        {
+          "name": "itemProgressAriaLabel",
+          "value": "(name: string) => string"
+        },
+        {
+          "name": "successLabel",
+          "value": "string"
+        },
+        {
+          "name": "canceledLabel",
+          "value": "string"
+        },
+        {
+          "name": "failedMessage",
+          "value": "string"
+        },
+        {
+          "name": "warningMessage",
+          "value": "string"
+        },
+        {
+          "name": "queueProgressAriaLabel",
+          "value": "string"
+        },
+        {
+          "name": "queueProgressValueText",
+          "value": "(completed: number, total: number) => string"
+        },
+        {
+          "name": "collapseAriaLabel",
+          "value": "string"
+        },
+        {
+          "name": "expandAriaLabel",
+          "value": "string"
+        },
+        {
+          "name": "closeAriaLabel",
+          "value": "string"
+        },
+        {
+          "name": "closeConfirmHeader",
+          "value": "string"
+        },
+        {
+          "name": "closeConfirmDescriptionInProgress",
+          "value": "string"
+        },
+        {
+          "name": "closeConfirmDescriptionFailed",
+          "value": "string"
+        },
+        {
+          "name": "closeConfirmDescriptionMixed",
+          "value": "string"
+        },
+        {
+          "name": "closeConfirmLabel",
+          "value": "string"
+        },
+        {
+          "name": "closeCancelLabel",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/TransferQueue/TransferQueue.tsx",
+      "description": "Every user-visible string of `TransferQueue`."
+    },
+    {
+      "name": "TransferQueueItemStatus",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "InProgress",
+          "value": "'inProgress'",
+          "comment": "Queued or running; the row shows a spinner and, when cancelable, a cancel control."
+        },
+        {
+          "name": "Success",
+          "value": "'success'"
+        },
+        {
+          "name": "Warning",
+          "value": "'warning'",
+          "comment": "Delivered, but not everything the user asked for made it through."
+        },
+        {
+          "name": "Failed",
+          "value": "'failed'"
+        },
+        {
+          "name": "Canceled",
+          "value": "'canceled'"
+        }
+      ],
+      "sourceFile": "types/transfer-queue.ts",
+      "description": "Lifecycle status of one item in a `TransferQueue`."
     }
   ],
   "hooks": [
@@ -10699,12 +12398,30 @@
       "description": "Class names of the enclosing `ThemeScope`s, outermost first, or `''` when the\ncaller sits outside any scope. Components rendering into a `FloatingPortal`\nmerge this onto their floating root so the tokens follow them out of the\nsubtree.",
       "signature": "() => string"
     },
+    {
+      "name": "extractInitials",
+      "sourceFile": "utils/avatar.ts",
+      "description": "Returns 1–2 uppercase initials derived from a display name, or `'?'` when it has no letters.",
+      "signature": "(name: string) => string"
+    },
     {
       "name": "matchesAccept",
       "sourceFile": "utils/file-accept.ts",
       "description": "Tests a file against the value of a native `accept` attribute.\n\nThe file picker filters by `accept` on its own, but a drop does not: dropping\na `.png` onto an input that accepts `.md` hands the file over regardless. Any\ndrop target therefore has to re-check what it received.\n\nSupports all three `accept` token forms — an extension (`.md`), a full MIME\ntype (`text/markdown`) and a MIME wildcard (`image/*`). An empty or missing\n`accept` accepts everything, matching the attribute's own semantics.",
       "signature": "(file: File, accept?: string) => boolean"
     },
+    {
+      "name": "DEFAULT_TRANSFER_QUEUE_LABELS",
+      "sourceFile": "components/New/TransferQueue/constants.ts",
+      "description": "English defaults for every `TransferQueue` string; a host passes translations through `labels`.",
+      "signature": "DEFAULT_TRANSFER_QUEUE_LABELS: TransferQueueLabels"
+    },
+    {
+      "name": "TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS",
+      "sourceFile": "components/New/TransferQueue/constants.ts",
+      "description": "Delay before a queue whose items have all succeeded closes itself.",
+      "signature": "TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS = 8000"
+    },
     {
       "name": "GRID_SELECTION_COLUMN_ID",
       "sourceFile": "components/New/Grid/Grid.tsx",
@@ -10735,8 +12452,8 @@
     {
       "name": "GRID_THEME_PARAMS",
       "sourceFile": "components/New/Grid/constants.ts",
-      "description": "ag-Grid theme parameters, resolved from the 2.0 colour tokens with the same\nliteral fallbacks the Tailwind config carries, so a consumer that defines no\nCSS variables still gets the intended palette.\n\nHover sits one step up the accent-alpha ramp from the selected tint, so a\nhovered selected row still reads as hovered — the same relationship the 2.0\ndropdown and select rows use.",
-      "signature": "GRID_THEME_PARAMS = {\n  accentColor: 'var(--bg-control-accent, #1D4ED8)',\n  backgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  oddRowBackgroundColor: 'var(--bg-layer-sunken, #EEF1F7)',\n  selectedRowBackgroundColor: 'var(--bg-control-accent-alpha, #2764D90F)',\n  rowHoverColor: 'var(--bg-control-accent-alpha-hover, #2764D924)',\n  borderColor: 'var(--stroke-tertiary, #E0E6F0)',\n  // Dividers inside the table sit on the thin stroke (0.5px) rather than the\n  // 1px main stroke that controls and standalone dividers use, so a dense grid\n  // reads as rows of data instead of a set of boxes. Sub-pixel widths are\n  // antialiased rather than snapped, which is what makes the line look lighter.\n  // `wrapperBorder` and the pinned-column boundary are left on the main stroke\n  // by the theme: those frame the table and separate its regions rather than\n  // dividing rows and columns.\n  rowBorder: THIN_TABLE_DIVIDER,\n  headerRowBorder: THIN_TABLE_DIVIDER,\n  headerColumnBorder: THIN_TABLE_DIVIDER,\n  chromeBackgroundColor: 'var(--bg-layer-base, #F5F7FA)',\n  foregroundColor: 'var(--text-primary, #161B2D)',\n  headerTextColor: 'var(--text-secondary, #57647A)',\n  // 1.0 asked the browser for dark native widgets while painting a light\n  // theme; the scheme now matches the palette it is used with.\n  browserColorScheme: 'light',\n  headerFontSize: 14,\n  headerFontWeight: 600,\n  fontSize: 14,\n  fontFamily: 'var(--theme-font, var(--font-inter))',\n  spacing: 4,\n  borderRadius: 4,\n  wrapperBorderRadius: 8,\n}"
+      "description": "ag-Grid theme parameters, resolved from the 2.0 colour tokens with the same\nliteral fallbacks the Tailwind config carries, so a consumer that defines no\nCSS variables still gets the intended palette.\n\nHover uses the subtle accent tint and selection the slightly stronger\nselected tint, as in the grid cell design.",
+      "signature": "GRID_THEME_PARAMS = {\n  accentColor: 'var(--bg-control-accent, #1D4ED8)',\n  backgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  oddRowBackgroundColor: 'var(--bg-layer-sunken, #EEF1F7)',\n  selectedRowBackgroundColor:\n    'var(--bg-control-accent-alpha-active-subtle, #2764D914)',\n  rowHoverColor: 'var(--bg-control-accent-alpha-hover-subtle, #2764D90A)',\n  borderColor: 'var(--stroke-tertiary, #E0E6F0)',\n  // Dividers inside the table sit on the thin stroke (0.5px) rather than the\n  // 1px main stroke that controls and standalone dividers use, so a dense grid\n  // reads as rows of data instead of a set of boxes. Sub-pixel widths are\n  // antialiased rather than snapped, which is what makes the line look lighter.\n  // `wrapperBorder` and the pinned-column boundary are left on the main stroke\n  // by the theme: those frame the table and separate its regions rather than\n  // dividing rows and columns.\n  rowBorder: THIN_TABLE_DIVIDER,\n  // Off: ag-Grid draws this one both under the header and between the title\n  // row and the filter row, and the design has no line between those two. The\n  // line under the header is drawn at 1px in `styles/grid.scss`.\n  headerRowBorder: false,\n  headerColumnBorder: THIN_TABLE_DIVIDER,\n  // The design's header divider is a short 12px mark centred in the cell, not\n  // the 20px (half the row) ag-Grid draws by default.\n  headerColumnBorderHeight: 12,\n  chromeBackgroundColor: 'var(--bg-layer-base, #F5F7FA)',\n  headerBackgroundColor: 'var(--bg-layer-raised, #FCFCFC)',\n  foregroundColor: 'var(--text-primary, #161B2D)',\n  headerTextColor: 'var(--text-secondary, #57647A)',\n  // 1.0 asked the browser for dark native widgets while painting a light\n  // theme; the scheme now matches the palette it is used with.\n  browserColorScheme: 'light',\n  headerFontSize: 14,\n  headerFontWeight: 600,\n  fontSize: 14,\n  fontFamily: 'var(--theme-font, var(--font-inter))',\n  spacing: 4,\n  borderRadius: 4,\n  // Search fields in the header and filter popups: `rounded-lg`.\n  inputBorderRadius: 8,\n  wrapperBorderRadius: 8,\n}"
     },
     {
       "name": "GRID_ROW_HEIGHT",
@@ -10843,7 +12560,7 @@
     {
       "name": "DIAL_KIT_CLASS",
       "sourceFile": "constants/public-class-names.ts",
-      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The primary icon of a `DialDropdownIcon` trigger. */\n  dropdownIcon: 'dial-kit-dropdown-icon',\n  /**\n   * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n   * chevron sits on. Absent when `showCaret` is `false`.\n   */\n  dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /** The `role=\"tablist\"` root of `Tabs`. */\n  tabs: 'dial-kit-tabs',\n  /**\n   * One tab inside `Tabs`. The selected tab's underline keeps its own\n   * `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
+      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The primary icon of a `DialDropdownIcon` trigger. */\n  dropdownIcon: 'dial-kit-dropdown-icon',\n  /**\n   * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n   * chevron sits on. Absent when `showCaret` is `false`.\n   */\n  dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
     }
   ]
 }