@epam/ai-dial-ui-kit 0.16.0-dev.39 → 0.16.0-dev.41

package/dist/components/New/FormSection/FormSection.js

@@ -0,0 +1,87 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useId as y } from "react";
+import { mergeClasses as e } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as S } from "../../../constants/public-class-names.js";
+import { FormSectionVariant as i } from "../../../types/form-section.js";
+const N = {
+  [i.Row]: {
+    header: "gap-2",
+    title: "dial-small-semi-text",
+    description: "dial-small-text"
+  },
+  [i.Caption]: {
+    header: "gap-4",
+    title: "dial-caption-lead-semi-text",
+    description: "dial-tiny-text"
+  },
+  [i.Setting]: {
+    header: "gap-4",
+    title: "dial-tiny-semi-text",
+    description: "dial-tiny-text"
+  }
+}, b = ({
+  title: d,
+  action: l,
+  description: s,
+  variant: m = i.Row,
+  headingLevel: c = 3,
+  children: r,
+  className: p,
+  titleClassName: x,
+  descriptionClassName: h,
+  contentClassName: f
+}) => {
+  const n = y(), a = N[m], g = `h${c}`;
+  return /* @__PURE__ */ o(
+    "section",
+    {
+      "aria-labelledby": n,
+      className: e(
+        "flex flex-col gap-3",
+        p,
+        S.formSection
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: e(
+              "flex items-center justify-between",
+              a.header
+            ),
+            children: [
+              /* @__PURE__ */ t(
+                g,
+                {
+                  id: n,
+                  className: e(
+                    "min-w-0 text-primary",
+                    a.title,
+                    x
+                  ),
+                  children: d
+                }
+              ),
+              l != null && /* @__PURE__ */ t("div", { className: "shrink-0", children: l })
+            ]
+          }
+        ),
+        s != null && /* @__PURE__ */ t(
+          "p",
+          {
+            className: e(
+              "text-secondary",
+              a.description,
+              h
+            ),
+            children: s
+          }
+        ),
+        r != null && /* @__PURE__ */ t("div", { className: e("relative", f), children: r })
+      ]
+    }
+  );
+};
+export {
+  b as FormSection
+};

package/dist/components/New/Tabs/Tabs.js

@@ -1,49 +1,55 @@
-import { jsx as s, jsxs as I } from "react/jsx-runtime";
-import { useRef as j, useId as R, useCallback as _ } from "react";
-import { mergeClasses as l } from "../../../utils/merge-classes.js";
+import { jsx as t, jsxs as I, Fragment as O } from "react/jsx-runtime";
+import { IconExclamationCircle as z, IconAlertTriangle as H } from "@tabler/icons-react";
+import { useRef as R, useId as V, useCallback as j } from "react";
+import { mergeClasses as n } from "../../../utils/merge-classes.js";
 import { DIAL_KIT_CLASS as a } from "../../../constants/public-class-names.js";
-import { TabOrientation as u } from "../../../types/tab.js";
-const z = {
-  [u.Horizontal]: { next: "ArrowRight", previous: "ArrowLeft" },
-  [u.Vertical]: { next: "ArrowDown", previous: "ArrowUp" }
-}, M = ({
-  tabs: n,
+import { DIAL_ICON_SIZE as E } from "../../../constants/icon.js";
+import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
+import { TabOrientation as m, TabStatus as x } from "../../../types/tab.js";
+const M = {
+  [x.Error]: "Error",
+  [x.Warning]: "Warning"
+}, U = {
+  [m.Horizontal]: { next: "ArrowRight", previous: "ArrowLeft" },
+  [m.Vertical]: { next: "ArrowDown", previous: "ArrowUp" }
+}, P = ({
+  tabs: s,
   activeTabId: c,
   onTabChange: f,
-  orientation: m = u.Horizontal,
+  orientation: h = m.Horizontal,
   sectionLabel: d,
-  ariaLabel: k,
+  ariaLabel: A,
   className: v,
   tabListClassName: D,
-  tabClassName: S,
-  sectionLabelClassName: H
+  tabClassName: L,
+  sectionLabelClassName: T
 }) => {
-  const w = j({}), A = R(), i = m === u.Vertical, h = n.find((e) => e.id === c), K = h && !h.disabled ? h.id : n.find((e) => !e.disabled)?.id, V = _(
+  const N = R({}), S = V(), i = h === m.Vertical, y = s.find((e) => e.id === c), K = y && !y.disabled ? y.id : s.find((e) => !e.disabled)?.id, C = j(
     (e) => {
-      const { next: t, previous: r } = z[m];
-      if (![t, r, "Home", "End"].includes(e.key) || n.length === 0)
+      const { next: r, previous: l } = U[h];
+      if (![r, l, "Home", "End"].includes(e.key) || s.length === 0)
         return;
-      const o = n.filter((g) => !g.disabled);
+      const o = s.filter((k) => !k.disabled);
       if (o.length === 0) return;
-      const p = Math.max(
-        o.findIndex((g) => g.id === c),
+      const u = Math.max(
+        o.findIndex((k) => k.id === c),
         0
       ), b = o.length - 1;
-      let x = p;
-      e.key === t ? x = p === b ? 0 : p + 1 : e.key === r ? x = p === 0 ? b : p - 1 : e.key === "Home" ? x = 0 : x = b, e.preventDefault();
-      const y = o[x];
-      w.current[y.id]?.focus(), y.id !== c && f(y.id);
+      let p = u;
+      e.key === r ? p = u === b ? 0 : u + 1 : e.key === l ? p = u === 0 ? b : u - 1 : e.key === "Home" ? p = 0 : p = b, e.preventDefault();
+      const g = o[p];
+      N.current[g.id]?.focus(), g.id !== c && f(g.id);
     },
-    [n, c, f, m]
-  ), N = /* @__PURE__ */ s(
+    [s, c, f, h]
+  ), w = /* @__PURE__ */ t(
     "div",
     {
       role: "tablist",
       "aria-orientation": i ? "vertical" : void 0,
-      "aria-label": k,
-      "aria-labelledby": !k && d ? A : void 0,
-      onKeyDown: V,
-      className: l(
+      "aria-label": A,
+      "aria-labelledby": !A && d ? S : void 0,
+      onKeyDown: C,
+      className: n(
         i ? "flex flex-col gap-1 px-2" : "flex justify-start gap-1",
         // Without a heading the list is the root, so it takes the caller's
         // classes — and the root kit class below — itself.
@@ -52,62 +58,89 @@ const z = {
         a.tabList,
         !d && a.tabs
       ),
-      children: n.map((e) => {
-        const t = c === e.id, r = !!e.disabled;
+      children: s.map((e) => {
+        const r = c === e.id, l = !!e.disabled;
         return /* @__PURE__ */ I(
           "button",
           {
             ref: (o) => {
-              w.current[e.id] = o;
+              N.current[e.id] = o;
             },
             type: "button",
             role: "tab",
-            "aria-selected": t,
-            disabled: r,
+            "aria-selected": r,
+            disabled: l,
             tabIndex: e.id === K ? 0 : -1,
             onClick: () => f(e.id),
-            className: l(
+            className: n(
               "dial-kit-enhanced-target flex items-center gap-2 text-start",
               "transition-colors motion-reduce:transition-none",
               "focus-visible:outline focus-visible:outline-focus",
               i ? [
                 "h-11 w-full rounded-lg px-3 desktop:h-10",
                 "focus-visible:-outline-offset-1",
-                t ? "dial-small-semi-text" : "dial-small-text text-secondary"
+                r ? "dial-small-semi-text" : "dial-small-text text-secondary"
               ] : [
                 "dial-small-paragraph-semi-text border-b-2 border-transparent px-3 py-2",
                 "focus-visible:outline-offset-2"
               ],
-              r && (i ? "cursor-not-allowed text-control-disable-primary" : "cursor-not-allowed border-control-disable-primary text-control-disable-primary"),
-              !r && (i ? t ? "bg-control-accent-alpha text-accent hover:bg-control-accent-alpha-hover" : "hover:bg-control-accent-alpha-hover" : t ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
-              S,
+              l && (i ? "cursor-not-allowed text-control-disable-primary" : "cursor-not-allowed border-control-disable-primary text-control-disable-primary"),
+              !l && (i ? r ? "bg-control-accent-alpha text-accent hover:bg-control-accent-alpha-hover" : "hover:bg-control-accent-alpha-hover" : r ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
+              L,
               a.tab,
-              t && a.tabSelected
+              r && a.tabSelected
             ),
             children: [
               e.icon && // The label names the tab, so the icon beside it is decorative —
               // and a Tabler icon is a bare `<svg>` that would otherwise be
               // announced as an unnamed graphic.
-              /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "flex shrink-0", children: e.icon }),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "flex shrink-0", children: e.icon }),
+              /* @__PURE__ */ t(
                 "span",
                 {
-                  className: l(
-                    i && !t && !r && "text-primary"
+                  className: n(
+                    i && !r && !l && "text-primary"
                   ),
                   children: e.label
                 }
               ),
-              e.count != null && /* @__PURE__ */ s(
+              e.status && /* @__PURE__ */ I(O, { children: [
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: n(
+                      "flex shrink-0",
+                      e.status === x.Error ? "text-error" : "text-warning",
+                      i && e.count == null && "ms-auto"
+                    ),
+                    children: e.status === x.Error ? /* @__PURE__ */ t(
+                      z,
+                      {
+                        size: E.SM,
+                        stroke: _
+                      }
+                    ) : /* @__PURE__ */ t(
+                      H,
+                      {
+                        size: E.SM,
+                        stroke: _
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ t("span", { className: "sr-only", children: e.statusLabel ?? M[e.status] })
+              ] }),
+              e.count != null && /* @__PURE__ */ t(
                 "span",
                 {
-                  className: l(
+                  className: n(
                     "dial-tiny-semi-text rounded-full px-1.5 py-0.5",
                     // In a rail the badge belongs at the far end of the row, not
                     // hanging off the label.
                     i && "ms-auto",
-                    r && "bg-layer-sunken text-control-disable-primary",
-                    !r && (t ? "bg-control-accent-alpha text-accent" : "bg-layer-sunken text-secondary")
+                    l && "bg-layer-sunken text-control-disable-primary",
+                    !l && (r ? "bg-control-accent-alpha text-accent" : "bg-layer-sunken text-secondary")
                   ),
                   children: e.count
                 }
@@ -122,26 +155,26 @@ const z = {
   return d ? /* @__PURE__ */ I(
     "div",
     {
-      className: l(
+      className: n(
         "flex flex-col gap-3",
         v,
         a.tabs
       ),
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ t(
           "div",
           {
-            className: l(
+            className: n(
               "flex h-16 shrink-0 items-center",
               i ? "px-4" : "px-3"
             ),
-            children: /* @__PURE__ */ s(
+            children: /* @__PURE__ */ t(
               "span",
               {
-                id: A,
-                className: l(
+                id: S,
+                className: n(
                   "dial-h1-text text-primary",
-                  H,
+                  T,
                   a.tabsSectionLabel
                 ),
                 children: d
@@ -149,11 +182,11 @@ const z = {
             )
           }
         ),
-        N
+        w
       ]
     }
-  ) : N;
+  ) : w;
 };
 export {
-  M as Tabs
+  P as Tabs
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.39",
-  "generatedAt": "2026-10-23T16:09:19.048Z",
+  "version": "0.16.0-dev.41",
+  "generatedAt": "2026-10-24T18:43:00.141Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -3093,7 +3093,7 @@
       "name": "Tabs",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A row or rail of tabs, marking the active one and showing optional icons and count badges.\naliases: TabRow|TabNavigation|TabBar|VerticalTabs|SettingsNav|SideNav\nDesign system 2.0\n\nFollows the ARIA tabs pattern with automatic activation: only the active tab is\nin the tab order, and the arrow keys move both focus and selection. `Home` and\n`End` jump to the first and last tab, and the arrows wrap around the ends.\nTabs marked `disabled` are greyed out, cannot be clicked, and are skipped by\nkeyboard navigation.\n\n`TabOrientation.Horizontal` draws the default row: the active tab takes a\ngradient underline, and `ArrowLeft` / `ArrowRight` move along it.\n`TabOrientation.Vertical` draws the settings-page rail instead — full-width\nrows with the active one on a tinted pill rather than an underline, driven by\n`ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs\nlabel whole pages of a settings surface; the row, when they filter one.\n\n`className` lands on whichever element is outermost: the heading wrapper when\n`sectionLabel` is set, the `role=\"tablist\"` itself when it is not.\n\nThe component renders the tabs only; the panels stay with the consumer.",
+      "description": "A row or rail of tabs, marking the active one and showing optional icons and count badges.\naliases: TabRow|TabNavigation|TabBar|VerticalTabs|SettingsNav|SideNav\nDesign system 2.0\n\nFollows the ARIA tabs pattern with automatic activation: only the active tab is\nin the tab order, and the arrow keys move both focus and selection. `Home` and\n`End` jump to the first and last tab, and the arrows wrap around the ends.\nTabs marked `disabled` are greyed out, cannot be clicked, and are skipped by\nkeyboard navigation.\n\n`TabOrientation.Horizontal` draws the default row: the active tab takes a\ngradient underline, and `ArrowLeft` / `ArrowRight` move along it.\n`TabOrientation.Vertical` draws the settings-page rail instead — full-width\nrows with the active one on a tinted pill rather than an underline, driven by\n`ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs\nlabel whole pages of a settings surface; the row, when they filter one.\n\nA tab with a `status` (`TabStatus.Error` or `TabStatus.Warning`) draws a\ncoloured icon after its label, and the status text joins the tab's accessible\nname so the state reaches assistive tech as well as sighted users.\n\n`className` lands on whichever element is outermost: the heading wrapper when\n`sectionLabel` is set, the `role=\"tablist\"` itself when it is not.\n\nThe component renders the tabs only; the panels stay with the consumer.",
       "props": [
         {
           "name": "tabs",
@@ -5283,6 +5283,80 @@
       ],
       "sourceFile": "components/New/StateScreen/StateScreen.tsx"
     },
+    {
+      "name": "FormSection",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A titled section of a form or a builder column: a heading with an optional\naction at its end, an optional description and the section's content.\naliases: SectionRow|FieldSection|SettingsSection|FormGroup|SectionHeader\nDesign system 2.0\n\nThe root is a `section` named by its heading, so each section is a region a\nscreen reader can jump to. `headingLevel` picks the heading element so the\nsection fits the outline of the page it is mounted in; the variant only sets\nthe type scale. The action sits at the inline end of the heading row and\nnever shrinks; the content is rendered as given, with no field styling of its\nown. For a collapsible group, use `Accordion`; for a single labelled control,\nthe control's own `label`.",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Heading of the section; also names the `section` landmark."
+        },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Control at the end of the heading row."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional line under the heading."
+        },
+        {
+          "name": "variant",
+          "type": "FormSectionVariant",
+          "required": false,
+          "defaultValue": "FormSectionVariant.Row",
+          "description": "Type scale of the heading and description. Defaults to `FormSectionVariant.Row`."
+        },
+        {
+          "name": "headingLevel",
+          "type": "FormSectionHeadingLevel",
+          "required": false,
+          "defaultValue": "3",
+          "description": "Level of the heading element. Defaults to `3`."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The section's fields or values."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the container."
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the heading."
+        },
+        {
+          "name": "descriptionClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the description."
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the content wrapper."
+        }
+      ],
+      "examples": [
+        "<FormSection\n  title=\"Model\"\n  variant={FormSectionVariant.Caption}\n  action={<GhostButton label=\"Change\" onClick={openPicker} />}\n  description=\"The model that answers in this application.\"\n>\n  <SelectedEntityCard entityId={modelId} />\n</FormSection>"
+      ],
+      "sourceFile": "components/New/FormSection/FormSection.tsx"
+    },
     {
       "name": "TransferQueue",
       "category": "Components_2_0",
@@ -10074,6 +10148,22 @@
       ],
       "sourceFile": "types/tab.ts"
     },
+    {
+      "name": "TabStatus",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Error",
+          "value": "'error'"
+        },
+        {
+          "name": "Warning",
+          "value": "'warning'"
+        }
+      ],
+      "sourceFile": "types/tab.ts",
+      "description": "Validation state a tab can flag on itself, e.g. a form section with problems."
+    },
     {
       "name": "TabView",
       "kind": "enum",
@@ -11250,6 +11340,14 @@
         {
           "name": "disabled?",
           "value": "boolean"
+        },
+        {
+          "name": "status?",
+          "value": "TabStatus"
+        },
+        {
+          "name": "statusLabel?",
+          "value": "string"
         }
       ],
       "sourceFile": "components/New/Tabs/Tabs.tsx",
@@ -11586,6 +11684,35 @@
       ],
       "sourceFile": "types/tooltip.ts"
     },
+    {
+      "name": "FormSectionHeadingLevel",
+      "kind": "type",
+      "sourceFile": "components/New/FormSection/FormSection.tsx",
+      "typeBody": "2 | 3 | 4 | 5 | 6"
+    },
+    {
+      "name": "FormSectionVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Row",
+          "value": "'row'",
+          "comment": "A field of a form: small semibold heading, small description, an 8px header gap."
+        },
+        {
+          "name": "Caption",
+          "value": "'caption'",
+          "comment": "A titled group of a builder column: caption-lead heading, tiny description."
+        },
+        {
+          "name": "Setting",
+          "value": "'setting'",
+          "comment": "One setting inside a group: tiny semibold heading, tiny description."
+        }
+      ],
+      "sourceFile": "types/form-section.ts",
+      "description": "How a `FormSection` sets its heading, description and content."
+    },
     {
       "name": "TransferQueueItem",
       "kind": "interface",
@@ -11934,7 +12061,7 @@
     {
       "name": "DIAL_KIT_CLASS",
       "sourceFile": "constants/public-class-names.ts",
-      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /** The `role=\"separator\"` element of a `ResizeHandle`. */\n  resizeHandle: 'dial-kit-resize-handle',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The primary icon of a `DialDropdownIcon` trigger. */\n  dropdownIcon: 'dial-kit-dropdown-icon',\n  /**\n   * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n   * chevron sits on. Absent when `showCaret` is `false`.\n   */\n  dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\n  /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */\n  selectedEntityCard: 'dial-kit-selected-entity-card',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
+      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /** The `role=\"separator\"` element of a `ResizeHandle`. */\n  resizeHandle: 'dial-kit-resize-handle',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The primary icon of a `DialDropdownIcon` trigger. */\n  dropdownIcon: 'dial-kit-dropdown-icon',\n  /**\n   * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n   * chevron sits on. Absent when `showCaret` is `false`.\n   */\n  dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\n  /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */\n  selectedEntityCard: 'dial-kit-selected-entity-card',\n  /** The `section` root of a `FormSection`: its heading row, description and content. */\n  formSection: 'dial-kit-form-section',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
     }
   ]
 }

package/dist/constants/public-class-names.js

@@ -159,6 +159,8 @@ const i = {
   entityIdentity: "dial-kit-entity-identity",
   /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */
   selectedEntityCard: "dial-kit-selected-entity-card",
+  /** The `section` root of a `FormSection`: its heading row, description and content. */
+  formSection: "dial-kit-form-section",
   /* ── Controls ──────────────────────────────────────────────────────────── */
   /** The row of a `Switch`: the control and its label. */
   switch: "dial-kit-switch",