@adia-ai/web-components 0.7.16 → 0.7.17

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.17] — 2026-06-08
+
+### Fixed
+- **`badge-ui` / `tag-ui` — icon-bearing chips no longer inflate row height.** Capped the inner `icon-ui` block-size to the text line-height (`components/badge/badge.css` `0.75em`, `components/tag/tag.css` `1em`) so a leading icon can't push the chip taller than a text-only one. Plus an `[icon]`-gated spacing tighten — reduced leading padding (`--a-space-1`) + a `~0.2em` icon↔label gap so the icon + label read as one tight unit; text-only chips unchanged. `dist/web-components.min.{css,js}` + `.sheet.js` regenerated to match.
+
 ## [0.7.16] — 2026-06-08
 
 ### Changed

package/components/badge/badge.css

@@ -45,13 +45,27 @@
 
   /* Leading icon stamped by JS (when [icon] is set). Inherits the badge's
      foreground color so legend chips read as a single color-coded unit
-     (e.g. accent variant → accent-colored dot + accent-colored label). */
+     (e.g. accent variant → accent-colored dot + accent-colored label).
+     ICON-HEIGHT FIX: cap the icon block-size so it cannot exceed the text
+     line-height. `line-height:1` on the badge drives the block size via
+     the text glyph; an icon taller than 1em would inflate the row. */
   :scope > icon-ui {
     --a-icon-size: 0.75em;
+    block-size: 0.75em;
     color: currentColor;
     flex-shrink: 0;
   }
 
+  /* ── Icon-badge spacing rebalance (B0) ──
+     Symmetric --badge-px looks loose / left-heavy when a leading icon is present:
+     the icon's own visual mass eats into the left breathing room. Tighten the
+     leading pad to --a-space-1 (4px) and narrow the gap to ~0.2em so the icon+label
+     read as ONE tight unit. Gated on [icon] so text-only badges are unaffected. */
+  :scope[icon] {
+    padding-inline-start: var(--badge-px-icon, var(--a-space-1));
+    gap: var(--badge-gap-icon, 0.2em);
+  }
+
   /* ── Variants ──
      Badge fg pairs with the muted (tinted) bg — use --a-{family}-text, which
      flips with scheme (shade in light, tint in dark) for proper contrast.

package/components/tag/tag.css

@@ -189,10 +189,25 @@ tag-ui[removable]:not([disabled]):hover {
   /* ── 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. */
+     color-coded unit. Mirrors `<badge-ui>`'s convention.
+     ICON-HEIGHT FIX: cap the icon at 1em so it never exceeds the text
+     line-height and inflates the row. The icon is visual decoration on
+     a text chip — it must not drive the block size. `flex-none` prevents
+     it from growing or shrinking; `flex-shrink:0` is already here. */
   :scope > icon-ui {
     color: currentColor;
     flex-shrink: 0;
+    --a-icon-size: 1em;
+    block-size: 1em;
+  }
+
+  /* ── Icon-tag spacing rebalance (B0) ──
+     Mirrors badge-ui's [icon] rebalance: tighten leading pad + narrow gap when
+     a leading icon is present, so the icon+label read as one tight unit.
+     Gated on :has(> icon-ui) to leave text-only tags unaffected. */
+  :scope:has(> icon-ui) {
+    padding-inline-start: var(--tag-px-icon, var(--a-space-1));
+    gap: var(--tag-gap-icon, 0.2em);
   }
 
   /* ── Dismiss button ── */