@epam/ai-dial-ui-kit 0.15.0-dev.1 → 0.15.0-dev.10

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.1",
-  "generatedAt": "2026-09-14T16:58:20.214Z",
+  "version": "0.15.0-dev.10",
+  "generatedAt": "2026-09-21T15:01:21.223Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -429,6 +429,12 @@
           "required": false,
           "description": "Callback fired with the next value when the selection changes"
         },
+        {
+          "name": "onBlur",
+          "type": "FocusEventHandler<HTMLInputElement>",
+          "required": false,
+          "description": "Called when the Calendar's input field loses focus, e.g. for on-blur validation"
+        },
         {
           "name": "labelProps",
           "type": "LabelProps",
@@ -491,6 +497,13 @@
           "type": "string",
           "required": false,
           "description": "Additional classes merged onto the trigger field, overriding conflicting defaults"
+        },
+        {
+          "name": "showTimezone",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the `time` field"
         }
       ],
       "examples": [
@@ -543,6 +556,64 @@
       ],
       "sourceFile": "components/New/FolderPath/FolderPath.tsx"
     },
+    {
+      "name": "Breadcrumbs",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A navigation trail: where the user is, and every level they can step back to.\naliases: Breadcrumb|NavigationPath|BreadcrumbTrail\nDesign system 2.0\n\nThe last item is the current page — drawn semibold and primary, and never a\ncontrol, since a link to the page you are already on does nothing. Every\nearlier item with an `href` or an `onClick` is a link; one with neither is\ndrawn as plain text, which is how a read-only location path is built.\n\nThe trail never wraps. Segments truncate instead, each revealing its full\nlabel in a tooltip only once it is actually clipped, and a trail longer than\n`maxVisibleItems` collapses its middle behind an ellipsis menu — the root and\nthe current page, the two segments that carry the most meaning, always stay\non screen.\n\na11y: an `<ol>` inside a named `<nav>`, with `aria-current=\"page\"` on the last\nsegment. Separators are decorative and hidden from assistive tech, so the\ntrail is announced as a list of links rather than a string of chevrons.\n\nLabels are the caller's to translate; the two accessible names default to\nEnglish and take an override.",
+      "props": [
+        {
+          "name": "items",
+          "type": "BreadcrumbsItem[]",
+          "required": true,
+          "description": "The trail, outermost first; the last entry is the current page"
+        },
+        {
+          "name": "maxVisibleItems",
+          "type": "number",
+          "required": false,
+          "defaultValue": "DEFAULT_MAX_VISIBLE_ITEMS",
+          "description": "Segments drawn before the middle collapses behind an ellipsis menu"
+        },
+        {
+          "name": "separator",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": "defaultSeparator",
+          "description": "Node drawn between two segments; defaults to a right chevron"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Breadcrumb'",
+          "description": "Accessible name for the `<nav>`"
+        },
+        {
+          "name": "overflowAriaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Show hidden path segments'",
+          "description": "Accessible name for the ellipsis button"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the `<nav>`"
+        },
+        {
+          "name": "itemClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to every segment"
+        }
+      ],
+      "examples": [
+        "<Breadcrumbs\n  ariaLabel={t('File path')}\n  items={[\n    { label: t('My files'), onClick: () => open('/') },\n    { label: 'DK Test', onClick: () => open('/DK Test') },\n    { label: 'DK Test with nested' },\n  ]}\n/>"
+      ],
+      "sourceFile": "components/New/Breadcrumbs/Breadcrumbs.tsx"
+    },
     {
       "name": "DangerButton",
       "category": "Components_2_0",
@@ -1517,7 +1588,7 @@
       "name": "PasswordInput",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\nDesign system 2.0\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other  prop is passed through.",
+      "description": "A password field with a reveal toggle, built on .\naliases: SecureInput|ToggleablePassword\nDesign system 2.0\n\nThe toggle is a real `<button>`, so it is reachable by keyboard and announces\nboth its purpose and its state. `type` and `iconAfter` are owned by this\ncomponent; every other  prop is passed through.\n\nA disabled field is masked with no toggle at all, and comes back masked if it\nis enabled again.",
       "props": [
         {
           "name": "showPasswordLabel",
@@ -2841,7 +2912,7 @@
       "name": "Tabs",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A horizontal row of tabs, underlining the active one and showing optional count badges.\naliases: TabRow|TabNavigation|TabBar\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\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\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",
@@ -2861,6 +2932,19 @@
           "required": true,
           "description": "Fired with the tab's `id` when the user selects a tab."
         },
+        {
+          "name": "orientation",
+          "type": "TabOrientation",
+          "required": false,
+          "defaultValue": "TabOrientation.Horizontal",
+          "description": "Layout direction of the tab list."
+        },
+        {
+          "name": "sectionLabel",
+          "type": "string",
+          "required": false,
+          "description": "Heading rendered above the tabs, which also names the tab list."
+        },
         {
           "name": "ariaLabel",
           "type": "string",
@@ -2871,20 +2955,86 @@
           "name": "className",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the tab list container."
+          "description": "Additional CSS classes for the root element."
         },
         {
           "name": "tabClassName",
           "type": "string",
           "required": false,
           "description": "Additional CSS classes applied to every tab."
+        },
+        {
+          "name": "sectionLabelClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the `sectionLabel` heading."
         }
       ],
       "examples": [
-        "<Tabs\n  ariaLabel=\"Conversation views\"\n  tabs={[\n    { id: 'all', label: 'All', count: 12 },\n    { id: 'shared', label: 'Shared with me' },\n  ]}\n  activeTabId={activeTabId}\n  onTabChange={setActiveTabId}\n/>"
+        "<Tabs\n  ariaLabel=\"Conversation views\"\n  tabs={[\n    { id: 'all', label: 'All', count: 12 },\n    { id: 'shared', label: 'Shared with me' },\n  ]}\n  activeTabId={activeTabId}\n  onTabChange={setActiveTabId}\n/>",
+        "<Tabs\norientation={TabOrientation.Vertical}\nsectionLabel={t('Settings')}\nclassName=\"w-[240px] shrink-0 border-e border-e-tertiary\"\ntabs={[\n{ id: 'preferences', label: t('Preferences'), icon: <IconSettings size={18} /> },\n{ id: 'usage', label: t('Usage'), icon: <IconChartBar size={18} /> },\n]}\nactiveTabId={activeTabId}\nonTabChange={setActiveTabId}\n/>"
       ],
       "sourceFile": "components/New/Tabs/Tabs.tsx"
     },
+    {
+      "name": "FilterChips",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A row of filter chips that picks one value out of a few.\naliases: FilterChipRow|ChipTabs|TagTabs|FilterTabs\nDesign system 2.0\n\nThe chip-shaped sibling of the kit's other single-select rows, and the one to\nreach for when the options label a *subset of a list* — \"All\", \"Shared\",\n\"Mine\" above a history panel. `Tabs` underlines the active option and reads\nas navigation between panels; `SegmentedControl` sinks equal segments into a\ntrack and reads as a view switch. This one draws `TagAppearance.Selectable`\nchips: no fill until selected, and a semibold label once it is. Selecting a\nchip therefore widens it by the difference between the regular and semibold\nlabel — give the row `stretch`, or the chips a width, if that shift matters.\n\nEach chip is a toggle button carrying its state on `aria-pressed`, wrapped in\na named `role=\"group\"` — the pattern `Tag` is built for. That makes every\nchip its own tab stop, which is what a filter row wants: unlike a\n`radiogroup`, arrowing onto a chip never changes the filter by accident.\nName the group through `aria-label` or `aria-labelledby`, or the chips are\nannounced as a handful of unrelated toggles.\n\nThere is no disabled chip. An option the user must not pick is left out of\n`items` — a chip that renders but cannot be activated is a label and nothing\nelse, and `Tag` drops its button role when disabled, so it would not even\nannounce as unavailable.\n\nLabels are the caller's to translate — the component ships no English\ndefaults.",
+      "props": [
+        {
+          "name": "items",
+          "type": "FilterChipItem<T>[]",
+          "required": true,
+          "description": "Chips to render, in order; each needs a unique `value` and a `label`"
+        },
+        {
+          "name": "value",
+          "type": "T",
+          "required": true,
+          "description": "The `value` of the selected chip"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: T) => void",
+          "required": true,
+          "description": "Called with the `value` of the chip the user picked. A click on the already-selected chip fires it again, so a row that clears back to a default handles that itself"
+        },
+        {
+          "name": "stretch",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Grows the chips to share the row width equally instead of hugging their labels"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the row, e.g. its padding or `flex-wrap`"
+        },
+        {
+          "name": "chipClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for every chip. A panel too narrow for the chips' default padding can tighten it here"
+        },
+        {
+          "name": "'aria-label'",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "'aria-labelledby'",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<FilterChips\n  aria-label={t('Filter chats')}\n  value={tab}\n  onChange={setTab}\n  items={[\n    { value: 'all', label: t('All') },\n    { value: 'mine', label: t('My chats') },\n    { value: 'shared', label: t('Shared') },\n  ]}\n/>"
+      ],
+      "sourceFile": "components/New/FilterChips/FilterChips.tsx"
+    },
     {
       "name": "FileDropzone",
       "category": "Components_2_0",
@@ -10375,6 +10525,30 @@
       "sourceFile": "components/New/Calendar/Calendar.tsx",
       "typeBody": "Date | string | null"
     },
+    {
+      "name": "BreadcrumbsItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "label",
+          "value": "string"
+        },
+        {
+          "name": "href?",
+          "value": "string"
+        },
+        {
+          "name": "onClick?",
+          "value": "(event: MouseEvent<HTMLElement>) => void"
+        },
+        {
+          "name": "icon?",
+          "value": "ReactNode"
+        }
+      ],
+      "sourceFile": "components/New/Breadcrumbs/Breadcrumbs.tsx",
+      "description": "One step of the trail rendered by ."
+    },
     {
       "name": "TextareaResize",
       "kind": "enum",
@@ -10472,6 +10646,10 @@
           "name": "count?",
           "value": "number"
         },
+        {
+          "name": "icon?",
+          "value": "ReactNode"
+        },
         {
           "name": "disabled?",
           "value": "boolean"
@@ -10480,6 +10658,25 @@
       "sourceFile": "components/New/Tabs/Tabs.tsx",
       "description": "A single tab entry rendered by ."
     },
+    {
+      "name": "FilterChipItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "value",
+          "value": "T"
+        },
+        {
+          "name": "label",
+          "value": "string"
+        },
+        {
+          "name": "icon?",
+          "value": "ReactNode"
+        }
+      ],
+      "sourceFile": "components/New/FilterChips/FilterChips.tsx"
+    },
     {
       "name": "TagAppearance",
       "kind": "enum",
@@ -10686,6 +10883,16 @@
       "sourceFile": "utils/flat-to-hierarchy-convertor.ts",
       "description": "Helper to create a root folder wrapping flat items.\nUseful when you want the entire tree to be nested under a single root.",
       "signature": "function wrapInRootFolder(flatItems: FlatFileItem[], rootName = 'Prompts', rootPath = 'prompts/public/', rootFolderId = 'root'): DialFile[]"
+    },
+    {
+      "name": "getTimezoneLabel",
+      "sourceFile": "utils/timezone.ts",
+      "description": "Returns a timezone as a hint label for time-of-day fields, e.g.\n`(GMT+01:00) Europe/Berlin`: the UTC offset in effect at `options.date`\nrendered by `Intl` (`timeZoneName: 'longOffset'`), followed by the IANA\ntimezone name.",
+      "signature": "({\n  locale,\n  timeZone,\n  date = new Date(),\n}: TimezoneLabelOptions = {}) => string"
+    },
+    {
+      "name": "TimezoneLabelOptions",
+      "sourceFile": "utils/timezone.ts"
     }
   ],
   "constants": [
@@ -10738,6 +10945,11 @@
       "name": "NOT_ALLOWED_SPACES_REGEXP",
       "sourceFile": "constants/validation.ts",
       "signature": "NOT_ALLOWED_SPACES_REGEXP = new RegExp(NOT_ALLOWED_SPACES)"
+    },
+    {
+      "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\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  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\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  /**\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 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 drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\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  /** 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

@@ -0,0 +1,175 @@
+const i = {
+  /* ── Feedback and status ───────────────────────────────────────────────── */
+  /** The `role="status"` root of a `Spinner`. */
+  spinner: "dial-kit-spinner",
+  /**
+   * The outermost element of a `ProgressBar`: the box wrapping its label,
+   * track and readout — or the track itself, which is the root when the bar
+   * has neither.
+   */
+  progressBar: "dial-kit-progress-bar",
+  /** The root of a `Skeleton`, wrapping its avatar and text rows. */
+  skeleton: "dial-kit-skeleton",
+  /**
+   * The `Notification` surface. Present on every wrapper too — the toast and
+   * section-message variants of error, info, success, warning, loading and
+   * general all render this component.
+   */
+  notification: "dial-kit-notification",
+  /** The empty-state root of `NoDataContent`. */
+  noDataContent: "dial-kit-no-data-content",
+  /* ── Text ──────────────────────────────────────────────────────────────── */
+  /** The text element of a `Highlight`, which renders the matched query. */
+  highlight: "dial-kit-highlight",
+  /** The caption line under a field, rendered by `CaptionText`. */
+  captionText: "dial-kit-caption-text",
+  /**
+   * A caption in its error variant — what `ErrorText` renders. Additive to
+   * `captionText`, since one component draws both.
+   */
+  errorText: "dial-kit-error-text",
+  /** The `Label` root, which wraps the `label` element and its info button. */
+  label: "dial-kit-label",
+  /* ── Containers ────────────────────────────────────────────────────────── */
+  /** The `article` element of a `CardShell`. */
+  cardShell: "dial-kit-card-shell",
+  /** The `aside` element of a `CollapsibleSidebar`. */
+  collapsibleSidebar: "dial-kit-collapsible-sidebar",
+  /** The content box inside a `ResizableContainer`'s resize frame. */
+  resizableContainer: "dial-kit-resizable-container",
+  /**
+   * The `role="dialog"` panel of a `Popup`. Its backdrop is reached through
+   * `overlayClassName`.
+   */
+  popup: "dial-kit-popup",
+  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */
+  confirmationPopup: "dial-kit-confirmation-popup",
+  /** The root of an `Accordion`. */
+  accordion: "dial-kit-accordion",
+  /** The breadcrumb root of a `FolderPath`. */
+  folderPath: "dial-kit-folder-path",
+  /** The `nav` element of a `Breadcrumbs` trail. */
+  breadcrumbs: "dial-kit-breadcrumbs",
+  /**
+   * One segment of a `Breadcrumbs` trail: the link, button or plain span that
+   * draws the label — not the `li`, which also holds the separator after it.
+   */
+  breadcrumbsItem: "dial-kit-breadcrumbs-item",
+  /* ── Menus and overlays ────────────────────────────────────────────────── */
+  /**
+   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through
+   * `listClassName`.
+   */
+  dropdown: "dial-kit-dropdown",
+  /**
+   * The `role="none"` item list inside a dropdown overlay — the box that holds
+   * the rows and owns their vertical padding. Present in both generations, and
+   * on a submenu's own list. It is *not* the floating panel.
+   */
+  dropdownList: "dial-kit-dropdown-list",
+  /**
+   * One row of a floating overlay: a dropdown item, a `Select` option, a
+   * submenu trigger, or a submenu child. It sits on the element that draws the
+   * row box — so on the wrapper, not the inner button, for a row that has a
+   * `rightControl` beside it.
+   */
+  menuItem: "dial-kit-menuitem",
+  /**
+   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like
+   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the
+   * state.
+   */
+  menuItemCheck: "dial-kit-menuitem-check",
+  /** The primary icon of a `DialDropdownIcon` trigger. */
+  dropdownIcon: "dial-kit-dropdown-icon",
+  /**
+   * The caret badge of a `DialDropdownIcon` trigger — the round plate the
+   * chevron sits on. Absent when `showCaret` is `false`.
+   */
+  dropdownIconCaret: "dial-kit-dropdown-icon-caret",
+  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */
+  tooltip: "dial-kit-tooltip",
+  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */
+  interactiveTooltip: "dial-kit-interactive-tooltip",
+  /** The text element of an `EllipsisTooltip`, which is also its trigger. */
+  ellipsisTooltip: "dial-kit-ellipsis-tooltip",
+  /* ── Fields ────────────────────────────────────────────────────────────── */
+  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */
+  search: "dial-kit-search",
+  /** The `PasswordInput` field, additive to `dial-kit-input`. */
+  passwordInput: "dial-kit-password-input",
+  /** The `NumberInput` field, additive to `dial-kit-input`. */
+  numberInput: "dial-kit-number-input",
+  /** The `TagInput` field, additive to `dial-kit-input`. */
+  tagInput: "dial-kit-tag-input",
+  /** The root of a `Select`, wrapping its label, field and caption. */
+  select: "dial-kit-select",
+  /** The trigger button of an `InlineSelect`. */
+  inlineSelect: "dial-kit-inline-select",
+  /** The root of a `Calendar`, wrapping its label and date field. */
+  calendar: "dial-kit-calendar",
+  /** The drop area of a `FileDropzone`. */
+  fileDropzone: "dial-kit-file-dropzone",
+  /* ── Controls ──────────────────────────────────────────────────────────── */
+  /** The row of a `Switch`: the control and its label. */
+  switch: "dial-kit-switch",
+  /** The row of a `Checkbox`: the box and its label. */
+  checkbox: "dial-kit-checkbox",
+  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */
+  checkboxBox: "dial-kit-checkbox-box",
+  /** The row of a `Radio`: the circle and its label. */
+  radio: "dial-kit-radio",
+  /** The root of a `RadioGroup`, wrapping its label and its radios. */
+  radioGroup: "dial-kit-radio-group",
+  /**
+   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed
+   * field that opens the group.
+   */
+  radioGroupPopupField: "dial-kit-radio-group-popup-field",
+  /** The `role="radiogroup"` track of a `SegmentedControl`. */
+  segmentedControl: "dial-kit-segmented-control",
+  /** One segment of a `SegmentedControl`. */
+  segmentedControlItem: "dial-kit-segmented-control-item",
+  /**
+   * The outermost element of a `Tabs`: the box wrapping its heading and tab
+   * list — or the `role="tablist"` itself, which is the root when the tabs
+   * carry no `sectionLabel`.
+   */
+  tabs: "dial-kit-tabs",
+  /**
+   * The `role="tablist"` holding the tabs, in either orientation. Additive to
+   * `tabs` when there is no heading above it, since one element is then both.
+   */
+  tabList: "dial-kit-tab-list",
+  /**
+   * One tab inside `Tabs`, in either orientation. The selected tab of a
+   * horizontal row keeps its own `dial-kit-tab-selected-underline`.
+   */
+  tab: "dial-kit-tab",
+  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */
+  tabsSectionLabel: "dial-kit-tabs-section-label",
+  /**
+   * The `role="group"` row of a `FilterChips`. Its chips are `Tag` pills, so
+   * they carry `dial-kit-tag` and have no entry of their own.
+   */
+  filterChips: "dial-kit-filter-chips",
+  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */
+  tag: "dial-kit-tag",
+  /**
+   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it
+   * already carries.
+   */
+  toggleIconButton: "dial-kit-toggle-icon-button",
+  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */
+  closeButton: "dial-kit-close-button",
+  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */
+  infoButton: "dial-kit-info-button",
+  /**
+   * The wrapper of a `ButtonDropdown` — its trigger carries
+   * `dial-kit-base-button`.
+   */
+  buttonDropdown: "dial-kit-button-dropdown"
+};
+export {
+  i as DIAL_KIT_CLASS
+};