@epam/ai-dial-ui-kit 0.14.0-dev.4 → 0.14.0-dev.41

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 a struck-through clipboard. */
+    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 a struck-through clipboard.
+ * @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/Popup/Popup.d.ts

@@ -1,4 +1,5 @@
 import { FC, MouseEvent, ReactNode } from 'react';
+import { ButtonProps } from '../Button/Button';
 import { PopupSize } from '../../../types/popup';
 export interface PopupProps {
     open?: boolean;
@@ -13,7 +14,16 @@ export interface PopupProps {
     bodyClassName?: string;
     children?: ReactNode;
     footer?: ReactNode;
+    footerClassName?: string;
     onClose?: (e?: MouseEvent<HTMLButtonElement> | null) => void;
+    onBack?: (e: MouseEvent<HTMLButtonElement>) => void;
+    backAriaLabel?: string;
+    headerActions?: ReactNode;
+    headerDivider?: boolean;
+    mainButtons?: ButtonProps[];
+    additionalButtons?: ButtonProps[];
+    additionalButtonsOnLeft?: boolean;
+    footerDivider?: boolean;
     size?: PopupSize;
     hideClose?: boolean;
     closeAriaLabel?: string;
@@ -27,8 +37,18 @@ export interface PopupProps {
  *
  * Renders in a portal with a scrim overlay, focus management, a header with the
  * title and close control, a scrollable body and an optional footer. Sections
- * are separated by spacing rather than rules; add your own through
- * `headerClassName` or the footer node if a surface needs them.
+ * are separated by spacing rather than rules; opt into a rule with
+ * `headerDivider` / `footerDivider`.
+ *
+ * The header grows from the title alone: `onBack` prepends a back control,
+ * `headerActions` sits between the title and the close button.
+ *
+ * The footer is declared as data, not markup: `mainButtons` and
+ * `additionalButtons` take {@link ButtonProps} and the popup renders the
+ * {@link Button}s itself, so spacing, order and the neutral default are the
+ * same on every dialog. `additionalButtonsOnLeft` moves the secondary group to
+ * the opposite edge. A `footer` node still wins over both, for the rare surface
+ * that needs something other than a row of buttons.
  *
  * A string `header` names the dialog automatically. A `header` node cannot —
  * pass `ariaLabel` in that case, or the dialog opens unnamed.
@@ -39,12 +59,22 @@ export interface PopupProps {
  *   open
  *   header="Title"
  *   size={PopupSize.Md}
- *   footer={
- *     <div className="flex justify-end gap-2 px-6 py-4">
- *       <NeutralButton label="Cancel" />
- *       <PrimaryButton label="Confirm" />
- *     </div>
- *   }
+ *   onBack={() => setStep(step - 1)}
+ *   headerActions={<InfoButton caption="What is this?" />}
+ *   additionalButtonsOnLeft
+ *   additionalButtons={[
+ *     {
+ *       label: 'Back',
+ *       variant: ButtonVariant.Primary,
+ *       appearance: ButtonAppearance.Link,
+ *       iconBefore: <IconArrowLeft />,
+ *       onClick: goBack,
+ *     },
+ *   ]}
+ *   mainButtons={[
+ *     { label: 'Cancel', onClick: () => setOpen(false) },
+ *     { label: 'Confirm', variant: ButtonVariant.Primary, onClick: submit },
+ *   ]}
  *   onClose={() => setOpen(false)}
  * >
  *   <div className="px-6 py-4">Dialog content goes here…</div>
@@ -61,7 +91,16 @@ export interface PopupProps {
  * @param [headerClassName] - Additional CSS classes applied to the popup header container
  * @param [bodyClassName] - Additional CSS classes applied to the scrollable body wrapper around `children`
  * @param [children] - Body content
- * @param [footer] - Footer area for actions
+ * @param [footer] - Custom footer node; overrides `mainButtons` and `additionalButtons`
+ * @param [footerClassName] - Additional CSS classes applied to the built-in footer container
+ * @param [onBack] - Callback for the header back button; the button renders only when set
+ * @param [backAriaLabel="Back"] - Accessible name of the back button
+ * @param [headerActions] - Controls rendered between the title and the close button
+ * @param [headerDivider=false] - Whether a rule is drawn under the header
+ * @param [mainButtons] - Primary footer buttons, aligned to the trailing edge; each defaults to `ButtonVariant.Neutral`
+ * @param [additionalButtons] - Secondary footer buttons, next to `mainButtons` unless moved left
+ * @param [additionalButtonsOnLeft=false] - Whether `additionalButtons` sit on the leading edge
+ * @param [footerDivider=false] - Whether a rule is drawn above the footer
  * @param [onClose] - Callback fired when the popup requests to close
  * @param [size=PopupSize.Md] - Sets the max-width of the popup
  * @param [hideClose=false] - Whether the close button is hidden in the header

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

@@ -3,6 +3,13 @@ export declare const popupOverlayBaseClassName = "z-[52] flex items-center justi
 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";
+/** 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";
+/** Rule above the footer, mirroring the header. */
+export declare const popupFooterDividerClassName = "border-t border-tertiary";
+/** Groups the controls sitting on one side of the header or footer. */
+export declare const popupActionsGroupClassName = "flex shrink-0 flex-row items-center gap-2";
 /**
  * Max widths per size. Full width below the `md` breakpoint, where the popup
  * fills the screen.

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-hover";
 /**
  * Holds the option list to the width of the field.
  *
@@ -12,8 +15,14 @@ export declare const selectOptionSelectedClassName = "bg-control-accent-alpha-ho
  * default this component relies on).
  */
 export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]";
-export declare const selectOptionDisabledClassName = "text-secondary";
-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;