@epam/ai-dial-ui-kit 0.16.0-dev.34 → 0.16.0-dev.36

package/dist/CHANGELOG.md

@@ -25,6 +25,8 @@ Versions match the git tags on the `development` branch.
 
 ### Added
 
+- **`PasswordInput` (2.0) — `isToggleHidden`** — the reveal toggle could only be removed by disabling the field, so a host with nothing to reveal (a stored secret the server never returns) had to hide the button with a CSS selector on the kit's markup. `isToggleHidden` draws no toggle and keeps the value masked while the field stays editable; a reveal switched on before the toggle went away comes back masked. Additive.
+
 - **`Select` (2.0) — `ariaDescribedBy`** — ids of elements that describe the field from outside it, such as an error a form renders under its own label; the field's own `error` / `caption` are linked automatically. Additive.
 
 - **`mergeClasses` — the `dial-*-text` type scale is one conflict group** — a caller's `dial-small-text` passed to a component whose default is `dial-tiny-text` kept both classes, and the step declared later in `typography.scss` won whatever the caller asked for. A later type-scale class now replaces an earlier one, as `w-*` or `px-*` do. The public `dial-kit-*-text` classes are not part of the group. Reported from `ai-dial-chat`.
@@ -55,6 +57,8 @@ Versions match the git tags on the `development` branch.
 
 ### Fixed
 
+- **`EntityIdentity` (2.0) — the icon sits on a themable `bg-entity-icon` plate, so dark logos stay visible in a dark theme** — model and vendor logos are often a monochrome dark glyph on a transparent background, and the image was drawn with no background, straight on the dark card. The image now sits on `bg-entity-icon`, which reads `--bg-entity-icon` and falls back to `--bg-layer-sunken`; a dark theme sets `--bg-entity-icon` to a light value to keep such logos legible. A transparent icon now shows the sunken layer behind it until the theme sets the new variable. `Avatar` gains `imageClassName`, applied only while the image is shown, so the plate never overrides the initials' colour pair. Reported in [#971](https://github.com/epam/ai-dial-ui-kit/issues/971).
+
 - **`Dropdown` (2.0) — the menu state is on the trigger, not on its wrapper** — `aria-haspopup`, `aria-expanded` and `aria-controls` sat on the role-less `<span class="dial-kit-dropdown">` around the trigger. ARIA does not allow `aria-expanded` there (axe `aria-allowed-attr`), so a screen reader focused on the icon button heard no open/closed state. When the trigger is a single element and the menu opens on click or hover, the three attributes now land on that element, and any the trigger sets itself win (`Select` keeps `aria-haspopup="listbox"`). A text or multi-node trigger, and a context-menu-only trigger such as a `Grid` cell, keep them on the wrapper as before. A test that located the wrapper by `[aria-haspopup="menu"]` now finds the trigger element. Reported from an Accessibility Insights FastPass of ai-dial-chat (31 instances).
 
 - **`Radio`, `Checkbox`, `Switch` (2.0) — hovering the label text shows the control's hover state** — the hover colour was on the control's own `<label>` only, so pointing at the text, which also toggles the control, gave no feedback until the pointer reached the 20px circle, box or track. Each component's root is now a `group/choice`, and the control shows its hover state while either of its two labels is hovered (`group-has-[label:hover]/choice:`). Pointing at the empty part of the row or at the label's info button does not count. A disabled `Radio` no longer picks up the hover background. The decorative `CheckboxBox` used inside menu rows keeps reacting to its own hover, since the row owns that interaction. Reported on the toolset editor's Protocol radios in ai-dial-chat.

package/dist/components/New/Avatar/Avatar.js

@@ -1,13 +1,13 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
+import { useState as w } from "react";
+import { DIAL_KIT_CLASS as I } from "../../../constants/public-class-names.js";
 import { AvatarShape as d } from "../../../types/avatar.js";
-import { pickAvatarColor as I, extractInitials as N } from "../../../utils/avatar.js";
+import { pickAvatarColor as N, extractInitials as j } from "../../../utils/avatar.js";
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const j = {
+const k = {
   [d.Circle]: "rounded-full",
   [d.Square]: "rounded-md"
-}, q = ({
+}, D = ({
   name: s,
   initials: c,
   src: r,
@@ -17,16 +17,17 @@ const j = {
   color: h,
   className: u,
   textClassName: l,
-  onImageError: S
+  imageClassName: S,
+  onImageError: p
 }) => {
-  const [p, v] = b(), g = !!r && p !== r, i = t !== "", m = (n) => e(
+  const [v, g] = w(), A = !!r && v !== r, i = t !== "", m = (n) => e(
     "inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
-    j[f],
+    k[f],
     n,
     u,
-    w.avatar
+    I.avatar
   );
-  if (g)
+  if (A)
     return /* @__PURE__ */ a(
       "img",
       {
@@ -34,20 +35,20 @@ const j = {
         alt: t,
         width: o,
         height: o,
-        className: e(m(), "object-cover"),
+        className: e(m(S), "object-cover"),
         onError: (n) => {
-          v(r), S?.(n);
+          g(r), p?.(n);
         }
       }
     );
-  const { background: A, foreground: C } = h ?? I(s);
+  const { background: C, foreground: b } = h ?? N(s);
   return /* @__PURE__ */ a(
     "span",
     {
       role: i ? "img" : void 0,
       "aria-label": i ? t : void 0,
       "aria-hidden": i ? void 0 : !0,
-      className: m(e(A, C)),
+      className: m(e(C, b)),
       style: {
         width: o,
         height: o,
@@ -60,12 +61,12 @@ const j = {
             "leading-none",
             l ?? "font-semibold"
           ),
-          children: c ?? N(s)
+          children: c ?? j(s)
         }
       )
     }
   );
 };
 export {
-  q as Avatar
+  D as Avatar
 };

package/dist/components/New/EntityIdentity/EntityIdentity.js

@@ -1,12 +1,12 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
 import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
 import { AvatarShape as _ } from "../../../types/avatar.js";
 import { EntityType as e } from "../../../types/entity-type.js";
-import { mergeClasses as n } from "../../../utils/merge-classes.js";
+import { mergeClasses as l } from "../../../utils/merge-classes.js";
 import { Avatar as w } from "../Avatar/Avatar.js";
 import { EllipsisTooltip as d } from "../EllipsisTooltip/EllipsisTooltip.js";
 import { Highlight as L } from "../Highlight/Highlight.js";
-const M = {
+const C = {
   [e.Model]: "Model",
   [e.Agent]: "Agent",
   [e.Toolset]: "Toolset",
@@ -18,13 +18,13 @@ const M = {
   [e.Toolset]: "text-brown-2",
   [e.Skill]: "text-violet-1",
   [e.Prompt]: "text-violet-2"
-}, P = {
+}, M = {
   [e.Model]: "bg-blue",
   [e.Agent]: "bg-green-2",
   [e.Toolset]: "bg-brown",
   [e.Skill]: "bg-violet-2",
   [e.Prompt]: "bg-violet-1"
-}, k = ["h1", "h2", "h3", "h4", "h5", "h6"], C = (t) => k[Math.min(6, Math.max(1, Math.round(t))) - 1], z = ({
+}, P = ["h1", "h2", "h3", "h4", "h5", "h6"], k = (t) => P[Math.min(6, Math.max(1, Math.round(t))) - 1], z = ({
   item: t,
   labels: i,
   showVersion: x = !0,
@@ -36,60 +36,61 @@ const M = {
   statusBadge: o,
   className: f,
   nameClassName: v = "dial-h3-text",
-  typeClassName: T = "dial-caption-lead-semi-text",
-  versionClassName: y = "dial-tiny-text",
+  typeClassName: y = "dial-caption-lead-semi-text",
+  versionClassName: T = "dial-tiny-text",
   iconClassName: A,
   featuredChipClassName: S
 }) => {
-  const N = C(u), c = h && !!t.isFeatured, b = o != null || c, m = x ? t.version : void 0;
+  const N = k(u), m = h && !!t.isFeatured, b = o != null || m, c = x ? t.version : void 0;
   return /* @__PURE__ */ s(
     "div",
     {
-      className: n(
+      className: l(
         "flex items-start gap-2",
         f,
         E.entityIdentity
       ),
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ n(
           w,
           {
             name: t.name,
             src: t.iconUrl,
             size: g,
             shape: _.Square,
-            className: n("rounded-[14px]", A)
+            imageClassName: "bg-entity-icon",
+            className: l("rounded-[14px]", A)
           }
         ),
         /* @__PURE__ */ s(
           "div",
           {
-            className: n(
+            className: l(
               "flex min-w-0 flex-1 flex-col gap-1",
               a != null && "self-stretch"
             ),
             children: [
               /* @__PURE__ */ s("div", { className: "relative flex items-center justify-between", children: [
-                /* @__PURE__ */ l(
+                /* @__PURE__ */ n(
                   "span",
                   {
-                    className: n(
+                    className: l(
                       "uppercase",
-                      T,
+                      y,
                       p[t.type]
                     ),
-                    children: i?.type ?? M[t.type]
+                    children: i?.type ?? C[t.type]
                   }
                 ),
                 b && /* @__PURE__ */ s("div", { className: "absolute end-0 top-[-6px] flex items-center gap-2", children: [
                   o,
-                  c && /* @__PURE__ */ l(
+                  m && /* @__PURE__ */ n(
                     "span",
                     {
-                      className: n(
+                      className: l(
                         "flex h-6 items-center justify-center rounded-2xl px-2",
                         "dial-caption-lead-semi-text",
-                        P[t.type],
+                        M[t.type],
                         p[t.type],
                         S
                       ),
@@ -99,30 +100,30 @@ const M = {
                 ] })
               ] }),
               /* @__PURE__ */ s("div", { className: "flex min-w-0 items-center gap-2", children: [
-                /* @__PURE__ */ l(
+                /* @__PURE__ */ n(
                   N,
                   {
-                    className: n(
+                    className: l(
                       "min-w-0 shrink text-primary",
                       v
                     ),
-                    children: r ? /* @__PURE__ */ l(L, { text: t.name, query: r, maxLines: 1 }) : /* @__PURE__ */ l(d, { text: t.name })
+                    children: r ? /* @__PURE__ */ n(L, { text: t.name, query: r, maxLines: 1 }) : /* @__PURE__ */ n(d, { text: t.name })
                   }
                 ),
-                m != null && /* Capped at 30% of the row so a long version truncates instead of
+                c != null && /* Capped at 30% of the row so a long version truncates instead of
                 squeezing the name out. */
-                /* @__PURE__ */ l(
+                /* @__PURE__ */ n(
                   d,
                   {
-                    className: n(
+                    className: l(
                       "max-w-[30%] shrink-0 text-secondary",
-                      y
+                      T
                     ),
-                    text: m
+                    text: c
                   }
                 )
               ] }),
-              a != null && /* @__PURE__ */ l("div", { className: "mt-auto pt-1", children: a })
+              a != null && /* @__PURE__ */ n("div", { className: "mt-auto pt-1", children: a })
             ]
           }
         )

package/dist/components/New/PasswordInput/PasswordInput.js

@@ -1,58 +1,59 @@
 import { jsx as e } from "react/jsx-runtime";
-import { IconEyeOff as c, IconEye as l } from "@tabler/icons-react";
-import { useState as u, useEffect as w } from "react";
-import { GhostIconButton as d } from "../IconButton/IconButtonWrappers.js";
-import { Input as C } from "../Input/Input.js";
-import { DIAL_KIT_ICON_STROKE as i } from "../constants/icon.js";
+import { IconEyeOff as c, IconEye as u } from "@tabler/icons-react";
+import { useState as w, useEffect as C } from "react";
+import { GhostIconButton as _ } from "../IconButton/IconButtonWrappers.js";
+import { Input as E } from "../Input/Input.js";
+import { DIAL_KIT_ICON_STROKE as a } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as m } from "../../../constants/icon.js";
-import { ElementSize as a } from "../../../types/size.js";
-import { DIAL_KIT_CLASS as _ } from "../../../constants/public-class-names.js";
-import { mergeClasses as E } from "../../../utils/merge-classes.js";
+import { ElementSize as p } from "../../../types/size.js";
+import { DIAL_KIT_CLASS as h } from "../../../constants/public-class-names.js";
+import { mergeClasses as A } from "../../../utils/merge-classes.js";
 const K = ({
-  showPasswordLabel: p = "Show password",
+  showPasswordLabel: n = "Show password",
   hidePasswordLabel: f = "Hide password",
-  disabled: r,
-  size: n = a.Standard,
+  disabled: s,
+  isToggleHidden: I,
+  size: l = p.Standard,
   ...t
 }) => {
-  const [I, s] = u(!1), o = I && !r;
-  return w(() => {
-    r && s(!1);
-  }, [r]), /* @__PURE__ */ e(
-    C,
+  const [d, i] = w(!1), o = !s && !I, r = d && o;
+  return C(() => {
+    o || i(!1);
+  }, [o]), /* @__PURE__ */ e(
+    E,
     {
       ...t,
-      wrapperClassName: E(
+      wrapperClassName: A(
         t.wrapperClassName,
-        _.passwordInput
+        h.passwordInput
       ),
-      size: n,
-      disabled: r,
-      type: o ? "text" : "password",
-      iconAfter: r ? void 0 : /* @__PURE__ */ e(
-        d,
+      size: l,
+      disabled: s,
+      type: r ? "text" : "password",
+      iconAfter: o ? /* @__PURE__ */ e(
+        _,
         {
-          size: a.Small,
-          "aria-label": o ? f : p,
-          "aria-pressed": o,
-          icon: o ? /* @__PURE__ */ e(
+          size: p.Small,
+          "aria-label": r ? f : n,
+          "aria-pressed": r,
+          icon: r ? /* @__PURE__ */ e(
             c,
             {
               size: m.SM,
-              stroke: i,
+              stroke: a,
               "aria-hidden": "true"
             }
           ) : /* @__PURE__ */ e(
-            l,
+            u,
             {
               size: m.SM,
-              stroke: i,
+              stroke: a,
               "aria-hidden": "true"
             }
           ),
-          onClick: () => s((S) => !S)
+          onClick: () => i((S) => !S)
         }
-      )
+      ) : void 0
     }
   );
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.34",
-  "generatedAt": "2026-10-22T12:53:34.988Z",
+  "version": "0.16.0-dev.36",
+  "generatedAt": "2026-10-22T19:28:41.596Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -1692,7 +1692,7 @@
       "name": "PasswordInput",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\nDesign system 2.0\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other  prop is passed through.\n\nA disabled field is masked with no toggle at all, and comes back masked if it\nis enabled again.",
+      "description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\nDesign system 2.0\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other  prop is passed through.\n\nA disabled field is masked with no toggle at all, and comes back masked if it\nis enabled again.\n\n`isToggleHidden` does the same without disabling the field: use it when there\nis nothing to reveal, such as a stored secret the server never returns.",
       "props": [
         {
           "name": "showPasswordLabel",
@@ -1707,6 +1707,12 @@
           "required": false,
           "defaultValue": "'Hide password'",
           "description": "Accessible name of the toggle while the value is visible"
+        },
+        {
+          "name": "isToggleHidden",
+          "type": "boolean",
+          "required": false,
+          "description": "Hides the reveal toggle and keeps the value masked, leaving the field editable"
         }
       ],
       "examples": [
@@ -3784,6 +3790,12 @@
           "required": false,
           "description": "Type-scale class for the initials, replacing the size-derived font size"
         },
+        {
+          "name": "imageClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied only while the image is shown"
+        },
         {
           "name": "onImageError",
           "type": "(event: SyntheticEvent<HTMLImageElement>) => void",
@@ -3800,7 +3812,7 @@
       "name": "EntityIdentity",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "The identity block of a DIAL entity: its icon, a coloured type label, the\nname and the version, with an optional featured chip.\naliases: EntityHeader|ModelHeader|AppIdentity\nDesign system 2.0\n\nThe type label is plain uppercase text coloured by `item.type`. The icon is\na square `Avatar`, so a missing or broken image falls back to the initials of\nthe name. The icon is decorative: the name next to it already names the\nentity.",
+      "description": "The identity block of a DIAL entity: its icon, a coloured type label, the\nname and the version, with an optional featured chip.\naliases: EntityHeader|ModelHeader|AppIdentity\nDesign system 2.0\n\nThe type label is plain uppercase text coloured by `item.type`. The icon is\na square `Avatar`, so a missing or broken image falls back to the initials of\nthe name. The image sits on the `bg-entity-icon` plate, so a dark theme can\nkeep a dark, transparent logo legible. The icon is decorative: the name next\nto it already names the entity.",
       "props": [
         {
           "name": "item",