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

package/README.md

@@ -86,7 +86,7 @@ function App() {
 
 ### Optional: Markdown Components CSS
 
-If you're using markdown-related components (`DialMarkdownEditor` or `DialMarkdownEditorContainer`), you need to import the required CSS files globally in your application (e.g., in your root layout or main entry point):
+If you're using the `MarkdownEditor` (loaded through `LazyMarkdownEditor`), you need to import the required CSS files globally in your application (e.g., in your root layout or main entry point):
 
 ```tsx
 import '@uiw/react-markdown-preview/markdown.css';
@@ -172,7 +172,7 @@ The library uses CSS custom properties for comprehensive theming. Override these
 }
 ```
 
-Full list of variables is available [here](tailwind.config.js)
+Full list of variables is available [here](src/styles/theme.scss)
 
 Corner radii of the 2.0 controls are themable the same way. Each defaults to the
 fully rounded pill the buttons ship with, so setting nothing keeps the stock
@@ -270,6 +270,8 @@ breaking change and goes through the migration-guide process.
 | `skeleton`      | `dial-kit-skeleton`       | The root of a `Skeleton`                                                                 |
 | `notification`  | `dial-kit-notification`   | The `Notification` surface, including every toast and section-message wrapper             |
 | `noDataContent` | `dial-kit-no-data-content` | The empty-state root of `NoDataContent`                                                 |
+| `stateScreen`   | `dial-kit-state-screen`   | The `section` root of a `StateScreen`                                                    |
+| `liveRegion`    | `dial-kit-live-region`    | The always-mounted wrapper of a `LiveRegion`, or of an `announce`d `CaptionText` / `ErrorText` |
 | `transferQueue` | `dial-kit-transfer-queue` | The `role="status"` panel of a `TransferQueue`: header, rows and aggregate bar           |
 
 #### Text
@@ -280,16 +282,24 @@ breaking change and goes through the migration-guide process.
 | `captionText`   | `dial-kit-caption-text`   | The caption line under a field                                      |
 | `errorText`     | `dial-kit-error-text`     | A caption in its error variant, additive to `captionText`           |
 | `label`         | `dial-kit-label`          | The `Label` root, wrapping its `label` element and its info button   |
+| `labelledText`  | `dial-kit-labelled-text`  | The root of a `LabelledText`, wrapping its caption and value    |
 
 #### Containers
 
 | Key                  | Class                             | Element                                                              |
 | -------------------- | --------------------------------- | -------------------------------------------------------------------- |
+| `steps`              | `dial-kit-steps`                  | The `ol` root of a `Steps`                                           |
 | `cardShell`          | `dial-kit-card-shell`             | The `article` element of a `CardShell`                               |
+| `analyticsCard`      | `dial-kit-analytics-card`         | The root of an `AnalyticsCard`                                       |
+| `analyticsBar`       | `dial-kit-analytics-bar`          | The root of an `AnalyticsBar`, stacked or inline                     |
+| `analyticsBarGroup`  | `dial-kit-analytics-bar-group`    | The root of an `AnalyticsBarGroup`, which is its accordion           |
+| `analyticsHistogram` | `dial-kit-analytics-histogram`    | The root of an `AnalyticsHistogram`                                  |
 | `collapsibleSidebar` | `dial-kit-collapsible-sidebar`    | The `aside` element of a `CollapsibleSidebar`                        |
 | `resizableContainer` | `dial-kit-resizable-container`    | The content box inside a `ResizableContainer`'s resize frame         |
+| `resizeHandle`       | `dial-kit-resize-handle`          | The `role="separator"` element of a `ResizeHandle`                    |
 | `popup`              | `dial-kit-popup`                  | The `role="dialog"` panel of a `Popup`                               |
 | `bottomSheet`        | `dial-kit-bottom-sheet`           | The `role="dialog"` panel of a `BottomSheet`                         |
+| `bottomSheetOverlay` | `dial-kit-bottom-sheet-overlay`   | The backdrop of a `BottomSheet`, which holds the panel               |
 | `sideDrawer`         | `dial-kit-side-drawer`            | The `role="dialog"` panel of a `SideDrawer`, open or closed          |
 | `confirmationPopup`  | `dial-kit-confirmation-popup`     | A `ConfirmationPopup`'s panel, additive to `popup`                   |
 | `accordion`          | `dial-kit-accordion`              | The root of an `Accordion`                                           |
@@ -303,10 +313,9 @@ breaking change and goes through the migration-guide process.
 | ------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------ |
 | `dropdown`          | `dial-kit-dropdown`               | The trigger wrapper of a `Dropdown`                                                              |
 | `dropdownList`      | `dial-kit-dropdown-list`          | The `role="none"` item list inside a dropdown overlay, and a submenu's own list. Both generations |
+| `dropdownSearch`    | `dial-kit-dropdown-search`        | The search row above the item list of a `searchable` `Dropdown`                                  |
 | `menuItem`          | `dial-kit-menuitem`               | One overlay row: a dropdown item, a `Select` option, a submenu trigger or child                   |
 | `menuItemCheck`     | `dial-kit-menuitem-check`         | The trailing check of a chosen `MenuItemMark.Check` row                                          |
-| `dropdownIcon`      | `dial-kit-dropdown-icon`          | The primary icon of a `DialDropdownIcon` trigger                                                 |
-| `dropdownIconCaret` | `dial-kit-dropdown-icon-caret`    | Its caret badge. Absent when `showCaret` is `false`                                              |
 | `tooltip`           | `dial-kit-tooltip`                | The bubble of a `Tooltip`                                                                        |
 | `interactiveTooltip` | `dial-kit-interactive-tooltip`   | The panel of an `InteractiveTooltip`                                                             |
 | `ellipsisTooltip`   | `dial-kit-ellipsis-tooltip`       | The text element of an `EllipsisTooltip`, which is also its trigger                              |
@@ -333,6 +342,8 @@ breaking change and goes through the migration-guide process.
 | `badge`                | `dial-kit-badge`                      | The root of a `Badge`: the label box, with its icon when it has one |
 | `avatar`               | `dial-kit-avatar`                     | The root of an `Avatar`: the image, or the initials box that replaces it |
 | `entityIdentity`         | `dial-kit-entity-identity`              | The root row of an `EntityIdentity`: icon, type label, name and version |
+| `selectedEntityCard`   | `dial-kit-selected-entity-card`       | The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error |
+| `formSection`          | `dial-kit-form-section`               | The `section` root of a `FormSection`: heading row, description and content |
 | `radioGroupPopupField` | `dial-kit-radio-group-popup-field`    | The root of a `RadioGroupPopupField`                           |
 
 #### Controls
@@ -354,6 +365,7 @@ breaking change and goes through the migration-guide process.
 | `tag`                  | `dial-kit-tag`                        | A `Tag` pill, including a `TagInput`'s rows                |
 | `filterChips`          | `dial-kit-filter-chips`               | The `role="group"` row of a `FilterChips`; its chips carry `dial-kit-tag` |
 | `toggleIconButton`     | `dial-kit-toggle-icon-button`         | A `ToggleIconButton`, additive to `dial-kit-base-icon-button` |
+| `toggleChip`           | `dial-kit-toggle-chip`                | The `<button aria-pressed>` of a `ToggleChip`              |
 | `closeButton`          | `dial-kit-close-button`               | A `CloseButton`, additive to `dial-kit-base-icon-button`    |
 | `infoButton`           | `dial-kit-info-button`                | An `InfoButton`, additive to `dial-kit-base-icon-button`    |
 | `buttonDropdown`       | `dial-kit-button-dropdown`            | The wrapper of a `ButtonDropdown`                          |
@@ -379,9 +391,8 @@ they render: `ThemeScope` (a `display: contents` wrapper), `MultiSelectTags`
 (`Tag`s), and `TooltipContainer` / `TooltipTrigger`.
 
 Two neighbouring elements are reached through props instead, and keep being: a
-`Dropdown`'s floating panel takes `listClassName`, a `Popup`'s backdrop takes
-`overlayClassName`, and the `DialDropdownIcon` trigger button takes
-`buttonClassName`.
+`Dropdown`'s floating panel takes `listClassName`, and a `Popup`'s backdrop
+takes `overlayClassName`.
 
 ## ♿ Accessibility
 
@@ -420,12 +431,14 @@ not AAA:
 | Standard 2.0 fields (`Input`, `Select`, `RadioGroupPopupField`) | 40px tall | The pointer target spans the full field width but stays 4px short of 44 vertically; the height is a shared form design token, not a per-control choice. `.dial-kit-input` clips its overflow, so the pseudo-element cannot grow the target either |
 | `Tag` remove button | 16×16 rendered | Reaches 24×24 through `dial-kit-minimum-target`; a 44px target would overhang 14px per side and swallow the neighbouring tags of a `TagInput` row |
 | Clickable `Tag` | 32px tall | A 44px target would overhang 6px per side and swallow the neighbouring chips of a filter row; the tag is already wider than 24px on both axes |
+| `ToggleChip` | 32px tall | Same pill as a clickable `Tag`: a 44px target would overhang 6px per side and swallow the neighbouring chips of a toggle row; the chip is already wider than 24px on both axes |
 | `Radio` circle | 20×20 rendered | Reaches 24×24 through `dial-kit-minimum-target`; a 44px target would overhang 12px per side and swallow the adjacent label. Clicking the label selects the radio, so the practical target is wider |
 | `Checkbox` box | 20×20 rendered | Reaches 24×24 through `dial-kit-minimum-target`; a 44px target would overhang 12px per side and swallow the adjacent label. Clicking the label toggles the checkbox, so the practical target is wider |
 | `Slider` track row | 24px tall | The pointer target spans the full track width but is only 24px tall; a 44px row would add 20px of dead space to every form the slider sits in, and the thumb is dragged rather than tapped |
 | `Breadcrumbs` segment link | content | Exempt under the 2.5.5 *Inline* exception — a segment is a text link in a line of text, and expanding it would overlap the segments beside it |
 | `Breadcrumbs` overflow button | 16×16 rendered | Reaches 24×24 through `dial-kit-minimum-target`; a 44px target would overhang 14px per side and swallow the segments on either side of it in an inline trail |
 | `SegmentedControl` segment | 32px tall | Sits 4px from its neighbours inside a 40px track, so a 44px target would overhang 6px per side and swallow the adjacent segments; the segment is already wider than 24px on both axes |
+| `ResizeHandle` | 8px wide pointer strip | The handle has to sit exactly on the panel boundary, so a 44px-wide strip would swallow content on both sides of it — essential to the control. It is a focusable `separator`, so the resize is also available from the keyboard with the arrow keys |
 | `ResizableContainer` resize handle | 10px wide pointer strip | The handle has to sit exactly on the panel boundary, so a 44px-wide strip would swallow content on both sides of it — essential to the control. It is a focusable `separator`, so the resize is also available from the keyboard with the arrow keys |
 
 Give small-variant controls at least 20px of surrounding space if you need to reach
@@ -493,12 +506,12 @@ npm install @epam/ai-dial-ui-kit
 npm install react react-dom
 ```
 
-Add the editor packages only if you use the `@epam/ai-dial-ui-kit/editors`
-subpath. They are optional peers, so `npm install` stays quiet without them, and
-the kit only reaches for them when a `Lazy*` editor actually mounts:
+Add the editor package only if you use the Markdown editor
+(`LazyMarkdownEditor`). It is an optional peer, so `npm install` stays quiet
+without it, and the kit only reaches for it when the editor actually mounts:
 
 ``` bash
-npm install monaco-editor @monaco-editor/react @uiw/react-md-editor
+npm install @uiw/react-md-editor
 ```
 
 2. Import style in the root layout of the project:

package/dist/CHANGELOG.md

@@ -9,16 +9,126 @@ Versions match the git tags on the `development` branch.
 
 ## [0.16.0]
 
+### Breaking Changes
+
+- **`styles.css` — built with Tailwind CSS v4: variant utilities moved into `@layer ui`** — Tailwind v3 emitted every utility with a variant (`hover:`, `focus-visible:`, `disabled:`, `placeholder:`, `before:`, `mobile:`, `md:` …) after the `ui` layer, unlayered; v4 keeps them inside `@layer ui` with the rest. A host's unlayered CSS that used to tie or lose with them on specificity now always wins, and `hover:` applies only on devices that can hover. Base utilities and the kit's `dial-*` classes keep their cascade position.
+  See [migration guide](migration-guides/0.16.0/tailwind-v4-stylesheet.md).
+
+- **`styles.css` — Tailwind v4 preflight and browser baseline** — the stylesheet's preflight reaches every element on the host page, and v4's differs: `input`, `select` and `textarea` get a transparent background and no corner radius, `margin` and `padding` reset on every element, and the `hidden` attribute wins over a display utility. The v3 placeholder colour, the pointer cursor on buttons and the centred `<dialog>` are kept. The stylesheet now targets Safari 16.4+, Chrome 111+ and Firefox 128+. Tailwind v3's output already used native CSS nesting, so for most hosts this changes nothing.
+  See [migration guide](migration-guides/0.16.0/tailwind-v4-stylesheet.md).
+
+- **`DialFileManager` — removed from the kit, use `@epam/ai-dial-react-file-manager`** — the legacy file manager, its `DialFoldersTree`, `DialDestinationFolderPopup`, `FileManagerProvider`, `useFileManagerContext`, `useDialFileManagerTabs`, the `DialFileManagerTabs` / `DialFileManagerActions` / `FileManagerColumnKey` enums, the `NAME_COLUMN` / `SIZE_COLUMN` / `UPDATED_AT_COLUMN` constants, its types, and the `./file-manager` subpath are gone. The file manager is developed in its own package, which exports every one of these names. Keeping a second, older copy in the kit meant two `DialFileManager`s that drifted apart. The file models stay.
+  See [migration guide](migration-guides/0.16.0/legacy-file-manager-removal.md).
+
+- **34 unused 1.0 components and `DialSchemaRenderer` — removed, use their 2.0 counterparts** — `DialAutocompleteInputValue`, `DialButtonDropdown`, `DialCheckbox`, `DialCollapsibleSidebar`, `DialConfirmationPopup`, `DialDraggableItem`, `DialDropdownIcon`, `DialFileIcon`, `DialFileName`, `DialFolderName`, `DialFormItem`, `DialFormPopup`, `DialGrid` (and its date renderer and helpers, also from `./grid`), `DialInputPopup`, `LazyDialJsonEditor`, `LazyDialMarkdownEditor` and `LazyDialMarkdownEditorContainer` (also from `./editors`), `DialNotification`, `DialNumberInput`, `DialPagination`, `DialPasswordInput`, `DialPopup`, `DialRadioButton`, `DialRadioGroup`, `DialRadioGroupPopupField`, `DialResizableContainer`, `DialSearch`, `DialSegmentedControl`, `DialSelect`, `DialSelectField`, `DialSharedEntityIndicator`, `DialSlider`, `DialSwitch`, `DialTagInput`, `DialTextarea` and `DialSchemaRenderer` are gone, with the types and enums only they used (`FormItemOrientation`, `SelectSize`, `SelectVariant`, `SegmentedControlOption`), the `DIAL_KIT_CLASS.dropdownIcon` / `dropdownIconCaret` entries and their `styles.css` rules. Neither DIAL Chat nor the DIAL Admin frontend uses them, and keeping them meant two components for one control. The schema types (`JsonSchema`, `SchemaRendererVariant` …) keep their names. `monaco-editor` and `@monaco-editor/react` are no longer optional peers: only the JSON editor used them.
+  See [migration guide](migration-guides/0.16.0/unused-legacy-components-removal.md).
+
+- **`CaptionText`, `ErrorText` (2.0) — no `role="alert"`** — every caption, including a plain field description, was an assertive live region, so a screen reader interrupted the user with helper text and every validation error, and a host that wrapped `ErrorText` in its own alert region announced the message twice. They are now plain text that a control points at: `Input`, `Textarea`, `Select` and the `SchemaRenderer` fields link their own `error` / `caption` through `aria-describedby` and set `aria-invalid` on an error, as `Slider`, `RadioGroup`, `RadioGroupPopupField` and `FileDropzone` already did. A host that renders `ErrorText` next to its own control links it the same way; a message that must interrupt, such as a failed submit, goes in a `role="alert"` region of the host's. Tests that found these messages with `getByRole('alert')` need another query. The legacy `DialCaptionText` / `DialErrorText` are unchanged. Reported from `ai-dial-chat`.
+  See [migration guide](migration-guides/0.16.0/caption-text-no-alert-role.md).
+
+- **`DialAnalyticsCard`, `DialAnalyticsBar`, `DialAnalyticsBarGroup`, `DialAnalyticsErrorTag`, `DialAnalyticsHistogram`, `DialSteps` — removed from the kit** — the legacy analytics set, its `AnalyticsCardVariant` enum, `DEFAULT_ANALYTICS_BAR_COLOR_MAP`, the `AnalyticsBarColorStop` / `AnalyticsCardCompareItem` types and the 1.0 `DialSteps` are gone. All of them already have 2.0 versions: `AnalyticsCard`, `AnalyticsBar`, `AnalyticsBarGroup` and `AnalyticsHistogram` (#978) and `Steps`; `DialAnalyticsErrorTag` is replaced by a red filled `Badge`. `Step` and `StepStatus` stay.
+  See [migration guide](migration-guides/0.16.0/legacy-analytics-and-steps-removal.md).
+
+### Added
+
+- **`Calendar`, `MarkdownEditor` (2.0) — `ariaDescribedBy`; `MarkdownEditor` — `invalid`** — a host rendering its own `ErrorText` under these controls had nothing to link it with: `Calendar` took `invalid` but no description, and `MarkdownEditor` took neither, so hosts patched the DOM. `Calendar` sets `aria-describedby` on the focusable control — the masked input in `time` mode, which also gets `aria-invalid`, and the popover trigger otherwise. `MarkdownEditor` sets `aria-describedby` and `aria-invalid` on its textarea, and `invalid` draws the card border in the error colour. Reported from pg-ai-chat. Additive.
+
+- **`StateScreen` (2.0) — `announce`** — wraps the screen in a `LiveRegion` of the given politeness, for a state that replaces content the user was working in (a load error, a crash), so hosts no longer wrap it in their own `role="alert"` div. Omitted, the screen renders exactly as before. Reported from pg-ai-chat. Additive.
+
+- **`Notification` (2.0) — `closeAriaLabel`** — the close button was always named "Close notification", so a localised host could not use `closable`. Defaults to the old text, as `Popup` and `BottomSheet` already do. Reported from pg-ai-chat. Additive.
+
+- **`Steps` (2.0) — `Step.disabled`** — blocks entering a step regardless of the statuses before it; the button is disabled and drawn with the 2.0 disable tokens. Reported from pg-ai-chat. Additive.
+
+- **`Dropdown` (2.0) — `overlayRole` (`DropdownOverlayRole.Menu` / `Dialog` / `None`), `overlayAriaLabel`, `overlayAriaLabelledBy`, `returnFocus`** — the floating wrapper was always `role="menu"`, so a `renderOverlay` panel that is not a menu — a usage-limits dialog, an announcements region — sat inside a menu, which is invalid ARIA. `overlayRole={DropdownOverlayRole.Dialog}` renders `role="dialog"` with `aria-haspopup="dialog"` on the trigger, named by `overlayAriaLabelledBy`, `overlayAriaLabel` or, failing both, the trigger; `DropdownOverlayRole.None` renders a role-less wrapper and drops `aria-haspopup`, keeping `aria-expanded` / `aria-controls`, for content that brings its own role. Arrow-key navigation between options now runs for `Menu` only, so a dialog's own text field or listbox keeps its arrow keys. The role applies to `renderOverlay` only; the `items` list stays a menu. Closing the overlay — Escape, a chosen item, the close button — already returned focus to the trigger; `returnFocus={false}` now opts out. The default, `Menu`, renders exactly as before. ai-dial-chat's `UsageLimitsControl` and `AnnouncementsPopover` needed a non-menu panel. Additive.
+
+- **`ToggleChip` (2.0)** — a chip that switches one option on and off on its own, for a row of independent toggles such as the tools a model may call. A native `<button aria-pressed>` drawn as the `TagAppearance.Selectable` filter chip — no fill until on, the accent-alpha fill and a semibold label once on — with `icon` before a `ReactNode` `label`, so a caller can add trailing ON / OFF text; `isSelected` (default `false`) and `onToggle(next)`, named as on `ToggleIconButton`; `disabled` greys it out with the 2.0 disable tokens while keeping its state visible. It has no remove control. `FilterChips` picks one value and `Tag` is a `<span>` with a string label, so neither fit. The root carries `dial-kit-toggle-chip` (`DIAL_KIT_CLASS.toggleChip`). ai-dial-chat's `ToolsChips` hand-rolled these. Additive.
+
+- **`ProgressBar` (2.0) — `role` (`ProgressBarRole.Progressbar` / `Meter`)** — `ProgressBarRole.Meter` renders `role="meter"` for a level inside a range that never completes, such as capacity used or a quota, with the same `aria-valuemin` / `aria-valuemax` / `aria-valuenow` and the caller's `aria-valuetext`; an unlabelled meter is named `Meter` rather than `Progress`. The track and fill are unchanged, with no low / optimum / high colouring. The default, `Progressbar`, renders as before. The native `role` attribute is no longer in `ProgressBarProps`; it was always overwritten. ai-dial-chat's `ProjectCapacityMeter` hand-rolled a `role="meter"` bar. Additive.
+
+- **`Notification` (2.0) — `surface` (`NotificationSurface.Variant` / `Neutral`)** — each variant tied one icon to one coloured surface, so a warning on the neutral sunken layer could not be built from the kit: ai-dial-chat hand-rolled its Scheduled Tasks login banner for exactly that pairing. `surface={NotificationSurface.Neutral}` draws `bg-layer-sunken` with primary text and keeps everything else the variant decides: the icon, its status colour (`text-info`, `text-success`, `text-warning-icon`, `text-error`) and the live-region role, so a neutral warning is still `role="alert"`. The wrappers forward it. The default, `Variant`, renders exactly as before. Additive.
+
+- **Type scale — monospace steps `dial-code-semi-text`, `dial-tiny-code-text`, `dial-tiny-code-semi-text`** — code had one step, 14px / 20px normal, so a JSON key layered `font-semibold` on `dial-code-text` and inline code inside 12px copy set only the mono font family and borrowed `dial-tiny-text` for its size. `dial-code-semi-text` is 14px / 20px semibold, `dial-tiny-code-text` 12px / 16px normal and `dial-tiny-code-semi-text` 12px / 16px semibold, all on the `dial-code-text` mono stack. They join the `mergeClasses` type-scale group and the MCP typography reference. Additive.
+
+- **`LiveRegion` (2.0) and `CaptionText` / `ErrorText` — `announce`** — `LiveRegion` is a live region that is always in the DOM, even with empty `children`, so a screen reader announces the first message put into it; a region mounted together with its text is often read late or not at all. `politeness` (`LiveRegionPoliteness.Polite`, default → `role="status"` + `aria-live="polite"`; `Assertive` → `role="alert"` + `aria-live="assertive"`), `visuallyHidden` (`sr-only`), `atomic` (`aria-atomic`) and `as` (`LiveRegionElement.Div` / `Span` / `P`). An empty, visible region takes no space through `empty:sr-only`, not `display: none`, which some screen readers drop from the accessibility tree. `announce` on `CaptionText` / `ErrorText` renders the caption inside such a region, kept mounted while `text` is empty; `id` and `className` stay on the text element, so `aria-describedby` still resolves. Without `announce` nothing changes. The root carries `dial-kit-live-region` (`DIAL_KIT_CLASS.liveRegion`). ai-dial-chat hand-wrote ~30 always-mounted `role="status"` / `role="alert"` spans after 0.16 took the alert role off `ErrorText`. Additive.
+
+- **`FileName` (2.0) — `icon`** — replaces the type icon with your own, for example to mark a special folder in a tree. The icon's wrapper is `aria-hidden`, the `loading` spinner still takes its place, and the shared badge (part of the type icon) is not drawn, while `sharedLabel` still announces the state. Without `icon` nothing changes.
+
+- **`Grid` (2.0) — `appearance` (`GridAppearance.Default` / `Chat`)** — `GridAppearance.Chat` draws the design's "Chat table": a borderless card with a 12px corner and the MD shadow, 12px of padding on both sides of every header and row cell, a full-width 1px line under the header, dividers between data rows that stop at the cell padding on both sides and sit on the 0.5px `stroke-tertiary` stroke, and hover and selected rows with a 12px corner and no divider. It ignores `wrapperBorder`. The root carries `dial-kit-grid-chat`. ai-dial-chat's usage and catalog tables wrapped the grid in their own card and could not inset the dividers or round the rows without restyling ag-Grid's markup. Additive.
+
+- **`FormSection` (2.0)** — a titled section of a form or a builder column: a heading with an optional action at its inline end, an optional description and the content, in a `section` named by its heading. `variant` (`FormSectionVariant.Row` / `Caption` / `Setting`) sets the type scale; `headingLevel` (2–6, default 3) picks the heading element so the section fits the host's outline. Quick Apps' builder `SectionRow` and the DIAL Loop editor's copy of it were two copies of it. The root carries `dial-kit-form-section` (`DIAL_KIT_CLASS.formSection`). Additive.
+
+- **`SelectedEntityCard` (2.0)** — the card of a form field that holds one selected entity (a model, an agent, a toolset): its `EntityIdentity`, a skeleton while the catalog loads, its raw id when the catalog does not list it, or a placeholder when nothing is selected, with an optional details line and an error under it. Quick Apps' Default model card and the DIAL Loop editor's Model card were two copies of it. Additive.
+
+- **`Tag` (2.0) — `TagAppearance.Bordered`** — the compact value chip of a form field (an allowed host, a variable, an override): 24px tall, a 6px corner, the outlined `Badge`'s `border-tertiary` rim on `bg-layer-sunken` — a `Badge` the user can remove, and the small type scale. The 32px rimless pill vanished on a raised surface, so a form had to restyle the kit's markup to make its values visible. Additive.
+
+- **`EntityIdentity` (2.0) — `showType`** — leaves the type label out, for an identity next to a heading that already names the type (the Model block of a form). Additive.
+
+- **`EntityIdentity` (2.0) — `footer` follows the name** — the footer was pinned to the bottom of the text column with a 4px gap (`mt-auto pt-1`); it now sits right under the name, so a details line reads as part of the identity. A host that relied on the old gap adds its own.
+
+- **`PasswordInput` (2.0) — `isToggleHidden`** — the reveal toggle could only be removed by disabling the field, so a host with nothing to reveal (a stored secret the server never returns) had to hide the button with a CSS selector on the kit's markup. `isToggleHidden` draws no toggle and keeps the value masked while the field stays editable; a reveal switched on before the toggle went away comes back masked. Additive.
+
+- **`Select` (2.0) — `ariaDescribedBy`** — ids of elements that describe the field from outside it, such as an error a form renders under its own label; the field's own `error` / `caption` are linked automatically. Additive.
+
+- **`mergeClasses` — the `dial-*-text` type scale is one conflict group** — a caller's `dial-small-text` passed to a component whose default is `dial-tiny-text` kept both classes, and the step declared later in `typography.scss` won whatever the caller asked for. A later type-scale class now replaces an earlier one, as `w-*` or `px-*` do. The public `dial-kit-*-text` classes are not part of the group. Reported from `ai-dial-chat`.
+
+- **`TransferQueue` (2.0) — determinate progress ring in a row** — an in-progress row always showed the indeterminate `Spinner`, so a host that knew how far a transfer had got could only surface it in the collapsed aggregate bar. A row whose item has a numeric `percent` now shows a 16px ring that fills with it, drawn with the spinner's tokens (secondary track, accent arc), with `role="progressbar"`, `aria-valuenow` and `labels.itemProgressAriaLabel(name)` as its name. A row without `percent` keeps the spinner, and the cancel control still takes the cell on hover and focus. The ring is symmetric and is not mirrored under `dir="rtl"`. Additive. Requested for the file-storage download queue in ai-dial-chat.
+
+- **`Dropdown` (2.0) — `searchable`, a search field above the items** — a host that wanted a menu of actions narrowed by a query had to build it around the menu: a `Search` in `menuHeader` held in place with a sticky wrapper offset against the panel's inset, a `PlainText` row standing in for "no results", its own highlighting of every label, and a height cap that restated the kit's 40px rows and 2px gaps as pixel constants. `searchable` does all of it. The field sits above the item list, which scrolls by itself under it and takes focus on open; typing narrows the items by a case-insensitive substring of a string `label` (`filterItem` replaces the rule), highlights the match through `Highlight`, keeps a whole sub-menu when its own label matches and only its matching children otherwise, and drops a group heading or divider once its group is empty. When nothing matches, `noResultsLabel` is shown and announced by a `role="status"` region that stays mounted. The query clears when the menu closes; `searchValue` / `onSearchChange` control it. `maxVisibleItems` caps the item list at a number of rows, searchable or not. Home and End move the caret in the field instead of the focus in the list. The search row carries `dial-kit-dropdown-search` (`DIAL_KIT_CLASS.dropdownSearch`). Requested from the catalog Create menu of `ai-dial-chat`.
+
+- **`BottomSheet` (2.0) — public class on the backdrop, `dial-kit-bottom-sheet-overlay`** — the panel carried `dial-kit-bottom-sheet`, but the backdrop that holds it had no stable class, so a host that embeds a sheet in its own floating panel and has to lift the whole sheet above that panel's stacking context fell back to `[class*='_backdrop_']` selectors on the hashed module class a wrapping library passes through `overlayClassName`. The backdrop now carries `dial-kit-bottom-sheet-overlay` (`DIAL_KIT_CLASS.bottomSheetOverlay`), after any `overlayClassName`. The class has no declarations, so nothing renders differently. Where the stacking context can be avoided altogether, `portalId` still renders the sheet inside the host's own element. Requested in [ai-dial-chat#9392](https://github.com/epam/ai-dial-chat/issues/9392).
+
+- **`Calendar` (2.0) — `time` mode opens an hour/minute picker, `showTimePicker`** — the `time` field was a bare masked `HH:mm` input, which is easy to mistype and gives no sense of what is valid. A clock button at the field's trailing edge now opens a popover with an hour and a minute column: picking an hour keeps the current minutes (or `00`), picking minutes closes the popover, and ArrowUp / ArrowDown / Home / End move between options. Typing `HH:mm` still works and `onChange` / `onBlur` fire as before, so consumers need no changes, but the field now renders inside a wrapper and shows the button; `showTimePicker={false}` restores the bare field. The `datetime` popover's time field is unchanged. Requested from `ai-dial-chat`.
+
 ### Changed
 
+- **`StarterButton` (2.0) — transparent at rest** — the starter pill no longer fills with `bg-control-neutral` (`#fcfcfc`) at rest: it is transparent with the 1px `border-default` stroke (`--stroke-default`, `#b2c2dd`), and fills only on hover (`bg-control-neutral-hover-muted`, `#e0e6f0`) and press (`bg-control-neutral-active`, `#d1dbea`), as the design specifies. On a surface other than the page background it now shows that surface through. Label, icons, focus ring and disabled state are unchanged.
+
+- **`Input`, `Select` and the other `.dial-kit-input` fields (2.0) — the focus ring is drawn inside the border** — the focus and active ring was an outline outside the field (`outline-offset-0`), so a host that wrapped a field in an `overflow: auto` or `hidden` box with no padding saw it cut off on the sides and bottom. The ring is now offset by `-1px`, so it lies over the 1px border, as the design draws it (a 1px `accent-focus` border, no outer ring), and no ancestor can clip it. An invalid field's ring does the same in the error color. Visual only; no prop changes.
+
+- **`shadow-xs` and `shadow-lg` match the design's shadow scale** — `shadow-xs` was `0 1px 4px` blue alpha-20 over a `0 1px 2px` grey layer; it is now a single `0 0 8px 1px` blue alpha-20 halo, so a pressed button glows evenly instead of dropping down. `shadow-lg` was `0 8px 44px 0`; it is now `1px 10px 25px 12px`, same blue alpha-8. `shadow-sm` and `shadow-md` already matched. `--shadow-xs-2` no longer reaches `shadow-xs` and only colours the resting shadow of solid controls (`dial-kit-control-shadow`). Visual only; no token renamed.
+
+- **`Popup` (2.0) — the title is set in Heading 2** — the header title moves from `dial-h3-text` to `dial-h2-text`, the size the popup design gives it. It also reaches `ConfirmationPopup` and every popup built on `Popup`. Visual only.
+
+- **`Grid` (2.0) — hovered and selected rows lose their top and bottom outline** — 0.15.0 outlined them with an inset `--shadow-xs-1` shadow, which the table-cell design does not draw: a row's state is its fill alone, `--bg-control-accent-alpha-hover-subtle` on hover and `--bg-control-accent-alpha-active-subtle` when selected, both unchanged. Visual only; no prop changes.
+
+- **`NoDataContent` (2.0) — the Patterns 2.0 empty state, with an optional `action`** — the default icon was a 32px document mark over two lines of tiny secondary text, so every host drew its own illustration and sized its own text to match the design. The default is now the empty-state illustration, a 121×97 card holding three placeholder list rows, drawn with the `layer-0`/`layer-1`/`layer-2` fills and the `tertiary` stroke, so it follows the theme. The title is `dial-small-semi-text` in `text-primary`, 24px below the illustration; the description is `dial-small-text` in `text-secondary`, 8px under the title; the text is centred and wraps inside a 16px inline padding. The new `action` prop renders a host-supplied control 16px under the text. A caller's `icon`, `titleClassName` and `descriptionClassName` still apply; a caller that relied on the old `gap-2` spacing or the `text-tertiary` container colour now gets the margins above. `Select` (2.0) now renders its no-options state through `NoDataContent`, so it shows the same illustration and text styles instead of the 1.0 `DialNoDataContent` with a 24px document mark; `emptyStateIcon` still replaces the illustration. The document-mark asset is removed. `Grid`'s no-rows overlay keeps its own icon. Requested in [ai-dial-chat#9476](https://github.com/epam/ai-dial-chat/issues/9476).
+
+- **`shadow-sm` and `shadow-md` — the design's two-layer Shadow SM and Shadow MD** — `--shadow-sm` was one `0 8px 10px 0` layer at 8% accent; it is now `4px 9px 16px 1px` at 6% accent (`--shadow-sm-2`, `#2764D90F`) plus a `0 -2px 4px 2px` halo at 4% accent (`--shadow-sm-1`, `#2764D90A`). No kit component uses `shadow-sm`; the kit ships the utility for the host's side panels. `--shadow-md` was one layer, `0 8px 24px 0` at 6% accent, soft enough that the `TransferQueue` panel barely lifted off the page. It is now the design's Shadow MD: `0 10px 30px 9px` at 6% accent (`--shadow-md-2`, `#2764D90F`) plus a tight `0 0 8px 2px` halo at 4% accent (`--shadow-md-1`, `#2764D90A`). Everything on `shadow-md` follows: `TransferQueue`, `CardShell`, the `Calendar` popover and `CollapsibleSidebar`. A host that themed either old token through `--shadow-sm` / `--shadow-md` keeps its colour on the drop layer; the `-1` / `-2` variables theme each layer. Reported on the upload queue in ai-dial-chat.
+
+- **`TransferQueue` (2.0) — no failed-item count in the header, and no close confirmation once nothing is running** — the header showed a red badge with the number of failed items next to the title; it is gone, and each failed row still carries its own error icon and reason. Closing asked for confirmation whenever an item was in progress or had failed; it now asks only while an item is in progress, since a failed one has nothing left to lose. With rows both running and failed, the confirmation still uses `closeConfirmDescriptionMixed`. `labels.closeConfirmDescriptionFailed` is no longer shown and is deprecated; passing it is harmless. Reported on the upload queue in ai-dial-chat.
+
+- **`Popup`, `ConfirmationPopup` (2.0) — the title is Heading 3** — the popup title was set in `dial-h1-text` (20/28 semibold); the design sets every popup title in Heading 3, `dial-h3-text` (16/24 semibold). `ConfirmationPopup` renders through `Popup` and changes with it. A caller's `titleClassName` still merges on top, so a host that needs the larger title can pass `dial-h1-text` back. Reported on the file manager's Information popup in ai-dial-chat.
+
 - **`Popup` (2.0) — footer buttons split the row evenly on mobile** — below the `mobile` breakpoint (768px), where the popup fills the screen, the trailing `mainButtons` group now spans the footer and each of its buttons takes an equal share, so a Cancel/Confirm pair renders 50/50 and a single button fills the row. `additionalButtons` in the trailing group stretch with it; with `additionalButtonsOnLeft` they keep their natural width. Desktop is unchanged, a caller's `className` on a button still merges on top, and a custom `footer` node is not touched. The props are unchanged. Reported on the mobile dialogs in ai-dial-chat.
 
 - **`Avatar` (2.0) — `color`, with `AVATAR_PALETTE`, `AvatarColor` and `AvatarColorClasses` exported** — the colour pair was derived from `name` alone, so a host that needed every avatar of one kind to share a colour — every row of one entity type in its brand pairing — could only fight the component: a root `className` could at best force the background with `!important` arbitrary values, and the initials' foreground sits on an inner element no root class reaches, where the only prop landing there (`textClassName`) ties with the kit's own class at equal specificity and the winner is decided by stylesheet order. `color` takes an `AvatarColorClasses` pair and replaces both halves of the name-derived pick, background and initials foreground, applied with the component's own class cascade. `AVATAR_PALETTE` is exported as a record keyed by the new `AvatarColor` enum (one key per entry, named after its background token), so a host pins a colour directly — `color={AVATAR_PALETTE[AvatarColor.Violet1]}` — with no `.find` on class-name substrings and no new colour vocabulary; the `AvatarColorClasses` pair type is exported with it. A name that is a locale string no longer reshuffles the colour per translation. Without `color` the deterministic pick is unchanged, and a missing or broken image still falls back to the initials — on the overridden pair. Additive. Requested in [#928](https://github.com/epam/ai-dial-ui-kit/issues/928).
 
+- **`Calendar` (2.0) — `showTimezone` now labels the `datetime` popover's time field too** — the timezone hint appeared only on the `time` mode field, so a `datetime` picker left the entered time-of-day unzoned. The popover footer's time field now shows the same hint at its trailing edge, capped at 60% of the field so it never covers the masked value, and stretches across the row's remaining width while the hint is present; with no hint the footer field keeps its compact fixed width. `time` mode is unchanged, and hosts that do not set `showTimezone` see no change.
+
 ### Fixed
 
+- **`Dropdown` (2.0) — a closed trigger no longer points `aria-controls` at a missing overlay** — the overlay is mounted only while open, but the trigger always carried `aria-controls` with the overlay's id, so while closed it referenced an element that was not in the DOM (axe `aria-valid-attr-value`). A trigger that passed `aria-controls={undefined}` while closed got the kit's id anyway, since `undefined` fell through to it. The attribute is now set only while the overlay is open. Reported from `ai-dial-chat` (the PDF thumbnails toggle).
+
+- **`EntityIdentity` (2.0) — the icon sits on a themable `bg-entity-icon` plate, so dark logos stay visible in a dark theme** — model and vendor logos are often a monochrome dark glyph on a transparent background, and the image was drawn with no background, straight on the dark card. The image now sits on `bg-entity-icon`, which reads `--bg-entity-icon` and falls back to `--bg-layer-sunken`; a dark theme sets `--bg-entity-icon` to a light value to keep such logos legible. A transparent icon now shows the sunken layer behind it until the theme sets the new variable. `Avatar` gains `imageClassName`, applied only while the image is shown, so the plate never overrides the initials' colour pair. Reported in [#971](https://github.com/epam/ai-dial-ui-kit/issues/971).
+
+- **`Dropdown` (2.0) — the menu state is on the trigger, not on its wrapper** — `aria-haspopup`, `aria-expanded` and `aria-controls` sat on the role-less `<span class="dial-kit-dropdown">` around the trigger. ARIA does not allow `aria-expanded` there (axe `aria-allowed-attr`), so a screen reader focused on the icon button heard no open/closed state. When the trigger is a single element and the menu opens on click or hover, the three attributes now land on that element, and any the trigger sets itself win (`Select` keeps `aria-haspopup="listbox"`). A text or multi-node trigger, and a context-menu-only trigger such as a `Grid` cell, keep them on the wrapper as before. A test that located the wrapper by `[aria-haspopup="menu"]` now finds the trigger element. Reported from an Accessibility Insights FastPass of ai-dial-chat (31 instances).
+
+- **`Radio`, `Checkbox`, `Switch` (2.0) — hovering the label text shows the control's hover state** — the hover colour was on the control's own `<label>` only, so pointing at the text, which also toggles the control, gave no feedback until the pointer reached the 20px circle, box or track. Each component's root is now a `group/choice`, and the control shows its hover state while either of its two labels is hovered (`group-has-[label:hover]/choice:`). Pointing at the empty part of the row or at the label's info button does not count. A disabled `Radio` no longer picks up the hover background. The decorative `CheckboxBox` used inside menu rows keeps reacting to its own hover, since the row owns that interaction. Reported on the toolset editor's Protocol radios in ai-dial-chat.
+
+- **`FolderPath` (2.0) — a collapsed path shows the full path in a tooltip instead of a click menu** — a path of more than three segments collapsed its middle into a `…` button inherited from `DialBreadcrumb` that opened a dropdown of the hidden segments on click. In a read-only path every item in it was disabled, the menu listed only the hidden part, and inside a clickable card (the catalog card) the click also opened the card. The `…` is now plain, non-interactive text: hovering it shows the full path as `Shared > Team > Sub > Reports` in a `Tooltip`, and the hidden segments stay in the accessible text. The props and the public class are unchanged. Reported on the catalog cards in ai-dial-chat.
+
+- **`FolderPath` (2.0) — the leaf folder keeps its width longest** — segments were capped at fixed shares of the row (a middle folder at 30%, the leaf at 51% and 300px), so a long leaf truncated even with room to spare and every folder ended up cut to a few unreadable letters. Now the leaf keeps its natural width; the folder before it gives up width first, down to about one character; and if the leaf still does not fit, that folder joins the `…` (with the full path in its tooltip). Only after that does the leaf truncate. The first folder keeps its width, as before.
+
+- **`ConfirmationPopup` (2.0) — Cancel/Confirm split the row evenly on mobile** — the `Popup` mobile footer split did not reach `ConfirmationPopup`, which renders its own footer. Below the `mobile` breakpoint (768px) its Cancel and Confirm buttons now take an equal share of the row. Desktop is unchanged, `confirmClassName` still merges on top, and a caller's `footer` is not touched. Reported on the log-out confirmation in ai-dial-chat.
+
+- **Package — test declarations no longer published** — `dist/` carried 36 `.d.ts` files for specs, tests and mocks (`*.spec.ts`, `*.test.tsx`, `__tests__/`, `__mocks__/`), because the declaration build excluded only `*.spec.tsx` and stories. They are no longer emitted; the declarations `package.json` `exports` points to are unchanged.
+
 - **`MarkdownEditor` (2.0) — toolbar no longer overflows on narrow cards** — on a phone-width card the formatting group did not wrap, so its last buttons ran past the card edge and the edit/preview/fullscreen group dropped onto a second line at the start. The formatting group now wraps inside the card and the mode group stays at the inline end. Wide toolbars are unchanged ([ai-dial-chat#9389](https://github.com/epam/ai-dial-chat/issues/9389)).
 
+- **`Spinner` (2.0), `DialLoader` — spin again** — both carry `animate-spin-steps`, a spin in eight discrete steps, but the stylesheet has had no rule for it since 0.13.0: a second `animation` key in the Tailwind config replaced the first, so the indicator rendered as a still ring. The class is generated again.
+
+- **`bg-info` / `bg-success` — 2.0 fallback colours** — the deprecated 1.0 background set redefined both keys with its own fallback, and won, so without a host theme they rendered `#D6E2F9` / `#D9F0F1` instead of the 2.0 `#E1EAF9` / `#DBF1EB`. The duplicates are removed. A theme that sets `--bg-info` / `--bg-success` sees no change; without one, `Notification` (1.0 and 2.0), the 1.0 analytics cards and the 1.0 `DialGrid`'s new and changed rows get the 2.0 shade.
+
 ## [0.15.0]
 
 ### Breaking Changes