@epam/ai-dial-ui-kit 0.15.0-dev.35 → 0.15.0-dev.36

package/dist/CHANGELOG.md

@@ -47,6 +47,8 @@ Versions match the git tags on the `development` branch.
 
 - **`SideDrawer` (2.0)** — a full-height panel that slides in from the inline end over a dimmed page, moved into the kit from ai-dial-chat, where the catalog's `DetailsPanel` and `StandalonePublishPanel` each carried a near-identical copy with its own backdrop, transform transition, `inert` handling and hand-written Tab trap. Neither `Popup` (a centred modal) nor `CollapsibleSidebar` (an inline rail) covered it. It is built on the same Floating UI pieces as `Popup`: a scroll-locking `FloatingOverlay` on `z-popup`, a `FloatingFocusManager` that moves focus to the panel on open and returns it on close, and `useDismiss` for Escape and a press on the backdrop (unless `closeOnOutsideClick` is false), all calling `onClose` while `open` stays the caller's. Unlike `Popup` the panel stays mounted while closed, so it slides out as well as in and keeps the state of what it holds; closed, it is `inert`, the focus manager and scroll lock are off, and the backdrop lets pointer events through. On desktop it is 540px wide with a rounded, bordered leading edge; on mobile it takes the full width; it slides from the end in either writing direction over 300ms, and not at all under `prefers-reduced-motion`. The header follows `Popup`: `onBack` (with `backDisabled`), the title — a string `header` renders an `<h2>` that names the dialog, a node needs `ariaLabel` — then `headerActions` and the close button, which `closeDisabled` disables and `hideClose` leaves out. The panel carries `dial-kit-side-drawer` (`DIAL_KIT_CLASS.sideDrawer`).
 
+- **`BottomSheet` and `SideDrawer` (2.0) — `style` and `overlayStyle`, and `headerClassName` on `BottomSheet`** — both render in a portal at the end of `<body>`, so custom properties a caller sets on its own wrapper never reached the panel, its header or the backdrop, and `className` can carry a class but not a runtime value. A host theming the sheet through `var(--…)` — a panel background, a title colour, a divider, a backdrop tint — had no way to deliver the values. `style` is an inline style on the panel and `overlayStyle` one on the backdrop, merged after its own positioning; `headerClassName` reaches `BottomSheet`'s header row, which `SideDrawer` already exposed. All additive; nothing renders differently without them. Requested in [ai-dial-chat](https://github.com/epam/ai-dial-chat), whose bottom sheets and side panels theme their surfaces through public colour props.
+
 ### Fixed
 
 - **`Button` and `IconButton` (2.0) — a disabled button's tooltip opens** — `tooltipProps` wraps the button in `<Tooltip asChild>`, but a natively `disabled` button receives no pointer or focus events, so its tooltip could never open. That is exactly the state where a "why is this unavailable" hint matters, and callers worked around it with their own `<span>` wrapper, which no keyboard user could reach either. A disabled button that has a visible tooltip is now marked `aria-disabled="true"` instead of `disabled`: it stays in the tab order and answers hover and focus, so the tooltip opens for mouse and keyboard users alike, and it is still announced as unavailable. Its click is swallowed with `preventDefault`, so neither `onClick` nor a `type="submit"` form submission fires. Without a tooltip, or while `hideTooltip` is set, the button stays natively disabled as before. The disabled look is unchanged, since every 2.0 variant already styles `[aria-disabled="true"]`; the two ghost icon-button rules that styled only `:disabled` now style both. Requested in [ai-dial-chat](https://github.com/epam/ai-dial-chat), where the chat-settings dialog explains why "Apply changes" is disabled.

package/dist/components/New/BottomSheet/BottomSheet.js

@@ -1,19 +1,19 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useFloating as C, useRole as L, useDismiss as _, useInteractions as k, FloatingPortal as A, FloatingOverlay as O, FloatingFocusManager as w } from "@floating-ui/react";
-import { IconArrowLeft as z } from "@tabler/icons-react";
-import { useId as D } from "react";
-import { CloseButton as T } from "../CloseButton/CloseButton.js";
-import { DIAL_KIT_ICON_STROKE as j } from "../constants/icon.js";
-import { GhostIconButton as B } from "../IconButton/IconButtonWrappers.js";
-import { useThemeScope as E } from "../ThemeScope/ThemeScope.js";
-import { DIAL_ICON_SIZE as K } from "../../../constants/icon.js";
-import { DIAL_KIT_CLASS as P } from "../../../constants/public-class-names.js";
-import { ElementSize as G } from "../../../types/size.js";
-import { mergeClasses as t } from "../../../utils/merge-classes.js";
-const Y = ({
+import { useFloating as k, useRole as A, useDismiss as O, useInteractions as w, FloatingPortal as z, FloatingOverlay as D, FloatingFocusManager as T } from "@floating-ui/react";
+import { IconArrowLeft as j } from "@tabler/icons-react";
+import { useId as B } from "react";
+import { CloseButton as E } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as K } from "../constants/icon.js";
+import { GhostIconButton as P } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as G } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as R } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as M } from "../../../constants/public-class-names.js";
+import { ElementSize as U } from "../../../types/size.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+const te = ({
   open: i,
   onClose: a,
-  title: o,
+  title: t,
   ariaLabel: c,
   onBack: s,
   backAriaLabel: d = "Back",
@@ -22,84 +22,98 @@ const Y = ({
   children: p,
   className: h,
   overlayClassName: b,
-  bodyClassName: g,
-  titleClassName: x,
-  portalId: I
+  headerClassName: g,
+  style: x,
+  overlayStyle: I,
+  bodyClassName: S,
+  titleClassName: N,
+  portalId: v
 }) => {
-  const S = E(), l = `bottom-sheet-title-${D()}`, { refs: n, context: r } = C({
+  const y = G(), l = `bottom-sheet-title-${B()}`, { refs: n, context: r } = k({
     open: i,
-    onOpenChange: (F) => {
-      F || a();
+    onOpenChange: (_) => {
+      _ || a();
     }
-  }), N = L(r, { role: "dialog" }), v = _(r, { outsidePress: f }), { getFloatingProps: y } = k([N, v]);
-  return i ? /* @__PURE__ */ e(A, { id: I, children: /* @__PURE__ */ e(
-    O,
+  }), F = A(r, { role: "dialog" }), C = O(r, { outsidePress: f }), { getFloatingProps: L } = w([F, C]);
+  return i ? /* @__PURE__ */ e(z, { id: v, children: /* @__PURE__ */ e(
+    D,
     {
       lockScroll: !0,
-      className: t(
+      style: I,
+      className: o(
         "z-popup flex items-end bg-backdrop",
-        S,
+        y,
         b
       ),
-      children: /* @__PURE__ */ e(w, { context: r, initialFocus: n.floating, children: /* @__PURE__ */ m(
+      children: /* @__PURE__ */ e(T, { context: r, initialFocus: n.floating, children: /* @__PURE__ */ m(
         "div",
         {
           ref: n.setFloating,
-          ...y(),
+          ...L(),
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": o ? l : void 0,
-          "aria-label": o ? void 0 : c,
-          className: t(
+          "aria-labelledby": t ? l : void 0,
+          "aria-label": t ? void 0 : c,
+          style: x,
+          className: o(
             "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-none",
             "animate-slideUp motion-reduce:animate-none",
             h,
-            P.bottomSheet
+            M.bottomSheet
           ),
           children: [
-            o && /* @__PURE__ */ m("div", { className: "relative flex h-[60px] shrink-0 items-center justify-center border-b border-tertiary px-14", children: [
-              s && /* @__PURE__ */ e(
-                B,
-                {
-                  "aria-label": d,
-                  className: "absolute start-4",
-                  onClick: s,
-                  icon: /* @__PURE__ */ e(
-                    z,
+            t && /* @__PURE__ */ m(
+              "div",
+              {
+                className: o(
+                  "relative flex h-[60px] shrink-0 items-center justify-center border-b border-tertiary px-14",
+                  g
+                ),
+                children: [
+                  s && /* @__PURE__ */ e(
+                    P,
                     {
-                      size: K.LG,
-                      stroke: j,
-                      className: "rtl:-scale-x-100",
-                      "aria-hidden": "true"
+                      "aria-label": d,
+                      className: "absolute start-4",
+                      onClick: s,
+                      icon: /* @__PURE__ */ e(
+                        j,
+                        {
+                          size: R.LG,
+                          stroke: K,
+                          className: "rtl:-scale-x-100",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "h2",
+                    {
+                      id: l,
+                      className: o(
+                        "min-w-0 truncate text-primary",
+                        N ?? "dial-body-semi-text"
+                      ),
+                      children: t
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ e(
-                "h2",
-                {
-                  id: l,
-                  className: t(
-                    "min-w-0 truncate text-primary",
-                    x ?? "dial-body-semi-text"
                   ),
-                  children: o
-                }
-              ),
-              /* @__PURE__ */ e(
-                T,
-                {
-                  ariaLabel: u,
-                  onClose: a,
-                  size: G.Standard,
-                  className: "absolute end-4"
-                }
-              )
-            ] }),
+                  /* @__PURE__ */ e(
+                    E,
+                    {
+                      ariaLabel: u,
+                      onClose: a,
+                      size: U.Standard,
+                      className: "absolute end-4"
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ e(
               "div",
               {
-                className: t("min-h-0 overflow-y-auto", g),
+                className: o("min-h-0 overflow-y-auto", S),
                 children: p
               }
             )
@@ -110,5 +124,5 @@ const Y = ({
   ) }) : null;
 };
 export {
-  Y as BottomSheet
+  te as BottomSheet
 };

package/dist/components/New/SideDrawer/SideDrawer.js

@@ -1,16 +1,16 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useFloating as O, useRole as z, useDismiss as A, useInteractions as E, FloatingPortal as K, FloatingOverlay as P, FloatingFocusManager as j } from "@floating-ui/react";
-import { IconChevronLeft as M } from "@tabler/icons-react";
-import { useId as R } from "react";
-import { CloseButton as B } from "../CloseButton/CloseButton.js";
-import { DIAL_KIT_ICON_STROKE as G } from "../constants/icon.js";
-import { GhostIconButton as H } from "../IconButton/IconButtonWrappers.js";
-import { useThemeScope as Z } from "../ThemeScope/ThemeScope.js";
-import { DIAL_ICON_SIZE as $ } from "../../../constants/icon.js";
-import { DIAL_KIT_CLASS as q } from "../../../constants/public-class-names.js";
-import { ElementSize as J } from "../../../types/size.js";
+import { useFloating as A, useRole as E, useDismiss as K, useInteractions as P, FloatingPortal as j, FloatingOverlay as M, FloatingFocusManager as R } from "@floating-ui/react";
+import { IconChevronLeft as B } from "@tabler/icons-react";
+import { useId as G } from "react";
+import { CloseButton as H } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as Z } from "../constants/icon.js";
+import { GhostIconButton as $ } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as q } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as J } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as Q } from "../../../constants/public-class-names.js";
+import { ElementSize as U } from "../../../types/size.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
-const ae = ({
+const ne = ({
   open: t,
   onClose: l,
   header: o,
@@ -27,28 +27,31 @@ const ae = ({
   className: I,
   overlayClassName: v,
   headerClassName: S,
-  bodyClassName: w,
-  titleClassName: N,
-  portalId: k
+  style: w,
+  overlayStyle: N,
+  bodyClassName: k,
+  titleClassName: F,
+  portalId: C
 }) => {
-  const F = Z(), d = `side-drawer-title-${R()}`, s = typeof o == "string", { refs: m, context: a } = O({
+  const D = q(), d = `side-drawer-title-${G()}`, s = typeof o == "string", { refs: m, context: a } = A({
     open: t,
-    onOpenChange: (T) => {
-      T || l();
+    onOpenChange: (z) => {
+      z || l();
     }
-  }), C = z(a, { role: "dialog" }), D = A(a, { outsidePress: h }), { getFloatingProps: _ } = E([C, D]), L = o != null || i != null || !n;
-  return /* @__PURE__ */ e(K, { id: k, children: /* @__PURE__ */ e(
-    P,
+  }), _ = E(a, { role: "dialog" }), L = K(a, { outsidePress: h }), { getFloatingProps: T } = P([_, L]), O = o != null || i != null || !n;
+  return /* @__PURE__ */ e(j, { id: C, children: /* @__PURE__ */ e(
+    M,
     {
       lockScroll: t,
+      style: N,
       className: r(
         "z-popup bg-backdrop transition-opacity duration-300 motion-reduce:transition-none",
         t ? "opacity-100" : "pointer-events-none opacity-0",
-        F,
+        D,
         v
       ),
       children: /* @__PURE__ */ e(
-        j,
+        R,
         {
           context: a,
           disabled: !t,
@@ -57,22 +60,23 @@ const ae = ({
             "div",
             {
               ref: m.setFloating,
-              ..._(),
+              ...T(),
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": s ? d : void 0,
               "aria-label": s ? void 0 : f,
               inert: !t,
+              style: w,
               className: r(
                 "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-none",
                 "desktop:w-[540px] desktop:rounded-s-xl desktop:border-s desktop:border-secondary",
                 "transition-transform duration-300 motion-reduce:transition-none",
                 t ? "translate-x-0" : "translate-x-full rtl:-translate-x-full",
                 I,
-                q.sideDrawer
+                Q.sideDrawer
               ),
               children: [
-                L && /* @__PURE__ */ c(
+                O && /* @__PURE__ */ c(
                   "div",
                   {
                     className: r(
@@ -81,16 +85,16 @@ const ae = ({
                     ),
                     children: [
                       i && /* @__PURE__ */ e(
-                        H,
+                        $,
                         {
                           "aria-label": u,
                           disabled: x,
                           onClick: i,
                           icon: /* @__PURE__ */ e(
-                            M,
+                            B,
                             {
-                              size: $.MD,
-                              stroke: G,
+                              size: J.MD,
+                              stroke: Z,
                               className: "rtl:-scale-x-100",
                               "aria-hidden": "true"
                             }
@@ -103,19 +107,19 @@ const ae = ({
                           id: d,
                           className: r(
                             "min-w-0 flex-1 truncate text-primary",
-                            N ?? "dial-h2-text"
+                            F ?? "dial-h2-text"
                           ),
                           children: o
                         }
                       ) : /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: o }),
                       p,
                       !n && /* @__PURE__ */ e(
-                        B,
+                        H,
                         {
                           ariaLabel: g,
                           onClose: l,
                           disabled: b,
-                          size: J.Standard
+                          size: U.Standard
                         }
                       )
                     ]
@@ -126,7 +130,7 @@ const ae = ({
                   {
                     className: r(
                       "min-h-0 flex-1 overflow-y-auto",
-                      w
+                      k
                     ),
                     children: y
                   }
@@ -140,5 +144,5 @@ const ae = ({
   ) });
 };
 export {
-  ae as SideDrawer
+  ne as SideDrawer
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.35",
-  "generatedAt": "2026-09-30T21:21:02.534Z",
+  "version": "0.15.0-dev.36",
+  "generatedAt": "2026-10-01T09:56:10.153Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -3533,6 +3533,24 @@
           "required": false,
           "description": "Additional CSS classes for the backdrop"
         },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the header row"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the panel, e.g. custom properties"
+        },
+        {
+          "name": "overlayStyle",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the backdrop"
+        },
         {
           "name": "bodyClassName",
           "type": "string",
@@ -3778,6 +3796,18 @@
           "required": false,
           "description": "Additional CSS classes for the header row"
         },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the panel, e.g. custom properties"
+        },
+        {
+          "name": "overlayStyle",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline style for the backdrop"
+        },
         {
           "name": "bodyClassName",
           "type": "string",