@epam/ai-dial-ui-kit 0.15.4 → 0.16.0-dev.11

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

package/dist/CHANGELOG.md

@@ -7,6 +7,39 @@ 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).
+
+### Added
+
+- **`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).
+
+### Changed
+
+- **`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).
+
+### Fixed
+
+- **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
@@ -19,8 +52,6 @@ Versions match the git tags on the `development` branch.
 
 ### Added
 
-- **`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).
-
 - **`InteractiveTooltip` (2.0) — `trigger`, to open the panel by click or tap** — the panel opens on hover or focus and renders nothing on a mobile screen, so a trigger whose only job is to reveal it, such as an info chip, showed nothing on a phone ([ai-dial-chat#9250](https://github.com/epam/ai-dial-chat/issues/9250)). `trigger={InteractiveTooltipTrigger.Click}` opens the panel on a click or tap and keeps it open until a second click on the trigger, a press outside or Escape. It works on every screen size and ignores hover and focus; with a controlled `open` it still reports through `onOpenChange`. The default, `InteractiveTooltipTrigger.Hover`, changes nothing, so the `InteractiveTooltip`s inside `Select` and `Dropdown` and every host that does not pass it are unchanged. Do not use `Click` on a trigger that has its own action, since the same tap would run both. Additive.
 
 - **`AutocompleteTagInput` (2.0) — `openOnFocus`** — focusing or clicking the input opens the list of every suggestion that is not yet a tag, uncapped by `maxSuggestions`, so a short list can be browsed without typing. Nothing is highlighted in that list, so Enter adds nothing the user did not choose; ArrowDown lands on the first suggestion and ArrowUp on the last. The list stays open after a pick, and typing filters and caps it as before. Opt-in; without it nothing changes. Additive.
@@ -75,8 +106,6 @@ Versions match the git tags on the `development` branch.
 
 ### Changed
 
-- **`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.
-
 - **`Slider` (2.0) — ticks** — ticks are drawn in the `Controls/Stroke/Accent-focus` token (`--stroke-accent-focus`, was the neutral control grey), and there is one per step after `min`: a 0–1 slider at 0.1 now draws exactly 10. The tick at `min` was always under the thumb or the fill, so nothing visible is lost. Visual only; no props change.
 
 - **`Grid` (2.0) — a 1px header divider and an accent outline on hovered and selected rows** — the line under the header was on the thin 0.5px stroke like the rows, so the table body did not read as separate from its header; it is now the 1px main stroke, while the rows keep 0.5px. A hovered or selected row is outlined top and bottom with the design system shadow colour `--shadow-xs-1`, drawn as an inset shadow so the row keeps its height, and tinted with the new `--bg-control-accent-alpha-hover-subtle` (hover) and `--bg-control-accent-alpha-active-subtle` (selected) tokens. The line between the header titles and the filter row is removed, and the search fields use an 8px radius. The 1px line under the header was never drawn — ag-Grid's `border-bottom: none` collapsed it to 0 — and now is; column titles are 10px semibold caps, the header dividers are the design's short 12px marks, and the filter inputs use 12px text. Visual only; no prop changes.
@@ -87,8 +116,6 @@ Versions match the git tags on the `development` branch.
 
 ### Fixed
 
-- **`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)).
-
 - **`Textarea` (2.0) — `invalid` no longer reaches the DOM** — the prop was spread onto the `<textarea>`, so React warned about a non-boolean `invalid` attribute on every render. It now only selects the error styling. No visual change.
 
 - **`Dropdown` and `Select` — a submenu closes when its menu or the page scrolls** — a submenu is portalled and repositioned by Floating UI's `autoUpdate`, so scrolling the list that holds its trigger, or the page, left the submenu open and dragged it along after the trigger, even once the trigger had scrolled out of the clipped list. The submenu now closes when an ancestor of its trigger scrolls. Scrolling inside the submenu does not close it. The fix is in the shared submenu hook, so it covers the 2.0 and 1.0 `Dropdown` and `Select` submenus. Reported in [ai-dial-chat#9295](https://github.com/epam/ai-dial-chat/issues/9295), on the catalog's Create menu.