@epam/ai-dial-ui-kit 0.16.0-dev.57 → 0.16.0-dev.59

package/dist/components/New/MarkdownEditor/MarkdownEditor.js

@@ -1,43 +1,55 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useMemo as o } from "react";
-import k from "@uiw/react-md-editor";
-import { EditorThemes as w } from "../../../types/editor.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import b from "@uiw/react-md-editor";
+import { EditorThemes as v } from "../../../types/editor.js";
 import { mergeClasses as x } from "../../../utils/merge-classes.js";
 import { getMarkdownFormattingCommands as C, getMarkdownExtraCommands as h } from "./constants.js";
-const j = ({
+const D = ({
   value: t,
-  onChange: m,
-  height: a = 300,
-  theme: e = w.light,
-  className: i,
-  placeholder: d,
-  defaultPreview: s = "edit",
-  id: n,
-  ariaLabel: l,
-  showDragbar: p = !0
+  onChange: e,
+  height: i = 300,
+  theme: m = v.light,
+  className: d,
+  placeholder: s,
+  defaultPreview: n = "edit",
+  id: l,
+  ariaLabel: p,
+  ariaDescribedBy: c,
+  invalid: r = !1,
+  showDragbar: f = !0
 }) => {
-  const c = o(() => C(), []), f = o(() => h(), []);
-  return /* @__PURE__ */ r(
+  const g = a(() => C(), []), k = a(() => h(), []);
+  return /* @__PURE__ */ o(
     "div",
     {
-      "data-color-mode": e,
-      className: x("dial-kit-markdown-editor", i),
-      children: /* @__PURE__ */ r(
-        k,
+      "data-color-mode": m,
+      className: x(
+        "dial-kit-markdown-editor",
+        r && "dial-kit-markdown-editor-invalid",
+        d
+      ),
+      children: /* @__PURE__ */ o(
+        b,
         {
           value: t,
-          onChange: (g) => m?.(g || ""),
-          height: a,
-          preview: s,
-          visibleDragbar: p,
-          commands: c,
-          extraCommands: f,
-          textareaProps: { placeholder: d, id: n, "aria-label": l }
+          onChange: (w) => e?.(w || ""),
+          height: i,
+          preview: n,
+          visibleDragbar: f,
+          commands: g,
+          extraCommands: k,
+          textareaProps: {
+            placeholder: s,
+            id: l,
+            "aria-label": p,
+            "aria-describedby": c,
+            "aria-invalid": r || void 0
+          }
         }
       )
     }
   );
 };
 export {
-  j as MarkdownEditor
+  D as MarkdownEditor
 };

package/dist/components/New/Notification/Notification.js

@@ -1,12 +1,12 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { useMemo as M } from "react";
-import { DialIcon as S } from "../../Icon/Icon.js";
+import { useMemo as S } from "react";
+import { DialIcon as T } from "../../Icon/Icon.js";
 import { NotificationVariant as d, NotificationSurface as p, NotificationType as i } from "../../../types/notification.js";
 import { mergeClasses as o } from "../../../utils/merge-classes.js";
-import { CloseButton as T } from "../CloseButton/CloseButton.js";
-import { variantIcons as v, notificationVariantRoleMap as L, notificationNeutralSurfaceIconClassNameMap as V, notificationNeutralSurfaceClassName as j, notificationVariantClassNameMap as y, alertBaseClassName as A } from "./constants.js";
-import { DIAL_KIT_CLASS as B } from "../../../constants/public-class-names.js";
-const G = ({
+import { CloseButton as v } from "../CloseButton/CloseButton.js";
+import { variantIcons as L, notificationVariantRoleMap as V, notificationNeutralSurfaceIconClassNameMap as j, notificationNeutralSurfaceClassName as y, notificationVariantClassNameMap as A, alertBaseClassName as B } from "./constants.js";
+import { DIAL_KIT_CLASS as D } from "../../../constants/public-class-names.js";
+const H = ({
   variant: e = d.Info,
   type: s = i.Toast,
   surface: N = p.Variant,
@@ -17,24 +17,25 @@ const G = ({
   iconSize: m = 24,
   iconStroke: c = 2,
   closable: h = !1,
-  onClose: u,
-  children: w,
-  textClassName: C,
-  ...g
+  closeAriaLabel: u = "Close notification",
+  onClose: w,
+  children: C,
+  textClassName: g,
+  ...b
 }) => {
-  const b = M(() => v({ size: m, stroke: c })[e], [e, m, c]), f = N === p.Neutral, k = C ?? (s === i.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
+  const k = S(() => L({ size: m, stroke: c })[e], [e, m, c]), f = N === p.Neutral, I = g ?? (s === i.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
   return /* @__PURE__ */ r(
     "div",
     {
-      role: L[e],
-      ...g,
+      role: V[e],
+      ...b,
       className: o(
-        A,
-        f ? j : y[e],
+        B,
+        f ? y : A[e],
         s === i.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
         s === i.SectionMessage && e === d.Loading && "border-secondary",
         x,
-        B.notification
+        D.notification
       ),
       children: [
         /* @__PURE__ */ r("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
@@ -44,9 +45,9 @@ const G = ({
               "aria-hidden": "true",
               className: o(
                 "flex shrink-0",
-                f && V[e]
+                f && j[e]
               ),
-              children: /* @__PURE__ */ a(S, { icon: b })
+              children: /* @__PURE__ */ a(T, { icon: k })
             }
           ),
           t ? /* @__PURE__ */ r(
@@ -54,7 +55,7 @@ const G = ({
             {
               className: o(
                 "flex min-w-0 text-primary break-words",
-                k
+                I
               ),
               children: [
                 /* @__PURE__ */ a("div", { className: "dial-small-paragraph-semi-text min-w-0 break-words", children: t }),
@@ -64,13 +65,13 @@ const G = ({
           ) : /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 text-primary break-words", children: l })
         ] }),
         n != null && /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center", children: n }),
-        w,
+        C,
         h && /* @__PURE__ */ a(
-          T,
+          v,
           {
             className: "shrink-0 self-start",
-            ariaLabel: "Close notification",
-            onClose: (I) => u?.(I)
+            ariaLabel: u,
+            onClose: (M) => w?.(M)
           }
         )
       ]
@@ -78,5 +79,5 @@ const G = ({
   );
 };
 export {
-  G as Notification
+  H as Notification
 };

package/dist/components/New/StateScreen/StateScreen.js

@@ -1,24 +1,25 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useId as o } from "react";
-import { mergeClasses as t } from "../../../utils/merge-classes.js";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useId as u } from "react";
+import { mergeClasses as r } from "../../../utils/merge-classes.js";
 import { DIAL_KIT_CLASS as x } from "../../../constants/public-class-names.js";
-const h = ({
-  title: i,
-  description: r,
+import { LiveRegion as p } from "../LiveRegion/LiveRegion.js";
+const j = ({
+  title: m,
+  description: t,
   icon: l,
   action: s,
-  className: m,
-  titleClassName: n,
-  descriptionClassName: c
+  className: c,
+  titleClassName: d,
+  descriptionClassName: o,
+  announce: i
 }) => {
-  const a = o();
-  return /* @__PURE__ */ d(
+  const a = u(), n = /* @__PURE__ */ f(
     "section",
     {
       "aria-labelledby": a,
-      className: t(
+      className: r(
         "flex size-full flex-col items-center justify-center px-4 text-center",
-        m,
+        c,
         x.stateScreen
       ),
       children: [
@@ -34,28 +35,29 @@ const h = ({
           "h1",
           {
             id: a,
-            className: t(
+            className: r(
               "dial-body-semi-text text-primary",
-              n
+              d
             ),
-            children: i
+            children: m
           }
         ),
-        r != null && /* @__PURE__ */ e(
+        t != null && /* @__PURE__ */ e(
           "p",
           {
-            className: t(
+            className: r(
               "dial-small-text mt-2 text-secondary",
-              c
+              o
             ),
-            children: r
+            children: t
           }
         ),
         s != null && /* @__PURE__ */ e("div", { className: "mt-4", children: s })
       ]
     }
   );
+  return i == null ? n : /* @__PURE__ */ e(p, { politeness: i, className: "size-full", children: n });
 };
 export {
-  h as StateScreen
+  j as StateScreen
 };

package/dist/components/New/Steps/Steps.js

@@ -1,10 +1,10 @@
-import { jsx as o, jsxs as L } from "react/jsx-runtime";
-import { IconExclamationCircle as h, IconCheck as p } from "@tabler/icons-react";
-import { DIAL_KIT_ICON_STROKE as u } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as d } from "../../../constants/icon.js";
-import { DIAL_KIT_CLASS as y } from "../../../constants/public-class-names.js";
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { IconExclamationCircle as L, IconCheck as h } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as d } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as u } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as p } from "../../../constants/public-class-names.js";
 import { StepStatus as t } from "../../../models/step.js";
-import { mergeClasses as l } from "../../../utils/merge-classes.js";
+import { mergeClasses as c } from "../../../utils/merge-classes.js";
 const A = {
   [t.VALID]: "Completed",
   [t.ERROR]: "Error"
@@ -12,66 +12,68 @@ const A = {
   steps: e,
   currentStep: s,
   onChangeStep: m,
-  statusLabels: f,
-  ariaLabel: x,
-  className: I
+  statusLabels: x,
+  ariaLabel: f,
+  className: b
 }) => {
-  const b = (r) => {
+  const I = (r) => {
     if (r === s) return;
-    const a = e.findIndex((n) => n.id === s), i = e.findIndex((n) => n.id === r);
-    (e.slice(0, i).every((n) => n.status === t.VALID) || i < a) && m(r);
+    const a = e.findIndex((i) => i.id === s), n = e.findIndex((i) => i.id === r);
+    (e.slice(0, n).every((i) => i.status === t.VALID) || n < a) && m(r);
   };
   return /* @__PURE__ */ o(
     "ol",
     {
-      "aria-label": x,
-      className: l(
+      "aria-label": f,
+      className: c(
         "m-0 flex list-none gap-x-3 p-0",
-        I,
-        y.steps
+        b,
+        p.steps
       ),
       children: e.map((r, a) => {
-        const i = s === r.id, c = r.status ? f?.[r.status] ?? A[r.status] : void 0;
-        let n = a + 1;
-        return i && r.status === t.ERROR ? n = /* @__PURE__ */ o(
-          h,
+        const n = s === r.id, l = r.status ? x?.[r.status] ?? A[r.status] : void 0;
+        let i = a + 1;
+        return n && r.status === t.ERROR ? i = /* @__PURE__ */ o(
+          L,
           {
             "aria-hidden": "true",
-            size: d.SM,
-            stroke: u
+            size: u.SM,
+            stroke: d
           }
-        ) : !i && r.status === t.VALID && (n = /* @__PURE__ */ o(
-          p,
+        ) : !n && r.status === t.VALID && (i = /* @__PURE__ */ o(
+          h,
           {
             "aria-hidden": "true",
-            size: d.SM,
-            stroke: u
+            size: u.SM,
+            stroke: d
           }
-        )), /* @__PURE__ */ o("li", { className: "flex min-w-[180px] flex-1", children: /* @__PURE__ */ L(
+        )), /* @__PURE__ */ o("li", { className: "flex min-w-[180px] flex-1", children: /* @__PURE__ */ y(
           "button",
           {
             type: "button",
-            "aria-current": i ? "step" : void 0,
-            onClick: () => b(r.id),
-            className: l(
+            "aria-current": n ? "step" : void 0,
+            disabled: r.disabled,
+            onClick: () => I(r.id),
+            className: c(
               "flex h-8 w-full cursor-pointer items-center border-t-2 text-start dial-tiny-text",
               "focus-visible:outline focus-visible:outline-focus",
-              S(r, i)
+              S(r, n),
+              "disabled:cursor-not-allowed disabled:text-control-disable-primary"
             ),
             children: [
               /* @__PURE__ */ o(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: l(
+                  className: c(
                     "me-2 flex size-[22px] shrink-0 items-center justify-center rounded-full",
-                    R(r, i)
+                    R(r, n)
                   ),
-                  children: n
+                  children: i
                 }
               ),
               /* @__PURE__ */ o("span", { children: r.name }),
-              c && /* @__PURE__ */ o("span", { className: "sr-only", children: c })
+              l && /* @__PURE__ */ o("span", { className: "sr-only", children: l })
             ]
           }
         ) }, r.id);

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.57",
-  "generatedAt": "2026-10-29T22:34:30.711Z",
+  "version": "0.16.0-dev.59",
+  "generatedAt": "2026-11-01T22:31:38.176Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -248,6 +248,13 @@
           "defaultValue": "false",
           "description": "Whether the alert has a close button"
         },
+        {
+          "name": "closeAriaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Close notification'",
+          "description": "Accessible name of the close button"
+        },
         {
           "name": "iconSize",
           "type": "number",
@@ -490,6 +497,12 @@
           "defaultValue": "false",
           "description": "Applies error styling"
         },
+        {
+          "name": "ariaDescribedBy",
+          "type": "string",
+          "required": false,
+          "description": "Ids of elements describing the field (e.g. its error), set on the focusable control"
+        },
         {
           "name": "id",
           "type": "string",
@@ -1027,6 +1040,19 @@
           "required": false,
           "description": "Accessible name for the underlying textarea"
         },
+        {
+          "name": "ariaDescribedBy",
+          "type": "string",
+          "required": false,
+          "description": "Ids of elements describing the textarea, e.g. its error"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Draws the error border and sets `aria-invalid` on the textarea"
+        },
         {
           "name": "showDragbar",
           "type": "boolean",
@@ -1497,7 +1523,7 @@
       "name": "Steps",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A row of numbered steps for a multi-step flow, marking the active one and\nflagging completed and failed steps.\naliases: StepWizard|ProgressSteps|Stepper\nDesign system 2.0\n\nA step's number turns into a check once it is completed and the user has moved\non, and into an alert icon while a failed step is the active one. A step can\nonly be entered when every step before it is `StepStatus.VALID`; going back is\nalways allowed.\n\nThe list is an ordered list, the active step carries `aria-current=\"step\"`,\nand a completed or failed step announces its status after its name.",
+      "description": "A row of numbered steps for a multi-step flow, marking the active one and\nflagging completed and failed steps.\naliases: StepWizard|ProgressSteps|Stepper\nDesign system 2.0\n\nA step's number turns into a check once it is completed and the user has moved\non, and into an alert icon while a failed step is the active one. A step can\nonly be entered when every step before it is `StepStatus.VALID`; going back is\nalways allowed. A step with `disabled` cannot be entered at all.\n\nThe list is an ordered list, the active step carries `aria-current=\"step\"`,\nand a completed or failed step announces its status after its name.",
       "props": [
         {
           "name": "steps",
@@ -5821,6 +5847,12 @@
           "type": "string",
           "required": false,
           "description": "Additional CSS classes for the description."
+        },
+        {
+          "name": "announce",
+          "type": "LiveRegionPoliteness",
+          "required": false,
+          "description": "Wraps the screen in a `LiveRegion` of this politeness, for a state that replaces the user's content."
         }
       ],
       "examples": [
@@ -8076,6 +8108,10 @@
         {
           "name": "status?",
           "value": "StepStatus"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
         }
       ],
       "sourceFile": "models/step.ts"