@epam/ai-dial-ui-kit 0.16.0-dev.66 → 0.16.0-dev.68

package/dist/components/New/Breadcrumbs/Breadcrumbs.js

@@ -1,63 +1,64 @@
-import { jsx as a, jsxs as c, Fragment as x } from "react/jsx-runtime";
-import { IconDots as A } from "@tabler/icons-react";
-import { useMemo as u, useCallback as B } from "react";
-import { Dropdown as D } from "../Dropdown/Dropdown.js";
-import { EllipsisTooltip as w } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { DIAL_KIT_ICON_STROKE as F } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
-import { DIAL_KIT_CLASS as b } from "../../../constants/public-class-names.js";
-import { BreadcrumbsSize as K } from "../../../types/breadcrumbs.js";
+import { jsx as a, jsxs as i, Fragment as A } from "react/jsx-runtime";
+import { IconDots as B } from "@tabler/icons-react";
+import { useMemo as u, useCallback as D } from "react";
+import { Dropdown as w } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as F } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DIAL_KIT_ICON_STROKE as y } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as K } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as g } from "../../../constants/public-class-names.js";
+import { BreadcrumbsSize as O } from "../../../types/breadcrumbs.js";
 import { mergeClasses as o } from "../../../utils/merge-classes.js";
-import { listClassName as O, overflowButtonClassName as j, defaultSeparator as z, separatorClassName as g, sizeClassName as I, itemClassName as S, navClassName as R, DEFAULT_MAX_VISIBLE_ITEMS as V, MIN_VISIBLE_ITEMS as W, linkSegmentClassName as P, staticSegmentClassName as U, currentSegmentClassName as X, currentSizeClassName as Z, segmentClassName as $, segmentWidthClassName as q } from "./constants.js";
-const te = ({
+import { listClassName as R, focusRingClassName as b, overflowButtonClassName as j, defaultSeparator as V, separatorClassName as I, sizeClassName as S, itemClassName as k, navClassName as W, DEFAULT_MAX_VISIBLE_ITEMS as P, MIN_VISIBLE_ITEMS as U, linkSegmentClassName as X, staticSegmentClassName as Z, currentSegmentClassName as $, currentSizeClassName as q, segmentClassName as G, segmentWidthClassName as H } from "./constants.js";
+const oe = ({
   items: s,
-  maxVisibleItems: k = V,
-  size: i = K.Small,
-  separator: f = z,
-  ariaLabel: _ = "Breadcrumb",
-  overflowAriaLabel: M = "Show hidden path segments",
-  className: E,
-  itemClassName: L
+  maxVisibleItems: _ = P,
+  size: n = O.Small,
+  separator: p = V,
+  ariaLabel: M = "Breadcrumb",
+  overflowAriaLabel: E = "Show hidden path segments",
+  className: L,
+  itemClassName: T
 }) => {
-  const m = Math.max(k, W), n = u(
+  const m = Math.max(_, U), t = u(
     () => s.length > m ? s.slice(1, -(m - 2)) : [],
     [s, m]
-  ), T = u(
-    () => n.map((e, l) => ({
+  ), v = u(
+    () => t.map((e, l) => ({
       key: String(l),
       label: e.label,
       icon: e.icon
     })),
-    [n]
-  ), v = B(
+    [t]
+  ), x = D(
     ({ key: e, domEvent: l }) => {
-      const r = n[Number(e)];
+      const r = t[Number(e)];
       r && (r.onClick?.(l), !r.onClick && r.href && !l.defaultPrevented && (window.location.href = r.href));
     },
-    [n]
+    [t]
   );
   if (s.length === 0) return null;
-  const d = s.slice(n.length + 1), C = (e, {
+  const d = s.slice(t.length + 1), C = (e, {
     index: l,
     isFirst: r,
-    isCurrent: t
+    isCurrent: c
   }) => {
-    const N = !t && (!!e.href || !!e.onClick), h = o(
-      $,
-      N ? P : t ? o(X, Z[i]) : U,
-      L,
-      b.breadcrumbsItem
-    ), p = /* @__PURE__ */ c(x, { children: [
+    const N = !c && (!!e.href || !!e.onClick), h = o(
+      G,
+      b[n],
+      N ? X : c ? o($, q[n]) : Z,
+      T,
+      g.breadcrumbsItem
+    ), f = /* @__PURE__ */ i(A, { children: [
       e.icon,
-      /* @__PURE__ */ a(w, { text: e.label })
+      /* @__PURE__ */ a(F, { text: e.label })
     ] });
-    return /* @__PURE__ */ c(
+    return /* @__PURE__ */ i(
       "li",
       {
         className: o(
-          S,
-          I[i],
-          q[t ? "last" : r ? "first" : "middle"]
+          k,
+          S[n],
+          H[n][c ? "last" : r ? "first" : "middle"]
         ),
         children: [
           N ? e.href ? /* @__PURE__ */ a(
@@ -66,7 +67,7 @@ const te = ({
               href: e.href,
               onClick: e.onClick,
               className: h,
-              children: p
+              children: f
             }
           ) : /* @__PURE__ */ a(
             "button",
@@ -74,17 +75,17 @@ const te = ({
               type: "button",
               onClick: e.onClick,
               className: h,
-              children: p
+              children: f
             }
           ) : /* @__PURE__ */ a(
             "span",
             {
               className: h,
-              "aria-current": t ? "page" : void 0,
-              children: p
+              "aria-current": c ? "page" : void 0,
+              children: f
             }
           ),
-          !t && /* @__PURE__ */ a("span", { className: g, "aria-hidden": "true", children: f })
+          !c && /* @__PURE__ */ a("span", { className: I, "aria-hidden": "true", children: p })
         ]
       },
       `segment-${l}`
@@ -93,45 +94,48 @@ const te = ({
   return /* @__PURE__ */ a(
     "nav",
     {
-      "aria-label": _,
+      "aria-label": M,
       className: o(
-        R,
-        E,
-        b.breadcrumbs
+        W[n],
+        L,
+        g.breadcrumbs
       ),
-      children: /* @__PURE__ */ c("ol", { className: O, children: [
+      children: /* @__PURE__ */ i("ol", { className: R, children: [
         C(s[0], {
           index: 0,
           isFirst: !0,
           isCurrent: s.length === 1
         }),
-        n.length > 0 && /* @__PURE__ */ c(
+        t.length > 0 && /* @__PURE__ */ i(
           "li",
           {
             className: o(
-              S,
-              I[i],
+              k,
+              S[n],
               "shrink-0"
             ),
             children: [
               /* @__PURE__ */ a(
-                D,
+                w,
                 {
-                  items: T,
-                  onItemClick: v,
+                  items: v,
+                  onItemClick: x,
                   placement: "bottom-start",
                   matchReferenceWidth: !1,
                   children: /* @__PURE__ */ a(
                     "button",
                     {
                       type: "button",
-                      "aria-label": M,
-                      className: j,
+                      "aria-label": E,
+                      className: o(
+                        j,
+                        b[n]
+                      ),
                       children: /* @__PURE__ */ a(
-                        A,
+                        B,
                         {
-                          size: y.SM,
-                          stroke: F,
+                          size: K.SM,
+                          stroke: y,
                           "aria-hidden": "true"
                         }
                       )
@@ -139,7 +143,7 @@ const te = ({
                   )
                 }
               ),
-              /* @__PURE__ */ a("span", { className: g, "aria-hidden": "true", children: f })
+              /* @__PURE__ */ a("span", { className: I, "aria-hidden": "true", children: p })
             ]
           }
         ),
@@ -155,5 +159,5 @@ const te = ({
   );
 };
 export {
-  te as Breadcrumbs
+  oe as Breadcrumbs
 };

package/dist/components/New/Breadcrumbs/constants.js

@@ -1,41 +1,60 @@
 import { jsx as t } from "react/jsx-runtime";
-import { IconChevronRight as s } from "@tabler/icons-react";
+import { IconChevronRight as i } from "@tabler/icons-react";
 import { DIAL_KIT_ICON_STROKE as n } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as i } from "../../../constants/icon.js";
+import { DIAL_ICON_SIZE as a } from "../../../constants/icon.js";
 import { BreadcrumbsSize as e } from "../../../types/breadcrumbs.js";
-const c = "w-full overflow-hidden", f = "flex min-w-0 flex-nowrap items-center gap-2 whitespace-nowrap", u = "flex min-w-0 items-center gap-2", d = {
+const d = {
+  [e.Small]: "w-full overflow-hidden",
+  [e.Tiny]: "w-full",
+  [e.Heading]: "w-full overflow-hidden"
+}, f = "flex min-w-0 flex-nowrap items-center gap-2 whitespace-nowrap", u = "flex min-w-0 items-center gap-2", x = {
   [e.Small]: "dial-small-text",
+  [e.Tiny]: "dial-tiny-text",
   [e.Heading]: "dial-h2-text"
-}, x = {
+}, h = {
   [e.Small]: "dial-small-semi-text",
+  [e.Tiny]: "dial-tiny-semi-text",
   [e.Heading]: "dial-h2-text"
-}, N = {
+}, s = {
   first: "shrink-0",
   middle: "min-w-0 max-w-[30%] shrink",
   last: "min-w-0 max-w-[51%] shrink"
-}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-xs transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-xs text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
-  s,
+}, S = {
+  [e.Small]: s,
+  [e.Tiny]: {
+    first: "shrink-0",
+    middle: "min-w-12 shrink-[1000]",
+    last: "min-w-0 shrink"
+  },
+  [e.Heading]: s
+}, g = {
+  [e.Small]: "rounded-xs focus-visible:outline-offset-2",
+  [e.Tiny]: "rounded focus-visible:outline-offset-1",
+  [e.Heading]: "rounded-xs focus-visible:outline-offset-2"
+}, w = "flex min-w-0 flex-1 items-center gap-1 transition-colors", N = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-focus", p = "cursor-default text-primary", C = "cursor-default text-secondary", v = "inline-flex flex-none items-center leading-none text-secondary", I = "dial-kit-minimum-target flex shrink-0 items-center text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-focus", y = 3, k = 4, T = /* @__PURE__ */ t(
+  i,
   {
-    size: i.SM,
+    size: a.SM,
     stroke: n,
     "aria-hidden": "true",
     className: "rtl:scale-x-[-1]"
   }
 );
 export {
-  v as DEFAULT_MAX_VISIBLE_ITEMS,
-  w as MIN_VISIBLE_ITEMS,
-  S as currentSegmentClassName,
-  x as currentSizeClassName,
-  _ as defaultSeparator,
+  k as DEFAULT_MAX_VISIBLE_ITEMS,
+  y as MIN_VISIBLE_ITEMS,
+  p as currentSegmentClassName,
+  h as currentSizeClassName,
+  T as defaultSeparator,
+  g as focusRingClassName,
   u as itemClassName,
-  C as linkSegmentClassName,
+  N as linkSegmentClassName,
   f as listClassName,
-  c as navClassName,
-  g as overflowButtonClassName,
-  p as segmentClassName,
-  N as segmentWidthClassName,
-  I as separatorClassName,
-  d as sizeClassName,
-  h as staticSegmentClassName
+  d as navClassName,
+  I as overflowButtonClassName,
+  w as segmentClassName,
+  S as segmentWidthClassName,
+  v as separatorClassName,
+  x as sizeClassName,
+  C as staticSegmentClassName
 };

package/dist/components/New/Grid/components/SelectionCell.js

@@ -1,50 +1,52 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useState as E, useEffect as d } from "react";
-import { GridSelectionMode as S } from "../../../../models/selection-mode.js";
-import { Checkbox as u } from "../../Checkbox/Checkbox.js";
-import { Radio as p } from "../../Radio/Radio.js";
-import { SelectionEventSourceType as C } from "../constants.js";
-const g = ({
-  params: l,
+import { jsx as i } from "react/jsx-runtime";
+import { useState as a, useEffect as p } from "react";
+import { GridSelectionMode as d } from "../../../../models/selection-mode.js";
+import { Checkbox as v } from "../../Checkbox/Checkbox.js";
+import { Radio as L } from "../../Radio/Radio.js";
+import { SelectionEventSourceType as h } from "../constants.js";
+const N = ({
+  params: S,
   mode: r,
-  label: n,
+  label: l,
   radioName: m,
-  rowId: a,
-  disabled: o
+  rowId: E,
+  disabled: b
 }) => {
-  const e = l.node, [c, f] = E(() => !!e.isSelected());
-  d(() => {
-    const t = () => f(!!e.isSelected());
-    return t(), e.addEventListener("rowSelected", t), () => e.removeEventListener("rowSelected", t);
+  const e = S.node, [s, f] = a(() => !!e.isSelected()), [u, C] = a(() => e.selectable);
+  p(() => {
+    const t = () => f(!!e.isSelected()), o = () => C(e.selectable);
+    return t(), o(), e.addEventListener("rowSelected", t), e.addEventListener("selectableChanged", o), () => {
+      e.removeEventListener("rowSelected", t), e.removeEventListener("selectableChanged", o);
+    };
   }, [e]);
-  const i = (t) => {
-    o || e.setSelected(
+  const n = b || !u, c = (t) => {
+    n || e.setSelected(
       t,
       // Single mode clears the rest of the selection, as a radio group does.
-      r === S.SINGLE,
-      C.CHECKBOX_SELECTED
+      r === d.SINGLE,
+      h.CHECKBOX_SELECTED
     );
   };
-  return r === S.SINGLE ? /* @__PURE__ */ s(
-    p,
+  return r === d.SINGLE ? /* @__PURE__ */ i(
+    L,
     {
       name: m,
-      value: a,
-      isSelected: c,
-      disabled: o,
-      "aria-label": n,
-      onChange: () => i(!0)
+      value: E,
+      isSelected: s,
+      disabled: n,
+      "aria-label": l,
+      onChange: () => c(!0)
     }
-  ) : /* @__PURE__ */ s(
-    u,
+  ) : /* @__PURE__ */ i(
+    v,
     {
-      isSelected: c,
-      disabled: o,
-      "aria-label": n,
-      onChange: i
+      isSelected: s,
+      disabled: n,
+      "aria-label": l,
+      onChange: c
     }
   );
 };
 export {
-  g as SelectionCell
+  N as SelectionCell
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.66",
-  "generatedAt": "2026-11-02T14:50:07.690Z",
+  "version": "0.16.0-dev.68",
+  "generatedAt": "2026-11-03T14:00:18.668Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -640,7 +640,7 @@
       "name": "Breadcrumbs",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A navigation trail: where the user is, and every level they can step back to.\naliases: Breadcrumb|NavigationPath|BreadcrumbTrail\nDesign system 2.0\n\nThe last item is the current page — drawn semibold and primary, and never a\ncontrol, since a link to the page you are already on does nothing. Every\nearlier item with an `href` or an `onClick` is a link; one with neither is\ndrawn as plain text, which is how a read-only location path is built.\n\nThe trail never wraps. Segments truncate instead, each revealing its full\nlabel in a tooltip only once it is actually clipped, and a trail longer than\n`maxVisibleItems` collapses its middle behind an ellipsis menu — the root and\nthe current page, the two segments that carry the most meaning, always stay\non screen.\n\na11y: an `<ol>` inside a named `<nav>`, with `aria-current=\"page\"` on the last\nsegment. Separators are decorative and hidden from assistive tech, so the\ntrail is announced as a list of links rather than a string of chevrons.\n\nThe trail is drawn at `dial-small-text` by default; `size` switches it to\n`dial-h2-text` for a trail that doubles as the page heading, where the\ntoken's own semibold weight applies to every segment.\n\nLabels are the caller's to translate; the two accessible names default to\nEnglish and take an override.",
+      "description": "A navigation trail: where the user is, and every level they can step back to.\naliases: Breadcrumb|NavigationPath|BreadcrumbTrail\nDesign system 2.0\n\nThe last item is the current page — drawn semibold and primary, and never a\ncontrol, since a link to the page you are already on does nothing. Every\nearlier item with an `href` or an `onClick` is a link; one with neither is\ndrawn as plain text, which is how a read-only location path is built.\n\nThe trail never wraps. Segments truncate instead, each revealing its full\nlabel in a tooltip only once it is actually clipped, and a trail longer than\n`maxVisibleItems` collapses its middle behind an ellipsis menu — the root and\nthe current page, the two segments that carry the most meaning, always stay\non screen.\n\na11y: an `<ol>` inside a named `<nav>`, with `aria-current=\"page\"` on the last\nsegment. Separators are decorative and hidden from assistive tech, so the\ntrail is announced as a list of links rather than a string of chevrons.\n\nThe trail is drawn at `dial-small-text` by default; `size` switches it to\n`dial-tiny-text` for a dense header — a trail that never clips, so a focus\nring stays whole, and caps no segment, so its current page takes the free\nwidth — or to `dial-h2-text` for a trail that doubles as the page heading,\nwhere the token's own semibold weight applies to every segment.\n\nLabels are the caller's to translate; the two accessible names default to\nEnglish and take an override.",
       "props": [
         {
           "name": "items",
@@ -660,7 +660,7 @@
           "type": "BreadcrumbsSize",
           "required": false,
           "defaultValue": "BreadcrumbsSize.Small",
-          "description": "The trail's type scale: `dial-small-text` or `dial-h2-text`"
+          "description": "The trail's type scale: `dial-small-text`, `dial-tiny-text` or `dial-h2-text`"
         },
         {
           "name": "separator",
@@ -9062,6 +9062,11 @@
           "value": "'small'",
           "comment": "14px `dial-small-text`, with a `dial-small-semi-text` current page."
         },
+        {
+          "name": "Tiny",
+          "value": "'tiny'",
+          "comment": "12px `dial-tiny-text`, with a `dial-tiny-semi-text` current page: a 16px\ntrail for a dense header. It never clips, so a focus ring stays whole, and\nnothing is capped: the middle truncates first, the current page last."
+        },
         {
           "name": "Heading",
           "value": "'heading'",