@epam/ai-dial-ui-kit 0.16.0-dev.25 → 0.16.0-dev.32

package/dist/components/New/Textarea/Textarea.js

@@ -1,56 +1,60 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import "react";
-import { mergeClasses as n } from "../../../utils/merge-classes.js";
-import { ErrorText as v, CaptionText as N } from "../CaptionText/CaptionText.js";
-import { Label as b } from "../Label/Label.js";
-var C = /* @__PURE__ */ ((e) => (e.None = "none", e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(C || {});
-const s = {
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useId as I } from "react";
+import { mergeClasses as m } from "../../../utils/merge-classes.js";
+import { ErrorText as k, CaptionText as z } from "../CaptionText/CaptionText.js";
+import { Label as j } from "../Label/Label.js";
+var B = /* @__PURE__ */ ((e) => (e.None = "none", e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(B || {});
+const f = {
   none: "resize-none",
   both: "resize",
   horizontal: "resize-x",
   vertical: "resize-y"
-}, g = (e) => typeof e == "boolean" ? s[
+}, $ = (e) => typeof e == "boolean" ? f[
   e ? "both" : "none"
   /* None */
-] : s[e], E = ({
+] : f[e], V = ({
   className: e = "",
-  value: m,
-  onChange: c,
-  error: r,
-  containerClassName: x,
-  resize: p = !1,
-  labelProps: a,
-  caption: f,
-  id: o,
-  invalid: d,
+  value: x,
+  onChange: p,
+  error: t,
+  containerClassName: v,
+  resize: u = !1,
+  labelProps: o,
+  caption: r,
+  id: b,
+  invalid: n,
+  "aria-describedby": h,
+  "aria-invalid": N,
   ...l
 }) => {
-  const h = n(
+  const g = I(), i = b ?? g, s = t ? `${i}-error` : void 0, d = !t && r ? `${i}-caption` : void 0, C = m(
     "dial-kit-textarea dial-kit-input px-3 py-2",
-    d && "dial-kit-input-error",
+    n && "dial-kit-input-error",
     l.disabled && "dial-kit-input-disable",
-    g(p),
+    $(u),
     e
   );
-  return /* @__PURE__ */ i("div", { className: n("flex flex-col gap-2", x), children: [
-    a && /* @__PURE__ */ t(b, { ...a, htmlFor: o }),
-    /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ t(
+  return /* @__PURE__ */ c("div", { className: m("flex flex-col gap-2", v), children: [
+    o && /* @__PURE__ */ a(j, { ...o, htmlFor: i }),
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ a(
         "textarea",
         {
-          id: o,
-          value: m || "",
-          className: h,
-          onChange: (u) => c?.(u.currentTarget.value),
+          id: i,
+          value: x || "",
+          className: C,
+          onChange: (y) => p?.(y.currentTarget.value),
+          "aria-describedby": [h, s, d].filter(Boolean).join(" ") || void 0,
+          "aria-invalid": N ?? (t || n ? !0 : void 0),
           ...l
         }
       ),
-      /* @__PURE__ */ t(v, { text: r }),
-      !r && /* @__PURE__ */ t(N, { text: f })
+      /* @__PURE__ */ a(k, { id: s, text: t }),
+      !t && /* @__PURE__ */ a(z, { id: d, text: r })
     ] })
   ] });
 };
 export {
-  E as Textarea,
-  C as TextareaResize
+  V as Textarea,
+  B as TextareaResize
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.25",
-  "generatedAt": "2026-10-21T16:36:58.089Z",
+  "version": "0.16.0-dev.32",
+  "generatedAt": "2026-10-21T19:48:14.902Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -1241,6 +1241,12 @@
           "required": false,
           "description": "Accessible name for the field; use it when there is no visible label."
         },
+        {
+          "name": "ariaDescribedBy",
+          "type": "string",
+          "required": false,
+          "description": "Ids of extra elements describing the field, e.g. an error rendered outside it; the field's own `error`/`caption` are linked automatically."
+        },
         {
           "name": "searchable",
           "type": "boolean",
@@ -2385,7 +2391,7 @@
       "name": "CaptionText",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A component for displaying caption text with consistent styling\naliases: HelperText|ValidationText\nDesign system 2.0",
+      "description": "A component for displaying caption text with consistent styling\naliases: HelperText|ValidationText\nDesign system 2.0\n\nIt carries no live-region role: a field caption or error is described, not\nannounced. Give it an `id` and point the control's `aria-describedby` at it\n(the 2.0 form controls do this for their own `caption` / `error`). Wrap it in\na `role=\"alert\"` region only for a message that must interrupt, such as a\nfailed submit.",
       "props": [
         {
           "name": "text",
@@ -2402,7 +2408,7 @@
         }
       ],
       "examples": [
-        "<CaptionText text=\"This field is required\" variant={CaptionType.Error} />"
+        "<input aria-describedby=\"name-error\" aria-invalid />\n<CaptionText id=\"name-error\" text=\"This field is required\" variant={CaptionType.Error} />"
       ],
       "sourceFile": "components/New/CaptionText/CaptionText.tsx"
     },