@epam/ai-dial-ui-kit 0.14.0-dev.1 → 0.14.0-dev.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -1
- package/dist/CHANGELOG.md +56 -1
- package/dist/{JsonEditor-v9m_npfK.js → JsonEditor-B-EMx5BY.js} +1 -1
- package/dist/{JsonEditor-pyqbLZZf.cjs → JsonEditor-BAWk7XXc.cjs} +1 -1
- package/dist/{MarkdownEditor-BjqdSHPU.cjs → MarkdownEditor-B4VOwIVY.cjs} +1 -1
- package/dist/{MarkdownEditor-CWZVSR--.js → MarkdownEditor-BJnJ74CN.js} +1 -1
- package/dist/{MarkdownEditor-9aPIyyuu.cjs → MarkdownEditor-BkkQlx9o.cjs} +1 -1
- package/dist/{MarkdownEditor-5UpxUtXf.js → MarkdownEditor-DPlMgApq.js} +1 -1
- package/dist/components-manifest.json +1432 -204
- package/dist/dial-ui-kit.cjs.js +1 -1
- package/dist/dial-ui-kit.es.js +214 -194
- package/dist/{index-DKDaSZqV.js → index-C30-CsGh.js} +13944 -12776
- package/dist/{index-xlqMH2Q1.cjs → index-DL9rE-US.cjs} +31 -31
- package/dist/index.css +2 -2
- package/dist/migration-guides/0.14.0/button-tooltip-2-0.md +111 -0
- package/dist/migration-guides/0.14.0/control-color-token-rename.md +143 -0
- package/dist/migration-guides/0.14.0/focus-border-token-role-naming.md +87 -0
- package/dist/migration-guides/0.14.0/select-multiselect-option-row.md +99 -0
- package/dist/migration-guides/0.14.0/shadow-token-per-step-rename.md +104 -0
- package/dist/migration-guides/0.14.0/tag-single-size.md +121 -0
- package/dist/migration-guides/README.md +6 -0
- package/dist/src/components/New/Button/Button.d.ts +4 -3
- package/dist/src/components/New/Calendar/constants.d.ts +5 -5
- package/dist/src/components/New/Checkbox/Checkbox.d.ts +50 -0
- package/dist/src/components/New/Checkbox/CheckboxBox.d.ts +30 -0
- package/dist/src/components/New/Checkbox/constants.d.ts +10 -0
- package/dist/src/components/New/CollapsibleSidebar/CollapsibleSidebar.d.ts +82 -0
- package/dist/src/components/New/Dropdown/constants.d.ts +3 -1
- package/dist/src/components/New/EllipsisTooltip/EllipsisTooltip.d.ts +51 -0
- package/dist/src/components/New/EllipsisTooltip/use-truncation.d.ts +21 -0
- package/dist/src/components/New/Highlight/Highlight.d.ts +1 -1
- package/dist/src/components/New/IconButton/IconButton.d.ts +4 -4
- package/dist/src/components/New/Input/Button/constants.d.ts +1 -1
- package/dist/src/components/New/Label/Label.d.ts +5 -0
- package/dist/src/components/New/Notification/Notification.d.ts +7 -0
- package/dist/src/components/New/Notification/NotificationWrapper.d.ts +2 -0
- package/dist/src/components/New/Popup/Popup.d.ts +48 -9
- package/dist/src/components/New/Popup/constants.d.ts +7 -0
- package/dist/src/components/New/Radio/Radio.d.ts +48 -0
- package/dist/src/components/New/RadioGroup/RadioGroup.d.ts +78 -0
- package/dist/src/components/New/RadioGroup/constants.d.ts +11 -0
- package/dist/src/components/New/RadioGroupPopupField/RadioGroupPopupField.d.ts +93 -0
- package/dist/src/components/New/RadioGroupPopupField/constants.d.ts +22 -0
- package/dist/src/components/New/ResizableContainer/ConditionalResizableContainer.d.ts +34 -0
- package/dist/src/components/New/ResizableContainer/ResizableContainer.d.ts +76 -0
- package/dist/src/components/New/ResizableContainer/components/ResizeHandle.d.ts +21 -0
- package/dist/src/components/New/SegmentedControl/SegmentedControl.d.ts +54 -0
- package/dist/src/components/New/SegmentedControl/constants.d.ts +16 -0
- package/dist/src/components/New/Select/constants.d.ts +2 -2
- package/dist/src/components/New/Slider/Slider.d.ts +70 -0
- package/dist/src/components/New/Tag/Tag.d.ts +26 -4
- package/dist/src/components/New/Tag/constants.d.ts +23 -0
- package/dist/src/components/New/ToggleIconButton/ToggleIconButton.d.ts +47 -0
- package/dist/src/components/New/Tooltip/Tooltip.d.ts +43 -0
- package/dist/src/components/New/Tooltip/TooltipContainer.d.ts +32 -0
- package/dist/src/components/New/Tooltip/TooltipContent.d.ts +18 -0
- package/dist/src/components/New/Tooltip/TooltipContext.d.ts +115 -0
- package/dist/src/components/New/Tooltip/TooltipTrigger.d.ts +18 -0
- package/dist/src/components/New/Tooltip/constants.d.ts +30 -0
- package/dist/src/components/New/constants/overlay.d.ts +12 -3
- package/dist/src/index.d.ts +34 -1
- package/dist/src/models/dropdown.d.ts +10 -0
- package/dist/src/types/notification.d.ts +2 -1
- package/dist/src/types/tag.d.ts +4 -0
- package/dist/src/types/tooltip.d.ts +6 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -207,8 +207,14 @@ not AAA:
|
|
|
207
207
|
| `ButtonAppearance.Link` | content | Exempt under the 2.5.5 *Inline* exception; expanding it would overlap surrounding copy |
|
|
208
208
|
| `DialCloseButton` | icon-sized | Renders `h-auto w-auto`, so its target follows the caller's icon size |
|
|
209
209
|
| `DialInfoButton`, `InfoButton` | 24×24 | Fixed small affordance, same overlap constraint as small variants |
|
|
210
|
-
| Standard 2.0 fields (`Input`, `Select`) | 40px tall | The pointer target spans the full field width but stays 4px short of 44 vertically; the height is a shared form design token, not a per-control choice |
|
|
210
|
+
| Standard 2.0 fields (`Input`, `Select`, `RadioGroupPopupField`) | 40px tall | The pointer target spans the full field width but stays 4px short of 44 vertically; the height is a shared form design token, not a per-control choice. `.dial-kit-input` clips its overflow, so the pseudo-element cannot grow the target either |
|
|
211
211
|
| `Tag` remove button | 16×16 rendered | Reaches 24×24 through `dial-kit-minimum-target`; a 44px target would overhang 14px per side and swallow the neighbouring tags of a `TagInput` row |
|
|
212
|
+
| Clickable `Tag` | 32px tall | A 44px target would overhang 6px per side and swallow the neighbouring chips of a filter row; the tag is already wider than 24px on both axes |
|
|
213
|
+
| `Radio` circle | 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 selects the radio, so the practical target is wider |
|
|
214
|
+
| `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 |
|
|
215
|
+
| `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 |
|
|
216
|
+
| `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 |
|
|
217
|
+
| `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 |
|
|
212
218
|
|
|
213
219
|
Give small-variant controls at least 20px of surrounding space if you need to reach
|
|
214
220
|
AAA in a specific layout, or use the standard size instead.
|
package/dist/CHANGELOG.md
CHANGED
|
@@ -7,7 +7,61 @@ Versions match the git tags on the `development` branch.
|
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
10
|
-
## [
|
|
10
|
+
## [0.14.0]
|
|
11
|
+
|
|
12
|
+
### Breaking Changes
|
|
13
|
+
|
|
14
|
+
- **`Tag` (2.0) — `size` removed, and no tag draws a rim** — the tag had two heights (24px standard, 20px small) that the design no longer draws, and a 1px border doing work its fill already did. It is now one 32px pill: `rounded-full`, 12px side padding, no `border` in any state, with the outlined chip told apart by its fill on the raised layer and the accent tint carrying hover on every appearance. The selectable chip also takes the rest of its spec — a semibold label once selected, a hover that tints the fill without recolouring the label, and no colour transition, since the design switches the fill instantly. There is no disabled styling left either: the design draws no disabled tag, so `disabled` now only stops the tag responding. `TagInput`, `Select` and `MultiSelectTags` need no call-site changes, but their tags are taller: a small `TagInput` field grows around the tag instead of shrinking it. Drop `size` from every `Tag` (`typecheck` lists them) and re-check any row you gave a fixed height.
|
|
15
|
+
See [migration guide](migration-guides/0.14.0/tag-single-size.md).
|
|
16
|
+
- **Control colour tokens renamed** — the disabled, neutral-hover and accent-hover control tokens were named after their opacity or their literal hue (`-alpha`, `-beta`, `blue`), which said nothing about their role and left no room for a second step in each pair. They are now numbered by role: `control-disable-alpha`/`-beta` → `control-disable-primary`/`-secondary`, `text-control-blue-hover`/`-active` → `text-control-accent-hover`/`-active`, `bg-control-disable` → `bg-control-disable-primary`, and `bg-control-neutral-hover` → `bg-control-neutral-hover-muted` (the new `-strong` step is its darker sibling). The rendered colours are unchanged.
|
|
17
|
+
See [migration guide](migration-guides/0.14.0/control-color-token-rename.md).
|
|
18
|
+
- **Border token `hover-alpha` removed** — it held the same value as `accent-alpha` (`#2764D933`, blue-500 alpha-20) behind a second variable, so the accent border tint had two names and a theme had to set both to stay consistent. The three hover borders that used it (`Input`, `Tag`, `Calendar`) now use `border-accent-alpha`. Replace `border-hover-alpha` with `border-accent-alpha`; if your theme sets `--stroke-hover-alpha`, move that value to `--stroke-accent-alpha`.
|
|
19
|
+
See [migration guide](migration-guides/0.14.0/control-color-token-rename.md).
|
|
20
|
+
- **`Select` — a multi-select option is one control, not an option wrapping a checkbox** — the row was a `role="option"` wrapper around a real `<input type="checkbox">`, so one choice announced two states (`aria-selected` and `aria-checked`), most of the 40px row was inert, and the overlay's arrow keys could not reach it. It is now a single `option` carrying `aria-selected`, with the box drawn as a decorative element: the whole row selects, Enter and Space toggle it, and the arrow keys walk it as they already walked single-select options. No props change; code that addressed an option through `getByRole('checkbox')` has to ask for the `option` instead. Select All is still a real checkbox.
|
|
21
|
+
See [migration guide](migration-guides/0.14.0/select-multiselect-option-row.md).
|
|
22
|
+
- **Border tokens `focus-black` → `focus`, `focus-blue` → `accent-focus`** — 0.13.0 renamed `focus` to `focus-black` to name the token after its value; the focus tokens are now named after their role instead, matching `accent` / `accent-alpha` elsewhere in the border scale. `border-focus` / `outline-focus` / `divide-focus` / `stroke-focus` are back to the names they had in 0.12.x, and `focus-blue` becomes `accent-focus`. Both keep their variables (`--stroke-focus-black`, with `--stroke-focus` still in the fallback chain, and `--stroke-focus-blue`) and their colours.
|
|
23
|
+
See [migration guide](migration-guides/0.14.0/focus-border-token-role-naming.md).
|
|
24
|
+
- **`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.
|
|
25
|
+
See [migration guide](migration-guides/0.14.0/button-tooltip-2-0.md).
|
|
26
|
+
|
|
27
|
+
- **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`.
|
|
28
|
+
See [migration guide](migration-guides/0.14.0/shadow-token-per-step-rename.md).
|
|
29
|
+
|
|
30
|
+
### Changed
|
|
31
|
+
|
|
32
|
+
- **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).
|
|
33
|
+
- **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.
|
|
34
|
+
|
|
35
|
+
- **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.
|
|
36
|
+
- **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.
|
|
37
|
+
- **`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.
|
|
38
|
+
|
|
39
|
+
### Fixed
|
|
40
|
+
|
|
41
|
+
- **`--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.
|
|
42
|
+
- **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.
|
|
43
|
+
- **`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.
|
|
44
|
+
|
|
45
|
+
### Added
|
|
46
|
+
|
|
47
|
+
- **`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.
|
|
48
|
+
- **`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.
|
|
49
|
+
- **`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.
|
|
50
|
+
- **`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.
|
|
51
|
+
- **`Checkbox` (2.0)** — a checkbox on a native input, with the mixed and error states the design defines. `isIndeterminate` takes visual precedence over `isSelected`, announces the control as `mixed`, and sets the native `indeterminate` DOM property that no React prop covers; `invalid` paints the box with `control-error` and sets `aria-invalid` so the failure is announced rather than only shown. Filled states carry the fill alone (`border-transparent`) and lighten to `control-accent-hover` on hover, while the unselected box tints to `control-accent-alpha-hover` behind a `border-accent` rim.
|
|
52
|
+
- **`ToggleIconButton` (2.0)** — an icon button that stays pressed, for a setting the icon itself represents (bookmark, pin, favourite). State rides on `aria-pressed` rather than a swapped accessible name, so it is announced as a toggle and keeps one stable label. It composes the primary ghost `IconButton`, which already supplies the unselected column — secondary-grey icon turning accent on hover, accent-alpha tint on hover and active, grey when disabled — and adds the accent icon at rest plus a `selectedIcon` swap for the filled glyph. Unlike every other 2.0 button it is a rounded square, not a pill, and it wraps the 2.0 `Tooltip` with `asChild` so `aria-describedby` lands on the button rather than a wrapper `<span>`. Defaults to `ElementSize.Small`.
|
|
53
|
+
- **`SegmentedControl` (2.0)** — the generation 2.0 counterpart of `DialSegmentedControl`: pill segments on a sunken track, where the selected one lifts onto the raised surface with `shadow-xs` and an accent icon, and both states tint with accent-alpha on hover and press. It is a `radiogroup` of `radio` segments rather than 1.0's `tablist`/`tab`, which is the accurate role for a control that selects a value instead of revealing a panel; the group is a single tab stop and the arrow keys, `Home` and `End` move the selection, skipping disabled segments. `items` replaces `options` and takes a per-segment `aria-label` so an icon-only segment can still be named, and the group is named with `aria-label` rather than 1.0's `ariaLabel`.
|
|
54
|
+
- **`RadioGroup` (2.0)** — the generation 2.0 counterpart of `DialRadioGroup`: a `radiogroup` of 2.0 `Radio` options under one `Label`, with the group's own `caption` / `error` below them and an item's `content` revealed while that item is selected. `items` replaces `radioButtons` and takes `value` / `label` / `caption` / `content` / `disabled` per option (1.0's `id` / `name`), `value` replaces `activeRadioButton`, and the ten pass-through class props collapse to `optionsClassName`, `radioClassName` and `contentClassName`. The group is named through `aria-labelledby` pointing at the label element itself rather than 1.0's duplicated `aria-label`, so a `Label` caption's info button text stays out of the group's name, and selected content is mounted only while its option is selected instead of rendered and hidden.
|
|
55
|
+
- **`RadioGroupPopupField` (2.0)** — the generation 2.0 counterpart of `DialRadioGroupPopupField`, built from the 2.0 `Popup`, `RadioGroup` and buttons. The collapsed field is a real `<button>` carrying `dial-kit-input`, not 1.0's read-only input inside a button, so the button role, `Enter` / `Space` and the disabled treatment come from the element; it announces its label followed by its current value ("Status, Draft") instead of the fixed `open-popup` label 1.0 gave it. The in-popup selection is now a draft the component holds by default — seeded from `value` on every open, discarded on Cancel, and reported once through `onApply(value)` — so a consumer no longer has to thread `selectedRadioValue` and `onChangeRadioField` through their own state; pass `selectedValue` with `onSelectionChange` when `isValid` has to depend on the live selection.
|
|
56
|
+
- **`Dropdown` (2.0) — multiselect items** — a `DropdownItem` marked `selectable` renders as a multiselect row: a checkbox box before the label, the accent tint while `checked`, `role="menuitemcheckbox"` with the state on `aria-checked`, and a click that leaves the menu open so several rows can be toggled in one visit. Plain items in the same menu still close it on click, so a menu can mix filters with an action. The arrow keys walk the checkbox rows alongside the plain ones. `checked` stays in the caller's state, updated from the item's `onClick` or the menu's `onItemClick`.
|
|
57
|
+
- **`CheckboxBox` (2.0)** — the 20px box a checkbox draws, extracted from `Checkbox` so the two things that need it cannot drift apart. With `htmlFor` it is the `<label for>` that toggles an input, which is how `Checkbox` uses it; without it the box is a decorative `<span>` hidden from assistive technology, which is how a `menuitemcheckbox` row and a multi-select `Select` option use it. `Checkbox` also gains `boxClassName` for the box itself.
|
|
58
|
+
- **`Label` (2.0) — `containerClassName`** — the wrapper holding the `<label>` and its info button was unstylable, so a label used as a flex item could not be allowed to shrink and its text pushed the row wider instead of truncating. `Select`'s multi-select options need exactly that; the new prop applies classes to the wrapper, leaving `className` on the `<label>` as before.
|
|
59
|
+
- **`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.
|
|
60
|
+
- **`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.
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## [0.13.0]
|
|
11
65
|
|
|
12
66
|
### Breaking Changes
|
|
13
67
|
|
|
@@ -28,6 +82,7 @@ Versions match the git tags on the `development` branch.
|
|
|
28
82
|
|
|
29
83
|
### Fixed
|
|
30
84
|
|
|
85
|
+
- **`Dropdown` (2.0) — the overlay never took focus, so nothing inside it was reachable from the keyboard** — the focus manager was pinned to `initialFocus={-1}`, which leaves focus on the trigger. Opening a menu or a popover therefore parked the keyboard user outside it: the items were reachable only by tabbing on past the trigger, and a panel opened by Enter behaved as if nothing had happened ([ai-dial-chat#7936](https://github.com/epam/ai-dial-chat/issues/7936)). Focus now moves to the overlay's first control — the first item, or the first control of a `renderOverlay` panel, falling back to the overlay container when it holds none. A menu opened by hover is the exception and keeps focus where it is, since the pointer being over a trigger says nothing about where the user is typing. The overlay also answers ArrowDown/ArrowUp with wrap-around movement between its `menuitem` / `option` children, and Home/End for the two ends, which a `menu` is expected to do and which neither the item list nor `Select`'s option list did on its own; a key an inner overlay already handled is left to it. `Select`, `InlineSelect`, and `ButtonDropdown` inherit all of this. `DialDropdown` (1.0), `Calendar`, and the sub-menu overlay still pin `initialFocus={-1}` and are unchanged.
|
|
31
86
|
- **`DialPopup` and `Popup` (2.0) — Enter closed the dialog the moment it opened** — the focus manager's default focuses the first tabbable descendant, and in a dialog whose header is a heading plus a close button, that is the close button. Every modal form therefore opened with the × focused, so the first Enter dismissed it instead of submitting ([ai-dial-chat#2579](https://github.com/epam/ai-dial-chat/issues/2579)). Initial focus now goes to the dialog container, which the focus manager marks `tabindex="-1"`: it is not a tab stop, screen readers announce the dialog on open, and Tab still moves to the first real control. `preventKeyboardOnOpen` is unchanged but no longer needed for this — the new default cannot raise the virtual keyboard either.
|
|
32
87
|
- **Focus rings were invisible on hosts still themed with the pre-0.13 token names** — the `focus-black` border token dropped straight to its light default (`#161B2D`) when `--stroke-focus-black` was undefined. Hosts themed by the DIAL themes service still ship the old `--stroke-focus`, so every focus ring built on the token — inputs, buttons, icon buttons, dropdowns, accordion, calendar, slider — was painted `#161B2D`, which is the dark theme's own `--bg-layer-2`: a border drawn in the background colour. The token now falls back through `--stroke-focus` before reaching the light default, so those hosts get their real focus colour again. Light themes and hosts with no theme at all are unchanged.
|
|
33
88
|
- **`DialGrid` — the legacy-token fallback inverted the raised/sunken relationship** — when a host defines the legacy DIAL layers but not `--bg-layer-raised`, the row surface fell back to `--bg-layer-0`, the _deepest_ layer in that palette (`#000000` in the DIAL dark theme), while odd rows fell back to the lighter `--bg-layer-2`. A grid whose base surface sits below its own sunken rows reads as inside-out, and pure black matches no other surface in the theme. The fallback is now `--bg-layer-3`, the elevated layer, which is what consumers already use for their own grid surfaces. The light default when no theme is present is unchanged (`#FCFCFC`).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-DL9rE-US.cjs"),l=require("@monaco-editor/react"),u={[r.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[r.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}},c=({value:n,onChange:t,onValidateJSON:i,options:s,currentTheme:e,themesConfig:d=u})=>{function a(o){o?.editor?.defineTheme(e,d[e]),o.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}return r.jsxRuntimeExports.jsx(l.Editor,{beforeMount:a,height:"100%",defaultLanguage:"json",value:n,onChange:t,theme:e,onValidate:i,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...s??{}}})};exports.DialJsonEditor=c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-DL9rE-US.cjs"),x=require("react"),e=require("@uiw/react-md-editor"),t=require("@tabler/icons-react"),o=s.DIAL_ICON_SIZE.SM,i=(n,r)=>({...n,icon:r}),p=()=>[i(e.bold,s.jsxRuntimeExports.jsx(t.IconBold,{size:o})),i(e.italic,s.jsxRuntimeExports.jsx(t.IconItalic,{size:o})),i(e.strikethrough,s.jsxRuntimeExports.jsx(t.IconStrikethrough,{size:o})),e.divider,e.group([e.heading1,e.heading2,e.heading3],{name:"heading",groupName:"heading",icon:s.jsxRuntimeExports.jsx(t.IconTextSize,{size:o}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),e.divider,i(e.unorderedListCommand,s.jsxRuntimeExports.jsx(t.IconList,{size:o})),i(e.orderedListCommand,s.jsxRuntimeExports.jsx(t.IconListNumbers,{size:o})),e.divider,i(e.quote,s.jsxRuntimeExports.jsx(t.IconQuote,{size:o})),i(e.link,s.jsxRuntimeExports.jsx(t.IconLink,{size:o})),i(e.code,s.jsxRuntimeExports.jsx(t.IconCode,{size:o})),e.divider,i(e.table,s.jsxRuntimeExports.jsx(t.IconTable,{size:o}))],I=()=>[i(e.codeEdit,s.jsxRuntimeExports.jsx(t.IconPencil,{size:o})),i(e.codeLive,s.jsxRuntimeExports.jsx(t.IconLayoutColumns,{size:o})),i(e.codePreview,s.jsxRuntimeExports.jsx(t.IconEye,{size:o})),e.divider,i(e.fullscreen,s.jsxRuntimeExports.jsx(t.IconMaximize,{size:o}))],R=({value:n,onChange:r,height:d=300,theme:c=s.EditorThemes.light,className:a,placeholder:m,defaultPreview:u="edit"})=>{const j=x.useMemo(()=>p(),[]),l=x.useMemo(()=>I(),[]);return s.jsxRuntimeExports.jsx("div",{"data-color-mode":c,className:s.mergeClasses("dial-kit-markdown-editor",a),children:s.jsxRuntimeExports.jsx(e,{value:n,onChange:E=>r?.(E||""),height:d,preview:u,commands:j,extraCommands:l,textareaProps:{placeholder:m}})})};exports.MarkdownEditor=R;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DL9rE-US.cjs"),c=require("@uiw/react-md-editor"),x=({value:t,onChange:s,height:r=300,preview:i="edit",theme:n=e.EditorThemes.dark,className:a,placeholder:o})=>{const d=o!==void 0&&!t;return e.jsxRuntimeExports.jsxs("div",{"data-color-mode":n,className:e.mergeClasses("relative",a),children:[e.jsxRuntimeExports.jsx(c,{value:t,onChange:l=>s?.(l||""),height:r,preview:i}),d&&e.jsxRuntimeExports.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:o})]})};exports.DialMarkdownEditor=x;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { j as e, D as z, E as g, m as u } from "./index-
|
|
1
|
+
import { j as e, D as z, E as g, m as u } from "./index-C30-CsGh.js";
|
|
2
2
|
import { useMemo as r } from "react";
|
|
3
3
|
import h, { divider as i, group as p, heading1 as C, heading2 as E, heading3 as k, bold as L, italic as M, strikethrough as w, unorderedListCommand as b, orderedListCommand as N, quote as T, link as f, code as v, table as O, codeEdit as S, codeLive as _, codePreview as y, fullscreen as D } from "@uiw/react-md-editor";
|
|
4
4
|
import { IconTextSize as P, IconBold as A, IconItalic as R, IconStrikethrough as B, IconList as Z, IconListNumbers as q, IconQuote as F, IconLink as K, IconCode as Q, IconTable as W, IconPencil as G, IconLayoutColumns as H, IconEye as J, IconMaximize as U } from "@tabler/icons-react";
|