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

package/dist/CHANGELOG.md

@@ -55,6 +55,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-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.34",
-  "generatedAt": "2026-10-22T12:53:34.988Z",
+  "version": "0.16.0-dev.35",
+  "generatedAt": "2026-10-22T14:39:18.409Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -3784,6 +3784,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 +3806,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",