@epam/ai-dial-ui-kit 0.13.0-dev.52 → 0.13.0-dev.59

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.13.0-dev.52",
-  "generatedAt": "2026-08-11T16:14:13.776Z",
+  "version": "0.13.0-dev.59",
+  "generatedAt": "2026-08-12T14:49:36.468Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -20,14 +20,14 @@
     },
     "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                             | Weight   | Size / Line-height      |\n| --------------------------------- | -------- | ----------------------- |\n| `.dial-display1-text`             | semibold | 32px / 48px             |\n| `.dial-display2-text`             | semibold | 28px / 40px             |\n| `.dial-h1-text`                   | semibold | 22px / 32px             |\n| `.dial-h2-text`                   | semibold | 20px / 28px             |\n| `.dial-h3-text`                   | semibold | 18px / 26px             |\n| `.dial-body-text`                 | normal   | 16px / 24px             |\n| `.dial-body-semi-text`            | semibold | 16px / 24px             |\n| `.dial-body-paragraph-text`       | normal   | 16px / 26px             |\n| `.dial-body-paragraph-semi-text`  | semibold | 16px / 26px             |\n| `.dial-small-text`                | normal   | 14px / 20px             |\n| `.dial-small-semi-text`           | semibold | 14px / 20px             |\n| `.dial-small-paragraph-text`      | normal   | 14px / 24px             |\n| `.dial-small-paragraph-semi-text` | semibold | 14px / 24px             |\n| `.dial-tiny-text`                 | normal   | 12px / 16px             |\n| `.dial-tiny-lead-text`            | normal   | 12px / 16px (+0.03em)   |\n| `.dial-tiny-semi-text`            | semibold | 12px / 16px             |\n| `.dial-caption-text`              | normal   | 10px / 12px             |\n| `.dial-caption-semi-text`         | semibold | 10px / 12px (+0.06em)   |\n| `.dial-code-text`                 | normal   | 14px / 20px (monospace) |\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",
+  "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\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` |",
   "components": [
     {
       "name": "Spinner",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "",
+      "description": "Design system 2.0",
       "props": [
         {
           "name": "size",
@@ -60,7 +60,7 @@
       "name": "Skeleton",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "Skeleton\naliases: PlaceholderUI|ShimmerLoader\n\nA placeholder component to show while content is loading.\nProvides various skeleton shapes and configurations.",
+      "description": "Skeleton\naliases: PlaceholderUI|ShimmerLoader\nDesign system 2.0\n\nA placeholder component to show while content is loading.\nProvides various skeleton shapes and configurations.",
       "props": [
         {
           "name": "active",
@@ -144,7 +144,7 @@
       "name": "Notification",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A contextual feedback component for displaying important messages.\naliases: Notification\n\nRenders a colored container with an icon, message text, and an optional\nclose button.\n\nThe container is a live region whose politeness follows the variant: `error`\nand `warning` use `role=\"alert\"` (assertive, interrupts the screen reader),\nevery other variant uses `role=\"status\"` (polite, queues). Pass an explicit\n`role` to override — including for a notification that is static page content\nrather than an update.",
+      "description": "A contextual feedback component for displaying important messages.\naliases: Notification\nDesign system 2.0\n\nRenders a colored container with an icon, message text, and an optional\nclose button.\n\nThe container is a live region whose politeness follows the variant: `error`\nand `warning` use `role=\"alert\"` (assertive, interrupts the screen reader),\nevery other variant uses `role=\"status\"` (polite, queues). Pass an explicit\n`role` to override — including for a notification that is static page content\nrather than an update.",
       "props": [
         {
           "name": "variant",
@@ -215,7 +215,7 @@
       "name": "Highlight",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "Renders text with the first occurrence of `query` wrapped in a highlight mark, with ellipsis truncation and a tooltip when overflowing.",
+      "description": "Renders text with the first occurrence of `query` wrapped in a highlight mark, with ellipsis truncation and a tooltip when overflowing.\nDesign system 2.0",
       "props": [
         {
           "name": "text",
@@ -251,7 +251,7 @@
       "name": "CardShell",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A shared elevated card shell used as the base wrapper for browse-grid cards.\n\nRenders an `<article>` with rounded corners, padding, a resting shadow, and\na hover lift with a stronger shadow. Respects `prefers-reduced-motion` by\ndisabling the transform/shadow transition and hover lift.",
+      "description": "A shared elevated card shell used as the base wrapper for browse-grid cards.\nDesign system 2.0\n\nRenders an `<article>` with rounded corners, padding, a resting shadow, and\na hover lift with a stronger shadow. Respects `prefers-reduced-motion` by\ndisabling the transform/shadow transition and hover lift.",
       "props": [],
       "examples": [],
       "sourceFile": "components/New/CardShell/CardShell.tsx"
@@ -350,7 +350,7 @@
       "name": "Calendar",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A date/time picker supporting four selection modes.\naliases: DatePicker|DateTimePicker\n\nRenders a text-field trigger that opens a rounded month-grid popover for\nthe `date`/`datetime` modes, a masked `\"HH:mm\"` text field for `time`, and\na popover list of weekday names for `weekday`. Month/weekday names and\ndate formatting are localized via the `locale` prop.",
+      "description": "A date/time picker supporting four selection modes.\naliases: DatePicker|DateTimePicker\nDesign system 2.0\n\nRenders a text-field trigger that opens a rounded month-grid popover for\nthe `date`/`datetime` modes, a masked `\"HH:mm\"` text field for `time`, and\na popover list of weekday names for `weekday`. Month/weekday names and\ndate formatting are localized via the `locale` prop.",
       "props": [
         {
           "name": "mode",
@@ -444,7 +444,7 @@
       "name": "FolderPath",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A read-only, non-clickable folder/location path built on top of `DialBreadcrumb`.\naliases: FolderBreadcrumb|LocationPath\n\nEvery segment is disabled (no navigation); the first segment gets a leading\nfolder icon and the last segment is styled as the current/leaf item.",
+      "description": "A read-only, non-clickable folder/location path built on top of `DialBreadcrumb`.\naliases: FolderBreadcrumb|LocationPath\nDesign system 2.0\n\nEvery segment is disabled (no navigation); the first segment gets a leading\nfolder icon and the last segment is styled as the current/leaf item.",
       "props": [
         {
           "name": "segments",
@@ -514,7 +514,8 @@
       "description": "A Link Button component with predefined link appearance",
       "props": [],
       "examples": [
-        "<LinkButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
+        "<LinkButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>",
+        "<LinkButton label=\"Read the docs\" href=\"/docs\" />\n<LinkButton label=\"Open dashboard\" href=\"https://example.com\" target=\"_blank\" />"
       ],
       "sourceFile": "components/New/Button/ButtonWrappers.tsx"
     },
@@ -544,7 +545,7 @@
       "name": "PrimaryButton",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A Primary Button component with predefined primary variant",
+      "description": "A Primary Button component with predefined primary variant\nDesign system 2.0",
       "props": [],
       "examples": [
         "<PrimaryButton\n label=\"Click me\"\n onClick={handleClick}\n className=\"custom-button\"\n/>"
@@ -588,7 +589,7 @@
       "name": "PrimaryIconButton",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A Primary Icon Button component with predefined primary variant",
+      "description": "A Primary Icon Button component with predefined primary variant\nDesign system 2.0",
       "props": [],
       "examples": [
         "<PrimaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
@@ -610,7 +611,7 @@
       "name": "Button",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction",
+      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction\nDesign system 2.0",
       "props": [
         {
           "name": "variant",
@@ -660,6 +661,24 @@
           "name": "tooltipProps",
           "type": "TooltipProps",
           "required": false
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "required": false,
+          "description": "Destination to navigate to. Renders an `<a>` instead of a\n`<button>`, so the control keeps the link role, middle-click, and\n\"open in new tab\". Pair it with `ButtonAppearance.Link` (or `LinkButton`)\nunless a button-shaped link is intended."
+        },
+        {
+          "name": "target",
+          "type": "HTMLAttributeAnchorTarget",
+          "required": false,
+          "description": "Anchor target, only meaningful alongside `href`"
+        },
+        {
+          "name": "rel",
+          "type": "string",
+          "required": false,
+          "description": "Anchor `rel`. Defaults to `noopener noreferrer` when\n`target=\"_blank\"`."
         }
       ],
       "examples": [
@@ -672,7 +691,7 @@
       "name": "IconButton",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton",
+      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton\nDesign system 2.0",
       "props": [
         {
           "name": "variant",
@@ -716,7 +735,7 @@
       "name": "FabButton",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A Floating Action Button (FAB) component — circular icon button for primary actions.\naliases: FloatingActionButton|FabButton|CircularButton",
+      "description": "A Floating Action Button (FAB) component — circular icon button for primary actions.\naliases: FloatingActionButton|FabButton|CircularButton\nDesign system 2.0",
       "props": [
         {
           "name": "icon",
@@ -740,7 +759,7 @@
       "name": "ButtonDropdown",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A Button dropdown component based on DialDropdown component\naliases: SplitButton|MenuButton",
+      "description": "A Button dropdown component based on the Dropdown component\naliases: SplitButton|MenuButton\nDesign system 2.0",
       "props": [
         {
           "name": "items",
@@ -758,7 +777,7 @@
       "name": "MarkdownEditor",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "The 2.0 Markdown editor: a formatting toolbar (bold/italic/strikethrough,\ntext style, lists, quote/link/code, table) plus an edit/live/preview mode\nswitcher and fullscreen, built on top of `@uiw/react-md-editor`.\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyMarkdownEditor` and the manifest `lazy` field for dynamic import guidance.",
+      "description": "The 2.0 Markdown editor: a formatting toolbar (bold/italic/strikethrough,\nDesign system 2.0\ntext style, lists, quote/link/code, table) plus an edit/live/preview mode\nswitcher and fullscreen, built on top of `@uiw/react-md-editor`.\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyMarkdownEditor` and the manifest `lazy` field for dynamic import guidance.",
       "props": [
         {
           "name": "value",
@@ -821,7 +840,7 @@
       "name": "InlineSelect",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "An inline select control combining `InlineSelectTrigger` with `DialDropdown`.",
+      "description": "An inline select control combining `InlineSelectTrigger` with `Dropdown`.\nDesign system 2.0",
       "props": [
         {
           "name": "items",
@@ -911,7 +930,7 @@
       "name": "Select",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\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\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.",
       "props": [
         {
           "name": "options",
@@ -1155,7 +1174,7 @@
       "name": "MultiSelectTags",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "The selected values of a multi-select, rendered as removable tags inside the\nfield.",
+      "description": "The selected values of a multi-select, rendered as removable tags inside the\nDesign system 2.0\nfield.",
       "props": [
         {
           "name": "options",
@@ -1183,7 +1202,7 @@
       "name": "InfoButton",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "An Info button component with a customizable icon and accessible label.",
+      "description": "An Info button component with a customizable icon and accessible label.\nDesign system 2.0",
       "props": [
         {
           "name": "caption",
@@ -1212,7 +1231,7 @@
       "name": "Label",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A label component\naliases: FormLabel|RequiredIndicator",
+      "description": "A label component\naliases: FormLabel|RequiredIndicator\nDesign system 2.0",
       "props": [
         {
           "name": "label",
@@ -1249,11 +1268,11 @@
       "name": "Textarea",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox",
+      "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox\nDesign system 2.0",
       "props": [
         {
           "name": "labelProps",
-          "type": "DialLabelProps",
+          "type": "LabelProps",
           "required": false,
           "description": "Props for the field label, including `label` (label text) and `required` (whether to show required indicator)"
         },
@@ -1304,11 +1323,11 @@
       "name": "Input",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput",
+      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput\nDesign system 2.0",
       "props": [
         {
           "name": "labelProps",
-          "type": "DialLabelProps",
+          "type": "LabelProps",
           "required": false
         },
         {
@@ -1380,6 +1399,11 @@
           "required": false,
           "description": "Ref to access the underlying input element"
         },
+        {
+          "name": "wrapperRef",
+          "type": "Ref<HTMLDivElement>",
+          "required": false
+        },
         {
           "name": "onChange",
           "type": "(value?: string) => void",
@@ -1408,7 +1432,7 @@
       "name": "PasswordInput",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other  prop is passed through.",
+      "description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\nDesign system 2.0\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other  prop is passed through.",
       "props": [
         {
           "name": "showPasswordLabel",
@@ -1434,7 +1458,7 @@
       "name": "NumberInput",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A number field, built on .\naliases: NumericField|NumberField\n\n`type` is owned by this component; every other  prop is passed\nthrough, so it shares the 2.0 field styling, sizes, label, caption and error\nstates.",
+      "description": "A number field, built on .\naliases: NumericField|NumberField\nDesign system 2.0\n\n`type` is owned by this component; every other  prop is passed\nthrough, so it shares the 2.0 field styling, sizes, label, caption and error\nstates.",
       "props": [
         {
           "name": "integer",
@@ -1458,7 +1482,7 @@
       "name": "Popup",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "An accessible modal dialog using Floating UI.\naliases: Modal|Dialog\n\nRenders in a portal with a scrim overlay, focus management, a header with the\ntitle and close control, a scrollable body and an optional footer. Sections\nare separated by spacing rather than rules; add your own through\n`headerClassName` or the footer node if a surface needs them.\n\nA string `header` names the dialog automatically. A `header` node cannot —\npass `ariaLabel` in that case, or the dialog opens unnamed.",
+      "description": "An accessible modal dialog using Floating UI.\naliases: Modal|Dialog\nDesign system 2.0\n\nRenders in a portal with a scrim overlay, focus management, a header with the\ntitle and close control, a scrollable body and an optional footer. Sections\nare separated by spacing rather than rules; add your own through\n`headerClassName` or the footer node if a surface needs them.\n\nA string `header` names the dialog automatically. A `header` node cannot —\npass `ariaLabel` in that case, or the dialog opens unnamed.",
       "props": [
         {
           "name": "open",
@@ -1578,7 +1602,7 @@
       "name": "CloseButton",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A close button: a ghost  carrying an X icon.\naliases: DismissButton|ExitButton\n\nSized through  like every other 2.0 control. It defaults to\nthe small 24px box that headers and toasts want; pass `ElementSize.Standard`\nwhere the control stands alone, since only that variant carries the 44×44\npointer target. Name it after the thing it closes (\"Close dialog\", \"Close\nnotification\") — the default `\"Close\"` only keeps the control from being unnamed.",
+      "description": "A close button: a ghost  carrying an X icon.\naliases: DismissButton|ExitButton\nDesign system 2.0\n\nSized through  like every other 2.0 control. It defaults to\nthe small 24px box that headers and toasts want; pass `ElementSize.Standard`\nwhere the control stands alone, since only that variant carries the 44×44\npointer target. Name it after the thing it closes (\"Close dialog\", \"Close\nnotification\") — the default `\"Close\"` only keeps the control from being unnamed.",
       "props": [
         {
           "name": "ariaLabel",
@@ -1622,7 +1646,7 @@
       "name": "ConfirmationPopup",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A confirmation dialog built from  and the 2.0 .\naliases: ConfirmDialog|WarningDialog\n\nProvides an accessible modal with a title, optional description or custom content,\nand a footer with Cancel / Confirm actions.",
+      "description": "A confirmation dialog built from  and the 2.0 .\naliases: ConfirmDialog|WarningDialog\nDesign system 2.0\n\nProvides an accessible modal with a title, optional description or custom content,\nand a footer with Cancel / Confirm actions.",
       "props": [
         {
           "name": "description",
@@ -1705,7 +1729,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\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\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`.",
       "props": [
         {
           "name": "children",
@@ -1868,7 +1892,7 @@
       "name": "CaptionText",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A component for displaying caption text with consistent styling\naliases: HelperText|ValidationText",
+      "description": "A component for displaying caption text with consistent styling\naliases: HelperText|ValidationText\nDesign system 2.0",
       "props": [
         {
           "name": "text",
@@ -1902,7 +1926,7 @@
       "name": "Accordion",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a caret that rotates when\nexpanded, a title, and an optional description stacked beneath it.\n\nThe revealed content is a labelled `region`, so assistive tech announces it by the\nheader it belongs to. `nonCollapsible` renders the header as static text instead of\na permanently disabled button, which keeps a decorative panel out of the tab order.",
+      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\nDesign system 2.0\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a caret that rotates when\nexpanded, a title, and an optional description stacked beneath it.\n\nThe revealed content is a labelled `region`, so assistive tech announces it by the\nheader it belongs to. `nonCollapsible` renders the header as static text instead of\na permanently disabled button, which keeps a decorative panel out of the tab order.",
       "props": [
         {
           "name": "title",
@@ -1983,11 +2007,377 @@
       ],
       "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": "label",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Visible label 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"
+        }
+      ],
+      "examples": [
+        "<Switch\n  id=\"notifications\"\n  label=\"Active\"\n  isOn={isActive}\n  onChange={setIsActive}\n/>"
+      ],
+      "sourceFile": "components/New/Switch/Switch.tsx"
+    },
+    {
+      "name": "Tabs",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A horizontal row of tabs, underlining the active one and showing optional count badges.\naliases: TabRow|TabNavigation|TabBar\nDesign system 2.0\n\nFollows the ARIA tabs pattern with automatic activation: only the active tab is\nin the tab order, and the arrow keys move both focus and selection. `Home` and\n`End` jump to the first and last tab, and the arrows wrap around the ends.\n\nThe component renders the tabs only; the panels stay with the consumer.",
+      "props": [
+        {
+          "name": "tabs",
+          "type": "TabItem[]",
+          "required": true,
+          "description": "Ordered list of tabs to render."
+        },
+        {
+          "name": "activeTabId",
+          "type": "string",
+          "required": true,
+          "description": "ID of the currently selected tab."
+        },
+        {
+          "name": "onTabChange",
+          "type": "(tabId: string) => void",
+          "required": true,
+          "description": "Fired with the tab's `id` when the user selects a tab."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the tab list."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the tab list container."
+        },
+        {
+          "name": "tabClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to every tab."
+        }
+      ],
+      "examples": [
+        "<Tabs\n  ariaLabel=\"Conversation views\"\n  tabs={[\n    { id: 'all', label: 'All', count: 12 },\n    { id: 'shared', label: 'Shared with me' },\n  ]}\n  activeTabId={activeTabId}\n  onTabChange={setActiveTabId}\n/>"
+      ],
+      "sourceFile": "components/New/Tabs/Tabs.tsx"
+    },
+    {
+      "name": "FileDropzone",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A dashed drop area that takes files by drag-and-drop or through the file picker.\naliases: LoadFileArea|FileUpload|DragDropUpload|UploadArea\nDesign system 2.0\n\nThe area is a label over a visually hidden file input, so the picker opens on\nclick and the control stays operable by keyboard and announced as a file input\nwithout any extra wiring. The border highlights while a drag hovers it.\n\n`accept` is enforced on drops as well as in the picker — the browser only\nfilters the latter — so `onChange` never receives a file the caller excluded.\nRejected files go to `onReject`; all copy stays with the caller, which keeps\nvalidation messages in the consumer's own wording and language.",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Primary line of copy."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Secondary line of copy."
+        },
+        {
+          "name": "onChange",
+          "type": "(files: File[]) => void",
+          "required": true,
+          "description": "Fired with the accepted files."
+        },
+        {
+          "name": "onReject",
+          "type": "(files: File[]) => void",
+          "required": false,
+          "description": "Fired with dropped files that `accept` excluded."
+        },
+        {
+          "name": "accept",
+          "type": "string",
+          "required": false,
+          "description": "Comma-separated `accept` tokens."
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether more than one file can be selected."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables picking and dropping."
+        },
+        {
+          "name": "errorText",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the area."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered above the copy."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "`id` of the underlying file input."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name; needed when `label` carries no text."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the drop area."
+        }
+      ],
+      "examples": [
+        "<FileDropzone\n  label=\"Drag and drop it or click here to upload\"\n  description=\"File formats .md, .zip and .skill\"\n  accept=\".md,.zip,.skill\"\n  onChange={(files) => upload(files)}\n  onReject={() => setError('Unsupported file format')}\n/>"
+      ],
+      "sourceFile": "components/New/FileDropzone/FileDropzone.tsx"
+    },
+    {
+      "name": "Tag",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "Text content displayed inside the tag."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered before the label."
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Tag height: standard is 24px, small is 20px."
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Applies the accent-tinted selected styling."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Dims the tag and suppresses the remove control and click handling."
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders the remove button. Needs `onRemove` to appear."
+        },
+        {
+          "name": "removeLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name of the remove button; defaults to `Remove <label>`."
+        },
+        {
+          "name": "onRemove",
+          "type": "(event: MouseEvent<HTMLButtonElement>) => void",
+          "required": false,
+          "description": "Called when the remove button is clicked. The click does not bubble to `onClick`."
+        }
+      ],
+      "examples": [
+        "<Tag label=\"TypeScript\" />\n<Tag label=\"TypeScript\" closable onRemove={() => remove('TypeScript')} />\n<Tag label=\"Drafts\" selected onClick={() => toggle('Drafts')} />"
+      ],
+      "sourceFile": "components/New/Tag/Tag.tsx"
+    },
+    {
+      "name": "TagInput",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A tag input field: type a value and commit it with Enter or comma.\naliases: MultiTag|TagField|ChipInput\nDesign system 2.0\n\nThe field is an , so it carries the 2.0 field styling, sizes,\nlabel, caption and error states, and the tags render as s in its\ncontent slot. The field grows as tags wrap, unless `collapseTagOverflow` keeps\nthem on one line behind a `+N` chip.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).\nDuplicate tags are ignored. Backspace on an empty input removes the last tag.",
+      "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The id of the text input, linked to the label."
+        },
+        {
+          "name": "value",
+          "type": "string[]",
+          "required": false,
+          "description": "Controlled tag list."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "description": "Initial tag list when uncontrolled."
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Field height: standard is 40px, small is 24px."
+        },
+        {
+          "name": "labelProps",
+          "type": "LabelProps",
+          "required": false,
+          "description": "Props of the  rendered above the field."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder shown while there are no tags."
+        },
+        {
+          "name": "caption",
+          "type": "string",
+          "required": false,
+          "description": "Helper text rendered below the field when there is no `error`."
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error message rendered below the field (pass `invalid` too for error styling)."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Applies the field's error styling."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Disables typing and tag removal."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Shows the tags without allowing new ones or removal."
+        },
+        {
+          "name": "collapseTagOverflow",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Keep the tags on one line, replacing the ones that do not fit with a `+N` chip."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the text input; use it when there is no visible label."
+        },
+        {
+          "name": "tagListLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Tags'",
+          "description": "Accessible name of the tag list."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "fieldClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the field itself."
+        },
+        {
+          "name": "tagClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to every tag."
+        },
+        {
+          "name": "onChange",
+          "type": "(tags: string[]) => void",
+          "required": false,
+          "description": "Called with the new list whenever a tag is added or removed."
+        }
+      ],
+      "examples": [
+        "const [tags, setTags] = useState<string[]>(['React']);\n\n<TagInput\n  id=\"skills\"\n  labelProps={{ label: 'Skills' }}\n  placeholder=\"Add a skill\"\n  caption=\"Press Enter or comma to add\"\n  value={tags}\n  onChange={setTags}\n/>"
+      ],
+      "sourceFile": "components/New/TagInput/TagInput.tsx"
+    },
     {
       "name": "DialCaptionText",
       "category": "Elements",
       "generation": "1.0",
-      "description": "A component for displaying error messages with consistent styling\naliases: HelperText|ValidationText",
+      "description": "A component for displaying error messages with consistent styling\naliases: HelperText|ValidationText\nDesign system 1.0",
       "props": [
         {
           "name": "text",
@@ -2023,7 +2413,7 @@
       "name": "DialAnalyticsCard",
       "category": "Analytics",
       "generation": "1.0",
-      "description": "A simple analytics summary card that displays a single metric as a title,\na prominent value, and an optional description.\naliases: MetricCard|StatCard|KpiCard\n\nTwo visual variants are available via the  enum:\n- `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.\n- `Compact` — denser `bg-layer-2` card with a `dial-body-semi-text` value and no\n  description (the `description` prop is ignored in this variant).\n\n**Compare mode** — pass `compareValues` to split the value area 50/50 between two\nmetrics, each with its own sub-title. Pair with `delta` to show a change badge next\nto the card title.",
+      "description": "A simple analytics summary card that displays a single metric as a title,\na prominent value, and an optional description.\naliases: MetricCard|StatCard|KpiCard\nDesign system 1.0\n\nTwo visual variants are available via the  enum:\n- `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.\n- `Compact` — denser `bg-layer-2` card with a `dial-body-semi-text` value and no\n  description (the `description` prop is ignored in this variant).\n\n**Compare mode** — pass `compareValues` to split the value area 50/50 between two\nmetrics, each with its own sub-title. Pair with `delta` to show a change badge next\nto the card title.",
       "props": [
         {
           "name": "title",
@@ -2096,7 +2486,7 @@
       "name": "DialAnalyticsBar",
       "category": "Analytics",
       "generation": "1.0",
-      "description": "A compact analytics meter: a horizontal bar whose fill width and color reflect a\nvalue relative to `maxValue`, with an optional title on the left and value on the right.\naliases: MetricBar|Meter|ScoreBar\n\nThe fill color is resolved from `colorMap` based on the normalized ratio\n(`value / maxValue`), so the bar shifts hue as the value grows. An empty bar\n(value `0`) shows only the `bg-layer-1` track. A missing value (`null`) shows\nan em dash and no progress bar.",
+      "description": "A compact analytics meter: a horizontal bar whose fill width and color reflect a\nvalue relative to `maxValue`, with an optional title on the left and value on the right.\naliases: MetricBar|Meter|ScoreBar\nDesign system 1.0\n\nThe fill color is resolved from `colorMap` based on the normalized ratio\n(`value / maxValue`), so the bar shifts hue as the value grows. An empty bar\n(value `0`) shows only the `bg-layer-1` track. A missing value (`null`) shows\nan em dash and no progress bar.",
       "props": [
         {
           "name": "value",
@@ -2183,7 +2573,7 @@
       "name": "DialAnalyticsErrorTag",
       "category": "Analytics",
       "generation": "1.0",
-      "description": "A non-interactive error tag used across analytics components to indicate that a\nmetric value could not be provided. Renders a  styled with the\nerror palette (`bg-error`, `text-error`, `border-error`).",
+      "description": "A non-interactive error tag used across analytics components to indicate that a\nDesign system 1.0\nmetric value could not be provided. Renders a  styled with the\nerror palette (`bg-error`, `text-error`, `border-error`).",
       "props": [
         {
           "name": "label",
@@ -2208,7 +2598,7 @@
       "name": "DialAnalyticsBarGroup",
       "category": "Analytics",
       "generation": "1.0",
-      "description": "A collapsible group of analytics bars built from a key/value map. Wraps\n: the `title` is shown in the header, the number of entries\nis shown as the header description, and each entry renders a \nwith the key as its title and the value as its value.\naliases: MetricBarGroup|BarList|NumericResults",
+      "description": "A collapsible group of analytics bars built from a key/value map. Wraps\n: the `title` is shown in the header, the number of entries\nis shown as the header description, and each entry renders a \nwith the key as its title and the value as its value.\naliases: MetricBarGroup|BarList|NumericResults\nDesign system 1.0",
       "props": [
         {
           "name": "title",
@@ -2329,7 +2719,7 @@
       "name": "DialAnalyticsHistogram",
       "category": "Analytics",
       "generation": "1.0",
-      "description": "A histogram that distributes `values` across the bands of a color map and draws a\ncolumn per band. Each column's height is relative to the most populated band; empty\ncolumns are outlined, populated columns are filled with their band color. A baseline\nseparates the columns from the interval labels, and hovering a column reveals a\ntooltip with its share of the total.\naliases: Distribution|ColumnChart|FrequencyChart",
+      "description": "A histogram that distributes `values` across the bands of a color map and draws a\ncolumn per band. Each column's height is relative to the most populated band; empty\ncolumns are outlined, populated columns are filled with their band color. A baseline\nseparates the columns from the interval labels, and hovering a column reveals a\ntooltip with its share of the total.\naliases: Distribution|ColumnChart|FrequencyChart\nDesign system 1.0",
       "props": [
         {
           "name": "title",
@@ -2403,7 +2793,7 @@
       "name": "DialLabel",
       "category": "Elements",
       "generation": "1.0",
-      "description": "A label component\naliases: FormLabel|RequiredIndicator",
+      "description": "A label component\naliases: FormLabel|RequiredIndicator\nDesign system 1.0",
       "props": [
         {
           "name": "label",
@@ -2434,7 +2824,7 @@
       "name": "DialAccordion",
       "category": "Layout",
       "generation": "1.0",
-      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a chevron that rotates when\nexpanded, a title, and an optional description.",
+      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\nDesign system 1.0\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a chevron that rotates when\nexpanded, a title, and an optional description.",
       "props": [
         {
           "name": "title",
@@ -2514,7 +2904,7 @@
       "name": "DialIcon",
       "category": "Data Display",
       "generation": "1.0",
-      "description": "A wrapper component for rendering icons with consistent styling\naliases: IconRenderer|SVGWrapper",
+      "description": "A wrapper component for rendering icons with consistent styling\naliases: IconRenderer|SVGWrapper\nDesign system 1.0",
       "props": [
         {
           "name": "icon",
@@ -2538,7 +2928,7 @@
       "name": "DialNotification",
       "category": "Elements",
       "generation": "1.0",
-      "description": "A contextual feedback component for displaying important messages.\naliases: Notification|StatusBanner\n\nRenders a colored container with an icon, message text, and an optional\nclose button.",
+      "description": "A contextual feedback component for displaying important messages.\naliases: Notification|StatusBanner\nDesign system 1.0\n\nRenders a colored container with an icon, message text, and an optional\nclose button.",
       "props": [
         {
           "name": "variant",
@@ -2604,7 +2994,7 @@
       "name": "DialLoader",
       "category": "Feedback",
       "generation": "1.0",
-      "description": "A simple loading spinner component.\naliases: LoadingSpinner|ProgressSpinner\n\nRenders a spinning SVG with optional full-width container.",
+      "description": "A simple loading spinner component.\naliases: LoadingSpinner|ProgressSpinner\nDesign system 1.0\n\nRenders a spinning SVG with optional full-width container.",
       "props": [
         {
           "name": "size",
@@ -2649,7 +3039,7 @@
       "name": "DialProgressBar",
       "category": "Status",
       "generation": "1.0",
-      "description": "",
+      "description": "Design system 1.0",
       "props": [
         {
           "name": "value",
@@ -2687,7 +3077,7 @@
       "name": "DialPagination",
       "category": "Navigation",
       "generation": "1.0",
-      "description": "",
+      "description": "Design system 1.0",
       "props": [
         {
           "name": "page",
@@ -2717,7 +3107,7 @@
       "name": "DialCheckbox",
       "category": "Form",
       "generation": "1.0",
-      "description": "A Checkbox component with styling options\naliases: ToggleCheckbox|MultiSelectOption",
+      "description": "A Checkbox component with styling options\naliases: ToggleCheckbox|MultiSelectOption\nDesign system 1.0",
       "props": [
         {
           "name": "id",
@@ -2771,7 +3161,7 @@
       "name": "DialSteps",
       "category": "Navigation",
       "generation": "1.0",
-      "description": "Props for the DialSteps component, which renders a multi-step navigation UI.\naliases: StepWizard|ProgressSteps",
+      "description": "Props for the DialSteps component, which renders a multi-step navigation UI.\naliases: StepWizard|ProgressSteps\nDesign system 1.0",
       "props": [
         {
           "name": "steps",
@@ -2801,7 +3191,7 @@
       "name": "DialRadioButton",
       "category": "Free",
       "generation": "1.0",
-      "description": "A stylized, accessible radio input with optional description.\naliases: ChoiceOption|RadioInput\n\nRenders a native `<input type=\"radio\" />` paired with a label. When `checked`\nand `description` are provided, a supporting text block appears under the control.",
+      "description": "A stylized, accessible radio input with optional description.\naliases: ChoiceOption|RadioInput\nDesign system 1.0\n\nRenders a native `<input type=\"radio\" />` paired with a label. When `checked`\nand `description` are provided, a supporting text block appears under the control.",
       "props": [
         {
           "name": "name",
@@ -2899,7 +3289,7 @@
       "name": "DialRadioGroup",
       "category": "Form",
       "generation": "1.0",
-      "description": "Groups multiple `DialRadio` options and renders custom content for the active option.\naliases: SelectionGroup|OptionGroup\n\nUses `DialField` as the field label and a container with `role=\"radiogroup\"`.\nContent provided in `radioButtons[].content` is shown under the currently active radio.",
+      "description": "Groups multiple `DialRadio` options and renders custom content for the active option.\naliases: SelectionGroup|OptionGroup\nDesign system 1.0\n\nUses `DialField` as the field label and a container with `role=\"radiogroup\"`.\nContent provided in `radioButtons[].content` is shown under the currently active radio.",
       "props": [
         {
           "name": "fieldTitle",
@@ -3019,7 +3409,7 @@
       "name": "DialSlider",
       "category": "Form",
       "generation": "1.0",
-      "description": "A range slider with a custom thumb showing the current value and optional labels.\naliases: RangeInput|TemperatureSlider",
+      "description": "A range slider with a custom thumb showing the current value and optional labels.\naliases: RangeInput|TemperatureSlider\nDesign system 1.0",
       "props": [
         {
           "name": "value",
@@ -3113,7 +3503,7 @@
       "name": "DialNoDataContent",
       "category": "Feedback",
       "generation": "1.0",
-      "description": "A component for displaying a message and icon when there is no data to show.\naliases: EmptyState|NoResults",
+      "description": "A component for displaying a message and icon when there is no data to show.\naliases: EmptyState|NoResults\nDesign system 1.0",
       "props": [
         {
           "name": "icon",
@@ -3161,7 +3551,7 @@
       "name": "DialCollapsibleSidebar",
       "category": "Navigation",
       "generation": "1.0",
-      "description": "A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.\naliases: ToggleSidebar|CollapsiblePanel\n\nIt supports customizable width, title, icons, additional buttons, and flexible styling options.",
+      "description": "A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.\naliases: ToggleSidebar|CollapsiblePanel\nDesign system 1.0\n\nIt supports customizable width, title, icons, additional buttons, and flexible styling options.",
       "props": [
         {
           "name": "children",
@@ -3236,7 +3626,7 @@
       "name": "DialLabelledText",
       "category": "Data Display",
       "generation": "1.0",
-      "description": "A label component for form fields with optional tooltip, content, and custom elements.\naliases: LabelValue|DisplayText",
+      "description": "A label component for form fields with optional tooltip, content, and custom elements.\naliases: LabelValue|DisplayText\nDesign system 1.0",
       "props": [
         {
           "name": "label",
@@ -3284,7 +3674,7 @@
       "name": "DialTag",
       "category": "Tag",
       "generation": "1.0",
-      "description": "A compact label element used for selections, filters, or categories.",
+      "description": "A compact label element used for selections, filters, or categories.\nDesign system 1.0",
       "props": [
         {
           "name": "label",
@@ -3323,13 +3713,14 @@
         }
       ],
       "examples": [],
-      "sourceFile": "components/Tag/Tag.tsx"
+      "sourceFile": "components/Tag/Tag.tsx",
+      "supersededBy": "Tag"
     },
     {
       "name": "DialEllipsisTooltip",
       "category": "Overlay",
       "generation": "1.0",
-      "description": "Single-line text with CSS ellipsis that shows a tooltip **only when actually truncated**.\naliases: TruncatedText|TruncationTooltip\n\nIf the text fits, tooltip content is empty and the popup stays hidden.\n\nImportant: width must be finite for truncation.\nConsumers can override via `className`.\n\na11y: when truncated, the full text is exposed via `aria-label` on the reference node.",
+      "description": "Single-line text with CSS ellipsis that shows a tooltip **only when actually truncated**.\naliases: TruncatedText|TruncationTooltip\nDesign system 1.0\n\nIf the text fits, tooltip content is empty and the popup stays hidden.\n\nImportant: width must be finite for truncation.\nConsumers can override via `className`.\n\na11y: when truncated, the full text is exposed via `aria-label` on the reference node.",
       "props": [
         {
           "name": "text",
@@ -3377,7 +3768,7 @@
       "name": "DialDraggableItem",
       "category": "Components",
       "generation": "1.0",
-      "description": "A lightweight wrapper that makes its children sortable via drag-and-drop.\naliases: SortableItem|DragHandle\n\nRenders a row with a grab handle (left) and the provided content (right).\nIntegrates with `react-dnd` using a simple \"column\" drag type and delegates\nreordering logic to the provided `findItem` and `moveItem` callbacks.",
+      "description": "A lightweight wrapper that makes its children sortable via drag-and-drop.\naliases: SortableItem|DragHandle\nDesign system 1.0\n\nRenders a row with a grab handle (left) and the provided content (right).\nIntegrates with `react-dnd` using a simple \"column\" drag type and delegates\nreordering logic to the provided `findItem` and `moveItem` callbacks.",
       "props": [
         {
           "name": "id",
@@ -3426,7 +3817,7 @@
       "name": "DialFileIcon",
       "category": "FileManager/components",
       "generation": "1.0",
-      "description": "Renders a file-type icon based on a file extension.\naliases: ExtensionIcon|TypeIcon\n\nUses DialIcon to provide consistent icon wrapper styling.",
+      "description": "Renders a file-type icon based on a file extension.\naliases: ExtensionIcon|TypeIcon\nDesign system 1.0\n\nUses DialIcon to provide consistent icon wrapper styling.",
       "props": [
         {
           "name": "extension",
@@ -3483,7 +3874,7 @@
       "name": "DialFormItem",
       "category": "Form",
       "generation": "1.0",
-      "description": "A layout wrapper for form controls with label, helper text and error message.\naliases: FieldWrapper|FormControl\n\nUses `DialLabel` for the label and `DialErrorText` for consistent error styling.\nWires accessibility with:\n- `role=\"group\"`\n- `aria-labelledby` (when label is present)\n- `aria-describedby` (description and/or error ids)",
+      "description": "A layout wrapper for form controls with label, helper text and error message.\naliases: FieldWrapper|FormControl\nDesign system 1.0\n\nUses `DialLabel` for the label and `DialErrorText` for consistent error styling.\nWires accessibility with:\n- `role=\"group\"`\n- `aria-labelledby` (when label is present)\n- `aria-describedby` (description and/or error ids)",
       "props": [
         {
           "name": "id",
@@ -3550,7 +3941,7 @@
       "name": "DialSharedEntityIndicator",
       "category": "FileManager/components",
       "generation": "1.0",
-      "description": "A compact icon-only indicator to denote a \"shared\" entity.\naliases: SharedIcon|AccessIndicator\n\nRenders a small arrow-up-right icon with token-based colors.",
+      "description": "A compact icon-only indicator to denote a \"shared\" entity.\naliases: SharedIcon|AccessIndicator\nDesign system 1.0\n\nRenders a small arrow-up-right icon with token-based colors.",
       "props": [
         {
           "name": "label",
@@ -3601,7 +3992,7 @@
       "name": "DialFileName",
       "category": "FileManager/components",
       "generation": "1.0",
-      "description": "Component to display a file name with a file icon and shared indicator.\naliases: FileDisplay|NameDisplay\n\nHandles long names with ellipsis and tooltip.\n\nIf `details` is provided (e.g., file size, date), the component switches to\na vertical layout and renders the extra information below the file name.",
+      "description": "Component to display a file name with a file icon and shared indicator.\naliases: FileDisplay|NameDisplay\nDesign system 1.0\n\nHandles long names with ellipsis and tooltip.\n\nIf `details` is provided (e.g., file size, date), the component switches to\na vertical layout and renders the extra information below the file name.",
       "props": [
         {
           "name": "name",
@@ -3681,7 +4072,7 @@
       "name": "DialFolderName",
       "category": "FileManager/components",
       "generation": "1.0",
-      "description": "Component to display a folder name with a folder icon and shared indicator.\naliases: FolderDisplay|DirectoryName\n\nHandles long names with ellipsis and tooltip.",
+      "description": "Component to display a folder name with a folder icon and shared indicator.\naliases: FolderDisplay|DirectoryName\nDesign system 1.0\n\nHandles long names with ellipsis and tooltip.",
       "props": [
         {
           "name": "name",
@@ -3758,7 +4149,7 @@
       "name": "DialResizableContainer",
       "category": "Components",
       "generation": "1.0",
-      "description": "DialResizableContainer — A reusable resizable container\naliases: ResizePanel|SizableContainer\n\nsupporting both **controlled** and **uncontrolled** width modes.\n\nControlled Mode\n\nProvide `width` and optionally `onResizeStop`:\n```tsx\n<DialResizableContainer\n  width={sidebarWidth}\n  onResizeStop={(w) => setSidebarWidth(w)}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nUncontrolled Mode\n\nOmit `width` entirely — the component manages its own width:\n```tsx\n<DialResizableContainer\n  defaultWidth={260}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nFeatures:\n- Resize from left or right\n- Fully supports controlled & uncontrolled sizing\n- Custom resize handler (icon or any ReactNode)\n- Callback when resize stops (optional)\n- Smooth hover/drag visibility transitions",
+      "description": "DialResizableContainer — A reusable resizable container\naliases: ResizePanel|SizableContainer\nDesign system 1.0\n\nsupporting both **controlled** and **uncontrolled** width modes.\n\nControlled Mode\n\nProvide `width` and optionally `onResizeStop`:\n```tsx\n<DialResizableContainer\n  width={sidebarWidth}\n  onResizeStop={(w) => setSidebarWidth(w)}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nUncontrolled Mode\n\nOmit `width` entirely — the component manages its own width:\n```tsx\n<DialResizableContainer\n  defaultWidth={260}\n  minWidth={180}\n  maxWidth={520}\n>\n  <Sidebar />\n</DialResizableContainer>\n```\n\nFeatures:\n- Resize from left or right\n- Fully supports controlled & uncontrolled sizing\n- Custom resize handler (icon or any ReactNode)\n- Callback when resize stops (optional)\n- Smooth hover/drag visibility transitions",
       "props": [
         {
           "name": "children",
@@ -3829,7 +4220,7 @@
       "name": "DialConditionalResizableContainer",
       "category": "Components",
       "generation": "1.0",
-      "description": "DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.\naliases: OptionalResize|ConditionalPanel\n\nThis component renders its children inside a resizable container only when `enabled` is true.\nWhen `enabled` is false, children are rendered directly without any resizable behavior.\n\nAll other props are the same as `DialResizableContainer`. See the documentation for\n`DialResizableContainer` for full details on usage, controlled/uncontrolled modes, sides, and callbacks.",
+      "description": "DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.\naliases: OptionalResize|ConditionalPanel\nDesign system 1.0\n\nThis component renders its children inside a resizable container only when `enabled` is true.\nWhen `enabled` is false, children are rendered directly without any resizable behavior.\n\nAll other props are the same as `DialResizableContainer`. See the documentation for\n`DialResizableContainer` for full details on usage, controlled/uncontrolled modes, sides, and callbacks.",
       "props": [
         {
           "name": "enabled",
@@ -3848,7 +4239,7 @@
       "name": "DialGrid",
       "category": "Grid",
       "generation": "1.0",
-      "description": "DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.\naliases: DataTable|TableGrid\n\nProvides a pre-configured grid with:\n- Dark theme styling with CSS variable integration\n- Optional row selection with checkboxes\n- Context menu integration via DialDropdown\n- Text overflow handling with tooltips via DialEllipsisTooltip\n- Controlled or uncontrolled selection modes\n- Automatic column sizing and responsive behavior\n- Full accessibility support with ARIA attributes\n- Loading state with native AG-Grid overlay",
+      "description": "DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.\naliases: DataTable|TableGrid\nDesign system 1.0\n\nProvides a pre-configured grid with:\n- Dark theme styling with CSS variable integration\n- Optional row selection with checkboxes\n- Context menu integration via DialDropdown\n- Text overflow handling with tooltips via DialEllipsisTooltip\n- Controlled or uncontrolled selection modes\n- Automatic column sizing and responsive behavior\n- Full accessibility support with ARIA attributes\n- Loading state with native AG-Grid overlay",
       "props": [
         {
           "name": "columnDefs",
@@ -4003,7 +4394,7 @@
       "name": "DialDateCellRenderer",
       "category": "Grid",
       "generation": "1.0",
-      "description": "Minimal date cell renderer (ag-Grid compatible).\n\nRenders the value in the **\"MMM dd, yyyy\"** format (e.g., \"Jul 20, 2025\"),\nwrapped in `DialEllipsisTooltip` (tooltip only appears if truncated).",
+      "description": "Minimal date cell renderer (ag-Grid compatible).\nDesign system 1.0\n\nRenders the value in the **\"MMM dd, yyyy\"** format (e.g., \"Jul 20, 2025\"),\nwrapped in `DialEllipsisTooltip` (tooltip only appears if truncated).",
       "props": [
         {
           "name": "value",
@@ -4052,7 +4443,7 @@
       "name": "DialTabs",
       "category": "Navigation",
       "generation": "1.0",
-      "description": "A responsive and overflow-aware tabs component that automatically adapts its layout\naliases: TabNavigation|TabBar\n\nbetween a scrollable tab bar and a dropdown menu on smaller screens.\n\nWhen there are too many tabs to fit in a single line, it introduces a dropdown button\nfor accessing hidden tabs and ensures smooth horizontal scrolling. The component also\nautomatically keeps the active tab in view.\n\nSupports both horizontal and vertical orientations and dynamically adjusts layout\nbased on screen size and available space.\n\nOn larger screens, tabs are displayed according to the `orientation` prop\n(horizontal or vertical). On smaller screens (mobile or tablet), the tabs collapse\ninto a dropdown menu for better usability.",
+      "description": "A responsive and overflow-aware tabs component that automatically adapts its layout\naliases: TabNavigation|TabBar\nDesign system 1.0\n\nbetween a scrollable tab bar and a dropdown menu on smaller screens.\n\nWhen there are too many tabs to fit in a single line, it introduces a dropdown button\nfor accessing hidden tabs and ensures smooth horizontal scrolling. The component also\nautomatically keeps the active tab in view.\n\nSupports both horizontal and vertical orientations and dynamically adjusts layout\nbased on screen size and available space.\n\nOn larger screens, tabs are displayed according to the `orientation` prop\n(horizontal or vertical). On smaller screens (mobile or tablet), the tabs collapse\ninto a dropdown menu for better usability.",
       "props": [
         {
           "name": "tabs",
@@ -4136,13 +4527,14 @@
       "examples": [
         "<DialTabs\n  tabs={[\n    { id: 'overview', name: 'Overview' },\n    { id: 'details', name: 'Details' },\n    { id: 'settings', name: 'Settings', invalid: true },\n  ]}\n  activeTab=\"overview\"\n  onClick={(id) => setActiveTab(id)}\n  orientation={TabOrientation.Horizontal}\n/>"
       ],
-      "sourceFile": "components/Tabs/Tabs.tsx"
+      "sourceFile": "components/Tabs/Tabs.tsx",
+      "supersededBy": "Tabs"
     },
     {
       "name": "DialBreadcrumb",
       "category": "Navigation",
       "generation": "1.0",
-      "description": "Breadcrumb navigation component with horizontal scroll on overflow.\naliases: NavigationPath|BreadcrumbTrail\n\nUse either the `pathItems` prop or compose with `<DialBreadcrumbItem/>` as children.\nThe last item is treated as the current page.",
+      "description": "Breadcrumb navigation component with horizontal scroll on overflow.\naliases: NavigationPath|BreadcrumbTrail\nDesign system 1.0\n\nUse either the `pathItems` prop or compose with `<DialBreadcrumbItem/>` as children.\nThe last item is treated as the current page.",
       "props": [
         {
           "name": "pathItems",
@@ -4199,7 +4591,7 @@
       "name": "DialBreadcrumbItem",
       "category": "Navigation",
       "generation": "1.0",
-      "description": "",
+      "description": "Design system 1.0",
       "props": [
         {
           "name": "label",
@@ -4260,7 +4652,7 @@
       "name": "DialButton",
       "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction",
+      "description": "A Button component with flexible icon and text positioning\naliases: ActionButton|CallToAction\nDesign system 1.0",
       "props": [
         {
           "name": "variant",
@@ -4329,7 +4721,7 @@
       "name": "DialIconButton",
       "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton",
+      "description": "A Icon Button component with flexible icon and text positioning\naliases: IconicButton|SymbolButton\nDesign system 1.0",
       "props": [
         {
           "name": "variant",
@@ -4398,7 +4790,7 @@
       "name": "DialPrimaryButton",
       "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A Primary Button component with predefined primary variant",
+      "description": "A Primary Button component with predefined primary variant\nDesign system 1.0",
       "props": [],
       "examples": [
         "<DialPrimaryButton\n label=\"Click me\"\nonClick={handleClick}\nclassName=\"custom-button\"\n/>"
@@ -4470,7 +4862,7 @@
       "name": "DialPrimaryIconButton",
       "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A Primary Icon Button component with predefined primary variant",
+      "description": "A Primary Icon Button component with predefined primary variant\nDesign system 1.0",
       "props": [],
       "examples": [
         "<DialPrimaryIconButton\n icon={<Icon />}\n onClick={handleClick}\n className=\"custom-button\"\n/>"
@@ -4515,7 +4907,7 @@
       "name": "DialCloseButton",
       "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A Close button component with a customizable icon and accessible label.\naliases: DismissButton|ExitButton",
+      "description": "A Close button component with a customizable icon and accessible label.\naliases: DismissButton|ExitButton\nDesign system 1.0",
       "props": [
         {
           "name": "ariaLabel",
@@ -4559,7 +4951,7 @@
       "name": "DialRemoveButton",
       "category": "Elements/Buttons",
       "generation": "1.0",
-      "description": "A specialized button component for removal or delete actions.\naliases: DeleteButton|TrashButton\n\nRenders a `DialDangerButton` with a predefined trash icon (`IconTrashX`) as the leading icon.\nAdditional props are passed directly to the underlying `DialDangerButton`.",
+      "description": "A specialized button component for removal or delete actions.\naliases: DeleteButton|TrashButton\nDesign system 1.0\n\nRenders a `DialDangerButton` with a predefined trash icon (`IconTrashX`) as the leading icon.\nAdditional props are passed directly to the underlying `DialDangerButton`.",
       "props": [
         {
           "name": "iconClassName",
@@ -4577,7 +4969,7 @@
       "name": "DialTextarea",
       "category": "Elements",
       "generation": "1.0",
-      "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox",
+      "description": "A flexible textarea component with validation support and consistent styling\naliases: MultilineInput|TextBox\nDesign system 1.0",
       "props": [
         {
           "name": "labelProps",
@@ -4633,7 +5025,7 @@
       "name": "DialTooltip",
       "category": "Overlay",
       "generation": "1.0",
-      "description": "A Tooltip component that displays information on hover\naliases: HoverPopover|InfoPopover",
+      "description": "A Tooltip component that displays information on hover\naliases: HoverPopover|InfoPopover\nDesign system 1.0",
       "props": [
         {
           "name": "hideTooltip",
@@ -4675,7 +5067,7 @@
       "name": "DialTooltipContainer",
       "category": "Overlay",
       "generation": "1.0",
-      "description": "The container component that provides tooltip context and state management",
+      "description": "The container component that provides tooltip context and state management\nDesign system 1.0",
       "props": [],
       "examples": [],
       "sourceFile": "components/Tooltip/TooltipContainer.tsx"
@@ -4684,7 +5076,7 @@
       "name": "DialTooltipContent",
       "category": "Overlay",
       "generation": "1.0",
-      "description": "The content area of a tooltip that displays the tooltip information",
+      "description": "The content area of a tooltip that displays the tooltip information\nDesign system 1.0",
       "props": [],
       "examples": [],
       "sourceFile": "components/Tooltip/TooltipContent.tsx"
@@ -4693,7 +5085,7 @@
       "name": "DialTooltipTrigger",
       "category": "Overlay",
       "generation": "1.0",
-      "description": "The trigger element for a tooltip that can be clicked or hovered",
+      "description": "The trigger element for a tooltip that can be clicked or hovered\nDesign system 1.0",
       "props": [],
       "examples": [],
       "sourceFile": "components/Tooltip/TooltipTrigger.tsx"
@@ -4702,7 +5094,7 @@
       "name": "DialSwitch",
       "category": "Form",
       "generation": "1.0",
-      "description": "A Switch component with various styling options\naliases: ToggleSwitch|BinaryToggle",
+      "description": "A Switch component with various styling options\naliases: ToggleSwitch|BinaryToggle\nDesign system 1.0",
       "props": [
         {
           "name": "label",
@@ -4744,13 +5136,14 @@
       "examples": [
         "<DialSwitch\n  switchId=\"switch\"\n  label=\"Toggle\"\n  isOn={true}\n  disabled={false}\n  onChange={(value) => console.log(value)}\n  caption=\"Caption\"\n/>"
       ],
-      "sourceFile": "components/Switch/Switch.tsx"
+      "sourceFile": "components/Switch/Switch.tsx",
+      "supersededBy": "Switch"
     },
     {
       "name": "DialSegmentedControl",
       "category": "Form",
       "generation": "1.0",
-      "description": "A single-select control for switching between a small set of mutually exclusive,\nequally-sized options (e.g. view switchers).\naliases: SegmentedButton|ViewSwitcher\n\nRenders a horizontal group of segments where every option is always visible and\nequally sized. Supports 2 or more segments, optional per-option icons, and\nkeyboard navigation (Arrow keys, Home, End).",
+      "description": "A single-select control for switching between a small set of mutually exclusive,\nequally-sized options (e.g. view switchers).\naliases: SegmentedButton|ViewSwitcher\nDesign system 1.0\n\nRenders a horizontal group of segments where every option is always visible and\nequally sized. Supports 2 or more segments, optional per-option icons, and\nkeyboard navigation (Arrow keys, Home, End).",
       "props": [
         {
           "name": "options",
@@ -4798,7 +5191,7 @@
       "name": "DialPopup",
       "category": "Overlay",
       "generation": "1.0",
-      "description": "An accessible modal dialog component using Floating UI.\naliases: Modal|Dialog\n\nRenders in a portal with a scrim overlay, focus management, header with a title,\ncontent area, optional footer and a close control.",
+      "description": "An accessible modal dialog component using Floating UI.\naliases: Modal|Dialog\nDesign system 1.0\n\nRenders in a portal with a scrim overlay, focus management, header with a title,\ncontent area, optional footer and a close control.",
       "props": [
         {
           "name": "open",
@@ -4914,7 +5307,7 @@
       "name": "DialConfirmationPopup",
       "category": "Overlay",
       "generation": "1.0",
-      "description": "A confirmation dialog built with DialPopup and DialButton.\naliases: ConfirmDialog|WarningDialog\n\nProvides an accessible modal with a title, optional description or custom content,\nand a footer with Cancel / Confirm actions.",
+      "description": "A confirmation dialog built with DialPopup and DialButton.\naliases: ConfirmDialog|WarningDialog\nDesign system 1.0\n\nProvides an accessible modal with a title, optional description or custom content,\nand a footer with Cancel / Confirm actions.",
       "props": [
         {
           "name": "description",
@@ -4998,7 +5391,7 @@
       "name": "DialRadioGroupPopupField",
       "category": "Form",
       "generation": "1.0",
-      "description": "A composite field that opens a popup with a radio group selector.\naliases: PopupRadio|ChoicePopup\n\nRenders a labeled readout using `DialInputPopup`; when opened, a `DialPopup`\ndisplays a `DialRadioGroup` allowing the user to pick from a list of options.\nThe footer provides Cancel/Apply actions, with Apply disabled when `isValid` is false.\n\nThe value shown in the collapsed field is derived from either `customInputValue`\nor the name of the currently selected radio option identified by `selectedValue`.",
+      "description": "A composite field that opens a popup with a radio group selector.\naliases: PopupRadio|ChoicePopup\nDesign system 1.0\n\nRenders a labeled readout using `DialInputPopup`; when opened, a `DialPopup`\ndisplays a `DialRadioGroup` allowing the user to pick from a list of options.\nThe footer provides Cancel/Apply actions, with Apply disabled when `isValid` is false.\n\nThe value shown in the collapsed field is derived from either `customInputValue`\nor the name of the currently selected radio option identified by `selectedValue`.",
       "props": [],
       "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/>"
@@ -5009,7 +5402,7 @@
       "name": "DialFormPopup",
       "category": "Overlay",
       "generation": "1.0",
-      "description": "A form-oriented popup dialog.\naliases: FormDialog|FormModal\n\nProvides an accessible popup with a title, custom body,\nand a footer with \"Cancel\" and \"Submit\" actions.",
+      "description": "A form-oriented popup dialog.\naliases: FormDialog|FormModal\nDesign system 1.0\n\nProvides an accessible popup with a title, custom body,\nand a footer with \"Cancel\" and \"Submit\" actions.",
       "props": [
         {
           "name": "submitLabel",
@@ -5073,7 +5466,7 @@
       "name": "DialInput",
       "category": "Elements/Inputs",
       "generation": "1.0",
-      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput",
+      "description": "A flexible input component with icon support and various styling options\naliases: TextField|FormInput\nDesign system 1.0",
       "props": [
         {
           "name": "labelProps",
@@ -5165,7 +5558,7 @@
       "name": "DialNumberInput",
       "category": "Elements/Inputs",
       "generation": "1.0",
-      "description": "A number input field component\naliases: NumericField|NumberField",
+      "description": "A number input field component\naliases: NumericField|NumberField\nDesign system 1.0",
       "props": [
         {
           "name": "integer",
@@ -5190,7 +5583,7 @@
       "name": "DialPasswordInput",
       "category": "Elements/Inputs",
       "generation": "1.0",
-      "description": "A password input component with show/hide functionality and customizable props.\naliases: SecureInput|ToggleablePassword",
+      "description": "A password input component with show/hide functionality and customizable props.\naliases: SecureInput|ToggleablePassword\nDesign system 1.0",
       "props": [],
       "examples": [
         "<DialPasswordInput\n  id=\"password\"\n  label=\"Password\"\n  value={password}\n  onChange={e => setPassword(e.target.value)}\n  disabled={false}\n/>"
@@ -5202,7 +5595,7 @@
       "name": "DialSearch",
       "category": "Elements",
       "generation": "1.0",
-      "description": "A search input component with a customizable placeholder, icons, flexible props, and the ability\naliases: SearchField|QueryInput\n\nto clear the input value via a clear button. Supports multiple sizes for flexible layouts.",
+      "description": "A search input component with a customizable placeholder, icons, flexible props, and the ability\naliases: SearchField|QueryInput\nDesign system 1.0\n\nto clear the input value via a clear button. Supports multiple sizes for flexible layouts.",
       "props": [
         {
           "name": "withoutBorder",
@@ -5232,7 +5625,7 @@
       "name": "DialInputPopup",
       "category": "Overlay",
       "generation": "1.0",
-      "description": "An input field that opens a popup when clicked, displaying a selected value or a list of values.\naliases: PopupInput|ReadonlyInput\n\nIt supports read-only mode, error states, and disabled state, with customizable styling.\nThe modal content is rendered using a portal for seamless integration.",
+      "description": "An input field that opens a popup when clicked, displaying a selected value or a list of values.\naliases: PopupInput|ReadonlyInput\nDesign system 1.0\n\nIt supports read-only mode, error states, and disabled state, with customizable styling.\nThe modal content is rendered using a portal for seamless integration.",
       "props": [
         {
           "name": "open",
@@ -5342,7 +5735,7 @@
       "name": "DialAutocompleteInputValue",
       "category": "Form",
       "generation": "1.0",
-      "description": "A component that displays a list of selected items in a customizable, styled list. Each item is\naliases: SelectedList|ItemDisplay\n\nrendered as a tag wrapped in a tooltip, allowing for truncation and additional context when\nhovered. The component is flexible and supports custom CSS classes for styling the list and\nindividual list items.",
+      "description": "A component that displays a list of selected items in a customizable, styled list. Each item is\naliases: SelectedList|ItemDisplay\nDesign system 1.0\n\nrendered as a tag wrapped in a tooltip, allowing for truncation and additional context when\nhovered. The component is flexible and supports custom CSS classes for styling the list and\nindividual list items.",
       "props": [
         {
           "name": "placeholder",
@@ -5385,7 +5778,7 @@
       "name": "DialTagInput",
       "category": "Form",
       "generation": "1.0",
-      "description": "A tag input field that allows users to add multiple tags using the Enter or comma key.\naliases: MultiTag|TagField\n\nSupports removing tags, displaying field labels, optional indicators, validation states,\nand dynamic layout adjustment when tags wrap to multiple lines.",
+      "description": "A tag input field that allows users to add multiple tags using the Enter or comma key.\naliases: MultiTag|TagField\nDesign system 1.0\n\nSupports removing tags, displaying field labels, optional indicators, validation states,\nand dynamic layout adjustment when tags wrap to multiple lines.",
       "props": [
         {
           "name": "elementId",
@@ -5466,13 +5859,14 @@
       "examples": [
         "<DialTagInput\n  elementId=\"skills\"\n  fieldTitle=\"Skills\"\n  placeholder=\"Add a skill\"\n  initialTags={['React', 'TypeScript']}\n  optional\n  onChange={(tags) => console.log('Updated tags:', tags)}\n/>"
       ],
-      "sourceFile": "components/TagInput/TagInput.tsx"
+      "sourceFile": "components/TagInput/TagInput.tsx",
+      "supersededBy": "TagInput"
     },
     {
       "name": "DialSelect",
       "category": "Form",
       "generation": "1.0",
-      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\n\nSingle mode mirrors the legacy visual:\n- Trigger shows the selected option's leading icon + label.\n- In the list, the selected option is indicated by a LEFT border and tinted background\n  (no check icon).\n\nMultiple mode uses checkboxes (including Select All with indeterminate state).\n\nSearch:\n- `searchable`: shows a plain input in the overlay header that filters options.\n- `inlineSearch` (single mode only): the trigger renders a plain input; typing filters options;\n  when closed, the input shows the selected label.",
+      "description": "A versatile select supporting single and multiple selections.\naliases: OptionPicker|ChoiceSelector\nDesign system 1.0\n\nSingle mode mirrors the legacy visual:\n- Trigger shows the selected option's leading icon + label.\n- In the list, the selected option is indicated by a LEFT border and tinted background\n  (no check icon).\n\nMultiple mode uses checkboxes (including Select All with indeterminate state).\n\nSearch:\n- `searchable`: shows a plain input in the overlay header that filters options.\n- `inlineSearch` (single mode only): the trigger renders a plain input; typing filters options;\n  when closed, the input shows the selected label.",
       "props": [
         {
           "name": "options",
@@ -5700,7 +6094,7 @@
       "name": "DialSelectField",
       "category": "Form",
       "generation": "1.0",
-      "description": "A Select field wrapper that composes `DialFormItem` and `DialSelect`.\naliases: SelectInput|ComboField\n\nProvides unified label, description, error rendering and a readonly view that shows\nthe selected option labels (comma-separated in single mode, list in multiple).",
+      "description": "A Select field wrapper that composes `DialFormItem` and `DialSelect`.\naliases: SelectInput|ComboField\nDesign system 1.0\n\nProvides unified label, description, error rendering and a readonly view that shows\nthe selected option labels (comma-separated in single mode, list in multiple).",
       "props": [
         {
           "name": "selectClassName",
@@ -5724,7 +6118,7 @@
       "name": "DialLoadFileArea",
       "category": "Form",
       "generation": "1.0",
-      "description": "A drag-and-drop file upload area component that allows users to upload files\naliases: FileDropZone|DragDropUpload\n\neither by dragging them into the area or by selecting them through the file picker.\nDisplays helpful text, button prompts, and validation errors for file format or count limits.",
+      "description": "A drag-and-drop file upload area component that allows users to upload files\naliases: FileDropZone|DragDropUpload\nDesign system 1.0\n\neither by dragging them into the area or by selecting them through the file picker.\nDisplays helpful text, button prompts, and validation errors for file format or count limits.",
       "props": [
         {
           "name": "files",
@@ -5766,7 +6160,7 @@
       "name": "DialLoadFileAreaField",
       "category": "Form",
       "generation": "1.0",
-      "description": "A composite file upload field that combines a label, file list management,\naliases: UploadField|FileListField\n\nand a drag-and-drop upload area. Allows users to add, remove, and validate files\nwith customizable restrictions on file types and count.\n\nThe component displays a header showing the field title and file count,\nalong with \"Add\" and \"Delete All\" buttons (when multiple uploads are enabled).\nIt integrates with `DialLoadFileArea` for drag-and-drop functionality and\nprovides file validation for both format and maximum file count.",
+      "description": "A composite file upload field that combines a label, file list management,\naliases: UploadField|FileListField\nDesign system 1.0\n\nand a drag-and-drop upload area. Allows users to add, remove, and validate files\nwith customizable restrictions on file types and count.\n\nThe component displays a header showing the field title and file count,\nalong with \"Add\" and \"Delete All\" buttons (when multiple uploads are enabled).\nIt integrates with `DialLoadFileArea` for drag-and-drop functionality and\nprovides file validation for both format and maximum file count.",
       "props": [
         {
           "name": "fieldTitle",
@@ -5941,7 +6335,7 @@
       "name": "DialButtonDropdown",
       "category": "Dropdown",
       "generation": "1.0",
-      "description": "A Button dropdown component based on DialDropdown component\naliases: SplitButton|MenuButton",
+      "description": "A Button dropdown component based on DialDropdown component\naliases: SplitButton|MenuButton\nDesign system 1.0",
       "props": [
         {
           "name": "items",
@@ -5960,7 +6354,7 @@
       "name": "DialDropdownIcon",
       "category": "Dropdown",
       "generation": "1.0",
-      "description": "A compact icon trigger with a dropdown menu.\naliases: ModelPicker|IconMenu|AvatarDropdown",
+      "description": "A compact icon trigger with a dropdown menu.\naliases: ModelPicker|IconMenu|AvatarDropdown\nDesign system 1.0",
       "props": [
         {
           "name": "icon",
@@ -6023,7 +6417,7 @@
       "name": "DialFileManager",
       "category": "FileManager",
       "generation": "1.0",
-      "description": "File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.\naliases: FileExplorer|FileBrowser",
+      "description": "File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.\naliases: FileExplorer|FileBrowser\nDesign system 1.0",
       "props": [
         {
           "name": "path",
@@ -6506,7 +6900,7 @@
       "name": "DialDestinationFolderPopup",
       "category": "FileManager/components",
       "generation": "1.0",
-      "description": "DestinationFolderPopup\naliases: FolderSelector|PathChooser",
+      "description": "DestinationFolderPopup\naliases: FolderSelector|PathChooser\nDesign system 1.0",
       "props": [],
       "examples": [
         "<DestinationFolderPopup\n  open={isOpen}\n  onClose={handleClose}\n  onConfirm={handleConfirm}\n  mode=\"copy\"\n  title=\"Copy 3 files\"\n  items={files}\n  rootItem={rootFolder}\n  path={currentPath}\n  onPathChange={setCurrentPath}\n/>"
@@ -6517,7 +6911,7 @@
       "name": "DialFoldersTree",
       "category": "Data Display",
       "generation": "1.0",
-      "description": "DialFoldersTree — A hierarchical folder tree component with nested expand/collapse support, selection highlighting,\nand optional file display.",
+      "description": "DialFoldersTree — A hierarchical folder tree component with nested expand/collapse support, selection highlighting,\nDesign system 1.0\nand optional file display.",
       "props": [
         {
           "name": "items",
@@ -6690,7 +7084,7 @@
       "name": "DialSchemaRenderer",
       "category": "Name",
       "generation": "1.0",
-      "description": "Renders a JSON Schema as a form UI with collapsible sections, validation, and default values.\naliases: SchemaRenderer|JsonSchemaForm",
+      "description": "Renders a JSON Schema as a form UI with collapsible sections, validation, and default values.\naliases: SchemaRenderer|JsonSchemaForm\nDesign system 1.0",
       "props": [],
       "examples": [
         "<DialSchemaRenderer\n  schema={mySchema}\n  onChange={(v) => console.log(v)}\n  onDefaultValues={(defaults) => console.log(defaults)}\n/>"
@@ -6701,7 +7095,7 @@
       "name": "DialJsonEditor",
       "category": "Data Display",
       "generation": "1.0",
-      "description": "A JSON editor component built on top of Monaco Editor.\nProvides syntax highlighting, validation, and theme support for JSON editing.\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyDialJsonEditor` and the manifest `lazy` field for dynamic import guidance.",
+      "description": "A JSON editor component built on top of Monaco Editor.\nDesign system 1.0\nProvides syntax highlighting, validation, and theme support for JSON editing.\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyDialJsonEditor` and the manifest `lazy` field for dynamic import guidance.",
       "props": [
         {
           "name": "value",
@@ -8287,6 +8681,26 @@
       "kind": "type",
       "sourceFile": "components/New/Calendar/Calendar.tsx",
       "typeBody": "Date | string | null"
+    },
+    {
+      "name": "TabItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "id",
+          "value": "string"
+        },
+        {
+          "name": "label",
+          "value": "string"
+        },
+        {
+          "name": "count?",
+          "value": "number"
+        }
+      ],
+      "sourceFile": "components/New/Tabs/Tabs.tsx",
+      "description": "A single tab entry rendered by ."
     }
   ],
   "hooks": [
@@ -8344,6 +8758,12 @@
       "sourceFile": "components/FileManager/hooks/use-file-manager-context.ts",
       "description": "Hook to read the File Manager context.\nThrows if used outside of the provider.",
       "signature": "() => unknown"
+    },
+    {
+      "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"
     }
   ],
   "utils": [