@epam/ai-dial-ui-kit 0.14.0-dev.2 → 0.14.0-dev.4

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.14.0-dev.2",
-  "generatedAt": "2026-08-21T12:07:18.186Z",
+  "version": "0.14.0-dev.4",
+  "generatedAt": "2026-08-23T20:02:20.938Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -21,7 +21,7 @@
     "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."
   },
   "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\n### controlsBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\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)` | `#124ACE` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover` | `var(--bg-control-neutral-hover)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\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` | `var(--bg-control-disable)` | `#DCE0E8` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `hover-alpha` | `var(--stroke-hover-alpha)` | `#2764D933` |\n| `focus-blue` | `var(--stroke-focus-blue)` | `#6785FB` |\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n| `control-disable-alpha` | `var(--text-control-disable-alpha)` | `#848E9C` |\n\n### visualBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\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### visualTextColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\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\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n\n### controlsTextColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-disable-alpha` | `var(--text-control-disable-alpha)` | `#848E9C` |\n| `control-disable-beta` | `var(--text-control-disable-beta)` | `#DCE0E8` |\n| `control-blue-hover` | `var(--text-control-blue-hover)` | `#5976E9` |\n| `control-blue-active` | `var(--text-control-blue-active)` | `#6785FB` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#FCFCFC` |\n| `layer-1` | `var(--bg-layer-1)` | `#E0E6F0` |\n| `layer-2` | `var(--bg-layer-2)` | `#EEF1F7` |\n| `layer-3` | `var(--bg-layer-3)` | `#FCFCFC` |\n| `layer-4` | `var(--bg-layer-4)` | `#D1DBEA` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#124ACE` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#3664E2` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF5C` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#AE2F2F` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#CC4545` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#7C8293` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#D1DBEA` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#D1DBEA` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#9FA6BD` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#D1DBEA` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#696E7C` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#9FA6BD` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161B2D` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#7DA4FF` |",
+  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see tailwind.config.js for full list */\n}\n```\n\n## 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### 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-focus-blue)` | `#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` |",
   "components": [
     {
       "name": "Spinner",
@@ -251,7 +251,7 @@
         }
       ],
       "examples": [
-        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>"
+        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>\n\n<Notification\n  variant={NotificationVariant.General}\n  type={NotificationType.SectionMessage}\n  title=\"Title\"\n  message=\"Description text example\"\n/>"
       ],
       "sourceFile": "components/New/Notification/Notification.tsx"
     },
@@ -318,6 +318,24 @@
       "examples": [],
       "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
     },
+    {
+      "name": "GeneralMessageNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
+    {
+      "name": "GeneralToastNotification",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "",
+      "props": [],
+      "examples": [],
+      "sourceFile": "components/New/Notification/NotificationWrapper.tsx"
+    },
     {
       "name": "InfoMessageNotification",
       "category": "Components_2_0",
@@ -1301,6 +1319,12 @@
           "required": false,
           "defaultValue": "ElementSize.Small",
           "description": "The size of the label, which can be 'small', 'medium', or 'large'."
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the wrapper holding the\n`<label>` and its info button. Needed when the label is a flex item that has\nto shrink: a wrapper left at `min-width: auto` cannot, so its text overflows\ninstead of truncating."
         }
       ],
       "examples": [
@@ -2028,71 +2052,542 @@
           "description": "Fired when the header is clicked. Receives the next expanded state."
         },
         {
-          "name": "className",
-          "type": "string",
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the header."
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the content region."
+        }
+      ],
+      "examples": [
+        "<Accordion title=\"Advanced settings\" description=\"Optional configuration\">\n  <p>Panel content</p>\n</Accordion>\n\n<Accordion title=\"Always open\" nonCollapsible>\n  <p>Panel content</p>\n</Accordion>"
+      ],
+      "sourceFile": "components/New/Accordion/Accordion.tsx"
+    },
+    {
+      "name": "Switch",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A switch (toggle) control from the 2.0 design system.\naliases: ToggleSwitch|BinaryToggle|Switcher\nDesign system 2.0",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered next to the control"
+        },
+        {
+          "name": "isOn",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "The current value of the switch"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the switch is disabled"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: boolean) => void",
+          "required": false,
+          "description": "Callback fired with the new value when toggled"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Caption text rendered below the label, and described by the switch"
+        }
+      ],
+      "examples": [
+        "<Switch\n  id=\"notifications\"\n  labelProps={{ label: 'Active' }}\n  isOn={isActive}\n  onChange={setIsActive}\n/>"
+      ],
+      "sourceFile": "components/New/Switch/Switch.tsx"
+    },
+    {
+      "name": "Radio",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A radio button from the 2.0 design system.\naliases: RadioButton|ChoiceOption|RadioInput\nDesign system 2.0",
+      "props": [
+        {
+          "name": "name",
+          "type": "string",
+          "required": true,
+          "description": "The group this radio belongs to; radios sharing it are mutually exclusive"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": true,
+          "description": "The value reported to `onChange` when this radio is selected"
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered next to the control"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether this radio is the selected one of its group"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the radio is disabled"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback fired with `value` when this radio becomes selected"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Caption text rendered below the label, and described by the radio"
+        }
+      ],
+      "examples": [
+        "<Radio\n  name=\"plan\"\n  value=\"pro\"\n  labelProps={{ label: 'Pro' }}\n  isSelected={plan === 'pro'}\n  onChange={setPlan}\n/>"
+      ],
+      "sourceFile": "components/New/Radio/Radio.tsx"
+    },
+    {
+      "name": "RadioGroup",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A set of mutually exclusive  options with one group label.\naliases: SelectionGroup|OptionGroup|RadioList\nDesign system 2.0",
+      "props": [
+        {
+          "name": "items",
+          "type": "RadioGroupItem[]",
+          "required": true,
+          "description": "Options to render; each needs a unique `value` and may carry a `label`, `caption`, `content` and `disabled` flag"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "The `value` of the selected option"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string) => void",
+          "required": true,
+          "description": "Callback fired with the newly selected `value`"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "description": "The `name` shared by the underlying radios; defaults to the group id"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "Base id for the group; option ids are derived from it"
+        },
+        {
+          "name": "orientation",
+          "type": "RadioGroupOrientation",
+          "required": false,
+          "defaultValue": "RadioGroupOrientation.Column",
+          "description": "Whether the options stack or sit in a row"
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the options"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disables every option"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the options"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the options when there is no `error`"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Names the group when there is no string `labelProps.label`"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the outer container"
+        },
+        {
+          "name": "optionsClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the options wrapper"
+        },
+        {
+          "name": "radioClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for every option's control row"
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the selected option's content"
+        }
+      ],
+      "examples": [
+        "<RadioGroup\n  labelProps={{ label: 'Delivery' }}\n  value={delivery}\n  onChange={setDelivery}\n  items={[\n    { value: 'pickup', label: 'Pickup', caption: 'Free, ready today' },\n    { value: 'courier', label: 'Courier', content: <AddressForm /> },\n  ]}\n/>"
+      ],
+      "sourceFile": "components/New/RadioGroup/RadioGroup.tsx"
+    },
+    {
+      "name": "RadioGroupPopupField",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A field whose value is picked from a  inside a .\naliases: PopupRadio|ChoicePopup|RadioPopupField\nDesign system 2.0",
+      "props": [
+        {
+          "name": "items",
+          "type": "RadioGroupItem[]",
+          "required": true,
+          "description": "Options offered inside the popup"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "The committed value, shown in the collapsed field"
+        },
+        {
+          "name": "customValue",
+          "type": "string",
+          "required": false,
+          "description": "Text shown in the field in place of the selected option's label"
+        },
+        {
+          "name": "header",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Title of the popup"
+        },
+        {
+          "name": "onApply",
+          "type": "(value?: string) => void",
+          "required": true,
+          "description": "Callback fired with the selected value when Apply is clicked"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "Base id for the field; the label and the options derive theirs from it"
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the field"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Text shown in the field while no value is selected"
+        },
+        {
+          "name": "selectedValue",
+          "type": "string",
+          "required": false,
+          "description": "Controlled draft selection inside the popup"
+        },
+        {
+          "name": "onSelectionChange",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback fired when the draft selection changes"
+        },
+        {
+          "name": "onCancel",
+          "type": "() => void",
+          "required": false,
+          "description": "Callback fired when Cancel is clicked, before the popup closes"
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "required": false,
+          "description": "Callback fired whenever the popup closes"
+        },
+        {
+          "name": "isValid",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether Apply is enabled"
+        },
+        {
+          "name": "applyButtonLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "defaultApplyLabel",
+          "description": "Label of the Apply button"
+        },
+        {
+          "name": "cancelButtonLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "defaultCancelLabel",
+          "description": "Label of the Cancel button"
+        },
+        {
+          "name": "size",
+          "type": "PopupSize",
+          "required": false,
+          "defaultValue": "PopupSize.Md",
+          "description": "Size of the popup"
+        },
+        {
+          "name": "portalId",
+          "type": "string",
+          "required": false,
+          "description": "Portal container id for the popup"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disables the field, so the popup cannot be opened"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Paints the field with the error border"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the field"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the field when there is no `error`"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Names the field when there is no string `labelProps.label`"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the outer container"
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the collapsed field"
+        }
+      ],
+      "examples": [
+        "<RadioGroupPopupField\n  labelProps={{ label: 'Status' }}\n  header=\"Select status\"\n  placeholder=\"None\"\n  items={[\n    { value: 'draft', label: 'Draft' },\n    { value: 'published', label: 'Published' },\n  ]}\n  value={status}\n  onApply={(next) => setStatus(next)}\n/>"
+      ],
+      "sourceFile": "components/New/RadioGroupPopupField/RadioGroupPopupField.tsx"
+    },
+    {
+      "name": "Checkbox",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A checkbox from the 2.0 design system.\naliases: ToggleCheckbox|MultiSelectOption|TriStateCheckbox\nDesign system 2.0",
+      "props": [
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered next to the control"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "The current value of the checkbox"
+        },
+        {
+          "name": "isIndeterminate",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the checkbox is in the mixed state"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the checkbox failed validation (applies error styling)"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the checkbox is disabled"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: boolean) => void",
+          "required": false,
+          "description": "Callback fired with the new value when toggled"
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Caption text rendered below the label, and described by the checkbox"
+        }
+      ],
+      "examples": [
+        "<Checkbox\n  labelProps={{ label: 'Accept terms' }}\n  isSelected={accepted}\n  onChange={setAccepted}\n/>"
+      ],
+      "sourceFile": "components/New/Checkbox/Checkbox.tsx"
+    },
+    {
+      "name": "ToggleIconButton",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "An icon button that stays pressed, for a setting the icon itself represents.\naliases: IconToggle|ToggleButton|BookmarkButton\nDesign system 2.0",
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Icon shown while unselected; rendered at 16px"
+        },
+        {
+          "name": "selectedIcon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon shown while selected; falls back to `icon`"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
           "required": false,
-          "description": "Additional CSS classes for the outer container."
+          "defaultValue": "false",
+          "description": "Whether the toggle is on"
         },
         {
-          "name": "headerClassName",
-          "type": "string",
+          "name": "onToggle",
+          "type": "(isSelected: boolean) => void",
           "required": false,
-          "description": "Additional CSS classes for the header."
+          "description": "Callback fired with the next value when clicked"
         },
         {
-          "name": "contentClassName",
-          "type": "string",
+          "name": "tooltipProps",
+          "type": "ToggleTooltipProps",
           "required": false,
-          "description": "Additional CSS classes for the content region."
+          "description": "Props of the 2.0  wrapping the button"
         }
       ],
       "examples": [
-        "<Accordion title=\"Advanced settings\" description=\"Optional configuration\">\n  <p>Panel content</p>\n</Accordion>\n\n<Accordion title=\"Always open\" nonCollapsible>\n  <p>Panel content</p>\n</Accordion>"
+        "<ToggleIconButton\n  icon={<IconBookmark />}\n  selectedIcon={<IconBookmarkFilled />}\n  isSelected={isBookmarked}\n  onToggle={setIsBookmarked}\n  tooltipProps={{ tooltip: 'Bookmark' }}\n/>"
       ],
-      "sourceFile": "components/New/Accordion/Accordion.tsx"
+      "sourceFile": "components/New/ToggleIconButton/ToggleIconButton.tsx"
     },
     {
-      "name": "Switch",
+      "name": "SegmentedControl",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A switch (toggle) control from the 2.0 design system.\naliases: ToggleSwitch|BinaryToggle|Switcher\nDesign system 2.0",
+      "description": "A single-select switch between a few mutually exclusive, equally sized options.\naliases: SegmentedButton|ViewSwitcher|ButtonGroup\nDesign system 2.0",
       "props": [
         {
-          "name": "labelProps",
-          "type": "LabelProps",
-          "required": false,
-          "description": "Props of the  rendered next to the control"
+          "name": "items",
+          "type": "SegmentedControlItem<T>[]",
+          "required": true,
+          "description": "Segments to render; each needs a unique `value` and may carry a `label`, `icon` and `disabled` flag"
         },
         {
-          "name": "isOn",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "The current value of the switch"
+          "name": "value",
+          "type": "T",
+          "required": true,
+          "description": "The currently selected `value`"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: T) => void",
+          "required": true,
+          "description": "Callback fired with the newly selected `value`"
         },
         {
           "name": "disabled",
           "type": "boolean",
           "required": false,
-          "description": "Whether the switch is disabled"
+          "description": "Disables every segment"
         },
         {
-          "name": "onChange",
-          "type": "(value: boolean) => void",
+          "name": "className",
+          "type": "string",
           "required": false,
-          "description": "Callback fired with the new value when toggled"
+          "description": "Additional classes for the track"
         },
         {
-          "name": "caption",
+          "name": "segmentClassName",
           "type": "string",
           "required": false,
-          "description": "Caption text rendered below the label, and described by the switch"
+          "description": "Additional classes for every segment"
+        },
+        {
+          "name": "'aria-label'",
+          "type": "string",
+          "required": false
         }
       ],
       "examples": [
-        "<Switch\n  id=\"notifications\"\n  labelProps={{ label: 'Active' }}\n  isOn={isActive}\n  onChange={setIsActive}\n/>"
+        "<SegmentedControl\n  aria-label=\"View\"\n  value={view}\n  onChange={setView}\n  items={[\n    { value: 'list', icon: <IconList />, 'aria-label': 'List' },\n    { value: 'grid', icon: <IconGrid />, 'aria-label': 'Grid' },\n  ]}\n/>"
       ],
-      "sourceFile": "components/New/Switch/Switch.tsx"
+      "sourceFile": "components/New/SegmentedControl/SegmentedControl.tsx"
     },
     {
       "name": "Tabs",
@@ -2449,6 +2944,149 @@
       ],
       "sourceFile": "components/New/Search/Search.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": [
+        {
+          "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 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"
+        }
+      ],
+      "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": "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"
+        },
+        {
+          "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": "DialCaptionText",
       "category": "Elements",
@@ -3200,7 +3838,8 @@
       "examples": [
         "<DialCheckbox\n  id=\"checkbox\"\n  label=\"Dial Checkbox\"\n  checked={true}\n  disabled={false}\n  onChange={(value) => console.log(value)}\n/>"
       ],
-      "sourceFile": "components/Checkbox/Checkbox.tsx"
+      "sourceFile": "components/Checkbox/Checkbox.tsx",
+      "supersededBy": "Checkbox"
     },
     {
       "name": "DialSteps",
@@ -3448,7 +4087,8 @@
       "examples": [
         "<DialRadioGroup\n  fieldTitle=\"Delivery\"\n  elementId=\"delivery\"\n  orientation={RadioGroupOrientation.Column}\n  activeRadioButton=\"courier\"\n  radioButtons={[\n    { id: 'pickup', name: 'Pickup', content: <span>Free, ready today</span> },\n    { id: 'courier', name: 'Courier', content: <span>Arrives tomorrow</span> },\n  ]}\n  onChange={(id) => console.log('selected', id)}\n/>"
       ],
-      "sourceFile": "components/RadioGroup/RadioGroup.tsx"
+      "sourceFile": "components/RadioGroup/RadioGroup.tsx",
+      "supersededBy": "RadioGroup"
     },
     {
       "name": "DialSlider",
@@ -3807,7 +4447,8 @@
       "examples": [
         "<DialEllipsisTooltip text=\"Very long message that will be truncated\" />\n<DialEllipsisTooltip text={<span className=\"font-medium\">Custom node</span>} className=\"max-w-[160px]\" />\n<DialEllipsisTooltip text=\"Tooltip disabled even if truncated\" hideTooltip />"
       ],
-      "sourceFile": "components/EllipsisTooltip/EllipsisTooltip.tsx"
+      "sourceFile": "components/EllipsisTooltip/EllipsisTooltip.tsx",
+      "supersededBy": "EllipsisTooltip"
     },
     {
       "name": "DialDraggableItem",
@@ -5106,7 +5747,8 @@
       "examples": [
         "<DialTooltip tooltip=\"This is helpful information\">\n  <button>Hover me</button>\n</DialTooltip>"
       ],
-      "sourceFile": "components/Tooltip/Tooltip.tsx"
+      "sourceFile": "components/Tooltip/Tooltip.tsx",
+      "supersededBy": "Tooltip"
     },
     {
       "name": "DialTooltipContainer",
@@ -5115,7 +5757,8 @@
       "description": "The container component that provides tooltip context and state management\nDesign system 1.0",
       "props": [],
       "examples": [],
-      "sourceFile": "components/Tooltip/TooltipContainer.tsx"
+      "sourceFile": "components/Tooltip/TooltipContainer.tsx",
+      "supersededBy": "TooltipContainer"
     },
     {
       "name": "DialTooltipContent",
@@ -5124,7 +5767,8 @@
       "description": "The content area of a tooltip that displays the tooltip information\nDesign system 1.0",
       "props": [],
       "examples": [],
-      "sourceFile": "components/Tooltip/TooltipContent.tsx"
+      "sourceFile": "components/Tooltip/TooltipContent.tsx",
+      "supersededBy": "TooltipContent"
     },
     {
       "name": "DialTooltipTrigger",
@@ -5133,7 +5777,8 @@
       "description": "The trigger element for a tooltip that can be clicked or hovered\nDesign system 1.0",
       "props": [],
       "examples": [],
-      "sourceFile": "components/Tooltip/TooltipTrigger.tsx"
+      "sourceFile": "components/Tooltip/TooltipTrigger.tsx",
+      "supersededBy": "TooltipTrigger"
     },
     {
       "name": "DialSwitch",
@@ -5230,7 +5875,8 @@
       "examples": [
         "<DialSegmentedControl\n  ariaLabel=\"View\"\n  value={view}\n  onChange={setView}\n  options={[\n    { value: 'list', label: 'List' },\n    { value: 'grid', label: 'Grid' },\n  ]}\n/>"
       ],
-      "sourceFile": "components/SegmentedControl/SegmentedControl.tsx"
+      "sourceFile": "components/SegmentedControl/SegmentedControl.tsx",
+      "supersededBy": "SegmentedControl"
     },
     {
       "name": "DialPopup",
@@ -5441,7 +6087,8 @@
       "examples": [
         "<DialRadioGroupPopupField\n  fieldTitle=\"Status\"\n  htmlFor=\"status\"\n  header=\"Select status\"\n  emptyValueText=\"None\"\n  radioButtons={[\n    { id: 'draft', name: 'Draft' },\n    { id: 'review', name: 'In Review' },\n    { id: 'published', name: 'Published' },\n  ]}\n  selectedValue=\"draft\"\n  selectedRadioValue=\"draft\"\n  onChangeRadioField={(id) => console.log('radio changed', id)}\n  id=\"status-group\"\n  isValid={true}\n  onApply={() => console.log('applied')}\n/>"
       ],
-      "sourceFile": "components/RadioGroupPopupField/RadioGroupPopupField.tsx"
+      "sourceFile": "components/RadioGroupPopupField/RadioGroupPopupField.tsx",
+      "supersededBy": "RadioGroupPopupField"
     },
     {
       "name": "DialFormPopup",
@@ -8685,6 +9332,10 @@
         {
           "name": "Loading",
           "value": "'loading'"
+        },
+        {
+          "name": "General",
+          "value": "'general'"
         }
       ],
       "sourceFile": "types/notification.ts"
@@ -8733,6 +9384,64 @@
       "sourceFile": "components/New/Calendar/Calendar.tsx",
       "typeBody": "Date | string | null"
     },
+    {
+      "name": "RadioGroupItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "value",
+          "value": "string"
+        },
+        {
+          "name": "label?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "caption?",
+          "value": "string"
+        },
+        {
+          "name": "content?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
+        },
+        {
+          "name": "'aria-label'?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/RadioGroup/RadioGroup.tsx"
+    },
+    {
+      "name": "SegmentedControlItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "value",
+          "value": "T"
+        },
+        {
+          "name": "label?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "icon?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
+        },
+        {
+          "name": "'aria-label'?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/SegmentedControl/SegmentedControl.tsx"
+    },
     {
       "name": "TabItem",
       "kind": "interface",
@@ -8756,6 +9465,56 @@
       ],
       "sourceFile": "components/New/Tabs/Tabs.tsx",
       "description": "A single tab entry rendered by ."
+    },
+    {
+      "name": "TooltipContainerOptions",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "initialOpen?",
+          "value": "boolean"
+        },
+        {
+          "name": "placement?",
+          "value": "TooltipPlacement"
+        },
+        {
+          "name": "isTriggerClickable?",
+          "value": "boolean"
+        },
+        {
+          "name": "open?",
+          "value": "boolean"
+        },
+        {
+          "name": "onOpenChange?",
+          "value": "(open: boolean) => void"
+        }
+      ],
+      "sourceFile": "components/New/Tooltip/TooltipContext.tsx"
+    },
+    {
+      "name": "TooltipPlacement",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Top",
+          "value": "'top'"
+        },
+        {
+          "name": "Right",
+          "value": "'right'"
+        },
+        {
+          "name": "Bottom",
+          "value": "'bottom'"
+        },
+        {
+          "name": "Left",
+          "value": "'left'"
+        }
+      ],
+      "sourceFile": "types/tooltip.ts"
     }
   ],
   "hooks": [