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

package/dist/components-manifest.json

@@ -1,27 +1,23 @@
 {
-  "version": "0.14.0-dev.9",
-  "generatedAt": "2026-08-26T17:04:12.916Z",
+  "version": "0.14.1",
+  "generatedAt": "2026-09-14T19:45:15.313Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
     "installation": "npm install @epam/ai-dial-ui-kit",
     "cssImport": "import '@epam/ai-dial-ui-kit/styles.css'",
     "peerDependencies": {
-      "@floating-ui/react": "^0.27.19",
       "@modelcontextprotocol/sdk": "^1.29.0",
       "@monaco-editor/react": "^4.7.0",
-      "@tabler/icons-react": "^3.41.1",
-      "@uiw/react-markdown-preview": "^5.2.0",
       "@uiw/react-md-editor": "^4.1.0",
-      "classnames": "^2.5.1",
       "monaco-editor": "^0.55.1",
       "react": "^19.2.5",
       "react-dom": "^19.2.5"
     },
-    "setupNotes": "## Next.js Integration\n1. Install the package and peer dependencies that are not currently in your project\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom  @tabler/icons-react classnames\nnpm install @floating-ui/react monaco-editor @monaco-editor/react\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."
+    "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\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\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-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-sm-1` | `var(--shadow-xs-sm-1)` | `#2764D933` |\n| `xs-sm-2` | `var(--shadow-xs-sm-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\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\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` |",
+  "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` |",
   "components": [
     {
       "name": "Spinner",
@@ -887,6 +883,18 @@
           "required": false,
           "defaultValue": "'edit'",
           "description": "Initial edit/live/preview mode"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "`id` of the underlying textarea, for a visible `<label htmlFor>`"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the underlying textarea"
         }
       ],
       "examples": [
@@ -994,7 +1002,7 @@
       "name": "Select",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\nDesign system 2.0\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and it exposes the control as a `combobox`\nwhose popup is the option list.\n\nSingle mode:\n- The field shows the selected option's leading icon + label.\n- In the list, the selected option is indicated by a LEFT border, a tinted background\n  and a trailing check icon.\n\nMultiple mode uses checkboxes (including Select All with indeterminate state) and\nrenders the selection as removable tags inside the field.\n\nThe field itself is never typeable: `searchable` puts a search field in the overlay\nheader that filters the options.",
+      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\nDesign system 2.0\n\nA list of **values to choose from**, opened from the field. It is not the\ncontrol for showing actions or navigation options — that is .\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and it exposes the control as a `combobox`\nwhose popup is the option list.\n\nSingle mode:\n- The field shows the selected option's leading icon + label.\n- In the list, the selected option is tinted; `selectedOptionMark` swaps that\n  for a trailing check or the navigation highlight.\n\nMultiple mode uses checkboxes (including Select All with indeterminate state) and\nrenders the selection as removable tags inside the field.\n\nThe field itself is never typeable: `searchable` puts a search field in the overlay\nheader that filters the options.",
       "props": [
         {
           "name": "options",
@@ -1111,6 +1119,13 @@
           "defaultValue": "'Select all'",
           "description": "Label for the \"Select All\" checkbox."
         },
+        {
+          "name": "selectedOptionMark",
+          "type": "| MenuItemMark.Tint\n    | MenuItemMark.Check\n    | MenuItemMark.Highlight",
+          "required": false,
+          "defaultValue": "MenuItemMark.Tint",
+          "description": "How the chosen option is marked in single mode."
+        },
         {
           "name": "emptyStateTitle",
           "type": "string",
@@ -1360,10 +1375,10 @@
         },
         {
           "name": "resize",
-          "type": "boolean",
+          "type": "boolean | TextareaResize",
           "required": false,
           "defaultValue": "false",
-          "description": "Whether the textarea has possibility to resize"
+          "description": "Whether/how the textarea can be resized. Accepts a boolean (`true` = both directions, `false` = none) or a  value for a single axis (`horizontal`/`vertical`)"
         },
         {
           "name": "error",
@@ -1857,7 +1872,7 @@
       "name": "Dropdown",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "Renders the given trigger (`children`) and a floating contextual menu overlay.\naliases: ContextMenu|PopupMenu\nDesign system 2.0\n\nSupports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional\nclose button inside the overlay. Placement is taken directly from Floating UI; when\n`placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.",
+      "description": "Renders the given trigger (`children`) and a floating contextual menu overlay.\naliases: ContextMenu|PopupMenu\nDesign system 2.0\n\nA menu of **actions or navigation options**, opened from a trigger. It is not\nthe control for picking a value out of a list — a country, a sort order, a\nfilter — which is what  is for.\n\nSupports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional\nclose button inside the overlay. Placement is taken directly from Floating UI; when\n`placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.\n\nA chosen row is marked through the item's `mark`: the design draws a menu's\nsingle-select and multiselect the same way, with a check at the trailing edge\n(`MenuItemMark.Check`). Pair it with `selectable` for a multiselect row, which\nkeeps the menu open across toggles. `MenuItemMark.Highlight` is the current\nitem of a navigation menu.",
       "props": [
         {
           "name": "children",
@@ -2009,6 +2024,12 @@
           "type": "number | null",
           "required": false,
           "description": "Maximum height of the dropdown menu; when omitted, no limit is applied"
+        },
+        {
+          "name": "initialFocus",
+          "type": "0 | -1 | RefObject<HTMLElement | null>",
+          "required": false,
+          "description": "Initial focus target inside the overlay on open, forwarded to `FloatingFocusManager`; when omitted, matches pre-existing behavior"
         }
       ],
       "examples": [
@@ -2016,6 +2037,117 @@
       ],
       "sourceFile": "components/New/Dropdown/Dropdown.tsx"
     },
+    {
+      "name": "ThemeScope",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Marks a subtree as living under a host-defined token scope, so overlays this\nsubtree opens in a portal are painted with the same tokens.\nDesign system 2.0\n\nRedefining design tokens on a panel root re-themes everything the panel\nrenders — until a `Dropdown`, `Popup`, `Tooltip` or `Calendar` escapes into a\n`FloatingPortal` at the end of `<body>`, where the scope's custom properties\nno longer reach it. Wrapping the panel in a `ThemeScope` re-applies the same\nclass to those portalled overlays, so an overlay opened from a dark panel\nstays dark while the rest of the app keeps its own palette.\n\nThe wrapper itself is `display: contents`, so it generates no box and leaves\nthe surrounding flex or grid layout untouched — custom properties inherit\nthrough it all the same. Scopes nest: an inner scope's overlays carry the\nouter classes first, matching the cascade they would see in place.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": true,
+          "description": "Class name redefining the design tokens for this subtree"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The subtree painted with those tokens"
+        }
+      ],
+      "examples": [
+        "// .side-panel-theme redefines --bg-*, --text-* and --stroke-* tokens.\n<ThemeScope className=\"side-panel-theme\">\n  <ConversationPanel {...props} />\n</ThemeScope>"
+      ],
+      "sourceFile": "components/New/ThemeScope/ThemeScope.tsx"
+    },
+    {
+      "name": "MenuItem",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "One row of a floating overlay — a dropdown menu item or a select option.\nDesign system 2.0\n\nOwns the Menu-item states the design defines, so the dropdown and the select\ncannot drift apart: rest, hover, focus and disable, plus the three ways a\nchosen row is marked (`MenuItemMark`). The row itself is the control — the\ncheckbox box and the check icon are decorative, since the state already rides\non the `aria-checked`/`aria-selected` the caller sets alongside `role`.",
+      "props": [
+        {
+          "name": "ref",
+          "type": "Ref<HTMLButtonElement>",
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The row's text"
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered before the label"
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Secondary text at the row's trailing edge"
+        },
+        {
+          "name": "mark",
+          "type": "MenuItemMark",
+          "required": false,
+          "defaultValue": "MenuItemMark.None",
+          "description": "How a chosen row is marked"
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether this row is the chosen one"
+        },
+        {
+          "name": "danger",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Paints the row in the error colour"
+        },
+        {
+          "name": "trailing",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Node pinned to the trailing edge, e.g. a submenu caret"
+        },
+        {
+          "name": "rightControl",
+          "type": "ReactNode",
+          "required": false,
+          "description": "A control of its own at the trailing edge, rendered beside the row"
+        },
+        {
+          "name": "ellipsisLabel",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Truncate the label with a tooltip once clipped"
+        },
+        {
+          "name": "labelClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the label element"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Replaces the icon + label content"
+        }
+      ],
+      "examples": [
+        "<MenuItem role=\"menuitem\" label=\"Rename\" icon={<IconPencil />} />\n\n// Single choice, marked with a trailing check\n<MenuItem role=\"option\" aria-selected label=\"English\" mark={MenuItemMark.Check} selected />\n\n// Current item of a navigation menu\n<MenuItem role=\"menuitem\" aria-current label=\"Settings\" mark={MenuItemMark.Highlight} selected />"
+      ],
+      "sourceFile": "components/New/MenuItem/MenuItem.tsx"
+    },
     {
       "name": "CaptionText",
       "category": "Components_2_0",
@@ -3076,238 +3208,807 @@
           "name": "min",
           "type": "number",
           "required": false,
-          "defaultValue": "0",
-          "description": "Minimum value"
+          "defaultValue": "0",
+          "description": "Minimum value"
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "required": false,
+          "defaultValue": "1",
+          "description": "Maximum value"
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "required": false,
+          "defaultValue": "0.1",
+          "description": "Step increment"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the slider is disabled"
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the track"
+        },
+        {
+          "name": "labels",
+          "type": "[string, string] | [string, string, string]",
+          "required": false,
+          "description": "2 or 3 strings rendered below the track (start, [middle,] end)"
+        },
+        {
+          "name": "formatValue",
+          "type": "(value: number) => string",
+          "required": false,
+          "description": "Custom formatter for the displayed value; also becomes the announced `aria-valuetext`"
+        },
+        {
+          "name": "showValue",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders the current value at the end of the label row"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the track, and described by the slider"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the track; replaces the caption"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: number) => void",
+          "required": false,
+          "description": "Callback fired with the new value"
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the outer container"
+        },
+        {
+          "name": "trackClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the unfilled track"
+        },
+        {
+          "name": "fillClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the filled portion of the track"
+        }
+      ],
+      "examples": [
+        "<Slider\n  id=\"temperature\"\n  labelProps={{ label: 'Temperature' }}\n  value={temperature}\n  labels={['Precise', 'Neutral', 'Creative']}\n  onChange={setTemperature}\n/>"
+      ],
+      "sourceFile": "components/New/Slider/Slider.tsx"
+    },
+    {
+      "name": "Tooltip",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Shows a short explanation next to an element while it is hovered or focused.\naliases: HoverPopover|InfoPopover\nDesign system 2.0\n\nThe tooltip is placed on one of the four sides of the trigger and follows it\non scroll, flipping to the opposite side when it would not fit.\n\nTooltip text does not reach assistive technology unless the trigger itself\ncarries it: pass `asChild` so the `aria-describedby` lands on the control\nrather than on a wrapper `<span>`, and never let a tooltip be the only\naccessible name of a control — it renders nothing on a touch-only device.",
+      "props": [
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Suppress the tooltip while keeping the trigger rendered"
+        },
+        {
+          "name": "tooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The content to display in the tooltip"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The element that triggers the tooltip"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Use the child as the trigger instead of wrapping it in a `<span>`"
+        },
+        {
+          "name": "triggerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the trigger element"
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the tooltip bubble"
+        }
+      ],
+      "examples": [
+        "<Tooltip tooltip=\"Tooltip text\" placement={TooltipPlacement.Top} asChild>\n  <button>Hover me</button>\n</Tooltip>"
+      ],
+      "sourceFile": "components/New/Tooltip/Tooltip.tsx"
+    },
+    {
+      "name": "TooltipContainer",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Provides tooltip positioning and open state to a trigger and a content pair.\naliases: TooltipProvider|TooltipRoot\nDesign system 2.0\n\nUse it directly only when the trigger and the content cannot be rendered by\n`Tooltip` itself — for example when the content needs custom markup.",
+      "props": [],
+      "examples": [
+        "<TooltipContainer placement={TooltipPlacement.Top}>\n  <TooltipTrigger asChild>\n    <button>Hover me</button>\n  </TooltipTrigger>\n  <TooltipContent>Tooltip text</TooltipContent>\n</TooltipContainer>"
+      ],
+      "sourceFile": "components/New/Tooltip/TooltipContainer.tsx"
+    },
+    {
+      "name": "TooltipContent",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The floating bubble that carries the tooltip text.\nDesign system 2.0\n\nRendered in a portal, above popups and dropdowns, with an arrow pointing back\nat the trigger. Renders nothing on a touch-only device, where no pointer can\nhover to reveal it — so a control must never depend on a tooltip alone to be\nunderstood, or to have an accessible name. A narrow viewport is not itself\ndisqualifying: an embed a few hundred pixels wide still hovers on a desktop.",
+      "props": [
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Additional inline styles for the tooltip bubble"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/New/Tooltip/TooltipContent.tsx"
+    },
+    {
+      "name": "TooltipTrigger",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The element a tooltip is anchored to and opened from.\nDesign system 2.0\n\nPrefer `asChild` whenever the trigger is a single element: it puts the\n`aria-describedby` that names the tooltip on the control itself instead of on\na wrapper `<span>`, which is the only way the tooltip text reaches assistive\ntechnology.",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Render the child as the trigger instead of wrapping it in a `<span>`"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/New/Tooltip/TooltipTrigger.tsx"
+    },
+    {
+      "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.",
+      "props": [
+        {
+          "name": "content",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The panel's content"
+        },
+        {
+          "name": "placement",
+          "type": "TooltipPlacement",
+          "required": false,
+          "defaultValue": "TooltipPlacement.Right",
+          "description": "Side of the trigger the panel is placed on"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The element that triggers the panel"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Use the child as the trigger instead of wrapping it in a `<span>`"
+        },
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Suppress the panel while keeping the trigger rendered"
+        },
+        {
+          "name": "initialOpen",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the panel starts open (uncontrolled only)"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state; disables the hover and focus triggers"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "required": false,
+          "description": "Callback fired when the open state should change"
+        },
+        {
+          "name": "triggerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the trigger element"
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the panel"
+        }
+      ],
+      "examples": [
+        "<InteractiveTooltip\n  placement={TooltipPlacement.Right}\n  content={\n    <>\n      <p>Lets the model write and execute Python in an isolated sandbox.</p>\n      <Button variant={ButtonVariant.Primary} appearance={ButtonAppearance.Link}>\n        View details\n      </Button>\n    </>\n  }\n>\n  <MenuItem label=\"code-interpreter\" />\n</InteractiveTooltip>"
+      ],
+      "sourceFile": "components/New/InteractiveTooltip/InteractiveTooltip.tsx"
+    },
+    {
+      "name": "EllipsisTooltip",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Single-line text with a CSS ellipsis that reveals the full string in a\ntooltip **only when it is actually clipped**.\naliases: TruncatedText|TruncationTooltip\nDesign system 2.0\n\nText that fits gets no tooltip at all, so a row of labels does not sprout\ntooltips that repeat what is already on screen.\n\nThe width has to be finite for anything to truncate: the element is a\n`min-w-0`, `flex-1` block, and `className` sets the width it should fit into.\n\na11y: while truncated, the full string is exposed as the element's\n`aria-label`, so a screen reader reads the whole label even though the\ntooltip itself renders nothing on a touch-only device.",
+      "props": [
+        {
+          "name": "text",
+          "type": "ReactNode",
+          "required": true,
+          "description": "The text or node to display, truncated with an ellipsis when it does not fit"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the text element, typically its width"
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the tooltip bubble"
+        },
+        {
+          "name": "hideTooltip",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Suppress the tooltip even while the text is truncated"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "`id` of the text element"
+        },
+        {
+          "name": "customTooltipContent",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Shown instead of the full text while truncated"
+        }
+      ],
+      "examples": [
+        "<EllipsisTooltip text=\"Very long message that will be truncated\" />\n\n<EllipsisTooltip\n  text={<span className=\"dial-small-semi-text\">Custom node</span>}\n  className=\"max-w-[160px]\"\n/>\n\n<EllipsisTooltip text=\"Tooltip suppressed even when clipped\" hideTooltip />"
+      ],
+      "sourceFile": "components/New/EllipsisTooltip/EllipsisTooltip.tsx"
+    },
+    {
+      "name": "CollapsibleSidebar",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A side panel that collapses to a narrow rail carrying its title vertically.\naliases: ToggleSidebar|CollapsiblePanel|SidePanel\nDesign system 2.0\n\nWorks as a controlled component when `isOpened` is provided, otherwise it keeps\nits own state from `defaultOpened`. The width is derived from the open state, so\nchanging `width` on an open sidebar takes effect immediately.\n\nThe panel is an `aside` named by `ariaLabel`, and the toggle is a real\n`aria-expanded` control pointing at the content region. Content stays mounted\nwhile collapsed — hidden with `display: none` — so scroll position and any\nform state inside it survive a collapse.\n\nThe container paints no background and no radius: it is meant to sit on the\nsurface it belongs to. Pass `className` for either.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Content shown while the sidebar is expanded."
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Name of the panel, rendered as vertical text while collapsed."
+        },
+        {
+          "name": "width",
+          "type": "number",
+          "required": false,
+          "defaultValue": "280",
+          "description": "Width in px while expanded."
+        },
+        {
+          "name": "collapsedWidth",
+          "type": "number",
+          "required": false,
+          "defaultValue": "COLLAPSED_WIDTH",
+          "description": "Width in px while collapsed."
+        },
+        {
+          "name": "isOpened",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state."
+        },
+        {
+          "name": "defaultOpened",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Initial open state when uncontrolled."
+        },
+        {
+          "name": "onToggle",
+          "type": "(nextOpened: boolean, e: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Fired when the toggle is clicked. Receives the next open state."
+        },
+        {
+          "name": "additionalButtons",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Extra footer controls, rendered while expanded."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Sidebar'",
+          "description": "Accessible name of the sidebar region."
+        },
+        {
+          "name": "collapseLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Collapse sidebar'",
+          "description": "Name and tooltip of the toggle while expanded."
+        },
+        {
+          "name": "expandLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Expand sidebar'",
+          "description": "Name and tooltip of the toggle while collapsed."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the vertical title."
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the content region."
+        },
+        {
+          "name": "footerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the footer."
+        }
+      ],
+      "examples": [
+        "<CollapsibleSidebar title=\"Filters\" width={320}>\n  <FilterForm />\n</CollapsibleSidebar>\n\n<CollapsibleSidebar\n  title=\"Filters\"\n  isOpened={opened}\n  onToggle={setOpened}\n>\n  <FilterForm />\n</CollapsibleSidebar>"
+      ],
+      "sourceFile": "components/New/CollapsibleSidebar/CollapsibleSidebar.tsx"
+    },
+    {
+      "name": "ResizableContainer",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A panel the user can widen or narrow by dragging its edge.\naliases: ResizePanel|SizableContainer|Splitter\nDesign system 2.0\n\nWorks as a controlled component when `width` is provided, otherwise it keeps\nits own width from `defaultWidth`. The handle — an accent line with a chevron\npointing away from the panel — appears on hover and while dragging, and stays\nwithin `minWidth`–`maxWidth` in both modes.\n\nThe handle is a focusable `separator`, so the panel resizes with the arrow\nkeys — `Home` and `End` jump to the bounds — and each press reports through\n`onResize` and `onResizeStop`. Unlike the 1.0 container this one draws no\ndividers between its children; pass `divide-y divide-tertiary` through\n`className` if you want them.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Content placed inside the container."
+        },
+        {
+          "name": "minWidth",
+          "type": "number",
+          "required": true,
+          "description": "Minimum allowed width in px."
+        },
+        {
+          "name": "maxWidth",
+          "type": "number",
+          "required": true,
+          "description": "Maximum allowed width in px."
+        },
+        {
+          "name": "width",
+          "type": "number",
+          "required": false,
+          "description": "Controlled width. If omitted the container is uncontrolled."
+        },
+        {
+          "name": "defaultWidth",
+          "type": "number",
+          "required": false,
+          "description": "Initial width when uncontrolled. Defaults to `minWidth`."
+        },
+        {
+          "name": "onResizeStop",
+          "type": "(width: number) => void",
+          "required": false,
+          "description": "Fired when a resize ends, and once per arrow key press."
+        },
+        {
+          "name": "onResize",
+          "type": "(width: number) => void",
+          "required": false,
+          "description": "Fired continuously while dragging."
+        },
+        {
+          "name": "side",
+          "type": "ResizableContainerSide",
+          "required": false,
+          "defaultValue": "ResizableContainerSide.Right",
+          "description": "Edge carrying the resize handle."
+        },
+        {
+          "name": "keyboardStep",
+          "type": "number",
+          "required": false,
+          "defaultValue": "DEFAULT_KEYBOARD_STEP",
+          "description": "Width change per arrow key press."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Resize panel'",
+          "description": "Accessible name of the handle."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the inner content wrapper."
+        },
+        {
+          "name": "resizeHandlerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the resize handle."
+        },
+        {
+          "name": "resizeHandler",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom node rendered inside the handle, replacing the default chevron."
+        }
+      ],
+      "examples": [
+        "<ResizableContainer minWidth={180} maxWidth={520} defaultWidth={260}>\n  <Sidebar />\n</ResizableContainer>\n\n<ResizableContainer\n  minWidth={180}\n  maxWidth={520}\n  width={sidebarWidth}\n  onResizeStop={setSidebarWidth}\n>\n  <Sidebar />\n</ResizableContainer>"
+      ],
+      "sourceFile": "components/New/ResizableContainer/ResizableContainer.tsx"
+    },
+    {
+      "name": "ConditionalResizableContainer",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Renders its children inside a  only while `enabled`.\naliases: OptionalResize|ConditionalPanel\nDesign system 2.0\n\nWhen `enabled` is false the children are rendered on their own, with no\nwrapper element and no resize behaviour — useful for a panel that is only\nresizable while it is expanded. Every other prop is passed straight through;\nsee  for controlled and uncontrolled sizing, sides\nand callbacks.",
+      "props": [
+        {
+          "name": "enabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether resizing is enabled."
+        }
+      ],
+      "examples": [
+        "<ConditionalResizableContainer\n  enabled={isExpanded}\n  minWidth={180}\n  maxWidth={520}\n  defaultWidth={260}\n>\n  <Sidebar />\n</ConditionalResizableContainer>"
+      ],
+      "sourceFile": "components/New/ResizableContainer/ConditionalResizableContainer.tsx"
+    },
+    {
+      "name": "NoDataContent",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Message shown in place of a list, table or grid that has nothing to show.\naliases: EmptyState|NoResults|ZeroState\nDesign system 2.0\n\nFills its container and centres an illustration, a headline and an optional\nsecondary line. The icon is decorative, so it is hidden from assistive tech\nand the text carries the message on its own.",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Headline of the empty state."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional secondary line under the title."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Illustration above the title. Defaults to the empty-state document mark."
+        },
+        {
+          "name": "live",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Announce the empty state to assistive tech as it appears."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the container."
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the title."
+        },
+        {
+          "name": "descriptionClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the description."
+        }
+      ],
+      "examples": [
+        "<NoDataContent\n  title=\"No results found\"\n  description=\"Try a different search term.\"\n/>\n\n<NoDataContent title=\"Nothing here yet\" icon={<IconInbox size={60} />} live />"
+      ],
+      "sourceFile": "components/New/NoDataContent/NoDataContent.tsx"
+    },
+    {
+      "name": "Grid",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A data grid built on ag-Grid, wired to the 2.0 tokens and controls.\naliases: DataTable|TableGrid|DataGrid\nDesign system 2.0\n\nComes preconfigured with case-insensitive sorting, floating column filters,\ncolumns sized to the available width, a row context menu, truncation\ntooltips, and an empty state.\n\nThe selection column renders the 2.0 `Checkbox` and `Radio` instead of\nag-Grid's own inputs, so selection looks and behaves like every other control\nin the kit and the select-all reaches the `mixed` state when the selection is\npartial. The column stays faded out until the row is hovered, something is\nselected, or the keyboard reaches it.\n\nSelection works controlled or uncontrolled: pass `selectedRowIds` to own it,\nor read `onSelectionChange` and let the grid keep its own. A `sort` declared\non a column is honoured — 1.0 stripped it on startup.",
+      "props": [
+        {
+          "name": "columnDefs",
+          "type": "ColDef<T>[]",
+          "required": false,
+          "description": "Column definitions, in ag-Grid `ColDef` format."
+        },
+        {
+          "name": "rowData",
+          "type": "T[]",
+          "required": false,
+          "description": "Rows to display."
+        },
+        {
+          "name": "additionalGridOptions",
+          "type": "GridOptions<T>",
+          "required": false,
+          "description": "Extra ag-Grid options, merged over the defaults."
+        },
+        {
+          "name": "getContextMenuItems",
+          "type": "(row: T) => DropdownItem[]",
+          "required": false,
+          "description": "Items of the row context menu. Omit for no menu."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the grid container."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Data grid'",
+          "description": "Accessible name of the grid region."
         },
         {
-          "name": "max",
-          "type": "number",
+          "name": "wrapCustomCellRenderers",
+          "type": "boolean | ((col: ColDef<T>) => boolean)",
           "required": false,
-          "defaultValue": "1",
-          "description": "Maximum value"
+          "defaultValue": "true",
+          "description": "Whether custom renderers get context-menu support."
         },
         {
-          "name": "step",
-          "type": "number",
+          "name": "disabledRowIds",
+          "type": "Set<string>",
           "required": false,
-          "defaultValue": "0.1",
-          "description": "Step increment"
+          "description": "Rows that cannot be selected."
         },
         {
-          "name": "disabled",
-          "type": "boolean",
+          "name": "selectedRowIds",
+          "type": "Set<string>",
           "required": false,
-          "description": "Whether the slider is disabled"
+          "description": "Controlled selection: ids of the selected rows."
         },
         {
-          "name": "labelProps",
-          "type": "LabelProps",
+          "name": "onGridApiChange",
+          "type": "(api: GridApi<T>) => void",
           "required": false,
-          "description": "Props of the  rendered above the track"
+          "description": "Fired when the grid API becomes available."
         },
         {
-          "name": "labels",
-          "type": "[string, string] | [string, string, string]",
+          "name": "onSelectionChange",
+          "type": "(selectedRowIds: Set<string>, selectedRows: T[]) => void",
           "required": false,
-          "description": "2 or 3 strings rendered below the track (start, [middle,] end)"
+          "description": "Fired when the selection changes."
         },
         {
-          "name": "formatValue",
-          "type": "(value: number) => string",
+          "name": "getRowId",
+          "type": "(row: T) => string",
           "required": false,
-          "description": "Custom formatter for the displayed value; also becomes the announced `aria-valuetext`"
+          "description": "Extracts the unique id of a row. Defaults to its `id` field."
         },
         {
-          "name": "showValue",
+          "name": "alternateOddRowColors",
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "Renders the current value at the end of the label row"
+          "description": "Tints odd rows."
         },
         {
-          "name": "caption",
+          "name": "filterPlaceholder",
           "type": "string",
           "required": false,
-          "description": "Helper text rendered below the track, and described by the slider"
+          "defaultValue": "'Enter value'",
+          "description": "Placeholder of the column filter inputs."
         },
         {
-          "name": "error",
-          "type": "string",
+          "name": "emptyStateIcon",
+          "type": "ReactNode",
           "required": false,
-          "description": "Error message rendered below the track; replaces the caption"
+          "description": "Illustration of the empty state."
         },
         {
-          "name": "onChange",
-          "type": "(value: number) => void",
+          "name": "emptyStateTitle",
+          "type": "string",
           "required": false,
-          "description": "Callback fired with the new value"
+          "defaultValue": "'No results found'",
+          "description": "Headline of the empty state."
         },
         {
-          "name": "containerClassName",
+          "name": "emptyStateDescription",
           "type": "string",
           "required": false,
-          "description": "Additional classes for the outer container"
+          "defaultValue": "\"Sorry, we couldn't find any results for your search.\"",
+          "description": "Secondary line of the empty state."
         },
         {
-          "name": "trackClassName",
-          "type": "string",
+          "name": "loading",
+          "type": "boolean",
           "required": false,
-          "description": "Additional classes for the unfilled track"
+          "defaultValue": "false",
+          "description": "Shows the loading overlay."
         },
         {
-          "name": "fillClassName",
-          "type": "string",
+          "name": "wrapperBorder",
+          "type": "boolean",
           "required": false,
-          "description": "Additional classes for the filled portion of the track"
-        }
-      ],
-      "examples": [
-        "<Slider\n  id=\"temperature\"\n  labelProps={{ label: 'Temperature' }}\n  value={temperature}\n  labels={['Precise', 'Neutral', 'Creative']}\n  onChange={setTemperature}\n/>"
-      ],
-      "sourceFile": "components/New/Slider/Slider.tsx"
-    },
-    {
-      "name": "Tooltip",
-      "category": "Components_2_0",
-      "generation": "2.0",
-      "description": "Shows a short explanation next to an element while it is hovered or focused.\naliases: HoverPopover|InfoPopover\nDesign system 2.0\n\nThe tooltip is placed on one of the four sides of the trigger and follows it\non scroll, flipping to the opposite side when it would not fit.\n\nTooltip text does not reach assistive technology unless the trigger itself\ncarries it: pass `asChild` so the `aria-describedby` lands on the control\nrather than on a wrapper `<span>`, and never let a tooltip be the only\naccessible name of a control — it renders nothing on mobile screens.",
-      "props": [
+          "defaultValue": "true",
+          "description": "Draws a border around the grid."
+        },
         {
-          "name": "hideTooltip",
+          "name": "withoutHeaderBorders",
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "Suppress the tooltip while keeping the trigger rendered"
+          "description": "Hides the vertical borders between header cells."
         },
         {
-          "name": "tooltip",
-          "type": "ReactNode",
+          "name": "selectionMode",
+          "type": "GridSelectionMode",
           "required": false,
-          "description": "The content to display in the tooltip"
-        },
-        {
-          "name": "children",
-          "type": "ReactNode",
-          "required": true,
-          "description": "The element that triggers the tooltip"
+          "description": "Renders a selection column of checkboxes or radios."
         },
         {
-          "name": "asChild",
+          "name": "allowDisabledContextMenu",
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "Use the child as the trigger instead of wrapping it in a `<span>`"
+          "description": "Keeps the context menu on a non-selectable row."
         },
         {
-          "name": "triggerClassName",
-          "type": "string",
+          "name": "selectRowLabel",
+          "type": "(row: T) => string",
           "required": false,
-          "description": "Additional CSS classes for the trigger element"
+          "description": "Accessible name of a row's selection control."
         },
         {
-          "name": "contentClassName",
+          "name": "selectAllLabel",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the tooltip bubble"
+          "defaultValue": "'Select all rows'",
+          "description": "Accessible name of the select-all control."
         }
       ],
       "examples": [
-        "<Tooltip tooltip=\"Tooltip text\" placement={TooltipPlacement.Top} asChild>\n  <button>Hover me</button>\n</Tooltip>"
-      ],
-      "sourceFile": "components/New/Tooltip/Tooltip.tsx"
-    },
-    {
-      "name": "TooltipContainer",
-      "category": "Components_2_0",
-      "generation": "2.0",
-      "description": "Provides tooltip positioning and open state to a trigger and a content pair.\naliases: TooltipProvider|TooltipRoot\nDesign system 2.0\n\nUse it directly only when the trigger and the content cannot be rendered by\n`Tooltip` itself — for example when the content needs custom markup.",
-      "props": [],
-      "examples": [
-        "<TooltipContainer placement={TooltipPlacement.Top}>\n  <TooltipTrigger asChild>\n    <button>Hover me</button>\n  </TooltipTrigger>\n  <TooltipContent>Tooltip text</TooltipContent>\n</TooltipContainer>"
-      ],
-      "sourceFile": "components/New/Tooltip/TooltipContainer.tsx"
-    },
-    {
-      "name": "TooltipContent",
-      "category": "Components_2_0",
-      "generation": "2.0",
-      "description": "The floating bubble that carries the tooltip text.\nDesign system 2.0\n\nRendered in a portal, above popups and dropdowns, with an arrow pointing back\nat the trigger. Renders nothing on a mobile screen, where there is no hover\nto reveal it — so a control must never depend on a tooltip alone to be\nunderstood, or to have an accessible name.",
-      "props": [
-        {
-          "name": "style",
-          "type": "CSSProperties",
-          "required": false,
-          "description": "Additional inline styles for the tooltip bubble"
-        }
+        "interface Product { id: string; name: string; price: number }\n\nconst columns: ColDef<Product>[] = [\n  { field: 'name', headerName: 'Product', flex: 1 },\n  { field: 'price', headerName: 'Price', width: 120 },\n];\n\n<Grid<Product> columnDefs={columns} rowData={products} />\n\n// With selection and a context menu\n<Grid<Product>\n  columnDefs={columns}\n  rowData={products}\n  selectionMode={GridSelectionMode.MULTIPLE}\n  selectedRowIds={selectedIds}\n  onSelectionChange={(ids) => setSelectedIds(ids)}\n  selectRowLabel={(row) => `Select ${row.name}`}\n  getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}\n/>"
       ],
-      "examples": [],
-      "sourceFile": "components/New/Tooltip/TooltipContent.tsx"
+      "sourceFile": "components/New/Grid/Grid.tsx"
     },
     {
-      "name": "TooltipTrigger",
-      "category": "Components_2_0",
+      "name": "DateCellRenderer",
+      "category": "Components_2_0/Grid",
       "generation": "2.0",
-      "description": "The element a tooltip is anchored to and opened from.\nDesign system 2.0\n\nPrefer `asChild` whenever the trigger is a single element: it puts the\n`aria-describedby` that names the tooltip on the control itself instead of on\na wrapper `<span>`, which is the only way the tooltip text reaches assistive\ntechnology.",
+      "description": "Date cell for the 2.0 , usable as an ag-Grid `cellRenderer`.\naliases: DateCell|TimestampCell\nDesign system 2.0\n\nFormats the value with `Intl.DateTimeFormat` and wraps it in a\n, so the full string is only offered when the column is\ntoo narrow to show it. A valid date is rendered inside a `<time datetime>`,\nwhich gives assistive tech and crawlers the machine-readable value next to\nthe localised one.",
       "props": [
         {
-          "name": "asChild",
-          "type": "boolean",
+          "name": "value",
+          "type": "DateValue | null",
           "required": false,
-          "defaultValue": "false",
-          "description": "Render the child as the trigger instead of wrapping it in a `<span>`"
-        }
-      ],
-      "examples": [],
-      "sourceFile": "components/New/Tooltip/TooltipTrigger.tsx"
-    },
-    {
-      "name": "EllipsisTooltip",
-      "category": "Components_2_0",
-      "generation": "2.0",
-      "description": "Single-line text with a CSS ellipsis that reveals the full string in a\ntooltip **only when it is actually clipped**.\naliases: TruncatedText|TruncationTooltip\nDesign system 2.0\n\nText that fits gets no tooltip at all, so a row of labels does not sprout\ntooltips that repeat what is already on screen.\n\nThe width has to be finite for anything to truncate: the element is a\n`min-w-0`, `flex-1` block, and `className` sets the width it should fit into.\n\na11y: while truncated, the full string is exposed as the element's\n`aria-label`, so a screen reader reads the whole label even though the\ntooltip itself renders nothing on mobile screens.",
-      "props": [
-        {
-          "name": "text",
-          "type": "ReactNode",
-          "required": true,
-          "description": "The text or node to display, truncated with an ellipsis when it does not fit"
+          "description": "The date to render."
         },
         {
-          "name": "className",
+          "name": "locale",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the text element, typically its width"
+          "defaultValue": "DEFAULT_LOCALE",
+          "description": "Locale used for formatting."
         },
         {
-          "name": "contentClassName",
-          "type": "string",
+          "name": "options",
+          "type": "Intl.DateTimeFormatOptions",
           "required": false,
-          "description": "Additional CSS classes for the tooltip bubble"
+          "defaultValue": "DEFAULT_DATE_FORMAT_OPTIONS",
+          "description": "`Intl.DateTimeFormat` options, e.g. `timeZone`."
         },
         {
-          "name": "hideTooltip",
-          "type": "boolean",
+          "name": "emptyPlaceholder",
+          "type": "string",
           "required": false,
-          "defaultValue": "false",
-          "description": "Suppress the tooltip even while the text is truncated"
+          "description": "Rendered when the value carries no usable date."
         },
         {
-          "name": "id",
+          "name": "className",
           "type": "string",
           "required": false,
-          "description": "`id` of the text element"
+          "description": "Additional CSS classes for the cell."
         },
         {
-          "name": "customTooltipContent",
-          "type": "ReactNode",
+          "name": "hideTooltip",
+          "type": "boolean",
           "required": false,
-          "description": "Shown instead of the full text while truncated"
+          "defaultValue": "false",
+          "description": "Suppresses the truncation tooltip."
         }
       ],
       "examples": [
-        "<EllipsisTooltip text=\"Very long message that will be truncated\" />\n\n<EllipsisTooltip\n  text={<span className=\"dial-small-semi-text\">Custom node</span>}\n  className=\"max-w-[160px]\"\n/>\n\n<EllipsisTooltip text=\"Tooltip suppressed even when clipped\" hideTooltip />"
+        "// As a column renderer\n{ field: 'createdAt', cellRenderer: DateCellRenderer,\n  cellRendererParams: { options: { timeZone: 'UTC' } } }\n\n// Directly\n<DateCellRenderer value=\"2025-07-20T00:00:00Z\" options={{ timeZone: 'UTC' }} />\n<DateCellRenderer value={1752969600000} /> // epoch milliseconds"
       ],
-      "sourceFile": "components/New/EllipsisTooltip/EllipsisTooltip.tsx"
+      "sourceFile": "components/New/Grid/renderers/DateCellRenderer.tsx"
     },
     {
       "name": "DialCaptionText",
@@ -3638,7 +4339,7 @@
           "name": "barClassName",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for each bar's outer container."
+          "description": "Additional CSS classes for each bar's outer container. In compare mode they apply to the shared pair container (one continuous block); the entry is a Tailwind `group` — use `group-hover:` for pair hover; when `onBarClick` is set that container also gets a default accent fill on hover and `:focus-visible`."
         },
         {
           "name": "barDescriptions",
@@ -4453,7 +5154,8 @@
       "examples": [
         "<NoDataContent\n  emptyDataTitle=\"No results found\"\n  icon={<CustomIcon />}\n/>"
       ],
-      "sourceFile": "components/NoDataContent/NoDataContent.tsx"
+      "sourceFile": "components/NoDataContent/NoDataContent.tsx",
+      "supersededBy": "NoDataContent"
     },
     {
       "name": "DialCollapsibleSidebar",
@@ -4528,7 +5230,8 @@
       "examples": [
         "<DialCollapsibleSidebar\n  width={300}\n  title=\"Menu\"\n  titleClassName=\"text-primary font-bold\"\n  containerClassName=\"bg-gray-100 shadow-md\"\n  iconSize={24}\n  additionalButtons={<button>Extra</button>}\n>\n  <div>Content goes here</div>\n</DialCollapsibleSidebar>"
       ],
-      "sourceFile": "components/CollapsibleSidebar/CollapsibleSidebar.tsx"
+      "sourceFile": "components/CollapsibleSidebar/CollapsibleSidebar.tsx",
+      "supersededBy": "CollapsibleSidebar"
     },
     {
       "name": "DialLabelledText",
@@ -5123,7 +5826,8 @@
         }
       ],
       "examples": [],
-      "sourceFile": "components/ResizableContainer/ResizableContainer.tsx"
+      "sourceFile": "components/ResizableContainer/ResizableContainer.tsx",
+      "supersededBy": "ResizableContainer"
     },
     {
       "name": "DialConditionalResizableContainer",
@@ -5142,7 +5846,8 @@
       "examples": [
         "<DialConditionalResizableContainer\n  enabled={!isCollapsed}\n  defaultWidth={260}\n  minWidth={180}\n  maxWidth={520}\n  onResize={(w) => console.log('Current width:', w)}\n  onResizeStop={(w) => setSidebarWidth(w)}\n>\n  <Sidebar />\n</DialConditionalResizableContainer>"
       ],
-      "sourceFile": "components/ResizableContainer/ConditionalResizableContainer.tsx"
+      "sourceFile": "components/ResizableContainer/ConditionalResizableContainer.tsx",
+      "supersededBy": "ConditionalResizableContainer"
     },
     {
       "name": "DialGrid",
@@ -5297,7 +6002,8 @@
       "examples": [
         "// Basic usage with data\ninterface Product {\n  id: string;\n  name: string;\n  price: number;\n}\n\nconst columns: ColDef<Product>[] = [\n  { field: 'name', headerName: 'Product Name', flex: 1 },\n  { field: 'price', headerName: 'Price', width: 120 },\n];\n\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n/>\n\n// With loading state\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n  loading={true}\n/>\n\n// With context menu\nconst getContextMenu = (row: Product): DropdownItem[] => [\n  { key: 'edit', label: 'Edit' },\n  { key: 'delete', label: 'Delete', danger: true },\n];\n\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n  getContextMenuItems={getContextMenu}\n/>\n\n// Controlled selection\nconst [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());\n\n<DialGrid<Product>\n  columnDefs={columns}\n  rowData={products}\n  selectedRowIds={selectedIds}\n  onSelectionChange={(ids, rows) => {\n    setSelectedIds(ids);\n    console.log('Selected:', rows);\n  }}\n/>"
       ],
-      "sourceFile": "components/Grid/Grid.tsx"
+      "sourceFile": "components/Grid/Grid.tsx",
+      "supersededBy": "Grid"
     },
     {
       "name": "DialDateCellRenderer",
@@ -5346,7 +6052,8 @@
       "examples": [
         "// ag-Grid colDef\n{ field: 'createdAt', cellRenderer: DateCellRenderer, cellRendererParams: { options: { timeZone: 'UTC' } } }\n\n// Direct usage\n<DateCellRenderer value=\"2025-07-20T00:00:00Z\" options={{ timeZone: 'UTC' }} />\n<DateCellRenderer value={1752969600000} options={{ timeZone: 'UTC' }} /> // milliseconds"
       ],
-      "sourceFile": "components/Grid/renderers/DateCellRenderer.tsx"
+      "sourceFile": "components/Grid/renderers/DateCellRenderer.tsx",
+      "supersededBy": "DateCellRenderer"
     },
     {
       "name": "DialTabs",
@@ -5987,7 +6694,7 @@
       "name": "DialTooltipContent",
       "category": "Overlay",
       "generation": "1.0",
-      "description": "The content area of a tooltip that displays the tooltip information\nDesign system 1.0",
+      "description": "The content area of a tooltip that displays the tooltip information\nDesign system 1.0\n\nRenders nothing on a touch-only device, where no pointer can hover to reveal\nit. A narrow viewport is not itself disqualifying: an embed a few hundred\npixels wide still hovers on a desktop.",
       "props": [],
       "examples": [],
       "sourceFile": "components/Tooltip/TooltipContent.tsx",
@@ -8503,6 +9210,39 @@
       ],
       "sourceFile": "types/dropdown.ts"
     },
+    {
+      "name": "MenuItemMark",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "None",
+          "value": "'none'",
+          "comment": "Nothing marks the row — it is only ever unselected."
+        },
+        {
+          "name": "Check",
+          "value": "'check'",
+          "comment": "A trailing check on the chosen row; the row keeps its plain background."
+        },
+        {
+          "name": "Tint",
+          "value": "'tint'",
+          "comment": "The chosen row is tinted, with no glyph — the select list's own mark."
+        },
+        {
+          "name": "Checkbox",
+          "value": "'checkbox'",
+          "comment": "A leading checkbox box, tinted while checked, for multiselect rows."
+        },
+        {
+          "name": "Highlight",
+          "value": "'highlight'",
+          "comment": "Accent label on a tinted row: the current item in a navigation menu."
+        }
+      ],
+      "sourceFile": "types/menu-item.ts",
+      "description": "How a chosen row inside an overlay (dropdown menu, select list) is marked.\n\nThe design marks a chosen row differently depending on what the overlay is.\nA **menu** puts a check at the trailing edge, single- and multi-select alike,\nand gives the current item of a navigation menu an accent label. A **select\nlist** tints the chosen row instead, with a checkbox in front of it when the\nlist is a multiselect."
+    },
     {
       "name": "ElementSize",
       "kind": "enum",
@@ -8956,6 +9696,14 @@
           "name": "icon?",
           "value": "ReactNode"
         },
+        {
+          "name": "rightControl?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "interactiveTooltip?",
+          "value": "SelectOptionInteractiveTooltip"
+        },
         {
           "name": "children?",
           "value": "SelectOption[]"
@@ -9041,10 +9789,18 @@
           "name": "selectable?",
           "value": "boolean"
         },
+        {
+          "name": "mark?",
+          "value": "MenuItemMark"
+        },
         {
           "name": "checked?",
           "value": "boolean"
         },
+        {
+          "name": "rightControl?",
+          "value": "ReactNode"
+        },
         {
           "name": "type?",
           "value": "DropdownItemType"
@@ -9080,6 +9836,10 @@
         {
           "name": "subMenuHoverOptions?",
           "value": "DropdownSubMenuHoverOptions"
+        },
+        {
+          "name": "interactiveTooltip?",
+          "value": "DropdownItemInteractiveTooltip"
         }
       ],
       "sourceFile": "models/dropdown.ts"
@@ -9615,6 +10375,29 @@
       "sourceFile": "components/New/Calendar/Calendar.tsx",
       "typeBody": "Date | string | null"
     },
+    {
+      "name": "TextareaResize",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "None",
+          "value": "'none'"
+        },
+        {
+          "name": "Both",
+          "value": "'both'"
+        },
+        {
+          "name": "Horizontal",
+          "value": "'horizontal'"
+        },
+        {
+          "name": "Vertical",
+          "value": "'vertical'"
+        }
+      ],
+      "sourceFile": "components/New/Textarea/Textarea.tsx"
+    },
     {
       "name": "RadioGroupItem",
       "kind": "interface",
@@ -9780,7 +10563,7 @@
     },
     {
       "name": "convertGridDateToDate",
-      "sourceFile": "components/Grid/renderers/utils.ts"
+      "sourceFile": "utils/grid-date.ts"
     },
     {
       "name": "useDialFileManagerTabs",
@@ -9819,11 +10602,76 @@
       "description": "Hook to read the File Manager context.\nThrows if used outside of the provider.",
       "signature": "() => unknown"
     },
+    {
+      "name": "useThemeScope",
+      "sourceFile": "components/New/ThemeScope/ThemeScope.tsx",
+      "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": "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": "GRID_SELECTION_COLUMN_ID",
+      "sourceFile": "components/New/Grid/Grid.tsx",
+      "description": "Column id of the selection column this component prepends itself.",
+      "signature": "GRID_SELECTION_COLUMN_ID = 'dial-kit-grid-selection'"
+    },
+    {
+      "name": "DEFAULT_DATE_FORMAT_OPTIONS",
+      "sourceFile": "components/New/Grid/renderers/constants.ts",
+      "signature": "DEFAULT_DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions"
+    },
+    {
+      "name": "DEFAULT_DATE_LOCALE",
+      "sourceFile": "components/New/Grid/renderers/constants.ts"
+    },
+    {
+      "name": "GRID_ALIGN_RIGHT_CLASS",
+      "sourceFile": "components/New/Grid/constants.ts",
+      "description": "Right-aligns a column. Applied by the consumer through `cellClass`.",
+      "signature": "GRID_ALIGN_RIGHT_CLASS = 'dial-kit-grid-align-right'"
+    },
+    {
+      "name": "GRID_ROOT_CLASS",
+      "sourceFile": "components/New/Grid/constants.ts",
+      "description": "Root class of the 2.0 grid; every rule in `styles/grid.scss` sits under it.",
+      "signature": "GRID_ROOT_CLASS = 'dial-kit-grid'"
+    },
+    {
+      "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}"
+    },
+    {
+      "name": "GRID_ROW_HEIGHT",
+      "sourceFile": "components/New/Grid/constants.ts"
+    },
+    {
+      "name": "DIAL_KIT_ICON_STROKE",
+      "sourceFile": "components/New/constants/icon.ts",
+      "description": "Icon stroke (1.5px) from the 2.0 stroke scale. Tabler renders every outline\nicon at `stroke={2}` unless told otherwise, so the token has to be passed\nexplicitly — a 2.0 component that omits it draws a heavier icon than the\ndesign system asks for.\n\nIt is a number rather than a Tailwind utility because an icon's weight is an\nSVG `stroke-width` attribute on the glyph, not a border on its box. The\nborder half of the same scale stays on plain Tailwind widths — `border`,\n`border-2`, `border-4`, and `border-[0.5px]` for a table divider.\n\nExported publicly so icons a consumer passes into a 2.0 component — a button\nicon, a menu item, a segmented-control segment — can match the ones the\ncomponents draw themselves.\n\nTwo deliberate departures inside the library: the empty-state illustrations\n(`NoDataContent`, the grid's no-rows overlay) use a much lighter stroke,\nsince a 1.5px line reads as a drawing at 16px and as a fence at 100px; and\nthe checkbox glyph uses a heavier one, because it is a control mark sized to\na 14px box rather than an icon from the set.",
+      "signature": "DIAL_KIT_ICON_STROKE = 1.5"
+    },
+    {
+      "name": "convertToDate",
+      "sourceFile": "utils/grid-date.ts",
+      "description": "Normalises the value a date cell can receive into a `Date`, or `null` when it\ncarries no usable date. A pure integer string is read as epoch milliseconds,\nso a serialised timestamp behaves like the number it came from.",
+      "signature": "(input?: DateValue | null) => Date | null"
+    },
+    {
+      "name": "baseColumnComparator",
+      "sourceFile": "utils/grid-comparators.ts",
+      "signature": "(a: string | number | undefined, b: string | number | undefined, _nodeA?: IRowNode, _nodeB?: IRowNode, isInverted?: boolean) => number"
+    },
+    {
+      "name": "checkColDefsChanges",
+      "sourceFile": "utils/grid-comparators.ts",
+      "signature": "(cols: ColDef[], initialCols: ColDef[]) => unknown"
     }
   ],
   "utils": [