@epam/ai-dial-ui-kit 0.16.0-dev.61 → 0.16.0-dev.66

package/dist/components/New/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,67 @@
+import { jsxs as E, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { IconAlertTriangle as I } from "@tabler/icons-react";
+import { useState as v, useRef as A, useEffect as L, Component as S } from "react";
+import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
+import { LiveRegionPoliteness as O } from "../../../types/live-region.js";
+import { PrimaryButton as F } from "../Button/ButtonWrappers.js";
+import { LiveRegion as T } from "../LiveRegion/LiveRegion.js";
+import { StateScreen as j } from "../StateScreen/StateScreen.js";
+class x extends S {
+  state = { hasError: !1 };
+  static getDerivedStateFromError = () => ({ hasError: !0 });
+  componentDidCatch(r, o) {
+    this.props.onCatch(r, o);
+  }
+  render() {
+    return this.state.hasError ? null : this.props.children;
+  }
+}
+const N = /* @__PURE__ */ e(I, { size: D.LG, stroke: _ }), R = (t = [], r = []) => t.length !== r.length || t.some((o, i) => !Object.is(o, r[i])), K = ({
+  children: t,
+  title: r,
+  description: o,
+  actionLabel: i,
+  onReset: c,
+  resetKeys: n,
+  onError: m,
+  icon: h = N,
+  className: f
+}) => {
+  const [s, a] = v(!1), l = A(n);
+  L(() => {
+    s && R(l.current, n) && a(!1), l.current = n;
+  }, [s, n]);
+  const u = (d, C) => {
+    a(!0), m?.(d, C);
+  }, p = () => {
+    if (!c) {
+      window.location.reload();
+      return;
+    }
+    c(), a(!1);
+  };
+  return /* @__PURE__ */ E(g, { children: [
+    /* @__PURE__ */ e(T, { politeness: O.Assertive, visuallyHidden: !0, children: s && r }),
+    s ? /* @__PURE__ */ e(
+      j,
+      {
+        icon: h,
+        title: r,
+        description: o,
+        className: f,
+        action: /* @__PURE__ */ e(
+          F,
+          {
+            autoFocus: !0,
+            label: i,
+            onClick: p
+          }
+        )
+      }
+    ) : /* @__PURE__ */ e(x, { onCatch: u, children: t })
+  ] });
+};
+export {
+  K as ErrorBoundary
+};

package/dist/components/New/LoginScreen/LoginScreen.js

@@ -0,0 +1,98 @@
+import { jsxs as l, jsx as e, Fragment as u } from "react/jsx-runtime";
+import { useId as b, useState as x } from "react";
+import { mergeClasses as p } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as g } from "../../../constants/public-class-names.js";
+import { NeutralButton as h } from "../Button/ButtonWrappers.js";
+const o = ({ src: a, className: r }) => {
+  const [i, n] = x();
+  return i === a ? null : /* @__PURE__ */ e(
+    "img",
+    {
+      src: a,
+      alt: "",
+      "aria-hidden": "true",
+      className: r,
+      onError: () => n(a)
+    }
+  );
+}, I = ({
+  title: a,
+  description: r,
+  logoSrc: i,
+  providers: n = [],
+  providersLabel: m,
+  children: c,
+  titleRef: d,
+  className: f
+}) => {
+  const s = b();
+  return /* @__PURE__ */ l(
+    "section",
+    {
+      "aria-labelledby": s,
+      className: p(
+        "relative flex size-full items-center justify-center overflow-hidden bg-layer-sunken mobile:items-start mobile:bg-layer-raised mobile:px-6",
+        f,
+        g.loginScreen
+      ),
+      children: [
+        /* @__PURE__ */ l("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", children: [
+          /* @__PURE__ */ e("div", { className: "absolute -start-1/4 -bottom-1/3 size-[80vmax] rounded-full bg-radial from-gradient-2 to-transparent to-70% opacity-20 blur-3xl" }),
+          /* @__PURE__ */ e("div", { className: "absolute -end-1/4 -top-1/3 size-[80vmax] rounded-full bg-radial from-gradient-1 to-transparent to-70% opacity-20 blur-3xl" })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "relative mx-6 my-8 flex flex-col items-center gap-12 rounded-xl bg-layer-raised p-16 mobile:mx-0 mobile:mt-10 mobile:w-full mobile:rounded-none mobile:bg-transparent mobile:p-0", children: [
+          i && /* @__PURE__ */ e(
+            o,
+            {
+              src: i,
+              className: "size-8 shrink-0 object-contain"
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: "flex w-full flex-col items-center gap-8 mobile:gap-6", children: [
+            /* @__PURE__ */ e(
+              "h1",
+              {
+                id: s,
+                ref: d,
+                tabIndex: -1,
+                className: "dial-display2-text text-center text-primary",
+                children: a
+              }
+            ),
+            /* @__PURE__ */ l("div", { className: "flex w-full flex-col items-center gap-5 desktop:w-100", children: [
+              c,
+              n.length > 0 && /* @__PURE__ */ l(u, { children: [
+                r != null && /* @__PURE__ */ e("p", { className: "dial-body-text text-center text-primary", children: r }),
+                /* @__PURE__ */ e(
+                  "ul",
+                  {
+                    "aria-label": m,
+                    className: "m-0 flex w-full list-none flex-col gap-3 p-0",
+                    children: n.map((t) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+                      h,
+                      {
+                        href: t.href,
+                        label: t.label,
+                        iconBefore: t.iconSrc ? /* @__PURE__ */ e(
+                          o,
+                          {
+                            src: t.iconSrc,
+                            className: "size-5 shrink-0"
+                          }
+                        ) : void 0,
+                        className: "w-full"
+                      }
+                    ) }, t.id))
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  I as LoginScreen
+};

package/dist/components/Spinner/Spinner.js

@@ -1,26 +1,31 @@
-import { jsx as r } from "react/jsx-runtime";
-import { mergeClasses as n } from "../../utils/merge-classes.js";
+import { jsx as s } from "react/jsx-runtime";
+import { mergeClasses as l } from "../../utils/merge-classes.js";
 import { DIAL_KIT_CLASS as o } from "../../constants/public-class-names.js";
-const d = ({
+const f = ({
   size: e = 40,
-  className: s,
+  className: i,
   fullWidth: t = !1,
-  ariaLabel: i = "Loading"
-}) => /* @__PURE__ */ r(
+  fullScreen: a = !1,
+  ariaLabel: n = "Loading",
+  focusRef: r
+}) => /* @__PURE__ */ s(
   "div",
   {
     role: "status",
-    className: n(
+    className: l(
       "flex items-center justify-center",
       { "size-full": t },
-      s,
+      { "fixed inset-0 z-popup bg-layer-base": a },
+      i,
       o.spinner
     ),
-    children: /* @__PURE__ */ r(
+    children: /* @__PURE__ */ s(
       "div",
       {
+        ref: r,
+        tabIndex: r ? -1 : void 0,
         role: "img",
-        "aria-label": i,
+        "aria-label": n,
         style: { width: e, height: e },
         className: "rounded-full border-2 border-secondary border-t-accent animate-spin-steps shrink-0"
       }
@@ -28,5 +33,5 @@ const d = ({
   }
 );
 export {
-  d as Spinner
+  f as Spinner
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.61",
-  "generatedAt": "2026-11-02T10:43:43.156Z",
+  "version": "0.16.0-dev.66",
+  "generatedAt": "2026-11-02T14:50:07.690Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -27,27 +27,46 @@
           "name": "size",
           "type": "number",
           "required": false,
-          "defaultValue": "40"
+          "defaultValue": "40",
+          "description": "Ring diameter in px."
         },
         {
           "name": "className",
           "type": "string",
-          "required": false
+          "required": false,
+          "description": "Additional container classes."
         },
         {
           "name": "fullWidth",
           "type": "boolean",
           "required": false,
-          "defaultValue": "false"
+          "defaultValue": "false",
+          "description": "Stretches the container to its parent's width and height."
+        },
+        {
+          "name": "fullScreen",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Covers the whole viewport with the ring centred."
         },
         {
           "name": "ariaLabel",
           "type": "string",
           "required": false,
-          "defaultValue": "'Loading'"
+          "defaultValue": "'Loading'",
+          "description": "Accessible label for screen readers."
+        },
+        {
+          "name": "focusRef",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "description": "Makes the ring focusable and points this ref at it."
         }
       ],
-      "examples": [],
+      "examples": [
+        "<Spinner fullScreen size={48} ariaLabel=\"Checking your session…\" />"
+      ],
       "sourceFile": "components/Spinner/Spinner.tsx"
     },
     {
@@ -553,6 +572,18 @@
           "required": false,
           "defaultValue": "true",
           "description": "`time` mode only: shows a clock button that opens an hour/minute list popover next to the typeable field"
+        },
+        {
+          "name": "renderTimeField",
+          "type": "(props: CalendarTimeFieldRenderProps) => ReactNode",
+          "required": false,
+          "description": "`datetime` mode only: renders a custom control in place of the popover footer's time field; receives the `\"HH:mm\"` value, `onChange`, `onBlur`, `disabled`, `invalid`, `ariaLabel` and `timezoneLabel`"
+        },
+        {
+          "name": "pickerButtonClassName",
+          "type": "string",
+          "required": false,
+          "description": "`time` mode only: classes merged onto the clock button after its defaults, so a conflicting utility overrides them"
         }
       ],
       "examples": [
@@ -5860,6 +5891,134 @@
       ],
       "sourceFile": "components/New/StateScreen/StateScreen.tsx"
     },
+    {
+      "name": "ErrorBoundary",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Catches a render error in its subtree and replaces the subtree with a\nfull-container error screen that has one way out.\naliases: ErrorFallback|CrashScreen|ErrorPage|SomethingWentWrong|RootErrorBoundary\nDesign system 2.0\n\nThe fallback is a `StateScreen` with a warning badge and a `PrimaryButton`\nthat takes focus, since the control the user was on is gone. The crash is\nannounced through an assertive `LiveRegion` that is mounted with the\nboundary, before any error: a region mounted together with its message is\noften not read.\n\nThe button calls `onReset` and renders the children again, or reloads the\npage when `onReset` is omitted. `resetKeys` clears the error without a click.\nLike every React error boundary, it does not catch errors in event handlers,\nasync code or the boundary itself. All text comes from props.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The subtree to guard."
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Headline of the fallback; also the announcement."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional line under the title."
+        },
+        {
+          "name": "actionLabel",
+          "type": "string",
+          "required": true,
+          "description": "Text of the recovery button."
+        },
+        {
+          "name": "onReset",
+          "type": "() => void",
+          "required": false,
+          "description": "Recovery handler; the page reloads without one."
+        },
+        {
+          "name": "resetKeys",
+          "type": "readonly unknown[]",
+          "required": false,
+          "description": "Values that clear the error when one of them changes."
+        },
+        {
+          "name": "onError",
+          "type": "(error: unknown, info: ErrorInfo) => void",
+          "required": false,
+          "description": "Called once per caught error."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": "DEFAULT_ICON",
+          "description": "Glyph in the fallback badge; `null` drops it."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the fallback screen."
+        }
+      ],
+      "examples": [
+        "<ErrorBoundary\n  title={t('error.title')}\n  description={t('error.description')}\n  actionLabel={t('error.reload')}\n  onError={(error) => logger.error(error)}\n>\n  <App />\n</ErrorBoundary>\n\n<ErrorBoundary\n  title={t('error.title')}\n  actionLabel={t('error.tryAgain')}\n  onReset={() => {}}\n  resetKeys={[pathname]}\n>\n  <SettingsPage />\n</ErrorBoundary>"
+      ],
+      "sourceFile": "components/New/ErrorBoundary/ErrorBoundary.tsx"
+    },
+    {
+      "name": "LoginScreen",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The full-page sign-in screen shared by DIAL applications: soft themed\nartwork behind a centred card with the product mark, an `h1`, state content\nand one button per identity provider.\naliases: SignInPage|LoginPage|AuthPage|ProviderPicker\nDesign system 2.0\n\nFills its container. The root is a `section` named by its title. The\nartwork follows the `gradient-1` / `gradient-2` theme tokens. On mobile the\ncard loses its surface and spans the width. Fetching providers and building\ntheir URLs stay with the application. For a signed-out or access-denied\nstate inside an app, use `StateScreen`.",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Headline of the screen, rendered as the page's `h1`."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Prompt above the provider list."
+        },
+        {
+          "name": "logoSrc",
+          "type": "string",
+          "required": false,
+          "description": "Product mark above the title."
+        },
+        {
+          "name": "providers",
+          "type": "LoginScreenProvider[]",
+          "required": false,
+          "defaultValue": "[]",
+          "description": "One link-styled button per provider."
+        },
+        {
+          "name": "providersLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name of the provider list."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "State content above the providers."
+        },
+        {
+          "name": "titleRef",
+          "type": "Ref<HTMLHeadingElement>",
+          "required": false,
+          "description": "Ref to the focusable `h1`."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the container."
+        }
+      ],
+      "examples": [
+        "<LoginScreen\n  logoSrc=\"/favicon.svg\"\n  title=\"Welcome to DIAL Chat\"\n  description=\"Sign in with:\"\n  providersLabel=\"Sign-in options\"\n  providers={[{ id: 'keycloak', label: 'Keycloak', href: '/api/auth/login/keycloak' }]}\n/>"
+      ],
+      "sourceFile": "components/New/LoginScreen/LoginScreen.tsx"
+    },
     {
       "name": "LiveRegion",
       "category": "Components_2_0",
@@ -9450,6 +9609,29 @@
       ],
       "sourceFile": "types/tooltip.ts"
     },
+    {
+      "name": "LoginScreenProvider",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "id",
+          "value": "string"
+        },
+        {
+          "name": "label",
+          "value": "string"
+        },
+        {
+          "name": "href",
+          "value": "string"
+        },
+        {
+          "name": "iconSrc?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/LoginScreen/LoginScreen.tsx"
+    },
     {
       "name": "LiveRegionElement",
       "kind": "enum",
@@ -9869,7 +10051,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  /**\n   * The always-mounted wrapper of a `LiveRegion` — also the wrapper `CaptionText`\n   * and `ErrorText` render when given `announce`.\n   */\n  liveRegion: 'dial-kit-live-region',\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  /** The root of a `LabelledText`, wrapping its caption and value. */\n  labelledText: 'dial-kit-labelled-text',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `ol` root of a `Steps`, holding one button per step. */\n  steps: 'dial-kit-steps',\n  /** The root of an `AnalyticsCard`: the box holding its title, value and description. */\n  analyticsCard: 'dial-kit-analytics-card',\n  /** The root of an `AnalyticsBar`: the title row and track, stacked or inline. */\n  analyticsBar: 'dial-kit-analytics-bar',\n  /** The root of an `AnalyticsBarGroup`: its accordion, header and bars. */\n  analyticsBarGroup: 'dial-kit-analytics-bar-group',\n  /** The root of an `AnalyticsHistogram`: its title, axis and columns. */\n  analyticsHistogram: 'dial-kit-analytics-histogram',\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 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  /** The `<button aria-pressed>` of a `ToggleChip`. */\n  toggleChip: 'dial-kit-toggle-chip',\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 `LoginScreen`. */\n  loginScreen: 'dial-kit-login-screen',\n  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /**\n   * The always-mounted wrapper of a `LiveRegion` — also the wrapper `CaptionText`\n   * and `ErrorText` render when given `announce`.\n   */\n  liveRegion: 'dial-kit-live-region',\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  /** The root of a `LabelledText`, wrapping its caption and value. */\n  labelledText: 'dial-kit-labelled-text',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `ol` root of a `Steps`, holding one button per step. */\n  steps: 'dial-kit-steps',\n  /** The root of an `AnalyticsCard`: the box holding its title, value and description. */\n  analyticsCard: 'dial-kit-analytics-card',\n  /** The root of an `AnalyticsBar`: the title row and track, stacked or inline. */\n  analyticsBar: 'dial-kit-analytics-bar',\n  /** The root of an `AnalyticsBarGroup`: its accordion, header and bars. */\n  analyticsBarGroup: 'dial-kit-analytics-bar-group',\n  /** The root of an `AnalyticsHistogram`: its title, axis and columns. */\n  analyticsHistogram: 'dial-kit-analytics-histogram',\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 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  /** The `<button aria-pressed>` of a `ToggleChip`. */\n  toggleChip: 'dial-kit-toggle-chip',\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

@@ -18,6 +18,8 @@ const i = {
   notification: "dial-kit-notification",
   /** The empty-state root of `NoDataContent`. */
   noDataContent: "dial-kit-no-data-content",
+  /** The `section` root of a `LoginScreen`. */
+  loginScreen: "dial-kit-login-screen",
   /** The `section` root of a `StateScreen`. */
   stateScreen: "dial-kit-state-screen",
   /**