@epam/ai-dial-ui-kit 0.16.0-dev.16 → 0.16.0-dev.19

package/dist/components/New/TransferQueue/TransferQueueHeader.js

@@ -1,71 +1,63 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { IconChevronUp as f, IconChevronDown as S, IconX as I } from "@tabler/icons-react";
-import { GhostIconButton as t } from "../IconButton/IconButtonWrappers.js";
-import { DIAL_KIT_ICON_STROKE as o } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
-import { ElementSize as m } from "../../../types/size.js";
-import { STATUS_SLOT_CLASS as c } from "./constants.js";
-const k = ({
-  title: l,
-  failedCount: n,
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { IconChevronUp as S, IconChevronDown as f, IconX as h } from "@tabler/icons-react";
+import { GhostIconButton as i } from "../IconButton/IconButtonWrappers.js";
+import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as n } from "../../../constants/icon.js";
+import { ElementSize as s } from "../../../types/size.js";
+import { STATUS_SLOT_CLASS as m } from "./constants.js";
+const y = ({
+  title: c,
   isCollapsed: r,
-  itemsId: p,
+  itemsId: l,
   labels: a,
   onToggleCollapse: d,
-  onClose: x
+  onClose: p
 }) => {
-  const h = r ? f : S;
-  return /* @__PURE__ */ i("div", { className: "mx-4 flex items-center justify-between border-b border-tertiary py-3", children: [
-    /* @__PURE__ */ i("div", { className: "flex min-w-0 items-center gap-2", children: [
-      /* @__PURE__ */ e("span", { className: "dial-small-paragraph-semi-text truncate text-primary", children: l }),
-      n > 0 && /*
-      * On the filled --bg-control-error swatch, so it takes the on-control
-      * token; --text-tertiary would contrast at under 2:1 over that fill.
-      */
-      /* @__PURE__ */ e("span", { className: "dial-small-paragraph-semi-text inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-control-error px-1 text-control-permanent", children: n })
-    ] }),
-    /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center gap-1", children: [
+  const x = r ? S : f;
+  return /* @__PURE__ */ o("div", { className: "mx-4 flex items-center justify-between border-b border-tertiary py-3", children: [
+    /* @__PURE__ */ e("span", { className: "dial-small-paragraph-semi-text min-w-0 truncate text-primary", children: c }),
+    /* @__PURE__ */ o("div", { className: "flex shrink-0 items-center gap-1", children: [
       /* @__PURE__ */ e(
-        t,
+        i,
         {
           "aria-label": r ? a.expandAriaLabel : a.collapseAriaLabel,
           "aria-expanded": !r,
-          "aria-controls": p,
-          size: m.Small,
+          "aria-controls": l,
+          size: s.Small,
           icon: /* @__PURE__ */ e(
-            h,
+            x,
             {
-              size: s.SM,
-              stroke: o,
+              size: n.SM,
+              stroke: t,
               className: "text-secondary",
               "aria-hidden": !0
             }
           ),
           onClick: d,
-          className: c
+          className: m
         }
       ),
       /* @__PURE__ */ e(
-        t,
+        i,
         {
           "aria-label": a.closeAriaLabel,
-          size: m.Small,
+          size: s.Small,
           icon: /* @__PURE__ */ e(
-            I,
+            h,
             {
-              size: s.SM,
-              stroke: o,
+              size: n.SM,
+              stroke: t,
               className: "text-secondary",
               "aria-hidden": !0
             }
           ),
-          onClick: x,
-          className: c
+          onClick: p,
+          className: m
         }
       )
     ] })
   ] });
 };
 export {
-  k as TransferQueueHeader
+  y as TransferQueueHeader
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.16",
-  "generatedAt": "2026-10-19T18:22:01.303Z",
+  "version": "0.16.0-dev.19",
+  "generatedAt": "2026-10-20T08:49:00.539Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -17,7 +17,7 @@
     "setupNotes": "## Next.js Integration\n1. Install the package. React is the only peer you have to supply — everything\n   the kit renders with, it installs itself.\n\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom\n```\n\nAdd the editor packages only if you use the `@epam/ai-dial-ui-kit/editors`\nsubpath. They are optional peers, so `npm install` stays quiet without them, and\nthe kit only reaches for them when a `Lazy*` editor actually mounts:\n\n``` bash\nnpm install monaco-editor @monaco-editor/react @uiw/react-md-editor\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
   },
   "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                             | Design name                 | Weight   | Size / Line-height                  |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text`             | Display 1                   | semibold | 32px / 48px                         |\n| `.dial-display2-text`             | Display 2                   | semibold | 28px / 40px                         |\n| `.dial-display3-text`             | Display 3                   | semibold | 22px / 32px                         |\n| `.dial-h1-text`                   | Heading 1                   | semibold | 20px / 28px                         |\n| `.dial-h2-text`                   | Heading 2                   | semibold | 18px / 26px                         |\n| `.dial-h3-text`                   | Heading 3                   | semibold | 16px / 24px                         |\n| `.dial-body-text`                 | Body Text                   | normal   | 16px / 24px                         |\n| `.dial-body-semi-text`            | Body Text (Semi Bold)       | semibold | 16px / 24px                         |\n| `.dial-body-paragraph-text`       | Body Paragraph              | normal   | 16px / 26px                         |\n| `.dial-body-paragraph-semi-text`  | Body Paragraph (Semi Bold)  | semibold | 16px / 26px                         |\n| `.dial-small-text`                | Small Text                  | normal   | 14px / 20px                         |\n| `.dial-small-semi-text`           | Small Text (Semi Bold)      | semibold | 14px / 20px                         |\n| `.dial-small-paragraph-text`      | Small Paragraph             | normal   | 14px / 24px                         |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px                         |\n| `.dial-tiny-text`                 | Tiny Text                   | normal   | 12px / 16px                         |\n| `.dial-tiny-lead-text`            | Tiny Text Lead              | normal   | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-tiny-semi-text`            | Tiny Text (Semi Bold)       | semibold | 12px / 16px                         |\n| `.dial-tiny-lead-semi-text`       | Tiny Text Lead (Semi Bold)  | semibold | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-caption-text`              | Caption                     | normal   | 10px / 12px                         |\n| `.dial-caption-lead-semi-text`    | Caption Lead (Semi Bold)    | semibold | 10px / 12px (+0.06em, uppercase)    |\n| `.dial-code-text`                 | Code                        | normal   | 14px / 20px (Fira Code / monospace) |\n| `.dial-italic-text`               | Italic                      | normal   | 18px / 22px (serif, italic)         |\n| `.dial-small-italic-text`         | Small Italic                | normal   | 14px / 20px (serif, italic)         |\n| `.dial-tiny-italic-text`          | Tiny Italic                 | normal   | 12px / 16px (serif, italic)         |\n| `.dial-caption-italic-text`       | Caption Italic              | normal   | 10px / 12px (serif, italic)         |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\n`.dial-code-text` resolves its family through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before falling back to the system monospace stack. The kit ships no font file; the host provides the face.\n\nThe `*-italic-text` classes use a serif italic face and are intended for mathematical and formula symbols. Their line-heights follow the corresponding typography size; the default 18px variant uses a fixed 22px line-height to keep standalone symbols vertically aligned without changing their container's height.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
-  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see 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| `sm` | `var(--shadow-sm)` | `#2764d914` |\n| `md` | `var(--shadow-md)` | `#2764d90f` |\n| `lg` | `var(--shadow-lg)` | `#2764d914` |",
+  "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| `lg` | `var(--shadow-lg)` | `#2764d914` |",
   "components": [
     {
       "name": "Spinner",
@@ -532,7 +532,7 @@
       "name": "FolderPath",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A read-only, non-clickable folder/location path styled like `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. A path\nof more than three segments collapses its middle into a non-interactive `…`\nthat shows the full path (`Shared > Team > Sub > Reports`) in a tooltip on\nhover; the hidden segments stay in the accessible text.",
+      "description": "A read-only, non-clickable folder/location path styled like `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. A path\nof more than three segments collapses its middle into a non-interactive `…`\nthat shows the full path (`Shared > Team > Sub > Reports`) in a tooltip on\nhover; the hidden segments stay in the accessible text.\n\nWhen the path is too wide, the leaf keeps its width longest: the folder\nbefore it truncates first, down to about one character, and if the leaf\nstill does not fit, that folder joins the `…` as well. Only then does the\nleaf truncate.",
       "props": [
         {
           "name": "segments",
@@ -5045,7 +5045,7 @@
       "name": "TransferQueue",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A floating panel listing the files of an upload, download, import or export\nwith a live status per row.\naliases: UploadQueue|ImportQueue|ExportQueue|UploadProgress|ProgressToast\nDesign system 2.0\n\nEach row shows the file's `FileIcon` and name, and a trailing status: a\nspinner (with a cancel control on hover or focus) while in progress, a check\non success, a warning or error icon whose reason is both its tooltip and its\naccessible name, or \"Canceled\". The header carries the host's title, a count\nof failed items, and collapse and close controls. Collapsed while work runs,\nthe rows are replaced by one aggregate `ProgressBar`.\n\nClosing while an item is in progress or has failed asks for confirmation\nfirst. Once every item has succeeded the queue closes itself after\n`autoCloseDelay`; a warned or canceled row keeps it open so it can be read.\n\nThe root is a polite `role=\"status\"` live region. Positioning is left to\nthe host — wrap it in a fixed container at the screen corner.",
+      "description": "A floating panel listing the files of an upload, download, import or export\nwith a live status per row.\naliases: UploadQueue|ImportQueue|ExportQueue|UploadProgress|ProgressToast\nDesign system 2.0\n\nEach row shows the file's `FileIcon` and name, and a trailing status: a\nspinner (with a cancel control on hover or focus) while in progress, a check\non success, a warning or error icon whose reason is both its tooltip and its\naccessible name, or \"Canceled\". The header carries the host's title and the\ncollapse and close controls. Collapsed while work runs,\nthe rows are replaced by one aggregate `ProgressBar`.\n\nClosing while an item is in progress asks for confirmation first; a queue\nwhose items have all settled, failed ones included, closes straight away. Once every item has succeeded the queue closes itself after\n`autoCloseDelay`; a warned or canceled row keeps it open so it can be read.\n\nThe root is a polite `role=\"status\"` live region. Positioning is left to\nthe host — wrap it in a fixed container at the screen corner.",
       "props": [
         {
           "name": "title",