@adia-ai/web-components 0.8.31 → 0.8.33

package/components/alert/alert.d.ts

@@ -48,14 +48,14 @@ export class UIAlert extends UIElement {
   reason: '' | 'declined' | 'expired' | 'insufficient' | 'network';
   /** Single-line alert message. For two-line "headline + body" alerts, use [title] + [description] instead. For rich content (links, formatting), use the [slot="content"] slot. */
   text: string;
-  /** Semantic color variant. */
-  variant: 'default' | 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'neutral';
+  /** Semantic severity family — the only color axis alert exposes. A quiet/passive banner is the family-less `default` (no attribute): the retired `muted`/`neutral` values were exact aliases of it. */
+  variant: 'default' | 'info' | 'success' | 'warning' | 'danger';
 
+  addEventListener(type: 'close', listener: (ev: AlertCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'dunning-action', listener: (ev: AlertDunningActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIAlert, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'close', listener: (ev: AlertCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'dunning-action', listener: (ev: AlertDunningActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/alert/alert.yaml

@@ -58,7 +58,10 @@ props:
     type: string
     default: ""
   variant:
-    description: Semantic color variant.
+    description: >-
+      Semantic severity family — the only color axis alert exposes. A
+      quiet/passive banner is the family-less `default` (no attribute):
+      the retired `muted`/`neutral` values were exact aliases of it.
     type: string
     default: default
     enum:
@@ -67,8 +70,6 @@ props:
       - success
       - warning
       - danger
-      - muted
-      - neutral
   pattern:
     description: >-
       Domain pattern mode. Default is empty (standard alert). Setting
@@ -177,7 +178,7 @@ requiredIcons:
   - x
 a2ui:
   rules:
-    - rule: 'Inline alert/banner for status messages within a content region. Severity via variant (info, success, warn, error).'
+    - rule: 'Inline alert/banner for status messages within a content region. Severity via variant (info, success, warning, danger) — those four plus the family-less default are the whole enum.'
       reason: 'Canonical inline-alert primitive.'
     - rule: 'For ephemeral toast notifications use <toast-ui> (or post to <feed-ui>); alert-ui is persistent inline.'
       reason: 'Ephemeral vs persistent boundary.'
@@ -233,7 +234,7 @@ examples:
         {
           "id": "alert",
           "component": "Alert",
-          "variant": "error",
+          "variant": "danger",
           "title": "Something went wrong",
           "description": "We encountered an error while loading the data. Please try again."
         },

package/components/anchor-bar/anchor-bar.d.ts

@@ -25,11 +25,11 @@ export class UIAnchorBar extends UIElement {
   /** false (default) anchors to the nearest scroll container via `position: sticky` — safe for content with ResizeObserver-driven children (e.g. <toolbar-ui>'s overflow measurement never sees a display:none reset). true anchors to the browser viewport via `position: fixed` + Popover API top-layer promotion — note the native Popover UA stylesheet applies `display:none` while closed, which DOES reset ResizeObserver-driven children on first open; prefer the default for content wrapping <toolbar-ui>. */
   viewport: boolean;
 
+  addEventListener(type: 'close', listener: (ev: AnchorBarCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'open', listener: (ev: AnchorBarOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIAnchorBar, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'close', listener: (ev: AnchorBarCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'open', listener: (ev: AnchorBarOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/avatar/avatar.class.js

@@ -80,7 +80,6 @@ export class UIAvatar extends UIElement {
       if (this.#initialsEl) { this.#initialsEl.remove(); this.#initialsEl = null; }
       if (!this.#iconEl) {
         this.#iconEl = document.createElement('icon-ui');
-        this.#iconEl.setAttribute('slot', 'icon');
         this.appendChild(this.#iconEl);
       }
       this.#iconEl.setAttribute('name', this.icon);

package/components/avatar/avatar.css

@@ -49,8 +49,22 @@
     line-height: 1;
   }
 
-  /* ── Icon (non-person avatar) ── */
-  [slot="icon"] {
+  /* ── Icon (non-person avatar) ──
+     Selected by tag (`:scope > icon-ui`), not `[slot="icon"]` — this
+     repo's Light-DOM stance treats `slot=` as decorative metadata,
+     positioning is by tag + ancestor + DOM order (AGENTS.md). That
+     matters here beyond style: avatar-ui is commonly placed AS a
+     container's own `slot="icon"` child (list-item-ui rows, e.g. the
+     admin-dashboard Notifications list — see issue 809), and Light DOM has
+     no shadow boundary, so an ancestor's `[slot="icon"]` selector
+     (meant for the outer avatar-ui) was ALSO matching avatar's inner
+     icon-ui when both carried the same attribute — list-item.css's
+     `margin-inline-end` (icon-to-text gap) leaked onto the inner
+     icon-ui and pushed the flex-centered glyph off-center. The inner
+     icon-ui no longer carries `slot="icon"` at all (avatar.class.js)
+     — a direct-child tag selector needs no shared attribute to hang
+     off, so the collision is impossible rather than out-specificity'd. */
+  :scope > icon-ui {
     color: var(--avatar-fg);
     --a-icon-size: calc(var(--avatar-size) * 0.55);
     display: inline-flex;

package/components/badge/badge.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Badge.json",
   "title": "Badge",
-  "description": "Inline pill-shaped badge — READ-ONLY status flag, count, or\nnotification dot. Text rendered via CSS `attr(text)`. Distinct from\n<tag-ui>, which is INTERACTIVE / removable and fires a `remove`\nevent. Use badge-ui for status flags (Beta / New / Deprecated),\nnotification counts, and unread indicators; use tag-ui for filter\nchips or user-managed labels.\n",
+  "description": "Inline pill-shaped badge — READ-ONLY status flag, count, or\nnotification dot. Text rendered via CSS `attr(text)`. Distinct from\n<tag-ui>, which is INTERACTIVE / removable and fires a `remove`\nevent. Use badge-ui for status flags (Beta / New / Deprecated),\nnotification counts, and unread indicators; use tag-ui for filter\nchips or user-managed labels.\n\nREGISTER (gh issue 845; weight revised gh#866): badge and tag share\nthe same geometry family — pill radius (`--a-radius-full`) and\npadding token rhythm are identical, so shape is NOT how you tell\nthem apart. Typography is: badge is UPPERCASE, mono (kbd-ui's\n`--a-font-family-code` stack), medium weight, wide-tracked\n(`--a-font-tracking-wider`, 0.06em), tabular numerals for counts.\nTag stays proportional sentence-case, also weight 500 — weight no\nlonger distinguishes the two (gh#866); case + tracking + mono carry\nthe register split now. Neither component exposes a prop that\ncrosses this line; the registers cannot be mixed à la carte.\nRemaining distinctions: badge is non-interactive and carries the\nsemantic-color voice (status tones ARE the message, solid by\ndefault — gh#864); tag is interactive/removable, muted/tinted by\ndefault for family variants (gh#864), solid by default for the\nfamily-less variant (gh#794, unaffected by gh#864).\n",
   "type": "object",
   "allOf": [
     {
@@ -32,7 +32,7 @@
       "default": "md"
     },
     "status": {
-      "description": "Semantic status shorthand. Auto-maps to variant and sets text. `new` → success \"New\"; `updated` → info \"Updated\"; `deprecated` → warning \"Deprecated\"; `removed` → danger \"Removed\"; `beta` → accent \"Beta\". Use `variant` + `text` directly for custom chips.",
+      "description": "Semantic status shorthand. Auto-maps to variant and sets text. `new` → success \"New\"; `updated` → info \"Updated\"; `deprecated` → warning \"Deprecated\"; `removed` → danger \"Removed\"; `beta` → primary \"Beta\". Use `variant` + `text` directly for custom chips.",
       "type": "string",
       "enum": [
         "new",
@@ -53,28 +53,25 @@
       "$ref": "common_types.json#/$defs/DynamicString"
     },
     "tone": {
-      "description": "Fill style — orthogonal to [variant]. Badge defaults to `muted`\n(quiet metadata is the primitive's identity — counts, IDs, status\npills in dense rows). Three values:\n  - `muted` (default) — tinted bg + scheme-paired text. Same as\n    the existing family-variant rules.\n  - `solid` — saturated bg + on-strong text. Use for hero badges\n    where the badge IS the state (e.g. a single inline error). The\n    existing `primary` variant is a shortcut for accent + solid.\n  - `outline` — transparent bg + family-colored border + family-\n    colored text. Lightest visual weight; good in dense data rows.\nVocabulary mirrors `<tag-ui>` (which defaults to solid, given its\ndifferent role as filter / autocomplete chip).\n",
+      "description": "Fill style — orthogonal to [variant]. Badge defaults to `solid`\n(gh#864 — badge and tag were swapped relative to their reported\ndefault formulas; this restores badge's own). Three values:\n  - `solid` (default) — saturated bg + on-strong text. The badge\n    IS the state (status stamp). `primary` is badge's sole\n    brand-emphasis variant (`accent` retired, gh#874).\n  - `muted` — tinted bg + scheme-paired text. Use for quiet\n    metadata — counts, IDs, status pills in dense rows. Family-tinted\n    `muted` (e.g. `variant=\"info\" tone=\"muted\"`) shares `<tag-ui>`'s\n    `[tone=\"muted\"]` shape; family-less `tone=\"muted\"` does NOT\n    (gh#873) — it renders the stronger `neutral-low` fill, while\n    `<tag-ui>`'s family-less muted stays on the lighter\n    `--a-bg-muted` pair (gh#778 dense-list rationale).\n  - `outline` — transparent bg + family-colored border + family-\n    colored text. Lightest visual weight; good in dense data rows.\nVocabulary mirrors `<tag-ui>` (which now defaults to `muted` for\nits family variants, gh#864 — different role as filter /\nautocomplete chip).\n",
       "type": "string",
       "enum": [
         "muted",
         "solid",
         "outline"
       ],
-      "default": "muted"
+      "default": "solid"
     },
     "variant": {
       "description": "Semantic color variant.",
       "type": "string",
       "enum": [
         "default",
-        "accent",
         "info",
         "success",
         "warning",
         "danger",
-        "primary",
-        "muted",
-        "neutral"
+        "primary"
       ],
       "default": "default"
     }
@@ -94,7 +91,7 @@
     "examples": [
       {
         "description": "Horizontal chart legend — Row of Badges with icon=\"dot\". Each badge's variant supplies the dot color. CANONICAL PATTERN: do NOT compose legends as Row(Row(Badge[text=●], Text), …) — that produces rows-of-rows markup. Use one Badge[icon=dot, text=label, variant=color] per series instead.",
-        "a2ui": "[\n  {\n    \"id\": \"legend\",\n    \"component\": \"Row\",\n    \"gap\": \"3\",\n    \"align\": \"center\",\n    \"children\": [\n      \"l1\",\n      \"l2\",\n      \"l3\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"l1\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Organic\",\n    \"variant\": \"accent\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l2\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Direct\",\n    \"variant\": \"success\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Referral\",\n    \"variant\": \"warning\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Social\",\n    \"variant\": \"info\",\n    \"size\": \"sm\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"legend\",\n    \"component\": \"Row\",\n    \"gap\": \"3\",\n    \"align\": \"center\",\n    \"children\": [\n      \"l1\",\n      \"l2\",\n      \"l3\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"l1\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Organic\",\n    \"variant\": \"primary\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l2\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Direct\",\n    \"variant\": \"success\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Referral\",\n    \"variant\": \"warning\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Social\",\n    \"variant\": \"info\",\n    \"size\": \"sm\"\n  }\n]",
         "name": "chart-legend"
       },
       {

package/components/badge/badge.class.js

@@ -12,14 +12,14 @@
  */
 
 /**
- * <badge-ui text="New" variant="accent"></badge-ui>
+ * <badge-ui text="New" variant="primary"></badge-ui>
  * <badge-ui text="3" variant="danger" size="sm"></badge-ui>
- * <badge-ui text="Organic" variant="accent" icon="dot"></badge-ui>  ← chart legend chip
+ * <badge-ui text="Organic" variant="primary" icon="dot"></badge-ui>  ← chart legend chip
  * <badge-ui status="beta"></badge-ui>                                ← status shorthand
  *
  * Inline badge / tag. Pill-shaped, text rendered via CSS attr().
  *
- * Variants: default, accent, info, success, warning, danger, primary, muted, neutral
+ * Variants: default, info, success, warning, danger, primary
  * Sizes: sm, md (default)
  * Icon: optional leading icon (any registered icon name; "dot" for legend
  *       markers). Inherits the variant's foreground color so legend chips
@@ -34,7 +34,7 @@ const STATUS_MAP = {
   updated:    { variant: 'info',    text: 'Updated' },
   deprecated: { variant: 'warning', text: 'Deprecated' },
   removed:    { variant: 'danger',  text: 'Removed' },
-  beta:       { variant: 'accent',  text: 'Beta' },
+  beta:       { variant: 'primary', text: 'Beta' },
 };
 
 export class UIBadge extends UIElement {

package/components/badge/badge.css

@@ -1,14 +1,52 @@
 @scope (badge-ui) {
   :where(:scope) {
-    /* ── Tokens ── */
-    --badge-bg:        var(--a-bg-muted);
-    --badge-fg:        var(--md-sys-color-neutral-on-surface);
-    --badge-radius:    var(--a-radius-md);
+    /* ── Tokens ──
+       The family-less default was still `--a-bg-muted` + `-on-surface`
+       (quiet chrome) even after gh#864 made every family variant solid
+       by default — an inconsistency the swap missed, since it only
+       touched variants that HAD a family. Moved to the real
+       `--md-sys-color-neutral`/`-on-neutral` pair (operator ruling,
+       2026-08-10) — the true parallel to `-primary`/`-on-primary` etc.,
+       matching badge's own "solid by default" register and <tag-ui>'s
+       already-solid neutral default. `[tone="muted"]` (below) still
+       opts into the quiet chrome this rule used to carry unconditionally. */
+    --badge-bg:        var(--md-sys-color-neutral);
+    --badge-fg:        var(--md-sys-color-neutral-on-neutral);
+    /* ── Geometry (issue 845) — aligned to tag-ui's token rhythm. Radius now
+       consumes the SAME --a-radius-full pill tag-ui uses (was --a-radius-md,
+       a squarer chip) — shape is no longer the differentiation axis between
+       the two (operator ruling, issue 845). Padding already shared tag's
+       exact token structure pre-845 (see the size-tier comment below) —
+       only radius moved. */
+    --badge-radius:    var(--a-radius-full);
     --badge-px:        var(--a-space-1-5);
-    --badge-py:        2px;
+    --badge-py:        var(--a-space-0-5);
     --badge-gap:       var(--a-space-1);
     --badge-font-size: var(--a-ui-sm);
-    --badge-font-family: var(--a-font-family-ui);
+    /* ── Typographic register (issue 845; weight revised gh#866) — mono
+       TRIAL taken: kbd-ui's own stack (--a-font-family-code, kbd.css) held
+       up at small badge sizes (roughly a dozen logical pixels) in both
+       schemes once paired with wide tracking (screenshot-verified, see PR
+       body) — did not read starved/gappy, so the trial's fallback branch
+       (tracked-caps sans) was not needed. Weight moved semibold → medium
+       (gh#866) — it no longer distinguishes badge from tag (tag is also
+       weight 500). Uppercase + wide tracking + mono + tabular-nums is the
+       register now — this is what makes a badge unmistakably NOT a tag
+       (which stays proportional sentence-case) at a glance. */
+    --badge-font-family: var(--a-font-family-code);
+    --badge-weight:      var(--a-weight-medium);
+    --badge-tracking:    var(--a-font-tracking-wider); /* 0.06em — within the +0.04–0.08em ruling */
+
+    /* ── Size tiers (gh#779) — md (above) is the pixel-identical default.
+       Component-owned ladder, not a direct alias of the universal
+       --a-ui-px/--a-ui-size tokens — see tag.css's identical note (badge
+       and tag share this md baseline and this exact reasoning). */
+    --badge-px-sm:  var(--a-space-1);
+    --badge-px-lg:  var(--a-space-2);
+    --badge-py-sm:  var(--a-space-px);
+    --badge-py-lg:  var(--a-space-1);
+    --badge-font-size-sm: var(--a-ui-xs);
+    --badge-font-size-lg: var(--a-ui-md);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -27,8 +65,15 @@
     /* font-family floor — see segment.css rationale. */
     font-family: var(--badge-font-family);
     font-size: var(--badge-font-size);
-    font-weight: 500;
+    font-weight: var(--badge-weight);
     line-height: 1;
+    /* ── Register (issue 845) — uppercase + tracking + tabular numerals is the
+       badge/tag differentiator now that geometry is shared (see the
+       --badge-radius note above). Tag stays proportional sentence-case at
+       weight 500 (tag.css) — never uppercase, never tracked. */
+    text-transform: uppercase;
+    letter-spacing: var(--badge-tracking);
+    font-variant-numeric: tabular-nums;
     border-radius: var(--badge-radius);
     white-space: nowrap;
     vertical-align: middle;
@@ -45,7 +90,7 @@
 
   /* 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. primary variant → primary-colored dot + primary-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. */
@@ -67,93 +112,91 @@
   }
 
   /* ── 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.
-     --a-{family}-text-strong is for solid fills (--a-{family}-bg) and would
-     collapse contrast on muted: warning fails in dark, danger fails in light.
-     Accent keeps the saturated-text-on-tint look (intentional brand emphasis). */
-  :scope[variant="accent"] {
-    --badge-bg: var(--md-sys-color-primary-container);
-    --badge-fg: var(--md-sys-color-primary-on-surface);
-  }
+     Family fg pairs with the family's own solid bg — this is badge's
+     default tone (gh#864). Badge and tag had been implementing each
+     OTHER's reported default formula (gh#794 flipped tag's bare default to
+     solid a day before gh#845 ratified badge's register, with no cross-
+     check between the two changes) — this restores badge's own: saturated
+     `--a-{family}-bg` + Material's on-color (`-on-{family}`, near-white by
+     the fixed-light-on-color law). Reads as a status stamp — the badge IS
+     the state. `[tone="muted"]` below opts into the tinted-container pair
+     instead (the shape this rule used to carry pre-gh#864).
 
+     Warning uses --a-warning-bg (semantics.css L3 redirect to the bright-
+     amber -20-tint) rather than the raw family token, which would collapse
+     to muddy brown-on-brown (-on-warning is dark, the raw mid-tone bg
+     isn't). See <tag-ui>'s identical workaround. */
   :scope[variant="info"] {
-    --badge-bg: var(--md-sys-color-info-container);
-    --badge-fg: var(--md-sys-color-info-on-surface);
+    --badge-bg: var(--a-info-bg);
+    --badge-fg: var(--md-sys-color-info-on-info);
   }
 
   :scope[variant="success"] {
-    --badge-bg: var(--md-sys-color-success-container);
-    --badge-fg: var(--md-sys-color-success-on-surface);
+    --badge-bg: var(--a-success-bg);
+    --badge-fg: var(--md-sys-color-success-on-success);
   }
 
   :scope[variant="warning"] {
-    --badge-bg: var(--md-sys-color-warning-container);
-    --badge-fg: var(--md-sys-color-warning-on-surface);
+    --badge-bg: var(--a-warning-bg);
+    --badge-fg: var(--md-sys-color-warning-on-warning);
   }
 
   :scope[variant="danger"] {
-    --badge-bg: var(--md-sys-color-danger-container);
-    --badge-fg: var(--md-sys-color-danger-on-surface);
+    --badge-bg: var(--a-danger-bg);
+    --badge-fg: var(--md-sys-color-danger-on-danger);
   }
 
-  /* `primary` is the accent-filled variant — solid bg + on-accent text,
-     used for "PRO"-style emphasis chips that should read as a brand
-     stamp rather than tinted-on-canvas. Uses the L3 primary-* surface
-     matrix so it tracks the same accent-strong source as button-ui's
-     primary variant. */
+  /* `primary` is badge's sole brand-emphasis variant (accent retired,
+     gh#874 — this rule is the identical solid pair the deleted
+     [variant="accent"] rule used to carry; renamed, not restyled).
+     Uses the L3 primary-* surface matrix so it tracks the same source
+     as button-ui's primary variant. */
   :scope[variant="primary"] {
     --badge-bg: var(--a-primary-bg);
     --badge-fg: var(--md-sys-color-primary-on-primary);
   }
 
-  /* `muted` and `neutral` are semantic aliases of the base — same tokens
-     as the default variant, declared explicitly so the yaml enum and the
-     CSS contract agree. Use cases: passive metadata chips (counts, IDs,
-     "Not set" states) where the badge should read as quiet chrome. */
-  :scope[variant="muted"],
-  :scope[variant="neutral"] {
-    --badge-bg: var(--a-bg-muted);
-    --badge-fg: var(--md-sys-color-neutral-on-surface);
-  }
-
   /* ── Tone modifier — orthogonal to [variant] ──
-     Badge's default tone is `muted` (the rules above) — quiet metadata is
-     the primitive's identity. `[tone="solid"]` opts into the saturated-fill
-     pair (same shape <tag-ui>'s solid default uses); `[tone="outline"]`
-     into the transparent-fill + colored-ring shape. Same vocabulary as
-     <tag-ui>; different defaults reflecting each primitive's role.
-
-     Warning uses --a-warning-20-tint as bg (a bright amber, scheme-
-     independent) instead of --a-warning-bg — the latter pair collapses
-     to muddy brown-on-brown (-text-strong is dark, -bg is mid-tone).
-     See <tag-ui>'s identical workaround. Token-system follow-up planned. */
-  :scope[tone="solid"][variant="info"] {
-    --badge-bg: var(--a-info-bg);
-    --badge-fg: var(--md-sys-color-info-on-info);
+     Badge's default tone is `solid` (the family rules above, gh#864).
+     `[tone="muted"]` opts into the tinted-container pair (family-container
+     bg + family-on-surface fg — the shape <tag-ui>'s own default now uses,
+     gh#864); `[tone="outline"]` into the transparent-fill + colored-ring
+     shape. Same vocabulary as <tag-ui>; each component's default now
+     matches its own reported target instead of the other's. */
+  :scope[tone="muted"][variant="info"] {
+    --badge-bg: var(--md-sys-color-info-container);
+    --badge-fg: var(--md-sys-color-info-on-surface);
   }
-  :scope[tone="solid"][variant="success"] {
-    --badge-bg: var(--a-success-bg);
-    --badge-fg: var(--md-sys-color-success-on-success);
+  :scope[tone="muted"][variant="success"] {
+    --badge-bg: var(--md-sys-color-success-container);
+    --badge-fg: var(--md-sys-color-success-on-surface);
   }
-  :scope[tone="solid"][variant="warning"] {
-    /* --a-warning-bg is the bright-amber step (semantics.css L3 redirect
-       to -20-tint) — see also <tag-ui>'s warning solid pair. */
-    --badge-bg: var(--a-warning-bg);
-    --badge-fg: var(--md-sys-color-warning-on-warning);
+  :scope[tone="muted"][variant="warning"] {
+    --badge-bg: var(--md-sys-color-warning-container);
+    --badge-fg: var(--md-sys-color-warning-on-surface);
   }
-  :scope[tone="solid"][variant="danger"] {
-    --badge-bg: var(--a-danger-bg);
-    --badge-fg: var(--md-sys-color-danger-on-danger);
+  :scope[tone="muted"][variant="danger"] {
+    --badge-bg: var(--md-sys-color-danger-container);
+    --badge-fg: var(--md-sys-color-danger-on-surface);
   }
-  :scope[tone="solid"][variant="accent"] {
-    --badge-bg: var(--a-primary-bg);
-    --badge-fg: var(--md-sys-color-primary-on-primary);
+  :scope[tone="muted"][variant="primary"] {
+    --badge-bg: var(--md-sys-color-primary-container);
+    --badge-fg: var(--md-sys-color-primary-on-surface);
   }
-  /* Solid on neutral default → high-contrast inverse stamp. */
-  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]):not([variant="primary"]) {
-    --badge-bg: var(--md-sys-color-neutral-on-surface);
-    --badge-fg: var(--md-sys-color-neutral-background);
+  /* Family-less muted — the quiet-chrome opt-out for passive metadata
+     chips (counts, IDs, "Not set"). bg is the neutral-low fill (gh#873;
+     first consumer of this token) paired with neutral-on-surface text —
+     NOT the requested neutral-high, which measures ~3:1 against
+     neutral-low in both schemes and fails AA at badge's ~12px text size
+     (pair is roster-gated in verify:contrast). Distinct from the base
+     (no-attribute) default, which is solid neutral/on-neutral (commit
+     984a4401e) — muted is the quieter tint, solid is the stamp. NB
+     tag-ui's family-less [tone="muted"] intentionally stays on the
+     lighter --a-bg-muted pair (gh#778 dense-list rationale) — the two
+     components' family-less muteds are no longer the same shape. */
+  :scope[tone="muted"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="primary"]) {
+    --badge-bg: var(--md-sys-color-neutral-low);
+    --badge-fg: var(--md-sys-color-neutral-on-surface);
   }
 
   /* ── `[tone="outline"]` — transparent bg + family-colored border + text ── */
@@ -177,15 +220,32 @@
     --badge-fg:     var(--md-sys-color-danger-on-surface);
     --badge-border: var(--md-sys-color-danger-outline);
   }
-  :scope[tone="outline"][variant="accent"] {
+  :scope[tone="outline"][variant="primary"] {
     --badge-fg:     var(--md-sys-color-primary-on-surface);
     --badge-border: var(--md-sys-color-primary-outline);
   }
   /* Outline on neutral — fg-muted text + subtle ring. */
-  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]):not([variant="primary"]) {
+  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="primary"]) {
     --badge-fg:     var(--a-fg-muted);
     --badge-border: var(--md-sys-color-neutral-outline);
   }
 
-  /* Size handled by universal [size] attribute system. */
+  /* ── Size tiers (gh#779) — re-point the active tokens to the matching
+     tier; the token defaults at :where(:scope) above ARE the md tier, so
+     [size="md"] is declared only for explicitness (mirrors kbd.css). */
+  :scope[size="sm"] {
+    --badge-px:        var(--badge-px-sm);
+    --badge-py:        var(--badge-py-sm);
+    --badge-font-size: var(--badge-font-size-sm);
+  }
+  :scope[size="md"] {
+    --badge-px:        var(--a-space-1-5);
+    --badge-py:        var(--a-space-0-5);
+    --badge-font-size: var(--a-ui-sm);
+  }
+  :scope[size="lg"] {
+    --badge-px:        var(--badge-px-lg);
+    --badge-py:        var(--badge-py-lg);
+    --badge-font-size: var(--badge-font-size-lg);
+  }
 }

package/components/badge/badge.d.ts

@@ -6,6 +6,22 @@ event. Use badge-ui for status flags (Beta / New / Deprecated),
 notification counts, and unread indicators; use tag-ui for filter
 chips or user-managed labels.
 
+REGISTER (gh issue 845; weight revised gh#866): badge and tag share
+the same geometry family — pill radius (`--a-radius-full`) and
+padding token rhythm are identical, so shape is NOT how you tell
+them apart. Typography is: badge is UPPERCASE, mono (kbd-ui's
+`--a-font-family-code` stack), medium weight, wide-tracked
+(`--a-font-tracking-wider`, 0.06em), tabular numerals for counts.
+Tag stays proportional sentence-case, also weight 500 — weight no
+longer distinguishes the two (gh#866); case + tracking + mono carry
+the register split now. Neither component exposes a prop that
+crosses this line; the registers cannot be mixed à la carte.
+Remaining distinctions: badge is non-interactive and carries the
+semantic-color voice (status tones ARE the message, solid by
+default — gh#864); tag is interactive/removable, muted/tinted by
+default for family variants (gh#864), solid by default for the
+family-less variant (gh#794, unaffected by gh#864).
+
  *
  * @see https://ui-kit.exe.xyz/site/components/badge
  *
@@ -23,26 +39,32 @@ export class UIBadge extends UIElement {
   icon: string;
   /** Badge size (sm/md/lg). For a denser or larger register, set [scale] on an ancestor. */
   size: 'sm' | 'md' | 'lg';
-  /** Semantic status shorthand. Auto-maps to variant and sets text. `new` → success "New"; `updated` → info "Updated"; `deprecated` → warning "Deprecated"; `removed` → danger "Removed"; `beta` → accent "Beta". Use `variant` + `text` directly for custom chips. */
+  /** Semantic status shorthand. Auto-maps to variant and sets text. `new` → success "New"; `updated` → info "Updated"; `deprecated` → warning "Deprecated"; `removed` → danger "Removed"; `beta` → primary "Beta". Use `variant` + `text` directly for custom chips. */
   status: 'new' | 'updated' | 'deprecated' | 'removed' | 'beta';
   /** Badge text content. Falls back to existing textContent. */
   text: string;
   /** Badge display text. Renderer routes this to the `text` attribute via CSS attr(text) on ::after. */
   textContent: string;
-  /** Fill style — orthogonal to [variant]. Badge defaults to `muted`
-(quiet metadata is the primitive's identity — counts, IDs, status
-pills in dense rows). Three values:
-  - `muted` (default) — tinted bg + scheme-paired text. Same as
-    the existing family-variant rules.
-  - `solid` — saturated bg + on-strong text. Use for hero badges
-    where the badge IS the state (e.g. a single inline error). The
-    existing `primary` variant is a shortcut for accent + solid.
+  /** Fill style — orthogonal to [variant]. Badge defaults to `solid`
+(gh#864 — badge and tag were swapped relative to their reported
+default formulas; this restores badge's own). Three values:
+  - `solid` (default) — saturated bg + on-strong text. The badge
+    IS the state (status stamp). `primary` is badge's sole
+    brand-emphasis variant (`accent` retired, gh#874).
+  - `muted` — tinted bg + scheme-paired text. Use for quiet
+    metadata — counts, IDs, status pills in dense rows. Family-tinted
+    `muted` (e.g. `variant="info" tone="muted"`) shares `<tag-ui>`'s
+    `[tone="muted"]` shape; family-less `tone="muted"` does NOT
+    (gh#873) — it renders the stronger `neutral-low` fill, while
+    `<tag-ui>`'s family-less muted stays on the lighter
+    `--a-bg-muted` pair (gh#778 dense-list rationale).
   - `outline` — transparent bg + family-colored border + family-
     colored text. Lightest visual weight; good in dense data rows.
-Vocabulary mirrors `<tag-ui>` (which defaults to solid, given its
-different role as filter / autocomplete chip).
+Vocabulary mirrors `<tag-ui>` (which now defaults to `muted` for
+its family variants, gh#864 — different role as filter /
+autocomplete chip).
  */
   tone: 'muted' | 'solid' | 'outline';
   /** Semantic color variant. */
-  variant: 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'primary' | 'muted' | 'neutral';
+  variant: 'default' | 'info' | 'success' | 'warning' | 'danger' | 'primary';
 }

package/components/badge/badge.examples.md

@@ -46,5 +46,5 @@
 ## tone
 
 ```html
-<badge-ui text="Info" variant="info" tone="solid"></badge-ui>
+<badge-ui text="Count" tone="muted"></badge-ui>
 ```