@epam/ai-dial-ui-kit 0.13.0-dev.9 → 0.14.0-dev.1

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.
Files changed (173) hide show
  1. package/README.md +45 -0
  2. package/dist/CHANGELOG.md +48 -1
  3. package/dist/{JsonEditor-CRSkEnWP.cjs → JsonEditor-pyqbLZZf.cjs} +1 -1
  4. package/dist/{JsonEditor-Djt1V27V.js → JsonEditor-v9m_npfK.js} +1 -1
  5. package/dist/MarkdownEditor-5UpxUtXf.js +75 -0
  6. package/dist/{MarkdownEditor-BbGX2uA9.cjs → MarkdownEditor-9aPIyyuu.cjs} +1 -1
  7. package/dist/MarkdownEditor-BjqdSHPU.cjs +1 -0
  8. package/dist/{MarkdownEditor-DtKScLM2.js → MarkdownEditor-CWZVSR--.js} +1 -1
  9. package/dist/components-manifest.json +3420 -391
  10. package/dist/dial-ui-kit.cjs.js +1 -1
  11. package/dist/dial-ui-kit.es.js +201 -148
  12. package/dist/{index-JVDPW40K.js → index-DKDaSZqV.js} +24490 -21241
  13. package/dist/index-xlqMH2Q1.cjs +71 -0
  14. package/dist/index.css +6 -2
  15. package/dist/mcp-server.cjs +29 -9
  16. package/dist/migration-guides/0.13.0/caption-semi-text-lead-rename.md +82 -0
  17. package/dist/migration-guides/0.13.0/field-label-props-unification.md +94 -0
  18. package/dist/migration-guides/0.13.0/focus-border-token-rename.md +106 -0
  19. package/dist/migration-guides/0.13.0/progress-bar-2-0-rewrite.md +103 -0
  20. package/dist/migration-guides/0.13.0/spinner-dial-prefix-removal.md +69 -0
  21. package/dist/migration-guides/0.13.0/typography-heading-scale-shift.md +93 -0
  22. package/dist/migration-guides/README.md +6 -0
  23. package/dist/src/components/Accordion/Accordion.d.ts +1 -0
  24. package/dist/src/components/Analytics/Bar/Bar.d.ts +12 -7
  25. package/dist/src/components/Analytics/BarGroup/BarGroup.d.ts +23 -16
  26. package/dist/src/components/Analytics/Card/Card.d.ts +14 -3
  27. package/dist/src/components/Analytics/ErrorTag/ErrorTag.d.ts +1 -0
  28. package/dist/src/components/Analytics/Histogram/Histogram.d.ts +9 -6
  29. package/dist/src/components/Analytics/Histogram/utils.d.ts +10 -0
  30. package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts +1 -0
  31. package/dist/src/components/Breadcrumb/Breadcrumb.d.ts +1 -0
  32. package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts +3 -0
  33. package/dist/src/components/Button/Button.d.ts +1 -0
  34. package/dist/src/components/Button/ButtonWrappers.d.ts +1 -15
  35. package/dist/src/components/ButtonDropdown/ButtonDropdown.d.ts +1 -0
  36. package/dist/src/components/CaptionText/CaptionText.d.ts +1 -0
  37. package/dist/src/components/Checkbox/Checkbox.d.ts +1 -0
  38. package/dist/src/components/CloseButton/CloseButton.d.ts +1 -0
  39. package/dist/src/components/CollapsibleSidebar/CollapsibleSidebar.d.ts +1 -0
  40. package/dist/src/components/ConfirmationPopup/ConfirmationPopup.d.ts +1 -0
  41. package/dist/src/components/DraggableItem/DraggableItem.d.ts +1 -0
  42. package/dist/src/components/DropdownIcon/DropdownIcon.d.ts +1 -0
  43. package/dist/src/components/EllipsisTooltip/EllipsisTooltip.d.ts +1 -0
  44. package/dist/src/components/FabButton/FabButton.d.ts +8 -3
  45. package/dist/src/components/FileIcon/FileIcon.d.ts +1 -0
  46. package/dist/src/components/FileManager/FileManager.d.ts +3 -0
  47. package/dist/src/components/FileManager/FileManagerProvider.d.ts +1 -0
  48. package/dist/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.d.ts +3 -0
  49. package/dist/src/components/FileManager/components/FoldersTree/FoldersTree.d.ts +3 -0
  50. package/dist/src/components/FileManager/hooks/use-file-manager-context.d.ts +2 -0
  51. package/dist/src/components/FileManager/hooks/use-file-manager-tabs.d.ts +3 -0
  52. package/dist/src/components/FileName/FileName.d.ts +1 -0
  53. package/dist/src/components/FolderName/FolderName.d.ts +1 -0
  54. package/dist/src/components/FormItem/FormItem.d.ts +1 -0
  55. package/dist/src/components/FormPopup/FormPopup.d.ts +1 -0
  56. package/dist/src/components/Grid/Grid.d.ts +1 -0
  57. package/dist/src/components/Grid/comparators/base-column-comparator.d.ts +1 -0
  58. package/dist/src/components/Grid/renderers/DateCellRenderer.d.ts +1 -0
  59. package/dist/src/components/Icon/Icon.d.ts +1 -0
  60. package/dist/src/components/IconButton/IconButton.d.ts +5 -0
  61. package/dist/src/components/IconButton/IconButtonWrappers.d.ts +1 -0
  62. package/dist/src/components/Input/Input.d.ts +1 -0
  63. package/dist/src/components/InputPopup/InputPopup.d.ts +1 -0
  64. package/dist/src/components/JsonEditor/JsonEditor.d.ts +1 -0
  65. package/dist/src/components/Label/Label.d.ts +1 -0
  66. package/dist/src/components/LabelledText/LabelledText.d.ts +1 -0
  67. package/dist/src/components/LoadFileArea/LoadFileArea.d.ts +1 -0
  68. package/dist/src/components/LoadFileArea/LoadFileAreaField.d.ts +1 -0
  69. package/dist/src/components/Loader/Loader.d.ts +1 -0
  70. package/dist/src/components/MarkdownEditor/MarkdownEditor.d.ts +1 -0
  71. package/dist/src/components/New/Accordion/Accordion.d.ts +71 -0
  72. package/dist/src/components/New/Button/Button.d.ts +66 -0
  73. package/dist/src/components/New/Button/ButtonWrappers.d.ts +94 -0
  74. package/dist/src/components/New/Button/__tests__/utils.spec.d.ts +1 -0
  75. package/dist/src/components/New/Button/constants.d.ts +2 -0
  76. package/dist/src/components/New/Button/utils.d.ts +2 -0
  77. package/dist/src/components/New/ButtonDropdown/ButtonDropdown.d.ts +24 -0
  78. package/dist/src/components/New/ButtonDropdown/constants.d.ts +1 -0
  79. package/dist/src/components/New/Calendar/Calendar.d.ts +55 -0
  80. package/dist/src/components/New/Calendar/constants.d.ts +17 -0
  81. package/dist/src/components/New/Calendar/utils.d.ts +25 -0
  82. package/dist/src/components/New/Calendar/utils.spec.d.ts +1 -0
  83. package/dist/src/components/New/CaptionText/CaptionText.d.ts +21 -0
  84. package/dist/src/components/New/CardShell/CardShell.d.ts +14 -0
  85. package/dist/src/components/New/CloseButton/CloseButton.d.ts +33 -0
  86. package/dist/src/components/New/ConfirmationPopup/ConfirmationPopup.d.ts +55 -0
  87. package/dist/src/components/New/ConfirmationPopup/constants.d.ts +14 -0
  88. package/dist/src/components/New/Dropdown/Dropdown.d.ts +87 -0
  89. package/dist/src/components/New/Dropdown/DropdownSubMenuItem.d.ts +8 -0
  90. package/dist/src/components/New/Dropdown/constants.d.ts +9 -0
  91. package/dist/src/components/New/FileDropzone/FileDropzone.d.ts +81 -0
  92. package/dist/src/components/New/FolderPath/FolderPath.d.ts +32 -0
  93. package/dist/src/components/New/Highlight/Highlight.d.ts +19 -0
  94. package/dist/src/components/New/IconButton/IconButton.d.ts +48 -0
  95. package/dist/src/components/New/IconButton/IconButtonWrappers.d.ts +71 -0
  96. package/dist/src/components/New/InfoButton/InfoButton.d.ts +26 -0
  97. package/dist/src/components/New/InfoButton/InfoButton.stories.d.ts +6 -0
  98. package/dist/src/components/New/InlineSelect/InlineSelect.d.ts +51 -0
  99. package/dist/src/components/New/Input/Button/InputButton.d.ts +25 -0
  100. package/dist/src/components/New/Input/Button/constants.d.ts +1 -0
  101. package/dist/src/components/New/Input/Input.d.ts +67 -0
  102. package/dist/src/components/New/Input/utils.d.ts +2 -0
  103. package/dist/src/components/New/Label/Label.d.ts +33 -0
  104. package/dist/src/components/New/MarkdownEditor/MarkdownEditor.d.ts +33 -0
  105. package/dist/src/components/New/MarkdownEditor/constants.d.ts +20 -0
  106. package/dist/src/components/New/Notification/Notification.d.ts +7 -0
  107. package/dist/src/components/New/Notification/constants.d.ts +12 -1
  108. package/dist/src/components/New/NumberInput/NumberInput.d.ts +36 -0
  109. package/dist/src/components/New/PasswordInput/PasswordInput.d.ts +33 -0
  110. package/dist/src/components/New/Popup/Popup.d.ts +72 -0
  111. package/dist/src/components/New/Popup/constants.d.ts +10 -0
  112. package/dist/src/components/New/Search/Search.d.ts +42 -0
  113. package/dist/src/components/New/Select/MultiSelectTags.d.ts +17 -0
  114. package/dist/src/components/New/Select/Select.d.ts +110 -0
  115. package/dist/src/components/New/Select/SelectSubMenuItem.d.ts +8 -0
  116. package/dist/src/components/New/Select/constants.d.ts +32 -0
  117. package/dist/src/components/New/Switch/Switch.d.ts +38 -0
  118. package/dist/src/components/New/Tabs/Tabs.d.ts +63 -0
  119. package/dist/src/components/New/Tag/Tag.d.ts +45 -0
  120. package/dist/src/components/New/TagInput/TagInput.d.ts +72 -0
  121. package/dist/src/components/New/TagInput/utils.d.ts +21 -0
  122. package/dist/src/components/New/TagInput/utils.spec.d.ts +1 -0
  123. package/dist/src/components/New/Textarea/Textarea.d.ts +39 -0
  124. package/dist/src/components/New/constants/overlay.d.ts +24 -0
  125. package/dist/src/components/NoDataContent/NoDataContent.d.ts +1 -0
  126. package/dist/src/components/Notification/Notification.d.ts +1 -0
  127. package/dist/src/components/NumberInput/NumberInput.d.ts +1 -0
  128. package/dist/src/components/Pagination/Pagination.d.ts +3 -0
  129. package/dist/src/components/PasswordInput/PasswordInput.d.ts +1 -0
  130. package/dist/src/components/Popup/Popup.d.ts +2 -1
  131. package/dist/src/components/ProgressBar/ProgressBar.d.ts +51 -10
  132. package/dist/src/components/RadioButton/RadioButton.d.ts +1 -0
  133. package/dist/src/components/RadioGroup/RadioGroup.d.ts +1 -0
  134. package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts +1 -0
  135. package/dist/src/components/RemoveButton/RemoveButton.d.ts +1 -0
  136. package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts +1 -0
  137. package/dist/src/components/ResizableContainer/ResizableContainer.d.ts +1 -0
  138. package/dist/src/components/SchemaRenderer/SchemaRenderer.d.ts +1 -0
  139. package/dist/src/components/SchemaRenderer/components/SchemaKeyValueEditor.d.ts +9 -1
  140. package/dist/src/components/SchemaRenderer/types.d.ts +6 -1
  141. package/dist/src/components/SchemaRenderer/utils.d.ts +1 -0
  142. package/dist/src/components/Search/Search.d.ts +1 -0
  143. package/dist/src/components/SegmentedControl/SegmentedControl.d.ts +1 -0
  144. package/dist/src/components/Select/Select.d.ts +1 -0
  145. package/dist/src/components/SelectField/SelectField.d.ts +1 -0
  146. package/dist/src/components/SharedEntityIndicator/SharedEntityIndicator.d.ts +1 -0
  147. package/dist/src/components/Skeleton/Skeleton.d.ts +19 -18
  148. package/dist/src/components/Skeleton/utils.d.ts +2 -2
  149. package/dist/src/components/Slider/Slider.d.ts +1 -0
  150. package/dist/src/components/Spinner/Spinner.d.ts +5 -2
  151. package/dist/src/components/Steps/Steps.d.ts +1 -0
  152. package/dist/src/components/Switch/Switch.d.ts +1 -0
  153. package/dist/src/components/Tabs/Tabs.d.ts +1 -0
  154. package/dist/src/components/Tag/Tag.d.ts +1 -0
  155. package/dist/src/components/TagInput/TagInput.d.ts +1 -0
  156. package/dist/src/components/Textarea/Textarea.d.ts +1 -0
  157. package/dist/src/components/Tooltip/Tooltip.d.ts +1 -0
  158. package/dist/src/components/Tooltip/TooltipContainer.d.ts +1 -0
  159. package/dist/src/components/Tooltip/TooltipContent.d.ts +1 -0
  160. package/dist/src/components/Tooltip/TooltipTrigger.d.ts +1 -0
  161. package/dist/src/index.d.ts +89 -13
  162. package/dist/src/mcp/types.d.ts +12 -0
  163. package/dist/src/models/dropdown.d.ts +27 -0
  164. package/dist/src/types/button.d.ts +1 -0
  165. package/dist/src/types/calendar.d.ts +6 -0
  166. package/dist/src/types/skeleton.d.ts +3 -3
  167. package/dist/src/utils/__tests__/accessible-name.spec.d.ts +1 -0
  168. package/dist/src/utils/__tests__/file-accept.spec.d.ts +1 -0
  169. package/dist/src/utils/accessible-name.d.ts +19 -0
  170. package/dist/src/utils/file-accept.d.ts +16 -0
  171. package/dist/src/utils/sub-menu-floating.d.ts +15 -2
  172. package/package.json +4 -2
  173. package/dist/index-CmA_N28F.cjs +0 -71
package/README.md CHANGED
@@ -26,6 +26,9 @@ The AI DIAL UI Kit is an production-ready React component library designed to st
26
26
  - [Development Setup](#development-setup)
27
27
  - [Project Structure](#project-structure)
28
28
  - [🎨 Theming & Customization](#-theming--customization)
29
+ - [♿ Accessibility](#-accessibility)
30
+ - [Naming icon-only controls](#naming-icon-only-controls)
31
+ - [Target size (WCAG 2.5.5, Level AAA)](#target-size-wcag-255-level-aaa)
29
32
  - [📖 Storybook](#-storybook)
30
33
  - [Development Mode](#development-mode)
31
34
  - [Production Build](#production-build)
@@ -170,6 +173,46 @@ The library uses CSS custom properties for comprehensive theming. Override these
170
173
 
171
174
  Full list of variables is available [here](tailwind.config.js)
172
175
 
176
+ ## ♿ Accessibility
177
+
178
+ ### Naming icon-only controls
179
+
180
+ `DialFabButton`, `DialIconButton`, and `IconButton` render no text, so they need an
181
+ explicit accessible name. Pass `aria-label`; if you pass only a string
182
+ `tooltipProps.tooltip`, it is used as the label instead. Do not rely on the tooltip
183
+ alone to convey the name — a tooltip's `aria-describedby` lands on a wrapper element
184
+ rather than on the control, and tooltips are suppressed entirely on mobile.
185
+
186
+ `InfoButton` names itself from `caption` for the same reason. Pass a short
187
+ `aria-label` when the caption is a full sentence, so the name stays scannable.
188
+
189
+ ### Target size (WCAG 2.5.5, Level AAA)
190
+
191
+ Standard-size buttons render at 40×40 but expose a **44×44 pointer target** via the
192
+ `dial-kit-enhanced-target` utility, which grows the target with a transparent
193
+ pseudo-element. The visible control is unchanged, so layouts keep their existing
194
+ metrics. WCAG 2.5.5 measures the region that accepts a pointer action, not the
195
+ visible decoration.
196
+
197
+ A control too small for a 44px target to clear its neighbours uses
198
+ `dial-kit-minimum-target` instead, which applies the same pseudo-element at the
199
+ Level AA minimum of 24×24 (WCAG 2.5.8).
200
+
201
+ These controls are **documented exceptions** and meet Level AA (2.5.8, 24×24) but
202
+ not AAA:
203
+
204
+ | Control | Size | Why it is excluded |
205
+ | --- | --- | --- |
206
+ | `ElementSize.Small` variants | 24×24 | A 44px target overhangs 10px per side and would overlap adjacent controls in dense toolbars |
207
+ | `ButtonAppearance.Link` | content | Exempt under the 2.5.5 *Inline* exception; expanding it would overlap surrounding copy |
208
+ | `DialCloseButton` | icon-sized | Renders `h-auto w-auto`, so its target follows the caller's icon size |
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 |
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
+
213
+ Give small-variant controls at least 20px of surrounding space if you need to reach
214
+ AAA in a specific layout, or use the standard size instead.
215
+
173
216
  ## 📖 Storybook
174
217
 
175
218
  Storybook is a handy library for documenting and developing of UI components.
@@ -274,6 +317,8 @@ import * as UIKit from '@epam/ai-dial-ui-kit';
274
317
 
275
318
  The AI DIAL UI Kit includes a built-in **MCP (Model Context Protocol) server** that enables AI agents to discover components, types, hooks, and utilities programmatically. This allows AI assistants to generate accurate, type-safe component code without hallucination.
276
319
 
320
+ Component results are ranked **generation 2.0 first** — the current design system, exported without the `Dial` prefix — and each legacy `Dial*` component points at its 2.0 replacement, so agents land on the right component by default.
321
+
277
322
  For setup, configuration, and detailed resources, see the [MCP Server Guide](./src/mcp/README.md).
278
323
 
279
324
  ## 🤝 Contributing
package/dist/CHANGELOG.md CHANGED
@@ -9,7 +9,54 @@ Versions match the git tags on the `development` branch.
9
9
 
10
10
  ## [Unreleased]
11
11
 
12
- _No unreleased changes yet._
12
+ ### Breaking Changes
13
+
14
+ - **`DialSpinner` → `Spinner`** — the spinner is exported as `Spinner` (and `DialSpinnerProps` as `SpinnerProps`), dropping the `Dial*` prefix in line with the 2.0 component naming. Props and behaviour are unchanged; only the import name moves.
15
+ See [migration guide](migration-guides/0.13.0/spinner-dial-prefix-removal.md).
16
+ - **Border token `focus` → `focus-black`** — the token behind `border-focus` / `outline-focus` was named for its state rather than its value, which left no room for the sibling `focus-blue` token. It is now `focus-black`, backed by `--stroke-focus-black` instead of `--stroke-focus`. The colour is unchanged (`#161B2D`).
17
+ See [migration guide](migration-guides/0.13.0/focus-border-token-rename.md).
18
+ - **Typography — heading classes shifted one step down the scale** — the design scale has three display sizes, but the kit had only two, so its 22px step was shipping as `dial-h1-text` and every heading class sat one step above the size design assigned it. `dial-display3-text` now carries 22px/32px, and `dial-h1-text` → 20px/28px, `dial-h2-text` → 18px/26px, `dial-h3-text` → 16px/24px. Bare `h1`/`h2`/`h3` elements shrink with them, as does the 1.0 `DialPopup` title (18px → 16px). To keep a rendered size, move the class name up one step (`dial-h1-text` → `dial-display3-text`, and so on).
19
+ See [migration guide](migration-guides/0.13.0/typography-heading-scale-shift.md).
20
+ - **`dial-caption-semi-text` → `dial-caption-lead-semi-text`** — the design scale's only 10px semibold style is Caption Lead (Semi Bold): uppercase with `+0.06em` tracking. The class already had the tracking but neither the uppercase nor "lead" in its name. It now applies `text-transform: uppercase`, and the rename keeps that from changing existing text silently.
21
+ See [migration guide](migration-guides/0.13.0/caption-semi-text-lead-rename.md).
22
+ - **`Notification` (2.0) — live-region role now follows the variant** — the container was hardcoded to `role="alert"` for every variant. `role="alert"` is implicitly `aria-live="assertive"` and interrupts the screen reader, which is wrong for routine feedback and for section messages that are static page content. `error` and `warning` keep `role="alert"`; `info`, `success`, and `loading` now use the polite `role="status"`. Pass an explicit `role` to override.
23
+ Consumers asserting `getByRole('alert')` on a non-error notification must query `status` instead.
24
+ - **`Calendar`, `Switch`, `ProgressBar` — `label` → `labelProps`** — the three components rendered their own label from a bare `label` prop, so `required`, `caption` and `size` were unreachable while every other 2.0 field (`Input`, `Textarea`, `Select`, `TagInput`, …) took them through a `labelProps` object. All three now take `labelProps: LabelProps` and render the shared `Label`. In `Switch` the track and the label text become two sibling `<label for>` elements rather than one wrapper — a `caption` info button nested in a label forwards its clicks to the labelled control — which moves `className` onto the row and the focus ring onto the track.
25
+ See [migration guide](migration-guides/0.13.0/field-label-props-unification.md).
26
+ - **`DialProgressBar` → `ProgressBar`** — the progress bar was built on 1.0 tokens slated for removal (`bg-layer-4`, `bg-controls-accent-primary`), so it could not appear in a 2.0 screen without pulling the legacy palette along. It is rebuilt on the 2.0 set and adopts the 2.0 conventions: the `Dial*` prefix is dropped, the bespoke `DialProgressBarSize` gives way to the shared `ElementSize` (`Medium` → `Standard`), and `ariaLabel` becomes the native `aria-label`. A new optional `labelProps` renders a `Label` above the bar and names it, replacing the generic `"Progress"` default that every bar shared, and `valueLabel` puts a readout (`"3.31 / 500"`) at the end of that row.
27
+ See [migration guide](migration-guides/0.13.0/progress-bar-2-0-rewrite.md).
28
+
29
+ ### Fixed
30
+
31
+ - **`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
+ - **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
+ - **`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`).
34
+ - **`Notification` (2.0)** — the variant icon is hidden from assistive tech. The `loading` spinner carries its own `role="status"`, so it previously formed a live region nested inside the notification's, announcing the content twice.
35
+ - **`FolderPath`** — the `<nav>` landmark is named "Folder path" instead of inheriting `DialBreadcrumb`'s "Breadcrumb" default, which misdescribed a path with no navigable segments. Added an `ariaLabel` prop to override. Decorative folder and separator icons are now `aria-hidden`.
36
+ - **`InlineSelect`** — the trigger now exposes `aria-expanded`, so screen readers can tell whether the dropdown is open, and accepts an `ariaLabel` prop naming the control (previously it announced only its current value).
37
+ - **`ButtonDropdown` (2.0)** — the trigger button now carries `aria-haspopup` and `aria-expanded` itself. `DialDropdown` sets them on a non-focusable wrapper `<span>`, so assistive tech never reached them.
38
+ - **`Calendar` (2.0)** — day cells are named with their full date (e.g. "Sunday, 15 March 2026") instead of a bare day number; the popover is a named dialog; and the field `label` is associated with the `div[role="button"]` trigger, which `<label htmlFor>` cannot label.
39
+ - **`FabButton`, `DialIconButton`, `IconButton` (2.0)** — an icon-only button with only `tooltipProps` is now named from the tooltip text. A tooltip's `aria-describedby` lands on a wrapper element and is suppressed on mobile, so it never reached assistive tech.
40
+ - **MCP server — 2.0 components were invisible to agents** — the manifest generator treated only `Dial*` exports as components, so every generation 2.0 component (`Button`, `Input`, `Select`, `Popup`, …) was filed as a hook and lost its props table and examples entirely. Components are now identified by where they live rather than by their name prefix, which also restores the un-prefixed 1.0 components (`Spinner`, `Skeleton`, `FabButton`) and documents the 2.0 enums (`NotificationVariant`, `CalendarMode`) as types.
41
+ - **MCP server — components exported through a re-export barrel were dropped** — `src/index.ts` reaches the Analytics set through `components/Analytics/index.ts`, which the generator tried to read as a file and skipped. Named re-exports are now followed to the declaring file, adding all five Analytics components to discovery.
42
+ - **MCP server — multi-line JSDoc descriptions broke the markdown tables** in `searchEntity` results. Cells are collapsed to a single line and `|` is escaped.
43
+
44
+ ### Added
45
+
46
+ - **`Tag` (2.0)** — the generation 2.0 counterpart of `DialTag`: a compact label for selections, filters, and categories, with `standard` (24px) and `small` (20px) sizes, an optional icon, a `selected` state, and a removable variant. A tag given `onClick` is a keyboard-operable `role="button"`; its remove control is named `Remove <label>` and stops the click from also activating the tag. Built on 2.0 tokens and `IconButton`, so it pulls none of the 1.0 styling `DialTag` still carries.
47
+ - **`TagInput` (2.0)** — the generation 2.0 counterpart of `DialTagInput`, built on the 2.0 `Input`, so it shares its sizes, label, caption, error and disabled states. Works controlled (`value`) or uncontrolled (`defaultValue`), commits on Enter or comma, removes the last tag on Backspace in an empty input, and renders the tags as a named list of `Tag`s rather than as unlabelled markup. `collapseTagOverflow` keeps the row on one line behind a `+N` chip that names the tags it hides.
48
+ - **`FileDropzone` (2.0) — `labelProps`** — a `Label` above the drop area naming the field it fills, with the `required` marker and `caption` info button the other 2.0 fields already had. The existing `label` stays the copy inside the area: it says how to use the control, not what it is for. Both point at the same input, so its accessible name reads as the field name followed by that copy.
49
+ - **`Input` (2.0) — `wrapperRef`** — exposes the bordered field wrapper, so a caller rendering into the `children` slot can measure the space its content has to fit into. The input itself only ever reports its own share of the row.
50
+ - **`dial-kit-minimum-target`** — the `dial-kit-enhanced-target` mechanism at WCAG 2.5.8's Level AA minimum of 24×24, for controls where the 44px AAA target would overhang far enough to swallow their neighbours. Used by the `Tag` remove button; the rendered size is untouched.
51
+ - **Typography — `dial-display3-text` and `dial-tiny-lead-semi-text`** — the two steps the design scale defined but the kit never shipped: Display 3 (22px/32px semibold) and Tiny Text Lead (Semi Bold) (12px/16px semibold, `+0.03em`, uppercase). The `dial-*-text` scale now covers every row of the design table.
52
+ - **Typography — `dial-code-text` names a monospace face** — it previously inherited the body font despite being the Code style. It resolves through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before the system monospace stack, mirroring the existing `--theme-font` / `--font-inter` hook. The kit ships no font file; hosts that want Fira Code load it themselves.
53
+ - **Enhanced pointer targets** — standard-size buttons expose a 44×44 pointer target (WCAG 2.5.5, Level AAA) via the `dial-kit-enhanced-target` utility, with no change to their rendered size. See the [Accessibility section of the README](README.md#-accessibility) for the documented exceptions.
54
+ - **MCP server — generation-aware component discovery** — component entries carry `generation` (`1.0` | `2.0`), and a 1.0 component carries `supersededBy` naming its 2.0 replacement (e.g. `DialButton` → `Button`). `searchEntity` ranks 2.0 above 1.0 and reports a **Use instead** column; `getEntityDetails` flags a superseded component and, on a name miss, suggests the other generation's spelling. Both are derived automatically from component location and Storybook category — there is no list to maintain. See the [MCP Server Guide](src/mcp/README.md).
55
+ - **`DialAnalyticsCard` — `deltaUnit`** — optional suffix appended to the delta badge with no space (`delta={9} deltaUnit="s"` → `+9s`).
56
+
57
+ ### Changed
58
+
59
+ - **Storybook — 2.0 stories are all titled `Components_2_0/…`** — the group was split between `Components_2.0/` and `Components_2_0/`, which showed up as two sidebar sections and two MCP categories for one generation.
13
60
 
14
61
  ---
15
62
 
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CmA_N28F.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
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-xlqMH2Q1.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,4 +1,4 @@
1
- import { E as o, j as l } from "./index-JVDPW40K.js";
1
+ import { E as o, j as l } from "./index-DKDaSZqV.js";
2
2
  import { Editor as u } from "@monaco-editor/react";
3
3
  const c = {
4
4
  [o.dark]: {
@@ -0,0 +1,75 @@
1
+ import { j as e, D as z, E as g, m as u } from "./index-DKDaSZqV.js";
2
+ import { useMemo as r } from "react";
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
+ 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";
5
+ const o = z.SM, s = (t, n) => ({
6
+ ...t,
7
+ icon: n
8
+ }), V = () => [
9
+ s(L, /* @__PURE__ */ e.jsx(A, { size: o })),
10
+ s(M, /* @__PURE__ */ e.jsx(R, { size: o })),
11
+ s(
12
+ w,
13
+ /* @__PURE__ */ e.jsx(B, { size: o })
14
+ ),
15
+ i,
16
+ p([C, E, k], {
17
+ name: "heading",
18
+ groupName: "heading",
19
+ icon: /* @__PURE__ */ e.jsx(P, { size: o }),
20
+ buttonProps: { "aria-label": "Text style", title: "Text style" }
21
+ }),
22
+ i,
23
+ s(
24
+ b,
25
+ /* @__PURE__ */ e.jsx(Z, { size: o })
26
+ ),
27
+ s(
28
+ N,
29
+ /* @__PURE__ */ e.jsx(q, { size: o })
30
+ ),
31
+ i,
32
+ s(T, /* @__PURE__ */ e.jsx(F, { size: o })),
33
+ s(f, /* @__PURE__ */ e.jsx(K, { size: o })),
34
+ s(v, /* @__PURE__ */ e.jsx(Q, { size: o })),
35
+ i,
36
+ s(O, /* @__PURE__ */ e.jsx(W, { size: o }))
37
+ ], X = () => [
38
+ s(S, /* @__PURE__ */ e.jsx(G, { size: o })),
39
+ s(_, /* @__PURE__ */ e.jsx(H, { size: o })),
40
+ s(y, /* @__PURE__ */ e.jsx(J, { size: o })),
41
+ i,
42
+ s(D, /* @__PURE__ */ e.jsx(U, { size: o }))
43
+ ], se = ({
44
+ value: t,
45
+ onChange: n,
46
+ height: a = 300,
47
+ theme: d = g.light,
48
+ className: c,
49
+ placeholder: m,
50
+ defaultPreview: x = "edit"
51
+ }) => {
52
+ const l = r(() => V(), []), I = r(() => X(), []);
53
+ return /* @__PURE__ */ e.jsx(
54
+ "div",
55
+ {
56
+ "data-color-mode": d,
57
+ className: u("dial-kit-markdown-editor", c),
58
+ children: /* @__PURE__ */ e.jsx(
59
+ h,
60
+ {
61
+ value: t,
62
+ onChange: (j) => n?.(j || ""),
63
+ height: a,
64
+ preview: x,
65
+ commands: l,
66
+ extraCommands: I,
67
+ textareaProps: { placeholder: m }
68
+ }
69
+ )
70
+ }
71
+ );
72
+ };
73
+ export {
74
+ se as MarkdownEditor
75
+ };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CmA_N28F.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
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-xlqMH2Q1.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;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-xlqMH2Q1.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,4 +1,4 @@
1
- import { j as e, E as m, m as c } from "./index-JVDPW40K.js";
1
+ import { j as e, E as m, m as c } from "./index-DKDaSZqV.js";
2
2
  import x from "@uiw/react-md-editor";
3
3
  const j = ({
4
4
  value: o,