@epam/ai-dial-ui-kit 0.16.0-dev.7 → 0.16.0-dev.70

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

@@ -28,8 +28,9 @@ export interface BreadcrumbsProps {
      */
     maxVisibleItems?: number;
     /**
-     * The trail's type scale: `dial-small-text` by default, or `dial-h2-text`
-     * for a trail that doubles as the page heading.
+     * The trail's type scale: `dial-small-text` by default, `dial-tiny-text` for
+     * a dense header, or `dial-h2-text` for a trail that doubles as the page
+     * heading.
      */
     size?: BreadcrumbsSize;
     /** Node drawn between two segments. Defaults to a right chevron, mirrored in RTL. */
@@ -64,8 +65,10 @@ export interface BreadcrumbsProps {
  * trail is announced as a list of links rather than a string of chevrons.
  *
  * The trail is drawn at `dial-small-text` by default; `size` switches it to
- * `dial-h2-text` for a trail that doubles as the page heading, where the
- * token's own semibold weight applies to every segment.
+ * `dial-tiny-text` for a dense header — a trail that never clips, so a focus
+ * ring stays whole, and caps no segment, so its current page takes the free
+ * width — or to `dial-h2-text` for a trail that doubles as the page heading,
+ * where the token's own semibold weight applies to every segment.
  *
  * Labels are the caller's to translate; the two accessible names default to
  * English and take an override.
@@ -84,7 +87,7 @@ export interface BreadcrumbsProps {
  *
  * @param items - The trail, outermost first; the last entry is the current page
  * @param [maxVisibleItems=4] - Segments drawn before the middle collapses behind an ellipsis menu
- * @param [size=BreadcrumbsSize.Small] - The trail's type scale: `dial-small-text` or `dial-h2-text`
+ * @param [size=BreadcrumbsSize.Small] - The trail's type scale: `dial-small-text`, `dial-tiny-text` or `dial-h2-text`
  * @param [separator] - Node drawn between two segments; defaults to a right chevron
  * @param [ariaLabel='Breadcrumb'] - Accessible name for the `<nav>`
  * @param [overflowAriaLabel='Show hidden path segments'] - Accessible name for the ellipsis button

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

@@ -3,9 +3,10 @@ import { BreadcrumbsSize } from '../../../types/breadcrumbs';
 /**
  * The `<nav>`. It clips rather than wraps: a breadcrumb that reflows onto a
  * second line moves the content below it, so the trail truncates its segments
- * instead (see `segmentWidthClassName`).
+ * instead (see `segmentWidthClassName`). The tiny trail does not clip at all,
+ * so a segment's focus ring stays whole; its segments truncate on their own.
  */
-export declare const navClassName = "w-full overflow-hidden";
+export declare const navClassName: Record<BreadcrumbsSize, string>;
 /** The `<ol>` holding the segments and their separators. */
 export declare const listClassName = "flex min-w-0 flex-nowrap items-center gap-2 whitespace-nowrap";
 /** One `<li>`: the segment and the separator that follows it. */
@@ -21,20 +22,25 @@ export declare const sizeClassName: Record<BreadcrumbsSize, string>;
  * variant that does not exist.
  */
 export declare const currentSizeClassName: Record<BreadcrumbsSize, string>;
+type SegmentPosition = 'first' | 'middle' | 'last';
 /**
- * How each segment gives up width when the trail does not fit. The root keeps
- * its full label — it is the anchor the user navigates back to — the middle
- * segments truncate first, and the current page keeps the largest share of
- * what is left, since it names where the user actually is.
+ * The tiny trail caps nothing, so a trail that fits is never truncated. Its
+ * middle segments shrink a thousand times faster than the current page, down
+ * to a letter and their chevron; only then does the current page give way.
  */
-export declare const segmentWidthClassName: Record<'first' | 'middle' | 'last', string>;
+export declare const segmentWidthClassName: Record<BreadcrumbsSize, Record<SegmentPosition, string>>;
+/**
+ * The focus ring's shape, shared by the segments and the ellipsis button. The
+ * tiny trail draws the design's 1px offset around a 4px radius.
+ */
+export declare const focusRingClassName: Record<BreadcrumbsSize, 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-xs transition-colors";
+export declare const segmentClassName = "flex min-w-0 flex-1 items-center gap-1 transition-colors";
 /**
  * A segment the user can follow. Secondary until hovered, then accent — the
  * same pairing the kit's other inline links use.
  */
-export declare const linkSegmentClassName = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
+export declare const linkSegmentClassName = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-focus";
 /**
  * The last segment: where the user is. Semibold and primary, and never a
  * link — a control that navigates to the page it is on has nothing to do.
@@ -49,7 +55,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-xs 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 text-secondary transition-colors hover:text-accent focus-visible:outline 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.
@@ -58,3 +64,4 @@ export declare const MIN_VISIBLE_ITEMS = 3;
 /** Segments shown before the trail collapses. */
 export declare const DEFAULT_MAX_VISIBLE_ITEMS = 4;
 export declare const defaultSeparator: ReactNode;
+export {};

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

@@ -1,7 +1,22 @@
-import { FC, FocusEventHandler } from 'react';
+import { FC, FocusEventHandler, ReactNode } from 'react';
 import { LabelProps } from '../Label/Label';
 import { CalendarMode } from '../../../types/calendar';
 export type CalendarValue = Date | string | null;
+/** Props handed to {@link CalendarProps.renderTimeField}. */
+export interface CalendarTimeFieldRenderProps {
+    /** Current time of day as `"HH:mm"`, or an empty string when no date is selected yet. */
+    value: string;
+    /** Call with a complete `"HH:mm"` string; the Calendar merges it into its `Date` value. */
+    onChange: (time: string) => void;
+    /** Forward to the field's input so the Calendar's `onBlur` keeps firing. */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    disabled: boolean;
+    invalid: boolean;
+    /** Accessible name for the field. */
+    ariaLabel: string;
+    /** Viewer's timezone hint when `showTimezone` is set, otherwise `null`. */
+    timezoneLabel: string | null;
+}
 export interface CalendarProps {
     mode?: CalendarMode;
     value?: CalendarValue;
@@ -15,6 +30,12 @@ export interface CalendarProps {
     placeholder?: string;
     disabled?: boolean;
     invalid?: boolean;
+    /**
+     * Ids of elements describing the field — typically an error rendered next
+     * to it. Lands on the focusable control: the masked input in `time` mode,
+     * the popover trigger otherwise.
+     */
+    ariaDescribedBy?: string;
     id?: string;
     className?: string;
     minDate?: Date;
@@ -24,10 +45,31 @@ 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;
+    /**
+     * `datetime` mode only: replaces the time field in the popover footer with
+     * a custom control, e.g. one that opens its own hour/minute picker. The
+     * default is the built-in typeable `HH:mm` field. The Calendar keeps owning
+     * the `Date` value — the control only reads and writes the `"HH:mm"` part.
+     */
+    renderTimeField?: (props: CalendarTimeFieldRenderProps) => ReactNode;
+    /**
+     * `time` mode only: classes merged onto the clock button after its
+     * defaults, so a conflicting utility such as `size-6` overrides the default
+     * `size-8`. Pairs with `fieldClassName` to fit the field and button into a
+     * denser layout, e.g. a custom `renderTimeField` control.
+     */
+    pickerButtonClassName?: string;
 }
 /**
  * A date/time picker supporting four selection modes.
@@ -57,12 +99,16 @@ export interface CalendarProps {
  * @param [placeholder] - Placeholder shown when there is no value; defaults to a mode-appropriate string ("Select date", "Select date and time", "--:--" or "Select day")
  * @param [disabled=false] - Disables the control
  * @param [invalid=false] - Applies error styling
+ * @param [ariaDescribedBy] - Ids of elements describing the field (e.g. its error), set on the focusable control
  * @param [id] - id applied to the control, linked to the label
  * @param [className] - Additional CSS classes applied to the outer container
  * @param [minDate] - Earliest selectable date (date/datetime modes)
  * @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
+ * @param [pickerButtonClassName] - `time` mode only: classes merged onto the clock button after its defaults, so a conflicting utility overrides them
+ * @param [renderTimeField] - `datetime` mode only: renders a custom control in place of the popover footer's time field; receives the `"HH:mm"` value, `onChange`, `onBlur`, `disabled`, `invalid`, `ariaLabel` and `timezoneLabel`
  */
 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

@@ -5,6 +5,8 @@ export declare const calendarFieldBaseClassName = "flex w-full items-center just
 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 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";

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;

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

@@ -0,0 +1,78 @@
+import { ErrorInfo, FC, ReactNode } from 'react';
+export interface ErrorBoundaryProps {
+    /** The subtree to guard. */
+    children?: ReactNode;
+    /** Headline of the fallback screen (its `h1`); also what is announced on a crash. */
+    title: ReactNode;
+    /** Optional line under the title saying what happened or what to do. */
+    description?: ReactNode;
+    /** Text of the recovery button. */
+    actionLabel: string;
+    /**
+     * Called when the recovery button is activated, before the boundary renders
+     * its children again. Omit it to reload the page instead — the right
+     * recovery for an app-level boundary, where state may be corrupt.
+     */
+    onReset?: () => void;
+    /**
+     * Values that clear the error when any of them changes, compared with
+     * `Object.is` — typically the current route path, so navigating away from a
+     * crashed page recovers.
+     */
+    resetKeys?: readonly unknown[];
+    /** Called once per caught error, for logging or reporting. */
+    onError?: (error: unknown, info: ErrorInfo) => void;
+    /** Glyph in the fallback badge. Defaults to a warning triangle; `null` drops the badge. */
+    icon?: ReactNode;
+    /** Additional CSS classes for the fallback `StateScreen`. */
+    className?: string;
+}
+/**
+ * Catches a render error in its subtree and replaces the subtree with a
+ * full-container error screen that has one way out.
+ * aliases: ErrorFallback|CrashScreen|ErrorPage|SomethingWentWrong|RootErrorBoundary
+ * Design system 2.0
+ *
+ * The fallback is a `StateScreen` with a warning badge and a `PrimaryButton`
+ * that takes focus, since the control the user was on is gone. The crash is
+ * announced through an assertive `LiveRegion` that is mounted with the
+ * boundary, before any error: a region mounted together with its message is
+ * often not read.
+ *
+ * The button calls `onReset` and renders the children again, or reloads the
+ * page when `onReset` is omitted. `resetKeys` clears the error without a click.
+ * Like every React error boundary, it does not catch errors in event handlers,
+ * async code or the boundary itself. All text comes from props.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary
+ *   title={t('error.title')}
+ *   description={t('error.description')}
+ *   actionLabel={t('error.reload')}
+ *   onError={(error) => logger.error(error)}
+ * >
+ *   <App />
+ * </ErrorBoundary>
+ *
+ * <ErrorBoundary
+ *   title={t('error.title')}
+ *   actionLabel={t('error.tryAgain')}
+ *   onReset={() => {}}
+ *   resetKeys={[pathname]}
+ * >
+ *   <SettingsPage />
+ * </ErrorBoundary>
+ * ```
+ *
+ * @param [children] - The subtree to guard.
+ * @param title - Headline of the fallback; also the announcement.
+ * @param [description] - Optional line under the title.
+ * @param actionLabel - Text of the recovery button.
+ * @param [onReset] - Recovery handler; the page reloads without one.
+ * @param [resetKeys] - Values that clear the error when one of them changes.
+ * @param [onError] - Called once per caught error.
+ * @param [icon] - Glyph in the fallback badge; `null` drops it.
+ * @param [className] - Additional CSS classes for the fallback screen.
+ */
+export declare const ErrorBoundary: FC<ErrorBoundaryProps>;

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