@epam/ai-dial-ui-kit 0.16.0-dev.60 → 0.16.0-dev.62

package/dist/components/New/Analytics/Card/Card.js

@@ -1,64 +1,66 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { DIAL_KIT_CLASS as g } from "../../../../constants/public-class-names.js";
-import { Badge as u } from "../../Badge/Badge.js";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as N } from "../../../../constants/public-class-names.js";
+import { Badge as g } from "../../Badge/Badge.js";
 import { BadgeColor as b, BadgeVariant as C } from "../../../../types/badge.js";
-import { EllipsisTooltip as m } from "../../EllipsisTooltip/EllipsisTooltip.js";
+import { EllipsisTooltip as x } from "../../EllipsisTooltip/EllipsisTooltip.js";
 import { Spinner as D } from "../../../Spinner/Spinner.js";
-import { AnalyticsCardVariant as c } from "../../../../types/analytics.js";
-import { mergeClasses as x } from "../../../../utils/merge-classes.js";
+import { AnalyticsCardVariant as o } from "../../../../types/analytics.js";
+import { mergeClasses as l } from "../../../../utils/merge-classes.js";
 const w = {
-  [c.Default]: {
+  [o.Default]: {
     container: "bg-layer-3",
     title: "dial-small-text text-secondary",
     value: "dial-display2-text text-primary",
+    compareDividerCell: "h-10",
     showDescription: !0
   },
-  [c.Compact]: {
+  [o.Compact]: {
     container: "bg-layer-2",
     title: "dial-tiny-text text-secondary",
     value: "dial-body-semi-text text-primary",
+    compareDividerCell: "h-6",
     showDescription: !1
   }
-}, _ = ({
-  title: o,
+}, T = ({
+  title: d,
   value: p,
-  description: i,
-  variant: f = c.Default,
-  error: r,
+  description: r,
+  variant: y = o.Default,
+  error: i,
   isLoading: n,
-  className: y,
+  className: f,
   delta: a,
-  deltaPositive: d,
-  deltaUnit: h,
-  compareValues: l
+  deltaPositive: m,
+  deltaUnit: v,
+  compareValues: s
 }) => {
-  const t = w[f], v = d !== void 0 ? d : (a ?? 0) >= 0, N = a === void 0 ? null : `${a >= 0 ? `+${a}` : String(a)}${h ?? ""}`;
-  return /* @__PURE__ */ s(
+  const t = w[y], h = m !== void 0 ? m : (a ?? 0) >= 0, u = a === void 0 ? null : `${a >= 0 ? `+${a}` : String(a)}${v ?? ""}`;
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: x(
+      className: l(
         "flex flex-col rounded-lg border border-secondary p-4",
-        r || n ? "gap-2" : "gap-1",
+        i || n ? "gap-2" : "gap-1",
         t.container,
-        y,
-        g.analyticsCard
+        f,
+        N.analyticsCard
       ),
       children: [
-        a !== void 0 ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ e("span", { className: t.title, children: o }),
+        a !== void 0 ? /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { className: t.title, children: d }),
           /* @__PURE__ */ e(
             "span",
             {
-              className: x(
+              className: l(
                 "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
-                v ? "bg-success text-success" : "bg-error text-error"
+                h ? "bg-success text-success" : "bg-error text-error"
               ),
-              children: N
+              children: u
             }
           )
-        ] }) : /* @__PURE__ */ e("span", { className: t.title, children: o }),
-        r ? /* @__PURE__ */ e(
-          u,
+        ] }) : /* @__PURE__ */ e("span", { className: t.title, children: d }),
+        i ? /* @__PURE__ */ e(
+          g,
           {
             label: "Error",
             variant: C.Filled,
@@ -66,34 +68,40 @@ const w = {
             textClassName: "dial-tiny-semi-text",
             className: "self-start"
           }
-        ) : n ? /* @__PURE__ */ e(D, { size: 18, fullWidth: !1, className: "self-start" }) : l ? /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                text: l[0].title,
-                className: "dial-tiny-text text-secondary"
-              }
-            ),
-            /* @__PURE__ */ e("span", { className: t.value, children: l[0].value })
-          ] }),
-          /* @__PURE__ */ e("div", { className: "h-4 w-px flex-shrink-0 bg-controls-disable-accent" }),
-          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                text: l[1].title,
-                className: "dial-tiny-text text-secondary"
-              }
-            ),
-            /* @__PURE__ */ e("span", { className: t.value, children: l[1].value })
-          ] })
+        ) : n ? /* @__PURE__ */ e(D, { size: 18, fullWidth: !1, className: "self-start" }) : s ? /* @__PURE__ */ c("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] gap-x-3 gap-y-0.5", children: [
+          /* @__PURE__ */ e(
+            x,
+            {
+              text: s[0].title,
+              className: "col-start-1 dial-tiny-text text-secondary"
+            }
+          ),
+          /* @__PURE__ */ e(
+            x,
+            {
+              text: s[1].title,
+              className: "col-start-3 dial-tiny-text text-secondary"
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: l("col-start-1 min-w-0", t.value), children: s[0].value }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: l(
+                "col-start-2 flex items-center self-start",
+                t.compareDividerCell
+              ),
+              children: /* @__PURE__ */ e("div", { className: "h-4 w-px bg-controls-disable-accent" })
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: l("col-start-3 min-w-0", t.value), children: s[1].value })
         ] }) : /* @__PURE__ */ e("span", { className: t.value, children: p }),
-        !r && !n && t.showDescription && i != null && i !== !1 && /* @__PURE__ */ e("span", { className: "dial-tiny-text text-secondary", children: i })
+        !i && !n && t.showDescription && r != null && r !== !1 && /* @__PURE__ */ e("span", { className: "mt-auto dial-tiny-text text-secondary", children: r })
       ]
     }
   );
 };
 export {
-  _ as AnalyticsCard
+  T as AnalyticsCard
 };

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-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.60",
-  "generatedAt": "2026-11-01T23:48:06.567Z",
+  "version": "0.16.0-dev.62",
+  "generatedAt": "2026-11-02T12:21:52.558Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -1571,7 +1571,7 @@
       "name": "AnalyticsCard",
       "category": "Components_2_0/Analytics",
       "generation": "2.0",
-      "description": "A simple analytics summary card that displays a single metric as a title,\na prominent value, and an optional description.\naliases: MetricCard|StatCard|KpiCard\nDesign system 2.0\n\nTwo visual variants are available via the  enum:\n- `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.\n- `Compact` — denser `bg-layer-2` card with a `dial-body-semi-text` value and no\n  description (the `description` prop is ignored in this variant).\n\n**Compare mode** — pass `compareValues` to split the value area 50/50 between two\nmetrics, each with its own sub-title. Long sub-titles truncate to a single line and\nshow the full text in a tooltip. Pair with `delta` to show a change badge next\nto the card title, and `deltaUnit` for a suffix such as `\"s\"`.",
+      "description": "A simple analytics summary card that displays a single metric as a title,\na prominent value, and an optional description.\naliases: MetricCard|StatCard|KpiCard\nDesign system 2.0\n\nTwo visual variants are available via the  enum:\n- `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.\n- `Compact` — denser `bg-layer-2` card with a `dial-body-semi-text` value and no\n  description (the `description` prop is ignored in this variant).\n\n**Compare mode** — pass `compareValues` to split the value area 50/50 between two\nmetrics, each with its own sub-title. Long sub-titles truncate to a single line and\nshow the full text in a tooltip. Pair with `delta` to show a change badge next\nto the card title, and `deltaUnit` for a suffix such as `\"s\"`. The divider is\ncentred on the first line of the two values, so dividers line up across cards\nwhose values differ in height.\n\n**Description placement** — when the card is stretched to the height of its row\n(a grid or flex row with equal-height items), the description sits at the\nbottom of the card with the free space between it and the value.",
       "props": [
         {
           "name": "title",
@@ -5860,6 +5860,67 @@
       ],
       "sourceFile": "components/New/StateScreen/StateScreen.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 +9511,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 +9953,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",
   /**