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

package/dist/JsonEditor-eAV7SaKu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("./editor-BH6_A1k2.cjs"),d=require("@monaco-editor/react");function f(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const m=f(d),b=({value:e,onChange:o,onValidateJSON:t,options:a,currentTheme:n,themesConfig:i=u.EDITOR_THEMES_CONFIG})=>{function s(r){r?.editor?.defineTheme(n,i[n]),r.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}const{Editor:l}=m;return c.jsx(l,{beforeMount:s,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:t,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...a??{}}})};exports.DialJsonEditor=b;

package/dist/{MarkdownEditor-BKtFs714.cjs → MarkdownEditor-Cp-KX6-T.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-_W6FYhKg.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const h=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:g,strikethrough:x,table:j,unorderedListCommand:C}=h;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(x,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(g,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(j,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=h;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m,showDragbar:I=!0})=>{const g=b.useMemo(()=>M(),[]),x=b.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:j=>i?.(j||""),height:r,preview:u,visibleDragbar:I,commands:g,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-DMVYJhUR.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const h=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:g,strikethrough:x,table:j,unorderedListCommand:C}=h;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(x,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(g,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(j,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=h;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m,showDragbar:I=!0})=>{const g=b.useMemo(()=>M(),[]),x=b.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:j=>i?.(j||""),height:r,preview:u,visibleDragbar:I,commands:g,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/{MarkdownEditor-Bapd1ycU.cjs → MarkdownEditor-Dav_pp0T.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@uiw/react-md-editor"),u=require("./lazy-_W6FYhKg.cjs"),x=require("./merge-classes-BEJXjzkx.cjs"),g=({value:r,onChange:s,height:o=300,preview:i="edit",theme:a=u.EditorThemes.dark,className:n,placeholder:t,showDragbar:d=!0})=>{const l=t!==void 0&&!r;return e.jsxs("div",{"data-color-mode":a,className:x.mergeClasses("relative",n),children:[e.jsx(m,{value:r,onChange:c=>s?.(c||""),height:o,preview:i,visibleDragbar:d}),l&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:t})]})};exports.DialMarkdownEditor=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@uiw/react-md-editor"),u=require("./lazy-DMVYJhUR.cjs"),x=require("./merge-classes-BEJXjzkx.cjs"),g=({value:r,onChange:s,height:o=300,preview:i="edit",theme:a=u.EditorThemes.dark,className:n,placeholder:t,showDragbar:d=!0})=>{const l=t!==void 0&&!r;return e.jsxs("div",{"data-color-mode":a,className:x.mergeClasses("relative",n),children:[e.jsx(m,{value:r,onChange:c=>s?.(c||""),height:o,preview:i,visibleDragbar:d}),l&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:t})]})};exports.DialMarkdownEditor=g;

package/dist/MarkdownEditorContainer-D8YTX8EM.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react");require("./editor-BH6_A1k2.cjs");const N=require("./lazy-DMVYJhUR.cjs");require("@monaco-editor/react");const m=require("./Switch-DAaAOaIu.cjs"),b=require("./MarkdownEditor-Dav_pp0T.cjs"),g=({value:o,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=N.EditorThemes.dark,onValidateJSON:x,preview:j="edit",showDragbar:w=!0})=>{const C=n.useId(),[t,p]=n.useState(!1),[f,S]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-eAV7SaKu.cjs")).then(s=>{S(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),E=n.useCallback(s=>{x?.(s)},[x]),r=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||r)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,r&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:C,onChange:s=>p(s)})})]})]}),r&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:o,onChange:h,onValidateJSON:E,currentTheme:u})}):e.jsx(b.DialMarkdownEditor,{value:o,onChange:h,height:c,preview:j,showDragbar:w,theme:u})]})})})};exports.DialMarkdownEditorContainer=g;

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -1,27 +1,29 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useId as J, useState as u, useEffect as S, useCallback as x } from "react";
-import { DialSwitch as b } from "../Switch/Switch.js";
-import { EditorThemes as v } from "../../types/editor.js";
+import "../../constants/editor.js";
+import { EditorThemes as b } from "../../types/editor.js";
+import "@monaco-editor/react";
+import { DialSwitch as v } from "../Switch/Switch.js";
 import { DialMarkdownEditor as y } from "./MarkdownEditor.js";
 import { DialLabel as j } from "../Label/Label.js";
-const B = ({
+const q = ({
   value: s,
   onChangeValue: l,
-  label: t,
+  label: i,
   headerContent: d,
   switcherLabel: a,
   height: c = 300,
-  theme: m = v.dark,
+  theme: m = b.dark,
   onValidateJSON: f,
   preview: C = "edit",
   showDragbar: N = !0
 }) => {
-  const w = J(), [n, D] = u(!1), [p, E] = u(null);
+  const w = J(), [t, D] = u(!1), [p, E] = u(null);
   S(() => {
-    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+    t && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
       E(() => o.DialJsonEditor);
     });
-  }, [n]);
+  }, [t]);
   const h = x(
     (o) => {
       l?.(o);
@@ -32,16 +34,16 @@ const B = ({
       f?.(o);
     },
     [f]
-  ), i = !!a;
+  ), n = !!a;
   return /* @__PURE__ */ e("div", { className: "size-full flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ r("div", { children: [
-    (t || d || i) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
-      t && /* @__PURE__ */ e(j, { label: t }),
+    (i || d || n) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      i && /* @__PURE__ */ e(j, { label: i }),
       /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-1 justify-end", children: [
         d,
-        i && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
-          b,
+        n && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          v,
           {
-            isOn: n,
+            isOn: t,
             label: a,
             switchId: w,
             onChange: (o) => D(o)
@@ -49,7 +51,7 @@ const B = ({
         ) })
       ] })
     ] }),
-    i && n ? /* @__PURE__ */ e(
+    n && t ? /* @__PURE__ */ e(
       "div",
       {
         className: "border border-primary rounded",
@@ -78,5 +80,5 @@ const B = ({
   ] }) }) });
 };
 export {
-  B as DialMarkdownEditorContainer
+  q as DialMarkdownEditorContainer
 };

package/dist/components/New/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
 import { useId as u, useCallback as x } from "react";
 import { ElementSize as v } from "../../../types/size.js";
 import { mergeClasses as f } from "../../../utils/merge-classes.js";
@@ -11,31 +11,33 @@ const D = ({
   labelProps: e,
   isSelected: t = !1,
   isIndeterminate: r = !1,
-  invalid: i = !1,
+  invalid: m = !1,
   disabled: s,
   onChange: l,
-  caption: m,
+  caption: i,
   className: y,
   boxClassName: b,
   ...n
 }) => {
-  const k = u(), a = h ?? k, d = m ? `${a}-caption` : void 0, g = x(
-    (o) => {
-      l?.(o.target.checked);
+  const g = u(), o = h ?? g, p = i ? `${o}-caption` : void 0, k = x(
+    (a) => {
+      l?.(a.target.checked);
     },
     [l]
   ), N = x(
-    (o) => {
-      o && (o.indeterminate = r);
+    (a) => {
+      a && (a.indeterminate = r);
     },
     [r]
   );
-  return /* @__PURE__ */ p("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ p(
+  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ d(
       "div",
       {
         className: f(
-          "flex items-center gap-2",
+          // Named group: the control shows its hover state while either of its
+          // two <label>s (the control or the text) is hovered.
+          "group/choice flex items-center gap-2",
           y,
           L.checkbox
         ),
@@ -46,26 +48,26 @@ const D = ({
               ...n,
               ref: N,
               type: "checkbox",
-              id: a,
+              id: o,
               checked: t,
               disabled: s,
-              onChange: g,
+              onChange: k,
               "aria-checked": r ? "mixed" : t,
-              "aria-invalid": i || void 0,
+              "aria-invalid": m || void 0,
               "aria-label": C(
                 typeof e?.label != "string" ? n["aria-label"] : void 0
               ),
-              "aria-describedby": d,
+              "aria-describedby": p,
               className: "peer sr-only"
             }
           ),
           /* @__PURE__ */ c(
             A,
             {
-              htmlFor: a,
+              htmlFor: o,
               isSelected: t,
               isIndeterminate: r,
-              invalid: i,
+              invalid: m,
               disabled: s,
               className: b
             }
@@ -75,7 +77,7 @@ const D = ({
             {
               size: v.Standard,
               ...e,
-              htmlFor: a,
+              htmlFor: o,
               className: f(
                 // `Label` defaults to the secondary colour; a checkbox's own label
                 // is primary while the control is usable.
@@ -88,12 +90,12 @@ const D = ({
         ]
       }
     ),
-    m && /* @__PURE__ */ c(
+    i && /* @__PURE__ */ c(
       "span",
       {
-        id: d,
+        id: p,
         className: "dial-tiny-text text-secondary ml-[28px]",
-        children: m
+        children: i
       }
     )
   ] });

package/dist/components/New/Checkbox/CheckboxBox.js

@@ -1,17 +1,17 @@
 import { jsx as t } from "react/jsx-runtime";
-import { IconMinus as u, IconCheck as d } from "@tabler/icons-react";
-import { mergeClasses as b } from "../../../utils/merge-classes.js";
-import { CHECKBOX_ICON_PROPS as p } from "./constants.js";
-import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
-const v = ({
-  isSelected: n = !1,
-  isIndeterminate: c = !1,
+import { IconMinus as m, IconCheck as u } from "@tabler/icons-react";
+import { mergeClasses as h } from "../../../utils/merge-classes.js";
+import { CHECKBOX_ICON_PROPS as i } from "./constants.js";
+import { DIAL_KIT_CLASS as g } from "../../../constants/public-class-names.js";
+const k = ({
+  isSelected: c = !1,
+  isIndeterminate: n = !1,
   invalid: r = !1,
   disabled: a = !1,
-  htmlFor: s,
-  className: m
+  htmlFor: l,
+  className: p
 }) => {
-  const o = c || n, e = !!s, l = b(
+  const o = n || c, e = !!l, s = h(
     "grid size-[20px] shrink-0 place-items-center rounded border transition-colors duration-200",
     // 20px is below the 24x24 minimum target, so grow the pointer target
     // without touching the rendered size. The 44px enhanced target would
@@ -19,18 +19,25 @@ const v = ({
     // box is not a target at all — the row around it is.
     e && "dial-kit-minimum-target",
     e && "peer-focus-visible:outline peer-focus-visible:outline-focus",
-    a ? "border-transparent bg-control-disable-primary text-control-disable-primary" : b(
+    a ? "border-transparent bg-control-disable-primary text-control-disable-primary" : h(
       r && o && "border-transparent bg-control-error text-control-permanent",
       r && !o && "border-error bg-control-neutral",
-      !r && o && "border-transparent bg-control-accent text-control-permanent hover:bg-control-accent-hover",
-      !r && !o && "border-default bg-control-neutral hover:border-accent hover:bg-control-accent-alpha-hover"
+      !r && o && "border-transparent bg-control-accent text-control-permanent",
+      !r && !o && "border-default bg-control-neutral",
+      /*
+       * A control box reacts while either label of its `Checkbox` is hovered
+       * (the `group/choice` root); a decorative box only to its own hover,
+       * since the row around it owns the interaction.
+       */
+      !r && o && (e ? "group-has-[label:hover]/choice:bg-control-accent-hover" : "hover:bg-control-accent-hover"),
+      !r && !o && (e ? "group-has-[label:hover]/choice:border-accent group-has-[label:hover]/choice:bg-control-accent-alpha-hover" : "hover:border-accent hover:bg-control-accent-alpha-hover")
     ),
     a ? "cursor-not-allowed" : e && "cursor-pointer",
-    m,
-    f.checkboxBox
-  ), i = c ? /* @__PURE__ */ t(u, { ...p }) : n && /* @__PURE__ */ t(d, { ...p });
-  return e ? /* @__PURE__ */ t("label", { htmlFor: s, className: l, children: i }) : /* @__PURE__ */ t("span", { "aria-hidden": "true", className: l, children: i });
+    p,
+    g.checkboxBox
+  ), b = n ? /* @__PURE__ */ t(m, { ...i }) : c && /* @__PURE__ */ t(u, { ...i });
+  return e ? /* @__PURE__ */ t("label", { htmlFor: l, className: s, children: b }) : /* @__PURE__ */ t("span", { "aria-hidden": "true", className: s, children: b });
 };
 export {
-  v as CheckboxBox
+  k as CheckboxBox
 };

package/dist/components/New/FolderPath/FolderPath.js

@@ -1,65 +1,111 @@
-import { jsx as r } from "react/jsx-runtime";
-import { IconFolder as I, IconChevronRight as f } from "@tabler/icons-react";
-import { DialBreadcrumb as h } from "../../Breadcrumb/Breadcrumb.js";
-import { DialIcon as t } from "../../Icon/Icon.js";
-import { DIAL_KIT_ICON_STROKE as s } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as x } from "../../../constants/icon.js";
-import { mergeClasses as l } from "../../../utils/merge-classes.js";
-import { DIAL_KIT_CLASS as N } from "../../../constants/public-class-names.js";
-const y = ({
+import { jsx as r, jsxs as l, Fragment as C } from "react/jsx-runtime";
+import { IconFolder as S, IconDots as _, IconChevronRight as L } from "@tabler/icons-react";
+import { DialBreadcrumbItem as x } from "../../Breadcrumb/BreadcrumbItem.js";
+import { breadcrumbListClassName as D, breadcrumbSeparatorClassName as y, breadcrumbItemBaseClassName as A, breadcrumbBaseClassName as B } from "../../Breadcrumb/constants.js";
+import { DialIcon as m } from "../../Icon/Icon.js";
+import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
+import { Tooltip as E } from "../Tooltip/Tooltip.js";
+import { DIAL_ICON_SIZE as n } from "../../../constants/icon.js";
+import { mergeClasses as i } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as F } from "../../../constants/public-class-names.js";
+const T = 3, G = ({
   segments: e,
-  labelClassName: m = "dial-small-text",
-  leafClassName: i = "dial-small-semi-text",
-  className: c,
-  ariaLabel: d = "Folder path"
+  labelClassName: d = "dial-small-text",
+  leafClassName: h = "dial-small-semi-text",
+  className: p,
+  ariaLabel: N = "Folder path"
 }) => {
-  const n = /* @__PURE__ */ r(
-    t,
+  const I = /* @__PURE__ */ r(
+    m,
     {
       icon: /* @__PURE__ */ r(
-        I,
+        S,
         {
-          size: x.SM,
-          stroke: s,
+          size: n.SM,
+          stroke: t,
           "aria-hidden": "true"
         }
       ),
       className: "text-secondary"
     }
-  ), p = e.map((o, a) => ({
-    label: a === e.length - 1 ? /* @__PURE__ */ r("span", { className: i, children: o }) : o,
-    disabled: !0,
-    ...a === 0 ? { iconBefore: n } : {}
-  }));
-  return /* @__PURE__ */ r(
-    h,
+  ), c = /* @__PURE__ */ r(
+    m,
     {
-      className: l(c, N.folderPath),
-      ariaLabel: d,
-      separator: /* @__PURE__ */ r(
-        t,
+      icon: /* @__PURE__ */ r(
+        L,
         {
-          icon: /* @__PURE__ */ r(
-            f,
-            {
-              size: 14,
-              stroke: s,
-              "aria-hidden": "true",
-              className: "rtl:scale-x-[-1]"
-            }
-          ),
-          className: "text-secondary"
+          size: 14,
+          stroke: t,
+          "aria-hidden": "true",
+          className: "rtl:scale-x-[-1]"
         }
       ),
-      pathItems: p,
-      labelClassName: l(
-        m,
-        "text-secondary",
-        "!cursor-default"
-      )
+      className: "text-secondary"
+    }
+  ), f = i(
+    d,
+    "text-secondary",
+    "!cursor-default"
+  ), o = (a) => {
+    const s = a === e.length - 1;
+    return /* @__PURE__ */ r(
+      x,
+      {
+        label: s ? /* @__PURE__ */ r("span", { className: h, children: e[a] }) : e[a],
+        disabled: !0,
+        iconBefore: a === 0 ? I : void 0,
+        isFirst: a === 0 && e.length > 1,
+        isLast: s,
+        separator: c,
+        labelClassName: f
+      },
+      `item-${a}`
+    );
+  }, u = e.length > T, b = e.slice(1, -2);
+  return /* @__PURE__ */ r(
+    "nav",
+    {
+      "aria-label": N,
+      className: i(
+        B,
+        p,
+        F.folderPath
+      ),
+      children: /* @__PURE__ */ r("ol", { className: D, children: u ? /* @__PURE__ */ l(C, { children: [
+        o(0),
+        /* @__PURE__ */ l(
+          "li",
+          {
+            className: i(A, "shrink-0"),
+            children: [
+              /* @__PURE__ */ l(
+                E,
+                {
+                  tooltip: e.join(" > "),
+                  triggerClassName: "inline-flex cursor-default items-center text-secondary",
+                  children: [
+                    /* @__PURE__ */ r(
+                      _,
+                      {
+                        size: n.SM,
+                        stroke: t,
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ r("span", { className: "sr-only", children: b.join(", ") })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r("span", { className: y, children: c })
+            ]
+          }
+        ),
+        o(e.length - 2),
+        o(e.length - 1)
+      ] }) : e.map((a, s) => o(s)) })
     }
   );
 };
 export {
-  y as FolderPath
+  G as FolderPath
 };

package/dist/components/New/Radio/Radio.js

@@ -1,5 +1,5 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { useId as h, useCallback as y } from "react";
+import { useId as x, useCallback as y } from "react";
 import { ElementSize as N } from "../../../types/size.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
@@ -11,15 +11,15 @@ const F = ({
   value: i,
   labelProps: o,
   isSelected: l = !1,
-  disabled: t,
+  disabled: a,
   onChange: s,
   caption: c,
-  className: f,
+  className: b,
   ...n
 }) => {
-  const b = h(), a = p ?? b, d = c ? `${a}-caption` : void 0, g = y(
-    (x) => {
-      x.target.checked && s?.(i);
+  const f = x(), t = p ?? f, d = c ? `${t}-caption` : void 0, g = y(
+    (h) => {
+      h.target.checked && s?.(i);
     },
     [s, i]
   );
@@ -28,8 +28,10 @@ const F = ({
       "div",
       {
         className: r(
-          "flex items-center gap-2 ",
-          f,
+          // Named group: the control shows its hover state while either of its
+          // two <label>s (the control or the text) is hovered.
+          "group/choice flex items-center gap-2",
+          b,
           k.radio
         ),
         children: [
@@ -38,11 +40,11 @@ const F = ({
             {
               ...n,
               type: "radio",
-              id: a,
+              id: t,
               name: u,
               value: i,
               checked: l,
-              disabled: t,
+              disabled: a,
               onChange: g,
               "aria-label": v(
                 typeof o?.label != "string" ? n["aria-label"] : void 0
@@ -54,16 +56,16 @@ const F = ({
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: a,
+              htmlFor: t,
               className: r(
-                "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200 hover:bg-control-accent-alpha-hover",
+                "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200",
                 // 20px is below the 24x24 minimum target, so grow the pointer target
                 // without touching the rendered size. The 44px enhanced target would
                 // overhang by 12px per side and swallow the adjacent label.
                 "dial-kit-minimum-target",
                 "peer-focus-visible:outline peer-focus-visible:outline-focus",
-                t ? "cursor-not-allowed border-default bg-control-disable-primary" : r(
-                  "cursor-pointer",
+                a ? "cursor-not-allowed border-default bg-control-disable-primary" : r(
+                  "cursor-pointer group-has-[label:hover]/choice:bg-control-accent-alpha-hover",
                   l ? "border border-accent bg-control-neutral" : "border-default bg-control-neutral"
                 )
               ),
@@ -72,7 +74,7 @@ const F = ({
                 {
                   className: r(
                     "size-3 rounded-full",
-                    t ? "bg-control-disable-secondary" : "bg-control-accent"
+                    a ? "bg-control-disable-secondary" : "bg-control-accent"
                   )
                 }
               )
@@ -83,12 +85,12 @@ const F = ({
             {
               size: N.Standard,
               ...o,
-              htmlFor: a,
+              htmlFor: t,
               className: r(
                 // `Label` defaults to the secondary colour; a radio's own label is
                 // primary while the control is usable.
                 "py-[1px]",
-                t ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                a ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
                 o.className
               )
             }

package/dist/components/New/Switch/Switch.js

@@ -9,15 +9,15 @@ const C = ({
   id: d,
   labelProps: o,
   isOn: t = !1,
-  disabled: l,
+  disabled: c,
   onChange: a,
-  caption: c,
+  caption: s,
   className: u,
   ...i
 }) => {
-  const p = b(), s = d ?? p, n = c ? `${s}-caption` : void 0, f = g(
-    (h) => {
-      a?.(h.target.checked);
+  const p = b(), l = d ?? p, n = s ? `${l}-caption` : void 0, h = g(
+    (f) => {
+      a?.(f.target.checked);
     },
     [a]
   );
@@ -26,7 +26,9 @@ const C = ({
       "div",
       {
         className: r(
-          "flex items-center gap-2",
+          // Named group: the control shows its hover state while either of its
+          // two <label>s (the control or the text) is hovered.
+          "group/choice flex items-center gap-2",
           u,
           N.switch
         ),
@@ -37,11 +39,11 @@ const C = ({
               ...i,
               type: "checkbox",
               role: "switch",
-              id: s,
+              id: l,
               checked: t,
               "aria-checked": t,
-              disabled: l,
-              onChange: f,
+              disabled: c,
+              onChange: h,
               "aria-label": y(
                 typeof o?.label != "string" ? i["aria-label"] : void 0
               ),
@@ -52,14 +54,14 @@ const C = ({
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: s,
+              htmlFor: l,
               className: r(
                 "flex h-[18px] w-[36px] shrink-0 items-center rounded-full p-0.5 transition-colors duration-200",
                 "peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
                 t ? "justify-end" : "justify-start",
-                l ? "cursor-not-allowed bg-control-disable-primary" : r(
+                c ? "cursor-not-allowed bg-control-disable-primary" : r(
                   "cursor-pointer",
-                  t ? "bg-control-accent hover:bg-control-accent-hover" : "bg-control-neutral-default hover:bg-control-neutral-hover-strong"
+                  t ? "bg-control-accent group-has-[label:hover]/choice:bg-control-accent-hover" : "bg-control-neutral-default group-has-[label:hover]/choice:bg-control-neutral-hover-strong"
                 )
               ),
               children: /* @__PURE__ */ e(
@@ -67,7 +69,7 @@ const C = ({
                 {
                   className: r(
                     "size-3.5 shrink-0 rounded-full",
-                    l ? "bg-control-disable-secondary" : "bg-control-neutral"
+                    c ? "bg-control-disable-secondary" : "bg-control-neutral"
                   )
                 }
               )
@@ -78,12 +80,12 @@ const C = ({
             {
               size: x.Standard,
               ...o,
-              htmlFor: s,
+              htmlFor: l,
               className: r(
                 // `Label` defaults to the secondary colour; the switch's own label
                 // has always been primary while the control is usable.
                 "py-[1px]",
-                l ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                c ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
                 o.className
               )
             }
@@ -91,12 +93,12 @@ const C = ({
         ]
       }
     ),
-    c && /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(
       "span",
       {
         id: n,
         className: "dial-tiny-text text-secondary ml-[44px]",
-        children: c
+        children: s
       }
     )
   ] });