@epam/ai-dial-ui-kit 0.16.0-dev.5 → 0.16.0-dev.50

package/dist/src/components/New/SchemaRenderer/components/SchemaFieldContent.d.ts

@@ -26,5 +26,6 @@ import { SchemaFieldContentProps } from '../types';
  * @param [suppressInlineError=false] - Leaves the required error to the caller, which renders it under its own label
  * @param [fieldId] - Id given to a primitive control, for a visible label to point at
  * @param [ariaLabel] - Accessible name of the control
+ * @param [ariaDescribedBy] - Id of an error the caller renders outside the control, linked to a primitive control
  */
 export declare const SchemaFieldContent: FC<SchemaFieldContentProps>;

package/dist/src/components/New/SchemaRenderer/components/SchemaPrimitiveField.d.ts

@@ -7,6 +7,7 @@ export interface SchemaPrimitiveFieldProps {
     invalid?: boolean;
     id?: string;
     ariaLabel?: string;
+    ariaDescribedBy?: string;
 }
 /**
  * Renders a single primitive schema field: string, integer, number, boolean, enum, or const.
@@ -34,5 +35,6 @@ export interface SchemaPrimitiveFieldProps {
  * @param [invalid] - Whether the field has a validation error (applies error styling)
  * @param [id] - Id of the control, for a visible label to point at
  * @param [ariaLabel] - Accessible name of the control
+ * @param [ariaDescribedBy] - Id of the field's validation error, linked to text, number and select controls
  */
 export declare const SchemaPrimitiveField: FC<SchemaPrimitiveFieldProps>;

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

@@ -58,8 +58,10 @@ export interface SchemaFieldContentProps {
      * have no visible label next to their control, so this is what names it.
      */
     ariaLabel?: string;
+    /** Id of an error the caller renders outside the control, linked to a primitive control as its description. */
+    ariaDescribedBy?: string;
 }
-export interface SchemaFieldProps extends Omit<SchemaFieldContentProps, 'fieldId' | 'ariaLabel' | 'suppressInlineError'> {
+export interface SchemaFieldProps extends Omit<SchemaFieldContentProps, 'fieldId' | 'ariaLabel' | 'ariaDescribedBy' | 'suppressInlineError'> {
     label?: string;
 }
 export interface SchemaRendererContextValue {

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

@@ -37,8 +37,8 @@ export interface SegmentedControlProps<T extends string> {
  * revealing a panel, so it takes `role="radiogroup"` with `role="radio"`
  * segments. The group is a single tab stop — the selected segment holds it, and
  * the arrow keys, `Home` and `End` move the selection, per the ARIA radio-group
- * pattern. `DialSegmentedControl` (1.0) uses `tablist`/`tab` instead; that is
- * the behaviour this replaces.
+ * pattern. The removed 1.0 `DialSegmentedControl` used `tablist`/`tab`
+ * instead; that is the behaviour this replaced.
  *
  * An icon-only segment still needs a name: give it `aria-label`, since the icon
  * carries no text. A segment with a string `label` is named by it.
@@ -51,4 +51,4 @@ export interface SegmentedControlProps<T extends string> {
  * @param [segmentClassName] - Additional classes for every segment
  * @param [aria-label] - Names the group as a whole
  */
-export declare const SegmentedControl: <T extends string>({ items, value, onChange, disabled, className, segmentClassName: segmentClassNameProp, "aria-label": ariaLabel, }: SegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: <T extends string>({ items, value, onChange, disabled, className, segmentClassName: segmentClassNameProp, "aria-label": ariaLabel, }: SegmentedControlProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -17,6 +17,7 @@ export interface SelectProps {
     error?: string;
     caption?: string;
     ariaLabel?: string;
+    ariaDescribedBy?: string;
     searchable?: boolean;
     searchSize?: ElementSize;
     searchPlaceholder?: string;
@@ -101,6 +102,7 @@ export interface SelectProps {
  * @param [error] - Error message rendered below the field (does not by itself apply error styling, pass `invalid` too).
  * @param [caption] - Helper text rendered below the field when there is no `error`.
  * @param [ariaLabel] - Accessible name for the field; use it when there is no visible label.
+ * @param [ariaDescribedBy] - Ids of extra elements describing the field, e.g. an error rendered outside it; the field's own `error`/`caption` are linked automatically.
  * @param [searchable=false] - Show a search field in the overlay header.
  * @param [searchSize=ElementSize.Standard] - Size of the overlay search input when `searchable` is enabled.
  * @param [searchPlaceholder] - Placeholder for the overlay search input.

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

@@ -27,7 +27,7 @@ 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. */
-export declare const selectSubMenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectSubMenuCaretIcon: import('react/jsx-runtime').JSX.Element;
 /** Classes for the chevron rendered as the field's trailing icon. */
 export declare const selectFieldIconClassName = "text-secondary transition-transform";
 /**
@@ -35,6 +35,5 @@ export declare const selectFieldIconClassName = "text-secondary transition-trans
  * short enough to scan at a glance does not need to be filtered.
  */
 export declare const selectSearchThreshold = 8;
-export declare const selectSearchIcon: import("react/jsx-runtime").JSX.Element;
-export declare const selectCloseIcon: import("react/jsx-runtime").JSX.Element;
-export declare const selectEmptyStateIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectSearchIcon: import('react/jsx-runtime').JSX.Element;
+export declare const selectCloseIcon: import('react/jsx-runtime').JSX.Element;

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

@@ -0,0 +1,67 @@
+import { FC, ReactNode } from 'react';
+import { EntityIdentityItem } from '../EntityIdentity/EntityIdentity';
+/** User-visible strings of `SelectedEntityCard`. */
+export interface SelectedEntityCardLabels {
+    /** Type label text, passed to `EntityIdentity`. Defaults to the English name of `item.type`. */
+    type?: string;
+    /** Text shown when nothing is selected. Defaults to `'Not selected'`. */
+    placeholder?: string;
+}
+/** Props for `SelectedEntityCard`. */
+export interface SelectedEntityCardProps {
+    /** Id of the selected entity, `''` when there is none. Shown as-is when `item` is missing. */
+    entityId: string;
+    /** The selected entity as the catalog lists it; missing when the catalog does not. */
+    item?: EntityIdentityItem;
+    /** Whether the catalog is still loading; a skeleton stands in for a selected entity meanwhile. */
+    isLoading?: boolean;
+    /** Dims the card. */
+    isDisabled?: boolean;
+    /** Error text under the card; it also turns the card's border red. */
+    error?: string;
+    /** What rides on the selection (an effort, a context window), as a line under the name. */
+    details?: ReactNode;
+    /** User-visible strings; pass translated ones in a localised app. */
+    labels?: SelectedEntityCardLabels;
+    /** Whether to show the type label above the name — off when a heading next to the card already names it. */
+    showType?: boolean;
+    /** Width and height of the icon in px. */
+    iconSize?: number;
+    /** Heading level of the name, 1–6. */
+    headingLevel?: number;
+    /** Additional CSS classes for the card. */
+    className?: string;
+}
+/**
+ * The card of a form field that holds one selected entity — a model, an agent,
+ * a toolset: its identity, a skeleton while the catalog loads, its raw id when
+ * the catalog does not list it, or a placeholder when nothing is selected.
+ * aliases: SelectedModelCard|ModelCard|EntityCard
+ * Design system 2.0
+ *
+ * The control that changes the selection lives next to the card, not in it:
+ * the card is not interactive.
+ *
+ * @example
+ * ```tsx
+ * <SelectedEntityCard
+ *   entityId="gpt-4o"
+ *   item={{ type: EntityType.Model, name: 'GPT-4o', version: '2024-11-20' }}
+ *   isLoading={isLoading}
+ *   labels={{ type: t('Model'), placeholder: t('Select model') }}
+ * />
+ * ```
+ *
+ * @param entityId - Id of the selected entity, `''` when there is none
+ * @param [item] - The selected entity as the catalog lists it
+ * @param [isLoading=false] - Whether the catalog is still loading
+ * @param [isDisabled=false] - Dims the card
+ * @param [error] - Error text under the card; also turns its border red
+ * @param [details] - A line under the name
+ * @param [labels] - User-visible strings
+ * @param [showType=true] - Whether to show the type label
+ * @param [iconSize=44] - Icon size in px
+ * @param [headingLevel=4] - Heading level of the name
+ * @param [className] - Additional CSS classes for the card
+ */
+export declare const SelectedEntityCard: FC<SelectedEntityCardProps>;

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

@@ -0,0 +1,47 @@
+import { FC, ReactNode } from 'react';
+export interface StateScreenProps {
+    /** Headline of the state, rendered as the page's `h1`. */
+    title: ReactNode;
+    /** Optional line under the title saying what the state means or what to do. */
+    description?: ReactNode;
+    /** Glyph drawn in the round badge above the title. Decorative: hidden from assistive tech. */
+    icon?: ReactNode;
+    /** The way out of the state — typically one button (Log in, Log out, Retry). */
+    action?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+}
+/**
+ * A whole screen given over to one state the app cannot work past: signed out,
+ * access denied, a misconfigured provider.
+ * aliases: AuthScreen|LoginScreen|ForbiddenPage|AccessDenied|ErrorPage|FullPageState
+ * Design system 2.0
+ *
+ * Fills its container and centres a round icon badge, an `h1`, an optional
+ * description and an optional action. The root is a `section` named by its
+ * title, so the state is a landmark of its own. For an empty list or grid
+ * inside a page, use `NoDataContent` instead.
+ *
+ * @example
+ * ```tsx
+ * <StateScreen
+ *   icon={<IconLock size={DIAL_ICON_SIZE.LG} stroke={DIAL_KIT_ICON_STROKE} />}
+ *   title="Log in to configure your QuickApp"
+ *   description="Set up instructions, add-ons and settings."
+ *   action={<NeutralButton label="Log in" onClick={openLogin} />}
+ * />
+ * ```
+ *
+ * @param title - Headline of the state, rendered as the page's `h1`.
+ * @param [description] - Optional line under the title.
+ * @param [icon] - Glyph drawn in the round badge; the badge is omitted without one.
+ * @param [action] - The way out of the state, rendered under the text.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the title.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ */
+export declare const StateScreen: FC<StateScreenProps>;

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

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import { Step, StepStatus } from '../../../models/step';
+export interface StepsProps {
+    /** Ordered steps to render. */
+    steps: Step[];
+    /** `id` of the active step. */
+    currentStep: string;
+    /** Fired with the `id` of the step the user may move to. */
+    onChangeStep: (step: string) => void;
+    /**
+     * Already-translated text announced for a step's status, appended to the
+     * step's accessible name. Defaults to `'Completed'` / `'Error'`.
+     */
+    statusLabels?: Partial<Record<StepStatus, string>>;
+    /** Accessible name for the list of steps. */
+    ariaLabel?: string;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+/**
+ * A row of numbered steps for a multi-step flow, marking the active one and
+ * flagging completed and failed steps.
+ * aliases: StepWizard|ProgressSteps|Stepper
+ * Design system 2.0
+ *
+ * A step's number turns into a check once it is completed and the user has moved
+ * on, and into an alert icon while a failed step is the active one. A step can
+ * only be entered when every step before it is `StepStatus.VALID`; going back is
+ * always allowed.
+ *
+ * The list is an ordered list, the active step carries `aria-current="step"`,
+ * and a completed or failed step announces its status after its name.
+ *
+ * @example
+ * ```tsx
+ * <Steps
+ *   ariaLabel="Create deployment"
+ *   steps={[
+ *     { id: 'general', name: 'General', status: StepStatus.VALID },
+ *     { id: 'limits', name: 'Limits', status: StepStatus.ERROR },
+ *     { id: 'review', name: 'Review' },
+ *   ]}
+ *   currentStep="general"
+ *   onChangeStep={setCurrentStep}
+ * />
+ * ```
+ *
+ * @param steps - Ordered steps to render.
+ * @param currentStep - `id` of the active step.
+ * @param onChangeStep - Fired with the `id` of the step the user may move to.
+ * @param [statusLabels] - Translated status text announced after a step's name.
+ * @param [ariaLabel] - Accessible name for the list of steps.
+ * @param [className] - Additional CSS classes for the root element.
+ */
+export declare const Steps: FC<StepsProps>;

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

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { TabOrientation } from '../../../types/tab';
+import { TabOrientation, TabStatus } from '../../../types/tab';
 /** A single tab entry rendered by {@link Tabs}. */
 export interface TabItem {
     /** Unique identifier used to match against `activeTabId`. */
@@ -12,6 +12,18 @@ export interface TabItem {
     icon?: ReactNode;
     /** Renders the tab greyed out and unselectable, and skips it during keyboard navigation. */
     disabled?: boolean;
+    /**
+     * Flags the tab as holding an error or a warning � typically a form section
+     * that failed validation. Draws a coloured icon after the label and adds the
+     * state to the tab's accessible name. Uses the {@link TabStatus} enum.
+     */
+    status?: TabStatus;
+    /**
+     * Already-translated text announced for `status`, appended to the tab's
+     * accessible name. Defaults to `'Error'` / `'Warning'`; pass it when the
+     * interface is localised.
+     */
+    statusLabel?: string;
 }
 export interface TabsProps {
     /** Ordered list of tabs to render. */
@@ -64,6 +76,10 @@ export interface TabsProps {
  * `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.
  *
+ * A tab with a `status` (`TabStatus.Error` or `TabStatus.Warning`) draws a
+ * coloured icon after its label, and the status text joins the tab's accessible
+ * name so the state reaches assistive tech as well as sighted users.
+ *
  * `className` lands on whichever element is outermost: the heading wrapper when
  * `sectionLabel` is set, the `role="tablist"` itself when it is not.
  *

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

@@ -16,9 +16,10 @@ export interface TagProps extends NativeTagProps {
  * aliases: Chip|Pill
  * Design system 2.0
  *
- * The tag has one height — the 32px pill of the 2.0 design. There is no `size`
- * prop: a tag sizes itself, and a caller that needs a different height is
- * usually reaching for a button.
+ * The tag is the 32px pill of the 2.0 design; `TagAppearance.Bordered` is the
+ * compact 24px value chip of a form field. There is no `size` prop: a tag sizes
+ * itself, and a caller that needs a different height is usually reaching for a
+ * button.
  *
  * The label truncates rather than wrapping, and carries a native `title` so the
  * full text stays reachable when it does.
@@ -28,7 +29,9 @@ export interface TagProps extends NativeTagProps {
  * the caller: a clickable tag that is also closable gives a screen reader two
  * actions with no way to tell which one it landed on.
  *
- * No tag draws a rim; the two appearances are told apart by their fill.
+ * `outlined` and `selectable` draw no rim and are told apart by their fill;
+ * `bordered` draws one: the outlined `Badge`'s look, for a value the user can
+ * remove, on a surface the rimless fill would vanish on.
  * `TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill
  * at all until it is selected, one hover tint shared by both states, a semibold
  * label once selected, and the state carried on `aria-pressed` rather than by
@@ -55,7 +58,8 @@ export interface TagProps extends NativeTagProps {
  * @param label - Text content displayed inside the tag.
  * @param [icon] - Icon rendered before the label.
  * @param [appearance=TagAppearance.Outlined] - `outlined` is the filled chip on the raised
- * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected.
+ * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected;
+ * `bordered` is the compact rimmed value chip of a form field.
  * @param [selected=false] - Applies the accent-tinted selected styling.
  * @param [disabled=false] - Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put.
  * @param [closable=false] - Renders the remove button. Needs `onRemove` to appear.

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

@@ -6,10 +6,18 @@ import { TagAppearance } from '../../../types/tag';
  */
 export declare const tagBaseClassName = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3";
 /**
- * Fill and text colour per appearance and selection. No tag draws a rim: the
- * two appearances are told apart by their fill — `outlined` sits on the raised
- * layer, `selectable` on nothing until it is selected, where it also steps its
- * label up from secondary to primary.
+ * Shape and type scale per appearance, over `tagBaseClassName`. The bordered
+ * chip is the compact value chip of a form field — the removable twin of
+ * `Badge`'s outlined label: its 24px, 6px corner and rim on the sunken layer,
+ * with the value in primary text on the small type scale.
+ */
+export declare const tagShapeClassNames: Record<TagAppearance, string>;
+/**
+ * Fill and text colour per appearance and selection. `outlined` and
+ * `selectable` draw no rim and are told apart by their fill — `outlined` sits
+ * on the raised layer, `selectable` on nothing until it is selected, where it
+ * also steps its label up from secondary to primary. `bordered` is the one with
+ * a rim, on the sunken layer.
  */
 export declare const tagStateClassNames: Record<TagAppearance, Record<'default' | 'selected', string>>;
 /** Cursor and focus ring of a tag that can be activated. */

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

@@ -19,8 +19,8 @@ export declare const HOVER_OPEN_DELAY = 500;
  */
 export declare const arrowClassName = "fill-control-inverted";
 /**
- * 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
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `--z-index-*` in
+ * `src/styles/theme.scss`) — 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.
  *

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

@@ -52,7 +52,11 @@ export interface TransferQueueLabels {
     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. */
+    /**
+     * Confirmation description when an item failed and none is in progress.
+     * @deprecated Never shown: closing asks for confirmation only while an item
+     * is in progress, since a failed one has nothing left to lose.
+     */
     closeConfirmDescriptionFailed: string;
     /** Confirmation description when items are both in progress and failed. */
     closeConfirmDescriptionMixed: string;
@@ -103,12 +107,12 @@ export interface TransferQueueProps {
  * 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,
+ * accessible name, or "Canceled". The header carries the host's title and the
+ * 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
+ * Closing while an item is in progress asks for confirmation first; a queue
+ * whose items have all settled, failed ones included, closes straight away. 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

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

@@ -2,8 +2,6 @@ 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;
@@ -11,6 +9,6 @@ interface TransferQueueHeaderProps {
     onToggleCollapse: () => void;
     onClose: () => void;
 }
-/** Queue heading with its failed-item badge and the collapse and close controls. */
+/** Queue heading with the collapse and close controls. */
 export declare const TransferQueueHeader: FC<TransferQueueHeaderProps>;
 export {};

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

@@ -17,6 +17,8 @@ export declare const DIAL_KIT_CLASS: {
     readonly notification: "dial-kit-notification";
     /** The empty-state root of `NoDataContent`. */
     readonly noDataContent: "dial-kit-no-data-content";
+    /** The `section` root of a `StateScreen`. */
+    readonly stateScreen: "dial-kit-state-screen";
     /** 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. */
@@ -30,12 +32,26 @@ export declare const DIAL_KIT_CLASS: {
     readonly errorText: "dial-kit-error-text";
     /** The `Label` root, which wraps the `label` element and its info button. */
     readonly label: "dial-kit-label";
+    /** The root of a `LabelledText`, wrapping its caption and value. */
+    readonly labelledText: "dial-kit-labelled-text";
+    /** The `ol` root of a `Steps`, holding one button per step. */
+    readonly steps: "dial-kit-steps";
+    /** The root of an `AnalyticsCard`: the box holding its title, value and description. */
+    readonly analyticsCard: "dial-kit-analytics-card";
+    /** The root of an `AnalyticsBar`: the title row and track, stacked or inline. */
+    readonly analyticsBar: "dial-kit-analytics-bar";
+    /** The root of an `AnalyticsBarGroup`: its accordion, header and bars. */
+    readonly analyticsBarGroup: "dial-kit-analytics-bar-group";
+    /** The root of an `AnalyticsHistogram`: its title, axis and columns. */
+    readonly analyticsHistogram: "dial-kit-analytics-histogram";
     /** 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="separator"` element of a `ResizeHandle`. */
+    readonly resizeHandle: "dial-kit-resize-handle";
     /**
      * The `role="dialog"` panel of a `Popup`. Its backdrop is reached through
      * `overlayClassName`.
@@ -43,6 +59,11 @@ export declare const DIAL_KIT_CLASS: {
     readonly popup: "dial-kit-popup";
     /** The `role="dialog"` panel of a `BottomSheet`. */
     readonly bottomSheet: "dial-kit-bottom-sheet";
+    /**
+     * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on
+     * `z-popup` that holds the panel.
+     */
+    readonly bottomSheetOverlay: "dial-kit-bottom-sheet-overlay";
     /** The `role="dialog"` panel of a `SideDrawer`, open or closed. */
     readonly sideDrawer: "dial-kit-side-drawer";
     /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */
@@ -69,6 +90,8 @@ export declare const DIAL_KIT_CLASS: {
      * on a submenu's own list. It is *not* the floating panel.
      */
     readonly dropdownList: "dial-kit-dropdown-list";
+    /** The search row above the item list of a `searchable` `Dropdown`. */
+    readonly dropdownSearch: "dial-kit-dropdown-search";
     /**
      * 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
@@ -82,13 +105,6 @@ export declare const DIAL_KIT_CLASS: {
      * 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. */
@@ -141,6 +157,10 @@ export declare const DIAL_KIT_CLASS: {
     readonly avatar: "dial-kit-avatar";
     /** The root row of an `EntityIdentity`: its icon, type label, name and version. */
     readonly entityIdentity: "dial-kit-entity-identity";
+    /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */
+    readonly selectedEntityCard: "dial-kit-selected-entity-card";
+    /** The `section` root of a `FormSection`: its heading row, description and content. */
+    readonly formSection: "dial-kit-form-section";
     /** 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. */