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

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

@@ -0,0 +1,63 @@
+import { FC, ReactNode } from 'react';
+import { FormSectionVariant } from '../../../types/form-section';
+export type FormSectionHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface FormSectionProps {
+    /** Heading of the section; also names the `section` landmark. */
+    title: ReactNode;
+    /** Control at the end of the heading row — typically a small "Add" or "Change" button. */
+    action?: ReactNode;
+    /** Optional line under the heading saying what the section holds. */
+    description?: ReactNode;
+    /** Type scale of the heading and description. Defaults to `FormSectionVariant.Row`. */
+    variant?: FormSectionVariant;
+    /** Level of the heading element, to fit the page's outline. Defaults to `3`. */
+    headingLevel?: FormSectionHeadingLevel;
+    /** The section's fields or values. */
+    children?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the heading. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+    /** Additional CSS classes for the content wrapper. */
+    contentClassName?: string;
+}
+/**
+ * A titled section of a form or a builder column: a heading with an optional
+ * action at its end, an optional description and the section's content.
+ * aliases: SectionRow|FieldSection|SettingsSection|FormGroup|SectionHeader
+ * Design system 2.0
+ *
+ * The root is a `section` named by its heading, so each section is a region a
+ * screen reader can jump to. `headingLevel` picks the heading element so the
+ * section fits the outline of the page it is mounted in; the variant only sets
+ * the type scale. The action sits at the inline end of the heading row and
+ * never shrinks; the content is rendered as given, with no field styling of its
+ * own. For a collapsible group, use `Accordion`; for a single labelled control,
+ * the control's own `label`.
+ *
+ * @example
+ * ```tsx
+ * <FormSection
+ *   title="Model"
+ *   variant={FormSectionVariant.Caption}
+ *   action={<GhostButton label="Change" onClick={openPicker} />}
+ *   description="The model that answers in this application."
+ * >
+ *   <SelectedEntityCard entityId={modelId} />
+ * </FormSection>
+ * ```
+ *
+ * @param title - Heading of the section; also names the `section` landmark.
+ * @param [action] - Control at the end of the heading row.
+ * @param [description] - Optional line under the heading.
+ * @param [variant] - Type scale of the heading and description. Defaults to `FormSectionVariant.Row`.
+ * @param [headingLevel] - Level of the heading element. Defaults to `3`.
+ * @param [children] - The section's fields or values.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the heading.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ * @param [contentClassName] - Additional CSS classes for the content wrapper.
+ */
+export declare const FormSection: FC<FormSectionProps>;

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

@@ -2,7 +2,7 @@ import { ColDef, GridApi, GridOptions } from 'ag-grid-community';
 import { ReactNode } from 'react';
 import { DropdownItem } from '../../../models/dropdown';
 import { GridSelectionMode } from '../../../models/selection-mode';
-import { GridColorScheme } from '../../../types/grid';
+import { GridAppearance, GridColorScheme } from '../../../types/grid';
 /** Column id of the selection column this component prepends itself. */
 export declare const GRID_SELECTION_COLUMN_ID = "dial-kit-grid-selection";
 export interface GridProps<T extends object = Record<string, unknown>> {
@@ -34,12 +34,26 @@ export interface GridProps<T extends object = Record<string, unknown>> {
     alternateOddRowColors?: boolean;
     /** Placeholder of the column filter inputs. */
     filterPlaceholder?: string;
-    /** Illustration of the empty state. */
+    /**
+     * Illustration of both empty states. Defaults to the shared placeholder-list
+     * card of `NoDataContent`; leave it unset so every empty list looks the same.
+     */
     emptyStateIcon?: ReactNode;
-    /** Headline of the empty state. */
+    /** Headline when there are no rows, as "No [entities] yet". */
     emptyStateTitle?: string;
-    /** Secondary line of the empty state. */
+    /** Secondary line when there are no rows, as "[Entities] will appear here once [condition]." */
     emptyStateDescription?: string;
+    /** Way forward when there are no rows, such as a create button. */
+    emptyStateAction?: ReactNode;
+    /**
+     * Announces the no-rows message. Turn it on when the host filters `rowData`
+     * itself, so the grid is empty because of a search. Defaults to `false`.
+     */
+    emptyStateLive?: boolean;
+    /** Headline when the column filters leave no rows, as "No [entities] found". */
+    filteredEmptyStateTitle?: string;
+    /** Secondary line when the column filters leave no rows. */
+    filteredEmptyStateDescription?: string;
     /** Shows the loading overlay. Defaults to `false`. */
     loading?: boolean;
     /** Draws a border around the grid. Defaults to `true`. */
@@ -60,6 +74,11 @@ export interface GridProps<T extends object = Record<string, unknown>> {
      * dark. Defaults to `light`, which leaves the current appearance unchanged.
      */
     colorScheme?: GridColorScheme;
+    /**
+     * Visual treatment. `Chat` draws the borderless "Chat table" card and
+     * ignores `wrapperBorder`. Defaults to `GridAppearance.Default`.
+     */
+    appearance?: GridAppearance;
 }
 /**
  * A data grid built on ag-Grid, wired to the 2.0 tokens and controls.
@@ -70,6 +89,13 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * columns sized to the available width, a row context menu, truncation
  * tooltips, and an empty state.
  *
+ * The empty state follows the Patterns 2.0 empty-state behaviour and has two
+ * forms. A grid with no rows says "No [entities] yet" and can offer an action;
+ * a grid whose column filters leave nothing says "No [entities] found" and is
+ * announced, since the user has just changed a filter. A host that filters
+ * `rowData` itself passes the "found" copy as `emptyStateTitle` and sets
+ * `emptyStateLive`.
+ *
  * The selection column renders the 2.0 `Checkbox` and `Radio` instead of
  * ag-Grid's own inputs, so selection looks and behaves like every other control
  * in the kit and the select-all reaches the `mixed` state when the selection is
@@ -102,6 +128,16 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  *   getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}
  * />
  *
+ * // An empty grid with a way forward
+ * <Grid<Product>
+ *   columnDefs={columns}
+ *   rowData={[]}
+ *   emptyStateTitle="No products yet"
+ *   emptyStateDescription="Products will appear here once you add one."
+ *   emptyStateAction={<OutlinedButton label="Add product" onClick={addProduct} />}
+ *   filteredEmptyStateTitle="No products found"
+ * />
+ *
  * // Dark native controls, including the date-filter calendar
  * <Grid<Product> columnDefs={columns} rowData={products} colorScheme={GridColorScheme.Dark} />
  * ```
@@ -120,9 +156,13 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @param [getRowId] - Extracts the unique id of a row. Defaults to its `id` field.
  * @param [alternateOddRowColors=false] - Tints odd rows.
  * @param [filterPlaceholder='Enter value'] - Placeholder of the column filter inputs.
- * @param [emptyStateIcon] - Illustration of the empty state.
- * @param [emptyStateTitle='No results found'] - Headline of the empty state.
- * @param [emptyStateDescription] - Secondary line of the empty state.
+ * @param [emptyStateIcon] - Illustration of both empty states. Defaults to the shared placeholder-list card.
+ * @param [emptyStateTitle='No items yet'] - Headline when there are no rows.
+ * @param [emptyStateDescription='Items will appear here once they are added.'] - Secondary line when there are no rows.
+ * @param [emptyStateAction] - Way forward when there are no rows.
+ * @param [emptyStateLive=false] - Announce the no-rows message; for a host that filters `rowData` itself.
+ * @param [filteredEmptyStateTitle='No items found'] - Headline when the column filters leave no rows.
+ * @param [filteredEmptyStateDescription='Try a different search term or check your filters.'] - Secondary line when the column filters leave no rows.
  * @param [loading=false] - Shows the loading overlay.
  * @param [wrapperBorder=true] - Draws a border around the grid.
  * @param [withoutHeaderBorders=false] - Hides the vertical borders between header cells.
@@ -131,5 +171,6 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @param [selectRowLabel] - Accessible name of a row's selection control.
  * @param [selectAllLabel='Select all rows'] - Accessible name of the select-all control.
  * @param [colorScheme='light'] - AG Grid color scheme. `dark` paints native controls dark.
+ * @param [appearance='default'] - Visual treatment; `chat` draws the borderless "Chat table".
  */
-export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, }: GridProps<T>) => import('react/jsx-runtime').JSX.Element;
+export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, emptyStateAction, emptyStateLive, filteredEmptyStateTitle, filteredEmptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, appearance, }: GridProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -0,0 +1,21 @@
+import { IOverlayParams, OverlaySelectorFunc } from 'ag-grid-community';
+import { NoDataContentProps } from '../../NoDataContent/NoDataContent';
+/** What the grid shows for each of its two empty states. */
+export interface GridEmptyStateParams {
+    /** The grid has no rows at all. */
+    empty: NoDataContentProps;
+    /** The grid has rows, but its column filters leave none of them. */
+    filtered: NoDataContentProps;
+}
+export type GridEmptyStateProps = IOverlayParams & GridEmptyStateParams;
+/**
+ * The grid's no-rows and no-matching-rows overlays, both drawn with
+ * {@link NoDataContent} so an empty grid looks like every other empty list.
+ */
+export declare const GridEmptyState: ({ overlayType, empty, filtered, }: GridEmptyStateProps) => import('react/jsx-runtime').JSX.Element;
+/**
+ * Hands the two empty overlays to {@link GridEmptyState} and leaves the rest —
+ * loading, exporting — to ag-Grid. The selector is read once, so what the
+ * overlay shows travels in `overlayComponentParams`, which ag-Grid refreshes.
+ */
+export declare const selectGridEmptyStateOverlay: OverlaySelectorFunc;

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

@@ -17,5 +17,8 @@ export interface SelectionCellProps<T> {
  * The row node is the source of truth: the control subscribes to its
  * `rowSelected` event, so a selection made anywhere — another cell, the header,
  * or the `selectedRowIds` prop — is reflected here without refreshing the cell.
+ * It also follows the node's `selectable` flag, so a row a consumer's
+ * `rowSelection.isRowSelectable` rejects is drawn disabled rather than as a
+ * live control that ag-Grid silently refuses to select.
  */
-export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import('react/jsx-runtime').JSX.Element;
+export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled: isDisabledRow, }: SelectionCellProps<T>) => import('react/jsx-runtime').JSX.Element;

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

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

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

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

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

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

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

@@ -0,0 +1,63 @@
+import { FC, ReactNode, Ref } from 'react';
+export interface LoginScreenProvider {
+    /** Stable provider id; used as the list key. */
+    id: string;
+    /** Visible label; also the link's accessible name. */
+    label: string;
+    /** Where the provider's sign-in starts — a top-level navigation. */
+    href: string;
+    /** Optional provider logo. Decorative; hidden when it fails to load. */
+    iconSrc?: string;
+}
+export interface LoginScreenProps {
+    /** Headline of the screen, rendered as the page's `h1`. */
+    title: ReactNode;
+    /** Prompt above the provider list, such as "Sign in with:". */
+    description?: ReactNode;
+    /** Product mark above the title. Decorative; hidden when it fails to load. */
+    logoSrc?: string;
+    /** One full-width link-styled button per provider. */
+    providers?: LoginScreenProvider[];
+    /** Accessible name of the provider list. */
+    providersLabel?: string;
+    /** State content above the providers: a spinner, an error with a retry, a notice. */
+    children?: ReactNode;
+    /** Ref to the `h1` (focusable with `tabIndex={-1}`), for moving focus after a retry. */
+    titleRef?: Ref<HTMLHeadingElement>;
+    /** Additional CSS classes for the container. */
+    className?: string;
+}
+/**
+ * The full-page sign-in screen shared by DIAL applications: soft themed
+ * artwork behind a centred card with the product mark, an `h1`, state content
+ * and one button per identity provider.
+ * aliases: SignInPage|LoginPage|AuthPage|ProviderPicker
+ * Design system 2.0
+ *
+ * Fills its container. The root is a `section` named by its title. The
+ * artwork follows the `gradient-1` / `gradient-2` theme tokens. On mobile the
+ * card loses its surface and spans the width. Fetching providers and building
+ * their URLs stay with the application. For a signed-out or access-denied
+ * state inside an app, use `StateScreen`.
+ *
+ * @example
+ * ```tsx
+ * <LoginScreen
+ *   logoSrc="/favicon.svg"
+ *   title="Welcome to DIAL Chat"
+ *   description="Sign in with:"
+ *   providersLabel="Sign-in options"
+ *   providers={[{ id: 'keycloak', label: 'Keycloak', href: '/api/auth/login/keycloak' }]}
+ * />
+ * ```
+ *
+ * @param title - Headline of the screen, rendered as the page's `h1`.
+ * @param [description] - Prompt above the provider list.
+ * @param [logoSrc] - Product mark above the title.
+ * @param [providers] - One link-styled button per provider.
+ * @param [providersLabel] - Accessible name of the provider list.
+ * @param [children] - State content above the providers.
+ * @param [titleRef] - Ref to the focusable `h1`.
+ * @param [className] - Additional CSS classes for the container.
+ */
+export declare const LoginScreen: FC<LoginScreenProps>;

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

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

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

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

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

@@ -4,8 +4,10 @@ export interface NoDataContentProps {
     title: ReactNode;
     /** Optional secondary line under the title. */
     description?: ReactNode;
-    /** Illustration above the title. Defaults to the empty-state document mark. */
+    /** Illustration above the title. Defaults to the placeholder-list card. */
     icon?: ReactNode;
+    /** Optional way forward, such as a button, rendered under the text. */
+    action?: ReactNode;
     /**
      * Announces the empty state to assistive tech as it appears. Turn it on where
      * the content replaces a list the user has just filtered or searched.
@@ -23,23 +25,37 @@ export interface NoDataContentProps {
  * aliases: EmptyState|NoResults|ZeroState
  * Design system 2.0
  *
- * Fills its container and centres an illustration, a headline and an optional
- * secondary line. The icon is decorative, so it is hidden from assistive tech
- * and the text carries the message on its own.
+ * Fills its container and centres an illustration, a headline, an optional
+ * secondary line and an optional action. The icon is decorative, so it is
+ * hidden from assistive tech and the text carries the message on its own.
+ *
+ * Copy follows the Patterns 2.0 empty-state behaviour:
+ * - default: "No [entities] yet" / "[Entities] will appear here once [condition]."
+ * - Shared with me: "No [entities] yet" / "[Entities] other people share with you will show up here."
+ * - after a search or filter: "No [entities] found" / "Try a different search
+ *   term or check your filters." — drop the part the list does not have — with `live`.
+ *
+ * Leave `icon` unset in a list, so every empty list shows the same card.
  *
  * @example
  * ```tsx
  * <NoDataContent
- *   title="No results found"
- *   description="Try a different search term."
+ *   title="No chats found"
+ *   description="Try a different search term or check your filters."
+ *   live
  * />
  *
- * <NoDataContent title="Nothing here yet" icon={<IconInbox size={60} />} live />
+ * <NoDataContent
+ *   title="No chats yet"
+ *   description="Chats will appear here once you start one."
+ *   action={<Button label="New chat" onClick={createChat} />}
+ * />
  * ```
  *
  * @param title - Headline of the empty state.
  * @param [description] - Optional secondary line under the title.
- * @param [icon] - Illustration above the title. Defaults to the empty-state document mark.
+ * @param [icon] - Illustration above the title. Defaults to the placeholder-list card.
+ * @param [action] - Optional way forward, rendered under the text.
  * @param [live=false] - Announce the empty state to assistive tech as it appears.
  * @param [className] - Additional CSS classes for the container.
  * @param [titleClassName] - Additional CSS classes for the title.

package/dist/src/components/New/NoDataContent/NoDataIllustration.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+/**
+ * The empty-state illustration: a card holding three placeholder list rows.
+ * Every colour comes from a layer or stroke token, so it follows the theme
+ * instead of staying a light card on a dark surface.
+ */
+export declare const NoDataIllustration: FC;

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

@@ -1,12 +1,22 @@
 import { FC, HTMLAttributes, MouseEvent, ReactNode } from 'react';
-import { NotificationType, NotificationVariant } from '../../../types/notification';
+import { NotificationSurface, NotificationType, NotificationVariant } from '../../../types/notification';
 export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     variant?: NotificationVariant;
     type?: NotificationType;
+    /**
+     * Surface the notification draws on. `NotificationSurface.Neutral` keeps the
+     * variant's icon, icon colour and live-region role but draws the neutral
+     * sunken layer (`bg-layer-sunken`) with primary text instead of the
+     * variant's coloured surface.
+     * @default NotificationSurface.Variant
+     */
+    surface?: NotificationSurface;
     title?: ReactNode;
     message: ReactNode;
     action?: ReactNode;
     closable?: boolean;
+    /** Accessible name of the close button, for hosts that localise it. */
+    closeAriaLabel?: string;
     iconSize?: number;
     iconStroke?: number;
     textClassName?: string;
@@ -18,7 +28,9 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * Design system 2.0
  *
  * Renders a colored container with an icon, message text, and an optional
- * close button.
+ * close button. `surface={NotificationSurface.Neutral}` swaps the coloured
+ * container for the neutral sunken layer and keeps the variant's icon, icon
+ * colour and role.
  *
  * The container is a live region whose politeness follows the variant: `error`
  * and `warning` use `role="alert"` (assertive, interrupts the screen reader),
@@ -60,6 +72,14 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * />
  *
  * <Notification
+ *   variant={NotificationVariant.Warning}
+ *   type={NotificationType.SectionMessage}
+ *   surface={NotificationSurface.Neutral}
+ *   title="Log in required"
+ *   message="Scheduled tasks run while you are offline."
+ * />
+ *
+ * <Notification
  *   variant={NotificationVariant.Error}
  *   type={NotificationType.SectionMessage}
  *   title="Couldn't finish this response"
@@ -78,12 +98,14 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  *
  * @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 [surface=NotificationSurface.Variant] - `Neutral` draws the neutral sunken surface while keeping the variant's icon, icon colour and role
  * @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
+ * @param [closeAriaLabel='Close notification'] - Accessible name of the close button
  * @param [iconSize=24] - Size of the icon displayed in the alert
  * @param [iconStroke=2] - Stroke width of the icon displayed in the alert
  * @param [onClose] - Callback fired when the close button is clicked

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

@@ -5,6 +5,17 @@ export declare const variantIcons: (props: {
     stroke: number;
 }) => Record<NotificationVariant, ReactNode>;
 export declare const notificationVariantClassNameMap: Record<NotificationVariant, string>;
+/** Surface classes for `NotificationSurface.Neutral`, whatever the variant. */
+export declare const notificationNeutralSurfaceClassName = "bg-layer-sunken text-primary";
+/**
+ * Icon colour per variant on `NotificationSurface.Neutral`.
+ *
+ * On the variant surface the icon inherits the container's text colour. The
+ * neutral surface sets primary text, so the icon names its status colour
+ * itself; `warning` uses the dedicated `text-warning-icon` token, as the design
+ * does for a warning triangle outside a warning surface.
+ */
+export declare const notificationNeutralSurfaceIconClassNameMap: Record<NotificationVariant, string>;
 /**
  * Live-region role per variant.
  *

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

@@ -5,6 +5,8 @@ export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter
     showPasswordLabel?: string;
     /** Accessible name of the reveal toggle while the value is visible. */
     hidePasswordLabel?: string;
+    /** Hides the reveal toggle while the field stays editable, and keeps the value masked. */
+    isToggleHidden?: boolean;
 }
 /**
  * A password field with a reveal toggle, built on {@link Input}.
@@ -18,6 +20,9 @@ export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter
  * A disabled field is masked with no toggle at all, and comes back masked if it
  * is enabled again.
  *
+ * `isToggleHidden` does the same without disabling the field: use it when there
+ * is nothing to reveal, such as a stored secret the server never returns.
+ *
  * @example
  * ```tsx
  * <PasswordInput
@@ -32,5 +37,6 @@ export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter
  * @param [hidePasswordLabel="Hide password"] - Accessible name of the toggle while the value is visible
  * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px
  * @param [disabled=false] - Disables the field, masks it, and hides the reveal toggle
+ * @param [isToggleHidden=false] - Hides the reveal toggle and keeps the value masked, leaving the field editable
  */
 export declare const PasswordInput: FC<PasswordInputProps>;

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

@@ -2,7 +2,7 @@ import { PopupSize } from '../../../types/popup';
 export declare const popupOverlayBaseClassName = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
 export declare const popupBaseClassName = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto";
 export declare const popupHeaderClassName = "flex flex-row items-center justify-between px-6 py-4";
-export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary";
+export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h2-text text-primary";
 /** Rule under the header. Opt-in: by default sections are separated by spacing. */
 export declare const popupHeaderDividerClassName = "border-b border-tertiary";
 export declare const popupFooterClassName = "flex flex-row items-center gap-2 px-6 py-4";