@epam/ai-dial-ui-kit 0.14.0-dev.30 → 0.14.0-dev.33

package/dist/CHANGELOG.md

@@ -35,6 +35,8 @@ Versions match the git tags on the `development` branch.
 - **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
 
@@ -42,6 +44,8 @@ Versions match the git tags on the `development` branch.
 - **`--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
 
@@ -60,6 +64,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]