@epam/ai-dial-ui-kit 0.16.0-dev.6 → 0.16.0-dev.61

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")>;
+export declare const LazyMarkdownEditor: () => Promise<typeof import('./MarkdownEditor')>;

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

@@ -2,4 +2,4 @@
  * Marks the chosen row in a `MenuItemMark.Check` list. Decorative: the row's
  * `aria-checked`/`aria-selected` already carries the state.
  */
-export declare const menuItemCheckIcon: import("react/jsx-runtime").JSX.Element;
+export declare const menuItemCheckIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/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,29 @@ 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.
  *
  * @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";

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

@@ -0,0 +1,68 @@
+import { FC, ReactNode } from 'react';
+/** Props for `ResizeHandle`. */
+export interface ResizeHandleProps {
+    /** Current width of the panel the handle resizes, in px. */
+    width: number;
+    /** Smallest width the handle can set, in px. */
+    minWidth: number;
+    /** Largest width the handle can set, in px. */
+    maxWidth: number;
+    /** Width a double click resets the panel to, in px. Without it a double click does nothing. */
+    defaultWidth?: number;
+    /** Called with the next width, already limited to `minWidth`–`maxWidth`. */
+    onWidthChange: (width: number) => void;
+    /** Accessible name of the separator. */
+    label: string;
+    /** Hint shown beside the pointer once it rests on the handle. */
+    tooltip?: ReactNode;
+    /** Width change of one arrow key press, in px. Defaults to `16`. */
+    keyboardStep?: number;
+    /** Additional CSS classes for the handle, e.g. to change its position. */
+    className?: string;
+}
+/**
+ * A vertical separator on the inline-end edge of a panel that resizes the panel
+ * by pointer or keyboard.
+ * aliases: Splitter|ColumnResizer|DragHandle|Divider
+ * Design system 2.0
+ *
+ * The component is controlled: it reports every width through `onWidthChange`
+ * and the host applies it to the panel. It is a focusable `separator` — the
+ * window-splitter pattern — so the arrow keys move it by `keyboardStep`, `Home`
+ * and `End` jump to the bounds, and a double click resets it to `defaultWidth`.
+ * Drag and keys follow the writing direction, so a panel at the inline start
+ * grows as the pointer moves towards the inline end, in RTL as well.
+ *
+ * It is positioned absolutely against its nearest positioned ancestor, over the
+ * panel's inline-end edge, and draws a thin line. The accent line and the hint
+ * appear once the pointer has rested on the handle, and a themed arrow follows
+ * the pointer instead of the native cursor. Hide it on screens too narrow to
+ * drag on by wrapping it, e.g. in `hidden desktop:block`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative" style={{ width }}>
+ *   <Sidebar />
+ *   <ResizeHandle
+ *     width={width}
+ *     minWidth={280}
+ *     maxWidth={640}
+ *     defaultWidth={400}
+ *     onWidthChange={setWidth}
+ *     label="Resize sidebar"
+ *     tooltip="Drag to resize"
+ *   />
+ * </div>
+ * ```
+ *
+ * @param width - Current width of the panel in px.
+ * @param minWidth - Smallest width in px.
+ * @param maxWidth - Largest width in px.
+ * @param [defaultWidth] - Width a double click resets to.
+ * @param onWidthChange - Called with the next, limited width.
+ * @param label - Accessible name of the separator.
+ * @param [tooltip] - Hint shown beside the pointer once it rests on the handle.
+ * @param [keyboardStep=16] - Width change of one arrow key press in px.
+ * @param [className] - Additional CSS classes for the handle.
+ */
+export declare const ResizeHandle: FC<ResizeHandleProps>;

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

@@ -26,5 +26,6 @@ import { SchemaFieldContentProps } from '../types';
  * @param [suppressInlineError=false] - Leaves the required error to the caller, which renders it under its own label
  * @param [fieldId] - Id given to a primitive control, for a visible label to point at
  * @param [ariaLabel] - Accessible name of the control
+ * @param [ariaDescribedBy] - Id of an error the caller renders outside the control, linked to a primitive control
  */
 export declare const SchemaFieldContent: FC<SchemaFieldContentProps>;

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

@@ -7,6 +7,7 @@ export interface SchemaPrimitiveFieldProps {
     invalid?: boolean;
     id?: string;
     ariaLabel?: string;
+    ariaDescribedBy?: string;
 }
 /**
  * Renders a single primitive schema field: string, integer, number, boolean, enum, or const.
@@ -34,5 +35,6 @@ export interface SchemaPrimitiveFieldProps {
  * @param [invalid] - Whether the field has a validation error (applies error styling)
  * @param [id] - Id of the control, for a visible label to point at
  * @param [ariaLabel] - Accessible name of the control
+ * @param [ariaDescribedBy] - Id of the field's validation error, linked to text, number and select controls
  */
 export declare const SchemaPrimitiveField: FC<SchemaPrimitiveFieldProps>;

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

@@ -58,8 +58,10 @@ export interface SchemaFieldContentProps {
      * have no visible label next to their control, so this is what names it.
      */
     ariaLabel?: string;
+    /** Id of an error the caller renders outside the control, linked to a primitive control as its description. */
+    ariaDescribedBy?: string;
 }
-export interface SchemaFieldProps extends Omit<SchemaFieldContentProps, 'fieldId' | 'ariaLabel' | 'suppressInlineError'> {
+export interface SchemaFieldProps extends Omit<SchemaFieldContentProps, 'fieldId' | 'ariaLabel' | 'ariaDescribedBy' | 'suppressInlineError'> {
     label?: string;
 }
 export interface SchemaRendererContextValue {

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

@@ -37,8 +37,8 @@ export interface SegmentedControlProps<T extends string> {
  * revealing a panel, so it takes `role="radiogroup"` with `role="radio"`
  * segments. The group is a single tab stop — the selected segment holds it, and
  * the arrow keys, `Home` and `End` move the selection, per the ARIA radio-group
- * pattern. `DialSegmentedControl` (1.0) uses `tablist`/`tab` instead; that is
- * the behaviour this replaces.
+ * pattern. The removed 1.0 `DialSegmentedControl` used `tablist`/`tab`
+ * instead; that is the behaviour this replaced.
  *
  * An icon-only segment still needs a name: give it `aria-label`, since the icon
  * carries no text. A segment with a string `label` is named by it.
@@ -51,4 +51,4 @@ export interface SegmentedControlProps<T extends string> {
  * @param [segmentClassName] - Additional classes for every segment
  * @param [aria-label] - Names the group as a whole
  */
-export declare const SegmentedControl: <T extends string>({ items, value, onChange, disabled, className, segmentClassName: segmentClassNameProp, "aria-label": ariaLabel, }: SegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: <T extends string>({ items, value, onChange, disabled, className, segmentClassName: segmentClassNameProp, "aria-label": ariaLabel, }: SegmentedControlProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -17,6 +17,7 @@ export interface SelectProps {
     error?: string;
     caption?: string;
     ariaLabel?: string;
+    ariaDescribedBy?: string;
     searchable?: boolean;
     searchSize?: ElementSize;
     searchPlaceholder?: string;
@@ -101,6 +102,7 @@ export interface SelectProps {
  * @param [error] - Error message rendered below the field (does not by itself apply error styling, pass `invalid` too).
  * @param [caption] - Helper text rendered below the field when there is no `error`.
  * @param [ariaLabel] - Accessible name for the field; use it when there is no visible label.
+ * @param [ariaDescribedBy] - Ids of extra elements describing the field, e.g. an error rendered outside it; the field's own `error`/`caption` are linked automatically.
  * @param [searchable=false] - Show a search field in the overlay header.
  * @param [searchSize=ElementSize.Standard] - Size of the overlay search input when `searchable` is enabled.
  * @param [searchPlaceholder] - Placeholder for the overlay search input.

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

@@ -27,7 +27,7 @@ export declare const selectOptionsScrollClassName: string;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;
 /** Marks an option that opens a nested list. Matches the dropdown's caret. */
-export declare const selectSubMenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectSubMenuCaretIcon: import('react/jsx-runtime').JSX.Element;
 /** Classes for the chevron rendered as the field's trailing icon. */
 export declare const selectFieldIconClassName = "text-secondary transition-transform";
 /**
@@ -35,6 +35,5 @@ export declare const selectFieldIconClassName = "text-secondary transition-trans
  * short enough to scan at a glance does not need to be filtered.
  */
 export declare const selectSearchThreshold = 8;
-export declare const selectSearchIcon: import("react/jsx-runtime").JSX.Element;
-export declare const selectCloseIcon: import("react/jsx-runtime").JSX.Element;
-export declare const selectEmptyStateIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectSearchIcon: import('react/jsx-runtime').JSX.Element;
+export declare const selectCloseIcon: import('react/jsx-runtime').JSX.Element;

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

@@ -0,0 +1,67 @@
+import { FC, ReactNode } from 'react';
+import { EntityIdentityItem } from '../EntityIdentity/EntityIdentity';
+/** User-visible strings of `SelectedEntityCard`. */
+export interface SelectedEntityCardLabels {
+    /** Type label text, passed to `EntityIdentity`. Defaults to the English name of `item.type`. */
+    type?: string;
+    /** Text shown when nothing is selected. Defaults to `'Not selected'`. */
+    placeholder?: string;
+}
+/** Props for `SelectedEntityCard`. */
+export interface SelectedEntityCardProps {
+    /** Id of the selected entity, `''` when there is none. Shown as-is when `item` is missing. */
+    entityId: string;
+    /** The selected entity as the catalog lists it; missing when the catalog does not. */
+    item?: EntityIdentityItem;
+    /** Whether the catalog is still loading; a skeleton stands in for a selected entity meanwhile. */
+    isLoading?: boolean;
+    /** Dims the card. */
+    isDisabled?: boolean;
+    /** Error text under the card; it also turns the card's border red. */
+    error?: string;
+    /** What rides on the selection (an effort, a context window), as a line under the name. */
+    details?: ReactNode;
+    /** User-visible strings; pass translated ones in a localised app. */
+    labels?: SelectedEntityCardLabels;
+    /** Whether to show the type label above the name — off when a heading next to the card already names it. */
+    showType?: boolean;
+    /** Width and height of the icon in px. */
+    iconSize?: number;
+    /** Heading level of the name, 1–6. */
+    headingLevel?: number;
+    /** Additional CSS classes for the card. */
+    className?: string;
+}
+/**
+ * The card of a form field that holds one selected entity — a model, an agent,
+ * a toolset: its identity, a skeleton while the catalog loads, its raw id when
+ * the catalog does not list it, or a placeholder when nothing is selected.
+ * aliases: SelectedModelCard|ModelCard|EntityCard
+ * Design system 2.0
+ *
+ * The control that changes the selection lives next to the card, not in it:
+ * the card is not interactive.
+ *
+ * @example
+ * ```tsx
+ * <SelectedEntityCard
+ *   entityId="gpt-4o"
+ *   item={{ type: EntityType.Model, name: 'GPT-4o', version: '2024-11-20' }}
+ *   isLoading={isLoading}
+ *   labels={{ type: t('Model'), placeholder: t('Select model') }}
+ * />
+ * ```
+ *
+ * @param entityId - Id of the selected entity, `''` when there is none
+ * @param [item] - The selected entity as the catalog lists it
+ * @param [isLoading=false] - Whether the catalog is still loading
+ * @param [isDisabled=false] - Dims the card
+ * @param [error] - Error text under the card; also turns its border red
+ * @param [details] - A line under the name
+ * @param [labels] - User-visible strings
+ * @param [showType=true] - Whether to show the type label
+ * @param [iconSize=44] - Icon size in px
+ * @param [headingLevel=4] - Heading level of the name
+ * @param [className] - Additional CSS classes for the card
+ */
+export declare const SelectedEntityCard: FC<SelectedEntityCardProps>;

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

@@ -0,0 +1,55 @@
+import { FC, ReactNode } from 'react';
+import { LiveRegionPoliteness } from '../../../types/live-region';
+export interface StateScreenProps {
+    /** Headline of the state, rendered as the page's `h1`. */
+    title: ReactNode;
+    /** Optional line under the title saying what the state means or what to do. */
+    description?: ReactNode;
+    /** Glyph drawn in the round badge above the title. Decorative: hidden from assistive tech. */
+    icon?: ReactNode;
+    /** The way out of the state — typically one button (Log in, Log out, Retry). */
+    action?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+    /**
+     * Wraps the screen in a `LiveRegion` of this politeness, for a state that
+     * replaces content the user was working in (a load error, a crash). Omit it
+     * for a state the user navigated to.
+     */
+    announce?: LiveRegionPoliteness;
+}
+/**
+ * A whole screen given over to one state the app cannot work past: signed out,
+ * access denied, a misconfigured provider.
+ * aliases: AuthScreen|LoginScreen|ForbiddenPage|AccessDenied|ErrorPage|FullPageState
+ * Design system 2.0
+ *
+ * Fills its container and centres a round icon badge, an `h1`, an optional
+ * description and an optional action. The root is a `section` named by its
+ * title, so the state is a landmark of its own. For an empty list or grid
+ * inside a page, use `NoDataContent` instead.
+ *
+ * @example
+ * ```tsx
+ * <StateScreen
+ *   icon={<IconLock size={DIAL_ICON_SIZE.LG} stroke={DIAL_KIT_ICON_STROKE} />}
+ *   title="Log in to configure your QuickApp"
+ *   description="Set up instructions, add-ons and settings."
+ *   action={<NeutralButton label="Log in" onClick={openLogin} />}
+ * />
+ * ```
+ *
+ * @param title - Headline of the state, rendered as the page's `h1`.
+ * @param [description] - Optional line under the title.
+ * @param [icon] - Glyph drawn in the round badge; the badge is omitted without one.
+ * @param [action] - The way out of the state, rendered under the text.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the title.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ * @param [announce] - Wraps the screen in a `LiveRegion` of this politeness, for a state that replaces the user's content.
+ */
+export declare const StateScreen: FC<StateScreenProps>;

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

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import { Step, StepStatus } from '../../../models/step';
+export interface StepsProps {
+    /** Ordered steps to render. */
+    steps: Step[];
+    /** `id` of the active step. */
+    currentStep: string;
+    /** Fired with the `id` of the step the user may move to. */
+    onChangeStep: (step: string) => void;
+    /**
+     * Already-translated text announced for a step's status, appended to the
+     * step's accessible name. Defaults to `'Completed'` / `'Error'`.
+     */
+    statusLabels?: Partial<Record<StepStatus, string>>;
+    /** Accessible name for the list of steps. */
+    ariaLabel?: string;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+/**
+ * A row of numbered steps for a multi-step flow, marking the active one and
+ * flagging completed and failed steps.
+ * aliases: StepWizard|ProgressSteps|Stepper
+ * Design system 2.0
+ *
+ * A step's number turns into a check once it is completed and the user has moved
+ * on, and into an alert icon while a failed step is the active one. A step can
+ * only be entered when every step before it is `StepStatus.VALID`; going back is
+ * always allowed. A step with `disabled` cannot be entered at all.
+ *
+ * The list is an ordered list, the active step carries `aria-current="step"`,
+ * and a completed or failed step announces its status after its name.
+ *
+ * @example
+ * ```tsx
+ * <Steps
+ *   ariaLabel="Create deployment"
+ *   steps={[
+ *     { id: 'general', name: 'General', status: StepStatus.VALID },
+ *     { id: 'limits', name: 'Limits', status: StepStatus.ERROR },
+ *     { id: 'review', name: 'Review' },
+ *   ]}
+ *   currentStep="general"
+ *   onChangeStep={setCurrentStep}
+ * />
+ * ```
+ *
+ * @param steps - Ordered steps to render.
+ * @param currentStep - `id` of the active step.
+ * @param onChangeStep - Fired with the `id` of the step the user may move to.
+ * @param [statusLabels] - Translated status text announced after a step's name.
+ * @param [ariaLabel] - Accessible name for the list of steps.
+ * @param [className] - Additional CSS classes for the root element.
+ */
+export declare const Steps: FC<StepsProps>;

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

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { TabOrientation } from '../../../types/tab';
+import { TabOrientation, TabStatus } from '../../../types/tab';
 /** A single tab entry rendered by {@link Tabs}. */
 export interface TabItem {
     /** Unique identifier used to match against `activeTabId`. */
@@ -12,6 +12,18 @@ export interface TabItem {
     icon?: ReactNode;
     /** Renders the tab greyed out and unselectable, and skips it during keyboard navigation. */
     disabled?: boolean;
+    /**
+     * Flags the tab as holding an error or a warning � typically a form section
+     * that failed validation. Draws a coloured icon after the label and adds the
+     * state to the tab's accessible name. Uses the {@link TabStatus} enum.
+     */
+    status?: TabStatus;
+    /**
+     * Already-translated text announced for `status`, appended to the tab's
+     * accessible name. Defaults to `'Error'` / `'Warning'`; pass it when the
+     * interface is localised.
+     */
+    statusLabel?: string;
 }
 export interface TabsProps {
     /** Ordered list of tabs to render. */
@@ -64,6 +76,10 @@ export interface TabsProps {
  * `ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs
  * label whole pages of a settings surface; the row, when they filter one.
  *
+ * A tab with a `status` (`TabStatus.Error` or `TabStatus.Warning`) draws a
+ * coloured icon after its label, and the status text joins the tab's accessible
+ * name so the state reaches assistive tech as well as sighted users.
+ *
  * `className` lands on whichever element is outermost: the heading wrapper when
  * `sectionLabel` is set, the `role="tablist"` itself when it is not.
  *

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

@@ -16,9 +16,10 @@ export interface TagProps extends NativeTagProps {
  * aliases: Chip|Pill
  * Design system 2.0
  *
- * The tag has one height — the 32px pill of the 2.0 design. There is no `size`
- * prop: a tag sizes itself, and a caller that needs a different height is
- * usually reaching for a button.
+ * The tag is the 32px pill of the 2.0 design; `TagAppearance.Bordered` is the
+ * compact 24px value chip of a form field. There is no `size` prop: a tag sizes
+ * itself, and a caller that needs a different height is usually reaching for a
+ * button.
  *
  * The label truncates rather than wrapping, and carries a native `title` so the
  * full text stays reachable when it does.
@@ -28,7 +29,9 @@ export interface TagProps extends NativeTagProps {
  * the caller: a clickable tag that is also closable gives a screen reader two
  * actions with no way to tell which one it landed on.
  *
- * No tag draws a rim; the two appearances are told apart by their fill.
+ * `outlined` and `selectable` draw no rim and are told apart by their fill;
+ * `bordered` draws one: the outlined `Badge`'s look, for a value the user can
+ * remove, on a surface the rimless fill would vanish on.
  * `TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill
  * at all until it is selected, one hover tint shared by both states, a semibold
  * label once selected, and the state carried on `aria-pressed` rather than by
@@ -55,7 +58,8 @@ export interface TagProps extends NativeTagProps {
  * @param label - Text content displayed inside the tag.
  * @param [icon] - Icon rendered before the label.
  * @param [appearance=TagAppearance.Outlined] - `outlined` is the filled chip on the raised
- * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected.
+ * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected;
+ * `bordered` is the compact rimmed value chip of a form field.
  * @param [selected=false] - Applies the accent-tinted selected styling.
  * @param [disabled=false] - Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put.
  * @param [closable=false] - Renders the remove button. Needs `onRemove` to appear.