@epam/ai-dial-ui-kit 0.15.0-dev.2 → 0.15.0-dev.21

package/dist/src/components/New/Popup/constants.d.ts

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../../types/popup';
-export declare const popupOverlayBaseClassName = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
+export declare const popupOverlayBaseClassName = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
 export declare const popupBaseClassName = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto";
 export declare const popupHeaderClassName = "flex flex-row items-center justify-between px-6 py-4";
 export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary";

package/dist/src/components/New/Select/constants.d.ts

@@ -20,9 +20,10 @@ export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]
  * 344px — not the panel around them, so the search row and Select All stay
  * put while the list moves under them. The panel keeps its own cap on the
  * available viewport height, which takes over on a screen too short for this
- * one.
+ * one. `py-1` matches the Dropdown menu's list inset, so the first and last
+ * rows (and their focus ring) do not sit flush against the panel edge.
  */
-export declare const selectOptionsScrollClassName = "max-h-[344px] overflow-y-auto";
+export declare const selectOptionsScrollClassName: string;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;
 /** Marks an option that opens a nested list. Matches the dropdown's caret. */

package/dist/src/components/New/SharedEntityIndicator/SharedEntityIndicator.d.ts

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from 'react';
+/** Props for `SharedEntityIndicator`. */
+export interface SharedEntityIndicatorProps {
+    /** Accessible name of the badge. */
+    label?: string;
+    /** Tooltip shown while the badge is hovered. */
+    tooltip?: ReactNode;
+    /** Arrow size in px. */
+    size?: number;
+    /** Additional CSS classes for the badge, e.g. to position it over an icon. */
+    className?: string;
+}
+/**
+ * A small arrow badge marking an entity as shared.
+ * aliases: SharedIcon|AccessIndicator
+ * Design system 2.0
+ *
+ * A `role="img"` named by `label`, so it can stand on its own. Placed inside a
+ * larger `role="img"` — as `FileIcon` does — its name is folded into the
+ * parent's, which is why `FileIcon` names the shared state itself. The tooltip
+ * is a pointer-only hint: the badge is not focusable, and the tooltip never
+ * reaches assistive technology, so `label` is what carries the meaning.
+ *
+ * @example
+ * ```tsx
+ * <SharedEntityIndicator />
+ * <SharedEntityIndicator tooltip="Shared with 3 people" className="absolute -bottom-0.5 -left-0.5" />
+ * ```
+ *
+ * @param [label='Shared'] - Accessible name of the badge
+ * @param [tooltip='Shared'] - Tooltip shown while the badge is hovered
+ * @param [size=12] - Arrow size in px
+ * @param [className] - Additional CSS classes for the badge
+ */
+export declare const SharedEntityIndicator: FC<SharedEntityIndicatorProps>;

package/dist/src/components/New/Tabs/Tabs.d.ts

@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
+import { TabOrientation } from '../../../types/tab';
 /** A single tab entry rendered by {@link Tabs}. */
 export interface TabItem {
     /** Unique identifier used to match against `activeTabId`. */
@@ -7,6 +8,8 @@ export interface TabItem {
     label: string;
     /** Optional numeric badge rendered after the label. */
     count?: number;
+    /** Decorative icon rendered before the label. The label names the tab, so the icon is hidden from assistive tech. */
+    icon?: ReactNode;
     /** Renders the tab greyed out and unselectable, and skips it during keyboard navigation. */
     disabled?: boolean;
 }
@@ -17,19 +20,35 @@ export interface TabsProps {
     activeTabId: string;
     /** Fired with the tab's `id` when the user selects a tab. */
     onTabChange: (tabId: string) => void;
+    /** Layout direction of the tab list. Uses the {@link TabOrientation} enum. Defaults to `TabOrientation.Horizontal`. */
+    orientation?: TabOrientation;
+    /**
+     * Already-translated heading rendered above the tabs, which also names the
+     * tab list. Omit to render no heading.
+     */
+    sectionLabel?: string;
     /**
      * Accessible name for the tab list. A row of tabs carries no name of its own,
-     * so screen readers announce it as an unlabelled list without this.
+     * so screen readers announce it as an unlabelled list without this — unless
+     * `sectionLabel` is naming it already.
      */
     ariaLabel?: string;
-    /** Additional CSS classes for the tab list container. */
+    /** Additional CSS classes for the root element. */
     className?: string;
+    /**
+     * Additional CSS classes for the `role="tablist"`. `className` reaches it
+     * only when there is no `sectionLabel`, since the heading wrapper is then
+     * the root; this prop reaches it in either case.
+     */
+    tabListClassName?: string;
     /** Additional CSS classes applied to every tab. */
     tabClassName?: string;
+    /** Additional CSS classes for the `sectionLabel` heading. */
+    sectionLabelClassName?: string;
 }
 /**
- * A horizontal row of tabs, underlining the active one and showing optional count badges.
- * aliases: TabRow|TabNavigation|TabBar
+ * A row or rail of tabs, marking the active one and showing optional icons and count badges.
+ * aliases: TabRow|TabNavigation|TabBar|VerticalTabs|SettingsNav|SideNav
  * Design system 2.0
  *
  * Follows the ARIA tabs pattern with automatic activation: only the active tab is
@@ -38,6 +57,16 @@ export interface TabsProps {
  * Tabs marked `disabled` are greyed out, cannot be clicked, and are skipped by
  * keyboard navigation.
  *
+ * `TabOrientation.Horizontal` draws the default row: the active tab takes a
+ * gradient underline, and `ArrowLeft` / `ArrowRight` move along it.
+ * `TabOrientation.Vertical` draws the settings-page rail instead — full-width
+ * rows with the active one on a tinted pill rather than an underline, driven by
+ * `ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs
+ * label whole pages of a settings surface; the row, when they filter one.
+ *
+ * `className` lands on whichever element is outermost: the heading wrapper when
+ * `sectionLabel` is set, the `role="tablist"` itself when it is not.
+ *
  * The component renders the tabs only; the panels stay with the consumer.
  *
  * @example
@@ -53,11 +82,30 @@ export interface TabsProps {
  * />
  * ```
  *
+ * @example A settings rail, named by its own heading.
+ * ```tsx
+ * <Tabs
+ *   orientation={TabOrientation.Vertical}
+ *   sectionLabel={t('Settings')}
+ *   className="w-[240px] shrink-0 border-e border-e-tertiary"
+ *   tabs={[
+ *     { id: 'preferences', label: t('Preferences'), icon: <IconSettings size={18} /> },
+ *     { id: 'usage', label: t('Usage'), icon: <IconChartBar size={18} /> },
+ *   ]}
+ *   activeTabId={activeTabId}
+ *   onTabChange={setActiveTabId}
+ * />
+ * ```
+ *
  * @param tabs - Ordered list of tabs to render.
  * @param activeTabId - ID of the currently selected tab.
  * @param onTabChange - Fired with the tab's `id` when the user selects a tab.
+ * @param [orientation=TabOrientation.Horizontal] - Layout direction of the tab list.
+ * @param [sectionLabel] - Heading rendered above the tabs, which also names the tab list.
  * @param [ariaLabel] - Accessible name for the tab list.
- * @param [className] - Additional CSS classes for the tab list container.
+ * @param [className] - Additional CSS classes for the root element.
+ * @param [tabListClassName] - Additional CSS classes for the `role="tablist"`.
  * @param [tabClassName] - Additional CSS classes applied to every tab.
+ * @param [sectionLabelClassName] - Additional CSS classes for the `sectionLabel` heading.
  */
 export declare const Tabs: FC<TabsProps>;

package/dist/src/components/New/Tooltip/constants.d.ts

@@ -19,8 +19,10 @@ export declare const HOVER_OPEN_DELAY = 500;
  */
 export declare const arrowClassName = "fill-control-inverted";
 /**
- * Tooltips sit above popups, dropdowns and the calendar (all `z-[53]`), since
- * they can be triggered by a control inside one of them.
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `zIndex` in
+ * `tailwind.config.js`) — above popups (`z-popup`), dropdowns and the calendar
+ * (`z-floating`) and interactive tooltips — since they can be triggered by a
+ * control inside any of them.
  *
  * `max-w-[376px]` is the cap the design puts on a tooltip: at `dial-small-text`
  * that is around 60 characters a line, past which a line stops being
@@ -36,4 +38,4 @@ export declare const arrowClassName = "fill-control-inverted";
  * nothing to see around a 7px triangle that the box's own shadow does not
  * already carry.
  */
-export declare const tooltipClassName = "z-[55] max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";
+export declare const tooltipClassName = "z-tooltip max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";

package/dist/src/components/New/TransferQueue/TransferQueue.d.ts

@@ -0,0 +1,139 @@
+import { FC } from 'react';
+import { TransferQueueItemStatus } from '../../../types/transfer-queue';
+/** One file (or other named unit of work) tracked by a `TransferQueue`. */
+export interface TransferQueueItem {
+    /** Stable identifier, passed back to `onCancelItem`. */
+    id: string;
+    /** Name shown on the row; a file's extension also picks its `FileIcon` glyph. */
+    name: string;
+    /** Current lifecycle status. */
+    status: TransferQueueItemStatus;
+    /**
+     * Completion as 0–100. Feeds only the aggregate bar shown while the queue
+     * is collapsed; a settled item without one counts as 100, a running one as 0.
+     */
+    percent?: number;
+    /**
+     * Why a `Failed` or `Warning` item ended as it did. Shown as the status
+     * icon's tooltip and used as its accessible name; falls back to
+     * `labels.failedMessage` / `labels.warningMessage`.
+     */
+    message?: string;
+}
+/** Every user-visible string of `TransferQueue`. */
+export interface TransferQueueLabels {
+    /** Accessible name of an in-progress row's cancel control. */
+    cancelItemAriaLabel: (name: string) => string;
+    /** Accessible name of an in-progress row's spinner. */
+    itemProgressAriaLabel: (name: string) => string;
+    /** Accessible name of a succeeded row's check icon. */
+    successLabel: string;
+    /** Trailing text on a canceled row. */
+    canceledLabel: string;
+    /** Fallback reason for a failed item without its own `message`. */
+    failedMessage: string;
+    /** Fallback reason for a warned item without its own `message`. */
+    warningMessage: string;
+    /** Accessible name of the collapsed queue's aggregate progress bar. */
+    queueProgressAriaLabel: string;
+    /**
+     * The aggregate bar's `aria-valuetext`. Given settled and total counts
+     * rather than a percentage, because "3 of 10 files" reads better than "36%"
+     * when the work is a list of files.
+     */
+    queueProgressValueText: (completed: number, total: number) => string;
+    /** Accessible name of the collapse toggle while expanded. */
+    collapseAriaLabel: string;
+    /** Accessible name of the expand toggle while collapsed. */
+    expandAriaLabel: string;
+    /** Accessible name of the close control. */
+    closeAriaLabel: string;
+    /** Heading of the close-confirmation dialog. */
+    closeConfirmHeader: string;
+    /** Confirmation description when an item is in progress and none failed. */
+    closeConfirmDescriptionInProgress: string;
+    /** Confirmation description when an item failed and none is in progress. */
+    closeConfirmDescriptionFailed: string;
+    /** Confirmation description when items are both in progress and failed. */
+    closeConfirmDescriptionMixed: string;
+    /** Confirm button of the close-confirmation dialog. */
+    closeConfirmLabel: string;
+    /** Cancel button of the close-confirmation dialog. */
+    closeCancelLabel: string;
+}
+/** Props for `TransferQueue`. */
+export interface TransferQueueProps {
+    /**
+     * Heading, rendered verbatim. The host composes any count into it
+     * (e.g. "Importing 5 files"); the component never pluralizes.
+     */
+    title: string;
+    /** Items to show, in display order. The queue renders nothing when empty. */
+    items: TransferQueueItem[];
+    /**
+     * Called when the queue should close — from the close control (after a
+     * confirmation while work is in progress or a failure is unread), or by
+     * itself once every item has succeeded.
+     */
+    onClose: () => void;
+    /**
+     * Called with an item's id when the user cancels it. The host aborts the
+     * work and keeps the item in `items` with status `Canceled`. Without it,
+     * in-progress rows show a spinner only.
+     */
+    onCancelItem?: (id: string) => void;
+    /** Overrides for the English default strings. */
+    labels?: Partial<TransferQueueLabels>;
+    /**
+     * Milliseconds after every item succeeded before `onClose` is called by
+     * itself. Defaults to 8000; `0` or less disables it.
+     */
+    autoCloseDelay?: number;
+    /** Additional CSS classes for the root panel. */
+    className?: string;
+    /** Additional CSS classes for the scrollable list of rows. */
+    bodyClassName?: string;
+}
+/**
+ * A floating panel listing the files of an upload, download, import or export
+ * with a live status per row.
+ * aliases: UploadQueue|ImportQueue|ExportQueue|UploadProgress|ProgressToast
+ * Design system 2.0
+ *
+ * Each row shows the file's `FileIcon` and name, and a trailing status: a
+ * spinner (with a cancel control on hover or focus) while in progress, a check
+ * on success, a warning or error icon whose reason is both its tooltip and its
+ * accessible name, or "Canceled". The header carries the host's title, a count
+ * of failed items, and collapse and close controls. Collapsed while work runs,
+ * the rows are replaced by one aggregate `ProgressBar`.
+ *
+ * Closing while an item is in progress or has failed asks for confirmation
+ * first. Once every item has succeeded the queue closes itself after
+ * `autoCloseDelay`; a warned or canceled row keeps it open so it can be read.
+ *
+ * The root is a polite `role="status"` live region. Positioning is left to
+ * the host — wrap it in a fixed container at the screen corner.
+ *
+ * @example
+ * ```tsx
+ * <TransferQueue
+ *   title="Importing 2 files"
+ *   items={[
+ *     { id: '1', name: 'report.pdf', status: TransferQueueItemStatus.Success },
+ *     { id: '2', name: 'data.csv', status: TransferQueueItemStatus.InProgress, percent: 40 },
+ *   ]}
+ *   onClose={handleClose}
+ *   onCancelItem={handleCancel}
+ * />
+ * ```
+ *
+ * @param title - Heading, rendered verbatim
+ * @param items - Items to show, in display order
+ * @param onClose - Called when the queue should close
+ * @param [onCancelItem] - Called with an item's id when the user cancels it
+ * @param [labels] - Overrides for the English default strings
+ * @param [autoCloseDelay=8000] - Delay before an all-succeeded queue closes itself; `0` disables
+ * @param [className] - Additional CSS classes for the root panel
+ * @param [bodyClassName] - Additional CSS classes for the list of rows
+ */
+export declare const TransferQueue: FC<TransferQueueProps>;

package/dist/src/components/New/TransferQueue/TransferQueueHeader.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { TransferQueueLabels } from './TransferQueue';
+interface TransferQueueHeaderProps {
+    title: string;
+    /** The badge renders only when this is positive. */
+    failedCount: number;
+    isCollapsed: boolean;
+    /** Id of the rows container the collapse toggle controls. */
+    itemsId: string;
+    labels: TransferQueueLabels;
+    onToggleCollapse: () => void;
+    onClose: () => void;
+}
+/** Queue heading with its failed-item badge and the collapse and close controls. */
+export declare const TransferQueueHeader: FC<TransferQueueHeaderProps>;
+export {};

package/dist/src/components/New/TransferQueue/TransferQueueRow.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { TransferQueueItem, TransferQueueLabels } from './TransferQueue';
+interface TransferQueueRowProps {
+    item: TransferQueueItem;
+    labels: TransferQueueLabels;
+    onCancel?: (id: string) => void;
+}
+/** One queue row: the file's icon and name, plus a trailing status slot. */
+export declare const TransferQueueRow: FC<TransferQueueRowProps>;
+export {};

package/dist/src/components/New/TransferQueue/constants.d.ts

@@ -0,0 +1,6 @@
+import { TransferQueueLabels } from './TransferQueue';
+/** Delay before a queue whose items have all succeeded closes itself. */
+export declare const TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS = 8000;
+export declare const STATUS_SLOT_CLASS = "flex size-7 shrink-0 items-center justify-center";
+/** English defaults for every `TransferQueue` string; a host passes translations through `labels`. */
+export declare const DEFAULT_TRANSFER_QUEUE_LABELS: TransferQueueLabels;

package/dist/src/components/New/constants/overlay.d.ts

@@ -5,6 +5,11 @@
  */
 /** The floating panel itself: rounded raised card with a one-unit inset. */
 export declare const overlaySurfaceClassName = "rounded-xl bg-layer-raised p-1 shadow-md";
+/**
+ * Stacks the rows of a menu or option list with a 2px gap, so the tints of
+ * adjacent selected and hovered rows read as separate rows instead of one block.
+ */
+export declare const overlayListClassName = "flex flex-col gap-0.5";
 /**
  * A nested panel opened from a row of the surface above it. It is the same
  * object as its parent panel, so it reads from `overlaySurfaceClassName` too —
@@ -12,6 +17,14 @@ export declare const overlaySurfaceClassName = "rounded-xl bg-layer-raised p-1 s
  * rather than by the trigger further up.
  */
 export declare const overlaySubMenuClassName: string;
+/**
+ * A submenu panel that lists kit-rendered rows. The top-level menu and option
+ * list wrap their rows in `py-1` inside the panel's `p-1`; a submenu renders
+ * its rows straight into the panel, so it takes the same total vertical inset
+ * here. A caller-rendered submenu body keeps the plain panel, as a
+ * `renderOverlay` body does at the top level.
+ */
+export declare const overlaySubMenuListClassName: string;
 /**
  * A selectable row inside the panel. Keeps a visible focus ring: these rows are
  * reached by keyboard, and the 1.0 versions suppressed the ring outright.

package/dist/src/components/Popup/constants.d.ts

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../types/popup';
-export declare const overlayBaseClassName = "z-[52] flex items-center justify-center bg-blackout md:p-4";
+export declare const overlayBaseClassName = "z-popup flex items-center justify-center bg-blackout md:p-4";
 export declare const popupDividerClassName = "divide-tertiary divide-y";
 export declare const popupHeaderClassName = "flex flex-row justify-between py-4 px-6 items-center";
 export declare const popupSizeClassMap: Record<PopupSize, string>;

package/dist/src/components/SchemaRenderer/types.d.ts

@@ -80,6 +80,17 @@ export interface SchemaRendererTexts {
     selectTypePlaceholder: string;
     removeItemAriaLabel: string;
     removeFieldAriaLabel: string;
+    typeColumnHeader: string;
+    entryTypeString: string;
+    entryTypeNumber: string;
+    entryTypeBoolean: string;
+    entryTypeNull: string;
+    entryTypeObject: string;
+    entryTypeArray: string;
+    entryTypeChangeWarning: string;
+    booleanTrueOption: string;
+    booleanFalseOption: string;
+    invalidJsonError: string;
 }
 export declare const DEFAULT_SCHEMA_TEXTS: SchemaRendererTexts;
 export interface DialSchemaRendererProps {

package/dist/src/components/SchemaRenderer/utils.d.ts

@@ -1,4 +1,4 @@
-import { JsonSchema, JsonSchemaDef, ValidationError } from './types';
+import { JsonSchemaType, JsonSchema, JsonSchemaDef, ValidationError } from './types';
 export declare function resolveRef(schema: JsonSchemaDef, rootSchema: JsonSchema, depth?: number): JsonSchemaDef;
 export declare function sortByPropertyOrder(entries: [string, JsonSchemaDef][]): [string, JsonSchemaDef][];
 export declare function isMissingRequiredValue(value: unknown): boolean;
@@ -11,3 +11,7 @@ export declare function buildSummary(value: unknown, schema: JsonSchemaDef, root
 export declare function detectAnyOfVariant(value: unknown, schemas: JsonSchemaDef[], rootSchema: JsonSchema): number;
 export declare function getItemTitle(item: unknown, discriminatorProp: string | undefined, index: number): string;
 export declare function getSchemaDefault(schema: JsonSchemaDef): unknown;
+export type EntryType = JsonSchemaType.String | JsonSchemaType.Number | JsonSchemaType.Boolean | JsonSchemaType.Null | JsonSchemaType.Object | JsonSchemaType.Array;
+export declare const ENTRY_TYPE_OPTIONS: EntryType[];
+export declare function inferEntryType(value: unknown): EntryType;
+export declare function getEntryTypeDefault(type: EntryType): unknown;

package/dist/src/constants/public-class-names.d.ts

@@ -0,0 +1,189 @@
+export declare const DIAL_KIT_CLASS: {
+    /** The `role="status"` root of a `Spinner`. */
+    readonly 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.
+     */
+    readonly progressBar: "dial-kit-progress-bar";
+    /** The root of a `Skeleton`, wrapping its avatar and text rows. */
+    readonly 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.
+     */
+    readonly notification: "dial-kit-notification";
+    /** The empty-state root of `NoDataContent`. */
+    readonly noDataContent: "dial-kit-no-data-content";
+    /** The `role="status"` panel of a `TransferQueue`: header, rows and aggregate bar. */
+    readonly transferQueue: "dial-kit-transfer-queue";
+    /** The text element of a `Highlight`, which renders the matched query. */
+    readonly highlight: "dial-kit-highlight";
+    /** The caption line under a field, rendered by `CaptionText`. */
+    readonly captionText: "dial-kit-caption-text";
+    /**
+     * A caption in its error variant — what `ErrorText` renders. Additive to
+     * `captionText`, since one component draws both.
+     */
+    readonly errorText: "dial-kit-error-text";
+    /** The `Label` root, which wraps the `label` element and its info button. */
+    readonly label: "dial-kit-label";
+    /** The `article` element of a `CardShell`. */
+    readonly cardShell: "dial-kit-card-shell";
+    /** The `aside` element of a `CollapsibleSidebar`. */
+    readonly collapsibleSidebar: "dial-kit-collapsible-sidebar";
+    /** The content box inside a `ResizableContainer`'s resize frame. */
+    readonly resizableContainer: "dial-kit-resizable-container";
+    /**
+     * The `role="dialog"` panel of a `Popup`. Its backdrop is reached through
+     * `overlayClassName`.
+     */
+    readonly popup: "dial-kit-popup";
+    /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */
+    readonly confirmationPopup: "dial-kit-confirmation-popup";
+    /** The root of an `Accordion`. */
+    readonly accordion: "dial-kit-accordion";
+    /** The breadcrumb root of a `FolderPath`. */
+    readonly folderPath: "dial-kit-folder-path";
+    /** The `nav` element of a `Breadcrumbs` trail. */
+    readonly 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.
+     */
+    readonly breadcrumbsItem: "dial-kit-breadcrumbs-item";
+    /**
+     * The trigger wrapper of a `Dropdown`. Its floating panel is reached through
+     * `listClassName`.
+     */
+    readonly 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.
+     */
+    readonly 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.
+     */
+    readonly 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.
+     */
+    readonly menuItemCheck: "dial-kit-menuitem-check";
+    /** The primary icon of a `DialDropdownIcon` trigger. */
+    readonly dropdownIcon: "dial-kit-dropdown-icon";
+    /**
+     * The caret badge of a `DialDropdownIcon` trigger — the round plate the
+     * chevron sits on. Absent when `showCaret` is `false`.
+     */
+    readonly dropdownIconCaret: "dial-kit-dropdown-icon-caret";
+    /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */
+    readonly tooltip: "dial-kit-tooltip";
+    /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */
+    readonly interactiveTooltip: "dial-kit-interactive-tooltip";
+    /** The text element of an `EllipsisTooltip`, which is also its trigger. */
+    readonly ellipsisTooltip: "dial-kit-ellipsis-tooltip";
+    /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */
+    readonly search: "dial-kit-search";
+    /** The `PasswordInput` field, additive to `dial-kit-input`. */
+    readonly passwordInput: "dial-kit-password-input";
+    /** The `NumberInput` field, additive to `dial-kit-input`. */
+    readonly numberInput: "dial-kit-number-input";
+    /** The `TagInput` field, additive to `dial-kit-input`. */
+    readonly tagInput: "dial-kit-tag-input";
+    /** The root of a `Select`, wrapping its label, field and caption. */
+    readonly select: "dial-kit-select";
+    /** The trigger button of an `InlineSelect`. */
+    readonly inlineSelect: "dial-kit-inline-select";
+    /** The root of a `Calendar`, wrapping its label and date field. */
+    readonly calendar: "dial-kit-calendar";
+    /** The drop area of a `FileDropzone`. */
+    readonly fileDropzone: "dial-kit-file-dropzone";
+    /**
+     * The root of a `FileIcon`, wrapping the file or folder glyph (or
+     * its spinner while loading) and the shared badge.
+     */
+    readonly fileIcon: "dial-kit-file-icon";
+    /** The row of a `FileName`: its type icon, the name and any details. */
+    readonly fileName: "dial-kit-file-name";
+    /** The `FileName` row of a `FolderName`, additive to `fileName`. */
+    readonly folderName: "dial-kit-folder-name";
+    /**
+     * The `role="img"` badge of a `SharedEntityIndicator` — standalone, or the
+     * shared badge a `FileIcon` draws over its glyph.
+     */
+    readonly sharedEntityIndicator: "dial-kit-shared-entity-indicator";
+    /** The row of a `Switch`: the control and its label. */
+    readonly switch: "dial-kit-switch";
+    /** The row of a `Checkbox`: the box and its label. */
+    readonly checkbox: "dial-kit-checkbox";
+    /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */
+    readonly checkboxBox: "dial-kit-checkbox-box";
+    /** The row of a `Radio`: the circle and its label. */
+    readonly radio: "dial-kit-radio";
+    /** The root of a `RadioGroup`, wrapping its label and its radios. */
+    readonly radioGroup: "dial-kit-radio-group";
+    /**
+     * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed
+     * field that opens the group.
+     */
+    readonly radioGroupPopupField: "dial-kit-radio-group-popup-field";
+    /** The `role="radiogroup"` track of a `SegmentedControl`. */
+    readonly segmentedControl: "dial-kit-segmented-control";
+    /** One segment of a `SegmentedControl`. */
+    readonly 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`.
+     */
+    readonly 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.
+     */
+    readonly 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`.
+     */
+    readonly tab: "dial-kit-tab";
+    /**
+     * The selected tab, additive to `tab`. A horizontal row draws its selection
+     * with `dial-kit-tab-selected-underline`, which carries the gradient rule;
+     * this one carries no declarations and marks the selected tab in either
+     * orientation.
+     */
+    readonly tabSelected: "dial-kit-tab-selected";
+    /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */
+    readonly 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.
+     */
+    readonly filterChips: "dial-kit-filter-chips";
+    /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */
+    readonly tag: "dial-kit-tag";
+    /**
+     * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it
+     * already carries.
+     */
+    readonly toggleIconButton: "dial-kit-toggle-icon-button";
+    /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */
+    readonly closeButton: "dial-kit-close-button";
+    /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */
+    readonly infoButton: "dial-kit-info-button";
+    /**
+     * The wrapper of a `ButtonDropdown` — its trigger carries
+     * `dial-kit-base-button`.
+     */
+    readonly buttonDropdown: "dial-kit-button-dropdown";
+};