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

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

@@ -1,4 +1,4 @@
-import { FC, MouseEvent, ReactNode } from 'react';
+import { CSSProperties, FC, MouseEvent, ReactNode } from 'react';
 import { ButtonProps } from '../Button/Button';
 import { PopupSize } from '../../../types/popup';
 export interface PopupProps {
@@ -8,6 +8,12 @@ export interface PopupProps {
     portalId?: string;
     className?: string;
     overlayClassName?: string;
+    /**
+     * Inline styles applied to the overlay. Floating UI sets `position`, `inset`
+     * and `overflow: auto` inline, which no class can override; keys passed here
+     * are merged after them and win.
+     */
+    overlayStyle?: CSSProperties;
     titleClassName?: string;
     headerClassName?: string;
     /** Additional CSS classes applied to the scrollable body wrapper around `children`. */
@@ -87,6 +93,7 @@ export interface PopupProps {
  * @param [portalId] - Optional portal container id
  * @param [className] - Additional CSS classes applied to the popup container
  * @param [overlayClassName] - Additional CSS classes applied to the overlay
+ * @param [overlayStyle] - Inline styles merged over Floating UI's own overlay styles (`position`, `inset`, `overflow: auto`)
  * @param [titleClassName] - Additional CSS classes applied to the title element
  * @param [headerClassName] - Additional CSS classes applied to the popup header container
  * @param [bodyClassName] - Additional CSS classes applied to the scrollable body wrapper around `children`

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

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../../types/popup';
-export declare const popupOverlayBaseClassName = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
+export declare const popupOverlayBaseClassName = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
 export declare const popupBaseClassName = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto";
 export declare const popupHeaderClassName = "flex flex-row items-center justify-between px-6 py-4";
 export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary";

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

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { SchemaRendererProps } from './types';
+/**
+ * Renders a JSON Schema as a form, with collapsible sections, required-field
+ * validation and default values.
+ * aliases: SchemaRenderer|JsonSchemaForm|SchemaForm
+ * Design system 2.0
+ *
+ * Built only from 2.0 controls: `Input`, `NumberInput`, `PasswordInput`,
+ * `Select`, `Switch` and `RadioGroup`. A value the schema does not describe —
+ * a key absent from `properties`, or an object with no fixed properties — is
+ * edited as raw JSON in a monospace `Textarea`.
+ *
+ * @example
+ * ```tsx
+ * <SchemaRenderer
+ *   schema={mySchema}
+ *   onChange={(v) => console.log(v)}
+ *   onDefaultValues={(defaults) => console.log(defaults)}
+ * />
+ * ```
+ *
+ * @param schema - The root JSON Schema to render
+ * @param [defaultValue] - Initial form value; if omitted, defaults are extracted from schema
+ * @param [texts] - Override any user-visible strings rendered by the component
+ * @param [className] - Additional CSS classes for the root container
+ * @param [readonly=false] - When true all inputs are disabled; sections remain collapsible
+ * @param [defaultExpanded=true] - Initial expanded state for all collapsible sections
+ * @param [inputClassName] - Additional classes for the container of every text, number and select field
+ * @param [variant=SchemaRendererVariant.Sections] - `Sections` wraps every top-level property in a collapsible card; `Flat` renders primitives as labelled fields; `FlatSections` puts every property under a plain heading
+ * @param [skipUntouched=false] - When true, required-field errors appear only after the user has interacted with a field
+ * @param [acceptableResourceTypes] - Live options for properties flagged with `dial:resource: true`, keyed by resource type
+ * @param [renderField] - Override the rendered control for any field by path; return `defaultElement` to fall back to built-in rendering
+ * @param [onChange] - Called with the full form value on every change
+ * @param [onPropertyChange] - Called with `(path, value)` for each individual top-level property change
+ * @param [onDefaultValues] - Called once on mount with the resolved default values
+ */
+export declare const SchemaRenderer: FC<SchemaRendererProps>;

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

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaAnyOfEditorProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+    ariaLabel?: string;
+}
+/**
+ * Renders an `anyOf` schema field as a type select with the selected variant's editor.
+ * aliases: AnyOfSchemaEditor|SchemaUnionEditor
+ * Design system 2.0
+ *
+ * A `null` variant has no editor, so selecting it clears the value.
+ *
+ * @example
+ * ```tsx
+ * <SchemaAnyOfEditor
+ *   schema={{ anyOf: [{ type: 'null' }, { type: 'string' }] }}
+ *   value={null}
+ *   onChange={(v) => console.log(v)}
+ *   path={['field']}
+ *   level={1}
+ *   ariaLabel="Field"
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema definition containing an `anyOf` array
+ * @param value - Current field value
+ * @param onChange - Called with the new value when the type or sub-value changes
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child field components
+ * @param [ariaLabel] - Accessible name of the type select and the variant's control
+ */
+export declare const SchemaAnyOfEditor: FC<SchemaAnyOfEditorProps>;

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

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaArrayEditorProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+}
+/**
+ * Renders a JSON Schema array as a list of collapsible items with add and remove controls.
+ * aliases: ArraySchemaEditor|SchemaListEditor
+ * Design system 2.0
+ *
+ * An item schema with a `discriminator` adds a type select next to the add
+ * button; the new item gets that variant's defaults.
+ *
+ * @example
+ * ```tsx
+ * <SchemaArrayEditor
+ *   schema={{ type: 'array', items: { type: 'string' } }}
+ *   value={['foo', 'bar']}
+ *   onChange={(v) => console.log(v)}
+ *   path={['tags']}
+ *   level={1}
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema array definition (must include an `items` sub-schema)
+ * @param value - Current array value
+ * @param onChange - Called with the updated array when items are added, removed, or changed
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child section components
+ */
+export declare const SchemaArrayEditor: FC<SchemaArrayEditorProps>;

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

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { SchemaFieldProps } from '../types';
+/**
+ * Renders a single schema property: a labelled field for a primitive, or a
+ * collapsible section for an object or an array.
+ * aliases: SchemaPropertyField|SchemaFormField
+ * Design system 2.0
+ *
+ * The label and the required error sit outside {@link SchemaFieldContent}, so
+ * a `renderField` override replaces the control and keeps both.
+ *
+ * @example
+ * ```tsx
+ * <SchemaField
+ *   schema={{ type: 'string' }}
+ *   value="hello"
+ *   onChange={(v) => console.log(v)}
+ *   path={['name']}
+ *   level={1}
+ *   required
+ *   label="Name"
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema definition for this field
+ * @param value - Current field value
+ * @param onChange - Called with the updated value when the field changes
+ * @param path - Field path segments used for validation error tracking
+ * @param [level=0] - Nesting depth; object/array fields render as collapsible sections
+ * @param [required] - Whether the field is required (shows error when empty)
+ * @param [label] - Display label; falls back to schema title or path segment
+ */
+export declare const SchemaField: FC<SchemaFieldProps>;

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

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { SchemaFieldContentProps } from '../types';
+/**
+ * Routes a resolved schema to the editor that renders it.
+ * aliases: SchemaEditorRouter|SchemaContentDispatcher
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <SchemaFieldContent
+ *   schema={{ type: 'string' }}
+ *   value="hello"
+ *   onChange={(v) => console.log(v)}
+ *   path={['name']}
+ *   level={1}
+ *   ariaLabel="Name"
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema definition to render
+ * @param value - Current field value
+ * @param onChange - Called with the updated value when the field changes
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child editor components
+ * @param [required] - Whether the field is required (passed to primitive fields for error styling)
+ * @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
+ */
+export declare const SchemaFieldContent: FC<SchemaFieldContentProps>;

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

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+export interface SchemaJsonEditorProps {
+    value: unknown;
+    onChange: (value: unknown) => void;
+    id?: string;
+    ariaLabel?: string;
+}
+/**
+ * Edits a value the schema does not describe as raw JSON text: a key absent
+ * from the schema's `properties`, an object with no fixed properties, or a
+ * key-value entry switched to the object or array type.
+ * aliases: SchemaRawJsonEditor|SchemaUnknownPropertyEditor
+ * Design system 2.0
+ *
+ * A plain monospace {@link Textarea} rather than a code editor, so the form
+ * pulls in no editor bundle. The draft text is kept locally and `onChange`
+ * fires only once it parses.
+ *
+ * @example
+ * ```tsx
+ * <SchemaJsonEditor value={{ retries: 3 }} onChange={setValue} />
+ * ```
+ *
+ * @param value - The current value (any JSON type)
+ * @param onChange - Called with the parsed value whenever the edited text is valid JSON
+ * @param [id] - Id of the textarea, for a visible label to point at
+ * @param [ariaLabel] - Accessible name of the textarea
+ */
+export declare const SchemaJsonEditor: FC<SchemaJsonEditorProps>;

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

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaKeyValueEditorProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+}
+/**
+ * Renders an `additionalProperties` object schema as an editable key-value list.
+ * aliases: KeyValueSchemaEditor|AdditionalPropertiesEditor
+ * Design system 2.0
+ *
+ * Primitive values render inline; object, `oneOf` and array values render as a
+ * collapsible section recursing back into `SchemaFieldContent`. With
+ * `additionalProperties: true` each entry also gets a type select, and an
+ * object or array entry is edited as raw JSON.
+ *
+ * @example
+ * ```tsx
+ * <SchemaKeyValueEditor
+ *   schema={{ type: 'object', additionalProperties: { type: 'string' } }}
+ *   value={{ foo: 'bar' }}
+ *   onChange={(v) => console.log(v)}
+ *   path={['metadata']}
+ *   level={1}
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema object definition with `additionalProperties`
+ * @param value - Current object value (treated as a key-value map)
+ * @param onChange - Called with the updated object when pairs are added, removed, or changed
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child section components
+ */
+export declare const SchemaKeyValueEditor: FC<SchemaKeyValueEditorProps>;

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

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaObjectEditorProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+}
+/**
+ * Renders the properties of a JSON Schema object as labelled form fields.
+ * aliases: ObjectSchemaEditor|SchemaPropertiesEditor
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <SchemaObjectEditor
+ *   schema={{ type: 'object', properties: { name: { type: 'string' } } }}
+ *   value={{ name: 'Alice' }}
+ *   onChange={(v) => console.log(v)}
+ *   path={['config']}
+ *   level={1}
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema object definition
+ * @param value - Current object value
+ * @param onChange - Called with the updated object when any property changes
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child SchemaField instances
+ */
+export declare const SchemaObjectEditor: FC<SchemaObjectEditorProps>;

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

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaOneOfEditorProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+    ariaLabel?: string;
+}
+/**
+ * Renders a `oneOf` schema field as a type selector with the selected variant's editor.
+ * aliases: OneOfSchemaEditor|SchemaDiscriminatorEditor
+ * Design system 2.0
+ *
+ * The selector is a select by default, or a radio group with
+ * `discriminatorDisplay: 'radio'`. A column radio group reveals the variant's
+ * editor under its own option; a row one shows it below the whole row.
+ *
+ * @example
+ * ```tsx
+ * <SchemaOneOfEditor
+ *   schema={{ oneOf: [...], discriminator: { propertyName: 'type', mapping: {...} } }}
+ *   value={{ type: 'foo' }}
+ *   onChange={(v) => console.log(v)}
+ *   path={['config']}
+ *   level={1}
+ *   ariaLabel="Provider"
+ * />
+ * ```
+ *
+ * @param schema - The JSON Schema definition containing a `oneOf` array and optional `discriminator`
+ * @param value - Current field value
+ * @param onChange - Called with the new value when the selected type or sub-value changes
+ * @param path - Field path segments used for validation error tracking
+ * @param level - Nesting depth passed to child editor components
+ * @param [ariaLabel] - Accessible name of the type selector; defaults to the select-type placeholder
+ */
+export declare const SchemaOneOfEditor: FC<SchemaOneOfEditorProps>;

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

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { JsonSchemaDef } from '../../../../models/json-schema';
+export interface SchemaPrimitiveFieldProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    invalid?: boolean;
+    id?: string;
+    ariaLabel?: string;
+}
+/**
+ * Renders a single primitive schema field: string, integer, number, boolean, enum, or const.
+ * - `dial:resource` with `acceptableResourceTypes` → select over the live resource options
+ * - `isProtected: true` → masked password input
+ * - `enum` + `enumDisplay: 'radio'` → radio group (`enumOrientation: 'row'` lays it out horizontally)
+ * - `enum` without `enumDisplay` → select
+ * - `const` → disabled read-only input
+ * aliases: SchemaInputField|PrimitiveSchemaField
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <SchemaPrimitiveField
+ *   schema={{ type: 'string', enum: ['a', 'b'], enumDisplay: 'radio', enumOrientation: 'row' }}
+ *   value="a"
+ *   onChange={(v) => console.log(v)}
+ *   ariaLabel="Mode"
+ * />
+ * ```
+ *
+ * @param schema - The resolved JSON Schema definition; supports `isProtected`, `enumDisplay`, `enumOrientation`
+ * @param value - Current field value
+ * @param onChange - Called with the new value when the field changes
+ * @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
+ */
+export declare const SchemaPrimitiveField: FC<SchemaPrimitiveFieldProps>;

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

@@ -0,0 +1,39 @@
+import { FC, ReactNode } from 'react';
+export interface SchemaSectionProps {
+    title: string;
+    description?: string;
+    summary?: string;
+    errorCount?: number;
+    level?: number;
+    children?: ReactNode;
+    onRemove?: () => void;
+    defaultExpanded?: boolean;
+    removeItemAriaLabel?: string;
+}
+/**
+ * A collapsible card wrapping a group of schema properties.
+ * aliases: CollapsibleSchemaSection|SchemaCard
+ * Design system 2.0
+ *
+ * Only the chevron and the title sit inside the toggle button. The info button
+ * and the remove button are its siblings, since a button nested in a button is
+ * invalid and its clicks would toggle the section too.
+ *
+ * @example
+ * ```tsx
+ * <SchemaSection title="Settings" level={0} summary="3/4 fields" errorCount={1}>
+ *   <p>Content</p>
+ * </SchemaSection>
+ * ```
+ *
+ * @param title - Section header title
+ * @param [description] - Explanatory text, exposed through an info button in the header
+ * @param [summary] - Short summary text shown in the header (e.g. "3/4 fields", "2 items")
+ * @param [errorCount=0] - Number of validation errors; shows an error count when > 0
+ * @param [level=0] - Nesting depth; 0 is the top-level card, 1+ the nested one
+ * @param [children] - Section body, mounted only while expanded
+ * @param [onRemove] - If provided, shows a remove button in the header
+ * @param [defaultExpanded=true] - Whether the section starts expanded
+ * @param [removeItemAriaLabel='Remove item'] - Accessible name of the remove button
+ */
+export declare const SchemaSection: FC<SchemaSectionProps>;

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

@@ -0,0 +1,8 @@
+import { SchemaRendererContextValue } from './types';
+export declare const SchemaRendererContext: import('react').Context<SchemaRendererContextValue | null>;
+export declare const useSchemaContext: () => SchemaRendererContextValue;
+/**
+ * Whether a path, or any path under it, has been touched. Every field counts as
+ * touched while `skipUntouched` is off, so errors show from the first render.
+ */
+export declare const isPathTouched: (path: string, touchedPaths?: ReadonlySet<string>, skipUntouched?: boolean, includeDescendants?: boolean) => boolean;

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

@@ -0,0 +1,76 @@
+import { ReactElement, ReactNode } from 'react';
+import { JsonSchema, JsonSchemaDef, SchemaRendererTexts } from '../../../models/json-schema';
+import { SchemaRendererVariant } from '../../../types/json-schema';
+export type SchemaRenderField = (path: string[], schema: JsonSchemaDef, defaultElement: ReactElement) => ReactNode;
+export interface SchemaRendererProps {
+    schema: JsonSchema;
+    defaultValue?: Record<string, unknown>;
+    texts?: Partial<SchemaRendererTexts>;
+    className?: string;
+    readonly?: boolean;
+    defaultExpanded?: boolean;
+    /** Additional classes for the container of every text, number and select field. */
+    inputClassName?: string;
+    /**
+     * `Sections` (default) — every top-level property is a collapsible section card.
+     * `Flat` — primitive top-level properties render as labelled fields; object and
+     * array properties still use collapsible sections.
+     * `FlatSections` — every top-level property renders under a plain heading.
+     */
+    variant?: SchemaRendererVariant;
+    /**
+     * When `true`, required-field errors are only shown after the user has interacted
+     * with a field. When `false` (default), all unfilled required fields are highlighted immediately.
+     */
+    skipUntouched?: boolean;
+    /**
+     * Live resource options for schema properties flagged with `dial:resource: true`.
+     * Keyed by the resource type name referenced in a property's `acceptableResourceTypes`
+     * array; each value provides the selectable entries for that resource type (a string
+     * array for string-typed properties).
+     */
+    acceptableResourceTypes?: Record<string, unknown>;
+    onChange?: (value: Record<string, unknown>) => void;
+    onPropertyChange?: (path: string, value: unknown) => void;
+    onDefaultValues?: (value: Record<string, unknown>) => void;
+    /**
+     * Override the rendered element for any field by path. The field's label and
+     * error stay outside the element, so an override replaces the control only.
+     * Return `defaultElement` to fall back to the built-in renderer.
+     * @param path - Array of schema property keys leading to this field (e.g. ['connection', 'token'])
+     * @param schema - The resolved JSON Schema definition for this field
+     * @param defaultElement - The element that would be rendered without customization
+     */
+    renderField?: SchemaRenderField;
+}
+export interface SchemaFieldContentProps {
+    schema: JsonSchemaDef;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    path: string[];
+    level: number;
+    required?: boolean;
+    suppressInlineError?: boolean;
+    /** The id given to a primitive control, so a visible label can point at it. */
+    fieldId?: string;
+    /**
+     * Accessible name for the control. Sections, array items and key-value rows
+     * have no visible label next to their control, so this is what names it.
+     */
+    ariaLabel?: string;
+}
+export interface SchemaFieldProps extends Omit<SchemaFieldContentProps, 'fieldId' | 'ariaLabel' | 'suppressInlineError'> {
+    label?: string;
+}
+export interface SchemaRendererContextValue {
+    rootSchema: JsonSchema;
+    texts: SchemaRendererTexts;
+    readonly?: boolean;
+    defaultExpanded?: boolean;
+    inputClassName?: string;
+    acceptableResourceTypes?: Record<string, unknown>;
+    renderField?: SchemaRenderField;
+    touchedPaths?: ReadonlySet<string>;
+    markTouched?: (path: string) => void;
+    skipUntouched?: boolean;
+}

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

@@ -0,0 +1,22 @@
+import { FC, MouseEvent } from 'react';
+import { SelectOption } from '../../../models/select';
+export interface CollapsedSelectTagsProps {
+    options: SelectOption[];
+    selectedValues: string[];
+    handleRemoveTag: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void;
+}
+/**
+ * The selected tags of a multi-select on a single row. The tags that do not fit
+ * the width of the field collapse into a `+N` counter whose hover panel lists
+ * them, each still removable.
+ * Design system 2.0
+ *
+ * The count follows the width the field has, not the number of tags: every tag
+ * is measured in a hidden copy of the row, so the tags that stay visible are
+ * the ones that fit beside the counter, and the count follows a resize.
+ *
+ * @param options - All available options, used to resolve labels and icons
+ * @param selectedValues - Values currently selected
+ * @param handleRemoveTag - Called with the value whose tag was removed
+ */
+export declare const CollapsedSelectTags: FC<CollapsedSelectTagsProps>;

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

@@ -1,9 +1,13 @@
 import { FC, MouseEvent } from 'react';
 import { SelectOption } from '../../../models/select';
+/** Geometry shared by every tag of a multi-select field, and its `+N` counter. */
+export declare const selectTagClassName = "h-[24px] max-w-full rounded-md border border-secondary bg-layer-sunken px-2";
 export interface MultiSelectTagsProps {
     options: SelectOption[];
     selectedValues: string[];
     handleRemoveTag?: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void;
+    /** Additional classes for every tag. */
+    tagClassName?: string;
 }
 /**
  * The selected values of a multi-select, rendered as removable tags inside the
@@ -13,5 +17,6 @@ export interface MultiSelectTagsProps {
  * @param options - All available options, used to resolve labels and icons
  * @param selectedValues - Values currently selected
  * @param [handleRemoveTag] - Called with the value whose tag was removed; when omitted the tags are not removable
+ * @param [tagClassName] - Additional classes for every tag
  */
 export declare const MultiSelectTags: FC<MultiSelectTagsProps>;

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

@@ -22,6 +22,14 @@ export interface SelectProps {
     searchPlaceholder?: string;
     selectAll?: boolean;
     selectAllLabel?: string;
+    /**
+     * Keeps a multi-select's tags on one row, folding the ones that do not fit
+     * into a `+N` counter whose hover panel lists them (as `TagInput` does with
+     * the same prop). Without it the tags wrap and the field grows.
+     * Ignored with `customMultiSelectTagsRenderer`, and on a mobile screen, where
+     * the hover panel is unavailable and the tags wrap instead.
+     */
+    collapseTagOverflow?: boolean;
     /**
      * 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
@@ -98,6 +106,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 [collapseTagOverflow=false] - Keep a multi-select's tags on one row, folding those that do not fit into a `+N` counter by the width available; the hover panel lists them and removes them.
  * @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.

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

@@ -20,9 +20,10 @@ export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]
  * 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.
+ * one. `py-1` matches the Dropdown menu's list inset, so the first and last
+ * rows (and their focus ring) do not sit flush against the panel edge.
  */
-export declare const selectOptionsScrollClassName = "max-h-[344px] overflow-y-auto";
+export declare const selectOptionsScrollClassName: string;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;
 /** Marks an option that opens a nested list. Matches the dropdown's caret. */

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

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from 'react';
+/** Props for `SharedEntityIndicator`. */
+export interface SharedEntityIndicatorProps {
+    /** Accessible name of the badge. */
+    label?: string;
+    /** Tooltip shown while the badge is hovered. */
+    tooltip?: ReactNode;
+    /** Arrow size in px. */
+    size?: number;
+    /** Additional CSS classes for the badge, e.g. to position it over an icon. */
+    className?: string;
+}
+/**
+ * A small arrow badge marking an entity as shared.
+ * aliases: SharedIcon|AccessIndicator
+ * Design system 2.0
+ *
+ * A `role="img"` named by `label`, so it can stand on its own. Placed inside a
+ * larger `role="img"` — as `FileIcon` does — its name is folded into the
+ * parent's, which is why `FileIcon` names the shared state itself. The tooltip
+ * is a pointer-only hint: the badge is not focusable, and the tooltip never
+ * reaches assistive technology, so `label` is what carries the meaning.
+ *
+ * @example
+ * ```tsx
+ * <SharedEntityIndicator />
+ * <SharedEntityIndicator tooltip="Shared with 3 people" className="absolute -bottom-0.5 -left-0.5" />
+ * ```
+ *
+ * @param [label='Shared'] - Accessible name of the badge
+ * @param [tooltip='Shared'] - Tooltip shown while the badge is hovered
+ * @param [size=12] - Arrow size in px
+ * @param [className] - Additional CSS classes for the badge
+ */
+export declare const SharedEntityIndicator: FC<SharedEntityIndicatorProps>;