@adia-ai/web-components 0.6.34 → 0.6.36

package/components/tag/tag.css

@@ -27,11 +27,21 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-duration-default:     var(--a-duration-fast);
     --tag-easing-default:       var(--a-easing);
 
-    /* ── Dismiss ── */
+    /* ── Dismiss ──
+       Rest = inherit the host's text color at reduced opacity (so the X
+       reads as quieter chrome than the label, but tracks every variant
+       — info/success/danger get a near-white X on saturated bg; warning
+       gets a dark-brown X on bright amber; default gets a fg-muted X on
+       quiet chrome). Hover restores full opacity + drops a translucent
+       overlay in the same color family for the affordance.
+       Pre-v0.6.36 used `--a-fg-muted` / `--a-fg` directly, which gave
+       a neutral-grey X on saturated solid pills — the X disappeared
+       against the variant bg. */
     --tag-dismiss-radius-default: var(--a-radius-full);
-    --tag-dismiss-fg-default:   var(--a-fg-muted);
-    --tag-dismiss-fg-hover-default: var(--a-fg);
-    --tag-dismiss-bg-hover-default: var(--a-bg-muted);
+    --tag-dismiss-fg-default:        currentColor;
+    --tag-dismiss-opacity-default:        0.85;
+    --tag-dismiss-opacity-hover-default:  1;
+    --tag-dismiss-bg-hover-default:  color-mix(in oklch, currentColor 18%, transparent);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -64,37 +74,81 @@ tag-ui[removable]:not([disabled]):hover {
     content: attr(text);
   }
 
-  /* ── Variants ── */
+  /* ── Variants ──
+     Default tone is `solid` for the four family variants:
+     `--a-{family}-bg` (saturated surface) + `--a-{family}-fg` (on-strong
+     text, near-white in both schemes by design). Reads as a status pill
+     where the chip IS the state. Opt out per-tag via [tone="muted"] for
+     metadata-chip surfaces in dense lists. */
   :scope[variant="info"] {
-    --tag-bg-default: var(--a-info-muted);
-    --tag-fg-default: var(--a-info-bg);
+    --tag-bg-default: var(--a-info-bg);
+    --tag-fg-default: var(--a-info-fg);
   }
 
   :scope[variant="success"] {
-    --tag-bg-default: var(--a-success-muted);
-    --tag-fg-default: var(--a-success-bg);
+    --tag-bg-default: var(--a-success-bg);
+    --tag-fg-default: var(--a-success-fg);
   }
 
+  /* `--a-warning-bg` (= --a-warning-strong / -50) is too dark to read
+     against `--a-warning-fg` (= -text-strong / -10-shade), giving a
+     muddy brown-on-brown chip. Per the semantics.css comment "warning
+     is light-colored — text on warning fills should be dark", the
+     intent is bright-amber-bg + dark-text. The literal `-20-tint`
+     step is bright in BOTH schemes (independent of light-dark swap),
+     so warning solid keeps the same caution-tape look across modes.
+     The other family variants stay on `-bg` + `-fg` because their
+     -text-strong is `-05-tint` (near-white) which contrasts fine
+     against their saturated `-strong` bg. */
   :scope[variant="warning"] {
-    --tag-bg-default: var(--a-warning-muted);
-    --tag-fg-default: var(--a-warning-bg);
+    --tag-bg-default: var(--a-warning-20-tint);
+    --tag-fg-default: var(--a-warning-fg);
   }
 
   :scope[variant="danger"] {
-    --tag-bg-default: var(--a-danger-muted);
-    --tag-fg-default: var(--a-danger-bg);
+    --tag-bg-default: var(--a-danger-bg);
+    --tag-fg-default: var(--a-danger-fg);
   }
 
-  /* `default` is a semantic alias of the base — same tokens as the
-     unstyled `:scope`, declared explicitly so the yaml enum and the
-     CSS contract agree. Most consumers omit `variant` and inherit the
-     base; the explicit selector lets `<tag-ui variant="default">`
-     render identically without falling through to base. */
+  /* `default` (no family) stays as quiet chrome — a stark fg/bg-inverse
+     would be too loud for the no-variant case. Opt in to the inverse
+     stamp via `[tone="solid"]` when you want a high-contrast neutral pill. */
   :scope[variant="default"] {
     --tag-bg-default: var(--a-bg-muted);
     --tag-fg-default: var(--a-fg);
   }
 
+  /* ── Tone modifier — orthogonal to [variant] ──
+     `[tone="muted"]` opts each family variant OUT of the solid default
+     into the canonical muted pair: `--a-{family}-muted` (tinted surface)
+     + `--a-{family}-text` (scheme-flipping text). Same shape <badge-ui>
+     uses as its default. Use on metadata chips in dense lists where the
+     saturated default would compete for attention. */
+  :scope[tone="muted"][variant="info"] {
+    --tag-bg-default: var(--a-info-muted);
+    --tag-fg-default: var(--a-info-text);
+  }
+  :scope[tone="muted"][variant="success"] {
+    --tag-bg-default: var(--a-success-muted);
+    --tag-fg-default: var(--a-success-text);
+  }
+  :scope[tone="muted"][variant="warning"] {
+    --tag-bg-default: var(--a-warning-muted);
+    --tag-fg-default: var(--a-warning-text);
+  }
+  :scope[tone="muted"][variant="danger"] {
+    --tag-bg-default: var(--a-danger-muted);
+    --tag-fg-default: var(--a-danger-text);
+  }
+
+  /* `[tone="solid"]` on the neutral default (or no variant) inverts the
+     chrome — solid fg-color bg with bg-color text. High-contrast neutral
+     stamp. Explicit opt-in; the variant-less default stays quiet chrome. */
+  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
+    --tag-bg-default: var(--a-fg);
+    --tag-fg-default: var(--a-bg);
+  }
+
   /* Size handled by universal [size] attribute system. */
 
   /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
@@ -105,6 +159,15 @@ tag-ui[removable]:not([disabled]):hover {
     box-shadow: var(--tag-focus-ring, var(--tag-focus-ring-default));
   }
 
+  /* ── Slotted icons (leading) ──
+     Icons placed inside the tag (e.g. `<icon-ui name="check">`) inherit
+     the host's text color so legend / status chips read as a single
+     color-coded unit. Mirrors `<badge-ui>`'s convention. */
+  :scope > icon-ui {
+    color: currentColor;
+    flex-shrink: 0;
+  }
+
   /* ── Dismiss button ── */
   [slot="dismiss"] {
     display: inline-flex;
@@ -118,13 +181,14 @@ tag-ui[removable]:not([disabled]):hover {
     cursor: pointer;
     border-radius: var(--tag-dismiss-radius, var(--tag-dismiss-radius-default));
     color: var(--tag-dismiss-fg, var(--tag-dismiss-fg-default));
+    opacity: var(--tag-dismiss-opacity, var(--tag-dismiss-opacity-default));
     --a-icon-size: 0.875rem;
     order: 1; /* push dismiss to end so layout reads [text] [×] */
-    transition: color var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default)), background var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default));
+    transition: opacity var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default)), background var(--tag-duration, var(--tag-duration-default)) var(--tag-easing, var(--tag-easing-default));
   }
 
   [slot="dismiss"]:hover {
-    color: var(--tag-dismiss-fg-hover, var(--tag-dismiss-fg-hover-default));
+    opacity: var(--tag-dismiss-opacity-hover, var(--tag-dismiss-opacity-hover-default));
     background: var(--tag-dismiss-bg-hover, var(--tag-dismiss-bg-hover-default));
   }
 

package/components/tag/tag.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UITag } from './class.js';
+import { UITag } from './tag.class.js';
 
 defineIfFree('tag-ui', UITag);
 

package/components/tag/tag.test.js

@@ -41,6 +41,80 @@ describe('tag-ui — content: attr(text) gating', () => {
     // [icon] + [dismiss] slot rendering and for proper :scope[text]
     // gap rendering when text IS set.
     expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*display:\s*inline-flex/);
-    expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*gap:\s*var\(--tag-gap\)/);
+    // Post OD-5 sweep: tokens read via `var(--prop, var(--prop-default))`
+    // chain so consumer-named overrides AND --a-* surface overrides both work.
+    expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*gap:\s*var\(--tag-gap,\s*var\(--tag-gap-default\)\)/);
+  });
+});
+
+// ── Tone defaults (solid by default for families; muted as opt-out) ──
+//
+// Default tone is `solid` for family variants — the base `:scope[variant=…]`
+// rules use the saturated-fill pair `--a-{family}-bg` + `--a-{family}-fg`
+// (the chip IS the state). `[tone="muted"]` opts back into the canonical
+// muted pair `--a-{family}-muted` + `--a-{family}-text` (same look as
+// <badge-ui>'s default). The `default` (no-family) variant stays quiet
+// chrome unless `[tone="solid"]` is set explicitly (then it inverts
+// to fg/bg for a high-contrast neutral stamp).
+
+describe('tag-ui — variant defaults to solid fill', () => {
+  it.each([
+    ['info'],
+    ['success'],
+    ['danger'],
+  ])('[variant="%s"] base rule uses --a-{family}-bg + --a-{family}-fg', (family) => {
+    const block = new RegExp(
+      `:scope\\[variant="${family}"\\]\\s*\\{[^}]*` +
+      `--tag-bg-default:\\s*var\\(--a-${family}-bg\\)[^}]*` +
+      `--tag-fg-default:\\s*var\\(--a-${family}-fg\\)`,
+      's'
+    );
+    expect(TAG_CSS).toMatch(block);
+  });
+
+  it('[variant="warning"] uses the literal --a-warning-20-tint bg (NOT --a-warning-bg)', () => {
+    // The token-system convention `-bg` + `-fg` collapses for warning
+    // because `--a-warning-fg` is dark (`-10-shade`) but `--a-warning-bg`
+    // (= `-strong` = `-50`) is mid-tone amber — dark-on-mid is muddy.
+    // The literal `-20-tint` step is bright in both schemes, restoring
+    // the caution-tape look the semantics.css comment intends.
+    expect(TAG_CSS).toMatch(
+      /:scope\[variant="warning"\]\s*\{[^}]*--tag-bg-default:\s*var\(--a-warning-20-tint\)[^}]*--tag-fg-default:\s*var\(--a-warning-fg\)/s
+    );
+    // Negative — guard against accidental revert to the muddy pair.
+    expect(TAG_CSS).not.toMatch(
+      /:scope\[variant="warning"\]\s*\{[^}]*--tag-bg-default:\s*var\(--a-warning-bg\)/s
+    );
+  });
+});
+
+describe('tag-ui — [tone="muted"] opts out to canonical muted pair', () => {
+  it.each([
+    ['info'],
+    ['success'],
+    ['warning'],
+    ['danger'],
+  ])('[tone="muted"][variant="%s"] uses --a-{family}-muted + --a-{family}-text', (family) => {
+    const block = new RegExp(
+      `:scope\\[tone="muted"\\]\\[variant="${family}"\\]\\s*\\{[^}]*` +
+      `--tag-bg-default:\\s*var\\(--a-${family}-muted\\)[^}]*` +
+      `--tag-fg-default:\\s*var\\(--a-${family}-text\\)`,
+      's'
+    );
+    expect(TAG_CSS).toMatch(block);
+  });
+});
+
+describe('tag-ui — neutral default + explicit solid stamp', () => {
+  it('[variant="default"] stays quiet chrome (--a-bg-muted + --a-fg)', () => {
+    expect(TAG_CSS).toMatch(
+      /:scope\[variant="default"\]\s*\{[^}]*--tag-bg-default:\s*var\(--a-bg-muted\)[^}]*--tag-fg-default:\s*var\(--a-fg\)/s
+    );
+  });
+
+  it('[tone="solid"] without a family inverts to fg/bg high-contrast stamp', () => {
+    expect(TAG_CSS).toMatch(
+      /:scope\[tone="solid"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-bg-default:\s*var\(--a-fg\)[\s\S]*?--tag-fg-default:\s*var\(--a-bg\)/
+    );
   });
 });

package/components/tag/tag.yaml

@@ -51,6 +51,20 @@ props:
       - success
       - warning
       - danger
+  tone:
+    description: |
+      Fill style — orthogonal to [variant]. Default (`solid`) for family
+      variants is a saturated bg with on-strong (near-white) text — the
+      chip IS the state. Opt-out via `tone="muted"` for a tinted bg with
+      scheme-paired text (matches <badge-ui>'s default look) when the
+      chip is metadata in a dense list rather than a status stamp. The
+      `default` variant stays quiet chrome regardless of tone unless
+      `tone="solid"` is set explicitly (high-contrast neutral inverse).
+    type: string
+    default: solid
+    enum:
+      - solid
+      - muted
 events:
   remove:
     description: Fired when the dismiss button is activated.

package/components/tags-input/tags-input.a2ui.json

@@ -0,0 +1,337 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/TagsInput.json",
+  "title": "TagsInput",
+  "description": "Free-form token input — type a value, press Enter (or the configured\ndelimiter) to commit it as a chip; Backspace from the empty inline\ninput removes the last chip. Distinct from <select-ui multiple>\n(SPEC-040), which is constrained to a fixed option list — tags-input\nis for OPEN sets (labels, email recipients, keyword inputs). Per\nADR-0025 the inline editor is a contenteditable surface (NO native\n`<input>` wrap). Form-bearing via UIFormElement + ElementInternals:\nthe form value is a JSON-serialized string array under `[name]`.\nEach rendered chip is a `<tag-ui removable>`; the `remove` event\ndelegates back to the host. Optional autocompletion: when\n`.suggestions` is non-empty, a popover renders below the field and\nthe host announces as a combobox per WAI-APG.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Required for form validation. Empty array fails `:invalid`.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "TagsInput"
+    },
+    "delimiter": {
+      "description": "Inline character that commits the typed value as a chip. The\nsentinel `enter` disables in-line commit — only the Enter key\n(or programmatic `addToken`) commits. Default is `,`.",
+      "type": "string",
+      "default": ","
+    },
+    "disabled": {
+      "description": "Block all interaction; dim the field.",
+      "type": "boolean",
+      "default": false
+    },
+    "max": {
+      "description": "Maximum number of tokens. `0` (default) means unlimited.",
+      "type": "number",
+      "default": 0
+    },
+    "maxLength": {
+      "description": "Maximum per-token character count. `0` (default) means unlimited.",
+      "type": "number",
+      "default": 0
+    },
+    "min": {
+      "description": "Minimum required tokens for form validity.",
+      "type": "number",
+      "default": 0
+    },
+    "minLength": {
+      "description": "Minimum per-token character count after `transform` is applied.",
+      "type": "number",
+      "default": 1
+    },
+    "name": {
+      "description": "Form field name. Serializes the token list as JSON under this key.",
+      "type": "string",
+      "default": ""
+    },
+    "pasteSplit": {
+      "description": "Regex character-class fragment matched against pasted text to\nsplit it into multiple tokens. Default `,\\n` splits on commas\nand newlines. Use `\"\"` to disable paste-splitting entirely.",
+      "type": "string",
+      "default": ",\n"
+    },
+    "placeholder": {
+      "description": "Placeholder text for the inline input when no chips are committed.",
+      "type": "string",
+      "default": "Add tag…"
+    },
+    "readonly": {
+      "description": "Block edits; allow inspection (chips render without remove buttons).",
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "description": "Sizing scale via universal `[size]` attribute system. Matches\nInput + Combobox sizing tokens so a TagsInput rendered alongside\neither feels coherent in a form row.",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    },
+    "suggestions": {
+      "description": "Optional autocomplete strings rendered in a popover below the\nfield. Suggestions are hints, not gates — the typed value still\nwins on commit. JS property only (array reflection skipped).",
+      "$ref": "common_types.json#/$defs/DynamicStringList"
+    },
+    "transform": {
+      "description": "Normalize tokens on commit. `lowercase` lowercases, `trim` strips\nleading + trailing whitespace, `strip-spaces` removes all\nwhitespace, `\"\"` (default) preserves the typed value.",
+      "type": "string",
+      "enum": [
+        "",
+        "lowercase",
+        "trim",
+        "strip-spaces"
+      ],
+      "default": ""
+    },
+    "unique": {
+      "description": "Reject duplicate tokens silently (no `invalid` event for accidental dups).",
+      "type": "boolean",
+      "default": true
+    },
+    "validateFn": {
+      "description": "Per-token validator. Sync `(value, index) => boolean` rejects\nfalse synchronously; async `(value, index) => Promise<boolean>`\nflips the host into `[validating]` while pending. JS property\nonly — not serializable in A2UI JSON; wire post-mount.",
+      "type": "object",
+      "default": null
+    },
+    "value": {
+      "description": "Current token list (string array). Setting `.value = ['a','b']`\nreplaces the rendered chips. Reflection skipped — array values\ndo not round-trip through attribute strings.",
+      "$ref": "common_types.json#/$defs/DynamicStringList"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"Select\", \"multiple\": true, \"options\": [{\"id\": \"a\", \"label\": \"A\"}]}\n",
+        "why": "TagsInput does NOT accept `options`. It is the OPEN-set primitive — any\ntyped string is valid. For closed option lists, use the multi-select\nprimitive with `multiple: true`.\n",
+        "wrong": "{\"component\": \"TagsInput\", \"options\": [{\"id\": \"a\", \"label\": \"A\"}]}\n"
+      },
+      {
+        "fix": "{\"component\": \"TagsInput\", \"value\": [\"bug\", \"high-priority\"]}\n",
+        "why": "Comma-separated string is invalid for `value`. The contract requires\na string array.\n",
+        "wrong": "{\"component\": \"TagsInput\", \"value\": \"bug,high-priority\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"TagsInput\", \"value\": [\"Tag 1\"]}\n",
+        "why": "Chips are rendered automatically from `value`. Slotting Tag children\ndecouples the rendered DOM from the form value and breaks Backspace\nremoval + the `change` event payload.\n",
+        "wrong": "{\"component\": \"TagsInput\", \"children\": [\n  {\"component\": \"Tag\", \"text\": \"Tag 1\"}\n]}\n"
+      }
+    ],
+    "category": "input",
+    "composes": [
+      "tag-ui",
+      "icon-ui"
+    ],
+    "events": {
+      "change": {
+        "description": "Fired after `value` changes (token added or removed).",
+        "detail": {
+          "added": {
+            "description": "Tokens added by this change (`[]` when only removals occurred).",
+            "type": "array"
+          },
+          "removed": {
+            "description": "Tokens removed by this change (`[]` when only additions occurred).",
+            "type": "array"
+          },
+          "value": {
+            "description": "Current token list (string array).",
+            "type": "array"
+          }
+        }
+      },
+      "commit": {
+        "description": "Fired immediately before a token is committed. Call\n`event.preventDefault()` to reject the candidate token.",
+        "detail": {
+          "accepted": {
+            "description": "True unless the consumer calls `preventDefault()`.",
+            "type": "boolean"
+          },
+          "value": {
+            "description": "Candidate token text (post-transform).",
+            "type": "string"
+          }
+        }
+      },
+      "input": {
+        "description": "Fired on each keystroke in the inline input (pre-commit).",
+        "detail": {
+          "query": {
+            "description": "Current typed text in the inline input.",
+            "type": "string"
+          }
+        }
+      },
+      "invalid": {
+        "description": "Fired when a candidate token is rejected. Reasons cover all\nbuilt-in validators and the user-supplied `validateFn`.",
+        "detail": {
+          "reason": {
+            "description": "One of `duplicate` / `too-short` / `too-long` / `validator` / `max`.",
+            "type": "string"
+          },
+          "value": {
+            "description": "Rejected token text.",
+            "type": "string"
+          }
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Label input with lowercase normalization + max 10 tags + 2 pre-committed values.",
+        "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Card\", \"children\": [\"sec\"]},\n  {\"id\": \"sec\", \"component\": \"Section\", \"children\": [\"field\"]},\n  {\n    \"id\": \"field\",\n    \"component\": \"Field\",\n    \"label\": \"Labels\",\n    \"children\": [\"tags\"]\n  },\n  {\n    \"id\": \"tags\",\n    \"component\": \"TagsInput\",\n    \"name\": \"labels\",\n    \"placeholder\": \"Add a label, press Enter\",\n    \"transform\": \"lowercase\",\n    \"max\": 10,\n    \"value\": [\"bug\", \"high-priority\"]\n  }\n]",
+        "name": "canonical-labels"
+      },
+      {
+        "description": "Recipient picker with Enter-only commit (commas are legal in display names).",
+        "a2ui": "[\n  {\n    \"id\": \"to\",\n    \"component\": \"TagsInput\",\n    \"name\": \"to\",\n    \"placeholder\": \"Email…\",\n    \"delimiter\": \"enter\",\n    \"transform\": \"trim\"\n  }\n]",
+        "name": "email-recipients"
+      }
+    ],
+    "keywords": [
+      "tags-input",
+      "tag-input",
+      "token-input",
+      "chips-input",
+      "chip-input",
+      "labels",
+      "recipients",
+      "keywords",
+      "tags",
+      "email-input",
+      "multi-value-input"
+    ],
+    "name": "UITagsInput",
+    "related": [
+      "tag",
+      "select",
+      "combobox",
+      "field",
+      "input"
+    ],
+    "slots": {
+      "chip": {
+        "description": "Custom chip template — receives `{value, index}` per token.\nWhen absent, each token renders as a default\n`<tag-ui removable text=\"<value>\">`."
+      }
+    },
+    "states": [
+      {
+        "description": "No tokens; no typed text.",
+        "name": "idle"
+      },
+      {
+        "description": "One or more tokens committed.",
+        "attribute": "populated",
+        "name": "populated"
+      },
+      {
+        "description": "User is typing into the inline input.",
+        "attribute": "editing",
+        "name": "editing"
+      },
+      {
+        "description": "Suggestion popover is open.",
+        "attribute": "suggesting",
+        "name": "suggesting"
+      },
+      {
+        "description": "Async `validateFn` is in flight.",
+        "attribute": "validating",
+        "name": "validating"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      },
+      {
+        "description": "Read-only; chips render without remove affordance.",
+        "attribute": "readonly",
+        "name": "readonly"
+      }
+    ],
+    "status": "experimental",
+    "synonyms": {
+      "chips-input": [
+        "tags-input",
+        "chip-input",
+        "token-input"
+      ],
+      "labels": [
+        "tags",
+        "tag-input",
+        "labels-input"
+      ],
+      "recipients": [
+        "email-input",
+        "tags-input",
+        "to-field"
+      ],
+      "tags-input": [
+        "tag-input",
+        "chip-input",
+        "token-input",
+        "tokenizer"
+      ],
+      "token-input": [
+        "tags-input",
+        "chip-input",
+        "tokenizer"
+      ]
+    },
+    "tag": "tags-input-ui",
+    "tokens": {
+      "--tags-input-bg": {
+        "description": "Host background color."
+      },
+      "--tags-input-border": {
+        "description": "Host border color (idle)."
+      },
+      "--tags-input-border-hover": {
+        "description": "Host border color on hover."
+      },
+      "--tags-input-chip-bg-invalid": {
+        "description": "Chip background color when a chip is marked invalid (validator rejection echo)."
+      },
+      "--tags-input-fg": {
+        "description": "Host foreground (typed-text color)."
+      },
+      "--tags-input-focus-ring": {
+        "description": "Focus-ring box-shadow when the host is focus-within."
+      },
+      "--tags-input-gap": {
+        "description": "Gap between chips and the inline input."
+      },
+      "--tags-input-placeholder-fg": {
+        "description": "Placeholder color for the empty inline input."
+      },
+      "--tags-input-px": {
+        "description": "Horizontal padding inside the chip-cluster wrapper."
+      },
+      "--tags-input-py": {
+        "description": "Vertical padding inside the chip-cluster wrapper."
+      },
+      "--tags-input-radius": {
+        "description": "Host border radius."
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}