@epam/ai-dial-ui-kit 0.16.0-dev.15 → 0.16.0-dev.18

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
       }
     )
   ] });

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.15",
-  "generatedAt": "2026-10-19T17:10:28.825Z",
+  "version": "0.16.0-dev.18",
+  "generatedAt": "2026-10-19T21:01:06.483Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -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",