@epam/ai-dial-ui-kit 0.16.0-dev.55 → 0.16.0-dev.57

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.55",
-  "generatedAt": "2026-10-29T14:03:04.181Z",
+  "version": "0.16.0-dev.57",
+  "generatedAt": "2026-10-29T22:34:30.711Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -14,7 +14,7 @@
     },
     "setupNotes": "## Next.js Integration\n1. Install the package. React is the only peer you have to supply — everything\n   the kit renders with, it installs itself.\n\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom\n```\n\nAdd the editor package only if you use the Markdown editor\n(`LazyMarkdownEditor`). It is an optional peer, so `npm install` stays quiet\nwithout it, and the kit only reaches for it when the editor actually mounts:\n\n``` bash\nnpm install @uiw/react-md-editor\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
   },
-  "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                             | Design name                 | Weight   | Size / Line-height                  |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text`             | Display 1                   | semibold | 32px / 48px                         |\n| `.dial-display2-text`             | Display 2                   | semibold | 28px / 40px                         |\n| `.dial-display3-text`             | Display 3                   | semibold | 22px / 32px                         |\n| `.dial-h1-text`                   | Heading 1                   | semibold | 20px / 28px                         |\n| `.dial-h2-text`                   | Heading 2                   | semibold | 18px / 26px                         |\n| `.dial-h3-text`                   | Heading 3                   | semibold | 16px / 24px                         |\n| `.dial-body-text`                 | Body Text                   | normal   | 16px / 24px                         |\n| `.dial-body-semi-text`            | Body Text (Semi Bold)       | semibold | 16px / 24px                         |\n| `.dial-body-paragraph-text`       | Body Paragraph              | normal   | 16px / 26px                         |\n| `.dial-body-paragraph-semi-text`  | Body Paragraph (Semi Bold)  | semibold | 16px / 26px                         |\n| `.dial-small-text`                | Small Text                  | normal   | 14px / 20px                         |\n| `.dial-small-semi-text`           | Small Text (Semi Bold)      | semibold | 14px / 20px                         |\n| `.dial-small-paragraph-text`      | Small Paragraph             | normal   | 14px / 24px                         |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px                         |\n| `.dial-tiny-text`                 | Tiny Text                   | normal   | 12px / 16px                         |\n| `.dial-tiny-lead-text`            | Tiny Text Lead              | normal   | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-tiny-semi-text`            | Tiny Text (Semi Bold)       | semibold | 12px / 16px                         |\n| `.dial-tiny-lead-semi-text`       | Tiny Text Lead (Semi Bold)  | semibold | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-caption-text`              | Caption                     | normal   | 10px / 12px                         |\n| `.dial-caption-lead-semi-text`    | Caption Lead (Semi Bold)    | semibold | 10px / 12px (+0.06em, uppercase)    |\n| `.dial-code-text`                 | Code                        | normal   | 14px / 20px (Fira Code / monospace) |\n| `.dial-italic-text`               | Italic                      | normal   | 18px / 22px (serif, italic)         |\n| `.dial-small-italic-text`         | Small Italic                | normal   | 14px / 20px (serif, italic)         |\n| `.dial-tiny-italic-text`          | Tiny Italic                 | normal   | 12px / 16px (serif, italic)         |\n| `.dial-caption-italic-text`       | Caption Italic              | normal   | 10px / 12px (serif, italic)         |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\n`.dial-code-text` resolves its family through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before falling back to the system monospace stack. The kit ships no font file; the host provides the face.\n\nThe `*-italic-text` classes use a serif italic face and are intended for mathematical and formula symbols. Their line-heights follow the corresponding typography size; the default 18px variant uses a fixed 22px line-height to keep standalone symbols vertically aligned without changing their container's height.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
+  "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                             | Design name                 | Weight   | Size / Line-height                  |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text`             | Display 1                   | semibold | 32px / 48px                         |\n| `.dial-display2-text`             | Display 2                   | semibold | 28px / 40px                         |\n| `.dial-display3-text`             | Display 3                   | semibold | 22px / 32px                         |\n| `.dial-h1-text`                   | Heading 1                   | semibold | 20px / 28px                         |\n| `.dial-h2-text`                   | Heading 2                   | semibold | 18px / 26px                         |\n| `.dial-h3-text`                   | Heading 3                   | semibold | 16px / 24px                         |\n| `.dial-body-text`                 | Body Text                   | normal   | 16px / 24px                         |\n| `.dial-body-semi-text`            | Body Text (Semi Bold)       | semibold | 16px / 24px                         |\n| `.dial-body-paragraph-text`       | Body Paragraph              | normal   | 16px / 26px                         |\n| `.dial-body-paragraph-semi-text`  | Body Paragraph (Semi Bold)  | semibold | 16px / 26px                         |\n| `.dial-small-text`                | Small Text                  | normal   | 14px / 20px                         |\n| `.dial-small-semi-text`           | Small Text (Semi Bold)      | semibold | 14px / 20px                         |\n| `.dial-small-paragraph-text`      | Small Paragraph             | normal   | 14px / 24px                         |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px                         |\n| `.dial-tiny-text`                 | Tiny Text                   | normal   | 12px / 16px                         |\n| `.dial-tiny-lead-text`            | Tiny Text Lead              | normal   | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-tiny-semi-text`            | Tiny Text (Semi Bold)       | semibold | 12px / 16px                         |\n| `.dial-tiny-lead-semi-text`       | Tiny Text Lead (Semi Bold)  | semibold | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-caption-text`              | Caption                     | normal   | 10px / 12px                         |\n| `.dial-caption-lead-semi-text`    | Caption Lead (Semi Bold)    | semibold | 10px / 12px (+0.06em, uppercase)    |\n| `.dial-code-text`                 | Code                        | normal   | 14px / 20px (Fira Code / monospace) |\n| `.dial-code-semi-text`            | Code (Semi Bold)            | semibold | 14px / 20px (Fira Code / monospace) |\n| `.dial-tiny-code-text`            | Tiny Code                   | normal   | 12px / 16px (Fira Code / monospace) |\n| `.dial-tiny-code-semi-text`       | Tiny Code (Semi Bold)       | semibold | 12px / 16px (Fira Code / monospace) |\n| `.dial-italic-text`               | Italic                      | normal   | 18px / 22px (serif, italic)         |\n| `.dial-small-italic-text`         | Small Italic                | normal   | 14px / 20px (serif, italic)         |\n| `.dial-tiny-italic-text`          | Tiny Italic                 | normal   | 12px / 16px (serif, italic)         |\n| `.dial-caption-italic-text`       | Caption Italic              | normal   | 10px / 12px (serif, italic)         |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\nThe four `*code*-text` classes (`.dial-code-text`, `.dial-code-semi-text`, `.dial-tiny-code-text`, `.dial-tiny-code-semi-text`) resolve their 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. Use `.dial-code-semi-text` instead of layering `font-semibold` on `.dial-code-text` (for example for JSON keys), and `.dial-tiny-code-text` for inline code inside `.dial-tiny-text` copy instead of setting only the font family.\n\nThere is no display step above `.dial-display1-text` (32px / 48px). Hero headings larger than that are not part of the type scale yet.\n\nThe `*-italic-text` classes use a serif italic face and are intended for mathematical and formula symbols. Their line-heights follow the corresponding typography size; the default 18px variant uses a fixed 22px line-height to keep standalone symbols vertically aligned without changing their container's height.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
   "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see src/styles/theme.scss for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n  --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-base` | `var(--bg-layer-base)` | `#f5f7fa` |\n| `error` | `var(--bg-error)` | `#f3d6d8` |\n| `warning` | `var(--bg-warning)` | `#faf0cf` |\n| `info` | `var(--bg-info)` | `#e1eaf9` |\n| `success` | `var(--bg-success)` | `#dbf1eb` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1d4ed8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885df2` |\n| `blue` | `var(--bg-visual-blue)` | `#d6edf9` |\n| `green-1` | `var(--bg-visual-green-1)` | `#cde8e5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#d1f0dc` |\n| `brown` | `var(--bg-visual-brown)` | `#fde8d8` |\n| `red` | `var(--bg-visual-red)` | `#fce7f3` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--stroke-primary)` | `#57647a` |\n| `secondary` | `var(--stroke-secondary)` | `#d1dbea` |\n| `tertiary` | `var(--stroke-tertiary)` | `#e0e6f0` |\n| `error` | `var(--stroke-error)` | `#ae2f2f` |\n| `warning` | `var(--stroke-warning)` | `#eec840` |\n| `info` | `var(--stroke-info)` | `#1d4ed8` |\n| `accent` | `var(--stroke-accent)` | `#1d4ed8` |\n| `success` | `var(--stroke-success)` | `#007274` |\n| `default` | `var(--stroke-default)` | `#b2c2dd` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976e9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885df2` |\n| `focus` | `var(--stroke-focus)` | `#161b2d` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n| `secondary` | `var(--text-secondary)` | `#57647a` |\n| `tertiary` | `var(--text-tertiary)` | `#848e9c` |\n| `accent` | `var(--text-accent)` | `#1d4ed8` |\n| `error` | `var(--text-error)` | `#ae2f2f` |\n| `warning` | `var(--text-warning)` | `#7f6300` |\n| `warning-icon` | `var(--text-warning-icon)` | `#eec840` |\n| `info` | `var(--text-info)` | `#1d4ed8` |\n| `success` | `var(--text-success)` | `#007274` |\n| `blue` | `var(--text-visual-blue)` | `#1189c8` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0d6e72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065f46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#d36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#b45309` |\n| `red` | `var(--text-visual-red)` | `#9d174d` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7c3aed` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730b7` |\n\n### placeholderColor\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\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| `blackout` | `var(--bg-blackout)` | `#0c101d4d` |\n| `neutral` | `var(--bg-neutral)` | `#fcfcfc` |\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-error` | `var(--controls-bg-error)` | `#ae2f2f` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#d1dbea` |\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| `hover` | `var(--stroke-hover)` | `#eef1f7` |\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-neutral` | `var(--controls-text-neutral)` | `#161b2d` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `xs` | `var(--shadow-xs-1)` | `#2764d933` |\n| `lg` | `var(--shadow-lg)` | `#2764d914` |",
   "components": [
     {
@@ -54,7 +54,7 @@
       "name": "ProgressBar",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A horizontal bar indicating progress toward a goal.\naliases: Progress|LoadingBar|Meter\nDesign system 2.0\n\nNames itself from `labelProps.label` through `aria-labelledby`; without one it\nfalls back to `aria-label`, and finally to `Progress` so the bar is never\nanonymous. Prefer a real label — several bars all announcing \"Progress\" tell a\nscreen reader user nothing about which is which.\n\nScreen readers derive the announced percentage from the value and `max`. When\nthe raw numbers are more useful than a percentage, pass `aria-valuetext`\n(e.g. `\"3 of 10 files\"`); it goes straight through to the element.\n\n`valueLabel` renders a readout at the end of the label row. Formatting stays\nwith the caller — the bar has no way to know how many decimals or which unit\na given quantity deserves. It does not name the bar, so pair it with a\nmatching `aria-valuetext` to have the same reading announced.",
+      "description": "A horizontal bar indicating progress toward a goal, or a level within a range.\naliases: Progress|LoadingBar|Meter|Gauge|CapacityMeter|UsageBar\nDesign system 2.0\n\n`role` picks what the bar means. The default, `ProgressBarRole.Progressbar`,\nis a task on its way to done — an upload, an import. `ProgressBarRole.Meter`\nrenders `role=\"meter\"`: a level inside a known range that never completes —\ncapacity used, a quota, a budget. Both carry `aria-valuemin`,\n`aria-valuemax`, `aria-valuenow` and, when given, `aria-valuetext`, and draw\nthe same track and accent fill; the role changes only what a screen reader\nannounces. The bar has no low / optimum / high colouring, so a meter that\nmust change colour near its limit is restyled by the caller through\n`className`.\n\nNames itself from `labelProps.label` through `aria-labelledby`; without one it\nfalls back to `aria-label`, and finally to `Progress` so the bar is never\nanonymous. Prefer a real label — several bars all announcing \"Progress\" tell a\nscreen reader user nothing about which is which.\n\nScreen readers derive the announced percentage from the value and `max`. When\nthe raw numbers are more useful than a percentage, pass `aria-valuetext`\n(e.g. `\"3 of 10 files\"`); it goes straight through to the element.\n\n`valueLabel` renders a readout at the end of the label row. Formatting stays\nwith the caller — the bar has no way to know how many decimals or which unit\na given quantity deserves. It does not name the bar, so pair it with a\nmatching `aria-valuetext` to have the same reading announced.",
       "props": [
         {
           "name": "value",
@@ -87,10 +87,17 @@
           "type": "ReactNode",
           "required": false,
           "description": "Readout rendered at the end of the label row."
+        },
+        {
+          "name": "role",
+          "type": "ProgressBarRole",
+          "required": false,
+          "defaultValue": "ProgressBarRole.Progressbar",
+          "description": "ARIA role of the bar: `progressbar` for a task's progress, `meter` for a level within a range. Without a label the bar is named `Progress` or `Meter` respectively."
         }
       ],
       "examples": [
-        "<ProgressBar value={40} labelProps={{ label: 'Uploading' }} />\n<ProgressBar value={3} max={10} aria-valuetext=\"3 of 10 files\" />\n<ProgressBar value={80} size={ElementSize.Small} />\n\n<ProgressBar\n  value={3.313182}\n  max={500}\n  labelProps={{ label: 'Cost per month', caption: 'Billed monthly' }}\n  valueLabel=\"3.31 / 500\"\n  aria-valuetext=\"3.31 of 500\"\n/>"
+        "<ProgressBar value={40} labelProps={{ label: 'Uploading' }} />\n<ProgressBar value={3} max={10} aria-valuetext=\"3 of 10 files\" />\n<ProgressBar value={80} size={ElementSize.Small} />\n<ProgressBar\n  role={ProgressBarRole.Meter}\n  value={usedBytes}\n  max={maxBytes}\n  aria-label=\"Project capacity\"\n  aria-valuetext=\"42% used\"\n/>\n\n<ProgressBar\n  value={3.313182}\n  max={500}\n  labelProps={{ label: 'Cost per month', caption: 'Billed monthly' }}\n  valueLabel=\"3.31 / 500\"\n  aria-valuetext=\"3.31 of 500\"\n/>"
       ],
       "sourceFile": "components/ProgressBar/ProgressBar.tsx"
     },
@@ -193,7 +200,7 @@
       "name": "Notification",
       "category": "Components_2_0",
       "generation": "2.0",
-      "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.",
+      "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. `surface={NotificationSurface.Neutral}` swaps the coloured\ncontainer for the neutral sunken layer and keeps the variant's icon, icon\ncolour and role.\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",
@@ -209,6 +216,13 @@
           "defaultValue": "NotificationType.Toast",
           "description": "Defines the type of notification, either a toast or a section message"
         },
+        {
+          "name": "surface",
+          "type": "NotificationSurface",
+          "required": false,
+          "defaultValue": "NotificationSurface.Variant",
+          "description": "`Neutral` draws the neutral sunken surface while keeping the variant's icon, icon colour and role"
+        },
         {
           "name": "title",
           "type": "ReactNode",
@@ -262,7 +276,7 @@
         }
       ],
       "examples": [
-        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>\n\n<Notification\n  variant={NotificationVariant.General}\n  type={NotificationType.SectionMessage}\n  title=\"Title\"\n  message=\"Description text example\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  type={NotificationType.SectionMessage}\n  title=\"Couldn't finish this response\"\n  message=\"Something went wrong. Try again in a moment.\"\n  action={\n    <Button\n      variant={ButtonVariant.Neutral}\n      appearance={ButtonAppearance.Outlined}\n      size={ElementSize.Small}\n      label=\"Try again\"\n      onClick={handleRetry}\n    />\n  }\n/>"
+        "<Notification\n  variant={NotificationVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<Notification\n  variant={NotificationVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>\n\n<Notification\n  variant={NotificationVariant.General}\n  type={NotificationType.SectionMessage}\n  title=\"Title\"\n  message=\"Description text example\"\n/>\n\n<Notification\n  variant={NotificationVariant.Warning}\n  type={NotificationType.SectionMessage}\n  surface={NotificationSurface.Neutral}\n  title=\"Log in required\"\n  message=\"Scheduled tasks run while you are offline.\"\n/>\n\n<Notification\n  variant={NotificationVariant.Error}\n  type={NotificationType.SectionMessage}\n  title=\"Couldn't finish this response\"\n  message=\"Something went wrong. Try again in a moment.\"\n  action={\n    <Button\n      variant={ButtonVariant.Neutral}\n      appearance={ButtonAppearance.Outlined}\n      size={ElementSize.Small}\n      label=\"Try again\"\n      onClick={handleRetry}\n    />\n  }\n/>"
       ],
       "sourceFile": "components/New/Notification/Notification.tsx"
     },
@@ -2515,7 +2529,7 @@
       "name": "Dropdown",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "Renders the given trigger (`children`) and a floating contextual menu overlay.\naliases: ContextMenu|PopupMenu\nDesign system 2.0\n\nA menu of **actions or navigation options**, opened from a trigger. It is not\nthe control for picking a value out of a list — a country, a sort order, a\nfilter — which is what  is for.\n\nSupports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional\nclose button inside the overlay. Placement is taken directly from Floating UI; when\n`placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.\n\nA chosen row is marked through the item's `mark`: the design draws a menu's\nsingle-select and multiselect the same way, with a check at the trailing edge\n(`MenuItemMark.Check`). Pair it with `selectable` for a multiselect row, which\nkeeps the menu open across toggles. `MenuItemMark.Highlight` is the current\nitem of a navigation menu.",
+      "description": "Renders the given trigger (`children`) and a floating contextual menu overlay.\naliases: ContextMenu|PopupMenu\nDesign system 2.0\n\nA menu of **actions or navigation options**, opened from a trigger. It is not\nthe control for picking a value out of a list — a country, a sort order, a\nfilter — which is what  is for.\n\nSupports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional\nclose button inside the overlay. Placement is taken directly from Floating UI; when\n`placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.\n\nA chosen row is marked through the item's `mark`: the design draws a menu's\nsingle-select and multiselect the same way, with a check at the trailing edge\n(`MenuItemMark.Check`). Pair it with `selectable` for a multiselect row, which\nkeeps the menu open across toggles. `MenuItemMark.Highlight` is the current\nitem of a navigation menu.\n\nThe overlay is a `menu` by default. A `renderOverlay` panel that is not a\nmenu — a popover of free-form content — sets `overlayRole` to\n`DropdownOverlayRole.Dialog` (named by `overlayAriaLabel`,\n`overlayAriaLabelledBy` or, failing both, by the trigger), or to\n`DropdownOverlayRole.None` when its content carries its own role; the\ntrigger's `aria-haspopup` follows the choice. Closing the overlay, Escape\nincluded, returns focus to the trigger unless `returnFocus` is `false`.",
       "props": [
         {
           "name": "children",
@@ -2680,6 +2694,32 @@
           "required": false,
           "description": "Initial focus target inside the overlay on open, forwarded to `FloatingFocusManager`; when omitted, matches pre-existing behavior"
         },
+        {
+          "name": "returnFocus",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether closing the overlay (Escape included) returns focus to the trigger"
+        },
+        {
+          "name": "overlayRole",
+          "type": "DropdownOverlayRole",
+          "required": false,
+          "defaultValue": "DropdownOverlayRole.Menu",
+          "description": "Role of a `renderOverlay` overlay, and the trigger's matching `aria-haspopup`; the `items` list is always a menu"
+        },
+        {
+          "name": "overlayAriaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name of the overlay; ignored with `DropdownOverlayRole.None`"
+        },
+        {
+          "name": "overlayAriaLabelledBy",
+          "type": "string",
+          "required": false,
+          "description": "Id of the element naming the overlay; wins over `overlayAriaLabel`, ignored with `DropdownOverlayRole.None`"
+        },
         {
           "name": "searchable",
           "type": "boolean",
@@ -2734,7 +2774,7 @@
         }
       ],
       "examples": [
-        "// Simple items menu\n<Dropdown items={[{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }]}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Open</button>\n</Dropdown>\n\n// Hover trigger\n<Dropdown trigger={[DropdownTrigger.Hover]} placement=\"bottom-end\" items={items}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Hover me</button>\n</Dropdown>\n\n// Custom overlay content\n<Dropdown closable renderOverlay={() => <div className=\"p-3\">Custom content</div>}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Custom</button>\n</Dropdown>\n\n// Searchable menu, seven rows tall before it scrolls\n<Dropdown searchable maxVisibleItems={7} items={items}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Create</button>\n</Dropdown>"
+        "// Simple items menu\n<Dropdown items={[{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }]}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Open</button>\n</Dropdown>\n\n// Hover trigger\n<Dropdown trigger={[DropdownTrigger.Hover]} placement=\"bottom-end\" items={items}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Hover me</button>\n</Dropdown>\n\n// Custom overlay content\n<Dropdown closable renderOverlay={() => <div className=\"p-3\">Custom content</div>}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Custom</button>\n</Dropdown>\n\n// A panel that is not a menu: role=\"dialog\", trigger aria-haspopup=\"dialog\"\n<Dropdown\n  overlayRole={DropdownOverlayRole.Dialog}\n  overlayAriaLabelledBy=\"limits-title\"\n  renderOverlay={() => (\n    <div className=\"p-3\">\n      <h2 id=\"limits-title\">Usage limits</h2>\n    </div>\n  )}\n>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Limits</button>\n</Dropdown>\n\n// Searchable menu, seven rows tall before it scrolls\n<Dropdown searchable maxVisibleItems={7} items={items}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Create</button>\n</Dropdown>"
       ],
       "sourceFile": "components/New/Dropdown/Dropdown.tsx"
     },
@@ -3498,6 +3538,43 @@
       ],
       "sourceFile": "components/New/ToggleIconButton/ToggleIconButton.tsx"
     },
+    {
+      "name": "ToggleChip",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A chip that switches one option on and off on its own, for a row of\nindependent toggles — tools a model may call, filters that combine.\naliases: ChipToggle|ToggleTag|PressableChip|SelectableChip|MultiSelectChip\nDesign system 2.0\n\nDraws the `TagAppearance.Selectable` filter chip of the 2.0 design — no fill\nuntil it is on, one accent hover tint shared by both states, an accent-alpha\nfill and a semibold label once on — so a row of these sits beside a\n`FilterChips` row without a seam. Turning it on therefore widens it by the\ndifference between the regular and semibold label; give it a width if that\nshift matters.\n\nReach for it when each chip is its own yes/no. `FilterChips` picks one value\nout of several and `Tag` is a label that may be clicked or removed; neither\nkeeps several independent states, and `Tag` renders a `<span>` with a string\nlabel. This is a native `<button aria-pressed>`: Enter and Space work, the\nstate is announced as \"pressed\", and `disabled` takes it out of the tab order\nand greys it out.\n\nKeep one accessible name across both states — the state rides on\n`aria-pressed`, and a control that renames itself on click reads as a\ndifferent control. Visible state text such as \"ON\" / \"OFF\" belongs inside\n`label`, wrapped in `aria-hidden` so it is not read on top of the pressed\nstate. There is no remove control: a chip that toggles and also closes gives\na screen reader two actions with no way to tell which one it landed on, so a\nremovable value is a closable `Tag` instead.\n\nGroup a row of these in a named `role=\"group\"` so they are announced\ntogether. Labels are the caller's to translate — the component ships no\nEnglish defaults.",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Content of the chip after the icon. Any node, so trailing state text can follow the name; it truncates on one line"
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered before the label; hidden from assistive tech"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the chip is on; rendered as `aria-pressed`"
+        },
+        {
+          "name": "onToggle",
+          "type": "(isSelected: boolean) => void",
+          "required": false,
+          "description": "Called with the next value when the chip is activated by click, Enter or Space"
+        }
+      ],
+      "examples": [
+        "<div role=\"group\" aria-label={t('Tools')} className=\"flex flex-wrap gap-1\">\n  {tools.map((tool) => (\n    <ToggleChip\n      key={tool.id}\n      icon={tool.icon}\n      label={\n        <>\n          {tool.label}\n          <span aria-hidden=\"true\">: {tool.isOn ? t('ON') : t('OFF')}</span>\n        </>\n      }\n      isSelected={tool.isOn}\n      onToggle={(isOn) => setTool(tool.id, isOn)}\n    />\n  ))}\n</div>"
+      ],
+      "sourceFile": "components/New/ToggleChip/ToggleChip.tsx"
+    },
     {
       "name": "SegmentedControl",
       "category": "Components_2_0",
@@ -7476,6 +7553,24 @@
     }
   ],
   "types": [
+    {
+      "name": "ProgressBarRole",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Progressbar",
+          "value": "'progressbar'",
+          "comment": "`role=\"progressbar\"`: how far a task has got toward completion — an upload, an import."
+        },
+        {
+          "name": "Meter",
+          "value": "'meter'",
+          "comment": "`role=\"meter\"`: a scalar inside a known range that is not a task's\nprogress — capacity used, a quota, a score. It never \"completes\"."
+        }
+      ],
+      "sourceFile": "types/progress-bar.ts",
+      "description": "The ARIA role a `ProgressBar` renders, which decides what its value means to\na screen reader."
+    },
     {
       "name": "DialTooltipContainerOptions",
       "kind": "interface",
@@ -7682,6 +7777,29 @@
       ],
       "sourceFile": "types/dropdown.ts"
     },
+    {
+      "name": "DropdownOverlayRole",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Menu",
+          "value": "'menu'",
+          "comment": "`role=\"menu\"`, trigger `aria-haspopup=\"menu\"`; options are arrow-key navigated."
+        },
+        {
+          "name": "Dialog",
+          "value": "'dialog'",
+          "comment": "`role=\"dialog\"`, trigger `aria-haspopup=\"dialog\"`; for a panel of free-form content."
+        },
+        {
+          "name": "None",
+          "value": "'none'",
+          "comment": "No role on the overlay and no `aria-haspopup` on the trigger, which keeps\n`aria-expanded`/`aria-controls` as a disclosure; for an overlay whose\ncontent supplies its own semantics (a `region`, its own `dialog`)."
+        }
+      ],
+      "sourceFile": "types/dropdown.ts",
+      "description": "Role of the 2.0 `Dropdown`'s floating overlay, and with it the\n`aria-haspopup` value its trigger announces."
+    },
     {
       "name": "MenuItemMark",
       "kind": "enum",
@@ -8695,6 +8813,22 @@
       ],
       "sourceFile": "types/notification.ts"
     },
+    {
+      "name": "NotificationSurface",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Variant",
+          "value": "'variant'"
+        },
+        {
+          "name": "Neutral",
+          "value": "'neutral'"
+        }
+      ],
+      "sourceFile": "types/notification.ts",
+      "description": "Which surface a `Notification` draws on.\n\n- `Variant` — the variant's own coloured surface (`bg-info`, `bg-warning` …).\n- `Neutral` — the neutral sunken layer (`bg-layer-sunken`) with primary text;\n  the variant still picks the icon, the icon colour and the live-region role."
+    },
     {
       "name": "CalendarMode",
       "kind": "enum",
@@ -9699,7 +9833,7 @@
     {
       "name": "DIAL_KIT_CLASS",
       "sourceFile": "constants/public-class-names.ts",
-      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /**\n   * The always-mounted wrapper of a `LiveRegion` — also the wrapper `CaptionText`\n   * and `ErrorText` render when given `announce`.\n   */\n  liveRegion: 'dial-kit-live-region',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n  /** The root of a `LabelledText`, wrapping its caption and value. */\n  labelledText: 'dial-kit-labelled-text',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `ol` root of a `Steps`, holding one button per step. */\n  steps: 'dial-kit-steps',\n  /** The root of an `AnalyticsCard`: the box holding its title, value and description. */\n  analyticsCard: 'dial-kit-analytics-card',\n  /** The root of an `AnalyticsBar`: the title row and track, stacked or inline. */\n  analyticsBar: 'dial-kit-analytics-bar',\n  /** The root of an `AnalyticsBarGroup`: its accordion, header and bars. */\n  analyticsBarGroup: 'dial-kit-analytics-bar-group',\n  /** The root of an `AnalyticsHistogram`: its title, axis and columns. */\n  analyticsHistogram: 'dial-kit-analytics-histogram',\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /** The `role=\"separator\"` element of a `ResizeHandle`. */\n  resizeHandle: 'dial-kit-resize-handle',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\n  /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */\n  selectedEntityCard: 'dial-kit-selected-entity-card',\n  /** The `section` root of a `FormSection`: its heading row, description and content. */\n  formSection: 'dial-kit-form-section',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
+      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /**\n   * The always-mounted wrapper of a `LiveRegion` — also the wrapper `CaptionText`\n   * and `ErrorText` render when given `announce`.\n   */\n  liveRegion: 'dial-kit-live-region',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n  /** The root of a `LabelledText`, wrapping its caption and value. */\n  labelledText: 'dial-kit-labelled-text',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `ol` root of a `Steps`, holding one button per step. */\n  steps: 'dial-kit-steps',\n  /** The root of an `AnalyticsCard`: the box holding its title, value and description. */\n  analyticsCard: 'dial-kit-analytics-card',\n  /** The root of an `AnalyticsBar`: the title row and track, stacked or inline. */\n  analyticsBar: 'dial-kit-analytics-bar',\n  /** The root of an `AnalyticsBarGroup`: its accordion, header and bars. */\n  analyticsBarGroup: 'dial-kit-analytics-bar-group',\n  /** The root of an `AnalyticsHistogram`: its title, axis and columns. */\n  analyticsHistogram: 'dial-kit-analytics-histogram',\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /** The `role=\"separator\"` element of a `ResizeHandle`. */\n  resizeHandle: 'dial-kit-resize-handle',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\n  /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */\n  selectedEntityCard: 'dial-kit-selected-entity-card',\n  /** The `section` root of a `FormSection`: its heading row, description and content. */\n  formSection: 'dial-kit-form-section',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** The `<button aria-pressed>` of a `ToggleChip`. */\n  toggleChip: 'dial-kit-toggle-chip',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
     }
   ]
 }

package/dist/constants/public-class-names.js

@@ -228,6 +228,8 @@ const i = {
    * already carries.
    */
   toggleIconButton: "dial-kit-toggle-icon-button",
+  /** The `<button aria-pressed>` of a `ToggleChip`. */
+  toggleChip: "dial-kit-toggle-chip",
   /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */
   closeButton: "dial-kit-close-button",
   /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */