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

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/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/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";
@@ -10,6 +10,13 @@ export declare const popupFooterClassName = "flex flex-row items-center gap-2 px
 export declare const popupFooterDividerClassName = "border-t border-tertiary";
 /** Groups the controls sitting on one side of the header or footer. */
 export declare const popupActionsGroupClassName = "flex shrink-0 flex-row items-center gap-2";
+/**
+ * Trailing footer group. Below the `mobile` breakpoint it spans the footer and
+ * every button in it takes an equal share, so a Cancel/Confirm pair splits 50/50.
+ */
+export declare const popupMainActionsGroupClassName = "ml-auto mobile:flex-1";
+/** Applied to each button in the trailing footer group. */
+export declare const popupMainActionButtonClassName = "mobile:flex-1";
 /**
  * Max widths per size. Full width below the `md` breakpoint, where the popup
  * fills the screen.

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/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,6 @@ 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;
+export declare const selectEmptyStateIcon: import('react/jsx-runtime').JSX.Element;

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

@@ -19,8 +19,8 @@ export declare const HOVER_OPEN_DELAY = 500;
  */
 export declare const arrowClassName = "fill-control-inverted";
 /**
- * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `zIndex` in
- * `tailwind.config.js`) — above popups (`z-popup`), dropdowns and the calendar
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `--z-index-*` in
+ * `src/styles/theme.scss`) — above popups (`z-popup`), dropdowns and the calendar
  * (`z-floating`) and interactive tooltips — since they can be triggered by a
  * control inside any of them.
  *

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

@@ -52,7 +52,11 @@ export interface TransferQueueLabels {
     closeConfirmHeader: string;
     /** Confirmation description when an item is in progress and none failed. */
     closeConfirmDescriptionInProgress: string;
-    /** Confirmation description when an item failed and none is in progress. */
+    /**
+     * Confirmation description when an item failed and none is in progress.
+     * @deprecated Never shown: closing asks for confirmation only while an item
+     * is in progress, since a failed one has nothing left to lose.
+     */
     closeConfirmDescriptionFailed: string;
     /** Confirmation description when items are both in progress and failed. */
     closeConfirmDescriptionMixed: string;
@@ -103,12 +107,12 @@ export interface TransferQueueProps {
  * Each row shows the file's `FileIcon` and name, and a trailing status: a
  * spinner (with a cancel control on hover or focus) while in progress, a check
  * on success, a warning or error icon whose reason is both its tooltip and its
- * accessible name, or "Canceled". The header carries the host's title, a count
- * of failed items, and collapse and close controls. Collapsed while work runs,
+ * accessible name, or "Canceled". The header carries the host's title and the
+ * collapse and close controls. Collapsed while work runs,
  * the rows are replaced by one aggregate `ProgressBar`.
  *
- * Closing while an item is in progress or has failed asks for confirmation
- * first. Once every item has succeeded the queue closes itself after
+ * Closing while an item is in progress asks for confirmation first; a queue
+ * whose items have all settled, failed ones included, closes straight away. Once every item has succeeded the queue closes itself after
  * `autoCloseDelay`; a warned or canceled row keeps it open so it can be read.
  *
  * The root is a polite `role="status"` live region. Positioning is left to

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

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

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

@@ -37,4 +37,4 @@ export interface DialSegmentedControlProps<T extends string> {
  * @param [className] - Additional classes applied to the container.
  * @param [ariaLabel] - Accessible label for the control (applied to the `tablist`).
  */
-export declare const DialSegmentedControl: <T extends string>({ options, value, onChange, disabled, className, ariaLabel, }: DialSegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialSegmentedControl: <T extends string>({ options, value, onChange, disabled, className, ariaLabel, }: DialSegmentedControlProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -1,9 +1,9 @@
 export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer";
 export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
-export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
+export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-hidden";
 export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
-export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
+export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary";
 export declare const selectOptionDisabledClassName = "opacity-75";
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectSubMenuGap = 4;
-export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectChevronIcon: import('react/jsx-runtime').JSX.Element;

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

@@ -43,6 +43,11 @@ export declare const DIAL_KIT_CLASS: {
     readonly popup: "dial-kit-popup";
     /** The `role="dialog"` panel of a `BottomSheet`. */
     readonly bottomSheet: "dial-kit-bottom-sheet";
+    /**
+     * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on
+     * `z-popup` that holds the panel.
+     */
+    readonly bottomSheetOverlay: "dial-kit-bottom-sheet-overlay";
     /** The `role="dialog"` panel of a `SideDrawer`, open or closed. */
     readonly sideDrawer: "dial-kit-side-drawer";
     /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */
@@ -69,6 +74,8 @@ export declare const DIAL_KIT_CLASS: {
      * on a submenu's own list. It is *not* the floating panel.
      */
     readonly dropdownList: "dial-kit-dropdown-list";
+    /** The search row above the item list of a `searchable` `Dropdown`. */
+    readonly dropdownSearch: "dial-kit-dropdown-search";
     /**
      * One row of a floating overlay: a dropdown item, a `Select` option, a
      * submenu trigger, or a submenu child. It sits on the element that draws the