@epam/ai-dial-ui-kit 0.16.0-dev.7 → 0.16.0-dev.70

package/dist/migration-guides/0.16.0/grid-empty-state-pattern.md

@@ -0,0 +1,100 @@
+# Migrating the `Grid` empty state to the Patterns 2.0 empty-state behaviour — v0.15 → v0.16.0
+
+## Why this changed
+
+The Patterns 2.0 empty-state spec has two cases: a list with nothing in it
+yet ("No [entities] yet", optionally with an action) and a list that a
+search or filter emptied ("No [entities] found", announced). The `Grid` drew
+neither correctly:
+
+- it showed a 100px `IconZoomCancel` instead of the shared placeholder-list
+  card every other empty list uses;
+- its default copy ("No results found" / "Sorry, we couldn't find any results
+  for your search.") talked about a search even when the grid simply had no
+  rows;
+- it announced the no-rows message as a `role="status"` region every time,
+  including on first load;
+- when the column filters left no rows, ag-Grid's own unstyled
+  no-matching-rows overlay appeared, because only the no-rows overlay was
+  replaced;
+- there was no way to put an action under the message.
+
+## What changed
+
+| Before                                                           | After                                                                                              |
+| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| Default illustration `IconZoomCancel`                            | The shared `NoDataContent` card; `emptyStateIcon` still overrides it                               |
+| `emptyStateTitle` default `'No results found'`                   | `'No items yet'`                                                                                   |
+| `emptyStateDescription` default `"Sorry, we couldn't find any…"` | `'Items will appear here once they are added.'`                                                    |
+| No-rows message always announced (`role="status"`)               | Announced only with `emptyStateLive`                                                               |
+| Column filters leaving no rows show ag-Grid's default overlay    | `filteredEmptyStateTitle` (`'No items found'`) / `filteredEmptyStateDescription`, always announced |
+| No action                                                        | `emptyStateAction`, shown when there are no rows                                                   |
+| `noRowsOverlayComponent` set by the grid                         | `overlayComponentSelector` + `overlayComponentParams` set by the grid                              |
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+grep -rnE "<Grid\b" src/
+grep -rnE "emptyState(Title|Description|Icon)" src/
+```
+
+### 2. Name your entities in the copy
+
+The defaults are generic. Pass the entity in both cases:
+
+```tsx
+<Grid
+  columnDefs={columns}
+  rowData={files}
+  emptyStateTitle="No files yet"
+  emptyStateDescription="Files will appear here once you upload one."
+  emptyStateAction={<OutlinedButton label="Upload" onClick={upload} />}
+  filteredEmptyStateTitle="No files found"
+/>
+```
+
+### 3. A host that filters `rowData` itself
+
+If your search box lives outside the grid and you pass the filtered rows in,
+the grid sees no rows at all, not a filter. Switch the copy on the query and
+turn on the announcement:
+
+**Before:**
+
+```tsx
+<Grid rowData={visibleFiles} emptyStateTitle="No files found" />
+```
+
+**After:**
+
+```tsx
+<Grid
+  rowData={visibleFiles}
+  emptyStateTitle={query ? 'No files found' : 'No files yet'}
+  emptyStateDescription={
+    query
+      ? 'Try a different search term.'
+      : 'Files will appear here once you upload one.'
+  }
+  emptyStateLive={!!query}
+/>
+```
+
+### 4. Drop a custom illustration
+
+Remove `emptyStateIcon` unless the grid is not a list of things the user owns
+— every empty list should show the same card.
+
+### 5. Tests
+
+A test that found the empty grid with `getByRole('status')` now needs
+`emptyStateLive`, a column filter that leaves no rows, or a text query.
+
+### 6. Overriding the overlay yourself
+
+If you passed `additionalGridOptions.noRowsOverlayComponent`, the grid's
+`overlayComponentSelector` now takes precedence for the no-rows and
+no-matching-rows overlays. Pass your own `overlayComponentSelector` in
+`additionalGridOptions` instead.

package/dist/migration-guides/0.16.0/legacy-analytics-and-steps-removal.md

@@ -0,0 +1,54 @@
+# Migrating off the legacy analytics components and `DialSteps` — v0.15 → v0.16
+
+## Why this changed
+
+Every removed component already has a 2.0 version, so keeping both meant two copies that drifted apart.
+
+## What changed
+
+| Before                   | After                                                                                          |
+| ------------------------ | ---------------------------------------------------------------------------------------------- |
+| `DialSteps`              | `Steps`                                                                                        |
+| `DialAnalyticsCard`      | `AnalyticsCard`                                                                                |
+| `DialAnalyticsBar`       | `AnalyticsBar`                                                                                 |
+| `DialAnalyticsBarGroup`  | `AnalyticsBarGroup`                                                                            |
+| `DialAnalyticsHistogram` | `AnalyticsHistogram`                                                                           |
+| `DialAnalyticsErrorTag`  | `Badge` (red, filled)                                                                          |
+| `DialAnalytics*Props`    | `AnalyticsCardProps`, `AnalyticsBarProps`, `AnalyticsBarGroupProps`, `AnalyticsHistogramProps` |
+
+`Step` and `StepStatus` are unchanged.
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+grep -rE "DialSteps|DialAnalytics|AnalyticsCardVariant|AnalyticsBarColorStop|AnalyticsCardCompareItem|DEFAULT_ANALYTICS_BAR_COLOR_MAP" src/
+```
+
+### 2. Replace `DialSteps` with `Steps`
+
+**Before:**
+
+```tsx
+import { DialSteps } from '@epam/ai-dial-ui-kit';
+```
+
+**After:**
+
+```tsx
+import { Steps } from '@epam/ai-dial-ui-kit';
+```
+
+Check `Steps`' props in Storybook; they take the same `Step[]` model.
+
+### 3. Replace the analytics components
+
+Rename `DialAnalyticsCard`, `DialAnalyticsBar`, `DialAnalyticsBarGroup` and `DialAnalyticsHistogram` to their 2.0 names and update the props types. Component logic is unchanged. The 2.0 `AnalyticsBarGroup` is built on the 2.0 `Accordion`, which keeps collapsed content mounted but `inert`. Use a red filled `Badge` where you rendered `DialAnalyticsErrorTag`.
+
+### 4. Verify
+
+```bash
+npm run typecheck
+npm run test
+```

package/dist/migration-guides/0.16.0/legacy-file-manager-removal.md

@@ -0,0 +1,91 @@
+# Migrating the legacy `DialFileManager` — v0.15 → v0.16
+
+## Why this changed
+
+The file manager lives in its own package, `@epam/ai-dial-react-file-manager`,
+which is where it is developed and what DIAL Chat already uses. The kit still
+shipped the older copy, and the two drifted apart. Keeping both meant two
+`DialFileManager` exports with the same name and different behaviour, and the
+kit's copy pulled the legacy `DialGrid` and AG Grid into every consumer of the
+`./file-manager` subpath. The copy in the kit is removed. The standalone package
+is the only file manager.
+
+## What changed
+
+Every name below is gone from `@epam/ai-dial-ui-kit`, and the
+`@epam/ai-dial-ui-kit/file-manager` subpath is gone with them. Each name is
+exported under the same name by `@epam/ai-dial-react-file-manager`.
+
+| Kind              | Removed from `@epam/ai-dial-ui-kit`                                                                                                                                                              |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Components        | `DialFileManager`, `DialFoldersTree`, `DialDestinationFolderPopup`                                                                                                                               |
+| Context and hooks | `FileManagerProvider`, `useFileManagerContext`, `useDialFileManagerTabs`                                                                                                                         |
+| Enums             | `DialFileManagerTabs`, `DialFileManagerActions`, `FileManagerColumnKey`                                                                                                                          |
+| Column constants  | `NAME_COLUMN`, `SIZE_COLUMN`, `UPDATED_AT_COLUMN`                                                                                                                                                |
+| Types             | `FileManagerGridRow`, `GridOptions`, `ToolbarOptions`, `BulkActionsToolbarOptions`, `DialCopiedItem`, `DialDeletedItem`, `DialUploadFileItem`, `DialFileManagerActionsRef`, `DialFileAcceptType` |
+| Package subpath   | `@epam/ai-dial-ui-kit/file-manager`                                                                                                                                                              |
+
+These stay in the kit: `DialFile`, `DialRootFolder`, `DialFileNodeType`,
+`DialFilePermission`, `DialFileResourceType`, `DialItemType`,
+`wrapInRootFolder` and `useEditableItem`, plus the 2.0 `FileIcon`, `FileName`,
+`FolderName`, `SharedEntityIndicator` and `TransferQueue`. The 1.0
+`DialFileName`, `DialFolderName`, `DialFileIcon` and
+`DialSharedEntityIndicator` are removed in the same release — see
+[unused-legacy-components-removal](unused-legacy-components-removal.md).
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+grep -rnE "ai-dial-ui-kit/file-manager|\b(DialFileManager|DialFoldersTree|DialDestinationFolderPopup|FileManagerProvider|useFileManagerContext|useDialFileManagerTabs|DialFileManagerTabs|DialFileManagerActions|FileManagerColumnKey|NAME_COLUMN|SIZE_COLUMN|UPDATED_AT_COLUMN|FileManagerGridRow|GridOptions|ToolbarOptions|BulkActionsToolbarOptions|DialCopiedItem|DialDeletedItem|DialUploadFileItem|DialFileManagerActionsRef|DialFileAcceptType)\b" src/
+```
+
+### 2. Install the standalone package
+
+```bash
+npm install @epam/ai-dial-react-file-manager
+```
+
+### 3. Move the imports
+
+Import the removed names from the standalone package. The kit's other names
+keep their kit import.
+
+**Before:**
+
+```tsx
+import {
+  DialFileManager,
+  DialFileManagerTabs,
+  DialFileName,
+} from '@epam/ai-dial-ui-kit';
+// or
+import { DialFileManager } from '@epam/ai-dial-ui-kit/file-manager';
+```
+
+**After:**
+
+```tsx
+import {
+  DialFileManager,
+  DialFileManagerTabs,
+} from '@epam/ai-dial-react-file-manager';
+import { DialFileName } from '@epam/ai-dial-ui-kit';
+```
+
+The standalone package has its own props and releases, so check its
+documentation for any prop that changed since the copy in the kit was forked.
+
+### 4. Verify
+
+```bash
+npm run typecheck
+npm run test
+```
+
+## Notes
+
+- The SVG icons used only by the old file manager (`add-child`, `add-sibling`,
+  `copy-to`, `move-to`, `unshare`) are removed as well. They were never
+  exported, so only a deep import into `dist/` would notice.

package/dist/migration-guides/0.16.0/unused-legacy-components-removal.md

@@ -0,0 +1,128 @@
+# Migrating off the removed 1.0 components — v0.15 → v0.16
+
+## Why this changed
+
+Most 1.0 `Dial*` components have had a 2.0 replacement for several releases,
+and the applications built on the kit — DIAL Chat and the DIAL Admin frontend —
+no longer use the 1.0 versions listed below. Keeping them meant two components
+for one control in the public API, two sets of tests and stories to maintain,
+and Monaco shipped as an optional peer only for the 1.0 JSON editor. They are
+removed. The 1.0 components that are still in use — `DialTabs`, `DialSteps`,
+`DialLabelledText`, `DialLoadFileArea`, the `DialAnalytics*` set and the
+building blocks they render — stay.
+
+## What changed
+
+### Components and their replacements
+
+Every name in the first column is gone from `@epam/ai-dial-ui-kit`. Use the 2.0
+component in the second column, imported from the same package. The 2.0
+components have their own props, so this is a rewrite of the call site, not a
+rename — check each one's story for its API.
+
+| Removed                                                                                              | Use instead                                                           |
+| ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `DialAutocompleteInputValue`                                                                         | `AutocompleteTagInput`                                                |
+| `DialButtonDropdown`                                                                                 | `ButtonDropdown`                                                      |
+| `DialCheckbox`                                                                                       | `Checkbox`                                                            |
+| `DialCollapsibleSidebar`                                                                             | `CollapsibleSidebar`                                                  |
+| `DialConfirmationPopup`                                                                              | `ConfirmationPopup`                                                   |
+| `DialDropdownIcon`, `DialDropdownIconProps`                                                          | `Dropdown` with an `IconButton` trigger                               |
+| `DialFileIcon`, `DialFileIconProps`                                                                  | `FileIcon`                                                            |
+| `DialFileName`                                                                                       | `FileName`                                                            |
+| `DialFolderName`                                                                                     | `FolderName`                                                          |
+| `DialFormItem`, `FormItemOrientation`                                                                | The 2.0 field's own `labelProps`, `caption` and `error`               |
+| `DialFormPopup`, `DialPopup`                                                                         | `Popup`                                                               |
+| `DialGrid`, `DialGridProps`                                                                          | `Grid`, `GridProps`                                                   |
+| `DialDateCellRenderer`, `DialDateCellRendererProps`, `DialGridDateValue`                             | `DateCellRenderer`, `DateCellRendererProps`, `DateValue`              |
+| `DEFAULT_GRID_DATE_FORMAT_OPTIONS`, `DEFAULT_GRID_DATE_LOCALE`, `convertGridDateToDate`              | `DEFAULT_DATE_FORMAT_OPTIONS`, `DEFAULT_DATE_LOCALE`, `convertToDate` |
+| `LazyDialMarkdownEditor`, `LazyDialMarkdownEditorContainer`, `DialMarkdownEditorContainerProps`      | `LazyMarkdownEditor`, `MarkdownEditorProps` — there is no JSON mode   |
+| `DialNotification`, `DialNotificationProps`                                                          | `Notification`                                                        |
+| `DialNumberInput`                                                                                    | `NumberInput`                                                         |
+| `DialPasswordInput`                                                                                  | `PasswordInput`                                                       |
+| `DialRadioButton`                                                                                    | `Radio`                                                               |
+| `DialRadioGroup`                                                                                     | `RadioGroup`                                                          |
+| `DialRadioGroupPopupField`                                                                           | `RadioGroupPopupField`                                                |
+| `DialResizableContainer`, `DialConditionalResizableContainer`                                        | `ResizableContainer`                                                  |
+| `DialSchemaRenderer`, `DialSchemaRendererProps`                                                      | `SchemaRenderer`, `SchemaRendererProps`                               |
+| `DialSearch`, `DialSearchProps`                                                                      | `Search`                                                              |
+| `DialSegmentedControl`, `DialSegmentedControlProps`, `SegmentedControlOption`                        | `SegmentedControl`                                                    |
+| `DialSelect`, `DialSelectField`, `SelectSize`, `SelectVariant`                                       | `Select`                                                              |
+| `DialSharedEntityIndicator`                                                                          | `SharedEntityIndicator`                                               |
+| `DialSlider`, `DialSliderProps`                                                                      | `Slider`                                                              |
+| `DialSwitch`                                                                                         | `Switch`                                                              |
+| `DialTagInput`                                                                                       | `TagInput`                                                            |
+| `DialTextarea`                                                                                       | `Textarea`                                                            |
+| `LazyDialJsonEditor`, `DialDraggableItem`, `DialInputPopup`, `DialPagination`, `DialPaginationProps` | No replacement in the kit                                             |
+
+The schema types keep their names and import path: `JsonSchema`,
+`JsonSchemaDef`, `ValidationError`, `SchemaRendererTexts`,
+`SchemaRendererVariant`, `SchemaDisplayMode`, `SchemaOrientation` and
+`JsonSchemaType` are still exported from `@epam/ai-dial-ui-kit`.
+
+### Subpaths
+
+| Subpath                        | Removed                                                                                                                                               |
+| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@epam/ai-dial-ui-kit/grid`    | `DialGrid`, `DialGridProps`, `DialDateCellRenderer`, `DialDateCellRendererProps`, `DialGridDateValue`, `DEFAULT_GRID_DATE_*`, `convertGridDateToDate` |
+| `@epam/ai-dial-ui-kit/editors` | `LazyDialJsonEditor`, `LazyDialMarkdownEditor`, `LazyDialMarkdownEditorContainer`, `DialMarkdownEditorContainerProps`                                 |
+
+### Peer dependencies
+
+`monaco-editor` and `@monaco-editor/react` are no longer optional peers: only
+the removed JSON editor used them.
+
+### Public class names and stylesheet
+
+- `DIAL_KIT_CLASS.dropdownIcon` (`dial-kit-dropdown-icon`) and
+  `DIAL_KIT_CLASS.dropdownIconCaret` (`dial-kit-dropdown-icon-caret`) are
+  removed with `DialDropdownIcon`.
+- `styles.css` no longer contains the rules only the removed components used:
+  `dial-popup`, `dial-sm-popup`, `dial-md-popup`, `dial-lg-popup`,
+  `dial-danger-popup`, `dial-input-radio`, `dial-pagination-dot` and
+  `dial-textarea`.
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+grep -rnE "\b(DialAutocompleteInputValue|DialButtonDropdown|DialCheckbox|DialCollapsibleSidebar|DialConfirmationPopup|DialDropdownIcon(Props)?|DialFileIcon(Props)?|DialFileName|DialFolderName|DialFormItem|FormItemOrientation|DialFormPopup|DialPopup|DialGrid(Props|DateValue)?|DialDateCellRenderer(Props)?|DEFAULT_GRID_DATE_FORMAT_OPTIONS|DEFAULT_GRID_DATE_LOCALE|convertGridDateToDate|LazyDialJsonEditor|LazyDialMarkdownEditor(Container)?|DialMarkdownEditorContainerProps|DialNotification(Props)?|DialNumberInput|DialPasswordInput|DialRadioButton|DialRadioGroup(PopupField)?|DialResizableContainer|DialConditionalResizableContainer|DialSchemaRenderer(Props)?|DialSearch(Props)?|DialSegmentedControl(Props)?|SegmentedControlOption|DialSelect|DialSelectField|SelectSize|SelectVariant|DialSharedEntityIndicator|DialSlider(Props)?|DialSwitch|DialTagInput|DialTextarea|DialDraggableItem|DialInputPopup|DialPagination(Props)?)\b|dial-kit-dropdown-icon|dial-(sm-|md-|lg-|danger-)?popup\b|dial-input-radio|dial-pagination-dot|dial-textarea\b" src/
+```
+
+### 2. Replace each component with its 2.0 counterpart
+
+**Before:**
+
+```tsx
+import { DialSelect, DialSwitch, DialPopup } from '@epam/ai-dial-ui-kit';
+import { DialGrid } from '@epam/ai-dial-ui-kit/grid';
+```
+
+**After:**
+
+```tsx
+import { Popup, Select, Switch } from '@epam/ai-dial-ui-kit';
+import { Grid } from '@epam/ai-dial-ui-kit/grid';
+```
+
+Then adjust the props at each call site to the 2.0 component's API — its
+Storybook story lists them.
+
+### 3. Drop Monaco if you installed it only for the kit
+
+```bash
+npm uninstall monaco-editor @monaco-editor/react
+```
+
+### 4. Verify
+
+```bash
+npm run typecheck
+npm run test
+```
+
+## Notes
+
+- If your own markup used one of the removed `dial-*` classes from
+  `styles.css`, move its declarations into your own stylesheet.

package/dist/migration-guides/README.md

@@ -31,6 +31,11 @@ migration-guides/
 | 0.15.0 | [legacy-theme-variable-fallbacks-removal](0.15.0/legacy-theme-variable-fallbacks-removal.md) | Old theme variable names (`--bg-control-neutral-hover`, `--stroke-focus-black`, `--bg-control-accent-gradient-*`) dropped from the fallback chains |
 | 0.15.0 | [slider-redesign](0.15.0/slider-redesign.md) | `Slider` redrawn: 12px accent thumb with a hover/focus halo, accent-tint track; adds `showTooltip`, `showTicks`, `leftContent`, `rightContent` |
 | 0.16.0 | [tailwind-v4-stylesheet](0.16.0/tailwind-v4-stylesheet.md) | `styles.css` built with Tailwind v4: variant utilities move into `@layer ui`, v4 preflight, new browser baseline |
+| 0.16.0 | [legacy-file-manager-removal](0.16.0/legacy-file-manager-removal.md) | Legacy `DialFileManager`, its helpers and the `./file-manager` subpath removed; import them from `@epam/ai-dial-react-file-manager` |
+| 0.16.0 | [caption-text-no-alert-role](0.16.0/caption-text-no-alert-role.md) | `CaptionText` / `ErrorText` drop `role="alert"`; 2.0 fields link their error and caption through `aria-describedby` |
+| 0.16.0 | [legacy-analytics-and-steps-removal](0.16.0/legacy-analytics-and-steps-removal.md) | Legacy `DialAnalytics*` components and 1.0 `DialSteps` removed; use the 2.0 `Analytics*` components and `Steps` |
+| 0.16.0 | [grid-empty-state-pattern](0.16.0/grid-empty-state-pattern.md) | `Grid` empty state: shared illustration, "yet"/"found" copy with new `filteredEmptyState*`, `emptyStateAction` and `emptyStateLive`; no-rows message no longer announced by default |
+| 0.16.0 | [unused-legacy-components-removal](0.16.0/unused-legacy-components-removal.md) | 34 unused 1.0 components (`DialSelect`, `DialPopup`, `DialGrid`, `LazyDialJsonEditor` …) and `DialSchemaRenderer` removed in favour of their 2.0 counterparts; Monaco is no longer a peer |
 
 ---
 

package/dist/node_modules/react-dnd/dist/hooks/useCollector.js

@@ -1,4 +1,4 @@
-import s from "../../../../_virtual/index3.js";
+import s from "../../../../_virtual/index.js";
 import { useState as f, useCallback as a } from "react";
 import { useIsomorphicLayoutEffect as i } from "./useIsomorphicLayoutEffect.js";
 function n(e, c, t) {

package/dist/node_modules/react-dnd/dist/internals/registration.js

@@ -1,18 +1,10 @@
-function s(t, o, g) {
-  const e = g.getRegistry(), r = e.addTarget(t, o);
+function n(r, g, a) {
+  const t = a.getRegistry(), e = t.addTarget(r, g);
   return [
-    r,
-    () => e.removeTarget(r)
-  ];
-}
-function c(t, o, g) {
-  const e = g.getRegistry(), r = e.addSource(t, o);
-  return [
-    r,
-    () => e.removeSource(r)
+    e,
+    () => t.removeTarget(e)
   ];
 }
 export {
-  c as registerSource,
-  s as registerTarget
+  n as registerTarget
 };

package/dist/src/components/{Analytics → New/Analytics}/Bar/Bar.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
-import { AnalyticsBarColorStop } from '../../../models/analytics';
-export interface DialAnalyticsBarProps {
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
+export interface AnalyticsBarProps {
     /**
      * Current value used to size and color the bar. Pass `null` when there is no
      * data (em dash, no progress bar). Omit it when `error` is set.
@@ -48,7 +48,7 @@ export interface DialAnalyticsBarProps {
  * A compact analytics meter: a horizontal bar whose fill width and color reflect a
  * value relative to `maxValue`, with an optional title on the left and value on the right.
  * aliases: MetricBar|Meter|ScoreBar
- * Design system 1.0
+ * Design system 2.0
  *
  * The fill color is resolved from `colorMap` based on the normalized ratio
  * (`value / maxValue`), so the bar shifts hue as the value grows. An empty bar
@@ -57,12 +57,12 @@ export interface DialAnalyticsBarProps {
  *
  * @example
  * ```tsx
- * <DialAnalyticsBar title="Relevance" value={0.82} valueLabel="82%" />
+ * <AnalyticsBar title="Relevance" value={0.82} valueLabel="82%" />
  * ```
  *
  * @example
  * ```tsx
- * <DialAnalyticsBar
+ * <AnalyticsBar
  *   title="Score"
  *   value={640}
  *   maxValue={1000}
@@ -83,4 +83,4 @@ export interface DialAnalyticsBarProps {
  * @param [inline] - Renders the title and bar on a single row (50% / 50%).
  * @param [ariaLabel] - Accessible label for the bar.
  */
-export declare const DialAnalyticsBar: FC<DialAnalyticsBarProps>;
+export declare const AnalyticsBar: FC<AnalyticsBarProps>;

package/dist/src/components/{Analytics → New/Analytics}/Bar/utils.d.ts

@@ -1,4 +1,4 @@
-import { AnalyticsBarColorStop } from '../../../models/analytics';
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
 /**
  * Default color map for {@link DialAnalyticsBar}, expressed as ratios (value / maxValue).
  * A value of `0` leaves the bar empty (track shows through); a value at the maximum

package/dist/src/components/{Analytics → New/Analytics}/BarGroup/BarGroup.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
-import { AnalyticsBarColorStop } from '../../../models/analytics';
-export interface DialAnalyticsBarGroupProps {
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
+export interface AnalyticsBarGroupProps {
     /** Title passed to the accordion header. */
     title: ReactNode;
     /** Tooltip shown when hovering the accordion header title. */
@@ -67,15 +67,15 @@ export interface DialAnalyticsBarGroupProps {
 }
 /**
  * A collapsible group of analytics bars built from a key/value map. Wraps
- * {@link DialAccordion}: the `title` is shown in the header, the number of entries
- * is shown as the header description, and each entry renders a {@link DialAnalyticsBar}
+ * {@link Accordion}: the `title` is shown in the header, the number of entries
+ * is shown as the header description, and each entry renders a {@link AnalyticsBar}
  * with the key as its title and the value as its value.
  * aliases: MetricBarGroup|BarList|NumericResults
- * Design system 1.0
+ * Design system 2.0
  *
  * @example
  * ```tsx
- * <DialAnalyticsBarGroup
+ * <AnalyticsBarGroup
  *   title="Relevance"
  *   data={{ accuracy: 0.82, recall: 0.64, precision: 0.91 }}
  * />
@@ -100,4 +100,4 @@ export interface DialAnalyticsBarGroupProps {
  * @param [barDescriptions] - Map of bar key to tooltip content. Hovering each bar shows its description.
  * @param [className] - Additional CSS classes for the accordion container.
  */
-export declare const DialAnalyticsBarGroup: FC<DialAnalyticsBarGroupProps>;
+export declare const AnalyticsBarGroup: FC<AnalyticsBarGroupProps>;

package/dist/src/components/{Analytics → New/Analytics}/Card/Card.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
-import { AnalyticsCardCompareItem } from '../../../models/analytics';
-import { AnalyticsCardVariant } from '../../../types/analytics';
-export interface DialAnalyticsCardProps {
+import { AnalyticsCardCompareItem } from '../../../../models/analytics';
+import { AnalyticsCardVariant } from '../../../../types/analytics';
+export interface AnalyticsCardProps {
     title: ReactNode;
     value?: ReactNode;
     description?: ReactNode;
@@ -41,7 +41,7 @@ export interface DialAnalyticsCardProps {
  * A simple analytics summary card that displays a single metric as a title,
  * a prominent value, and an optional description.
  * aliases: MetricCard|StatCard|KpiCard
- * Design system 1.0
+ * Design system 2.0
  *
  * Two visual variants are available via the {@link AnalyticsCardVariant} enum:
  * - `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.
@@ -51,11 +51,17 @@ export interface DialAnalyticsCardProps {
  * **Compare mode** — pass `compareValues` to split the value area 50/50 between two
  * metrics, each with its own sub-title. Long sub-titles truncate to a single line and
  * show the full text in a tooltip. Pair with `delta` to show a change badge next
- * to the card title, and `deltaUnit` for a suffix such as `"s"`.
+ * to the card title, and `deltaUnit` for a suffix such as `"s"`. The divider is
+ * centred on the first line of the two values, so dividers line up across cards
+ * whose values differ in height.
+ *
+ * **Description placement** — when the card is stretched to the height of its row
+ * (a grid or flex row with equal-height items), the description sits at the
+ * bottom of the card with the free space between it and the value.
  *
  * @example
  * ```tsx
- * <DialAnalyticsCard
+ * <AnalyticsCard
  *   title="Total requests"
  *   value="12,480"
  *   description="+12% vs last week"
@@ -64,7 +70,7 @@ export interface DialAnalyticsCardProps {
  *
  * @example
  * ```tsx
- * <DialAnalyticsCard
+ * <AnalyticsCard
  *   title="Response time"
  *   delta={9}
  *   deltaUnit="s"
@@ -88,4 +94,4 @@ export interface DialAnalyticsCardProps {
  * @param [deltaUnit] - Suffix appended to the formatted delta (e.g. `"s"` → `+9s`).
  * @param [compareValues] - Enables compare mode with two side-by-side metrics.
  */
-export declare const DialAnalyticsCard: FC<DialAnalyticsCardProps>;
+export declare const AnalyticsCard: FC<AnalyticsCardProps>;

package/dist/src/components/{Analytics → New/Analytics}/Histogram/Histogram.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
-import { AnalyticsBarColorStop } from '../../../models/analytics';
-export interface DialAnalyticsHistogramProps {
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
+export interface AnalyticsHistogramProps {
     /** Title rendered above the histogram. */
     title: ReactNode;
     /** Values to distribute across the columns. */
@@ -34,11 +34,11 @@ export interface DialAnalyticsHistogramProps {
  * along the bottom. Hovering a column reveals a tooltip with its share of the
  * total.
  * aliases: Distribution|ColumnChart|FrequencyChart
- * Design system 1.0
+ * Design system 2.0
  *
  * @example
  * ```tsx
- * <DialAnalyticsHistogram
+ * <AnalyticsHistogram
  *   title="Score distribution"
  *   values={[0.1, 0.15, 0.4, 0.42, 0.43, 0.9, 1]}
  *   valueTitle="responses"
@@ -56,4 +56,4 @@ export interface DialAnalyticsHistogramProps {
  * @param [valueSetLabel] - Label for the primary values set (compare mode tooltip).
  * @param [compareValueSetLabel] - Label for the compare values set (compare mode tooltip).
  */
-export declare const DialAnalyticsHistogram: FC<DialAnalyticsHistogramProps>;
+export declare const AnalyticsHistogram: FC<AnalyticsHistogramProps>;

package/dist/src/components/{Analytics → New/Analytics}/Histogram/utils.d.ts

@@ -1,4 +1,4 @@
-import { AnalyticsBarColorStop } from '../../../models/analytics';
+import { AnalyticsBarColorStop } from '../../../../models/analytics';
 /** Fill color for the zero-bucket column (values of exactly `0`). */
 export declare const ZERO_BUCKET_COLOR = "#FF4E50";
 export interface AnalyticsHistogramColumn {

package/dist/src/components/New/Analytics/index.d.ts

@@ -0,0 +1,11 @@
+export { AnalyticsCard } from './Card/Card';
+export type { AnalyticsCardProps } from './Card/Card';
+export { AnalyticsCardVariant } from '../../../types/analytics';
+export { AnalyticsBar } from './Bar/Bar';
+export type { AnalyticsBarProps } from './Bar/Bar';
+export { DEFAULT_ANALYTICS_BAR_COLOR_MAP } from './Bar/utils';
+export type { AnalyticsBarColorStop, AnalyticsCardCompareItem, } from '../../../models/analytics';
+export { AnalyticsBarGroup } from './BarGroup/BarGroup';
+export type { AnalyticsBarGroupProps } from './BarGroup/BarGroup';
+export { AnalyticsHistogram } from './Histogram/Histogram';
+export type { AnalyticsHistogramProps } from './Histogram/Histogram';

package/dist/src/components/New/Avatar/Avatar.d.ts

@@ -21,6 +21,8 @@ export interface AvatarProps {
     className?: string;
     /** Type-scale class for the initials. When set, it replaces the font size derived from `size`. */
     textClassName?: string;
+    /** Additional CSS classes applied only while the image is shown, e.g. a plate behind a transparent icon. */
+    imageClassName?: string;
     /** Called when the image fails to load, after the avatar has switched to initials. */
     onImageError?: (event: SyntheticEvent<HTMLImageElement>) => void;
 }
@@ -56,6 +58,7 @@ export interface AvatarProps {
  * @param [color] - Explicit colour pair overriding the deterministic pick from `name`
  * @param [className] - Additional CSS classes for the avatar
  * @param [textClassName] - Type-scale class for the initials, replacing the size-derived font size
+ * @param [imageClassName] - Additional CSS classes applied only while the image is shown
  * @param [onImageError] - Called when the image fails to load
  */
 export declare const Avatar: FC<AvatarProps>;