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

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

@@ -4,7 +4,7 @@ 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 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-[53] flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md";
+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 calendarDaySelectedClassName = "bg-control-accent text-control-permanent";
 export declare const calendarDayTodayClassName = "text-accent dial-small-semi-text";

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

@@ -6,7 +6,6 @@ export declare const loaderContainerClassName = "px-6 py-4 h-[120px]";
 export declare const defaultCancelLabel = "Cancel";
 export declare const defaultConfirmLabel = "Ok";
 export declare const variantConfig: Record<ConfirmationPopupVariant, {
-    container?: string;
     confirm: {
         variant: ButtonVariant;
         appearance: ButtonAppearance;

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

@@ -1,5 +1,5 @@
 import { Placement } from '@floating-ui/react';
-import { FC, MouseEvent, ReactNode, RefObject } from 'react';
+import { CSSProperties, FC, MouseEvent, ReactNode, RefObject } from 'react';
 import { DropdownTrigger } from '../../../types/dropdown';
 import { DropdownItem } from '../../../models/dropdown';
 export interface DropdownProps {
@@ -25,6 +25,13 @@ export interface DropdownProps {
     overlayContentClassName?: string;
     separatorClassName?: string;
     listClassName?: string;
+    /**
+     * Inline style for the floating overlay. The overlay renders in a portal, so
+     * this is the only way to hand it CSS custom properties from a caller's own
+     * scope — e.g. theme variables that its rows and header read. Positioning
+     * stays the dropdown's own: `floatingStyles` is applied on top of it.
+     */
+    listStyle?: CSSProperties;
     outsidePressIgnoreRef?: RefObject<HTMLElement | null>;
     outsideClosable?: boolean;
     anchorToMouse?: boolean;
@@ -97,6 +104,7 @@ export interface DropdownProps {
  * @param [overlayContentClassName] - Additional CSS classes applied to the overlay content
  * @param [separatorClassName] - Additional CSS classes applied to the separators between items
  * @param [listClassName] - Additional CSS classes applied to the floating overlay
+ * @param [listStyle] - Inline style applied to the floating overlay, under the dropdown's own positioning styles
  * @param [outsidePressIgnoreRef] - Ref to an element that should not trigger outside press behavior
  * @param [outsideClosable=true] - Whether clicks outside the overlay should close it
  * @param [anchorToMouse=false] - Whether to anchor the dropdown to the mouse position

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

@@ -1,6 +1,9 @@
 export declare const dropdownBaseClassName: string;
 export declare const dropdownListBaseClassName: string;
 export declare const dropdownSubMenuClassName: string;
+export declare const dropdownSubMenuListClassName: string;
+/** The top-level item list: rows 2px apart, inset from the panel edge. */
+export declare const dropdownItemListClassName: string;
 /**
  * The row's own styling lives in {@link MenuItem}, which renders every item of
  * the menu. This alias is what a fully custom overlay row can lean on to match

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

@@ -0,0 +1,85 @@
+import { FC, ReactNode } from 'react';
+import { EntityType } from '../../../types/entity-type';
+/** Identity fields of the entity rendered by `EntityIdentity`. */
+export interface EntityIdentityItem {
+    /** Entity category; picks the colour of the type label and the featured chip. */
+    type: EntityType;
+    /** Display name. */
+    name: string;
+    /** Version shown next to the name. */
+    version?: string;
+    /** Icon URL. The initials of `name` show while it is missing or fails to load. */
+    iconUrl?: string;
+    /** Whether the entity is marked as featured. */
+    isFeatured?: boolean;
+}
+/** User-visible strings of `EntityIdentity`. */
+export interface EntityIdentityLabels {
+    /** Type label text, rendered uppercase. Defaults to the English name of `item.type`. */
+    type?: string;
+    /** Featured chip text. Defaults to `'Featured'`. */
+    featured?: string;
+}
+/** Props for `EntityIdentity`. */
+export interface EntityIdentityProps {
+    /** The entity to display. */
+    item: EntityIdentityItem;
+    /** User-visible strings; pass translated ones in a localised app. */
+    labels?: EntityIdentityLabels;
+    /** Whether to show `item.version` next to the name. */
+    showVersion?: boolean;
+    /** Whether to show the featured chip when `item.isFeatured` is true. */
+    hasFeaturedTag?: boolean;
+    /** Width and height of the icon in px. */
+    iconSize?: number;
+    /** Heading level of the name, 1–6. */
+    headingLevel?: number;
+    /** Search query; the matching part of the name is highlighted. */
+    query?: string;
+    /** Content pinned to the bottom of the text column, aligned with the bottom of the icon. */
+    footer?: ReactNode;
+    /** Badge rendered before the featured chip, in the top-end corner. */
+    statusBadge?: ReactNode;
+    /** Additional CSS classes for the root. */
+    className?: string;
+    /** Type-scale class for the name. Defaults to `'dial-h3-text'`. */
+    nameClassName?: string;
+    /** Type-scale class for the type label. Defaults to `'dial-caption-lead-semi-text'`. */
+    typeClassName?: string;
+    /** Type-scale class for the version. Defaults to `'dial-tiny-text'`. */
+    versionClassName?: string;
+    /** Additional CSS classes for the icon, e.g. to change its corner radius. */
+    iconClassName?: string;
+    /** Additional CSS classes for the featured chip. */
+    featuredChipClassName?: string;
+}
+/**
+ * The identity block of a DIAL entity: its icon, a coloured type label, the
+ * name and the version, with an optional featured chip.
+ * aliases: EntityHeader|ModelHeader|AppIdentity
+ * Design system 2.0
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <EntityIdentity
+ *   item={{ type: EntityType.Model, name: 'GPT-4o', version: '2024-11-20' }}
+ *   labels={{ type: t('Model') }}
+ * />
+ * ```
+ *
+ * @param item - The entity to display
+ * @param [labels] - User-visible strings
+ * @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
+ * @param [headingLevel=3] - Heading level of the name
+ * @param [query] - Search query highlighted in the name
+ * @param [footer] - Content pinned to the bottom of the text column
+ * @param [statusBadge] - Badge in the top-end corner
+ */
+export declare const EntityIdentity: FC<EntityIdentityProps>;

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

@@ -0,0 +1,61 @@
+import { FC, ReactNode } from 'react';
+import { DialItemType } from '../../../types/item';
+/** Props for `FileIcon`. */
+export interface FileIconProps {
+    /** Whether the item is a file or a folder. */
+    type: DialItemType;
+    /** Item name; a file's extension is read from it unless `fileExtension` is set. */
+    name: string;
+    /** Extension to pick the glyph by, overriding the one in `name`. With or without a leading dot. */
+    fileExtension?: string;
+    /** Draws the shared badge in the bottom-left corner. */
+    shared?: boolean;
+    /** Replaces the glyph with a spinner. */
+    loading?: boolean;
+    /** Glyph size in px. Defaults to `DIAL_ICON_SIZE.MD` (20). */
+    size?: number;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+    /** Hides the icon from assistive technology when the row already names the item. */
+    decorative?: boolean;
+    /** Accessible name. Defaults to "PDF file", "File" or "Folder", with ", shared" appended when shared. */
+    label?: string;
+    /** Accessible name of the spinner shown while `loading`. */
+    loadingLabel?: string;
+    /** Additional CSS classes for the shared badge. */
+    sharedIndicatorClassName?: string;
+    /** Tooltip shown over the shared badge. */
+    sharedIndicatorTooltip?: ReactNode;
+}
+/**
+ * The icon of a file or folder row in a file manager: a file-type glyph picked
+ * by extension, or a folder, with an optional shared badge and loading state.
+ * aliases: FileTypeIcon|EntityIcon
+ * Design system 2.0
+ *
+ * The root is a `role="img"` whose name says what the item is, and that it is
+ * shared — the badge itself is drawn inside the image, so its tooltip is a
+ * pointer-only hint and never the only place the state is conveyed. While
+ * `loading`, the root drops the role and holds a `Spinner`, which announces
+ * itself as a status. Pass `decorative` when the row already names the item.
+ *
+ * @example
+ * ```tsx
+ * <FileIcon name="report.pdf" type={DialItemType.File} shared />
+ * <FileIcon name="Projects" type={DialItemType.Folder} loading />
+ * ```
+ *
+ * @param type - Whether the item is a file or a folder
+ * @param name - Item name; a file's extension is read from it
+ * @param [fileExtension] - Extension overriding the one in `name`
+ * @param [shared=false] - Draws the shared badge
+ * @param [loading=false] - Replaces the glyph with a spinner
+ * @param [size=DIAL_ICON_SIZE.MD] - Glyph size in px
+ * @param [className] - Additional CSS classes for the root element
+ * @param [decorative=false] - Hides the icon from assistive technology
+ * @param [label] - Accessible name, overriding the generated one
+ * @param [loadingLabel='Loading'] - Accessible name of the spinner
+ * @param [sharedIndicatorClassName] - Additional CSS classes for the shared badge
+ * @param [sharedIndicatorTooltip='Shared'] - Tooltip shown over the shared badge
+ */
+export declare const FileIcon: FC<FileIconProps>;

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

@@ -0,0 +1,16 @@
+/** The kinds of file the 2.0 glyph distinguishes. */
+export declare enum FileGlyphKind {
+    Images = "images",
+    Video = "video",
+    Audio = "audio",
+    Code = "code",
+    Text = "text",
+    Pdf = "pdf",
+    Spreadsheet = "spreadsheet",
+    Presentation = "presentation",
+    Archive = "archive",
+    Dial = "dial",
+    Other = "other"
+}
+/** The glyph kind for a lower-case extension; anything unknown is `Other`. */
+export declare const getFileGlyphKind: (extension: string) => FileGlyphKind;

package/dist/src/components/New/FileIcon/icons/FileGlyph.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { FileGlyphKind } from '../constants';
+interface FileGlyphProps {
+    size: number;
+    kind: FileGlyphKind;
+}
+/**
+ * The 2.0 file glyph: a gradient sheet with the line work of its kind.
+ * Design system 2.0
+ *
+ * Inlined for the same reasons as `FolderGlyph`: a per-instance gradient `id`
+ * from `useId`, and theme tokens in place of fixed hex values.
+ *
+ * @param size - Width and height in px
+ * @param kind - Which art to draw
+ */
+export declare const FileGlyph: FC<FileGlyphProps>;
+export {};

package/dist/src/components/New/FileIcon/icons/FolderGlyph.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+interface FolderGlyphProps {
+    size: number;
+}
+/**
+ * The 2.0 folder glyph: a blue back tab over a grey-to-blue gradient body.
+ * Design system 2.0
+ *
+ * Inlined rather than imported as an SVG asset for two reasons: the gradient
+ * `id` comes from `useId`, so a list of folders does not repeat one document-
+ * wide id (a hidden first copy would otherwise blank every other gradient);
+ * and the colours resolve from theme tokens instead of fixed hex values.
+ *
+ * @param size - Width and height in px
+ */
+export declare const FolderGlyph: FC<FolderGlyphProps>;
+export {};

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

@@ -0,0 +1,79 @@
+import { FC, ReactNode } from 'react';
+import { DialItemType } from '../../../types/item';
+/** Props for `FileName`. */
+export interface FileNameProps {
+    /** Full item name, with or without an extension. */
+    name: string;
+    /** Whether the item is a file or a folder. Defaults to a file. */
+    type?: DialItemType;
+    /** Extension to pick the icon by, overriding the one in `name`. */
+    fileExtension?: string;
+    /** Draws the shared badge on the icon. */
+    shared?: boolean;
+    /** Replaces the icon with a spinner, which announces itself as a status. */
+    loading?: boolean;
+    /** Accessible name of the spinner shown while `loading`. */
+    loadingLabel?: string;
+    /** Icon size in px. Defaults to the `FileIcon` size (20). */
+    iconSize?: number;
+    /** Metadata under the name (size, date); switches the text to two lines. */
+    details?: ReactNode;
+    /** Mutes the name, marking it as containing invalid characters. */
+    isInvalidName?: boolean;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+    /** Additional CSS classes for the name text. */
+    nameClassName?: string;
+    /** Additional CSS classes for the shared badge. */
+    sharedIndicatorClassName?: string;
+    /** Tooltip shown over the shared badge. */
+    sharedIndicatorTooltip?: ReactNode;
+    /** Screen-reader text announcing the shared state. */
+    sharedLabel?: string;
+    /** Suppresses the full-name tooltip even while the name is truncated. */
+    hideTooltip?: boolean;
+    /** Shown instead of the full name while it is truncated. */
+    tooltipContent?: ReactNode;
+}
+/**
+ * A file or folder name with its type icon, truncated with a tooltip when it
+ * does not fit.
+ * aliases: FileDisplay|NameDisplay
+ * Design system 2.0
+ *
+ * The visible name already says what the item is, so the icon is decorative;
+ * the shared state, which only the badge shows, is announced by a
+ * visually-hidden `sharedLabel` after the name instead.
+ *
+ * While `loading` the icon is swapped for a `Spinner`, which is left in the
+ * accessibility tree so the busy state is announced.
+ *
+ * With `details` the text switches to two lines — the name, then the metadata.
+ *
+ * @example
+ * ```tsx
+ * <FileName name="Document.pdf" shared />
+ * <FileName
+ *   name="Document.pdf"
+ *   details={<span className="dial-tiny-text text-secondary">24 KB · Jul 20</span>}
+ * />
+ * ```
+ *
+ * @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 [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
+ * @param [iconSize] - Icon size in px
+ * @param [details] - Metadata under the name
+ * @param [isInvalidName=false] - Mutes the name, marking it as invalid
+ * @param [className] - Additional CSS classes for the root element
+ * @param [nameClassName] - Additional CSS classes for the name text
+ * @param [sharedIndicatorClassName] - Additional CSS classes for the shared badge
+ * @param [sharedIndicatorTooltip='Shared'] - Tooltip shown over the shared badge
+ * @param [sharedLabel='Shared'] - Screen-reader text announcing the shared state
+ * @param [hideTooltip=false] - Suppresses the full-name tooltip
+ * @param [tooltipContent] - Shown instead of the full name while truncated
+ */
+export declare const FileName: FC<FileNameProps>;

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

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { FileNameProps } from '../FileName/FileName';
+/** Props for `FolderName`. */
+export type FolderNameProps = Omit<FileNameProps, 'type' | 'fileExtension'>;
+/**
+ * A folder name with the folder icon, truncated with a tooltip when it does
+ * not fit.
+ * aliases: FolderDisplay|DirectoryName
+ * Design system 2.0
+ *
+ * A `FileName` fixed to `DialItemType.Folder`, so it shares every behaviour of
+ * it — decorative icon, visually-hidden shared label, `details` line and the
+ * `loading` spinner. Its root carries `dial-kit-folder-name` on top of
+ * `dial-kit-file-name`.
+ *
+ * @example
+ * ```tsx
+ * <FolderName name="Organization" shared />
+ * <FolderName name="Uploads" loading />
+ * ```
+ *
+ * @param name - Folder name
+ * @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
+ * @param [iconSize] - Icon size in px
+ * @param [details] - Metadata under the name
+ * @param [isInvalidName=false] - Mutes the name, marking it as invalid
+ * @param [className] - Additional CSS classes for the root element
+ * @param [nameClassName] - Additional CSS classes for the name text
+ * @param [sharedIndicatorClassName] - Additional CSS classes for the shared badge
+ * @param [sharedIndicatorTooltip='Shared'] - Tooltip shown over the shared badge
+ * @param [sharedLabel='Shared'] - Screen-reader text announcing the shared state
+ * @param [hideTooltip=false] - Suppresses the full-name tooltip
+ * @param [tooltipContent] - Shown instead of the full name while truncated
+ */
+export declare const FolderName: FC<FolderNameProps>;

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

@@ -23,9 +23,8 @@ export declare const ROW_HEIGHT = 40;
  * literal fallbacks the Tailwind config carries, so a consumer that defines no
  * CSS variables still gets the intended palette.
  *
- * Hover sits one step up the accent-alpha ramp from the selected tint, so a
- * hovered selected row still reads as hovered — the same relationship the 2.0
- * dropdown and select rows use.
+ * Hover uses the subtle accent tint and selection the slightly stronger
+ * selected tint, as in the grid cell design.
  */
 export declare const GRID_THEME_PARAMS: {
     accentColor: string;
@@ -35,9 +34,11 @@ export declare const GRID_THEME_PARAMS: {
     rowHoverColor: string;
     borderColor: string;
     rowBorder: string;
-    headerRowBorder: string;
+    headerRowBorder: boolean;
     headerColumnBorder: string;
+    headerColumnBorderHeight: number;
     chromeBackgroundColor: string;
+    headerBackgroundColor: string;
     foregroundColor: string;
     headerTextColor: string;
     browserColorScheme: string;
@@ -47,6 +48,7 @@ export declare const GRID_THEME_PARAMS: {
     fontFamily: string;
     spacing: number;
     borderRadius: number;
+    inputBorderRadius: number;
     wrapperBorderRadius: number;
 };
 /**

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

@@ -1,5 +1,5 @@
 import { Placement } from '@floating-ui/react';
-import { ButtonHTMLAttributes, FC } from 'react';
+import { ButtonHTMLAttributes, CSSProperties, FC } from 'react';
 import { DropdownItem } from '../../../models/dropdown';
 import { ElementSize } from '../../../types/size';
 export interface InlineSelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -9,6 +9,8 @@ export interface InlineSelectTriggerProps extends ButtonHTMLAttributes<HTMLButto
     size?: ElementSize;
     /** Whether the inline select is open or not. */
     isOpen?: boolean;
+    /** Additional CSS classes applied to the label, e.g. its type scale or colour. */
+    labelClassName?: string;
 }
 export declare const InlineSelectTrigger: FC<InlineSelectTriggerProps>;
 export interface InlineSelectProps {
@@ -30,11 +32,24 @@ export interface InlineSelectProps {
     matchReferenceWidth?: boolean;
     /** Additional CSS classes applied to the dropdown overlay. */
     listClassName?: string;
+    /**
+     * Inline style for the dropdown overlay. The overlay renders in a portal, so
+     * this is how custom properties reach its rows.
+     */
+    listStyle?: CSSProperties;
     /**
      * Accessible name for the trigger. Without it the control announces only its
      * current value ("Option A"), never what is being selected.
      */
     ariaLabel?: string;
+    /** Additional CSS classes applied to the trigger button, merged after its own. */
+    triggerClassName?: string;
+    /** Additional CSS classes applied to the trigger's label. */
+    triggerLabelClassName?: string;
+    /** Controlled open state of the dropdown. Pair it with `onOpenChange`. */
+    open?: boolean;
+    /** Fired when the dropdown opens or closes. Receives the new open state. */
+    onOpenChange?: (open: boolean) => void;
 }
 /**
  * An inline select control combining `InlineSelectTrigger` with `Dropdown`.

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

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { TooltipPlacement } from '../../../types/tooltip';
+import { InteractiveTooltipTrigger, TooltipPlacement } from '../../../types/tooltip';
 export interface InteractiveTooltipProps {
     /**
      * The panel's content. Left fully open-ended — unlike a plain tooltip's
@@ -16,6 +16,12 @@ export interface InteractiveTooltipProps {
     hideTooltip?: boolean;
     /** Whether the panel starts open (uncontrolled only). */
     initialOpen?: boolean;
+    /**
+     * What opens the panel: hover or keyboard focus (the default), or a click or
+     * tap on the trigger, which then stays open until a second click, a press
+     * outside or Escape.
+     */
+    trigger?: InteractiveTooltipTrigger;
     /** Controlled open state; disables the hover and focus triggers. */
     open?: boolean;
     /** Callback fired when the open state should change. */
@@ -41,7 +47,11 @@ export interface InteractiveTooltipProps {
  *
  * Renders nothing on a mobile screen, where there is no hover to reveal it —
  * so, as with {@link Tooltip}, a control must never depend on this panel alone
- * to be understood or operated.
+ * to be understood or operated. A trigger whose only job is to reveal the
+ * panel, such as an info chip, sets `trigger={InteractiveTooltipTrigger.Click}`
+ * instead: the panel then opens on click or tap, works on every screen size,
+ * and no longer reacts to hover or focus. Do not use it on a trigger that has
+ * an action of its own, since the same tap would run both.
  *
  * @example
  * ```tsx
@@ -68,6 +78,7 @@ export interface InteractiveTooltipProps {
  * @param [contentClassName] - Additional CSS classes for the panel
  * @param [placement=TooltipPlacement.Right] - Side of the trigger the panel is placed on
  * @param [initialOpen=false] - Whether the panel starts open (uncontrolled only)
+ * @param [trigger=InteractiveTooltipTrigger.Hover] - What opens the panel: hover or focus, or a click or tap that keeps it open until dismissed
  * @param [open] - Controlled open state; disables the hover and focus triggers
  * @param [onOpenChange] - Callback fired when the open state should change
  */

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

@@ -10,9 +10,10 @@ export declare const INTERACTIVE_TOOLTIP_GAP = 8;
  */
 export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
 /**
- * The panel sits above the surface it is anchored to — a dropdown or select
- * overlay, both `z-[53]` — since it can be opened from a row inside one of
- * them.
+ * 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
+ * dropdown or select overlay, both `z-floating` — since it can be opened from
+ * a row inside one of them.
  *
  * By style this is a neutral floating panel rather than the coloured
  * `Notification` banner: it shares the raised-card shape a dropdown or the
@@ -23,4 +24,4 @@ export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
  * Padding and width are the panel's own, sized for a block of copy and
  * controls rather than a menu row.
  */
-export declare const interactiveTooltipClassName = "z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
+export declare const interactiveTooltipClassName = "z-interactive-tooltip max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";

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

@@ -14,6 +14,8 @@ export interface MarkdownEditorProps {
     id?: string;
     /** Accessible name for the underlying textarea. Use it only where no visible label exists to pair with `id`. */
     ariaLabel?: string;
+    /** Whether to show the bottom drag bar that resizes the editor height. */
+    showDragbar?: boolean;
 }
 /**
  * The 2.0 Markdown editor: a formatting toolbar (bold/italic/strikethrough,
@@ -35,5 +37,6 @@ export interface MarkdownEditorProps {
  * @param [defaultPreview='edit'] - Initial edit/live/preview mode
  * @param [id] - `id` of the underlying textarea, for a visible `<label htmlFor>`
  * @param [ariaLabel] - Accessible name for the underlying textarea
+ * @param [showDragbar=true] - Whether to show the bottom drag bar that resizes the editor height
  */
 export declare const MarkdownEditor: FC<MarkdownEditorProps>;

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

@@ -5,6 +5,7 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
     type?: NotificationType;
     title?: ReactNode;
     message: ReactNode;
+    action?: ReactNode;
     closable?: boolean;
     iconSize?: number;
     iconStroke?: number;
@@ -57,12 +58,29 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  *   title="Title"
  *   message="Description text example"
  * />
+ *
+ * <Notification
+ *   variant={NotificationVariant.Error}
+ *   type={NotificationType.SectionMessage}
+ *   title="Couldn't finish this response"
+ *   message="Something went wrong. Try again in a moment."
+ *   action={
+ *     <Button
+ *       variant={ButtonVariant.Neutral}
+ *       appearance={ButtonAppearance.Outlined}
+ *       size={ElementSize.Small}
+ *       label="Try again"
+ *       onClick={handleRetry}
+ *     />
+ *   }
+ * />
  * ```
  *
  * @param [variant=NotificationVariant.Info] - Defines the visual style and icon of the alert
  * @param [type=NotificationType.Toast] - Defines the type of notification, either a toast or a section message
  * @param [title] - Optional heading displayed above the message in semibold
  * @param message - Message text to display inside the alert
+ * @param [action] - Optional control (typically a small `Button`) rendered at the inline end, after the text and before the close button; the caller supplies its accessible name
  * @param [className] - Additional CSS classes applied to the alert container
  * @param [textClassName] - Additional CSS classes applied to the message text
  * @param [closable=false] - Whether the alert has a close button

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

@@ -1,4 +1,4 @@
-import { FC, MouseEvent, ReactNode } from 'react';
+import { CSSProperties, FC, MouseEvent, ReactNode } from 'react';
 import { ButtonProps } from '../Button/Button';
 import { PopupSize } from '../../../types/popup';
 export interface PopupProps {
@@ -8,6 +8,12 @@ export interface PopupProps {
     portalId?: string;
     className?: string;
     overlayClassName?: string;
+    /**
+     * Inline styles applied to the overlay. Floating UI sets `position`, `inset`
+     * and `overflow: auto` inline, which no class can override; keys passed here
+     * are merged after them and win.
+     */
+    overlayStyle?: CSSProperties;
     titleClassName?: string;
     headerClassName?: string;
     /** Additional CSS classes applied to the scrollable body wrapper around `children`. */
@@ -87,6 +93,7 @@ export interface PopupProps {
  * @param [portalId] - Optional portal container id
  * @param [className] - Additional CSS classes applied to the popup container
  * @param [overlayClassName] - Additional CSS classes applied to the overlay
+ * @param [overlayStyle] - Inline styles merged over Floating UI's own overlay styles (`position`, `inset`, `overflow: auto`)
  * @param [titleClassName] - Additional CSS classes applied to the title element
  * @param [headerClassName] - Additional CSS classes applied to the popup header container
  * @param [bodyClassName] - Additional CSS classes applied to the scrollable body wrapper around `children`

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

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../../types/popup';
-export declare const popupOverlayBaseClassName = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
+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";

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

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { SchemaRendererProps } from './types';
+/**
+ * Renders a JSON Schema as a form, with collapsible sections, required-field
+ * validation and default values.
+ * aliases: SchemaRenderer|JsonSchemaForm|SchemaForm
+ * Design system 2.0
+ *
+ * Built only from 2.0 controls: `Input`, `NumberInput`, `PasswordInput`,
+ * `Select`, `Switch` and `RadioGroup`. A value the schema does not describe —
+ * a key absent from `properties`, or an object with no fixed properties — is
+ * edited as raw JSON in a monospace `Textarea`.
+ *
+ * @example
+ * ```tsx
+ * <SchemaRenderer
+ *   schema={mySchema}
+ *   onChange={(v) => console.log(v)}
+ *   onDefaultValues={(defaults) => console.log(defaults)}
+ * />
+ * ```
+ *
+ * @param schema - The root JSON Schema to render
+ * @param [defaultValue] - Initial form value; if omitted, defaults are extracted from schema
+ * @param [texts] - Override any user-visible strings rendered by the component
+ * @param [className] - Additional CSS classes for the root container
+ * @param [readonly=false] - When true all inputs are disabled; sections remain collapsible
+ * @param [defaultExpanded=true] - Initial expanded state for all collapsible sections
+ * @param [inputClassName] - Additional classes for the container of every text, number and select field
+ * @param [variant=SchemaRendererVariant.Sections] - `Sections` wraps every top-level property in a collapsible card; `Flat` renders primitives as labelled fields; `FlatSections` puts every property under a plain heading
+ * @param [skipUntouched=false] - When true, required-field errors appear only after the user has interacted with a field
+ * @param [acceptableResourceTypes] - Live options for properties flagged with `dial:resource: true`, keyed by resource type
+ * @param [renderField] - Override the rendered control for any field by path; return `defaultElement` to fall back to built-in rendering
+ * @param [onChange] - Called with the full form value on every change
+ * @param [onPropertyChange] - Called with `(path, value)` for each individual top-level property change
+ * @param [onDefaultValues] - Called once on mount with the resolved default values
+ */
+export declare const SchemaRenderer: FC<SchemaRendererProps>;