@epam/ai-dial-ui-kit 0.16.0-dev.54 → 0.16.0-dev.56

package/README.md

@@ -271,6 +271,7 @@ breaking change and goes through the migration-guide process.
 | `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`                                                    |
+| `liveRegion`    | `dial-kit-live-region`    | The always-mounted wrapper of a `LiveRegion`, or of an `announce`d `CaptionText` / `ErrorText` |
 | `transferQueue` | `dial-kit-transfer-queue` | The `role="status"` panel of a `TransferQueue`: header, rows and aggregate bar           |
 
 #### Text
@@ -364,6 +365,7 @@ breaking change and goes through the migration-guide process.
 | `tag`                  | `dial-kit-tag`                        | A `Tag` pill, including a `TagInput`'s rows                |
 | `filterChips`          | `dial-kit-filter-chips`               | The `role="group"` row of a `FilterChips`; its chips carry `dial-kit-tag` |
 | `toggleIconButton`     | `dial-kit-toggle-icon-button`         | A `ToggleIconButton`, additive to `dial-kit-base-icon-button` |
+| `toggleChip`           | `dial-kit-toggle-chip`                | The `<button aria-pressed>` of a `ToggleChip`              |
 | `closeButton`          | `dial-kit-close-button`               | A `CloseButton`, additive to `dial-kit-base-icon-button`    |
 | `infoButton`           | `dial-kit-info-button`                | An `InfoButton`, additive to `dial-kit-base-icon-button`    |
 | `buttonDropdown`       | `dial-kit-button-dropdown`            | The wrapper of a `ButtonDropdown`                          |
@@ -429,6 +431,7 @@ not AAA:
 | 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 |
 | `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 |
 | 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 |
+| `ToggleChip` | 32px tall | Same pill as a clickable `Tag`: a 44px target would overhang 6px per side and swallow the neighbouring chips of a toggle row; the chip is already wider than 24px on both axes |
 | `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 |
 | `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 |

package/dist/CHANGELOG.md

@@ -31,6 +31,18 @@ Versions match the git tags on the `development` branch.
 
 ### Added
 
+- **`Dropdown` (2.0) — `overlayRole` (`DropdownOverlayRole.Menu` / `Dialog` / `None`), `overlayAriaLabel`, `overlayAriaLabelledBy`, `returnFocus`** — the floating wrapper was always `role="menu"`, so a `renderOverlay` panel that is not a menu — a usage-limits dialog, an announcements region — sat inside a menu, which is invalid ARIA. `overlayRole={DropdownOverlayRole.Dialog}` renders `role="dialog"` with `aria-haspopup="dialog"` on the trigger, named by `overlayAriaLabelledBy`, `overlayAriaLabel` or, failing both, the trigger; `DropdownOverlayRole.None` renders a role-less wrapper and drops `aria-haspopup`, keeping `aria-expanded` / `aria-controls`, for content that brings its own role. Arrow-key navigation between options now runs for `Menu` only, so a dialog's own text field or listbox keeps its arrow keys. The role applies to `renderOverlay` only; the `items` list stays a menu. Closing the overlay — Escape, a chosen item, the close button — already returned focus to the trigger; `returnFocus={false}` now opts out. The default, `Menu`, renders exactly as before. ai-dial-chat's `UsageLimitsControl` and `AnnouncementsPopover` needed a non-menu panel. Additive.
+
+- **`ToggleChip` (2.0)** — a chip that switches one option on and off on its own, for a row of independent toggles such as the tools a model may call. A native `<button aria-pressed>` drawn as the `TagAppearance.Selectable` filter chip — no fill until on, the accent-alpha fill and a semibold label once on — with `icon` before a `ReactNode` `label`, so a caller can add trailing ON / OFF text; `isSelected` (default `false`) and `onToggle(next)`, named as on `ToggleIconButton`; `disabled` greys it out with the 2.0 disable tokens while keeping its state visible. It has no remove control. `FilterChips` picks one value and `Tag` is a `<span>` with a string label, so neither fit. The root carries `dial-kit-toggle-chip` (`DIAL_KIT_CLASS.toggleChip`). ai-dial-chat's `ToolsChips` hand-rolled these. Additive.
+
+- **`ProgressBar` (2.0) — `role` (`ProgressBarRole.Progressbar` / `Meter`)** — `ProgressBarRole.Meter` renders `role="meter"` for a level inside a range that never completes, such as capacity used or a quota, with the same `aria-valuemin` / `aria-valuemax` / `aria-valuenow` and the caller's `aria-valuetext`; an unlabelled meter is named `Meter` rather than `Progress`. The track and fill are unchanged, with no low / optimum / high colouring. The default, `Progressbar`, renders as before. The native `role` attribute is no longer in `ProgressBarProps`; it was always overwritten. ai-dial-chat's `ProjectCapacityMeter` hand-rolled a `role="meter"` bar. Additive.
+
+- **`Notification` (2.0) — `surface` (`NotificationSurface.Variant` / `Neutral`)** — each variant tied one icon to one coloured surface, so a warning on the neutral sunken layer could not be built from the kit: ai-dial-chat hand-rolled its Scheduled Tasks login banner for exactly that pairing. `surface={NotificationSurface.Neutral}` draws `bg-layer-sunken` with primary text and keeps everything else the variant decides: the icon, its status colour (`text-info`, `text-success`, `text-warning-icon`, `text-error`) and the live-region role, so a neutral warning is still `role="alert"`. The wrappers forward it. The default, `Variant`, renders exactly as before. Additive.
+
+- **Type scale — monospace steps `dial-code-semi-text`, `dial-tiny-code-text`, `dial-tiny-code-semi-text`** — code had one step, 14px / 20px normal, so a JSON key layered `font-semibold` on `dial-code-text` and inline code inside 12px copy set only the mono font family and borrowed `dial-tiny-text` for its size. `dial-code-semi-text` is 14px / 20px semibold, `dial-tiny-code-text` 12px / 16px normal and `dial-tiny-code-semi-text` 12px / 16px semibold, all on the `dial-code-text` mono stack. They join the `mergeClasses` type-scale group and the MCP typography reference. Additive.
+
+- **`LiveRegion` (2.0) and `CaptionText` / `ErrorText` — `announce`** — `LiveRegion` is a live region that is always in the DOM, even with empty `children`, so a screen reader announces the first message put into it; a region mounted together with its text is often read late or not at all. `politeness` (`LiveRegionPoliteness.Polite`, default → `role="status"` + `aria-live="polite"`; `Assertive` → `role="alert"` + `aria-live="assertive"`), `visuallyHidden` (`sr-only`), `atomic` (`aria-atomic`) and `as` (`LiveRegionElement.Div` / `Span` / `P`). An empty, visible region takes no space through `empty:sr-only`, not `display: none`, which some screen readers drop from the accessibility tree. `announce` on `CaptionText` / `ErrorText` renders the caption inside such a region, kept mounted while `text` is empty; `id` and `className` stay on the text element, so `aria-describedby` still resolves. Without `announce` nothing changes. The root carries `dial-kit-live-region` (`DIAL_KIT_CLASS.liveRegion`). ai-dial-chat hand-wrote ~30 always-mounted `role="status"` / `role="alert"` spans after 0.16 took the alert role off `ErrorText`. Additive.
+
 - **`FileName` (2.0) — `icon`** — replaces the type icon with your own, for example to mark a special folder in a tree. The icon's wrapper is `aria-hidden`, the `loading` spinner still takes its place, and the shared badge (part of the type icon) is not drawn, while `sharedLabel` still announces the state. Without `icon` nothing changes.
 
 - **`Grid` (2.0) — `appearance` (`GridAppearance.Default` / `Chat`)** — `GridAppearance.Chat` draws the design's "Chat table": a borderless card with a 12px corner and the MD shadow, 12px of padding on both sides of every header and row cell, a full-width 1px line under the header, dividers between data rows that stop at the cell padding on both sides and sit on the 0.5px `stroke-tertiary` stroke, and hover and selected rows with a 12px corner and no divider. It ignores `wrapperBorder`. The root carries `dial-kit-grid-chat`. ai-dial-chat's usage and catalog tables wrapped the grid in their own card and could not inset the dividers or round the rows without restyling ag-Grid's markup. Additive.
@@ -61,6 +73,8 @@ Versions match the git tags on the `development` branch.
 
 ### Changed
 
+- **`StarterButton` (2.0) — transparent at rest** — the starter pill no longer fills with `bg-control-neutral` (`#fcfcfc`) at rest: it is transparent with the 1px `border-default` stroke (`--stroke-default`, `#b2c2dd`), and fills only on hover (`bg-control-neutral-hover-muted`, `#e0e6f0`) and press (`bg-control-neutral-active`, `#d1dbea`), as the design specifies. On a surface other than the page background it now shows that surface through. Label, icons, focus ring and disabled state are unchanged.
+
 - **`Input`, `Select` and the other `.dial-kit-input` fields (2.0) — the focus ring is drawn inside the border** — the focus and active ring was an outline outside the field (`outline-offset-0`), so a host that wrapped a field in an `overflow: auto` or `hidden` box with no padding saw it cut off on the sides and bottom. The ring is now offset by `-1px`, so it lies over the 1px border, as the design draws it (a 1px `accent-focus` border, no outer ring), and no ancestor can clip it. An invalid field's ring does the same in the error color. Visual only; no prop changes.
 
 - **`shadow-xs` and `shadow-lg` match the design's shadow scale** — `shadow-xs` was `0 1px 4px` blue alpha-20 over a `0 1px 2px` grey layer; it is now a single `0 0 8px 1px` blue alpha-20 halo, so a pressed button glows evenly instead of dropping down. `shadow-lg` was `0 8px 44px 0`; it is now `1px 10px 25px 12px`, same blue alpha-8. `shadow-sm` and `shadow-md` already matched. `--shadow-xs-2` no longer reaches `shadow-xs` and only colours the resting shadow of solid controls (`dial-kit-control-shadow`). Visual only; no token renamed.