@epam/ai-dial-ui-kit 0.16.0-dev.3 → 0.16.0-dev.33

package/README.md

@@ -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
@@ -288,8 +289,10 @@ breaking change and goes through the migration-guide process.
 | `cardShell`          | `dial-kit-card-shell`             | The `article` element of a `CardShell`                               |
 | `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,6 +306,7 @@ 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                                                 |
@@ -426,6 +430,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

package/dist/CHANGELOG.md

@@ -9,11 +9,69 @@ 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. `DialFileName`, `DialFolderName`, `DialFileIcon`, `DialSharedEntityIndicator` and the file models stay.
+  See [migration guide](migration-guides/0.16.0/legacy-file-manager-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).
+
+### Added
+
+- **`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
 
+- **`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) — 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]