@epam/ai-dial-ui-kit 0.16.0-dev.50 → 0.16.0-dev.54

package/dist/CHANGELOG.md

@@ -31,6 +31,8 @@ Versions match the git tags on the `development` branch.
 
 ### Added
 
+- **`FileName` (2.0) — `icon`** — replaces the type icon with your own, for example to mark a special folder in a tree. The icon's wrapper is `aria-hidden`, the `loading` spinner still takes its place, and the shared badge (part of the type icon) is not drawn, while `sharedLabel` still announces the state. Without `icon` nothing changes.
+
 - **`Grid` (2.0) — `appearance` (`GridAppearance.Default` / `Chat`)** — `GridAppearance.Chat` draws the design's "Chat table": a borderless card with a 12px corner and the MD shadow, 12px of padding on both sides of every header and row cell, a full-width 1px line under the header, dividers between data rows that stop at the cell padding on both sides and sit on the 0.5px `stroke-tertiary` stroke, and hover and selected rows with a 12px corner and no divider. It ignores `wrapperBorder`. The root carries `dial-kit-grid-chat`. ai-dial-chat's usage and catalog tables wrapped the grid in their own card and could not inset the dividers or round the rows without restyling ag-Grid's markup. Additive.
 
 - **`FormSection` (2.0)** — a titled section of a form or a builder column: a heading with an optional action at its inline end, an optional description and the content, in a `section` named by its heading. `variant` (`FormSectionVariant.Row` / `Caption` / `Setting`) sets the type scale; `headingLevel` (2–6, default 3) picks the heading element so the section fits the host's outline. Quick Apps' builder `SectionRow` and the DIAL Loop editor's copy of it were two copies of it. The root carries `dial-kit-form-section` (`DIAL_KIT_CLASS.formSection`). Additive.
@@ -59,6 +61,8 @@ Versions match the git tags on the `development` branch.
 
 ### Changed
 
+- **`Input`, `Select` and the other `.dial-kit-input` fields (2.0) — the focus ring is drawn inside the border** — the focus and active ring was an outline outside the field (`outline-offset-0`), so a host that wrapped a field in an `overflow: auto` or `hidden` box with no padding saw it cut off on the sides and bottom. The ring is now offset by `-1px`, so it lies over the 1px border, as the design draws it (a 1px `accent-focus` border, no outer ring), and no ancestor can clip it. An invalid field's ring does the same in the error color. Visual only; no prop changes.
+
 - **`shadow-xs` and `shadow-lg` match the design's shadow scale** — `shadow-xs` was `0 1px 4px` blue alpha-20 over a `0 1px 2px` grey layer; it is now a single `0 0 8px 1px` blue alpha-20 halo, so a pressed button glows evenly instead of dropping down. `shadow-lg` was `0 8px 44px 0`; it is now `1px 10px 25px 12px`, same blue alpha-8. `shadow-sm` and `shadow-md` already matched. `--shadow-xs-2` no longer reaches `shadow-xs` and only colours the resting shadow of solid controls (`dial-kit-control-shadow`). Visual only; no token renamed.
 
 - **`Popup` (2.0) — the title is set in Heading 2** — the header title moves from `dial-h3-text` to `dial-h2-text`, the size the popup design gives it. It also reaches `ConfirmationPopup` and every popup built on `Popup`. Visual only.

package/dist/components/New/FileName/FileName.js

@@ -1,72 +1,73 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { EllipsisTooltip as T } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { FileIcon as g } from "../FileIcon/FileIcon.js";
+import { FileIcon as j } from "../FileIcon/FileIcon.js";
 import { DIAL_KIT_CLASS as v } from "../../../constants/public-class-names.js";
 import { DialItemType as w } from "../../../types/item.js";
-import { mergeClasses as l } from "../../../utils/merge-classes.js";
-const D = ({
-  name: s,
+import { mergeClasses as s } from "../../../utils/merge-classes.js";
+const L = ({
+  name: r,
   type: o = w.File,
-  fileExtension: t,
-  shared: i = !1,
-  loading: m = !1,
+  fileExtension: f,
+  icon: i,
+  shared: t = !1,
+  loading: l = !1,
   loadingLabel: p,
-  iconSize: f,
-  details: r,
-  isInvalidName: c = !1,
-  className: n,
-  nameClassName: x,
-  sharedIndicatorClassName: d,
+  iconSize: c,
+  details: a,
+  isInvalidName: n = !1,
+  className: x,
+  nameClassName: d,
+  sharedIndicatorClassName: h,
   sharedIndicatorTooltip: N,
-  sharedLabel: h = "Shared",
+  sharedLabel: u = "Shared",
   hideTooltip: y = !1,
   tooltipContent: I
-}) => /* @__PURE__ */ a(
+}) => /* @__PURE__ */ m(
   "div",
   {
-    className: l(
+    className: s(
       "flex w-full min-w-0 items-center gap-2",
-      n,
+      x,
       v.fileName
     ),
     children: [
-      /* @__PURE__ */ e(
-        g,
+      i != null && !l ? /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "flex shrink-0 items-center justify-center", children: i }) : /* @__PURE__ */ e(
+        j,
         {
-          name: s,
+          name: r,
           type: o,
-          fileExtension: t,
-          shared: i,
-          loading: m,
+          fileExtension: f,
+          shared: t,
+          loading: l,
           loadingLabel: p,
-          size: f,
-          sharedIndicatorClassName: d,
+          size: c,
+          sharedIndicatorClassName: h,
           sharedIndicatorTooltip: N,
-          decorative: !m
+          decorative: !l
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ m(
         "div",
         {
-          className: l("flex min-w-0 flex-1", {
-            "flex-col gap-1": !!r
+          className: s("flex min-w-0 flex-1", {
+            "flex-col gap-1": !!a
           }),
           children: [
             /* @__PURE__ */ e(
               T,
               {
-                className: l(
+                className: s(
                   "dial-small-paragraph-text",
-                  c ? "text-secondary" : "text-primary",
-                  x
+                  n ? "text-secondary" : "text-primary",
+                  d
                 ),
-                text: s,
+                text: r,
                 hideTooltip: y,
                 customTooltipContent: I
               }
             ),
-            i && /* @__PURE__ */ e("span", { className: "sr-only", children: h }),
-            r
+            t && /* @__PURE__ */ e("span", { className: "sr-only", children: u }),
+            a
           ]
         }
       )
@@ -74,5 +75,5 @@ const D = ({
   }
 );
 export {
-  D as FileName
+  L as FileName
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.50",
-  "generatedAt": "2026-10-27T10:32:17.686Z",
+  "version": "0.16.0-dev.54",
+  "generatedAt": "2026-10-28T11:50:41.901Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -3863,7 +3863,7 @@
       "name": "FileName",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A file or folder name with its type icon, truncated with a tooltip when it\ndoes not fit.\naliases: FileDisplay|NameDisplay\nDesign system 2.0\n\nThe visible name already says what the item is, so the icon is decorative;\nthe shared state, which only the badge shows, is announced by a\nvisually-hidden `sharedLabel` after the name instead.\n\nWhile `loading` the icon is swapped for a `Spinner`, which is left in the\naccessibility tree so the busy state is announced.\n\nWith `details` the text switches to two lines — the name, then the metadata.",
+      "description": "A file or folder name with its type icon, truncated with a tooltip when it\ndoes not fit.\naliases: FileDisplay|NameDisplay\nDesign system 2.0\n\nThe visible name already says what the item is, so the icon is decorative;\nthe shared state, which only the badge shows, is announced by a\nvisually-hidden `sharedLabel` after the name instead.\n\nPass `icon` to draw your own in place of the type icon. The shared badge is\npart of the type icon, so it is not drawn then; the visually-hidden\n`sharedLabel` still announces the state.\n\nWhile `loading` the icon is swapped for a `Spinner`, which is left in the\naccessibility tree so the busy state is announced.\n\nWith `details` the text switches to two lines — the name, then the metadata.",
       "props": [
         {
           "name": "name",
@@ -3884,6 +3884,12 @@
           "required": false,
           "description": "Extension overriding the one in `name`"
         },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Replaces the type icon; the `loading` spinner still takes its place"
+        },
         {
           "name": "shared",
           "type": "boolean",