@epam/ai-dial-ui-kit 0.16.0-dev.51 → 0.16.0-dev.55

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

package/dist/CHANGELOG.md

@@ -31,6 +31,8 @@ Versions match the git tags on the `development` branch.
 
 ### Added
 
+- **`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 +63,8 @@ Versions match the git tags on the `development` branch.
 
 ### Changed
 
+- **`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.
 
 - **`Popup` (2.0) — the title is set in Heading 2** — the header title moves from `dial-h3-text` to `dial-h2-text`, the size the popup design gives it. It also reaches `ConfirmationPopup` and every popup built on `Popup`. Visual only.