@epam/ai-dial-ui-kit 0.16.0-dev.38 → 0.16.0-dev.39

package/dist/CHANGELOG.md

@@ -27,6 +27,8 @@ Versions match the git tags on the `development` branch.
 
 - **`SelectedEntityCard` (2.0)** — the card of a form field that holds one selected entity (a model, an agent, a toolset): its `EntityIdentity`, a skeleton while the catalog loads, its raw id when the catalog does not list it, or a placeholder when nothing is selected, with an optional details line and an error under it. Quick Apps' Default model card and the DIAL Loop editor's Model card were two copies of it. Additive.
 
+- **`Tag` (2.0) — `TagAppearance.Bordered`** — the compact value chip of a form field (an allowed host, a variable, an override): 24px tall, a 6px corner, the outlined `Badge`'s `border-tertiary` rim on `bg-layer-sunken` — a `Badge` the user can remove, and the small type scale. The 32px rimless pill vanished on a raised surface, so a form had to restyle the kit's markup to make its values visible. Additive.
+
 - **`EntityIdentity` (2.0) — `showType`** — leaves the type label out, for an identity next to a heading that already names the type (the Model block of a form). Additive.
 
 - **`EntityIdentity` (2.0) — `footer` follows the name** — the footer was pinned to the bottom of the text column with a 4px gap (`mt-auto pt-1`); it now sits right under the name, so a details line reads as part of the identity. A host that relied on the old gap adds its own.

package/dist/components/New/Tag/Tag.js

@@ -1,19 +1,19 @@
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
-import { IconX as C } from "@tabler/icons-react";
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import { IconX as x } from "@tabler/icons-react";
 import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
-import { ElementSize as D } from "../../../types/size.js";
+import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
+import { ElementSize as T } from "../../../types/size.js";
 import { TagAppearance as d } from "../../../types/tag.js";
-import { mergeClasses as T } from "../../../utils/merge-classes.js";
+import { mergeClasses as y } from "../../../utils/merge-classes.js";
 import { GhostIconButton as A } from "../IconButton/IconButtonWrappers.js";
-import { tagInteractiveClassName as K, tagHoverClassName as L, tagStateClassNames as w, tagBaseClassName as z } from "./constants.js";
-import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
-const X = ({
+import { tagInteractiveClassName as K, tagHoverClassName as L, tagStateClassNames as w, tagShapeClassNames as z, tagBaseClassName as E } from "./constants.js";
+import { DIAL_KIT_CLASS as O } from "../../../constants/public-class-names.js";
+const Z = ({
   label: o,
-  icon: m,
-  appearance: l = d.Outlined,
+  icon: l,
+  appearance: s = d.Outlined,
   selected: i = !1,
-  disabled: t = !1,
+  disabled: a = !1,
   closable: p = !1,
   removeLabel: u,
   className: I,
@@ -21,45 +21,45 @@ const X = ({
   onClick: n,
   onRemove: c,
   onKeyDown: h,
-  ...s
+  ...m
 }) => {
-  const f = l === d.Selectable, a = !!n && !t, N = p && !!c && !t, S = f && i, k = (e) => {
-    h?.(e), !(!a || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
+  const f = s === d.Selectable, t = !!n && !a, N = p && !!c && !a, S = f && i, C = (e) => {
+    h?.(e), !(!t || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ k(
     "span",
     {
-      ...s,
-      role: a ? "button" : s.role,
-      tabIndex: a ? 0 : s.tabIndex,
-      "aria-disabled": t || void 0,
-      "aria-pressed": f && a ? i : void 0,
-      onClick: t ? void 0 : n,
-      onKeyDown: k,
-      className: T(
-        z,
-        S ? "dial-tiny-semi-text" : "dial-tiny-text",
-        w[l][i ? "selected" : "default"],
+      ...m,
+      role: t ? "button" : m.role,
+      tabIndex: t ? 0 : m.tabIndex,
+      "aria-disabled": a || void 0,
+      "aria-pressed": f && t ? i : void 0,
+      onClick: a ? void 0 : n,
+      onKeyDown: C,
+      className: y(
+        E,
+        S ? "dial-tiny-semi-text" : z[s],
+        w[s][i ? "selected" : "default"],
         // The design defines no disabled tag, so a disabled one keeps its
         // colours and only stops responding.
-        t && "cursor-not-allowed",
-        a && [K, L],
+        a && "cursor-not-allowed",
+        t && [K, L],
         I,
-        E.tag
+        O.tag
       ),
       children: [
-        m && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: m }),
+        l && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: l }),
         /* @__PURE__ */ r("span", { className: "truncate", title: g ?? o, children: o }),
         N && /* @__PURE__ */ r(
           A,
           {
             className: "size-[16px] shrink-0 dial-kit-minimum-target",
-            size: D.Small,
+            size: T.Small,
             "aria-label": u ?? `Remove ${o}`,
             icon: /* @__PURE__ */ r(
-              C,
+              x,
               {
-                size: y.SM,
+                size: D.SM,
                 stroke: _,
                 "aria-hidden": "true"
               }
@@ -74,5 +74,5 @@ const X = ({
   );
 };
 export {
-  X as Tag
+  Z as Tag
 };

package/dist/components/New/Tag/constants.js

@@ -1,5 +1,9 @@
 import { TagAppearance as e } from "../../../types/tag.js";
 const a = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3", l = {
+  [e.Outlined]: "dial-tiny-text",
+  [e.Selectable]: "dial-tiny-text",
+  [e.Bordered]: "h-[24px] rounded-md border px-2 dial-small-text"
+}, r = {
   [e.Outlined]: {
     default: "bg-layer-raised text-primary",
     selected: "bg-control-accent-alpha text-primary"
@@ -7,11 +11,16 @@ const a = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3"
   [e.Selectable]: {
     default: "text-secondary",
     selected: "bg-control-accent-alpha text-primary"
+  },
+  [e.Bordered]: {
+    default: "border-tertiary bg-layer-sunken text-primary",
+    selected: "border-accent bg-control-accent-alpha text-primary"
   }
-}, c = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus", o = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";
+}, o = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus", c = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";
 export {
   a as tagBaseClassName,
-  o as tagHoverClassName,
-  c as tagInteractiveClassName,
-  l as tagStateClassNames
+  c as tagHoverClassName,
+  o as tagInteractiveClassName,
+  l as tagShapeClassNames,
+  r as tagStateClassNames
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.38",
-  "generatedAt": "2026-10-23T14:50:07.310Z",
+  "version": "0.16.0-dev.39",
+  "generatedAt": "2026-10-23T16:09:19.048Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -4149,7 +4149,7 @@
       "name": "Tag",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe tag has one height — the 32px pill of the 2.0 design. There is no `size`\nprop: a tag sizes itself, and a caller that needs a different height is\nusually reaching for a button.\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.\n\nNo tag draws a rim; the two appearances are told apart by their fill.\n`TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill\nat all until it is selected, one hover tint shared by both states, a semibold\nlabel once selected, and the state carried on `aria-pressed` rather than by\nthe tint alone. Give it an `onClick` — a selectable tag that cannot be\nactivated is a colour and nothing else.\n\nSelecting one therefore changes its width by the difference between the\nregular and semibold label. In a wrapping filter row that is what the design\nasks for; if a fixed width matters, give the chip one.",
+      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe tag is the 32px pill of the 2.0 design; `TagAppearance.Bordered` is the\ncompact 24px value chip of a form field. There is no `size` prop: a tag sizes\nitself, and a caller that needs a different height is usually reaching for a\nbutton.\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.\n\n`outlined` and `selectable` draw no rim and are told apart by their fill;\n`bordered` draws one: the outlined `Badge`'s look, for a value the user can\nremove, on a surface the rimless fill would vanish on.\n`TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill\nat all until it is selected, one hover tint shared by both states, a semibold\nlabel once selected, and the state carried on `aria-pressed` rather than by\nthe tint alone. Give it an `onClick` — a selectable tag that cannot be\nactivated is a colour and nothing else.\n\nSelecting one therefore changes its width by the difference between the\nregular and semibold label. In a wrapping filter row that is what the design\nasks for; if a fixed width matters, give the chip one.",
       "props": [
         {
           "name": "label",
@@ -4168,7 +4168,7 @@
           "type": "TagAppearance",
           "required": false,
           "defaultValue": "TagAppearance.Outlined",
-          "description": "`outlined` is the filled chip on the raised\nlayer; `selectable` is the unfilled filter chip that tints and turns semibold when selected."
+          "description": "`outlined` is the filled chip on the raised\nlayer; `selectable` is the unfilled filter chip that tints and turns semibold when selected;\n`bordered` is the compact rimmed value chip of a form field."
         },
         {
           "name": "selected",
@@ -11493,6 +11493,11 @@
         {
           "name": "Selectable",
           "value": "'selectable'"
+        },
+        {
+          "name": "Bordered",
+          "value": "'bordered'",
+          "comment": "The compact, rimmed chip of a value in a form field (a host, a variable)."
         }
       ],
       "sourceFile": "types/tag.ts"