@epam/ai-dial-ui-kit 0.14.0-dev.5 → 0.14.0-dev.51

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

@@ -0,0 +1,74 @@
+import { FC, ReactNode } from 'react';
+import { TooltipPlacement } from '../../../types/tooltip';
+export interface InteractiveTooltipProps {
+    /**
+     * The panel's content. Left fully open-ended — unlike a plain tooltip's
+     * text, this can be any markup, including its own buttons and links.
+     */
+    content: ReactNode;
+    /** Side of the trigger the panel is placed on. */
+    placement?: TooltipPlacement;
+    /** The element the panel is anchored to and opened from. */
+    children: ReactNode;
+    /** Render `children` as the trigger instead of wrapping it in a `<span>`. */
+    asChild?: boolean;
+    /** Suppress the panel while keeping the trigger rendered. */
+    hideTooltip?: boolean;
+    /** Whether the panel starts open (uncontrolled only). */
+    initialOpen?: boolean;
+    /** Controlled open state; disables the hover and focus triggers. */
+    open?: boolean;
+    /** Callback fired when the open state should change. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes for the trigger element. */
+    triggerClassName?: string;
+    /** Additional CSS classes for the panel. */
+    contentClassName?: string;
+}
+/**
+ * A hover panel that, unlike {@link Tooltip}, can hold its own interactive
+ * content.
+ * aliases: HoverCard|InfoPopover
+ * Design system 2.0
+ *
+ * Opens next to the trigger on hover or focus, the way a tooltip does, but
+ * stays open while the pointer moves into the panel so its content — links,
+ * buttons, anything — can be hovered and clicked. It carries no `role`, since
+ * ARIA's `tooltip` role forbids focusable content and this is meant to hold
+ * some; a panel with meaningfully interactive content should still be
+ * reachable without a mouse (Tab from the trigger reaches it), but a purely
+ * decorative one is fine to leave out of the tab order entirely.
+ *
+ * Renders nothing on a mobile screen, where there is no hover to reveal it —
+ * so, as with {@link Tooltip}, a control must never depend on this panel alone
+ * to be understood or operated.
+ *
+ * @example
+ * ```tsx
+ * <InteractiveTooltip
+ *   placement={TooltipPlacement.Right}
+ *   content={
+ *     <>
+ *       <p>Lets the model write and execute Python in an isolated sandbox.</p>
+ *       <Button variant={ButtonVariant.Primary} appearance={ButtonAppearance.Link}>
+ *         View details
+ *       </Button>
+ *     </>
+ *   }
+ * >
+ *   <MenuItem label="code-interpreter" />
+ * </InteractiveTooltip>
+ * ```
+ *
+ * @param content - The panel's content
+ * @param children - The element that triggers the panel
+ * @param [asChild=false] - Use the child as the trigger instead of wrapping it in a `<span>`
+ * @param [hideTooltip=false] - Suppress the panel while keeping the trigger rendered
+ * @param [triggerClassName] - Additional CSS classes for the trigger element
+ * @param [contentClassName] - Additional CSS classes for the panel
+ * @param [placement=TooltipPlacement.Right] - Side of the trigger the panel is placed on
+ * @param [initialOpen=false] - Whether the panel starts open (uncontrolled only)
+ * @param [open] - Controlled open state; disables the hover and focus triggers
+ * @param [onOpenChange] - Callback fired when the open state should change
+ */
+export declare const InteractiveTooltip: FC<InteractiveTooltipProps>;

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

@@ -0,0 +1,26 @@
+/**
+ * Interactive tooltip layout and styling constants.
+ * Design system 2.0
+ */
+/** Space left between the panel and the trigger, in px. */
+export declare const INTERACTIVE_TOOLTIP_GAP = 8;
+/**
+ * Delay before an on-hover interactive tooltip opens, in ms. Long enough that
+ * a pointer crossing the trigger on its way somewhere else does not flash it.
+ */
+export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
+/**
+ * The panel sits above the surface it is anchored to — a dropdown or select
+ * overlay, both `z-[53]` — since it can be opened from a row inside one of
+ * them.
+ *
+ * By style this is a neutral floating panel rather than the coloured
+ * `Notification` banner: it shares the raised-card shape a dropdown or the
+ * calendar use (`shadow-md`, `rounded-xl`), on the base `bg-layer-0` surface
+ * rather than their raised one — the panel is opened over content, not
+ * stacked inside another panel. `contentClassName` can still replace it with
+ * any other background: `twMerge` resolves the conflicting `bg-*` utility.
+ * Padding and width are the panel's own, sized for a block of copy and
+ * controls rather than a menu row.
+ */
+export declare const interactiveTooltipClassName = "z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";

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

@@ -10,6 +10,10 @@ export interface MarkdownEditorProps {
     placeholder?: string;
     /** Initial edit/live/preview mode; the toolbar lets the user switch it afterwards. */
     defaultPreview?: PreviewType;
+    /** `id` of the underlying textarea, so a visible `<label htmlFor>` can name it. */
+    id?: string;
+    /** Accessible name for the underlying textarea. Use it only where no visible label exists to pair with `id`. */
+    ariaLabel?: string;
 }
 /**
  * The 2.0 Markdown editor: a formatting toolbar (bold/italic/strikethrough,
@@ -29,5 +33,7 @@ export interface MarkdownEditorProps {
  * @param [className] - Additional CSS classes for the container
  * @param [placeholder] - Placeholder text shown when the editor is empty
  * @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
  */
 export declare const MarkdownEditor: FC<MarkdownEditorProps>;

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

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

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

@@ -0,0 +1,68 @@
+import { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { MenuItemMark } from '../../../types/menu-item';
+export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Ref to the row button — a submenu trigger anchors its panel to it. */
+    ref?: Ref<HTMLButtonElement>;
+    /** The row's text. */
+    label?: ReactNode;
+    /** Icon rendered before the label. */
+    icon?: ReactNode;
+    /** Secondary text rendered after the label, at the row's trailing edge. */
+    description?: ReactNode;
+    /** How a chosen row is marked. */
+    mark?: MenuItemMark;
+    /** Whether this row is the chosen one; drives whatever `mark` selects. */
+    selected?: boolean;
+    /** Paints the row in the error colour — a destructive action. */
+    danger?: boolean;
+    /** Node pinned to the row's trailing edge, e.g. a submenu caret. */
+    trailing?: ReactNode;
+    /**
+     * A control of its own at the trailing edge — a favourite toggle, a delete
+     * button. It is rendered as a **sibling** of the row, not inside it: a
+     * button nested in a button is invalid, and it would swallow the row's
+     * click and land inside its accessible name.
+     */
+    rightControl?: ReactNode;
+    /** Truncates the label with a tooltip that only appears once it is clipped. */
+    ellipsisLabel?: boolean;
+    /** Additional classes for the label element. */
+    labelClassName?: string;
+    /** Replaces the icon + label content while keeping the row and `trailing`. */
+    children?: ReactNode;
+}
+/**
+ * One row of a floating overlay — a dropdown menu item or a select option.
+ * Design system 2.0
+ *
+ * Owns the Menu-item states the design defines, so the dropdown and the select
+ * cannot drift apart: rest, hover, focus and disable, plus the three ways a
+ * chosen row is marked (`MenuItemMark`). The row itself is the control — the
+ * checkbox box and the check icon are decorative, since the state already rides
+ * on the `aria-checked`/`aria-selected` the caller sets alongside `role`.
+ *
+ * @example
+ * ```tsx
+ * <MenuItem role="menuitem" label="Rename" icon={<IconPencil />} />
+ *
+ * // Single choice, marked with a trailing check
+ * <MenuItem role="option" aria-selected label="English" mark={MenuItemMark.Check} selected />
+ *
+ * // Current item of a navigation menu
+ * <MenuItem role="menuitem" aria-current label="Settings" mark={MenuItemMark.Highlight} selected />
+ * ```
+ *
+ * @param [label] - The row's text
+ * @param [icon] - Icon rendered before the label
+ * @param [description] - Secondary text at the row's trailing edge
+ * @param [mark=MenuItemMark.None] - How a chosen row is marked
+ * @param [selected=false] - Whether this row is the chosen one
+ * @param [danger=false] - Paints the row in the error colour
+ * @param [trailing] - Node pinned to the trailing edge, e.g. a submenu caret
+ * @param [rightControl] - A control of its own at the trailing edge, rendered beside the row
+ * @param [ellipsisLabel=false] - Truncate the label with a tooltip once clipped
+ * @param [labelClassName] - Additional classes for the label element
+ * @param [children] - Replaces the icon + label content
+ * @param [className] - Additional classes for the row
+ */
+export declare const MenuItem: FC<MenuItemProps>;

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

@@ -0,0 +1,5 @@
+/**
+ * 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;

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

@@ -0,0 +1,48 @@
+import { FC, ReactNode } from 'react';
+export interface NoDataContentProps {
+    /** Headline of the empty state. */
+    title: ReactNode;
+    /** Optional secondary line under the title. */
+    description?: ReactNode;
+    /** Illustration above the title. Defaults to the empty-state document mark. */
+    icon?: 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.
+     */
+    live?: boolean;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+}
+/**
+ * Message shown in place of a list, table or grid that has nothing to show.
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <NoDataContent
+ *   title="No results found"
+ *   description="Try a different search term."
+ * />
+ *
+ * <NoDataContent title="Nothing here yet" icon={<IconInbox size={60} />} live />
+ * ```
+ *
+ * @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 [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.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ */
+export declare const NoDataContent: FC<NoDataContentProps>;

package/dist/src/components/New/ResizableContainer/ConditionalResizableContainer.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { ResizableContainerProps } from './ResizableContainer';
+export interface ConditionalResizableContainerProps extends ResizableContainerProps {
+    /** Whether resizing is enabled. Defaults to `true`. */
+    enabled?: boolean;
+}
+/**
+ * Renders its children inside a {@link ResizableContainer} only while `enabled`.
+ * aliases: OptionalResize|ConditionalPanel
+ * Design system 2.0
+ *
+ * When `enabled` is false the children are rendered on their own, with no
+ * wrapper element and no resize behaviour — useful for a panel that is only
+ * resizable while it is expanded. Every other prop is passed straight through;
+ * see {@link ResizableContainer} for controlled and uncontrolled sizing, sides
+ * and callbacks.
+ *
+ * @example
+ * ```tsx
+ * <ConditionalResizableContainer
+ *   enabled={isExpanded}
+ *   minWidth={180}
+ *   maxWidth={520}
+ *   defaultWidth={260}
+ * >
+ *   <Sidebar />
+ * </ConditionalResizableContainer>
+ * ```
+ *
+ * @param [enabled=true] - Whether resizing is enabled.
+ * @param children - Content to render inside the container.
+ * @see ResizableContainer
+ */
+export declare const ConditionalResizableContainer: FC<ConditionalResizableContainerProps>;

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

@@ -0,0 +1,77 @@
+import { FC, ReactNode } from 'react';
+import { ResizableContainerSide } from '../../../types/resizable-container';
+export interface ResizableContainerProps {
+    /** Content placed inside the container. */
+    children: ReactNode;
+    /** Minimum allowed width in px. */
+    minWidth: number;
+    /** Maximum allowed width in px. */
+    maxWidth: number;
+    /** Controlled width in px. When provided, the component becomes controlled. */
+    width?: number;
+    /** Initial width when uncontrolled. Defaults to `minWidth`. */
+    defaultWidth?: number;
+    /** Fired when a resize ends, and once per arrow key press. */
+    onResizeStop?: (width: number) => void;
+    /** Fired continuously while dragging, with the current width. */
+    onResize?: (width: number) => void;
+    /** Edge carrying the resize handle. Defaults to `ResizableContainerSide.Right`. */
+    side?: ResizableContainerSide;
+    /** Width change per arrow key press. Defaults to `16`. */
+    keyboardStep?: number;
+    /** Accessible name of the handle. Defaults to `'Resize panel'`. */
+    ariaLabel?: string;
+    /** Additional CSS classes for the inner content wrapper. */
+    className?: string;
+    /** Additional CSS classes for the resize handle. */
+    resizeHandlerClassName?: string;
+    /** Custom node rendered inside the handle, in place of the default chevron. */
+    resizeHandler?: ReactNode;
+}
+/**
+ * A panel the user can widen or narrow by dragging its edge.
+ * aliases: ResizePanel|SizableContainer|Splitter
+ * Design system 2.0
+ *
+ * Works as a controlled component when `width` is provided, otherwise it keeps
+ * its own width from `defaultWidth`. The handle — an accent line with a chevron
+ * pointing away from the panel — appears on hover and while dragging, and stays
+ * within `minWidth`–`maxWidth` in both modes.
+ *
+ * The handle is a focusable `separator`, so the panel resizes with the arrow
+ * keys — `Home` and `End` jump to the bounds — and each press reports through
+ * `onResize` and `onResizeStop`. Unlike the 1.0 container this one draws no
+ * dividers between its children; pass `divide-y divide-tertiary` through
+ * `className` if you want them.
+ *
+ * @example
+ * ```tsx
+ * <ResizableContainer minWidth={180} maxWidth={520} defaultWidth={260}>
+ *   <Sidebar />
+ * </ResizableContainer>
+ *
+ * <ResizableContainer
+ *   minWidth={180}
+ *   maxWidth={520}
+ *   width={sidebarWidth}
+ *   onResizeStop={setSidebarWidth}
+ * >
+ *   <Sidebar />
+ * </ResizableContainer>
+ * ```
+ *
+ * @param children - Content placed inside the container.
+ * @param minWidth - Minimum allowed width in px.
+ * @param maxWidth - Maximum allowed width in px.
+ * @param [width] - Controlled width. If omitted the container is uncontrolled.
+ * @param [defaultWidth] - Initial width when uncontrolled. Defaults to `minWidth`.
+ * @param [onResizeStop] - Fired when a resize ends, and once per arrow key press.
+ * @param [onResize] - Fired continuously while dragging.
+ * @param [side=ResizableContainerSide.Right] - Edge carrying the resize handle.
+ * @param [keyboardStep=16] - Width change per arrow key press.
+ * @param [ariaLabel='Resize panel'] - Accessible name of the handle.
+ * @param [className] - Additional CSS classes for the inner content wrapper.
+ * @param [resizeHandlerClassName] - Additional CSS classes for the resize handle.
+ * @param [resizeHandler] - Custom node rendered inside the handle, replacing the default chevron.
+ */
+export declare const ResizableContainer: FC<ResizableContainerProps>;

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

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+import { ResizableContainerSide } from '../../../../types/resizable-container';
+interface ResizeHandleProps {
+    side: ResizableContainerSide;
+    isResizing: boolean;
+    width: number;
+    minWidth: number;
+    maxWidth: number;
+    step: number;
+    ariaLabel: string;
+    onWidthChange: (nextWidth: number) => void;
+    customHandler?: ReactNode;
+    handlerClassName?: string;
+}
+/**
+ * The draggable edge of {@link ResizableContainer}. It is a focusable
+ * `separator` — the window-splitter pattern — so the panel can be resized with
+ * the arrow keys as well as the pointer.
+ */
+export declare const ResizeHandle: FC<ResizeHandleProps>;
+export {};

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

@@ -1,8 +1,8 @@
 /** Keys that move the selection inside the group. */
 export declare const NAVIGATION_KEYS: string[];
 /** The sunken track the segments sit in. */
-export declare const containerClassName = "inline-flex w-fit items-center gap-1 rounded-full bg-layer-sunken p-1";
-export declare const segmentClassName = "flex h-8 min-w-8 flex-1 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 dial-small-text transition-colors duration-200 outline-offset-0 focus-visible:outline focus-visible:outline-focus";
+export declare const containerClassName = "inline-flex w-fit items-center gap-1 rounded-full border border-tertiary bg-layer-sunken p-[3px]";
+export declare const segmentClassName = "flex h-8 min-w-8 grow shrink-0 basis-auto items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 dial-small-text transition-colors duration-200 outline-offset-0 focus-visible:outline focus-visible:outline-focus";
 /** Selected lifts off the track on a raised surface and keeps the accent at rest. */
 export declare const segmentSelectedClassName = "bg-layer-raised text-accent shadow-xs";
 export declare const segmentUnselectedClassName = "bg-transparent text-secondary";

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

@@ -1,6 +1,7 @@
 import { FC, MouseEvent, ReactNode, Ref } from 'react';
 import { LabelProps } from '../Label/Label';
 import { SelectOption } from '../../../models/select';
+import { MenuItemMark } from '../../../types/menu-item';
 import { ElementSize } from '../../../types/size';
 export interface SelectProps {
     options: SelectOption[];
@@ -21,6 +22,13 @@ export interface SelectProps {
     searchPlaceholder?: string;
     selectAll?: boolean;
     selectAllLabel?: string;
+    /**
+     * How the chosen option is marked in single mode. The design tints the row
+     * (`Tint`, the default); `Check` puts a trailing check on it instead, the
+     * way a menu marks its rows, and `Highlight` adds the navigation menu's
+     * accent label. Multiple mode always uses the checkbox row.
+     */
+    selectedOptionMark?: MenuItemMark.Tint | MenuItemMark.Check | MenuItemMark.Highlight;
     emptyStateTitle?: string;
     emptyStateDescription?: string;
     emptyStateIcon?: ReactNode;
@@ -46,14 +54,17 @@ export interface SelectProps {
  * aliases: OptionPicker|ChoiceSelector
  * Design system 2.0
  *
+ * A list of **values to choose from**, opened from the field. It is not the
+ * control for showing actions or navigation options — that is {@link Dropdown}.
+ *
  * The field is an {@link Input}, so it carries the 2.0 field styling, sizes,
  * label, caption and error states, and it exposes the control as a `combobox`
  * whose popup is the option list.
  *
  * Single mode:
  * - The field shows the selected option's leading icon + label.
- * - In the list, the selected option is indicated by a LEFT border, a tinted background
- *   and a trailing check icon.
+ * - In the list, the selected option is tinted; `selectedOptionMark` swaps that
+ *   for a trailing check or the navigation highlight.
  *
  * Multiple mode uses checkboxes (including Select All with indeterminate state) and
  * renders the selection as removable tags inside the field.
@@ -87,6 +98,7 @@ export interface SelectProps {
  * @param [searchPlaceholder] - Placeholder for the overlay search input.
  * @param [selectAll=false] - Show a "Select All" checkbox in multiple mode.
  * @param [selectAllLabel="Select all"] - Label for the "Select All" checkbox.
+ * @param [selectedOptionMark=MenuItemMark.Tint] - How the chosen option is marked in single mode.
  * @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.

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

@@ -1,8 +1,11 @@
 import { FC } from 'react';
 import { SelectOption } from '../../../models/select';
+import { MenuItemMark } from '../../../types/menu-item';
 export interface SelectSubMenuItemProps {
     opt: SelectOption;
     selectedValues: string[];
+    /** How a chosen child row is marked. */
+    mark?: MenuItemMark.Tint | MenuItemMark.Check | MenuItemMark.Checkbox | MenuItemMark.Highlight;
     onSelect: (value: string) => void;
 }
 export declare const SelectSubMenuItem: FC<SelectSubMenuItemProps>;

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

@@ -1,6 +1,9 @@
 export declare const selectOverlayBaseClassName: string;
+/**
+ * A row of the option list. The options themselves are {@link MenuItem}s; this
+ * is what the list's own non-option rows — Select All — align to.
+ */
 export declare const selectOptionBaseClassName: string;
-export declare const selectOptionSelectedClassName = "bg-control-accent-alpha";
 /**
  * Holds the option list to the width of the field.
  *
@@ -12,8 +15,14 @@ export declare const selectOptionSelectedClassName = "bg-control-accent-alpha";
  * default this component relies on).
  */
 export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]";
-export declare const selectOptionDisabledClassName: string;
-export declare const dropdownMenuMaxHeight = 352;
+/**
+ * The options themselves scroll, at the design's maximum list length of
+ * 344px — not the panel around them, so the search row and Select All stay
+ * put while the list moves under them. The panel keeps its own cap on the
+ * available viewport height, which takes over on a screen too short for this
+ * one.
+ */
+export declare const selectOptionsScrollClassName = "max-h-[344px] overflow-y-auto";
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;
 /** Marks an option that opens a nested list. Matches the dropdown's caret. */
@@ -27,6 +36,4 @@ 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;
-/** Marks the selected option in single mode, alongside its tinted row. */
-export declare const selectOptionCheckIcon: import("react/jsx-runtime").JSX.Element;
 export declare const selectEmptyStateIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,70 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'size'>;
+export interface SliderProps extends NativeInputProps {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    labelProps?: LabelProps;
+    /** 2-element or 3-element label tuple rendered below the track */
+    labels?: [string, string] | [string, string, string];
+    /** Custom formatter for the displayed value; defaults to fixed-decimal based on step */
+    formatValue?: (value: number) => string;
+    /** Renders the current value at the end of the label row */
+    showValue?: boolean;
+    caption?: string;
+    error?: string;
+    onChange?: (value: number) => void;
+    containerClassName?: string;
+    /** Additional classes for the unfilled track */
+    trackClassName?: string;
+    /** Additional classes for the filled portion of the track */
+    fillClassName?: string;
+}
+/**
+ * A range slider from the 2.0 design system.
+ * aliases: RangeInput|TemperatureSlider|RangeSlider
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   id="temperature"
+ *   labelProps={{ label: 'Temperature' }}
+ *   value={temperature}
+ *   labels={['Precise', 'Neutral', 'Creative']}
+ *   onChange={setTemperature}
+ * />
+ * ```
+ *
+ * Built on a native `<input type="range">`, so the browser owns the drag, the
+ * arrow / Home / End steps, touch and the writing direction. Only the thumb is
+ * restyled; the track and its fill are separate elements so the fill can be
+ * driven from `value`. Thumb states live in `slider.scss`, because a
+ * pseudo-element cannot be reached by a utility class.
+ *
+ * The interactive row is 24px tall and spans the full width, so the pointer
+ * target meets WCAG 2.5.8 (Minimum) but not the 44px of 2.5.5 (Enhanced) — see
+ * the exception table in the README.
+ *
+ * @param value - Current slider value
+ * @param [min=0] - Minimum value
+ * @param [max=1] - Maximum value
+ * @param [step=0.1] - Step increment
+ * @param [disabled=false] - Whether the slider is disabled
+ * @param [labelProps] - Props of the {@link Label} rendered above the track
+ * @param [labels] - 2 or 3 strings rendered below the track (start, [middle,] end)
+ * @param [formatValue] - Custom formatter for the displayed value; also becomes the announced `aria-valuetext`
+ * @param [showValue=false] - Renders the current value at the end of the label row
+ * @param [caption] - Helper text rendered below the track, and described by the slider
+ * @param [error] - Error message rendered below the track; replaces the caption
+ * @param [onChange] - Callback fired with the new value
+ * @param [containerClassName] - Additional classes for the outer container
+ * @param [trackClassName] - Additional classes for the unfilled track
+ * @param [fillClassName] - Additional classes for the filled portion of the track
+ * @param [className] - Additional classes for the underlying range input
+ */
+export declare const Slider: FC<SliderProps>;
+export {};

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

@@ -1,11 +1,9 @@
 import { FC, HTMLAttributes, MouseEvent, ReactNode } from 'react';
-import { ElementSize } from '../../../types/size';
 import { TagAppearance } from '../../../types/tag';
 type NativeTagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
 export interface TagProps extends NativeTagProps {
     label: string;
     icon?: ReactNode;
-    size?: ElementSize;
     appearance?: TagAppearance;
     selected?: boolean;
     disabled?: boolean;
@@ -18,6 +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 label truncates rather than wrapping, and carries a native `title` so the
  * full text stays reachable when it does.
  *
@@ -26,10 +28,16 @@ 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.
  *
- * `TagAppearance.Selectable` is the filter chip of the 2.0 design: no rim and no
- * fill until it is selected, one hover tint shared by both states, and the state
- * carried on `aria-pressed` rather than by the tint alone. Give it an `onClick` —
- * a selectable tag that cannot be activated is a colour and nothing else.
+ * No tag draws a rim; the two appearances are told apart by their fill.
+ * `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
+ * the tint alone. Give it an `onClick` — a selectable tag that cannot be
+ * activated is a colour and nothing else.
+ *
+ * Selecting one therefore changes its width by the difference between the
+ * regular and semibold label. In a wrapping filter row that is what the design
+ * asks for; if a fixed width matters, give the chip one.
  *
  * @example
  * ```tsx
@@ -46,11 +54,10 @@ export interface TagProps extends NativeTagProps {
  *
  * @param label - Text content displayed inside the tag.
  * @param [icon] - Icon rendered before the label.
- * @param [size=ElementSize.Standard] - Tag height: standard is 24px, small is 20px.
- * @param [appearance=TagAppearance.Outlined] - `outlined` is the bordered chip; `selectable`
- * is the borderless filter chip that tints when selected.
+ * @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.
  * @param [selected=false] - Applies the accent-tinted selected styling.
- * @param [disabled=false] - Dims the tag and suppresses the remove control and click handling.
+ * @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.
  * @param [removeLabel] - Accessible name of the remove button; defaults to `Remove <label>`.
  * @param [onRemove] - Called when the remove button is clicked. The click does not bubble to `onClick`.

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

@@ -0,0 +1,23 @@
+import { TagAppearance } from '../../../types/tag';
+/**
+ * Geometry and layout shared by every tag. No transition: the design animates
+ * the hover and selected steps instantly (0ms), so the fill switches on the
+ * same frame as the pointer.
+ */
+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.
+ */
+export declare const tagStateClassNames: Record<TagAppearance, Record<'default' | 'selected', string>>;
+/** Cursor and focus ring of a tag that can be activated. */
+export declare const tagInteractiveClassName = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus";
+/**
+ * Hover and active step of a clickable tag — one accent tint for every
+ * appearance and both selections, as the 2.0 overlay rows do. A selected tag
+ * must not read as hovered at rest, and the label is left alone, so an
+ * unselected one never darkens into looking selected.
+ */
+export declare const tagHoverClassName = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";