@epam/ai-dial-ui-kit 0.15.0-dev.20 → 0.15.0-dev.22

package/dist/CHANGELOG.md

@@ -31,8 +31,12 @@ Versions match the git tags on the `development` branch.
 
 - **`TransferQueue` (2.0)** — the floating "Importing 5 files" panel for an upload, download, import or export, moved into the kit from `@epam/ai-dial-conversation-panel`'s `ImportExportQueue` so the file manager can use it for uploads too. It is generic: `items` are `{ id, name, status, percent?, message? }` with `TransferQueueItemStatus` (`InProgress`, `Success`, `Warning`, `Failed`, `Canceled`), not the conversation-transfer job the chat library used. Each row draws the 2.0 `FileIcon` for its name, a truncating name, and a trailing status: a named spinner with a cancel control on hover or focus (only when `onCancelItem` is passed; the spinner never takes the pointer, so the control stays clickable in the same cell), a named check, a warning or error icon whose `message` is both its tooltip and its focusable accessible name — a tooltip alone renders nothing on touch — or "Canceled". The header has the caller's `title` verbatim, a failed-item count badge, and collapse (`aria-expanded`/`aria-controls`) and close controls. Collapsed while work runs, the rows give way to one aggregate `ProgressBar` whose `aria-valuetext` counts settled items rather than a percentage. Closing with work in progress or a failure unread asks for confirmation first; once every item succeeds the queue calls `onClose` by itself after `autoCloseDelay` (8000 ms by default, `0` disables), and a warned or canceled row keeps it open. The root is a polite `role="status"` region carrying `dial-kit-transfer-queue` (`DIAL_KIT_CLASS.transferQueue`); positioning is the host's. Every string has an English default in `DEFAULT_TRANSFER_QUEUE_LABELS` and takes an override through `labels`.
 
+- **`Accordion` (2.0) — `caretPosition`** — the header always drew its caret after the title, pushed to the far edge, and a caller whose design puts it beside the title had no way to ask for that. `caretPosition` takes `AccordionCaretPosition.Start` (before the title, with a gap) or `AccordionCaretPosition.End` (the default, today's placement). A non-collapsible panel still draws no caret. Additive; nothing renders differently without it. Requested in [ai-dial-chat](https://github.com/epam/ai-dial-chat) while moving its hand-rolled disclosures onto `Accordion`.
+
 ### Fixed
 
+- **`Accordion` (2.0) — the caret follows the reading direction, and the panel slides open and shut** — the collapsed caret pointed right under `dir="rtl"` too, against the reading direction; it now turns to point left in RTL and still points down once open. The content was also mounted only while expanded, so it appeared and vanished in one frame. It now stays mounted and animates its height (`grid-template-rows` 0fr ↔ 1fr, 200 ms, off under `prefers-reduced-motion`); while collapsed it is `inert`, so nothing in it is focusable or announced, and `aria-controls` always points at the region. The 12px gap under the header moved inside the clipped part, so a collapsed panel is exactly as tall as before. A caller that relied on the content unmounting while collapsed (to defer an expensive render, or to reset child state on close) now needs to render it conditionally itself. Requested in [ai-dial-chat](https://github.com/epam/ai-dial-chat) while moving its conversation stages onto `Accordion`.
+
 - **`Select` and `Dropdown` (2.0) — rows are 2px apart, and every option list and submenu has the same vertical inset** — rows were stacked edge to edge, so a selected row's tint and a hovered neighbour's merged into one block; every option list, menu and kit-rendered submenu now stacks its rows with `gap-0.5` (the shared `overlayListClassName`). Separately, the `Dropdown` menu wraps its rows in `py-1` inside the panel's `p-1`, but the `Select` option list and the submenus of both components rendered their rows straight into the panel, so the first and last rows (and the focus ring of a keyboard-focused one) sat flush against its top and bottom edge. The `Select` option list now carries the same `py-1`, and a submenu panel of kit-rendered rows takes `py-2` — the same 8px in total. A `Dropdown` submenu drawn through `renderSubMenu` keeps the plain panel, as a `renderOverlay` body does at the top level.
 
 - **`MarkdownEditor` (2.0) — the live preview is part of the card now, instead of a sheet of GitHub's own CSS laid over it** — the 2.0 restyle covered the card and the toolbar and stopped at the split: everything right of it was still `@uiw/react-md-editor`'s default stylesheet. Three things came out of that. The pane divider was the library's `inset` box-shadow in a hardcoded `#d0d7de`, drawn on the preview and then painted over by the markdown body's opaque white — and since that body is only as tall as its content, the divider survived as a hairline starting halfway down the pane, under the last rendered block. The white itself was the second: a `#ffffff` patch over the card's `bg-layer-raised`, which a dark theme would have kept white. And Tailwind's preflight, which the kit ships, had stripped the list markers and the task-list checkbox out of the rendered markdown — a bulleted list came out as indented lines, a `- [ ]` as a 0×0 box. The divider is now a real border on `border-secondary`, the body and its table rows are transparent, code, quotes, tables and headings take kit tokens, and lists and task boxes render again. The preview also inherits the host's font and `text-primary` instead of the library's `-apple-system` stack and `#24292f`; the edit pane keeps its monospace face. Both panes gained a 16px gutter beside the divider, so text no longer butts against it.

package/dist/JsonEditor-BDe6elKO.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("./lazy-BEsZqouS.cjs"),c=require("@monaco-editor/react");function g(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const f=g(c),b={[a.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[a.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}},k=({value:e,onChange:o,onValidateJSON:r,options:t,currentTheme:n,themesConfig:s=b})=>{function d(i){i?.editor?.defineTheme(n,s[n]),i.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}const{Editor:l}=f;return u.jsx(l,{beforeMount:d,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:r,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...t??{}}})};exports.DialJsonEditor=k;

package/dist/{MarkdownEditor-NYMcKLJy.cjs → MarkdownEditor-C7BONfsl.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-Cy9WobJf.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const b=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m})=>{const I=j.useMemo(()=>M(),[]),x=j.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-BEsZqouS.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const b=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m})=>{const I=j.useMemo(()=>M(),[]),x=j.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/{MarkdownEditor-CPzMv3lE.cjs → MarkdownEditor-FVzYMdkC.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-Cy9WobJf.cjs"),u=require("./merge-classes-BEJXjzkx.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-BEsZqouS.cjs"),u=require("./merge-classes-BEJXjzkx.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;

package/dist/MarkdownEditorContainer-BA94ffC4.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("./Switch-CfxMs3AZ.cjs"),E=require("./lazy-BEsZqouS.cjs"),N=require("./MarkdownEditor-FVzYMdkC.cjs"),b=({value:r,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=E.EditorThemes.dark,onValidateJSON:x,preview:j="edit"})=>{const w=n.useId(),[t,C]=n.useState(!1),[f,p]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-BDe6elKO.cjs")).then(s=>{p(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),S=n.useCallback(s=>{x?.(s)},[x]),o=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||o)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,o&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:w,onChange:s=>C(s)})})]})]}),o&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:r,onChange:h,onValidateJSON:S,currentTheme:u})}):e.jsx(N.DialMarkdownEditor,{value:r,onChange:h,height:c,preview:j,theme:u})]})})})};exports.DialMarkdownEditorContainer=b;

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -1,28 +1,26 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useId as g, useState as x, useEffect as J, useCallback as u } from "react";
-import "../../constants/editor.js";
-import { EditorThemes as S } from "../../types/editor.js";
-import "@monaco-editor/react";
-import { DialSwitch as b } from "../Switch/Switch.js";
+import { DialSwitch as S } from "../Switch/Switch.js";
+import { EditorThemes as b } from "../../types/editor.js";
 import { DialMarkdownEditor as v } from "./MarkdownEditor.js";
 import { DialLabel as y } from "../Label/Label.js";
-const $ = ({
+const z = ({
   value: s,
   onChangeValue: l,
-  label: t,
+  label: i,
   headerContent: d,
   switcherLabel: a,
   height: c = 300,
-  theme: m = S.dark,
+  theme: m = b.dark,
   onValidateJSON: f,
   preview: C = "edit"
 }) => {
-  const N = g(), [i, w] = x(!1), [p, D] = x(null);
+  const N = g(), [n, w] = x(!1), [p, D] = x(null);
   J(() => {
-    i && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
       D(() => o.DialJsonEditor);
     });
-  }, [i]);
+  }, [n]);
   const h = u(
     (o) => {
       l?.(o);
@@ -33,16 +31,16 @@ const $ = ({
       f?.(o);
     },
     [f]
-  ), n = !!a;
+  ), t = !!a;
   return /* @__PURE__ */ e("div", { className: "size-full flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ r("div", { children: [
-    (t || d || n) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
-      t && /* @__PURE__ */ e(y, { label: t }),
+    (i || d || t) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      i && /* @__PURE__ */ e(y, { label: i }),
       /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-1 justify-end", children: [
         d,
-        n && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
-          b,
+        t && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          S,
           {
-            isOn: i,
+            isOn: n,
             label: a,
             switchId: N,
             onChange: (o) => w(o)
@@ -50,7 +48,7 @@ const $ = ({
         ) })
       ] })
     ] }),
-    n && i ? /* @__PURE__ */ e(
+    t && n ? /* @__PURE__ */ e(
       "div",
       {
         className: "border border-primary rounded",
@@ -78,5 +76,5 @@ const $ = ({
   ] }) }) });
 };
 export {
-  $ as DialMarkdownEditorContainer
+  z as DialMarkdownEditorContainer
 };

package/dist/components/New/Accordion/Accordion.js

@@ -1,99 +1,113 @@
-import { jsxs as a, Fragment as A, jsx as e } from "react/jsx-runtime";
-import { IconChevronRight as S } from "@tabler/icons-react";
-import { useState as C, useId as E } from "react";
-import { DIAL_KIT_ICON_STROKE as j } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as L } from "../../../constants/icon.js";
-import { resolveAccessibleName as T } from "../../../utils/accessible-name.js";
-import { mergeClasses as r } from "../../../utils/merge-classes.js";
-import { DIAL_KIT_CLASS as k } from "../../../constants/public-class-names.js";
-const Z = ({
-  title: p,
-  description: s,
-  children: h,
-  expanded: c,
-  defaultExpanded: y = !1,
-  disabled: n,
-  nonCollapsible: o,
-  ariaLabel: I,
-  onToggle: v,
-  className: g,
-  headerClassName: l,
-  contentClassName: N
+import { jsx as e, jsxs as s, Fragment as j } from "react/jsx-runtime";
+import { IconChevronRight as T } from "@tabler/icons-react";
+import { useState as k, useId as D } from "react";
+import { DIAL_KIT_ICON_STROKE as K } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as O } from "../../../constants/icon.js";
+import { resolveAccessibleName as R } from "../../../utils/accessible-name.js";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as $ } from "../../../constants/public-class-names.js";
+import { AccordionCaretPosition as y } from "../../../types/accordion.js";
+const J = ({
+  title: g,
+  description: c,
+  children: I,
+  expanded: l,
+  defaultExpanded: N = !1,
+  disabled: o,
+  nonCollapsible: n,
+  ariaLabel: w,
+  onToggle: b,
+  caretPosition: A = y.End,
+  className: C,
+  headerClassName: d,
+  contentClassName: S
 }) => {
-  const d = c !== void 0, [b, w] = C(y), t = o ? !0 : d ? c : b, m = E(), i = `accordion-header-${m}`, x = `accordion-content-${m}`, _ = () => {
-    if (n) return;
-    const u = !t;
-    d || w(u), v?.(u);
-  }, f = /* @__PURE__ */ a(A, { children: [
-    /* @__PURE__ */ a("span", { className: "flex min-w-0 flex-col", children: [
-      /* @__PURE__ */ e("span", { className: "truncate dial-body-text text-primary", children: p }),
-      s ? /* @__PURE__ */ e("span", { className: "truncate dial-tiny-text text-secondary", children: s }) : null
+  const m = l !== void 0, [_, E] = k(N), r = n ? !0 : m ? l : _, f = D(), i = `accordion-header-${f}`, u = `accordion-content-${f}`, L = () => {
+    if (o) return;
+    const v = !r;
+    m || E(v), b?.(v);
+  }, a = A === y.Start, p = n ? null : /* @__PURE__ */ e(
+    T,
+    {
+      size: O.SM,
+      stroke: K,
+      "aria-hidden": "true",
+      className: t(
+        "shrink-0 text-secondary transition-transform motion-reduce:transition-none",
+        r ? "rotate-90" : "rtl:rotate-180"
+      )
+    }
+  ), x = /* @__PURE__ */ s(j, { children: [
+    a && p,
+    /* @__PURE__ */ s("span", { className: "flex min-w-0 flex-col", children: [
+      /* @__PURE__ */ e("span", { className: "truncate dial-body-text text-primary", children: g }),
+      c ? /* @__PURE__ */ e("span", { className: "truncate dial-tiny-text text-secondary", children: c }) : null
     ] }),
-    !o && // Caret at the leading edge; it turns a quarter turn to point down when open.
-    /* @__PURE__ */ e(
-      S,
-      {
-        size: L.SM,
-        stroke: j,
-        "aria-hidden": "true",
-        className: r(
-          "shrink-0 text-secondary transition-transform motion-reduce:transition-none",
-          t && "rotate-90"
-        )
-      }
-    )
-  ] });
-  return /* @__PURE__ */ a(
+    !a && p
+  ] }), h = a ? "justify-start gap-2" : "justify-between";
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: r(
-        "flex flex-col gap-3 py-3 overflow-hidden bg-transparent ",
-        g,
-        k.accordion
+      className: t(
+        "flex flex-col py-3 overflow-hidden bg-transparent",
+        C,
+        $.accordion
       ),
       children: [
-        o ? /* @__PURE__ */ e(
+        n ? /* @__PURE__ */ e(
           "div",
           {
             id: i,
-            className: r(
-              "flex w-full px-4 rounded-xl items-center justify-between dial-tiny-text",
-              l
+            className: t(
+              "flex w-full px-4 rounded-xl items-center dial-tiny-text",
+              h,
+              d
             ),
-            children: f
+            children: x
           }
         ) : /* @__PURE__ */ e(
           "button",
           {
             id: i,
             type: "button",
-            "aria-expanded": t,
-            "aria-controls": t ? x : void 0,
-            "aria-label": T(I),
-            disabled: n,
-            onClick: _,
-            className: r(
-              "flex w-full px-4 rounded-xl items-center justify-between dial-tiny-text",
-              n ? "cursor-not-allowed opacity-75" : (
+            "aria-expanded": r,
+            "aria-controls": u,
+            "aria-label": R(w),
+            disabled: o,
+            onClick: L,
+            className: t(
+              "flex w-full px-4 rounded-xl items-center dial-tiny-text",
+              h,
+              o ? "cursor-not-allowed opacity-75" : (
                 // Applied only to a header that can actually be operated.
                 "cursor-pointer hover:bg-control-accent-alpha-hover focus-visible:outline focus-visible:outline-focus"
               ),
-              l
+              d
             ),
-            children: f
+            children: x
           }
         ),
-        t && /* @__PURE__ */ e(
+        /* @__PURE__ */ e(
           "div",
           {
-            id: x,
-            role: "region",
-            "aria-labelledby": i,
-            className: r(
-              "px-4 dial-small-text text-primary",
-              N
+            inert: !r,
+            className: t(
+              "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+              r ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
-            children: h
+            children: /* @__PURE__ */ e("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ e("div", { className: "pt-3", children: /* @__PURE__ */ e(
+              "div",
+              {
+                id: u,
+                role: "region",
+                "aria-labelledby": i,
+                className: t(
+                  "px-4 dial-small-text text-primary",
+                  S
+                ),
+                children: I
+              }
+            ) }) })
           }
         )
       ]
@@ -101,5 +115,5 @@ const Z = ({
   );
 };
 export {
-  Z as Accordion
+  J as Accordion
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.20",
-  "generatedAt": "2026-09-25T19:21:54.761Z",
+  "version": "0.15.0-dev.22",
+  "generatedAt": "2026-09-28T06:50:57.410Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -2276,7 +2276,7 @@
       "name": "Accordion",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\nDesign system 2.0\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a caret that rotates when\nexpanded, a title, and an optional description stacked beneath it.\n\nThe revealed content is a labelled `region`, so assistive tech announces it by the\nheader it belongs to. `nonCollapsible` renders the header as static text instead of\na permanently disabled button, which keeps a decorative panel out of the tab order.",
+      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\nDesign system 2.0\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a caret that rotates when\nexpanded, a title, and an optional description stacked beneath it.\n\nThe revealed content is a labelled `region`, so assistive tech announces it by the\nheader it belongs to. It stays mounted while collapsed so it can slide open and shut,\nand is `inert` then, out of both the tab order and the accessibility tree. `nonCollapsible` renders the header as static text instead of\na permanently disabled button, which keeps a decorative panel out of the tab order.",
       "props": [
         {
           "name": "title",
@@ -2333,6 +2333,13 @@
           "required": false,
           "description": "Fired when the header is clicked. Receives the next expanded state."
         },
+        {
+          "name": "caretPosition",
+          "type": "AccordionCaretPosition",
+          "required": false,
+          "defaultValue": "AccordionCaretPosition.End",
+          "description": "Where the header draws its caret: before or after the title."
+        },
         {
           "name": "className",
           "type": "string",
@@ -10931,6 +10938,24 @@
       ],
       "sourceFile": "components/New/Textarea/Textarea.tsx"
     },
+    {
+      "name": "AccordionCaretPosition",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Start",
+          "value": "'start'",
+          "comment": "Before the title, at the header's leading edge."
+        },
+        {
+          "name": "End",
+          "value": "'end'",
+          "comment": "After the title, at the header's trailing edge."
+        }
+      ],
+      "sourceFile": "types/accordion.ts",
+      "description": "Where an `Accordion` header draws its caret."
+    },
     {
       "name": "RadioGroupItem",
       "kind": "interface",