@epam/ai-dial-ui-kit 0.16.0-dev.3 → 0.16.0-dev.33

package/dist/node_modules/react-dnd/dist/hooks/useCollector.js

@@ -1,4 +1,4 @@
-import s from "../../../../_virtual/index3.js";
+import s from "../../../../_virtual/index.js";
 import { useState as f, useCallback as a } from "react";
 import { useIsomorphicLayoutEffect as i } from "./useIsomorphicLayoutEffect.js";
 function n(e, c, t) {

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

@@ -1,2 +1,2 @@
-export declare const buttonChevronDown: import("react/jsx-runtime").JSX.Element;
-export declare const buttonChevronUp: import("react/jsx-runtime").JSX.Element;
+export declare const buttonChevronDown: import('react/jsx-runtime').JSX.Element;
+export declare const buttonChevronUp: import('react/jsx-runtime').JSX.Element;

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

@@ -5,4 +5,4 @@ export declare const dropdownItemDisabledClassName = "opacity-75 !cursor-not-all
 export declare const dropdownItemDangerClassName = "text-error";
 export declare const dropdownDividerClassName = "my-1 border-t border-hover border-secondary";
 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/Grid/Grid.d.ts

@@ -117,4 +117,4 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [selectionMode] - Could be GridSelectionMode.MULTIPLE or GridSelectionMode.SINGLE to enable selection column
  * @param [allowDisabledContextMenu] - Enables context menu actions even if row itself is disabled for selection
  */
-export declare const DialGrid: <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, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialGrid: <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, }: DialGridProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/JsonEditor/lazy.d.ts

@@ -11,4 +11,4 @@
  * Vite/Rolldown versions - see `openspec/changes/isolate-heavy-feature-modules`
  * Section 9's `diagnosis-baseline.txt` for the measured reproduction).
  */
-export declare const LazyDialJsonEditor: () => Promise<typeof import("./JsonEditor")>;
+export declare const LazyDialJsonEditor: () => Promise<typeof import('./JsonEditor')>;

package/dist/src/components/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 LazyDialMarkdownEditor: () => Promise<typeof import("./MarkdownEditor")>;
+export declare const LazyDialMarkdownEditor: () => Promise<typeof import('./MarkdownEditor')>;

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

@@ -1,5 +1,6 @@
 import { FC, SyntheticEvent } from 'react';
 import { AvatarShape } from '../../../types/avatar';
+import { AvatarColorClasses } from '../../../utils/avatar';
 /** Props for `Avatar`. */
 export interface AvatarProps {
     /** Display name the initials and the colour are derived from. */
@@ -14,6 +15,8 @@ export interface AvatarProps {
     size?: number;
     /** Outline of the avatar. */
     shape?: AvatarShape;
+    /** Explicit colour pair overriding the deterministic pick from `name`. */
+    color?: AvatarColorClasses;
     /** Additional CSS classes for the avatar. */
     className?: string;
     /** Type-scale class for the initials. When set, it replaces the font size derived from `size`. */
@@ -28,9 +31,11 @@ export interface AvatarProps {
  * Design system 2.0
  *
  * The same name always gets the same colour, drawn from the theme's visual
- * tokens, so a list of avatars stays stable between renders and sessions. An
- * image that is missing or fails to load falls back to the initials; a new
- * `src` tries the image again.
+ * tokens, so a list of avatars stays stable between renders and sessions; pass
+ * `color` to pin one entry of `AVATAR_PALETTE` instead, so every avatar of a
+ * kind shares one colour regardless of name or locale. An image that is
+ * missing or fails to load falls back to the initials; a new `src` tries the
+ * image again.
  *
  * An avatar with an `alt` is a `role="img"` named by it, whether it shows the
  * image or the initials. Without one it is decorative and hidden from
@@ -48,6 +53,7 @@ export interface AvatarProps {
  * @param [alt=''] - Accessible name; empty makes the avatar decorative
  * @param [size=32] - Width and height in px
  * @param [shape=AvatarShape.Circle] - Outline of the avatar
+ * @param [color] - Explicit colour pair overriding the deterministic pick from `name`
  * @param [className] - Additional CSS classes for the avatar
  * @param [textClassName] - Type-scale class for the initials, replacing the size-derived font size
  * @param [onImageError] - Called when the image fails to load

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

@@ -29,7 +29,7 @@ export declare const currentSizeClassName: Record<BreadcrumbsSize, string>;
  */
 export declare const segmentWidthClassName: Record<'first' | 'middle' | 'last', string>;
 /** The box that draws a segment, around its icon and its label. */
-export declare const segmentClassName = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors";
+export declare const segmentClassName = "flex min-w-0 flex-1 items-center gap-1 rounded-xs transition-colors";
 /**
  * A segment the user can follow. Secondary until hovered, then accent — the
  * same pairing the kit's other inline links use.
@@ -49,7 +49,7 @@ export declare const separatorClassName = "inline-flex flex-none items-center le
  * glyph to the 24×24 of WCAG 2.5.8; the enhanced 44×44 target would overhang
  * the segments on either side of it (see the README exception table).
  */
-export declare const overflowButtonClassName = "dial-kit-minimum-target flex shrink-0 items-center rounded-sm text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
+export declare const overflowButtonClassName = "dial-kit-minimum-target flex shrink-0 items-center rounded-xs text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
 /**
  * Smallest trail the collapse can produce: the root, the ellipsis and the
  * current page. Below that there is nothing left to hide behind the ellipsis.

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

@@ -1 +1 @@
-export declare const getButtonChevron: (isOpen: boolean) => import("react/jsx-runtime").JSX.Element;
+export declare const getButtonChevron: (isOpen: boolean) => import('react/jsx-runtime').JSX.Element;

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

@@ -24,10 +24,17 @@ export interface CalendarProps {
     fieldClassName?: string;
     /**
      * Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`, computed
-     * by `getTimezoneLabel`) at the trailing edge of the `time` field, naming
+     * by `getTimezoneLabel`) at the trailing edge of the time fields — the
+     * `time` mode field and the `datetime` popover footer's field — naming
      * the zone the entered time-of-day refers to.
      */
     showTimezone?: boolean;
+    /**
+     * `time` mode only: shows a clock button at the field's trailing edge that
+     * opens an hour/minute list popover. The field stays typeable either way.
+     * @default true
+     */
+    showTimePicker?: boolean;
 }
 /**
  * A date/time picker supporting four selection modes.
@@ -63,6 +70,7 @@ export interface CalendarProps {
  * @param [maxDate] - Latest selectable date (date/datetime modes)
  * @param [locale="en-GB"] - BCP 47 locale tag used to localize month/weekday names and date formatting
  * @param [fieldClassName] - Additional classes merged onto the trigger field, overriding conflicting defaults
- * @param [showTimezone=false] - Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the `time` field
+ * @param [showTimezone=false] - Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the time fields (`time` mode and the `datetime` popover footer)
+ * @param [showTimePicker=true] - `time` mode only: shows a clock button that opens an hour/minute list popover next to the typeable field
  */
 export declare const Calendar: FC<CalendarProps>;

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/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/Grid/Grid.d.ts

@@ -2,6 +2,7 @@ import { ColDef, GridApi, GridOptions } from 'ag-grid-community';
 import { ReactNode } from 'react';
 import { DropdownItem } from '../../../models/dropdown';
 import { GridSelectionMode } from '../../../models/selection-mode';
+import { GridColorScheme } from '../../../types/grid';
 /** Column id of the selection column this component prepends itself. */
 export declare const GRID_SELECTION_COLUMN_ID = "dial-kit-grid-selection";
 export interface GridProps<T extends object = Record<string, unknown>> {
@@ -53,6 +54,12 @@ export interface GridProps<T extends object = Record<string, unknown>> {
     selectRowLabel?: (row: T) => string;
     /** Accessible name of the select-all control. Defaults to `'Select all rows'`. */
     selectAllLabel?: string;
+    /**
+     * AG Grid color scheme. `dark` selects the dark theme part and asks the
+     * browser to paint native controls — the date filter calendar, scrollbars —
+     * dark. Defaults to `light`, which leaves the current appearance unchanged.
+     */
+    colorScheme?: GridColorScheme;
 }
 /**
  * A data grid built on ag-Grid, wired to the 2.0 tokens and controls.
@@ -94,6 +101,9 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  *   selectRowLabel={(row) => `Select ${row.name}`}
  *   getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}
  * />
+ *
+ * // Dark native controls, including the date-filter calendar
+ * <Grid<Product> columnDefs={columns} rowData={products} colorScheme={GridColorScheme.Dark} />
  * ```
  *
  * @param [columnDefs] - Column definitions, in ag-Grid `ColDef` format.
@@ -120,5 +130,6 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @param [allowDisabledContextMenu=false] - Keeps the context menu on a non-selectable row.
  * @param [selectRowLabel] - Accessible name of a row's selection control.
  * @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, }: 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/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.