@epam/ai-dial-ui-kit 0.16.0-dev.4 → 0.16.0-dev.43

package/dist/src/components/New/Calendar/TimePickerPanel.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+export interface TimePickerPanelProps {
+    /** Current `"HH:mm"` value, or an empty/partial string when nothing is picked yet. */
+    value: string;
+    /** Fired with a complete `"HH:mm"` value; `done` is true once the minutes were chosen. */
+    onSelect: (next: string, done: boolean) => void;
+}
+/**
+ * Two-column hour/minute list shown in the `time` mode popover. Picking an
+ * hour keeps the current minutes (or `00`); picking minutes keeps the current
+ * hour (or `00`) and signals completion so the popover can close.
+ * @param value - current `"HH:mm"` value
+ * @param onSelect - fired with the next complete value and whether to close
+ */
+export declare const TimePickerPanel: FC<TimePickerPanelProps>;

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

@@ -1,17 +1,19 @@
 import { CalendarMode } from '../../../types/calendar';
 export declare const DEFAULT_CALENDAR_LOCALE = "en-GB";
 export declare const calendarModeDefaultPlaceholder: Record<CalendarMode, string>;
-export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
+export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-hidden transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
 export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent";
 export declare const calendarFieldInvalidClassName = "!border-error";
 export declare const calendarPopoverClassName = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md";
-export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus";
+export declare const timePickerPopoverClassName = "z-floating rounded-lg bg-layer-raised p-2 shadow-md";
+export declare const timePickerButtonClassName = "absolute end-2 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded-lg text-secondary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus disabled:cursor-not-allowed disabled:text-control-disable-primary disabled:hover:bg-transparent";
+export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus";
 export declare const calendarDaySelectedClassName = "bg-control-accent text-control-permanent";
 export declare const calendarDayTodayClassName = "text-accent dial-small-semi-text";
 export declare const calendarDayOutsideClassName = "text-control-disable-primary";
 export declare const calendarFieldIconClassName = "text-secondary";
-export declare const calendarIcon: import("react/jsx-runtime").JSX.Element;
+export declare const calendarIcon: import('react/jsx-runtime').JSX.Element;
 export declare const calendarNavIcons: {
-    prev: import("react/jsx-runtime").JSX.Element;
-    next: import("react/jsx-runtime").JSX.Element;
+    prev: import('react/jsx-runtime').JSX.Element;
+    next: import('react/jsx-runtime').JSX.Element;
 };

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

@@ -9,9 +9,16 @@ export interface CaptionTextProps extends HTMLAttributes<HTMLSpanElement> {
  * aliases: HelperText|ValidationText
  * Design system 2.0
  *
+ * It carries no live-region role: a field caption or error is described, not
+ * announced. Give it an `id` and point the control's `aria-describedby` at it
+ * (the 2.0 form controls do this for their own `caption` / `error`). Wrap it in
+ * a `role="alert"` region only for a message that must interrupt, such as a
+ * failed submit.
+ *
  * @example
  * ```tsx
- * <CaptionText text="This field is required" variant={CaptionType.Error} />
+ * <input aria-describedby="name-error" aria-invalid />
+ * <CaptionText id="name-error" text="This field is required" variant={CaptionType.Error} />
  * ```
  *
  * @param [text] - The text to display. If undefined or empty, nothing is rendered

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

@@ -2,6 +2,7 @@ import { Placement } from '@floating-ui/react';
 import { CSSProperties, FC, MouseEvent, ReactNode, RefObject } from 'react';
 import { DropdownTrigger } from '../../../types/dropdown';
 import { DropdownItem } from '../../../models/dropdown';
+import { DropdownItemFilter } from './search';
 export interface DropdownProps {
     children: ReactNode;
     items?: DropdownItem[];
@@ -46,6 +47,34 @@ export interface DropdownProps {
      * opens, matching the pre-existing behavior.
      */
     initialFocus?: 0 | -1 | RefObject<HTMLElement | null>;
+    /**
+     * Puts a search field above `items` that narrows them as the user types and
+     * highlights the match in each remaining label. The query is cleared when
+     * the menu closes.
+     */
+    searchable?: boolean;
+    /** Controlled query of the search field; when omitted, the dropdown keeps its own. */
+    searchValue?: string;
+    /** Fired with every edit of the search field, and with `''` when the menu closes. */
+    onSearchChange?: (value: string) => void;
+    /** Placeholder and accessible name of the search field. */
+    searchPlaceholder?: string;
+    /** Accessible name of the search field's clear button. */
+    searchClearLabel?: string;
+    /** Text shown, and announced, when the query leaves no items. */
+    noResultsLabel?: string;
+    /**
+     * Decides whether an item matches the query, which arrives trimmed and
+     * lower-cased. Defaults to a substring match on a string `label`. A submenu
+     * whose own row matches keeps all its children; otherwise it keeps only the
+     * matching ones, and disappears when none do.
+     */
+    filterItem?: DropdownItemFilter;
+    /**
+     * Number of rows the item list shows before it scrolls. The cap applies to
+     * the list alone, so a search field or header stays in view above it.
+     */
+    maxVisibleItems?: number;
 }
 /**
  *
@@ -83,6 +112,11 @@ export interface DropdownProps {
  * <Dropdown closable renderOverlay={() => <div className="p-3">Custom content</div>}>
  *   <button type="button" className="px-3 py-2 rounded border">Custom</button>
  * </Dropdown>
+ *
+ * // Searchable menu, seven rows tall before it scrolls
+ * <Dropdown searchable maxVisibleItems={7} items={items}>
+ *   <button type="button" className="px-3 py-2 rounded border">Create</button>
+ * </Dropdown>
  * ```
  *
  * @param children - Trigger element(s) to anchor and open the menu
@@ -111,5 +145,13 @@ export interface DropdownProps {
  * @param [matchReferenceWidth=true] - Whether to match the reference element's width
  * @param [maxDropdownHeight] - Maximum height of the dropdown menu; when omitted, no limit is applied
  * @param [initialFocus] - Initial focus target inside the overlay on open, forwarded to `FloatingFocusManager`; when omitted, matches pre-existing behavior
+ * @param [searchable=false] - Show a search field above `items` that filters them and highlights the match
+ * @param [searchValue] - Controlled query of the search field
+ * @param [onSearchChange] - Fired with every edit of the search field, and with `''` when the menu closes
+ * @param [searchPlaceholder="Search"] - Placeholder and accessible name of the search field
+ * @param [searchClearLabel="Clear search"] - Accessible name of the search field's clear button
+ * @param [noResultsLabel="No results found"] - Text shown and announced when the query leaves no items
+ * @param [filterItem] - Item matcher; defaults to a case-insensitive substring match on a string `label`
+ * @param [maxVisibleItems] - Rows the item list shows before it scrolls
  */
 export declare const Dropdown: FC<DropdownProps>;

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

@@ -11,5 +11,11 @@ export declare const dropdownItemListClassName: string;
  */
 export declare const dropdownItemBaseClassName: string;
 export declare const dropdownDividerClassName = "my-1 border-t border-tertiary";
+/** The search row of a `searchable` dropdown: pinned above the item list, which scrolls on its own. */
+export declare const dropdownSearchClassName = "shrink-0 px-1 pt-1";
+/** The no-results line of a `searchable` dropdown, styled as a `PlainText` row. */
+export declare const dropdownNoResultsClassName = "px-3 py-2 text-secondary dial-caption-text";
+/** Height of the item list that shows exactly `rows` rows before it scrolls. */
+export declare const getDropdownListHeight: (rows: number) => number;
 export declare const dropdownGap = 4;
-export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+export declare const submenuCaretIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Dropdown/search.d.ts

@@ -0,0 +1,9 @@
+import { DropdownItem } from '../../../models/dropdown';
+/** Decides whether an item matches a non-empty, trimmed, lower-cased query. */
+export type DropdownItemFilter = (item: DropdownItem, query: string) => boolean;
+/** Case-insensitive substring match on a string `label`; an item with a non-string label never matches. */
+export declare const matchDropdownItemLabel: DropdownItemFilter;
+/** Returns `items` narrowed to the rows matching `query`; an empty query returns `items` unchanged. */
+export declare const filterDropdownItems: (items: DropdownItem[], query: string, isMatch?: DropdownItemFilter) => DropdownItem[];
+/** Returns `items` with every string row label, submenus included, rendered through a single-line `Highlight` of `query`. */
+export declare const highlightDropdownItems: (items: DropdownItem[], query: string) => DropdownItem[];

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

@@ -26,6 +26,8 @@ export interface EntityIdentityProps {
     item: EntityIdentityItem;
     /** User-visible strings; pass translated ones in a localised app. */
     labels?: EntityIdentityLabels;
+    /** Whether to show the type label above the name. */
+    showType?: boolean;
     /** Whether to show `item.version` next to the name. */
     showVersion?: boolean;
     /** Whether to show the featured chip when `item.isFeatured` is true. */
@@ -61,8 +63,9 @@ export interface EntityIdentityProps {
  *
  * The type label is plain uppercase text coloured by `item.type`. The icon is
  * a square `Avatar`, so a missing or broken image falls back to the initials of
- * the name. The icon is decorative: the name next to it already names the
- * entity.
+ * the name. The image sits on the `bg-entity-icon` plate, so a dark theme can
+ * keep a dark, transparent logo legible. The icon is decorative: the name next
+ * to it already names the entity.
  *
  * @example
  * ```tsx
@@ -74,6 +77,7 @@ export interface EntityIdentityProps {
  *
  * @param item - The entity to display
  * @param [labels] - User-visible strings
+ * @param [showType=true] - Whether to show the type label
  * @param [showVersion=true] - Whether to show the version
  * @param [hasFeaturedTag=true] - Whether to show the featured chip for a featured entity
  * @param [iconSize=48] - Icon size in px

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

@@ -66,4 +66,4 @@ export interface FilterChipsProps<T extends string = string> {
  * @param [aria-label] - Names the row as a whole
  * @param [aria-labelledby] - Names the row from an existing element, e.g. a visible heading
  */
-export declare const FilterChips: <T extends string = string>({ items, value, onChange, stretch, className, chipClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: FilterChipsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterChips: <T extends string = string>({ items, value, onChange, stretch, className, chipClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: FilterChipsProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -7,12 +7,20 @@ export interface FolderPathProps {
     ariaLabel?: string;
 }
 /**
- * A read-only, non-clickable folder/location path built on top of `DialBreadcrumb`.
+ * A read-only, non-clickable folder/location path styled like `DialBreadcrumb`.
  * aliases: FolderBreadcrumb|LocationPath
  * Design system 2.0
  *
  * Every segment is disabled (no navigation); the first segment gets a leading
- * folder icon and the last segment is styled as the current/leaf item.
+ * folder icon and the last segment is styled as the current/leaf item. A path
+ * of more than three segments collapses its middle into a non-interactive `…`
+ * that shows the full path (`Shared > Team > Sub > Reports`) in a tooltip on
+ * hover; the hidden segments stay in the accessible text.
+ *
+ * When the path is too wide, the leaf keeps its width longest: the folder
+ * before it truncates first, down to about one character, and if the leaf
+ * still does not fit, that folder joins the `…` as well. Only then does the
+ * leaf truncate.
  *
  * @example
  * ```tsx
@@ -22,11 +30,11 @@ export interface FolderPathProps {
  * @param segments - Path segments to display, outermost first
  * @param [labelClassName='dial-small-text'] - Additional CSS classes applied to non-leaf segments
  * @param [leafClassName='dial-small-semi-text'] - Additional CSS classes applied to the last (leaf) segment
- * @param [className] - Additional CSS classes applied to the breadcrumb's `<nav>` element.
- *  `DialBreadcrumb` scrolls horizontally on overflow, so this must not shrink
- *  the nav to content width (e.g. never `w-auto`).
- * @param [ariaLabel='Folder path'] - Accessible name for the underlying `<nav>`.
- *  `DialBreadcrumb` would otherwise name it "Breadcrumb", which misdescribes a
- *  path with no navigable items; override it when a page shows more than one.
+ * @param [className] - Additional CSS classes applied to the `<nav>` element.
+ *  The nav clips on overflow, so this must not shrink it to content width
+ *  (e.g. never `w-auto`).
+ * @param [ariaLabel='Folder path'] - Accessible name for the `<nav>`. A path
+ *  has no navigable items, so it is not named "Breadcrumb"; override it when a
+ *  page shows more than one.
  */
 export declare const FolderPath: FC<FolderPathProps>;

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

@@ -0,0 +1,63 @@
+import { FC, ReactNode } from 'react';
+import { FormSectionVariant } from '../../../types/form-section';
+export type FormSectionHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface FormSectionProps {
+    /** Heading of the section; also names the `section` landmark. */
+    title: ReactNode;
+    /** Control at the end of the heading row — typically a small "Add" or "Change" button. */
+    action?: ReactNode;
+    /** Optional line under the heading saying what the section holds. */
+    description?: ReactNode;
+    /** Type scale of the heading and description. Defaults to `FormSectionVariant.Row`. */
+    variant?: FormSectionVariant;
+    /** Level of the heading element, to fit the page's outline. Defaults to `3`. */
+    headingLevel?: FormSectionHeadingLevel;
+    /** The section's fields or values. */
+    children?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the heading. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+    /** Additional CSS classes for the content wrapper. */
+    contentClassName?: string;
+}
+/**
+ * A titled section of a form or a builder column: a heading with an optional
+ * action at its end, an optional description and the section's content.
+ * aliases: SectionRow|FieldSection|SettingsSection|FormGroup|SectionHeader
+ * Design system 2.0
+ *
+ * The root is a `section` named by its heading, so each section is a region a
+ * screen reader can jump to. `headingLevel` picks the heading element so the
+ * section fits the outline of the page it is mounted in; the variant only sets
+ * the type scale. The action sits at the inline end of the heading row and
+ * never shrinks; the content is rendered as given, with no field styling of its
+ * own. For a collapsible group, use `Accordion`; for a single labelled control,
+ * the control's own `label`.
+ *
+ * @example
+ * ```tsx
+ * <FormSection
+ *   title="Model"
+ *   variant={FormSectionVariant.Caption}
+ *   action={<GhostButton label="Change" onClick={openPicker} />}
+ *   description="The model that answers in this application."
+ * >
+ *   <SelectedEntityCard entityId={modelId} />
+ * </FormSection>
+ * ```
+ *
+ * @param title - Heading of the section; also names the `section` landmark.
+ * @param [action] - Control at the end of the heading row.
+ * @param [description] - Optional line under the heading.
+ * @param [variant] - Type scale of the heading and description. Defaults to `FormSectionVariant.Row`.
+ * @param [headingLevel] - Level of the heading element. Defaults to `3`.
+ * @param [children] - The section's fields or values.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the heading.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ * @param [contentClassName] - Additional CSS classes for the content wrapper.
+ */
+export declare const FormSection: FC<FormSectionProps>;

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

@@ -132,4 +132,4 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @param [selectAllLabel='Select all rows'] - Accessible name of the select-all control.
  * @param [colorScheme='light'] - AG Grid color scheme. `dark` paints native controls dark.
  */
-export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, }: GridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, }: GridProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Grid/components/SelectionCell.d.ts

@@ -18,4 +18,4 @@ export interface SelectionCellProps<T> {
  * `rowSelected` event, so a selection made anywhere — another cell, the header,
  * or the `selectedRowIds` prop — is reflected here without refreshing the cell.
  */
-export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Grid/components/SelectionHeader.d.ts

@@ -11,4 +11,4 @@ export interface SelectionHeaderProps<T> extends IHeaderParams<T> {
  * rows put it in the `mixed` state, and disabled rows are excluded from the
  * count so a grid whose selectable rows are all selected still reads as full.
  */
-export declare const SelectionHeader: <T>({ api, label, }: SelectionHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionHeader: <T>({ api, label, }: SelectionHeaderProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -11,7 +11,7 @@ export declare const INTERACTIVE_TOOLTIP_GAP = 8;
 export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
 /**
  * The panel sits one step of the overlay ladder (`z-interactive-tooltip`, see
- * `zIndex` in `tailwind.config.js`) above the surface it is anchored to — a
+ * `--z-index-*` in `src/styles/theme.scss`) above the surface it is anchored to — a
  * dropdown or select overlay, both `z-floating` — since it can be opened from
  * a row inside one of them.
  *

package/dist/src/components/New/MarkdownEditor/lazy.d.ts

@@ -4,4 +4,4 @@
  * re-export this same binding instead of each declaring their own copy -
  * see `src/components/JsonEditor/lazy.ts`'s comment for why.
  */
-export declare const LazyMarkdownEditor: () => Promise<typeof import("./MarkdownEditor")>;
+export declare const LazyMarkdownEditor: () => Promise<typeof import('./MarkdownEditor')>;

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

@@ -2,4 +2,4 @@
  * Marks the chosen row in a `MenuItemMark.Check` list. Decorative: the row's
  * `aria-checked`/`aria-selected` already carries the state.
  */
-export declare const menuItemCheckIcon: import("react/jsx-runtime").JSX.Element;
+export declare const menuItemCheckIcon: import('react/jsx-runtime').JSX.Element;

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

@@ -4,8 +4,10 @@ export interface NoDataContentProps {
     title: ReactNode;
     /** Optional secondary line under the title. */
     description?: ReactNode;
-    /** Illustration above the title. Defaults to the empty-state document mark. */
+    /** Illustration above the title. Defaults to the placeholder-list card. */
     icon?: ReactNode;
+    /** Optional way forward, such as a button, rendered under the text. */
+    action?: ReactNode;
     /**
      * Announces the empty state to assistive tech as it appears. Turn it on where
      * the content replaces a list the user has just filtered or searched.
@@ -23,23 +25,29 @@ export interface NoDataContentProps {
  * aliases: EmptyState|NoResults|ZeroState
  * Design system 2.0
  *
- * Fills its container and centres an illustration, a headline and an optional
- * secondary line. The icon is decorative, so it is hidden from assistive tech
- * and the text carries the message on its own.
+ * Fills its container and centres an illustration, a headline, an optional
+ * secondary line and an optional action. The icon is decorative, so it is
+ * hidden from assistive tech and the text carries the message on its own.
  *
  * @example
  * ```tsx
  * <NoDataContent
- *   title="No results found"
- *   description="Try a different search term."
+ *   title="No chats found"
+ *   description="Try a different search term or check your filters."
+ *   live
  * />
  *
- * <NoDataContent title="Nothing here yet" icon={<IconInbox size={60} />} live />
+ * <NoDataContent
+ *   title="No chats yet"
+ *   description="Chats will appear here once you start one."
+ *   action={<Button label="New chat" onClick={createChat} />}
+ * />
  * ```
  *
  * @param title - Headline of the empty state.
  * @param [description] - Optional secondary line under the title.
- * @param [icon] - Illustration above the title. Defaults to the empty-state document mark.
+ * @param [icon] - Illustration above the title. Defaults to the placeholder-list card.
+ * @param [action] - Optional way forward, rendered under the text.
  * @param [live=false] - Announce the empty state to assistive tech as it appears.
  * @param [className] - Additional CSS classes for the container.
  * @param [titleClassName] - Additional CSS classes for the title.

package/dist/src/components/New/NoDataContent/NoDataIllustration.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+/**
+ * The empty-state illustration: a card holding three placeholder list rows.
+ * Every colour comes from a layer or stroke token, so it follows the theme
+ * instead of staying a light card on a dark surface.
+ */
+export declare const NoDataIllustration: FC;

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

@@ -5,6 +5,8 @@ export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter
     showPasswordLabel?: string;
     /** Accessible name of the reveal toggle while the value is visible. */
     hidePasswordLabel?: string;
+    /** Hides the reveal toggle while the field stays editable, and keeps the value masked. */
+    isToggleHidden?: boolean;
 }
 /**
  * A password field with a reveal toggle, built on {@link Input}.
@@ -18,6 +20,9 @@ export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter
  * A disabled field is masked with no toggle at all, and comes back masked if it
  * is enabled again.
  *
+ * `isToggleHidden` does the same without disabling the field: use it when there
+ * is nothing to reveal, such as a stored secret the server never returns.
+ *
  * @example
  * ```tsx
  * <PasswordInput
@@ -32,5 +37,6 @@ export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter
  * @param [hidePasswordLabel="Hide password"] - Accessible name of the toggle while the value is visible
  * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px
  * @param [disabled=false] - Disables the field, masks it, and hides the reveal toggle
+ * @param [isToggleHidden=false] - Hides the reveal toggle and keeps the value masked, leaving the field editable
  */
 export declare const PasswordInput: FC<PasswordInputProps>;

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

@@ -2,7 +2,7 @@ import { PopupSize } from '../../../types/popup';
 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";
+export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h3-text text-primary";
 /** Rule under the header. Opt-in: by default sections are separated by spacing. */
 export declare const popupHeaderDividerClassName = "border-b border-tertiary";
 export declare const popupFooterClassName = "flex flex-row items-center gap-2 px-6 py-4";

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

@@ -0,0 +1,68 @@
+import { FC, ReactNode } from 'react';
+/** Props for `ResizeHandle`. */
+export interface ResizeHandleProps {
+    /** Current width of the panel the handle resizes, in px. */
+    width: number;
+    /** Smallest width the handle can set, in px. */
+    minWidth: number;
+    /** Largest width the handle can set, in px. */
+    maxWidth: number;
+    /** Width a double click resets the panel to, in px. Without it a double click does nothing. */
+    defaultWidth?: number;
+    /** Called with the next width, already limited to `minWidth`–`maxWidth`. */
+    onWidthChange: (width: number) => void;
+    /** Accessible name of the separator. */
+    label: string;
+    /** Hint shown beside the pointer once it rests on the handle. */
+    tooltip?: ReactNode;
+    /** Width change of one arrow key press, in px. Defaults to `16`. */
+    keyboardStep?: number;
+    /** Additional CSS classes for the handle, e.g. to change its position. */
+    className?: string;
+}
+/**
+ * A vertical separator on the inline-end edge of a panel that resizes the panel
+ * by pointer or keyboard.
+ * aliases: Splitter|ColumnResizer|DragHandle|Divider
+ * Design system 2.0
+ *
+ * The component is controlled: it reports every width through `onWidthChange`
+ * and the host applies it to the panel. It is a focusable `separator` — the
+ * window-splitter pattern — so the arrow keys move it by `keyboardStep`, `Home`
+ * and `End` jump to the bounds, and a double click resets it to `defaultWidth`.
+ * Drag and keys follow the writing direction, so a panel at the inline start
+ * grows as the pointer moves towards the inline end, in RTL as well.
+ *
+ * It is positioned absolutely against its nearest positioned ancestor, over the
+ * panel's inline-end edge, and draws a thin line. The accent line and the hint
+ * appear once the pointer has rested on the handle, and a themed arrow follows
+ * the pointer instead of the native cursor. Hide it on screens too narrow to
+ * drag on by wrapping it, e.g. in `hidden desktop:block`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative" style={{ width }}>
+ *   <Sidebar />
+ *   <ResizeHandle
+ *     width={width}
+ *     minWidth={280}
+ *     maxWidth={640}
+ *     defaultWidth={400}
+ *     onWidthChange={setWidth}
+ *     label="Resize sidebar"
+ *     tooltip="Drag to resize"
+ *   />
+ * </div>
+ * ```
+ *
+ * @param width - Current width of the panel in px.
+ * @param minWidth - Smallest width in px.
+ * @param maxWidth - Largest width in px.
+ * @param [defaultWidth] - Width a double click resets to.
+ * @param onWidthChange - Called with the next, limited width.
+ * @param label - Accessible name of the separator.
+ * @param [tooltip] - Hint shown beside the pointer once it rests on the handle.
+ * @param [keyboardStep=16] - Width change of one arrow key press in px.
+ * @param [className] - Additional CSS classes for the handle.
+ */
+export declare const ResizeHandle: FC<ResizeHandleProps>;

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

@@ -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;