@epam/ai-dial-ui-kit 0.15.0-dev.5 → 0.15.0-dev.50

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

@@ -157,6 +157,7 @@ export interface DialFileManagerProps {
     renameValidationMessages?: RenameValidationMessages;
     forbiddenSymbolsRegExp?: RegExp;
     forbiddenSymbolsTooltip?: ReactNode;
+    skipForbiddenSymbolsCheckForActions?: boolean;
     onCreateFolder?: (file: DialUploadFileItem, folderPath: string, fileId: string) => void | Promise<void>;
     onCreateFolderValidate?: (name: string, parentFolder: DialFile) => string | null;
     folderCreationValidationMessages?: CreateFolderValidationMessages;
@@ -286,6 +287,7 @@ export interface DialFileManagerProps {
  * @param [renameValidationMessages] - Optional custom validation messages for renaming files and folders. Note that you need to add `${NotificationVariant.Warning}__` prefix to the `hiddenItemWarning` message to display it as a warning with the warning icon.
  * @param [forbiddenSymbolsRegExp] - Optional RegExp will be used in the validation for the files and folders names. The "g" and "y" flags are not allowed in this RegExp and will be ignored.
  * @param [forbiddenSymbolsTooltip] - Optional tooltip displayed when a file or folder name contains forbidden characters
+ * @param [skipForbiddenSymbolsCheckForActions] - When provided, skips the forbidden-symbols check when building row action menus, so all actions are shown even for items whose names contain forbidden characters.
  *
  * @param [onDownloadFiles] - Callback fired when files are downloaded
  *

package/dist/src/components/FileManager/FileManagerContext.d.ts

@@ -85,6 +85,7 @@ export interface FileManagerContextValue {
     getDisplayName: (item: DialFile) => string;
     forbiddenSymbolsRegExp?: RegExp;
     forbiddenSymbolsTooltip?: ReactNode;
+    skipForbiddenSymbolsCheckForActions?: boolean;
     openDeleteConfirmation: (items: DialFile[], parentFolderPath: string) => void;
     closeDeleteConfirmation: () => void;
     confirmDelete: () => void;

package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts

@@ -37,7 +37,8 @@ export interface UseGridContextMenuProps {
     isRenameFileAvailable?: boolean;
     isDuplicateFolderAvailable?: boolean;
     forbiddenSymbolsRegExp?: RegExp;
+    skipForbiddenSymbolsCheckForActions?: boolean;
     onGridCreateSiblingFolder: (files: DialFile[]) => void;
     onGridCreateChildFolder: (files: DialFile[]) => void;
 }
-export declare const useGridContextMenu: ({ actionLabels, onDuplicate, onCopy, onMove, onDownload, onRename, onDelete, onInfo, onUnshare, onRemoveAccess, sharedWithMeIds, sharedByMePaths, onManagePermissions, onPreview, onOpenInNewTab, previewExtensions, isRenameFileAvailable, isDuplicateFolderAvailable, forbiddenSymbolsRegExp, onGridCreateSiblingFolder, onGridCreateChildFolder, }: UseGridContextMenuProps) => (file: DialFile) => DropdownItem[];
+export declare const useGridContextMenu: ({ actionLabels, onDuplicate, onCopy, onMove, onDownload, onRename, onDelete, onInfo, onUnshare, onRemoveAccess, sharedWithMeIds, sharedByMePaths, onManagePermissions, onPreview, onOpenInNewTab, previewExtensions, isRenameFileAvailable, isDuplicateFolderAvailable, forbiddenSymbolsRegExp, skipForbiddenSymbolsCheckForActions, onGridCreateSiblingFolder, onGridCreateChildFolder, }: UseGridContextMenuProps) => (file: DialFile) => DropdownItem[];

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

@@ -9,6 +9,7 @@ export interface DialMarkdownEditorProps {
     theme?: EditorThemes;
     className?: string;
     placeholder?: ReactNode;
+    showDragbar?: boolean;
 }
 /**
  * A Markdown editor component built on top of @uiw/react-md-editor.
@@ -32,5 +33,6 @@ export interface DialMarkdownEditorProps {
  * @param [placeholder] - Content to display when the editor is empty
  * @param [theme='dark'] - Theme for the editor ('light' or 'dark')
  * @param [className] - Additional CSS classes for the container
+ * @param [showDragbar=true] - Whether to show the bottom drag bar that resizes the editor height
  */
 export declare const DialMarkdownEditor: FC<DialMarkdownEditorProps>;

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

@@ -12,6 +12,7 @@ export interface DialMarkdownEditorContainerProps {
     theme?: EditorThemes;
     onValidateJSON?: OnValidate;
     preview?: PreviewType;
+    showDragbar?: boolean;
 }
 /**
  * A container component that combines Markdown and JSON editing capabilities
@@ -45,5 +46,6 @@ export interface DialMarkdownEditorContainerProps {
  * @param [theme='dark'] - Theme for the editor (EditorThemes.dark or EditorThemes.light)
  * @param [onValidateJSON] - Callback fired when JSON validation occurs
  * @param [preview='edit'] - Preview mode for Markdown editor
+ * @param [showDragbar=true] - Whether to show the Markdown editor's bottom drag bar that resizes its height
  */
 export declare const DialMarkdownEditorContainer: FC<DialMarkdownEditorContainerProps>;

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

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { AccordionCaretPosition } from '../../../types/accordion';
 export interface AccordionProps {
     /** Title rendered in the header. */
     title: ReactNode;
@@ -24,6 +25,8 @@ export interface AccordionProps {
     ariaLabel?: string;
     /** Fired when the header is clicked. Receives the next expanded state. */
     onToggle?: (expanded: boolean) => void;
+    /** Where the header draws its caret. Defaults to `AccordionCaretPosition.End`. */
+    caretPosition?: AccordionCaretPosition;
     /** Additional CSS classes for the outer container. */
     className?: string;
     /** Additional CSS classes for the header. */
@@ -41,7 +44,8 @@ export interface AccordionProps {
  * expanded, a title, and an optional description stacked beneath it.
  *
  * The revealed content is a labelled `region`, so assistive tech announces it by the
- * header it belongs to. `nonCollapsible` renders the header as static text instead of
+ * header it belongs to. It stays mounted while collapsed so it can slide open and shut,
+ * and is `inert` then, out of both the tab order and the accessibility tree. `nonCollapsible` renders the header as static text instead of
  * a permanently disabled button, which keeps a decorative panel out of the tab order.
  *
  * @example
@@ -64,6 +68,7 @@ export interface AccordionProps {
  * @param [nonCollapsible] - Renders the panel permanently expanded, with a static header.
  * @param [ariaLabel] - Accessible name for the header; needed when `title` carries no text.
  * @param [onToggle] - Fired when the header is clicked. Receives the next expanded state.
+ * @param [caretPosition=AccordionCaretPosition.End] - Where the header draws its caret: before or after the title.
  * @param [className] - Additional CSS classes for the outer container.
  * @param [headerClassName] - Additional CSS classes for the header.
  * @param [contentClassName] - Additional CSS classes for the content region.

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

@@ -0,0 +1,97 @@
+import { FC } from 'react';
+import { LabelProps } from '../Label/Label';
+import { ElementSize } from '../../../types/size';
+import { AutocompleteTagInputSuggestion } from './utils';
+export type { AutocompleteTagInputSuggestion } from './utils';
+export interface AutocompleteTagInputProps {
+    id?: string;
+    /** Controlled tag list. */
+    value?: string[];
+    /** Initial tag list when uncontrolled. */
+    defaultValue?: string[];
+    /** Values offered while typing; a picked suggestion adds its `value` as a tag. */
+    suggestions: AutocompleteTagInputSuggestion[];
+    /** How many matching suggestions the list shows at most. */
+    maxSuggestions?: number;
+    size?: ElementSize;
+    labelProps?: LabelProps;
+    placeholder?: string;
+    caption?: string;
+    error?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    ariaLabel?: string;
+    tagListLabel?: string;
+    /** Accessible name of a tag's remove button; defaults to `Remove <tag>`. */
+    getRemoveTagLabel?: (tag: string) => string;
+    className?: string;
+    fieldClassName?: string;
+    tagClassName?: string;
+    listClassName?: string;
+    onChange?: (tags: string[]) => void;
+}
+/**
+ * A tag input that suggests values while typing and also accepts its own.
+ * aliases: Autocomplete|Combobox|TagAutocomplete|ChipAutocomplete|MultiValueAutocomplete
+ * Design system 2.0
+ *
+ * Typing opens a list of the `suggestions` that match the text (by label, value
+ * or description) and are not already tags, capped at `maxSuggestions`, with the
+ * first one highlighted. Enter or comma adds the highlighted suggestion, or the
+ * typed text when nothing matches; clicking a suggestion adds it too. The arrow
+ * keys move the highlight and wrap at the ends; Escape and leaving the field
+ * close the list without adding what was typed. Backspace on an empty input
+ * removes the last tag, and duplicate tags are ignored. Entered text is not
+ * validated — say what format is expected through `caption`.
+ *
+ * Reach for {@link TagInput} when there is nothing to suggest, and for a
+ * multiple `Select` when only listed values are allowed.
+ *
+ * The input follows the ARIA combobox pattern: it keeps focus while the list is
+ * open, and the highlighted suggestion is announced through
+ * `aria-activedescendant`. The tags are a list named by `tagListLabel`, and each
+ * remove button is named after its tag.
+ *
+ * Works controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).
+ *
+ * @example
+ * ```tsx
+ * const [types, setTypes] = useState<string[]>([]);
+ *
+ * <AutocompleteTagInput
+ *   id="attachment-types"
+ *   labelProps={{ label: 'Attachment types', required: true }}
+ *   caption="Choose a suggested MIME type or add one as <type>/<subtype>"
+ *   suggestions={[
+ *     { value: 'image/png', label: 'PNG', description: 'image/png' },
+ *     { value: 'application/pdf', label: 'PDF', description: 'application/pdf' },
+ *   ]}
+ *   value={types}
+ *   onChange={setTypes}
+ * />
+ * ```
+ *
+ * @param [id] - The id of the text input, linked to the label.
+ * @param [value] - Controlled tag list.
+ * @param [defaultValue=[]] - Initial tag list when uncontrolled.
+ * @param suggestions - Values offered while typing.
+ * @param [maxSuggestions=5] - How many matching suggestions the list shows at most.
+ * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px.
+ * @param [labelProps] - Props of the {@link Label} rendered above the field.
+ * @param [placeholder] - Placeholder shown while there are no tags.
+ * @param [caption] - Helper text rendered below the field when there is no `error`.
+ * @param [error] - Error message rendered below the field (pass `invalid` too for error styling).
+ * @param [invalid=false] - Applies the field's error styling and marks the input `aria-invalid`.
+ * @param [disabled=false] - Disables typing and tag removal.
+ * @param [readOnly=false] - Shows the tags without allowing new ones or removal.
+ * @param [ariaLabel] - Accessible name for the input; use it when there is no visible label.
+ * @param [tagListLabel="Tags"] - Accessible name of the tag list.
+ * @param [getRemoveTagLabel] - Accessible name of a tag's remove button, given the tag; pass a translated one, as the default is the English `Remove <tag>`.
+ * @param [className] - Additional CSS classes for the outer container.
+ * @param [fieldClassName] - Additional CSS classes for the field itself.
+ * @param [tagClassName] - Additional CSS classes applied to every tag.
+ * @param [listClassName] - Additional CSS classes for the floating suggestion list.
+ * @param [onChange] - Called with the new list whenever a tag is added or removed.
+ */
+export declare const AutocompleteTagInput: FC<AutocompleteTagInputProps>;

package/dist/src/components/New/AutocompleteTagInput/utils.d.ts

@@ -0,0 +1,17 @@
+export interface AutocompleteTagInputSuggestion {
+    /** The tag added when the suggestion is picked. */
+    value: string;
+    /** The suggestion's name, shown at the leading edge of its row. */
+    label: string;
+    /** Secondary text shown at the trailing edge of the row, e.g. the value itself. */
+    description?: string;
+}
+/**
+ * The suggestions to show for the typed text: not already a tag, and with the
+ * query in their label, value or description (case-insensitive), in the order
+ * given, capped at `limit`.
+ *
+ * Kept pure and separate from the component so the filtering can be tested
+ * without driving the input.
+ */
+export declare const filterAutocompleteSuggestions: (suggestions: AutocompleteTagInputSuggestion[], query: string, tags: string[], limit: number) => AutocompleteTagInputSuggestion[];

package/dist/src/components/New/AutocompleteTagInput/utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,55 @@
+import { FC, SyntheticEvent } from 'react';
+import { AvatarShape } from '../../../types/avatar';
+/** Props for `Avatar`. */
+export interface AvatarProps {
+    /** Display name the initials and the colour are derived from. */
+    name: string;
+    /** Initials to show instead of the ones derived from `name`. */
+    initials?: string;
+    /** Image URL. The initials show instead while it is missing or fails to load. */
+    src?: string;
+    /** Accessible name. Leave it empty when a visible label beside the avatar already names it. */
+    alt?: string;
+    /** Width and height in px. */
+    size?: number;
+    /** Outline of the avatar. */
+    shape?: AvatarShape;
+    /** Additional CSS classes for the avatar. */
+    className?: string;
+    /** Type-scale class for the initials. When set, it replaces the font size derived from `size`. */
+    textClassName?: string;
+    /** Called when the image fails to load, after the avatar has switched to initials. */
+    onImageError?: (event: SyntheticEvent<HTMLImageElement>) => void;
+}
+/**
+ * A person's or an entity's picture, or its initials on a colour picked from
+ * its name.
+ * aliases: UserAvatar|InitialsAvatar|ProfilePicture
+ * 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.
+ *
+ * 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
+ * assistive technology, which is right when a visible name sits beside it.
+ *
+ * @example
+ * ```tsx
+ * <Avatar name="Ada Lovelace" src={photoUrl} alt="Ada Lovelace" />
+ * <Avatar name="Summarizer" shape={AvatarShape.Square} size={36} />
+ * ```
+ *
+ * @param name - Display name the initials and the colour are derived from
+ * @param [initials] - Initials to show instead of the ones derived from `name`
+ * @param [src] - Image URL; the initials show while it is missing or broken
+ * @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 [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
+ */
+export declare const Avatar: FC<AvatarProps>;

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

@@ -0,0 +1,47 @@
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import { BadgeColor, BadgeVariant } from '../../../types/badge';
+/** Props for `Badge`. */
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {
+    /** Text of the badge. */
+    label: string;
+    /** How the badge is drawn. */
+    variant?: BadgeVariant;
+    /** Visual colour of a filled badge. Ignored by the outlined variant. */
+    color?: BadgeColor;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+    /** Type-scale class for the label, replacing the variant's own. */
+    textClassName?: string;
+}
+/**
+ * A short, static label: a topic, a category, or a status that is not a
+ * control.
+ * aliases: Label|StatusLabel|Pill|Chip
+ * Design system 2.0
+ *
+ * Unlike `Tag`, a badge never responds to the pointer and never removes
+ * itself — reach for `Tag` when the label is something to select, filter by or
+ * dismiss. The badge is 24px tall and does not wrap; a long label keeps its
+ * width, so give the badge a `max-w-*` and a truncating `textClassName` where
+ * that matters.
+ *
+ * `BadgeVariant.Outlined` is the neutral label, bordered on the sunken layer.
+ * `BadgeVariant.Filled` is a pill in one of the theme's visual colours, for
+ * labels that are told apart by colour — so pair the colour with text that
+ * says the same thing, since colour alone does not reach every reader. The
+ * filled variant's type scale is a lead style, which uppercases itself: pass
+ * the label in sentence case.
+ *
+ * @example
+ * ```tsx
+ * <Badge label="Translation" />
+ * <Badge label="Featured" variant={BadgeVariant.Filled} color={BadgeColor.Green} />
+ * ```
+ *
+ * @param label - Text of the badge
+ * @param [variant=BadgeVariant.Outlined] - How the badge is drawn
+ * @param [color=BadgeColor.Blue] - Visual colour of a filled badge
+ * @param [icon] - Decorative icon before the label
+ * @param [textClassName] - Type-scale class for the label, replacing the variant's own
+ */
+export declare const Badge: FC<BadgeProps>;

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

@@ -0,0 +1,84 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+/** Props for `BottomSheet`. */
+export interface BottomSheetProps {
+    /** Whether the sheet is shown. */
+    open: boolean;
+    /** Called when the sheet asks to close: the close button, Escape, or a press on the backdrop. */
+    onClose: () => void;
+    /** Title of the header. A sheet without one has no header and needs `ariaLabel`. */
+    title?: string;
+    /** Accessible name of the sheet when it has no `title`. */
+    ariaLabel?: string;
+    /** Shows a back button at the start of the header when set. */
+    onBack?: () => void;
+    /** Accessible name of the back button. */
+    backAriaLabel?: string;
+    /** Accessible name of the close button. */
+    closeAriaLabel?: string;
+    /** Whether a press on the backdrop closes the sheet. */
+    closeOnOutsideClick?: boolean;
+    /** Content of the sheet, scrolled when it is taller than the sheet allows. */
+    children?: ReactNode;
+    /** Additional CSS classes for the sheet panel, e.g. a different maximum height. */
+    className?: string;
+    /** Additional CSS classes for the backdrop. */
+    overlayClassName?: string;
+    /** Additional CSS classes for the header row. */
+    headerClassName?: string;
+    /**
+     * Inline style for the panel. It renders in a portal, so this is how custom
+     * properties reach the panel and its content.
+     */
+    style?: CSSProperties;
+    /** Inline style for the backdrop, merged after its own positioning. */
+    overlayStyle?: CSSProperties;
+    /** Additional CSS classes for the scrolling body. */
+    bodyClassName?: string;
+    /** Type-scale class for the title, replacing its own. */
+    titleClassName?: string;
+    /** Id of the element to portal into, instead of the end of `<body>`. */
+    portalId?: string;
+}
+/**
+ * A panel that slides up from the bottom edge over a dimmed page — the mobile
+ * counterpart of `Popup`.
+ * aliases: ActionSheet|Drawer|MobileSheet|BottomDrawer
+ * Design system 2.0
+ *
+ * It is a modal dialog: focus moves into it on open and stays there, returns
+ * to where it came from on close, and the page behind it does not scroll.
+ * Escape, the close button and a press on the backdrop all call `onClose`;
+ * the sheet itself stays controlled by `open`.
+ *
+ * With a `title` the header shows it centred, a close button at the end and,
+ * when `onBack` is set, a back button at the start for a sheet that drills
+ * into pages of its own; the title also names the dialog. Without one there is
+ * no header, and `ariaLabel` names the sheet instead. The body scrolls once
+ * the content is taller than 85% of the viewport.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet open={isOpen} title="Select model" onClose={() => setIsOpen(false)}>
+ *   <ModelList />
+ * </BottomSheet>
+ * ```
+ *
+ * @param open - Whether the sheet is shown
+ * @param onClose - Called when the sheet asks to close
+ * @param [title] - Title of the header; without it the sheet has no header
+ * @param [ariaLabel] - Accessible name when there is no `title`
+ * @param [onBack] - Shows a back button at the start of the header
+ * @param [backAriaLabel='Back'] - Accessible name of the back button
+ * @param [closeAriaLabel='Close'] - Accessible name of the close button
+ * @param [closeOnOutsideClick=true] - Whether a press on the backdrop closes the sheet
+ * @param [children] - Content of the sheet
+ * @param [className] - Additional CSS classes for the sheet panel
+ * @param [overlayClassName] - Additional CSS classes for the backdrop
+ * @param [headerClassName] - Additional CSS classes for the header row
+ * @param [style] - Inline style for the panel, e.g. custom properties
+ * @param [overlayStyle] - Inline style for the backdrop
+ * @param [bodyClassName] - Additional CSS classes for the scrolling body
+ * @param [titleClassName] - Type-scale class for the title
+ * @param [portalId] - Id of the element to portal into
+ */
+export declare const BottomSheet: FC<BottomSheetProps>;

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

@@ -0,0 +1,94 @@
+import { FC, MouseEvent, ReactNode } from 'react';
+import { BreadcrumbsSize } from '../../../types/breadcrumbs';
+/** One step of the trail rendered by {@link Breadcrumbs}. */
+export interface BreadcrumbsItem {
+    /**
+     * The segment's text. A plain string rather than a node, because it is both
+     * what is drawn and what the tooltip shows once the trail truncates it.
+     */
+    label: string;
+    /** Where the segment navigates. Renders the segment as a link. */
+    href?: string;
+    /**
+     * Fired when the segment is activated. Renders the segment as a button when
+     * there is no `href`, and runs before the browser follows one when there is —
+     * call `preventDefault()` on the event to keep the user where they are.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** Leading icon, e.g. a folder glyph on the root. Decorative: pass `aria-hidden`. */
+    icon?: ReactNode;
+}
+export interface BreadcrumbsProps {
+    /** The trail, outermost first. The last entry is the current page. */
+    items: BreadcrumbsItem[];
+    /**
+     * How many segments are drawn before the middle collapses behind an
+     * ellipsis menu. Clamped to a floor of three — the root, the ellipsis and
+     * the current page.
+     */
+    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.
+     */
+    size?: BreadcrumbsSize;
+    /** Node drawn between two segments. Defaults to a right chevron, mirrored in RTL. */
+    separator?: ReactNode;
+    /** Accessible name for the `<nav>`. */
+    ariaLabel?: string;
+    /** Accessible name for the ellipsis button that reveals the collapsed segments. */
+    overflowAriaLabel?: string;
+    /** Additional CSS classes for the `<nav>`. Must not shrink it to its content. */
+    className?: string;
+    /** Additional CSS classes applied to every segment. */
+    itemClassName?: string;
+}
+/**
+ * A navigation trail: where the user is, and every level they can step back to.
+ * aliases: Breadcrumb|NavigationPath|BreadcrumbTrail
+ * Design system 2.0
+ *
+ * The last item is the current page — drawn semibold and primary, and never a
+ * control, since a link to the page you are already on does nothing. Every
+ * earlier item with an `href` or an `onClick` is a link; one with neither is
+ * drawn as plain text, which is how a read-only location path is built.
+ *
+ * The trail never wraps. Segments truncate instead, each revealing its full
+ * label in a tooltip only once it is actually clipped, and a trail longer than
+ * `maxVisibleItems` collapses its middle behind an ellipsis menu — the root and
+ * the current page, the two segments that carry the most meaning, always stay
+ * on screen.
+ *
+ * a11y: an `<ol>` inside a named `<nav>`, with `aria-current="page"` on the last
+ * segment. Separators are decorative and hidden from assistive tech, so the
+ * 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.
+ *
+ * Labels are the caller's to translate; the two accessible names default to
+ * English and take an override.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   ariaLabel={t('File path')}
+ *   items={[
+ *     { label: t('My files'), onClick: () => open('/') },
+ *     { label: 'DK Test', onClick: () => open('/DK Test') },
+ *     { label: 'DK Test with nested' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @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 [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
+ * @param [className] - Additional CSS classes for the `<nav>`
+ * @param [itemClassName] - Additional CSS classes applied to every segment
+ */
+export declare const Breadcrumbs: FC<BreadcrumbsProps>;

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

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+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`).
+ */
+export declare const navClassName = "w-full overflow-hidden";
+/** 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. */
+export declare const itemClassName = "flex min-w-0 items-center gap-2";
+/**
+ * The trail's type scale. It sits on the `<li>`, so the segment, the
+ * separator and the tooltip trigger inside it all read from one declaration.
+ */
+export declare const sizeClassName: Record<BreadcrumbsSize, string>;
+/**
+ * The current page is always semibold. `dial-h2-text` already is, so the
+ * heading trail repeats its own token rather than reaching for a semibold
+ * variant that does not exist.
+ */
+export declare const currentSizeClassName: Record<BreadcrumbsSize, string>;
+/**
+ * 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.
+ */
+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";
+/**
+ * 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";
+/**
+ * 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.
+ */
+export declare const currentSegmentClassName = "cursor-default text-primary";
+/** A segment with nowhere to go: rendered, but not a control. */
+export declare const staticSegmentClassName = "cursor-default text-secondary";
+/** The chevron between two segments. */
+export declare const separatorClassName = "inline-flex flex-none items-center leading-none text-secondary";
+/**
+ * The collapsed-middle trigger. `dial-kit-minimum-target` lifts the 16px
+ * 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";
+/**
+ * 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.
+ */
+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;

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

@@ -58,7 +58,10 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
  * `<button>`, so the control keeps the link role, middle-click, and
  * "open in new tab". Pair it with `ButtonAppearance.Link` (or `LinkButton`)
  * unless a button-shaped link is intended.
- * @param [tooltipProps] - Props of the 2.0 {@link Tooltip} wrapping the button
+ * @param [tooltipProps] - Props of the 2.0 {@link Tooltip} wrapping the button.
+ * A disabled button with a visible tooltip is marked `aria-disabled` rather
+ * than natively `disabled`, so it stays focusable and hoverable and the
+ * tooltip can still explain why it is unavailable; its click does nothing.
  * @param [target] - Anchor target, only meaningful alongside `href`
  * @param [rel] - Anchor `rel`. Defaults to `noopener noreferrer` when
  * `target="_blank"`.

package/dist/src/components/New/Button/ButtonWrappers.d.ts

@@ -43,6 +43,27 @@ export declare const NeutralButton: FC<ButtonVariantProps>;
  * Inherits all properties from the `ButtonProps`
  */
 export declare const DangerButton: FC<ButtonVariantProps>;
+/** A Starter Button component — a conversation starter: an outlined neutral
+ * pill whose icons are stroked with the accent gradient
+ * Design system 2.0
+ *
+ * `iconBefore` defaults to a sparkles icon; pass `null` for a label-only pill.
+ *
+ * An SVG stroke cannot take a CSS gradient, so the button renders its own
+ * `linearGradient` with a per-instance id and hands it to its icons through
+ * the `--dial-kit-starter-icon-stroke` custom property. Any icon that strokes
+ * with `currentColor`, as Tabler icons do, picks it up.
+ * @example
+ * ```tsx
+ * <StarterButton
+ *  label="Summarize this document"
+ *  onClick={handleClick}
+ * />
+ * ```
+ *
+ * Inherits all properties from the `ButtonProps`
+ */
+export declare const StarterButton: FC<ButtonVariantProps>;
 /** A Link Button component with predefined link appearance
  * @example
  * ```tsx

package/dist/src/components/New/Button/utils.d.ts

@@ -1,2 +1,17 @@
+import { ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 import { ButtonAppearance, ButtonVariant } from '../../../types/button';
+/** The tooltip fields that decide whether a disabled button must stay reachable. */
+interface DisabledTooltipFields {
+    tooltip?: ReactNode;
+    hideTooltip?: boolean;
+}
+/** The props a button element takes for its disabled state and its click. */
+type DisabledButtonProps = Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'aria-disabled' | 'onClick'>;
+/**
+ * Returns the disabled-state props for a button element: native `disabled`,
+ * or — for a disabled button that shows a tooltip — `aria-disabled` with the
+ * click swallowed, so the button stays hoverable and focusable.
+ */
+export declare const getDisabledButtonProps: (disabled: boolean | undefined, tooltipProps: DisabledTooltipFields | undefined, onClick: MouseEventHandler<HTMLButtonElement> | undefined) => DisabledButtonProps;
 export declare const getButtonClassNames: (variant?: ButtonVariant, appearance?: ButtonAppearance) => string;
+export {};

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

@@ -1,8 +1,11 @@
 import { FC } from 'react';
 import { DropdownItem } from '../../../models/dropdown';
 import { ButtonProps } from '../Button/Button';
+import { DropdownProps } from '../Dropdown/Dropdown';
 export interface ButtonDropdownProps extends Omit<ButtonProps, 'iconAfter'> {
     items: DropdownItem[];
+    /** Menu options forwarded to the underlying `Dropdown`: the panel class and whether the panel matches the button's width. */
+    dropdownProps?: Pick<DropdownProps, 'listClassName' | 'matchReferenceWidth'>;
 }
 /**
  * A Button dropdown component based on the Dropdown component
@@ -20,5 +23,6 @@ export interface ButtonDropdownProps extends Omit<ButtonProps, 'iconAfter'> {
  *
  * Inherits all props from Button.
  * @param [items] - DropdownItems with actions
+ * @param [dropdownProps] - `listClassName` and `matchReferenceWidth` forwarded to the menu `Dropdown`
  */
 export declare const ButtonDropdown: FC<ButtonDropdownProps>;