@epam/ai-dial-ui-kit 0.14.0-dev.9 → 0.15.0-dev.1

package/README.md

@@ -173,6 +173,25 @@ The library uses CSS custom properties for comprehensive theming. Override these
 
 Full list of variables is available [here](tailwind.config.js)
 
+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
+look:
+
+```css
+:root {
+  --radius-control: 12px; /* Button at standard and large size */
+  --radius-control-small: 8px; /* Button at ElementSize.Small */
+  --radius-control-icon: 9999px; /* IconButton, ToggleIconButton — any size */
+}
+```
+
+Labelled and icon-only buttons read separate variables on purpose: a design that
+wants squarer action buttons usually still wants its icon buttons round.
+
+These are defaults, not overrides: a `rounded-*` utility passed to a single
+control through `className` still wins, because a consumer's utilities are
+emitted after this package's stylesheet.
+
 ## ♿ Accessibility
 
 ### Naming icon-only controls
@@ -214,6 +233,7 @@ not AAA:
 | `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 |
 | `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 |
+| `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
 AAA in a specific layout, or use the standard size instead.
@@ -272,11 +292,20 @@ Storybook provides:
 <details>
 <summary>Next.js Integration</summary>
 
-1. Install the package and peer dependencies that are not currently in your project
+1. Install the package. React is the only peer you have to supply — everything
+   the kit renders with, it installs itself.
+
 ``` bash
 npm install @epam/ai-dial-ui-kit
-npm install react react-dom  @tabler/icons-react classnames
-npm install @floating-ui/react monaco-editor @monaco-editor/react
+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:
+
+``` bash
+npm install monaco-editor @monaco-editor/react @uiw/react-md-editor
 ```
 
 2. Import style in the root layout of the project:

package/dist/CHANGELOG.md

@@ -24,27 +24,37 @@ Versions match the git tags on the `development` branch.
 - **`Button` and `IconButton` (2.0) — `tooltipProps` is the 2.0 `Tooltip`'s props** — both were still wrapping the 1.0 `DialTooltip`, so a 2.0 button revealed its tooltip in the 1.0 bubble. They now wrap the 2.0 `Tooltip` with `asChild`, which also moves the tooltip's `aria-describedby` from a wrapper `<span>` onto the button itself. `placement` takes the four-sided `TooltipPlacement` enum instead of the full floating-ui `Placement`, so an aligned value such as `'top-start'` no longer compiles, and the trigger `<span>` is gone: a `triggerClassName` now lands on the button, where the classes that used to centre or truncate the wrapper are redundant.
   See [migration guide](migration-guides/0.14.0/button-tooltip-2-0.md).
 
-- **Shadow variables renamed per step, and `shadow-md` / `shadow-lg` are one blue layer** — the scale was themed through `--shadow-blue-500` and `--shadow-grey-1000`, so one value carried the blue of all four steps and a theme could not darken `lg` without darkening `xs` by the same amount. Each step now reads its own variable, named after the step instead of the hue: `--shadow-xs-sm-1` / `--shadow-xs-sm-2` for the two layers `xs` and `sm` share, and `--shadow-md` / `--shadow-lg` for the single layer those steps now draw. The old names are **not** in the fallback chain, since one variable cannot map onto four without re-flattening the ramp. `shadow-md` is `0 8px 24px` at blue-500 alpha-4 and `shadow-lg` is `0 8px 44px` at blue-500 alpha-8, both without the grey layer, so `Card`, `Calendar`, `Input`, overlays, tooltips, the collapsible sidebar, `Notification` and card hover all sit lower and softer; in `xs` and `sm` the blue is now the wide layer and the grey the tight one, the reverse of 0.13.0. The `shadow-*` class names are unchanged, and the variable names match `tailwind.config.js` in `ai-dial-chat`.
+- **Shadow scale rebuilt per step, and `shadow-sm` is now the side-panel shadow** — the scale was themed through `--shadow-blue-500` and `--shadow-grey-1000`, so one value carried the blue of all four steps and a theme could not darken `lg` without darkening `xs` by the same amount. Each step now reads its own variable, named after the step instead of the hue: `--shadow-sm`, `--shadow-md` and `--shadow-lg` for the single blue layer those steps draw, and `--shadow-xs-1` / `--shadow-xs-2` for the two layers `xs` draws. The old names are **not** in the fallback chain, since one variable cannot map onto four without re-flattening the ramp. `sm` also changed meaning: it is `0 8px 10px` at blue-500 alpha-8 and belongs to the side bar, the side panel and the right panel, while the resting shadow of a solid button, the FAB and the slider thumb keeps exactly what it rendered before under the new `dial-kit-control-shadow` class — that value has no step in the design scale any more, so it is written out in `buttons.scss` rather than taking a fifth `boxShadow` key, and a `shadow-sm` left on a control gets the panel shadow instead. `shadow-md` is `0 8px 24px` at blue-500 alpha-6 and `shadow-lg` is `0 8px 44px` at blue-500 alpha-8, both without the grey layer, so `Card`, `Calendar`, `Input`, overlays, tooltips, the collapsible sidebar, `Notification` and card hover all sit lower and softer; in `xs` the blue is now the wide layer and the grey the tight one, the reverse of 0.13.0. The variable names match `tailwind.config.js` in `ai-dial-chat`.
   See [migration guide](migration-guides/0.14.0/shadow-token-per-step-rename.md).
 
 ### Changed
 
+- **The kit installs what it renders with — `react` and `react-dom` are the only required peers** — `@floating-ui/react`, `classnames` and `@tabler/icons-react` were required peers, so every host had to add three packages it never imports to its own `package.json` just to satisfy the peer graph; all three are eagerly reachable from every entry point, so they are now `dependencies` of the kit. The editor packages go the other way: `@monaco-editor/react`, `monaco-editor` and `@uiw/react-md-editor` are reachable only behind the `Lazy*` wrappers the `./editors` subpath exports, so they become **optional** peers — `npm install` stays quiet without them, and you add them only if you mount an editor. `@uiw/react-markdown-preview` is dropped from the peer list entirely: nothing in the kit imports it, and `@uiw/react-md-editor` already depends on it. Nothing changes for a host that keeps its current `package.json`; the point is that it can now delete four to six entries from it. See [issue #8719](https://github.com/epam/ai-dial-chat/issues/8719) for the embedding-host report this came from.
 - **The accent gradient is themed through `--bg-gradient-*` / `--stroke-gradient-*`** — the gradient stops were addressed by their position in one specific gradient (`--bg-control-accent-gradient-hover-from`), so the same colour had a different variable name in every gradient that used it. Each stop is now a numbered token (`--bg-gradient-1`, `--bg-gradient-2-hover`, `--stroke-gradient-1`, …). The `--bg-control-accent-gradient-*` names stay in the fallback chain; the `--stroke-control-accent-gradient-*` names behind the selected tab's underline do **not**, so a theme that sets those must rename them (see the migration guide).
 - **Renamed control variables keep their old names as fallbacks** — every token renamed in this release resolves through its 0.13.0 variable before reaching the light default (e.g. `var(--text-control-disable-primary, var(--text-control-disable-alpha, #848E9C))`). Only the Tailwind class names are breaking; a host themed by the DIAL themes service needs no theme change to keep its colours.
 
 - **2.0 components compose 2.0 tooltips** — `Popup`'s clipped title, `Input`'s disabled-field readout, `Highlight`, and the option labels of `Select` and its submenus were still built on `DialTooltip` / `DialEllipsisTooltip`, so a 2.0 surface revealed its text in the 1.0 bubble. They now use the 2.0 `Tooltip` / `EllipsisTooltip`: the inverted `bg-control-inverted` bubble with an arrow, and no element rendered at all when there is nothing to show. The popup title passes `triggerClassName="truncate"` because the 2.0 trigger no longer forces it. No props change.
 - **Overlay rows follow the multiselect-list-item spec** — a selected row and a hovered row shared one tint (`control-accent-alpha-hover`), so a selected row lit up identically whether or not the pointer was on it, and a disabled row lit up too, since the hover rule applied to every row. Selected now takes the faint `control-accent-alpha` step at rest, hover keeps `control-accent-alpha-hover` for selected and unselected alike, and a disabled row drops both tints and moves from `text-secondary` to `text-control-disable-primary`. `Dropdown` and `Select` both read these from `constants/overlay`, so the whole 2.0 overlay family moves together.
 - **`Select` composes the 2.0 `Checkbox` and `Tag`** — the multi-select options and the Select All row were 1.0 `DialCheckbox` (an 18px box on `before:` pseudo-borders) and the field's selection was rendered with 1.0 `DialTag`. Both are now their 2.0 counterparts, so an option gets the 20px box with the accent fill and the real `indeterminate` DOM property that Select All's mixed state needs to be drawn as mixed, and each tag is the 24px 2.0 pill whose remove button is named after the tag it removes ("Remove Option 1") instead of being reachable only by position. No props change.
+- **`Select` (2.0) — the chosen option is tinted, not checked** — the option list marked its selection with a trailing check, which is how the design marks a _menu_ row; a select list tints the row instead, and the two are drawn differently on purpose. The single-select row now takes the faint `control-accent-alpha` step at rest and carries no glyph, matching the multiselect row it sits beside. `selectedOptionMark` puts the check back (`MenuItemMark.Check`) or swaps in the navigation highlight (`MenuItemMark.Highlight`) for a list that reads as navigation. Nothing else changes: `aria-selected` still carries the state.
+- **`Select` (2.0) — the options scroll at 344px, and the search row stays put** — the overlay capped the whole panel at 352px and dropped the cap entirely once `searchable` was on, so a long searchable list grew to the height of the viewport and its search row scrolled away with the options. The options are now their own scroll box at the design's maximum list length of 344px, with the header, the search row and Select All outside it; the panel keeps its cap on the available viewport height for a screen too short even for that.
 
 ### Fixed
 
+- **An optional editor peer broke the build of every consumer that did not install it** — this release moved `@monaco-editor/react`, `monaco-editor` and `@uiw/react-md-editor` to optional peers, so `npm install` stops bringing them in; but `JsonEditor` still reached `Editor` and the 2.0 markdown toolbar still reached its command set through **named** imports. A named import of a package that is not installed is a build error, not a runtime one: the root entry re-exports `LazyDialJsonEditor`/`LazyMarkdownEditor`, a bundler resolves a dynamic import target to chunk it, and Vite's stub for the absent optional peer exports nothing — so a host that installed nothing but this kit and React got `[MISSING_EXPORT] "Editor" is not exported by "__vite-optional-peer-dep:@monaco-editor/react:@epam/ai-dial-ui-kit"` and no bundle. Both modules now read their bindings off a namespace import, inside the render/getter that needs them, so nothing resolves by name at build time and a missing engine surfaces where it belongs: on the consumer that renders an editor without installing it. Types stay named — they are erased before any bundler sees them. Nothing changes for a host that installs the editor peers.
+- **`DialAnalyticsBarGroup` — compare-mode hover now highlights both bars of an entry as one block** — click already targeted the whole entry (label, delta, both bars), but hover used CSS `:hover` on each bar's own container, so only the bar under the pointer lit up (and a per-bar fill left a gap between the pair). The compare entry wrapper is now a Tailwind `group`; when `onBarClick` is set the shared bars container gets a default `group-hover` / `group-focus-visible` accent fill, and in compare mode `barClassName` applies to that container so consumers can use `group-hover:` for a continuous pair highlight. Single-bar mode is unchanged.
+- **`Tooltip` (2.0) and `DialTooltip` — no tooltip anywhere in an app embedded below 640px, mouse or not** — both bubbles asked `useIsMobileScreen()`, a `window.innerWidth < 640` test, and rendered `null` when it was true. Width is the wrong question: an app running inside an iframe reads the _iframe's_ width, so a chat in a 380px overlay panel lost every tooltip it had — the agent name on a conversation row included — while the desktop mouse hovering it worked exactly as before. The gate is now the `(hover: none)` media query, via the new internal `useHasHover`: a touch-only phone still gets nothing, since nothing there can reveal a hover-only bubble, and a narrow embed driven by a pointer gets its tooltips back. A hybrid device that gains or loses a hovering pointer re-evaluates without a reload, and an environment that cannot answer the question at all (SSR, or no `matchMedia`) counts as hover-capable, so a tooltip is never dropped on a guess. `(pointer: coarse)` is deliberately not part of the query — a touchscreen laptop on a mouse hovers fine. Tooltips remain unusable by touch, so a control still must not depend on one for its accessible name.
+- **`Grid` (2.0) — an `additionalGridOptions.rowSelection` put a second checkbox column on every row** — the grid draws its own selection column and switches ag-Grid's inputs off through `checkboxes` and `headerCheckbox`, but it passed `rowSelection` to ag-Grid _before_ spreading `additionalGridOptions`, so a consumer supplying that key at all replaced the whole object. Both flags default back to `true` for `multiRow`, and ag-Grid drew a full selection column of its own beside the grid's. `rowSelection` is now pulled out of `additionalGridOptions` and merged, the way `defaultColDef` already was: a consumer contributes `isRowSelectable` and the rest, while `mode`, `checkboxes` and `headerCheckbox` stay with `selectionMode` — which is what decides whether the column draws checkboxes or radios. Without a `selectionMode` there is no selection column, so a consumer's `rowSelection` still reaches ag-Grid untouched.
 - **`--stroke-primary` and `--stroke-info` light defaults matched their comments, not their tokens** — `--stroke-primary` fell back to `#6B7280`, Tailwind's own `gray-500`, while every other grey-800 token in the kit is `#57647A`; `--stroke-info` fell back to `#124ACE` where blue-500 is `#1D4ED8`. Both now match the palette. Hosts that define the variables are unaffected.
 - **The selected tab's hover underline ended on a violet no other control used** — the hover gradient's second stop was `#956CFA`, while the button hover gradient ends on `#885DF2`. Both now end on `#885DF2`, so a tab and a primary button lit by the same hover read as the same gradient.
 - **`Switch` had no hover state, and its disabled knob asked for a token that does not exist** — the track carried no `hover:` rule at all, and the disabled knob used `bg-controls-disable-secondary`, which is absent from the Tailwind scale, so Tailwind emitted no rule and the knob rendered with no background. The track now lightens to `control-neutral-hover-strong` when off and `control-accent-hover` when on; both disabled tracks take the light `control-disable-primary` instead of sharing the dark grey-450 of the enabled off state, and the knob takes `control-disable-secondary`. The disabled label moves from `text-secondary` to `text-control-disable-primary`, the token the rest of 2.0 already uses for disabled text.
+- **`Dropdown` (2.0) — a disabled submenu row was the wrong grey** — the icon, label and caret of a disabled submenu trigger and of every disabled submenu child were painted `text-secondary` (grey-800), the colour of ordinary secondary text, while the disabled rows of the root menu use `text-control-disable-primary` (grey-600) like the rest of 2.0. A disabled row inside a submenu therefore read as enabled next to one outside it. All five places now use the disable token.
+- **`Dropdown` and `Select` (2.0) — a submenu trigger went flat once the pointer left it** — the row that opens a nested panel was tinted only while hovered, so moving the pointer into the panel it opened dropped the tint and lost the trail back to the row the panel belongs to. It now stays tinted for as long as its panel is open, off the `aria-expanded` it already sets.
 
 ### Added
 
-- **`Tooltip` (2.0)** — the generation 2.0 counterpart of `DialTooltip`: a hover- and focus-triggered bubble on the inverted control surface (`bg-control-inverted`, 8px radius, `dial-small-text`) with an arrow pointing back at the trigger. `placement` takes the four-sided `TooltipPlacement` enum the design defines rather than the full floating-ui `Placement`, and the side it resolves to after flipping is exposed as `data-placement`. The new `asChild` renders the child as the trigger, which puts the tooltip's `aria-describedby` on the control itself instead of on a wrapper `<span>` — the only way the text reaches assistive technology. The trigger is no longer forced to `truncate`, and a suppressed or empty tooltip renders no content element at all rather than a hidden one. As in 1.0 nothing renders on mobile screens, so a tooltip still cannot be a control's only accessible name. `TooltipContainer`, `TooltipTrigger` and `TooltipContent` are exported for custom composition.
+- **Typography — italic text scale** — `dial-italic-text` adds an 18px/22px normal italic serif style for mathematical and formula symbols such as `fx`; `dial-small-italic-text`, `dial-tiny-italic-text`, and `dial-caption-italic-text` provide matching 14px/20px, 12px/16px, and 10px/12px variants.
+- **`Tooltip` (2.0)** — the generation 2.0 counterpart of `DialTooltip`: a hover- and focus-triggered bubble on the inverted control surface (`bg-control-inverted`, 8px radius, `dial-small-text`, `shadow-xs`) with an arrow pointing back at the trigger. `placement` takes the four-sided `TooltipPlacement` enum the design defines rather than the full floating-ui `Placement`, and the side it resolves to after flipping is exposed as `data-placement`. The new `asChild` renders the child as the trigger, which puts the tooltip's `aria-describedby` on the control itself instead of on a wrapper `<span>` — the only way the text reaches assistive technology. The trigger is no longer forced to `truncate`, and a suppressed or empty tooltip renders no content element at all rather than a hidden one. As in 1.0 nothing renders on mobile screens, so a tooltip still cannot be a control's only accessible name. `TooltipContainer`, `TooltipTrigger` and `TooltipContent` are exported for custom composition.
 - **`EllipsisTooltip` (2.0)** — the generation 2.0 counterpart of `DialEllipsisTooltip`, built on the 2.0 `Tooltip`, so clipped text reveals itself in the inverted bubble instead of the 1.0 one. Text that fits now renders no tooltip element at all, where 1.0 portaled one and hid it with a class, and `customTooltipContent` appears only while the text is clipped — which is what its documentation always described, though the 1.0 code showed it whether or not anything was truncated. `placement` takes the `TooltipPlacement` enum, and the measurement moves into a `useTruncation` hook that re-reads on text change, window resize and any change to the element's own box.
 - **`Notification` (2.0) — `general` variant** — a neutral notification for messages that carry no severity: the sunken surface (`bg-layer-sunken`) with an outlined check icon in primary grey, instead of a coloured surface and a filled status icon. It announces politely (`role="status"`) like `info` and `success`, and ships as `GeneralToastNotification` / `GeneralMessageNotification` alongside the existing wrappers.
 - **`Radio` (2.0)** — a radio button on a native `<input type="radio">`, so radios sharing a `name` get the browser's single tab stop and arrow-key selection without any `role="radiogroup"` wiring. The 20px circle takes `border-default` over `control-neutral` when unselected and a `border-accent` ring around a `control-accent` dot when selected, tinting to `control-accent-alpha-hover` on hover and greying to `control-disable-primary`/`-secondary` when disabled. As in `Switch`, the circle and the label text are sibling `<label for>` elements, so `Label` keeps its own required marker and caption info button.
@@ -59,6 +69,11 @@ Versions match the git tags on the `development` branch.
 - **`Radio` and `Checkbox` reach the 24×24 pointer target** — both controls render at 20px, so they take `dial-kit-minimum-target` for WCAG 2.5.8 (AA) and are listed in the README target-size exception table: a 44px enhanced target would overhang 12px per side and swallow the adjacent label.
 - **`Tag` (2.0) — `TagAppearance.Selectable`** — the selectable tag of the design: no rim and no fill until it is selected, then the faint `control-accent-alpha` step, with one `control-accent-alpha-hover` tint shared by the selected and unselected states, so a selected chip cannot read as hovered at rest. It is a toggle rather than a plain button — the state rides on `aria-pressed`, where the outlined tag leaves the accent tint as its only carrier — and a clickable 20px chip takes `dial-kit-minimum-target` to reach the WCAG 2.5.8 minimum, which the 24px one already clears. The borderless chip keeps a transparent border box so both appearances stand the same height in a mixed row. `appearance` defaults to `TagAppearance.Outlined`, so every existing tag, `TagInput` and `MultiSelectTags` included, is unchanged.
 
+- **`MenuItem` (2.0)** — one row of a floating overlay, extracted from the four places that each drew their own: the dropdown's items, its submenu rows, the select's options and its submenu rows. It owns the Menu-item states of the design — rest, hover, focus, disable — and the ways a chosen row is marked, through the new `MenuItemMark`: a trailing `Check` (how a menu marks its rows, single- and multi-select alike), a `Tint` (how a select list marks its own), a leading `Checkbox` box, or the `Highlight` that gives the current item of a navigation menu an accent label. The row itself is the control; the box and the check are decorative, since the state rides on the `aria-checked` / `aria-selected` the caller sets alongside `role`.
+- **`Dropdown` (2.0) — `DropdownItem.mark`** — marks a chosen row the way the design draws it: `MenuItemMark.Check` for a single choice (announced as `menuitemradio`) or for a multiselect row when paired with `selectable`, which is what keeps the menu open; `MenuItemMark.Highlight` for the current item of a navigation menu, which also sets `aria-current`. `selectable` on its own still means the checkbox row it always did, so no existing menu changes. Submenu children take `mark` too, and a `selectable` child now leaves both panels up instead of closing the whole menu.
+- **`Select` (2.0) — a multiselect list nests** — `SelectOption.children` was only read in single mode, so a multiselect could not group its options at all. A nested list now renders in both modes, with checkbox rows inside the panel when the select is a multiselect, and toggling one leaves both panels open.
+- **`Dropdown` and `Select` (2.0) — `rightControl` on a row** — the design gives a list row a control of its own at its trailing edge (a favourite toggle, a delete button), which nothing in the kit could render: the row _is_ a `<button>`, and a button nested in a button is invalid, swallows the row's click and lands inside its accessible name. A row given `rightControl` is now drawn as the row button and the control side by side inside one wrapper that carries the row's own tint, hover and shape, with the focus ring following the row button through `:has()`. The wrapper is `role="none"`, so a listbox still owns its options. Available per item on `DropdownItem` and per option on `SelectOption`, submenus included.
+
 ---
 
 ## [0.13.0]