@epam/ai-dial-ui-kit 0.13.0-dev.57 → 0.13.0-dev.59

package/README.md

@@ -194,6 +194,10 @@ pseudo-element. The visible control is unchanged, so layouts keep their existing
 metrics. WCAG 2.5.5 measures the region that accepts a pointer action, not the
 visible decoration.
 
+A control too small for a 44px target to clear its neighbours uses
+`dial-kit-minimum-target` instead, which applies the same pseudo-element at the
+Level AA minimum of 24×24 (WCAG 2.5.8).
+
 These controls are **documented exceptions** and meet Level AA (2.5.8, 24×24) but
 not AAA:
 
@@ -204,6 +208,7 @@ not AAA:
 | `DialCloseButton` | icon-sized | Renders `h-auto w-auto`, so its target follows the caller's icon size |
 | `DialInfoButton`, `InfoButton` | 24×24 | Fixed small affordance, same overlap constraint as small variants |
 | 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 |
+| `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 |
 
 Give small-variant controls at least 20px of surrounding space if you need to reach
 AAA in a specific layout, or use the standard size instead.

package/dist/CHANGELOG.md

@@ -38,6 +38,10 @@ Versions match the git tags on the `development` branch.
 
 ### Added
 
+- **`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.
+- **`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.
+- **`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.
+- **`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.
 - **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.
 - **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.
 - **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.

package/dist/{JsonEditor-BCvdqbcv.js → JsonEditor-CV2FUqAs.js}

@@ -1,4 +1,4 @@
-import { E as o, j as l } from "./index-DcwG5QhT.js";
+import { E as o, j as l } from "./index-qU5tP4t0.js";
 import { Editor as u } from "@monaco-editor/react";
 const c = {
   [o.dark]: {

package/dist/{JsonEditor-Yy3JFyR4.cjs → JsonEditor-DPQ_6Rk7.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-ARMvZo4h.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-EGRzQwVW.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;

package/dist/{MarkdownEditor-BUC6u9en.cjs → MarkdownEditor-BEjYBI-4.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-ARMvZo4h.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-EGRzQwVW.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;

package/dist/{MarkdownEditor-DdvzJy9k.cjs → MarkdownEditor-BpG28sAL.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-ARMvZo4h.cjs"),x=require("react"),e=require("@uiw/react-md-editor"),t=require("@tabler/icons-react"),o=s.DIAL_ICON_SIZE.MD,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.IconColumns2,{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:m,placeholder:a,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",m),children:s.jsxRuntimeExports.jsx(e,{value:n,onChange:E=>r?.(E||""),height:d,preview:u,commands:j,extraCommands:l,textareaProps:{placeholder:a}})})};exports.MarkdownEditor=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-EGRzQwVW.cjs"),x=require("react"),e=require("@uiw/react-md-editor"),t=require("@tabler/icons-react"),o=s.DIAL_ICON_SIZE.MD,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.IconColumns2,{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:m,placeholder:a,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",m),children:s.jsxRuntimeExports.jsx(e,{value:n,onChange:E=>r?.(E||""),height:d,preview:u,commands:j,extraCommands:l,textareaProps:{placeholder:a}})})};exports.MarkdownEditor=R;

package/dist/{MarkdownEditor-L5wQ88mr.js → MarkdownEditor-CfnRGBST.js}

@@ -1,4 +1,4 @@
-import { j as e, D as u, E as z, m as g } from "./index-DcwG5QhT.js";
+import { j as e, D as u, E as z, m as g } from "./index-qU5tP4t0.js";
 import { useMemo as r } from "react";
 import h, { divider as i, group as C, heading1 as p, heading2 as E, heading3 as k, bold as L, italic as M, strikethrough as w, unorderedListCommand as N, orderedListCommand as b, quote as f, link as v, code as D, table as O, codeEdit as T, codeLive as _, codePreview as y, fullscreen as P } from "@uiw/react-md-editor";
 import { IconTextSize as S, IconBold as A, IconItalic as R, IconStrikethrough as B, IconList as Z, IconListNumbers as q, IconQuote as F, IconLink as K, IconCode as Q, IconColumns2 as W, IconPencil as G, IconLayoutColumns as H, IconEye as J, IconMaximize as U } from "@tabler/icons-react";

package/dist/{MarkdownEditor-_RQIObYV.js → MarkdownEditor-DT_WX1cP.js}

@@ -1,4 +1,4 @@
-import { j as e, E as m, m as c } from "./index-DcwG5QhT.js";
+import { j as e, E as m, m as c } from "./index-qU5tP4t0.js";
 import x from "@uiw/react-md-editor";
 const j = ({
   value: o,