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

package/dist/CHANGELOG.md

@@ -87,6 +87,8 @@ Versions match the git tags on the `development` branch.
 
 - **`Calendar` (2.0) — `time` mode opens an hour/minute picker, `showTimePicker`** — the `time` field was a bare masked `HH:mm` input, which is easy to mistype and gives no sense of what is valid. A clock button at the field's trailing edge now opens a popover with an hour and a minute column: picking an hour keeps the current minutes (or `00`), picking minutes closes the popover, and ArrowUp / ArrowDown / Home / End move between options. Typing `HH:mm` still works and `onChange` / `onBlur` fire as before, so consumers need no changes, but the field now renders inside a wrapper and shows the button; `showTimePicker={false}` restores the bare field. The `datetime` popover's time field is unchanged. Requested from `ai-dial-chat`.
 
+- **`Breadcrumbs` (2.0) — `BreadcrumbsSize.Tiny`, a 16px trail for a dense header** — the new size draws the trail at `dial-tiny-text` (12px / 16px) with a `dial-tiny-semi-text` current page, the design's Tiny Text. It also lifts the two limits the other sizes keep. The middle segments are not capped at 30% of the trail nor the current page at 51%: the middle gives way first, down to a letter and its chevron, and the current page truncates only once nothing else can, so a long current label is no longer cut while the row has room. The `nav` does not clip, since the segments truncate on their own, so a segment's focus ring stays whole without a `-m-1 p-1` wrapper; the ring is the design's 1px outline at a 1px offset around a 4px radius. `BreadcrumbsSize.Small` stays the default and, like `BreadcrumbsSize.Heading`, is unchanged.
+
 ### Changed
 
 - **`StarterButton` (2.0) — transparent at rest** — the starter pill no longer fills with `bg-control-neutral` (`#fcfcfc`) at rest: it is transparent with the 1px `border-default` stroke (`--stroke-default`, `#b2c2dd`), and fills only on hover (`bg-control-neutral-hover-muted`, `#e0e6f0`) and press (`bg-control-neutral-active`, `#d1dbea`), as the design specifies. On a surface other than the page background it now shows that surface through. Label, icons, focus ring and disabled state are unchanged.

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-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.67",
-  "generatedAt": "2026-11-02T20:30:14.289Z",
+  "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'",