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

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.

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;
@@ -40,6 +41,10 @@ export interface SelectProps {
     emptyStateTitle?: string;
     emptyStateDescription?: string;
     emptyStateIcon?: ReactNode;
+    /** Title when the search leaves no options, as "No [entities] found". Falls back to `emptyStateTitle`. */
+    filteredEmptyStateTitle?: string;
+    /** Description when the search leaves no options. Falls back to `emptyStateDescription`. */
+    filteredEmptyStateDescription?: string;
     disabled?: boolean;
     className?: string;
     fieldClassName?: string;
@@ -101,6 +106,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.
@@ -111,6 +117,8 @@ export interface SelectProps {
  * @param [emptyStateTitle="No options available"] - Title text when there are no options.
  * @param [emptyStateDescription] - Description text when there are no options.
  * @param [emptyStateIcon] - Icon to display when there are no options.
+ * @param [filteredEmptyStateTitle] - Title when the search leaves no options, as "No [entities] found". Falls back to `emptyStateTitle`; the message is announced.
+ * @param [filteredEmptyStateDescription] - Description when the search leaves no options, as "Try a different search term". Falls back to `emptyStateDescription`.
  * @param [invalid] - Whether the select is in an invalid state, affecting styling.
  * @param [disabled=false] - Disable the control.
  * @param [className] - Additional CSS classes for the outer container.

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

@@ -37,4 +37,3 @@ export declare const selectFieldIconClassName = "text-secondary transition-trans
 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;

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.

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

@@ -6,10 +6,18 @@ import { TagAppearance } from '../../../types/tag';
  */
 export declare const tagBaseClassName = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3";
 /**
- * Fill and text colour per appearance and selection. No tag draws a rim: the
- * two appearances are told apart by their fill — `outlined` sits on the raised
- * layer, `selectable` on nothing until it is selected, where it also steps its
- * label up from secondary to primary.
+ * Shape and type scale per appearance, over `tagBaseClassName`. The bordered
+ * chip is the compact value chip of a form field — the removable twin of
+ * `Badge`'s outlined label: its 24px, 6px corner and rim on the sunken layer,
+ * with the value in primary text on the small type scale.
+ */
+export declare const tagShapeClassNames: Record<TagAppearance, string>;
+/**
+ * Fill and text colour per appearance and selection. `outlined` and
+ * `selectable` draw no rim and are told apart by their fill — `outlined` sits
+ * on the raised layer, `selectable` on nothing until it is selected, where it
+ * also steps its label up from secondary to primary. `bordered` is the one with
+ * a rim, on the sunken layer.
  */
 export declare const tagStateClassNames: Record<TagAppearance, Record<'default' | 'selected', string>>;
 /** Cursor and focus ring of a tag that can be activated. */

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

@@ -0,0 +1,70 @@
+import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+type NativeToggleChipProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type' | 'onToggle' | 'aria-pressed'>;
+export interface ToggleChipProps extends NativeToggleChipProps {
+    label: ReactNode;
+    icon?: ReactNode;
+    isSelected?: boolean;
+    onToggle?: (isSelected: boolean) => void;
+}
+/**
+ * A chip that switches one option on and off on its own, for a row of
+ * independent toggles — tools a model may call, filters that combine.
+ * aliases: ChipToggle|ToggleTag|PressableChip|SelectableChip|MultiSelectChip
+ * Design system 2.0
+ *
+ * Draws the `TagAppearance.Selectable` filter chip of the 2.0 design — no fill
+ * until it is on, one accent hover tint shared by both states, an accent-alpha
+ * fill and a semibold label once on — so a row of these sits beside a
+ * `FilterChips` row without a seam. Turning it on therefore widens it by the
+ * difference between the regular and semibold label; give it a width if that
+ * shift matters.
+ *
+ * Reach for it when each chip is its own yes/no. `FilterChips` picks one value
+ * out of several and `Tag` is a label that may be clicked or removed; neither
+ * keeps several independent states, and `Tag` renders a `<span>` with a string
+ * label. This is a native `<button aria-pressed>`: Enter and Space work, the
+ * state is announced as "pressed", and `disabled` takes it out of the tab order
+ * and greys it out.
+ *
+ * Keep one accessible name across both states — the state rides on
+ * `aria-pressed`, and a control that renames itself on click reads as a
+ * different control. Visible state text such as "ON" / "OFF" belongs inside
+ * `label`, wrapped in `aria-hidden` so it is not read on top of the pressed
+ * state. There is no remove control: a chip that toggles and also closes gives
+ * a screen reader two actions with no way to tell which one it landed on, so a
+ * removable value is a closable `Tag` instead.
+ *
+ * Group a row of these in a named `role="group"` so they are announced
+ * together. Labels are the caller's to translate — the component ships no
+ * English defaults.
+ *
+ * @example
+ * ```tsx
+ * <div role="group" aria-label={t('Tools')} className="flex flex-wrap gap-1">
+ *   {tools.map((tool) => (
+ *     <ToggleChip
+ *       key={tool.id}
+ *       icon={tool.icon}
+ *       label={
+ *         <>
+ *           {tool.label}
+ *           <span aria-hidden="true">: {tool.isOn ? t('ON') : t('OFF')}</span>
+ *         </>
+ *       }
+ *       isSelected={tool.isOn}
+ *       onToggle={(isOn) => setTool(tool.id, isOn)}
+ *     />
+ *   ))}
+ * </div>
+ * ```
+ *
+ * @param label - Content of the chip after the icon. Any node, so trailing state text can follow the name; it truncates on one line
+ * @param [icon] - Icon rendered before the label; hidden from assistive tech
+ * @param [isSelected=false] - Whether the chip is on; rendered as `aria-pressed`
+ * @param [onToggle] - Called with the next value when the chip is activated by click, Enter or Space
+ * @param [disabled=false] - Greys the chip out and stops it responding; it keeps showing its on/off state
+ * @param [onClick] - Native click handler, called before `onToggle`
+ * @param [className] - Additional classes on the button
+ */
+export declare const ToggleChip: FC<ToggleChipProps>;
+export {};

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

@@ -0,0 +1,12 @@
+/**
+ * Type scale per state, as the selectable `Tag` draws it: the regular label
+ * steps up to semibold once the chip is on.
+ */
+export declare const toggleChipLabelClassNames: Record<'default' | 'selected', string>;
+/**
+ * Colours of a disabled chip. The `Tag` design defines no disabled state, so
+ * these follow the kit's other 2.0 controls — the disabled text colour, and on
+ * a chip that is on, the disabled fill `SegmentedControl` gives its selected
+ * segment — keeping the on/off state visible while the chip cannot respond.
+ */
+export declare const toggleChipDisabledClassNames: Record<'default' | 'selected', string>;

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

@@ -52,7 +52,11 @@ export interface TransferQueueLabels {
     closeConfirmHeader: string;
     /** Confirmation description when an item is in progress and none failed. */
     closeConfirmDescriptionInProgress: string;
-    /** Confirmation description when an item failed and none is in progress. */
+    /**
+     * Confirmation description when an item failed and none is in progress.
+     * @deprecated Never shown: closing asks for confirmation only while an item
+     * is in progress, since a failed one has nothing left to lose.
+     */
     closeConfirmDescriptionFailed: string;
     /** Confirmation description when items are both in progress and failed. */
     closeConfirmDescriptionMixed: string;
@@ -103,12 +107,12 @@ export interface TransferQueueProps {
  * Each row shows the file's `FileIcon` and name, and a trailing status: a
  * spinner (with a cancel control on hover or focus) while in progress, a check
  * on success, a warning or error icon whose reason is both its tooltip and its
- * accessible name, or "Canceled". The header carries the host's title, a count
- * of failed items, and collapse and close controls. Collapsed while work runs,
+ * accessible name, or "Canceled". The header carries the host's title and the
+ * collapse and close controls. Collapsed while work runs,
  * the rows are replaced by one aggregate `ProgressBar`.
  *
- * Closing while an item is in progress or has failed asks for confirmation
- * first. Once every item has succeeded the queue closes itself after
+ * Closing while an item is in progress asks for confirmation first; a queue
+ * whose items have all settled, failed ones included, closes straight away. Once every item has succeeded the queue closes itself after
  * `autoCloseDelay`; a warned or canceled row keeps it open so it can be read.
  *
  * The root is a polite `role="status"` live region. Positioning is left to

package/dist/src/components/New/TransferQueue/TransferQueueHeader.d.ts

@@ -2,8 +2,6 @@ import { FC } from 'react';
 import { TransferQueueLabels } from './TransferQueue';
 interface TransferQueueHeaderProps {
     title: string;
-    /** The badge renders only when this is positive. */
-    failedCount: number;
     isCollapsed: boolean;
     /** Id of the rows container the collapse toggle controls. */
     itemsId: string;
@@ -11,6 +9,6 @@ interface TransferQueueHeaderProps {
     onToggleCollapse: () => void;
     onClose: () => void;
 }
-/** Queue heading with its failed-item badge and the collapse and close controls. */
+/** Queue heading with the collapse and close controls. */
 export declare const TransferQueueHeader: FC<TransferQueueHeaderProps>;
 export {};

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

@@ -13,8 +13,8 @@
  * icon, a menu item, a segmented-control segment — can match the ones the
  * components draw themselves.
  *
- * Two deliberate departures inside the library: the empty-state illustrations
- * (`NoDataContent`, the grid's no-rows overlay) use a much lighter stroke,
+ * Two deliberate departures inside the library: an icon passed as an
+ * empty-state illustration (`NoDataContent`'s `icon`) uses a much lighter stroke,
  * since a 1.5px line reads as a drawing at 16px and as a fence at 100px; and
  * the checkbox glyph uses a heavier one, because it is a control mark sized to
  * a 14px box rather than an icon from the set.

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

@@ -1,19 +1,31 @@
 import { FC, HTMLAttributes, ReactNode } from 'react';
 import { LabelProps } from '../New/Label/Label';
+import { ProgressBarRole } from '../../types/progress-bar';
 import { ElementSize } from '../../types/size';
-type NativeProgressBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+type NativeProgressBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
 export interface ProgressBarProps extends NativeProgressBarProps {
     value: number;
     max?: number;
     size?: ElementSize;
     labelProps?: LabelProps;
     valueLabel?: ReactNode;
+    role?: ProgressBarRole;
 }
 /**
- * A horizontal bar indicating progress toward a goal.
- * aliases: Progress|LoadingBar|Meter
+ * A horizontal bar indicating progress toward a goal, or a level within a range.
+ * aliases: Progress|LoadingBar|Meter|Gauge|CapacityMeter|UsageBar
  * Design system 2.0
  *
+ * `role` picks what the bar means. The default, `ProgressBarRole.Progressbar`,
+ * is a task on its way to done — an upload, an import. `ProgressBarRole.Meter`
+ * renders `role="meter"`: a level inside a known range that never completes —
+ * capacity used, a quota, a budget. Both carry `aria-valuemin`,
+ * `aria-valuemax`, `aria-valuenow` and, when given, `aria-valuetext`, and draw
+ * the same track and accent fill; the role changes only what a screen reader
+ * announces. The bar has no low / optimum / high colouring, so a meter that
+ * must change colour near its limit is restyled by the caller through
+ * `className`.
+ *
  * Names itself from `labelProps.label` through `aria-labelledby`; without one it
  * falls back to `aria-label`, and finally to `Progress` so the bar is never
  * anonymous. Prefer a real label — several bars all announcing "Progress" tell a
@@ -33,6 +45,13 @@ export interface ProgressBarProps extends NativeProgressBarProps {
  * <ProgressBar value={40} labelProps={{ label: 'Uploading' }} />
  * <ProgressBar value={3} max={10} aria-valuetext="3 of 10 files" />
  * <ProgressBar value={80} size={ElementSize.Small} />
+ * <ProgressBar
+ *   role={ProgressBarRole.Meter}
+ *   value={usedBytes}
+ *   max={maxBytes}
+ *   aria-label="Project capacity"
+ *   aria-valuetext="42% used"
+ * />
  *
  * <ProgressBar
  *   value={3.313182}
@@ -48,6 +67,7 @@ export interface ProgressBarProps extends NativeProgressBarProps {
  * @param [size=ElementSize.Standard] - Bar height: standard is 8px, small is 4px.
  * @param [labelProps] - Props of the {@link Label} rendered above the bar, which also names it.
  * @param [valueLabel] - Readout rendered at the end of the label row.
+ * @param [role=ProgressBarRole.Progressbar] - ARIA role of the bar: `progressbar` for a task's progress, `meter` for a level within a range. Without a label the bar is named `Progress` or `Meter` respectively.
  * @param [className] - Additional classes on the track element.
  */
 export declare const ProgressBar: FC<ProgressBarProps>;