@epam/ai-dial-ui-kit 0.16.0-dev.5 → 0.16.0-dev.50

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,7 @@ 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`                                                    |
 | `transferQueue` | `dial-kit-transfer-queue` | The `role="status"` panel of a `TransferQueue`: header, rows and aggregate bar           |
 
 #### Text
@@ -280,16 +281,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 +312,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 +341,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
@@ -379,9 +389,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
 
@@ -426,6 +435,7 @@ not AAA:
 | `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 +503,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,15 +9,97 @@ 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
+
+- **`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
 
+- **`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
 
+- **`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]