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

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

@@ -16,9 +16,10 @@ export interface TagProps extends NativeTagProps {
  * aliases: Chip|Pill
  * Design system 2.0
  *
- * The tag has one height — the 32px pill of the 2.0 design. There is no `size`
- * prop: a tag sizes itself, and a caller that needs a different height is
- * usually reaching for a button.
+ * The tag is the 32px pill of the 2.0 design; `TagAppearance.Bordered` is the
+ * compact 24px value chip of a form field. There is no `size` prop: a tag sizes
+ * itself, and a caller that needs a different height is usually reaching for a
+ * button.
  *
  * The label truncates rather than wrapping, and carries a native `title` so the
  * full text stays reachable when it does.
@@ -28,7 +29,9 @@ export interface TagProps extends NativeTagProps {
  * the caller: a clickable tag that is also closable gives a screen reader two
  * actions with no way to tell which one it landed on.
  *
- * No tag draws a rim; the two appearances are told apart by their fill.
+ * `outlined` and `selectable` draw no rim and are told apart by their fill;
+ * `bordered` draws one: the outlined `Badge`'s look, for a value the user can
+ * remove, on a surface the rimless fill would vanish on.
  * `TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill
  * at all until it is selected, one hover tint shared by both states, a semibold
  * label once selected, and the state carried on `aria-pressed` rather than by
@@ -55,7 +58,8 @@ export interface TagProps extends NativeTagProps {
  * @param label - Text content displayed inside the tag.
  * @param [icon] - Icon rendered before the label.
  * @param [appearance=TagAppearance.Outlined] - `outlined` is the filled chip on the raised
- * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected.
+ * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected;
+ * `bordered` is the compact rimmed value chip of a form field.
  * @param [selected=false] - Applies the accent-tinted selected styling.
  * @param [disabled=false] - Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put.
  * @param [closable=false] - Renders the remove button. Needs `onRemove` to appear.

package/dist/src/components/New/Tag/constants.d.ts

@@ -6,10 +6,18 @@ import { TagAppearance } from '../../../types/tag';
  */
 export declare const tagBaseClassName = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3";
 /**
- * Fill and text colour per appearance and selection. No tag draws a rim: the
- * two appearances are told apart by their fill — `outlined` sits on the raised
- * layer, `selectable` on nothing until it is selected, where it also steps its
- * label up from secondary to primary.
+ * Shape and type scale per appearance, over `tagBaseClassName`. The bordered
+ * chip is the compact value chip of a form field — the removable twin of
+ * `Badge`'s outlined label: its 24px, 6px corner and rim on the sunken layer,
+ * with the value in primary text on the small type scale.
+ */
+export declare const tagShapeClassNames: Record<TagAppearance, string>;
+/**
+ * Fill and text colour per appearance and selection. `outlined` and
+ * `selectable` draw no rim and are told apart by their fill — `outlined` sits
+ * on the raised layer, `selectable` on nothing until it is selected, where it
+ * also steps its label up from secondary to primary. `bordered` is the one with
+ * a rim, on the sunken layer.
  */
 export declare const tagStateClassNames: Record<TagAppearance, Record<'default' | 'selected', string>>;
 /** Cursor and focus ring of a tag that can be activated. */

package/dist/src/types/tag.d.ts

@@ -1,4 +1,6 @@
 export declare enum TagAppearance {
     Outlined = "outlined",
-    Selectable = "selectable"
+    Selectable = "selectable",
+    /** The compact, rimmed chip of a value in a form field (a host, a variable). */
+    Bordered = "bordered"
 }

package/dist/types/tag.js

@@ -1,4 +1,4 @@
-var l = /* @__PURE__ */ ((e) => (e.Outlined = "outlined", e.Selectable = "selectable", e))(l || {});
+var d = /* @__PURE__ */ ((e) => (e.Outlined = "outlined", e.Selectable = "selectable", e.Bordered = "bordered", e))(d || {});
 export {
-  l as TagAppearance
+  d as TagAppearance
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.16.0-dev.38",
+  "version": "0.16.0-dev.39",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",