@adia-ai/web-components 0.8.28 → 0.8.29

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.29] — 2026-08-06
+
+### Added
+- **`icon-ui` gains `tone`** — semantic color roles (accent/info/success/warning/danger/muted/neutral) matching badge-ui's vocabulary, mapped to the L3 role text tokens; default `""` inherits currentColor, zero behavior change for existing consumers. Wire-valid through the regenerated A2UI sidecar/catalog (gh#652, PR #658).
+
+### Maintenance
+- **`components/` touched in this release window** (6 file(s), e.g. `icon/icon.a2ui.json`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.28] — 2026-08-05
 
 ### Maintenance

package/components/icon/icon.a2ui.json

@@ -31,6 +31,20 @@
       "type": "string",
       "default": ""
     },
+    "tone": {
+      "description": "Semantic color role. Empty (default) inherits currentColor — unchanged from pre-tone behavior. Maps to the L3 role text tokens (--a-{family}-text / --a-fg-muted). Vocabulary mirrors <badge-ui>'s [variant] enum so a status color reads the same whether it comes from a Badge chip or a bare status/trend icon.",
+      "type": "string",
+      "enum": [
+        "accent",
+        "info",
+        "success",
+        "warning",
+        "danger",
+        "muted",
+        "neutral"
+      ],
+      "default": ""
+    },
     "weight": {
       "description": "Icon weight — selects the Phosphor weight variant (thin/light/regular/bold/fill/duotone).",
       "type": "string",

package/components/icon/icon.class.js

@@ -53,6 +53,8 @@ export class UIIcon extends UIElement {
     label:  { type: String, default: '',        reflect: true },
     /** regular | thin | light | bold | fill | duotone */
     weight: { type: String, default: 'regular', reflect: true },
+    /** '' | accent | info | success | warning | danger | muted | neutral */
+    tone:   { type: String, default: '',        reflect: true },
   };
 
   // Incremented when the icon registry becomes ready so the reactive

package/components/icon/icon.css

@@ -1,6 +1,7 @@
 @scope (icon-ui) {
   :where(:scope) {
-    --icon-size: var(--a-icon-size, calc(1em + 0.125rem));
+    --icon-size:  var(--a-icon-size, calc(1em + 0.125rem));
+    --icon-color: currentColor;
   }
 
   :scope {
@@ -10,6 +11,7 @@
     justify-content: center;
     width: var(--icon-size);
     height: var(--icon-size);
+    color: var(--icon-color);
     flex-shrink: 0;
     line-height: 0;
   }
@@ -25,4 +27,17 @@
      placeholders, fill-the-parent) use the free-form string prop
      (size="48", size="3rem", size="100%"), which sets --icon-size
      inline from icon.class.js. */
+
+  /* ── Tone (override --icon-color) ────────────────────────────────
+     Consumes the L3 role text tokens — same source badge-ui's `muted`
+     (default) variant reads — so a tone-carrying icon matches an
+     equivalent Badge chip's foreground color exactly. `accent` maps
+     to the primary family per badge-ui's `accent` variant. */
+  :scope[tone="accent"]  { --icon-color: var(--a-primary-text); }
+  :scope[tone="info"]    { --icon-color: var(--a-info-text); }
+  :scope[tone="success"] { --icon-color: var(--a-success-text); }
+  :scope[tone="warning"] { --icon-color: var(--a-warning-text); }
+  :scope[tone="danger"]  { --icon-color: var(--a-danger-text); }
+  :scope[tone="muted"],
+  :scope[tone="neutral"] { --icon-color: var(--a-fg-muted); }
 }

package/components/icon/icon.d.ts

@@ -19,6 +19,8 @@ export class UIIcon extends UIElement {
   name: string;
   /** Icon size. Named tiers `sm` 14px / `md` 16px / `lg` 20px ride the universal `[size]` system (`--a-icon-size`), which the ancestor `[scale]` tiers re-table. Anything beyond the row is a free-form pixel / rem / em / percent string ("48", "3rem", "1.25em", "100%" fills the parent box). */
   size: string;
+  /** Semantic color role. Empty (default) inherits currentColor — unchanged from pre-tone behavior. Maps to the L3 role text tokens (--a-{family}-text / --a-fg-muted). Vocabulary mirrors <badge-ui>'s [variant] enum so a status color reads the same whether it comes from a Badge chip or a bare status/trend icon. */
+  tone: 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'neutral';
   /** Icon weight — selects the Phosphor weight variant (thin/light/regular/bold/fill/duotone). */
   weight: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
 }

package/components/icon/icon.yaml

@@ -37,6 +37,24 @@ props:
     default: regular
     reflect: true
     enum: [thin, light, regular, bold, fill, duotone]
+  tone:
+    description: >-
+      Semantic color role. Empty (default) inherits currentColor —
+      unchanged from pre-tone behavior. Maps to the L3 role text tokens
+      (--a-{family}-text / --a-fg-muted). Vocabulary mirrors <badge-ui>'s
+      [variant] enum so a status color reads the same whether it comes
+      from a Badge chip or a bare status/trend icon.
+    type: string
+    default: ""
+    enum:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
+      - muted
+      - neutral
+    reflect: true
 events: {}
 slots: {}
 states:
@@ -71,6 +89,12 @@ a2ui:
       Use [weight="fill"] for selected / active toggles,
       [weight="regular"] (default) for inactive. Do not mix weights
       in the same set; the visual inconsistency reads as a bug.
+    - >-
+      Set [tone] to carry semantic color independent of the parent's
+      text color — e.g. a trend arrow icon that must read
+      success/warning/danger regardless of surrounding row color.
+      Leave [tone] unset when the icon should just inherit the
+      ambient text color (the common case).
 anti_patterns: []
 examples:
   - name: command-palette