@epam/ai-dial-ui-kit 0.16.0-dev.47 → 0.16.0-dev.49

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.47",
-  "generatedAt": "2026-10-26T12:42:59.950Z",
+  "version": "0.16.0-dev.49",
+  "generatedAt": "2026-10-27T09:16:10.434Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -1479,6 +1479,54 @@
       ],
       "sourceFile": "components/New/InfoButton/InfoButton.tsx"
     },
+    {
+      "name": "Steps",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A row of numbered steps for a multi-step flow, marking the active one and\nflagging completed and failed steps.\naliases: StepWizard|ProgressSteps|Stepper\nDesign system 2.0\n\nA step's number turns into a check once it is completed and the user has moved\non, and into an alert icon while a failed step is the active one. A step can\nonly be entered when every step before it is `StepStatus.VALID`; going back is\nalways allowed.\n\nThe list is an ordered list, the active step carries `aria-current=\"step\"`,\nand a completed or failed step announces its status after its name.",
+      "props": [
+        {
+          "name": "steps",
+          "type": "Step[]",
+          "required": true,
+          "description": "Ordered steps to render."
+        },
+        {
+          "name": "currentStep",
+          "type": "string",
+          "required": true,
+          "description": "`id` of the active step."
+        },
+        {
+          "name": "onChangeStep",
+          "type": "(step: string) => void",
+          "required": true,
+          "description": "Fired with the `id` of the step the user may move to."
+        },
+        {
+          "name": "statusLabels",
+          "type": "Partial<Record<StepStatus, string>>",
+          "required": false,
+          "description": "Translated status text announced after a step's name."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name for the list of steps."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the root element."
+        }
+      ],
+      "examples": [
+        "<Steps\n  ariaLabel=\"Create deployment\"\n  steps={[\n    { id: 'general', name: 'General', status: StepStatus.VALID },\n    { id: 'limits', name: 'Limits', status: StepStatus.ERROR },\n    { id: 'review', name: 'Review' },\n  ]}\n  currentStep=\"general\"\n  onChangeStep={setCurrentStep}\n/>"
+      ],
+      "sourceFile": "components/New/Steps/Steps.tsx"
+    },
     {
       "name": "AnalyticsCard",
       "category": "Components_2_0/Analytics",
@@ -1884,6 +1932,54 @@
       ],
       "sourceFile": "components/New/Label/Label.tsx"
     },
+    {
+      "name": "LabelledText",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A read-only label/value pair: a small caption above a value.\naliases: LabelValue|DisplayText|ReadOnlyField|KeyValue\nDesign system 2.0\n\nThe caption is the kit's `Label`, so it matches the other 2.0 fields. There is\nno control to point its `htmlFor` at: it sits beside the value and reads in\nDOM order. It is not a form field: use `Label` with an input for editable\nvalues.\n\nWithout `children` the value is a single line capped at 200px that truncates;\nthe tooltip appears only while the text is actually clipped. With `children`\nthe value takes the content's own width.",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Caption above the value."
+        },
+        {
+          "name": "text",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The value, truncated with an ellipsis when it does not fit."
+        },
+        {
+          "name": "tooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Tooltip content used instead of `text` while it is clipped."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Custom value content, rendered instead of `text`."
+        },
+        {
+          "name": "postfix",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Element after the value."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the root element."
+        }
+      ],
+      "examples": [
+        "<LabelledText label=\"Endpoint\" text=\"https://example.com/v1/chat\" />\n\n<LabelledText\n  label=\"Key\"\n  text=\"sk-0000\"\n  postfix={<IconButton icon={<IconCopy />} ariaLabel=\"Copy key\" />}\n/>"
+      ],
+      "sourceFile": "components/New/LabelledText/LabelledText.tsx"
+    },
     {
       "name": "Textarea",
       "category": "Components_2_0",
@@ -6047,135 +6143,90 @@
       "supersededBy": "ErrorText"
     },
     {
-      "name": "DialAnalyticsCard",
-      "category": "Analytics",
+      "name": "DialLabel",
+      "category": "Elements",
       "generation": "1.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 1.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 label component\naliases: FormLabel|RequiredIndicator\nDesign system 1.0",
       "props": [
         {
-          "name": "title",
-          "type": "ReactNode",
-          "required": true,
-          "description": "Short label describing the metric, rendered above the value."
-        },
-        {
-          "name": "value",
-          "type": "ReactNode",
-          "required": false,
-          "description": "The primary metric value. Ignored when `compareValues` is set."
-        },
-        {
-          "name": "description",
+          "name": "label",
           "type": "ReactNode",
           "required": false,
-          "description": "Optional supporting text. Ignored when `variant` is `Compact`."
-        },
-        {
-          "name": "variant",
-          "type": "AnalyticsCardVariant",
-          "required": false,
-          "defaultValue": "AnalyticsCardVariant.Default",
-          "description": "Visual style of the card."
-        },
-        {
-          "name": "error",
-          "type": "boolean",
-          "required": false,
-          "description": "Renders an error tag in place of the value."
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean",
-          "required": false,
-          "description": "Renders a loader in place of the value."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the card container."
-        },
-        {
-          "name": "delta",
-          "type": "number",
-          "required": false,
-          "description": "Numeric change shown as a badge next to the title. ≥0 = success, <0 = error."
+          "description": "The label text to display for the label"
         },
         {
-          "name": "deltaPositive",
+          "name": "required",
           "type": "boolean",
           "required": false,
-          "description": "Overrides sign-based badge colour. Use for lower-is-better metrics."
+          "description": "Whether the field is required"
         },
         {
-          "name": "deltaUnit",
+          "name": "caption",
           "type": "string",
           "required": false,
-          "description": "Suffix appended to the formatted delta (e.g. `\"s\"` → `+9s`)."
-        },
-        {
-          "name": "compareValues",
-          "type": "[AnalyticsCardCompareItem, AnalyticsCardCompareItem]",
-          "required": false,
-          "description": "Enables compare mode with two side-by-side metrics."
+          "description": "Additional caption text, displayed below the label."
         }
       ],
       "examples": [
-        "<DialAnalyticsCard\n  title=\"Total requests\"\n  value=\"12,480\"\n  description=\"+12% vs last week\"\n/>",
-        "<DialAnalyticsCard\n  title=\"Response time\"\n  delta={9}\n  deltaUnit=\"s\"\n  deltaPositive={false}\n  compareValues={[\n    { title: 'This week', value: '248ms' },\n    { title: 'Last week', value: '220ms' },\n  ]}\n/>"
+        "// Basic  label\n<DialLabel htmlFor=\"email-input\" label=\"Email Address\" />"
       ],
-      "sourceFile": "components/Analytics/Card/Card.tsx",
-      "supersededBy": "AnalyticsCard"
+      "sourceFile": "components/Label/Label.tsx",
+      "supersededBy": "Label"
     },
     {
-      "name": "DialAnalyticsBar",
-      "category": "Analytics",
+      "name": "DialAccordion",
+      "category": "Layout",
       "generation": "1.0",
-      "description": "A compact analytics meter: a horizontal bar whose fill width and color reflect a\nvalue relative to `maxValue`, with an optional title on the left and value on the right.\naliases: MetricBar|Meter|ScoreBar\nDesign system 1.0\n\nThe fill color is resolved from `colorMap` based on the normalized ratio\n(`value / maxValue`), so the bar shifts hue as the value grows. An empty bar\n(value `0`) shows only the `bg-layer-1` track. A missing value (`null`) shows\nan em dash and no progress bar.",
+      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\nDesign system 1.0\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a chevron that rotates when\nexpanded, a title, and an optional description.",
       "props": [
         {
-          "name": "value",
-          "type": "number | null",
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Title rendered in the header."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
           "required": false,
-          "description": "Current value used to size and color the bar. Pass `null` for no data (em dash, no bar). Omit when `error` is set."
+          "description": "Optional secondary text rendered under the title."
         },
         {
-          "name": "maxValue",
-          "type": "number",
+          "name": "children",
+          "type": "ReactNode",
           "required": false,
-          "defaultValue": "1",
-          "description": "Upper bound of the scale."
+          "description": "Content revealed when expanded."
         },
         {
-          "name": "error",
+          "name": "expanded",
           "type": "boolean",
           "required": false,
-          "description": "Renders the error state (error-colored bar + error tag)."
+          "description": "Controlled expanded state."
         },
         {
-          "name": "isLoading",
+          "name": "defaultExpanded",
           "type": "boolean",
           "required": false,
-          "description": "Renders the loading state (loader + empty track)."
+          "defaultValue": "false",
+          "description": "Initial expanded state when uncontrolled."
         },
         {
-          "name": "title",
-          "type": "ReactNode",
+          "name": "disabled",
+          "type": "boolean",
           "required": false,
-          "description": "Optional label rendered above the bar, on the left."
+          "description": "Disables toggling."
         },
         {
-          "name": "valueLabel",
-          "type": "ReactNode",
+          "name": "nonCollapsible",
+          "type": "boolean",
           "required": false,
-          "description": "Text rendered above the bar, on the right. Defaults to `value` or `—` when null."
+          "description": "Renders the panel permanently expanded without a chevron or toggle."
         },
         {
-          "name": "colorMap",
-          "type": "AnalyticsBarColorStop[]",
+          "name": "onToggle",
+          "type": "(expanded: boolean) => void",
           "required": false,
-          "defaultValue": "DEFAULT_ANALYTICS_BAR_COLOR_MAP",
-          "description": "Color bands keyed by ratio."
+          "description": "Fired when the header is clicked. Receives the next expanded state."
         },
         {
           "name": "className",
@@ -6184,418 +6235,72 @@
           "description": "Additional CSS classes for the outer container."
         },
         {
-          "name": "titleClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the title label."
-        },
-        {
-          "name": "valueClassName",
+          "name": "headerClassName",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes for the value label."
-        },
-        {
-          "name": "inline",
-          "type": "boolean",
-          "required": false,
-          "description": "Renders the title and bar on a single row (50% / 50%)."
+          "description": "Additional CSS classes for the header button."
         },
         {
-          "name": "ariaLabel",
+          "name": "contentClassName",
           "type": "string",
           "required": false,
-          "description": "Accessible label for the bar."
+          "description": "Additional CSS classes for the content region."
         }
       ],
       "examples": [
-        "<DialAnalyticsBar title=\"Relevance\" value={0.82} valueLabel=\"82%\" />",
-        "<DialAnalyticsBar\n  title=\"Score\"\n  value={640}\n  maxValue={1000}\n  colorMap={customColorMap}\n/>"
+        "<DialAccordion title=\"Advanced settings\" description=\"Optional configuration\">\n  <p>Panel content</p>\n</DialAccordion>"
       ],
-      "sourceFile": "components/Analytics/Bar/Bar.tsx",
-      "supersededBy": "AnalyticsBar"
+      "sourceFile": "components/Accordion/Accordion.tsx",
+      "supersededBy": "Accordion"
     },
     {
-      "name": "DialAnalyticsErrorTag",
-      "category": "Analytics",
+      "name": "DialIcon",
+      "category": "Data Display",
       "generation": "1.0",
-      "description": "A non-interactive error tag used across analytics components to indicate that a\nDesign system 1.0\nmetric value could not be provided. Renders a  styled with the\nerror palette (`bg-error`, `text-error`, `border-error`).",
+      "description": "A wrapper component for rendering icons with consistent styling\naliases: IconRenderer|SVGWrapper\nDesign system 1.0",
       "props": [
         {
-          "name": "label",
-          "type": "string",
+          "name": "icon",
+          "type": "ReactNode",
           "required": false,
-          "defaultValue": "'Error'",
-          "description": "Text shown inside the tag."
+          "description": "The icon element to render"
         },
         {
           "name": "className",
           "type": "string",
           "required": false,
-          "description": "Additional CSS classes applied to the tag."
+          "description": "Additional CSS classes to apply to the icon wrapper"
         }
       ],
       "examples": [
-        "<DialAnalyticsErrorTag />"
+        "<DialIcon icon={<SearchIcon />} />\n<DialIcon icon={<CloseIcon />} className=\"text-primary\" />"
       ],
-      "sourceFile": "components/Analytics/ErrorTag/ErrorTag.tsx"
+      "sourceFile": "components/Icon/Icon.tsx"
     },
     {
-      "name": "DialAnalyticsBarGroup",
-      "category": "Analytics",
+      "name": "DialLoader",
+      "category": "Feedback",
       "generation": "1.0",
-      "description": "A collapsible group of analytics bars built from a key/value map. Wraps\n: the `title` is shown in the header, the number of entries\nis shown as the header description, and each entry renders a \nwith the key as its title and the value as its value.\naliases: MetricBarGroup|BarList|NumericResults\nDesign system 1.0",
+      "description": "A simple loading spinner component.\naliases: LoadingSpinner|ProgressSpinner\nDesign system 1.0\n\nRenders a spinning SVG with optional full-width container.",
       "props": [
         {
-          "name": "title",
-          "type": "ReactNode",
-          "required": true,
-          "description": "Title passed to the accordion header."
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "defaultValue": "18",
+          "description": "Icon size in px"
         },
         {
-          "name": "titleTooltip",
-          "type": "ReactNode",
+          "name": "className",
+          "type": "string",
           "required": false,
-          "description": "Tooltip shown when hovering the accordion header title."
+          "description": "Additional classes for the container"
         },
         {
-          "name": "description",
-          "type": "ReactNode",
+          "name": "iconClassName",
+          "type": "string",
           "required": false,
-          "description": "Description passed to the accordion header. Defaults to the number of entries."
-        },
-        {
-          "name": "data",
-          "type": "Record<string, number | null>",
-          "required": true,
-          "description": "Map of metric name to numeric value (or `null` when missing). Each entry renders one bar."
-        },
-        {
-          "name": "compareData",
-          "type": "Record<string, number | null>",
-          "required": false,
-          "description": "Enables compare mode: union of keys, delta badge (`compareData − data`) when both sides are numeric and the rounded delta is non-zero, em dash (no bar) when a side is missing."
-        },
-        {
-          "name": "compareLabels",
-          "type": "[ReactNode, ReactNode]",
-          "required": false,
-          "description": "Labels for the two bars in compare mode: first for `data`, second for `compareData`."
-        },
-        {
-          "name": "maxValue",
-          "type": "number",
-          "required": false,
-          "description": "Upper bound passed to every bar."
-        },
-        {
-          "name": "colorMap",
-          "type": "AnalyticsBarColorStop[]",
-          "required": false,
-          "description": "Color map passed to every bar."
-        },
-        {
-          "name": "defaultExpanded",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "true",
-          "description": "Whether the accordion is expanded initially."
-        },
-        {
-          "name": "nonCollapsible",
-          "type": "boolean",
-          "required": false,
-          "description": "Renders the group permanently expanded without a toggle or chevron."
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean",
-          "required": false,
-          "description": "Renders a loader in place of the bars while the data is being fetched."
-        },
-        {
-          "name": "onBarClick",
-          "type": "(key: string, value: number | null) => void",
-          "required": false,
-          "description": "Invoked with the entry key and value when a bar (or, in compare mode, the whole entry) is clicked."
-        },
-        {
-          "name": "inline",
-          "type": "boolean",
-          "required": false,
-          "description": "Renders every bar on a single row (50% title, 50% bar + value)."
-        },
-        {
-          "name": "barTitleClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for each bar's title label."
-        },
-        {
-          "name": "barValueClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for each bar's value label."
-        },
-        {
-          "name": "barClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for each bar's outer container. In compare mode they apply to the shared pair container (one continuous block); the entry is a Tailwind `group` — use `group-hover:` for pair hover; when `onBarClick` is set that container also gets a default accent fill on hover and `:focus-visible`."
-        },
-        {
-          "name": "barDescriptions",
-          "type": "Record<string, ReactNode>",
-          "required": false,
-          "description": "Map of bar key to tooltip content. Hovering each bar shows its description."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the accordion container."
-        }
-      ],
-      "examples": [
-        "<DialAnalyticsBarGroup\n  title=\"Relevance\"\n  data={{ accuracy: 0.82, recall: 0.64, precision: 0.91 }}\n/>"
-      ],
-      "sourceFile": "components/Analytics/BarGroup/BarGroup.tsx",
-      "supersededBy": "AnalyticsBarGroup"
-    },
-    {
-      "name": "DialAnalyticsHistogram",
-      "category": "Analytics",
-      "generation": "1.0",
-      "description": "A histogram that distributes `values` across the bands of a color map and draws a\ncolumn per band. Each column's height is relative to the Y-axis max (an even\nceiling of the dataset size — the \"out of N\" in the tooltip). Empty columns\nare outlined, populated columns are filled with their band color. A left\nY-axis (count) and horizontal grid lines provide scale; interval labels run\nalong the bottom. Hovering a column reveals a tooltip with its share of the\ntotal.\naliases: Distribution|ColumnChart|FrequencyChart\nDesign system 1.0",
-      "props": [
-        {
-          "name": "title",
-          "type": "ReactNode",
-          "required": true,
-          "description": "Title rendered above the histogram."
-        },
-        {
-          "name": "values",
-          "type": "number[]",
-          "required": true,
-          "description": "Values to distribute across the columns."
-        },
-        {
-          "name": "colorMap",
-          "type": "AnalyticsBarColorStop[]",
-          "required": false,
-          "defaultValue": "DEFAULT_ANALYTICS_BAR_COLOR_MAP",
-          "description": "Color bands defining the columns."
-        },
-        {
-          "name": "valueTitle",
-          "type": "string",
-          "required": false,
-          "defaultValue": "'values'",
-          "description": "Noun used in the hover tooltip."
-        },
-        {
-          "name": "showCount",
-          "type": "boolean",
-          "required": false,
-          "description": "When `true`, renders each column's count inside its bar."
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean",
-          "required": false,
-          "description": "Renders a loader in place of the histogram while the data is being fetched."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the outer container."
-        },
-        {
-          "name": "compareValues",
-          "type": "number[]",
-          "required": false,
-          "description": "Second set of values; enables compare mode (primary striped, compare solid)."
-        },
-        {
-          "name": "valueSetLabel",
-          "type": "string",
-          "required": false,
-          "description": "Label for the primary values set (compare mode tooltip)."
-        },
-        {
-          "name": "compareValueSetLabel",
-          "type": "string",
-          "required": false,
-          "description": "Label for the compare values set (compare mode tooltip)."
-        }
-      ],
-      "examples": [
-        "<DialAnalyticsHistogram\n  title=\"Score distribution\"\n  values={[0.1, 0.15, 0.4, 0.42, 0.43, 0.9, 1]}\n  valueTitle=\"responses\"\n/>"
-      ],
-      "sourceFile": "components/Analytics/Histogram/Histogram.tsx",
-      "supersededBy": "AnalyticsHistogram"
-    },
-    {
-      "name": "DialLabel",
-      "category": "Elements",
-      "generation": "1.0",
-      "description": "A label component\naliases: FormLabel|RequiredIndicator\nDesign system 1.0",
-      "props": [
-        {
-          "name": "label",
-          "type": "ReactNode",
-          "required": false,
-          "description": "The label text to display for the label"
-        },
-        {
-          "name": "required",
-          "type": "boolean",
-          "required": false,
-          "description": "Whether the field is required"
-        },
-        {
-          "name": "caption",
-          "type": "string",
-          "required": false,
-          "description": "Additional caption text, displayed below the label."
-        }
-      ],
-      "examples": [
-        "// Basic  label\n<DialLabel htmlFor=\"email-input\" label=\"Email Address\" />"
-      ],
-      "sourceFile": "components/Label/Label.tsx",
-      "supersededBy": "Label"
-    },
-    {
-      "name": "DialAccordion",
-      "category": "Layout",
-      "generation": "1.0",
-      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\nDesign system 1.0\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a chevron that rotates when\nexpanded, a title, and an optional description.",
-      "props": [
-        {
-          "name": "title",
-          "type": "ReactNode",
-          "required": true,
-          "description": "Title rendered in the header."
-        },
-        {
-          "name": "description",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Optional secondary text rendered under the title."
-        },
-        {
-          "name": "children",
-          "type": "ReactNode",
-          "required": false,
-          "description": "Content revealed when expanded."
-        },
-        {
-          "name": "expanded",
-          "type": "boolean",
-          "required": false,
-          "description": "Controlled expanded state."
-        },
-        {
-          "name": "defaultExpanded",
-          "type": "boolean",
-          "required": false,
-          "defaultValue": "false",
-          "description": "Initial expanded state when uncontrolled."
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "required": false,
-          "description": "Disables toggling."
-        },
-        {
-          "name": "nonCollapsible",
-          "type": "boolean",
-          "required": false,
-          "description": "Renders the panel permanently expanded without a chevron or toggle."
-        },
-        {
-          "name": "onToggle",
-          "type": "(expanded: boolean) => void",
-          "required": false,
-          "description": "Fired when the header is clicked. Receives the next expanded state."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the outer container."
-        },
-        {
-          "name": "headerClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the header button."
-        },
-        {
-          "name": "contentClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes for the content region."
-        }
-      ],
-      "examples": [
-        "<DialAccordion title=\"Advanced settings\" description=\"Optional configuration\">\n  <p>Panel content</p>\n</DialAccordion>"
-      ],
-      "sourceFile": "components/Accordion/Accordion.tsx",
-      "supersededBy": "Accordion"
-    },
-    {
-      "name": "DialIcon",
-      "category": "Data Display",
-      "generation": "1.0",
-      "description": "A wrapper component for rendering icons with consistent styling\naliases: IconRenderer|SVGWrapper\nDesign system 1.0",
-      "props": [
-        {
-          "name": "icon",
-          "type": "ReactNode",
-          "required": false,
-          "description": "The icon element to render"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional CSS classes to apply to the icon wrapper"
-        }
-      ],
-      "examples": [
-        "<DialIcon icon={<SearchIcon />} />\n<DialIcon icon={<CloseIcon />} className=\"text-primary\" />"
-      ],
-      "sourceFile": "components/Icon/Icon.tsx"
-    },
-    {
-      "name": "DialLoader",
-      "category": "Feedback",
-      "generation": "1.0",
-      "description": "A simple loading spinner component.\naliases: LoadingSpinner|ProgressSpinner\nDesign system 1.0\n\nRenders a spinning SVG with optional full-width container.",
-      "props": [
-        {
-          "name": "size",
-          "type": "number",
-          "required": false,
-          "defaultValue": "18",
-          "description": "Icon size in px"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "required": false,
-          "description": "Additional classes for the container"
-        },
-        {
-          "name": "iconClassName",
-          "type": "string",
-          "required": false,
-          "description": "Additional classes for the SVG icon"
+          "description": "Additional classes for the SVG icon"
         },
         {
           "name": "fullWidth",
@@ -6617,36 +6322,6 @@
       ],
       "sourceFile": "components/Loader/Loader.tsx"
     },
-    {
-      "name": "DialSteps",
-      "category": "Navigation",
-      "generation": "1.0",
-      "description": "Props for the DialSteps component, which renders a multi-step navigation UI.\naliases: StepWizard|ProgressSteps\nDesign system 1.0",
-      "props": [
-        {
-          "name": "steps",
-          "type": "Step[]",
-          "required": true,
-          "description": "Array of step objects to display"
-        },
-        {
-          "name": "currentStep",
-          "type": "string",
-          "required": true,
-          "description": "The id of the currently active step"
-        },
-        {
-          "name": "onChangeStep",
-          "type": "(step: string) => void",
-          "required": true,
-          "description": "Callback to set the current step by id"
-        }
-      ],
-      "examples": [
-        "<DialSteps\n  steps={[{ id: 'step1', label: 'Step 1', status: StepStatus.VALID }, { id: 'step2', label: 'Step 2', status: StepStatus.ERROR }]}\n  currentStep=\"step1\"\n  onChangeStep={(step) => console.log(step)}\n/>"
-      ],
-      "sourceFile": "components/Steps/Steps.tsx"
-    },
     {
       "name": "DialNoDataContent",
       "category": "Feedback",
@@ -6742,7 +6417,8 @@
       "examples": [
         "<DialLabelledText\n  label=\"Username\"\n  text=\"Enter your username\"\n  postfix={<span>*</span>}\n/>"
       ],
-      "sourceFile": "components/LabelledText/LabelledText.tsx"
+      "sourceFile": "components/LabelledText/LabelledText.tsx",
+      "supersededBy": "LabelledText"
     },
     {
       "name": "DialTag",
@@ -7749,55 +7425,6 @@
     }
   ],
   "types": [
-    {
-      "name": "AnalyticsCardVariant",
-      "kind": "enum",
-      "members": [
-        {
-          "name": "Default",
-          "value": "'default'"
-        },
-        {
-          "name": "Compact",
-          "value": "'compact'"
-        }
-      ],
-      "sourceFile": "types/analytics.ts"
-    },
-    {
-      "name": "AnalyticsBarColorStop",
-      "kind": "interface",
-      "members": [
-        {
-          "name": "from",
-          "value": "number"
-        },
-        {
-          "name": "to",
-          "value": "number"
-        },
-        {
-          "name": "color",
-          "value": "string"
-        }
-      ],
-      "sourceFile": "models/analytics.ts"
-    },
-    {
-      "name": "AnalyticsCardCompareItem",
-      "kind": "interface",
-      "members": [
-        {
-          "name": "title",
-          "value": "ReactNode"
-        },
-        {
-          "name": "value",
-          "value": "ReactNode"
-        }
-      ],
-      "sourceFile": "models/analytics.ts"
-    },
     {
       "name": "DialTooltipContainerOptions",
       "kind": "interface",
@@ -9087,6 +8714,55 @@
       "sourceFile": "components/New/Breadcrumbs/Breadcrumbs.tsx",
       "description": "One step of the trail rendered by ."
     },
+    {
+      "name": "AnalyticsCardVariant",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Default",
+          "value": "'default'"
+        },
+        {
+          "name": "Compact",
+          "value": "'compact'"
+        }
+      ],
+      "sourceFile": "types/analytics.ts"
+    },
+    {
+      "name": "AnalyticsBarColorStop",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "from",
+          "value": "number"
+        },
+        {
+          "name": "to",
+          "value": "number"
+        },
+        {
+          "name": "color",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "models/analytics.ts"
+    },
+    {
+      "name": "AnalyticsCardCompareItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "title",
+          "value": "ReactNode"
+        },
+        {
+          "name": "value",
+          "value": "ReactNode"
+        }
+      ],
+      "sourceFile": "models/analytics.ts"
+    },
     {
       "name": "TextareaResize",
       "kind": "enum",
@@ -9750,12 +9426,6 @@
     }
   ],
   "hooks": [
-    {
-      "name": "DEFAULT_ANALYTICS_BAR_COLOR_MAP",
-      "sourceFile": "components/Analytics/Bar/utils.ts",
-      "description": "Default color map for , expressed as ratios (value / maxValue).\nA value of `0` leaves the bar empty (track shows through); a value at the maximum\nuses the dedicated full-bar color.",
-      "signature": "DEFAULT_ANALYTICS_BAR_COLOR_MAP: AnalyticsBarColorStop[]"
-    },
     {
       "name": "EDITABLE_CONTAINER_ATTRIBUTE",
       "sourceFile": "hooks/use-editable-item.tsx",
@@ -9776,6 +9446,12 @@
       "name": "UseEditableItemOptions",
       "sourceFile": "hooks/use-editable-item.tsx"
     },
+    {
+      "name": "DEFAULT_ANALYTICS_BAR_COLOR_MAP",
+      "sourceFile": "components/New/Analytics/Bar/utils.ts",
+      "description": "Default color map for , expressed as ratios (value / maxValue).\nA value of `0` leaves the bar empty (track shows through); a value at the maximum\nuses the dedicated full-bar color.",
+      "signature": "DEFAULT_ANALYTICS_BAR_COLOR_MAP: AnalyticsBarColorStop[]"
+    },
     {
       "name": "useThemeScope",
       "sourceFile": "components/New/ThemeScope/ThemeScope.tsx",
@@ -9934,7 +9610,7 @@
     {
       "name": "DIAL_KIT_CLASS",
       "sourceFile": "constants/public-class-names.ts",
-      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The 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  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
+      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n  /** 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  /** 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"
     }
   ]
 }