@adia-ai/web-components 0.8.32 → 0.8.33

package/components/badge/badge.css

@@ -1,14 +1,41 @@
 @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:        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
@@ -38,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;
@@ -56,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. */
@@ -78,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 ── */
@@ -188,12 +220,12 @@
     --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);
   }

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>
 ```

package/components/badge/badge.yaml

@@ -14,6 +14,22 @@ description: |
   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).
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
@@ -35,7 +51,7 @@ props:
   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".
+      "Deprecated"; `removed` → danger "Removed"; `beta` → primary "Beta".
       Use `variant` + `text` directly for custom chips.
     type: string
     default: ""
@@ -60,30 +76,33 @@ props:
     default: default
     enum:
       - default
-      - accent
       - info
       - success
       - warning
       - danger
       - primary
-      - muted
-      - neutral
   tone:
     description: |
-      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).
     type: string
-    default: muted
+    default: solid
     enum:
       - muted
       - solid
@@ -100,6 +119,8 @@ a2ui:
   rules:
     - rule: 'Use for small status/count labels attached to another element (notification counts, status pills, version tags).'
       reason: 'Different from <tag-ui> which is for free-standing taxonomy/filter labels.'
+    - rule: 'A bare Badge (no [tone]) renders a solid, saturated status stamp. Set [tone="muted"] for the quieter tinted look on dense metadata rows.'
+      reason: 'Badge defaults to solid (gh#864); does not need [tone] set explicitly to read as a status stamp.'
     - rule: 'Place adjacent to or absolutely-positioned over the badged element, not inside it.'
       reason: 'Light-DOM positioning; do not nest inside the badged element''s slot.'
     - rule: 'For dismissable taxonomy labels (filter chips, selected items in multi-select), use <tag-ui> instead.'
@@ -130,7 +151,7 @@ examples:
           "component": "Badge",
           "icon": "dot",
           "text": "Organic",
-          "variant": "accent",
+          "variant": "primary",
           "size": "sm"
         },
         {

package/components/button/button.a2ui.json

@@ -27,7 +27,6 @@
       "type": "string",
       "enum": [
         "default",
-        "accent",
         "info",
         "success",
         "warning",
@@ -83,6 +82,7 @@
       "enum": [
         "default",
         "solid",
+        "tonal",
         "outline",
         "ghost",
         "primary"

package/components/button/button.css

@@ -252,8 +252,10 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
   /* ── Color (semantic axis) ──
      `[color]` carries semantic intent; `variant` carries visual style.
      Together they compose: `<button-ui variant="solid" color="danger">`
-     vs `<button-ui variant="outline" color="danger">`.
-     `variant="danger"` is a deprecated alias migrated to color via JS. */
+     vs `<button-ui variant="outline" color="danger">`. (Corrected,
+     variant-color-tone LLD §2: no `variant="danger"` → `color` alias
+     JS exists in button.class.js — the prior comment claiming one was
+     stale.) */
   :scope[color="danger"] {
     --button-bg: var(--button-bg-danger);
     --button-fg: var(--button-fg-danger);

package/components/button/button.d.ts

@@ -18,7 +18,7 @@ export class UIButton extends UIElement {
   /** HTML button type (button, submit, reset) */
   type: string;
   /** Semantic intent — composes with [variant]. `<button-ui variant="solid" color="danger">` = filled destructive action; `<button-ui variant="outline" color="success">` = outlined success affordance. */
-  color: 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+  color: 'default' | 'info' | 'success' | 'warning' | 'danger';
   /** Disables interaction and prevents click/press events */
   disabled: boolean;
   /** Leading Phosphor icon name (rendered before text). */
@@ -33,7 +33,7 @@ export class UIButton extends UIElement {
   textContent: string;
   /** Visual style — `solid` (default fill), `tonal` (soft container fill with in-family text — the emphasis tier between solid and outline; default rides the primary family), `outline`, `ghost`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color="…"] alongside (`variant="tonal" color="danger"` = the danger family's container fill). There is deliberately no `variant="secondary"`: `secondary` names a color family in this system, and an unset variant already IS the secondary-rank look (compose-constitution); `tonal` is the named tier for a softer-than-solid filled action.
 For **inline navigation** (Terms of Service, Privacy Policy, footer links, "Sign in" / "Sign up" cross-page affordances) use `<link-ui>` instead — it carries proper `<a href>` semantics, keyboard handling (Enter only, no Space), middle-click open-new-tab, and screen-reader announces "link" instead of "button". Mixing navigation and action affordances under the same primitive is a category error fixed at this junction. */
-  variant: 'default' | 'solid' | 'outline' | 'ghost' | 'primary';
+  variant: 'default' | 'solid' | 'tonal' | 'outline' | 'ghost' | 'primary';
 
   addEventListener(type: 'press', listener: (ev: ButtonPressEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(

package/components/button/button.yaml

@@ -83,6 +83,7 @@ props:
     enum:
       - default
       - solid
+      - tonal
       - outline
       - ghost
       - primary
@@ -95,7 +96,6 @@ props:
     default: ""
     enum:
       - default
-      - accent
       - info
       - success
       - warning

package/components/card/card.yaml

@@ -132,7 +132,7 @@ a2ui:
   - The card's <header> grid activates only for DIRECT-child slotted elements. If you need an icon column, place the icon
     element (avatar-ui, icon-ui) directly in the header with slot="icon" — not inside a wrapper.
   - 'Heading slot accepts inline badges/metadata: <span slot="heading"><text-ui strong>Title</text-ui><badge-ui text="New"
-    variant="accent"></badge-ui></span> renders title + badge on one row.'
+    variant="primary"></badge-ui></span> renders title + badge on one row.'
   - Description slot also accepts bare <p> or <small> elements as siblings of the heading — they participate in the grid's
     row 2 without needing slot="description".
   - Multiple <section> siblings are allowed and stack vertically. [bleed] on a section removes its margin for edge-to-edge

package/components/chart/chart.class.js

@@ -1366,9 +1366,13 @@ export class UIChart extends UIElement {
     const data = this.#data;
     const yKey = this.#yKeys()[0] || this.y;
     const vals = data.map(d => +(d[yKey] ?? 0));
-    const maxVal = Math.max(...vals) || 1;
-    const minVal = Math.min(...vals);
-    const range = maxVal - minVal || 1;
+
+    // Fixed 0-floor domain via niceScale — the same convention every other
+    // renderer in this file uses (#renderBar, #renderLine, #renderScatter,
+    // etc). A flat/single-point series then plots against a real baseline
+    // instead of collapsing to the bottom edge (gh#850).
+    const ticks = niceScale(0, Math.max(...vals), 5);
+    const maxVal = ticks[ticks.length - 1];
 
     // Use the actual container dims so the aspect ratio matches what
     // the CSS allocates (otherwise the fixed 120×32 viewBox gets
@@ -1385,7 +1389,7 @@ export class UIChart extends UIElement {
     const labels = data.map(d => d[this.x] ?? '');
     const points = vals.map((v, i) => ({
       x: step * i,
-      y: h - ((v - minVal) / range) * (h - padY * 2) - padY,
+      y: h - (maxVal ? (v / maxVal) * (h - padY * 2) : 0) - padY,
       v,
       label: labels[i],
     }));

package/components/integration-card/integration-card.class.js

@@ -48,11 +48,14 @@ const ACTION_FOR_STATUS = Object.freeze({
   pending:       { event: 'press',     emits: '',           label: 'Connecting…', variant: 'outline', icon: '' },
 });
 
+// `coming-soon` is a family-less badge, tone="muted" — `variant="muted"`
+// retired (variant/color/tone convention cut, gh#873/874); `#renderStatusBadge()`
+// below branches on `variant` vs. absent.
 const BADGE_FOR_STATUS = Object.freeze({
   connected:    { variant: 'success', text: 'Connected',   icon: 'check' },
   error:        { variant: 'danger',  text: 'Error',       icon: 'warning-circle' },
   pending:      { variant: 'info',    text: 'Connecting…', icon: '' },
-  'coming-soon':{ variant: 'muted',   text: 'Coming soon', icon: '' },
+  'coming-soon':{ text: 'Coming soon', icon: '' },
 });
 
 // Fallback glyph per known provider when no explicit [logo] is supplied, so
@@ -312,7 +315,13 @@ export class UIIntegrationCard extends UIElement {
       return;
     }
     this.#statusEl.hidden = false;
-    this.#statusEl.setAttribute('variant', cfg.variant);
+    if (cfg.variant) {
+      this.#statusEl.setAttribute('variant', cfg.variant);
+      this.#statusEl.removeAttribute('tone');
+    } else {
+      this.#statusEl.removeAttribute('variant');
+      this.#statusEl.setAttribute('tone', 'muted');
+    }
     this.#statusEl.setAttribute('text', cfg.text);
     this.#statusEl.setAttribute('size', 'sm');
     if (cfg.icon) this.#statusEl.setAttribute('icon', cfg.icon);

package/components/mark/mark.a2ui.json

@@ -17,14 +17,13 @@
       "const": "Mark"
     },
     "variant": {
-      "description": "Highlight color variant. Default `warning` is the conventional yellow-marker tone.",
+      "description": "Highlight color family — the only color axis mark exposes. Default `warning` is the conventional yellow-marker tone and IS mark's family-less identity, so there is no `default` member. For a neutral (non-semantic) highlight, override the public tokens instead of the variant: `--mark-bg: var(--a-bg-muted); --mark-fg: var(--md-sys-color-neutral-on-surface)` — the successor to the retired `variant=\"muted\"` (gh#881).",
       "type": "string",
       "enum": [
         "warning",
         "info",
         "success",
-        "danger",
-        "muted"
+        "danger"
       ],
       "default": "warning"
     }
@@ -87,12 +86,12 @@
     "tag": "mark-ui",
     "tokens": {
       "--mark-bg": {
-        "description": "Background color of the highlight.",
-        "default": "var(--a-warning-muted)"
+        "description": "Background color of the highlight. Override for a non-semantic (e.g. neutral) highlight — see [variant].",
+        "default": "var(--md-sys-color-warning-container)"
       },
       "--mark-fg": {
-        "description": "Foreground (text) color inside the highlight.",
-        "default": "var(--a-warning-text)"
+        "description": "Foreground (text) color inside the highlight. Pair every [--mark-bg] override with a matching fg so contrast holds in both schemes.",
+        "default": "var(--md-sys-color-warning-on-surface)"
       },
       "--mark-px": {
         "description": "Horizontal padding around the highlighted text.",

package/components/mark/mark.class.js

@@ -8,7 +8,7 @@ import { UIElement } from '../../core/element.js';
 
 export class UIMark extends UIElement {
   static properties = {
-    variant: { type: String, default: 'warning', reflect: true }, // warning | info | success | danger | muted
+    variant: { type: String, default: 'warning', reflect: true }, // warning | info | success | danger
   };
 
   static template = () => null;

package/components/mark/mark.css

@@ -32,8 +32,11 @@
     --mark-bg: var(--md-sys-color-danger-container);
     --mark-fg: var(--md-sys-color-danger-on-surface);
   }
-  :scope[variant="muted"] {
-    --mark-bg: var(--a-bg-muted);
-    --mark-fg: var(--md-sys-color-neutral-on-surface);
-  }
+
+  /* NB `variant` is mark's ONLY color axis and it is family-only
+     (gh#881, the two-axis convention). The former `variant="muted"`
+     neutral highlight is retired; its successor is the public token
+     override — `--mark-bg: var(--a-bg-muted); --mark-fg:
+     var(--md-sys-color-neutral-on-surface)` — so a non-semantic
+     highlight no longer needs an enum member of its own. */
 }

package/components/mark/mark.d.ts

@@ -22,6 +22,6 @@ background highlight behind the matched span.
 import { UIElement } from '../../core/element.js';
 
 export class UIMark extends UIElement {
-  /** Highlight color variant. Default `warning` is the conventional yellow-marker tone. */
-  variant: 'warning' | 'info' | 'success' | 'danger' | 'muted';
+  /** Highlight color family — the only color axis mark exposes. Default `warning` is the conventional yellow-marker tone and IS mark's family-less identity, so there is no `default` member. For a neutral (non-semantic) highlight, override the public tokens instead of the variant: `--mark-bg: var(--a-bg-muted); --mark-fg: var(--md-sys-color-neutral-on-surface)` — the successor to the retired `variant="muted"` (gh#881). */
+  variant: 'warning' | 'info' | 'success' | 'danger';
 }