@epam/ai-dial-ui-kit 0.16.0-dev.6 → 0.16.0-dev.60

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

@@ -1,21 +1,43 @@
 import { FC, HTMLAttributes } from 'react';
 import { CaptionType } from '../../../types/caption';
+import { LiveRegionPoliteness } from '../../../types/live-region';
 export interface CaptionTextProps extends HTMLAttributes<HTMLSpanElement> {
     text?: string;
     variant?: CaptionType;
+    /**
+     * Announce the text through a `LiveRegion` of this politeness. The region is
+     * rendered even while `text` is empty, so the first message is heard. Without
+     * it the caption has no live-region role and renders nothing for empty text.
+     */
+    announce?: LiveRegionPoliteness;
 }
 /**
  * A component for displaying caption text with consistent styling
  * aliases: HelperText|ValidationText
  * Design system 2.0
  *
+ * It carries no live-region role by default: 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`).
+ *
+ * For a message that must also be heard when it appears — a failed submit, an
+ * async error — pass `announce`. The caption is then rendered inside an
+ * always-mounted `LiveRegion` (`dial-kit-live-region`), present even while
+ * `text` is empty; `id`, `className` and the other props stay on the text
+ * element, so `aria-describedby` still resolves to the text itself.
+ *
  * @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} />
+ *
+ * <ErrorText text={submitError} announce={LiveRegionPoliteness.Assertive} />
  * ```
  *
- * @param [text] - The text to display. If undefined or empty, nothing is rendered
+ * @param [text] - The text to display. If undefined or empty, nothing is rendered unless `announce` is set
  * @param [variant] - The variant of the caption text, e.g., error or description.
+ * @param [announce] - Wrap the text in an always-mounted `LiveRegion` of this politeness.
  */
 export declare const CaptionText: FC<CaptionTextProps>;
 export declare const ErrorText: FC<Omit<CaptionTextProps, 'variant'>>;

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

@@ -1,7 +1,8 @@
 import { Placement } from '@floating-ui/react';
 import { CSSProperties, FC, MouseEvent, ReactNode, RefObject } from 'react';
-import { DropdownTrigger } from '../../../types/dropdown';
+import { DropdownTrigger, DropdownOverlayRole } from '../../../types/dropdown';
 import { DropdownItem } from '../../../models/dropdown';
+import { DropdownItemFilter } from './search';
 export interface DropdownProps {
     children: ReactNode;
     items?: DropdownItem[];
@@ -46,6 +47,61 @@ export interface DropdownProps {
      * opens, matching the pre-existing behavior.
      */
     initialFocus?: 0 | -1 | RefObject<HTMLElement | null>;
+    /**
+     * Whether closing the overlay moves focus back to the trigger: on Escape, a
+     * chosen item, the close button or a controlled `open` flip. Focus that has
+     * already left the overlay is left where it went — an outside press on
+     * another control, or an item whose action focuses something else (e.g. a
+     * rename field). Defaults to `true`.
+     */
+    returnFocus?: boolean;
+    /**
+     * Role of the floating overlay, and with it the trigger's `aria-haspopup`.
+     * Applies to `renderOverlay` content only: the `items` list is always a
+     * menu. Arrow-key movement between options runs for `Menu` only; a `Dialog`
+     * or `None` overlay owns its keys. Defaults to `DropdownOverlayRole.Menu`.
+     */
+    overlayRole?: DropdownOverlayRole;
+    /**
+     * Accessible name of the overlay. Ignored with `DropdownOverlayRole.None`,
+     * whose role-less wrapper cannot be named. With neither this nor
+     * `overlayAriaLabelledBy`, a menu or a dialog is named by its trigger.
+     */
+    overlayAriaLabel?: string;
+    /**
+     * Id of the element that names the overlay, typically a heading inside
+     * `renderOverlay`. Wins over `overlayAriaLabel`. Ignored with
+     * `DropdownOverlayRole.None`.
+     */
+    overlayAriaLabelledBy?: string;
+    /**
+     * 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;
 }
 /**
  *
@@ -67,6 +123,14 @@ export interface DropdownProps {
  * keeps the menu open across toggles. `MenuItemMark.Highlight` is the current
  * item of a navigation menu.
  *
+ * The overlay is a `menu` by default. A `renderOverlay` panel that is not a
+ * menu — a popover of free-form content — sets `overlayRole` to
+ * `DropdownOverlayRole.Dialog` (named by `overlayAriaLabel`,
+ * `overlayAriaLabelledBy` or, failing both, by the trigger), or to
+ * `DropdownOverlayRole.None` when its content carries its own role; the
+ * trigger's `aria-haspopup` follows the choice. Closing the overlay, Escape
+ * included, returns focus to the trigger unless `returnFocus` is `false`.
+ *
  * @example
  * ```tsx
  * // Simple items menu
@@ -83,6 +147,24 @@ 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>
+ *
+ * // A panel that is not a menu: role="dialog", trigger aria-haspopup="dialog"
+ * <Dropdown
+ *   overlayRole={DropdownOverlayRole.Dialog}
+ *   overlayAriaLabelledBy="limits-title"
+ *   renderOverlay={() => (
+ *     <div className="p-3">
+ *       <h2 id="limits-title">Usage limits</h2>
+ *     </div>
+ *   )}
+ * >
+ *   <button type="button" className="px-3 py-2 rounded border">Limits</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 +193,17 @@ 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 [returnFocus=true] - Whether closing the overlay (Escape included) returns focus to the trigger
+ * @param [overlayRole=DropdownOverlayRole.Menu] - Role of a `renderOverlay` overlay, and the trigger's matching `aria-haspopup`; the `items` list is always a menu
+ * @param [overlayAriaLabel] - Accessible name of the overlay; ignored with `DropdownOverlayRole.None`
+ * @param [overlayAriaLabelledBy] - Id of the element naming the overlay; wins over `overlayAriaLabel`, ignored with `DropdownOverlayRole.None`
+ * @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/FileName/FileName.d.ts

@@ -8,6 +8,12 @@ export interface FileNameProps {
     type?: DialItemType;
     /** Extension to pick the icon by, overriding the one in `name`. */
     fileExtension?: string;
+    /**
+     * Replaces the type icon (and the shared badge drawn on it), e.g. to mark a
+     * special folder. Its wrapper is `aria-hidden`; the name stays the item's
+     * accessible name. The `loading` spinner still takes the icon's place.
+     */
+    icon?: ReactNode;
     /** Draws the shared badge on the icon. */
     shared?: boolean;
     /** Replaces the icon with a spinner, which announces itself as a status. */
@@ -45,6 +51,10 @@ export interface FileNameProps {
  * the shared state, which only the badge shows, is announced by a
  * visually-hidden `sharedLabel` after the name instead.
  *
+ * Pass `icon` to draw your own in place of the type icon. The shared badge is
+ * part of the type icon, so it is not drawn then; the visually-hidden
+ * `sharedLabel` still announces the state.
+ *
  * While `loading` the icon is swapped for a `Spinner`, which is left in the
  * accessibility tree so the busy state is announced.
  *
@@ -62,6 +72,7 @@ export interface FileNameProps {
  * @param name - Full item name, with or without an extension
  * @param [type=DialItemType.File] - Whether the item is a file or a folder
  * @param [fileExtension] - Extension overriding the one in `name`
+ * @param [icon] - Replaces the type icon; the `loading` spinner still takes its place
  * @param [shared=false] - Draws the shared badge on the icon
  * @param [loading=false] - Replaces the icon with a spinner
  * @param [loadingLabel='Loading'] - Accessible name of the spinner

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

@@ -2,7 +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';
+import { GridAppearance, 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>> {
@@ -60,6 +60,11 @@ export interface GridProps<T extends object = Record<string, unknown>> {
      * dark. Defaults to `light`, which leaves the current appearance unchanged.
      */
     colorScheme?: GridColorScheme;
+    /**
+     * Visual treatment. `Chat` draws the borderless "Chat table" card and
+     * ignores `wrapperBorder`. Defaults to `GridAppearance.Default`.
+     */
+    appearance?: GridAppearance;
 }
 /**
  * A data grid built on ag-Grid, wired to the 2.0 tokens and controls.
@@ -131,5 +136,6 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @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.
+ * @param [appearance='default'] - Visual treatment; `chat` draws the borderless "Chat table".
  */
-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, appearance, }: 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/Grid/constants.d.ts

@@ -2,6 +2,8 @@
 export declare const GRID_ROOT_CLASS = "dial-kit-grid";
 /** Present only while a selection column is rendered. Drives its reveal. */
 export declare const GRID_WITH_SELECTION_CLASS = "dial-kit-grid-with-selection";
+/** Present on `GridAppearance.Chat`: the "Chat table" card, dividers and rows. */
+export declare const GRID_CHAT_CLASS = "dial-kit-grid-chat";
 export declare const GRID_WITHOUT_HEADER_BORDERS_CLASS = "dial-kit-grid-without-header-borders";
 /** Cell of the selection column: faded out until the row is hovered. */
 export declare const GRID_ROW_SELECT_CLASS = "dial-kit-grid-row-select";

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

@@ -0,0 +1,48 @@
+import { FC, ReactNode } from 'react';
+export interface LabelledTextProps {
+    /** Small caption above the value, naming it. */
+    label: ReactNode;
+    /** The value. Truncates with an ellipsis, revealing the full text in a tooltip only when clipped. */
+    text?: ReactNode;
+    /** Tooltip content shown instead of `text` while it is clipped. */
+    tooltip?: ReactNode;
+    /** Custom value content, rendered instead of `text`. */
+    children?: ReactNode;
+    /** Element after the value, e.g. a copy button. */
+    postfix?: ReactNode;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+/**
+ * A read-only label/value pair: a small caption above a value.
+ * aliases: LabelValue|DisplayText|ReadOnlyField|KeyValue
+ * Design system 2.0
+ *
+ * The caption is the kit's `Label`, so it matches the other 2.0 fields. There is
+ * no control to point its `htmlFor` at: it sits beside the value and reads in
+ * DOM order. It is not a form field: use `Label` with an input for editable
+ * values.
+ *
+ * Without `children` the value is a single line capped at 200px that truncates;
+ * the tooltip appears only while the text is actually clipped. With `children`
+ * the value takes the content's own width.
+ *
+ * @example
+ * ```tsx
+ * <LabelledText label="Endpoint" text="https://example.com/v1/chat" />
+ *
+ * <LabelledText
+ *   label="Key"
+ *   text="sk-0000"
+ *   postfix={<IconButton icon={<IconCopy />} ariaLabel="Copy key" />}
+ * />
+ * ```
+ *
+ * @param label - Caption above the value.
+ * @param [text] - The value, truncated with an ellipsis when it does not fit.
+ * @param [tooltip] - Tooltip content used instead of `text` while it is clipped.
+ * @param [children] - Custom value content, rendered instead of `text`.
+ * @param [postfix] - Element after the value.
+ * @param [className] - Additional CSS classes for the root element.
+ */
+export declare const LabelledText: FC<LabelledTextProps>;

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

@@ -0,0 +1,58 @@
+import { FC, HTMLAttributes } from 'react';
+import { LiveRegionElement, LiveRegionPoliteness } from '../../../types/live-region';
+export interface LiveRegionProps extends Omit<HTMLAttributes<HTMLElement>, 'role' | 'aria-live' | 'aria-atomic'> {
+    /**
+     * How urgently the change is read. `Polite` (default) renders
+     * `role="status"` + `aria-live="polite"`; `Assertive` renders
+     * `role="alert"` + `aria-live="assertive"`.
+     */
+    politeness?: LiveRegionPoliteness;
+    /** Hide the region visually while keeping it readable by assistive tech (`sr-only`). */
+    visuallyHidden?: boolean;
+    /** Sets `aria-atomic`: read the whole region, not only the changed node, on each change. */
+    atomic?: boolean;
+    /** The wrapper element. Default `LiveRegionElement.Div`; use `Span` inside inline content. */
+    as?: LiveRegionElement;
+}
+/**
+ * A live region that is always in the DOM, so a screen reader announces the
+ * message put into it.
+ * aliases: AriaLive|Announcer|StatusMessage|ScreenReaderAnnouncement|SrOnlyStatus
+ * Design system 2.0
+ *
+ * Screen readers announce a live region reliably only when the region already
+ * exists before its content changes; a region mounted together with its text is
+ * often read late or not at all. `LiveRegion` always renders its wrapper, even
+ * when `children` is empty, `null` or `false` — only the content changes.
+ *
+ * Use it for a message that is not attached to one control and must be heard:
+ * a failed submit, an async status ("Saved", "3 results"), an empty search.
+ * Use something else when:
+ * - the message belongs to a form field — render `ErrorText` / `CaptionText`
+ *   with an `id` and point the control's `aria-describedby` at it (or pass
+ *   `announce` to them when the error must also be announced);
+ * - the message is a toast or a section message — `Notification` and its
+ *   wrappers are already live regions.
+ *
+ * An empty, visible region takes no layout space: while it has no child nodes
+ * it gets `sr-only` (through `empty:sr-only`) rather than `display: none`,
+ * because some screen readers drop a `display: none` node from the
+ * accessibility tree and would then miss the first message put into it.
+ *
+ * @example
+ * ```tsx
+ * <LiveRegion politeness={LiveRegionPoliteness.Assertive}>
+ *   {submitError && <ErrorText text={submitError} />}
+ * </LiveRegion>
+ *
+ * <LiveRegion visuallyHidden>{isEmpty ? 'No results' : ''}</LiveRegion>
+ * ```
+ *
+ * @param [politeness] - `LiveRegionPoliteness.Polite` (default) or `Assertive`.
+ * @param [visuallyHidden] - Hide the region visually (`sr-only`); it is still announced.
+ * @param [atomic] - Sets `aria-atomic`.
+ * @param [as] - The wrapper element, `LiveRegionElement.Div` by default.
+ * @param [className] - Additional CSS classes for the wrapper.
+ * @param [children] - The message. May be empty; the wrapper is rendered anyway.
+ */
+export declare const LiveRegion: FC<LiveRegionProps>;

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

@@ -14,6 +14,10 @@ export interface MarkdownEditorProps {
     id?: string;
     /** Accessible name for the underlying textarea. Use it only where no visible label exists to pair with `id`. */
     ariaLabel?: string;
+    /** Ids of elements describing the textarea — typically an error rendered next to the editor. */
+    ariaDescribedBy?: string;
+    /** Draws the error border and sets `aria-invalid` on the textarea. */
+    invalid?: boolean;
     /** Whether to show the bottom drag bar that resizes the editor height. */
     showDragbar?: boolean;
 }
@@ -37,6 +41,8 @@ export interface MarkdownEditorProps {
  * @param [defaultPreview='edit'] - Initial edit/live/preview mode
  * @param [id] - `id` of the underlying textarea, for a visible `<label htmlFor>`
  * @param [ariaLabel] - Accessible name for the underlying textarea
+ * @param [ariaDescribedBy] - Ids of elements describing the textarea, e.g. its error
+ * @param [invalid=false] - Draws the error border and sets `aria-invalid` on the textarea
  * @param [showDragbar=true] - Whether to show the bottom drag bar that resizes the editor height
  */
 export declare const MarkdownEditor: FC<MarkdownEditorProps>;

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

@@ -1,7 +1,13 @@
 /**
  * Shared leaf module for the 2.0 Markdown editor's lazy loader. Both
  * `src/index.ts` (root) and `src/subpaths/editors.ts` (`./editors`)
- * re-export this same binding instead of each declaring their own copy -
- * see `src/components/JsonEditor/lazy.ts`'s comment for why.
+ * re-export this same binding instead of each declaring their own copy of
+ * the loader function. The duplication it replaced was an emitted-topology
+ * defect, not just source-level duplication: a loader function's body
+ * containing its own `import()` call, when duplicated verbatim into more than
+ * one entry's own emitted chunk, can pull an unrelated dynamically-imported
+ * feature into the initial graph in some Vite/Rolldown versions - see
+ * `openspec/changes/isolate-heavy-feature-modules` Section 9's
+ * `diagnosis-baseline.txt` for the measured reproduction.
  */
-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;