@adia-ai/web-components 0.8.32 → 0.8.33

package/components/mark/mark.examples.md

@@ -42,10 +42,6 @@
     <mark-ui variant="danger">danger</mark-ui>
     — removed line, conflict.
   </text-ui>
-  <text-ui>
-    <mark-ui variant="muted">muted</mark-ui>
-    — neutral emphasis.
-  </text-ui>
 </col-ui>
 ```
 

package/components/mark/mark.yaml

@@ -17,7 +17,14 @@ description: |
   background highlight behind the matched span.
 props:
   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
     default: warning
     enum:
@@ -25,7 +32,6 @@ props:
       - info
       - success
       - danger
-      - muted
     reflect: true
 events: {}
 slots:
@@ -37,11 +43,15 @@ states:
 traits: []
 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.
     default: var(--a-space-0-5)

package/components/option-card/option-card.examples.md

@@ -24,7 +24,7 @@
     <span slot="heading">
       Pro
       <text-ui color="subtle" size="sm">· $49/mo</text-ui>
-      <badge-ui text="14-day trial" variant="accent"></badge-ui>
+      <badge-ui text="14-day trial" variant="primary"></badge-ui>
     </span>
   </option-card-ui>
   <option-card-ui name="demo-plan" value="team" description="Everything in Pro · SSO · audit log · 1 TB storage">

package/components/popover/popover.a2ui.json

@@ -21,6 +21,11 @@
       "type": "number",
       "default": 4
     },
+    "match-width": {
+      "description": "Size the content panel to the trigger's width instead of max-content. Opt-in — the default (unset) keeps every existing consumer's content-sized panel unchanged.",
+      "type": "boolean",
+      "default": false
+    },
     "open": {
       "description": "Controls visibility via showPopover()/hidePopover()",
       "type": "boolean",

package/components/popover/popover.class.js

@@ -24,6 +24,9 @@
  *     (see @core/anchor.js).
  *
  * Triggers: click | hover | manual. ESC closes click/manual popovers.
+ *
+ * Set [match-width] to size the panel to the trigger's width instead of
+ * max-content (opt-in — see @core/anchor.js's `matchWidth` option).
  */
 
 import { UIElement } from '../../core/element.js';
@@ -33,10 +36,11 @@ const HOVER_CLOSE_DELAY = 120;
 
 export class UIPopover extends UIElement {
   static properties = {
-    placement: { type: String,  default: 'bottom', reflect: true },
-    gap:       { type: Number,  default: 4, reflect: true },
-    open:      { type: Boolean, default: false, reflect: true },
-    trigger:   { type: String,  default: 'click', reflect: true },
+    placement:  { type: String,  default: 'bottom', reflect: true },
+    gap:        { type: Number,  default: 4, reflect: true },
+    open:       { type: Boolean, default: false, reflect: true },
+    trigger:    { type: String,  default: 'click', reflect: true },
+    matchWidth: { type: Boolean, default: false, reflect: true, attribute: 'match-width' },
   };
 
   static template = () => null;
@@ -104,6 +108,7 @@ export class UIPopover extends UIElement {
     this.#anchorCleanup = anchorPopover(trigger, content, {
       placement: this.placement,
       gap: this.gap,
+      matchWidth: this.matchWidth,
     });
 
     if (this.trigger === 'click' || this.trigger === 'manual') {

package/components/popover/popover.css

@@ -12,9 +12,12 @@
        mode (dimmer = neutral-925, darker than the neutral-875 page it floats
        over — the panel read near-black). Matches select-ui's own dropdown
        surface exactly, so the two overlays on a shell's topbar (a select
-       menu and a popover panel) sit on one plane. */
+       menu and a popover panel) sit on one plane. Border matches too
+       (gh#857) — `--a-ui-border` (→ outline), same token select-ui's
+       `[slot="listbox"]` uses, not outline-variant (that's for internal
+       dividers — separators, group rules — a different role). */
     --popover-bg:      var(--md-sys-color-neutral-surface-bright);
-    --popover-border:  var(--md-sys-color-neutral-outline-variant);
+    --popover-border:  var(--a-ui-border);
     --popover-shadow:  var(--a-shadow-lg);
   }
 

package/components/popover/popover.yaml

@@ -13,6 +13,14 @@ props:
     description: Pixel offset between the anchor and the popover
     type: number
     default: 4
+  match-width:
+    description: >-
+      Size the content panel to the trigger's width instead of
+      max-content. Opt-in — the default (unset) keeps every existing
+      consumer's content-sized panel unchanged.
+    type: boolean
+    default: false
+    reflect: true
   open:
     description: Controls visibility via showPopover()/hidePopover()
     type: boolean

package/components/preview/preview.examples.md

@@ -13,7 +13,7 @@
 
 ```html
 <preview-ui layout="split">
-  <badge-ui text="New" variant="accent"></badge-ui>
+  <badge-ui text="New" variant="primary"></badge-ui>
   <badge-ui text="Beta" variant="warning"></badge-ui>
   <badge-ui text="Stable" variant="success"></badge-ui>
 </preview-ui>

package/components/table/cell-types.js

@@ -173,7 +173,18 @@ registerCellType('badge', {
     }
     el.setAttribute('text', String(value ?? ''));
     const variants = meta?.variants || {};
-    el.setAttribute('variant', variants[value] || 'neutral');
+    const variant = variants[value];
+    // Unmapped value → family-less badge, tone="muted" (quiet chrome) —
+    // `variant="neutral"` retired (variant/color/tone convention cut,
+    // gh#873/874). Element is reused across renders, so both attributes
+    // are explicitly set/cleared rather than only ever added.
+    if (variant) {
+      el.setAttribute('variant', variant);
+      el.removeAttribute('tone');
+    } else {
+      el.removeAttribute('variant');
+      el.setAttribute('tone', 'muted');
+    }
   },
   format(value) {
     return String(value ?? '');

package/components/table-toolbar/table-toolbar.class.js

@@ -272,7 +272,7 @@ export class UITableToolbar extends UIElement {
     const badge = document.createElement('badge-ui');
     badge.setAttribute('data-count-badge', '');
     badge.setAttribute('size', 'sm');
-    badge.setAttribute('variant', 'muted');
+    badge.setAttribute('tone', 'muted');
     badge.hidden = true;
     title.appendChild(badge);
 

package/components/tag/tag.a2ui.json

@@ -46,25 +46,25 @@
       "$ref": "common_types.json#/$defs/DynamicString"
     },
     "tone": {
-      "description": "Fill style — orthogonal to [variant]. Three values:\n  - `solid` (default — for EVERY variant, including the family-less\n    `default`, since gh#794) — saturated bg + on-strong (near-white)\n    text. The chip IS the state. A bare `<tag-ui text=\"…\">` renders\n    this look with no attributes at all.\n  - `muted` — tinted bg with scheme-paired text. Matches <badge-ui>'s\n    default look, and is the pre-gh#794 look for the family-less\n    `default` variant. Use on metadata / citation chips in dense\n    lists or tables where the saturated default would compete for\n    attention (gh#778's oversized-pill concern).\n  - `outline` — transparent bg + family-colored border + family-colored\n    text. The lightest visual weight; good in dense data tables or\n    faceted filter rows where multiple chips would otherwise compete.\n`tone` is a declarative presentational attribute (not a reactive\nprop — see tag.class.js) so its schema `default` here is documentation\nof the rendered-by-default look, not a reflected attribute value.\n",
+      "description": "Fill style — orthogonal to [variant]. Three values:\n  - `muted` (default for the family variants — info/success/warning/\n    danger/primary — gh#864: tag and badge were swapped relative to\n    their reported default formulas; this restores tag's own)\n    — tinted bg with scheme-paired text. Matches <badge-ui>'s\n    `[tone=\"muted\"]` look. Use on metadata / citation chips in dense\n    lists or tables where a saturated fill would compete for\n    attention (gh#778's oversized-pill concern). Does NOT apply to\n    the family-less `default` variant, which stays solid\n    unconditionally (gh#794, unaffected by gh#864) — a bare\n    `<tag-ui text=\"…\">` still renders that solid look with no\n    attributes at all.\n  - `solid` — saturated bg + on-strong (near-white) text. The chip\n    IS the state. Opt in explicitly for a family variant (gh#864),\n    or it's already the unconditional look for the family-less\n    `default` variant (gh#794).\n  - `outline` — transparent bg + family-colored border + family-colored\n    text. The lightest visual weight; good in dense data tables or\n    faceted filter rows where multiple chips would otherwise compete.\n`tone` is a declarative presentational attribute (not a reactive\nprop — see tag.class.js) so its schema `default` here is documentation\nof the rendered-by-default look, not a reflected attribute value.\n",
       "type": "string",
       "enum": [
         "solid",
         "muted",
         "outline"
       ],
-      "default": "solid"
+      "default": "muted"
     },
     "variant": {
-      "description": "Semantic variant — `default | accent | info | success | warning | danger`. `accent` is brand-primary emphasis for non-semantic labels — a filter chip or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors <badge-ui>'s `accent` variant token-for-token.",
+      "description": "Semantic variant — `default | info | success | warning | danger | primary`. `primary` is brand emphasis for non-semantic labels — a filter chip or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors <badge-ui>'s `primary` variant token-for-token (`accent` retired, gh#874 — the capability survives renamed, sibling parity with badge preserved).",
       "type": "string",
       "enum": [
         "default",
-        "accent",
         "info",
         "success",
         "warning",
-        "danger"
+        "danger",
+        "primary"
       ],
       "default": "default"
     }

package/components/tag/tag.class.js

@@ -17,7 +17,7 @@
  * Inline tag / chip. Pill-shaped, text rendered via CSS attr().
  * Optional dismiss button dispatches a 'remove' CustomEvent.
  *
- * Variants: default, info, success, warning, danger
+ * Variants: default, info, success, warning, danger, primary
  * Sizes: sm, md (default)
  *
  * Events:

package/components/tag/tag.css

@@ -14,13 +14,17 @@ tag-ui[removable]:not([disabled]):hover {
        default at construction time. A bare `<tag-ui text="…">` therefore
        never gets a physical `variant="default"` attribute; these
        `:where(:scope)` zero-specificity tokens are what it actually
-       renders. Solid neutral inverse (was `--a-bg-muted` quiet chrome
-       pre-#794) — same pair the family variants and the redundant
+       renders. Solid neutral (was `--a-bg-muted` quiet chrome pre-#794)
+       — same pair the family variants and the redundant
        `:scope[variant="default"]` rule below carry, for the rare case
        `variant="default"` IS reflected explicitly (SSR/a2ui-producer
-       markup). Opt out via `[tone="muted"]`. */
-    --tag-bg:           var(--md-sys-color-neutral-on-surface);
-    --tag-fg:           var(--md-sys-color-neutral-background);
+       markup). Opt out via `[tone="muted"]`. Uses the real
+       `--md-sys-color-neutral`/`-on-neutral` pair (operator ruling,
+       2026-08-10) — the true parallel to `-primary`/`-on-primary` etc.,
+       not the `-on-surface`/`-background` ink/page tokens this rule
+       borrowed pre-#794's cross-check. */
+    --tag-bg:           var(--md-sys-color-neutral);
+    --tag-fg:           var(--md-sys-color-neutral-on-neutral);
     --tag-border:       transparent;
     --tag-radius:       var(--a-radius-full);
     --tag-px:           var(--a-space-1-5);
@@ -122,85 +126,94 @@ tag-ui[removable]:not([disabled]):hover {
   }
 
   /* ── 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. */
-  /* `accent` is brand-primary emphasis for non-semantic labels — mirrors
-     <badge-ui>'s `accent` variant token-for-token (--a-primary-bg /
-     on-primary for the solid fill), applied to tag-ui's own solid-default
-     tone shape. Not a status color — no success/warning/danger implication. */
-  :scope[variant="accent"] {
-    --tag-bg: var(--a-primary-bg);
-    --tag-fg: var(--md-sys-color-primary-on-primary);
+     Default tone is `muted` for the family variants (gh#864): the
+     tinted-container pair — `--md-sys-color-{family}-container` (tinted
+     surface) + `-on-surface` (scheme-flipping text). Tag and badge 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 tag's own. Opt into the saturated stamp per-tag via
+     [tone="solid"] below. This does NOT touch the family-less `default`
+     variant below, which stays solid unconditionally (gh#794, unrelated
+     to the gh#864 swap). */
+  /* `primary` is brand emphasis for non-semantic labels — mirrors
+     <badge-ui>'s `primary` variant token-for-token (--md-sys-color-primary-
+     container / -on-surface for the tinted fill; `accent` retired, gh#874).
+     Not a status color — no success/warning/danger implication. */
+  :scope[variant="primary"] {
+    --tag-bg: var(--md-sys-color-primary-container);
+    --tag-fg: var(--md-sys-color-primary-on-surface);
   }
 
   :scope[variant="info"] {
-    --tag-bg: var(--a-info-bg);
-    --tag-fg: var(--md-sys-color-info-on-info);
+    --tag-bg: var(--md-sys-color-info-container);
+    --tag-fg: var(--md-sys-color-info-on-surface);
   }
 
   :scope[variant="success"] {
-    --tag-bg: var(--a-success-bg);
-    --tag-fg: var(--md-sys-color-success-on-success);
+    --tag-bg: var(--md-sys-color-success-container);
+    --tag-fg: var(--md-sys-color-success-on-surface);
   }
 
-  /* Same shape as the sibling families since the Material static-token
-     migration: amber fill + the palette's own fixed-light on-color
-     (`on-warning`, white in both schemes per Material's on-color law).
-     The pre-migration dark-brown-text override is gone — its
-     lower-than-siblings contrast is a known, operator-accepted
-     consequence (TKT-0018, wontfix pending palette adjustment). */
   :scope[variant="warning"] {
-    --tag-bg: var(--a-warning-bg);
-    --tag-fg: var(--md-sys-color-warning-on-warning);
+    --tag-bg: var(--md-sys-color-warning-container);
+    --tag-fg: var(--md-sys-color-warning-on-surface);
   }
 
   :scope[variant="danger"] {
-    --tag-bg: var(--a-danger-bg);
-    --tag-fg: var(--md-sys-color-danger-on-danger);
+    --tag-bg: var(--md-sys-color-danger-container);
+    --tag-fg: var(--md-sys-color-danger-on-surface);
   }
 
   /* `default` (no family) is solid by default (gh#794) — the same
-     high-contrast neutral inverse the family variants already carry.
-     A bare `<tag-ui text="…">` is now a stamped pill, not quiet chrome.
-     Opt OUT to the pre-#794 quiet-chrome look via `[tone="muted"]`
-     (below) on metadata/citation chips in dense lists or tables where
-     the saturated look competes for attention (gh#778's oversized-pill
-     complaint) — same escape hatch the family variants already use. */
+     high-contrast neutral inverse it has always carried. A bare
+     `<tag-ui text="…">` is a stamped pill, not quiet chrome. Unaffected by
+     the gh#864 family-variant swap above. Opt OUT to the pre-#794 quiet-
+     chrome look via `[tone="muted"]` (below) on metadata/citation chips
+     in dense lists or tables where the saturated look competes for
+     attention (gh#778's oversized-pill complaint). */
   :scope[variant="default"] {
-    --tag-bg: var(--md-sys-color-neutral-on-surface);
-    --tag-fg: var(--md-sys-color-neutral-background);
+    --tag-bg: var(--md-sys-color-neutral);
+    --tag-fg: var(--md-sys-color-neutral-on-neutral);
   }
 
   /* ── 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: var(--md-sys-color-info-container);
-    --tag-fg: var(--md-sys-color-info-on-surface);
+     `[tone="solid"]` opts each family variant INTO the saturated-fill pair
+     (gh#864 — this used to be the family variants' unconditional default;
+     see the Variants comment above): `--a-{family}-bg` (saturated surface)
+     + Material's on-color (`-on-{family}`, near-white by the fixed-light-
+     on-color law). Same shape <tag-ui>'s family-less `default` variant
+     still carries unconditionally. Use for a single hero tag that should
+     stamp its state.
+
+     Warning uses --a-warning-bg (semantics.css L3 redirect to the bright-
+     amber -20-tint) rather than the raw family token — see also
+     <badge-ui>'s identical workaround. */
+  :scope[tone="solid"][variant="info"] {
+    --tag-bg: var(--a-info-bg);
+    --tag-fg: var(--md-sys-color-info-on-info);
   }
-  :scope[tone="muted"][variant="success"] {
-    --tag-bg: var(--md-sys-color-success-container);
-    --tag-fg: var(--md-sys-color-success-on-surface);
+  :scope[tone="solid"][variant="success"] {
+    --tag-bg: var(--a-success-bg);
+    --tag-fg: var(--md-sys-color-success-on-success);
   }
-  :scope[tone="muted"][variant="warning"] {
-    --tag-bg: var(--md-sys-color-warning-container);
-    --tag-fg: var(--md-sys-color-warning-on-surface);
+  /* Same shape as the sibling families since the Material static-token
+     migration: amber fill + the palette's own fixed-light on-color
+     (`on-warning`, white in both schemes per Material's on-color law).
+     The pre-migration dark-brown-text override is gone — its
+     lower-than-siblings contrast is a known, operator-accepted
+     consequence (TKT-0018, wontfix pending palette adjustment). */
+  :scope[tone="solid"][variant="warning"] {
+    --tag-bg: var(--a-warning-bg);
+    --tag-fg: var(--md-sys-color-warning-on-warning);
   }
-  :scope[tone="muted"][variant="danger"] {
-    --tag-bg: var(--md-sys-color-danger-container);
-    --tag-fg: var(--md-sys-color-danger-on-surface);
+  :scope[tone="solid"][variant="danger"] {
+    --tag-bg: var(--a-danger-bg);
+    --tag-fg: var(--md-sys-color-danger-on-danger);
   }
-  /* Mirrors <badge-ui>'s default (muted) accent pair —
-     --md-sys-color-primary-container / -on-surface. */
-  :scope[tone="muted"][variant="accent"] {
-    --tag-bg: var(--md-sys-color-primary-container);
-    --tag-fg: var(--md-sys-color-primary-on-surface);
+  :scope[tone="solid"][variant="primary"] {
+    --tag-bg: var(--a-primary-bg);
+    --tag-fg: var(--md-sys-color-primary-on-primary);
   }
   /* gh#794: the pre-#794 quiet-chrome look for the variant-less default —
      same values the `:where(:scope)` base tokens carried before the
@@ -213,7 +226,7 @@ tag-ui[removable]:not([disabled]):hover {
      `installProps()` reflect() path only fires on a property SET) —
      the same reason the `[tone="solid"]` fallback below uses this same
      `:not()` shape instead of `[variant="default"]`. */
-  :scope[tone="muted"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]) {
+  :scope[tone="muted"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="primary"]) {
     --tag-bg: var(--a-bg-muted);
     --tag-fg: var(--md-sys-color-neutral-on-surface);
   }
@@ -222,13 +235,13 @@ tag-ui[removable]:not([disabled]):hover {
      since gh#794 (the variant-less default is solid unconditionally
      above) but kept so `tone="solid"` stays a valid, harmless, explicit
      statement of intent for consumers who set it directly.
-     [variant="accent"] is excluded — it already has an explicit solid
-     pair above (the plain [variant="accent"] rule) that this higher-
-     specificity fallback would otherwise clobber when tone="solid" is
-     set explicitly alongside it. */
-  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]) {
-    --tag-bg: var(--md-sys-color-neutral-on-surface);
-    --tag-fg: var(--md-sys-color-neutral-background);
+     [variant="primary"] is excluded — its solid pair is the explicit
+     `[tone="solid"][variant="primary"]` rule above (gh#864: the bare
+     `[variant="primary"]` rule is container-tinted now, not solid) — this
+     `:not()` keeps the neutral-only fallback from ever matching primary. */
+  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="primary"]) {
+    --tag-bg: var(--md-sys-color-neutral);
+    --tag-fg: var(--md-sys-color-neutral-on-neutral);
   }
 
   /* ── `[tone="outline"]` — transparent bg + family-colored border + text ──
@@ -255,15 +268,15 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-fg:     var(--md-sys-color-danger-on-surface);
     --tag-border: var(--md-sys-color-danger-outline);
   }
-  /* Mirrors <badge-ui>'s outline accent pair —
+  /* Mirrors <badge-ui>'s outline primary pair —
      --md-sys-color-primary-on-surface / -primary-outline. */
-  :scope[tone="outline"][variant="accent"] {
+  :scope[tone="outline"][variant="primary"] {
     --tag-fg:     var(--md-sys-color-primary-on-surface);
     --tag-border: var(--md-sys-color-primary-outline);
   }
   /* Outline on neutral (no family) — fg-muted text + subtle border.
-     [variant="accent"] excluded — see the [tone="solid"] fallback note above. */
-  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]) {
+     [variant="primary"] excluded — see the [tone="solid"] fallback note above. */
+  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="primary"]) {
     --tag-fg:     var(--a-fg-muted);
     --tag-border: var(--md-sys-color-neutral-outline);
   }

package/components/tag/tag.d.ts

@@ -41,15 +41,21 @@ export class UITag extends UIElement {
   /** Tag label. Renderer routes this to the `text` attribute, rendered via CSS attr(text) on ::after. */
   textContent: string;
   /** Fill style — orthogonal to [variant]. Three values:
-  - `solid` (default — for EVERY variant, including the family-less
-    `default`, since gh#794) — saturated bg + on-strong (near-white)
-    text. The chip IS the state. A bare `<tag-ui text="…">` renders
-    this look with no attributes at all.
-  - `muted` — tinted bg with scheme-paired text. Matches <badge-ui>'s
-    default look, and is the pre-gh#794 look for the family-less
-    `default` variant. Use on metadata / citation chips in dense
-    lists or tables where the saturated default would compete for
-    attention (gh#778's oversized-pill concern).
+  - `muted` (default for the family variants — info/success/warning/
+    danger/primary — gh#864: tag and badge were swapped relative to
+    their reported default formulas; this restores tag's own)
+    — tinted bg with scheme-paired text. Matches <badge-ui>'s
+    `[tone="muted"]` look. Use on metadata / citation chips in dense
+    lists or tables where a saturated fill would compete for
+    attention (gh#778's oversized-pill concern). Does NOT apply to
+    the family-less `default` variant, which stays solid
+    unconditionally (gh#794, unaffected by gh#864) — a bare
+    `<tag-ui text="…">` still renders that solid look with no
+    attributes at all.
+  - `solid` — saturated bg + on-strong (near-white) text. The chip
+    IS the state. Opt in explicitly for a family variant (gh#864),
+    or it's already the unconditional look for the family-less
+    `default` variant (gh#794).
   - `outline` — transparent bg + family-colored border + family-colored
     text. The lightest visual weight; good in dense data tables or
     faceted filter rows where multiple chips would otherwise compete.
@@ -58,8 +64,8 @@ prop — see tag.class.js) so its schema `default` here is documentation
 of the rendered-by-default look, not a reflected attribute value.
  */
   tone: 'solid' | 'muted' | 'outline';
-  /** Semantic variant — `default | accent | info | success | warning | danger`. `accent` is brand-primary emphasis for non-semantic labels — a filter chip or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors <badge-ui>'s `accent` variant token-for-token. */
-  variant: 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+  /** Semantic variant — `default | info | success | warning | danger | primary`. `primary` is brand emphasis for non-semantic labels — a filter chip or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors <badge-ui>'s `primary` variant token-for-token (`accent` retired, gh#874 — the capability survives renamed, sibling parity with badge preserved). */
+  variant: 'default' | 'info' | 'success' | 'warning' | 'danger' | 'primary';
 
   addEventListener(type: 'remove', listener: (ev: TagRemoveEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(

package/components/tag/tag.yaml

@@ -46,31 +46,38 @@ props:
     type: string
     dynamic: true
   variant:
-    description: Semantic variant — `default | accent | info | success | warning | danger`.
-      `accent` is brand-primary emphasis for non-semantic labels — a filter chip
+    description: Semantic variant — `default | info | success | warning | danger | primary`.
+      `primary` is brand emphasis for non-semantic labels — a filter chip
       or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors
-      <badge-ui>'s `accent` variant token-for-token.
+      <badge-ui>'s `primary` variant token-for-token (`accent` retired, gh#874 —
+      the capability survives renamed, sibling parity with badge preserved).
     type: string
     default: default
     enum:
       - default
-      - accent
       - info
       - success
       - warning
       - danger
+      - primary
   tone:
     description: |
       Fill style — orthogonal to [variant]. Three values:
-        - `solid` (default — for EVERY variant, including the family-less
-          `default`, since gh#794) — saturated bg + on-strong (near-white)
-          text. The chip IS the state. A bare `<tag-ui text="…">` renders
-          this look with no attributes at all.
-        - `muted` — tinted bg with scheme-paired text. Matches <badge-ui>'s
-          default look, and is the pre-gh#794 look for the family-less
-          `default` variant. Use on metadata / citation chips in dense
-          lists or tables where the saturated default would compete for
-          attention (gh#778's oversized-pill concern).
+        - `muted` (default for the family variants — info/success/warning/
+          danger/primary — gh#864: tag and badge were swapped relative to
+          their reported default formulas; this restores tag's own)
+          — tinted bg with scheme-paired text. Matches <badge-ui>'s
+          `[tone="muted"]` look. Use on metadata / citation chips in dense
+          lists or tables where a saturated fill would compete for
+          attention (gh#778's oversized-pill concern). Does NOT apply to
+          the family-less `default` variant, which stays solid
+          unconditionally (gh#794, unaffected by gh#864) — a bare
+          `<tag-ui text="…">` still renders that solid look with no
+          attributes at all.
+        - `solid` — saturated bg + on-strong (near-white) text. The chip
+          IS the state. Opt in explicitly for a family variant (gh#864),
+          or it's already the unconditional look for the family-less
+          `default` variant (gh#794).
         - `outline` — transparent bg + family-colored border + family-colored
           text. The lightest visual weight; good in dense data tables or
           faceted filter rows where multiple chips would otherwise compete.
@@ -78,7 +85,7 @@ props:
       prop — see tag.class.js) so its schema `default` here is documentation
       of the rendered-by-default look, not a reflected attribute value.
     type: string
-    default: solid
+    default: muted
     enum:
       - solid
       - muted
@@ -132,12 +139,16 @@ a2ui:
       vertically; vertical lists of dismissable items are an
       <action-list-ui> use case, not <tag-ui>.
     - >-
-      Bare <tag-ui text="…"> (no [tone]) renders the high-contrast
-      solid pill by default (gh#794). In dense tables, tight metadata
-      rows, or citation/footnote strips where many tags sit close
-      together, set [tone="muted"] to keep the quieter tinted look
-      instead — a wall of solid pills reads as visual noise there
+      A family-less <tag-ui text="…"> (no [variant], no [tone]) renders
+      the high-contrast solid pill by default (gh#794). In dense tables,
+      tight metadata rows, or citation/footnote strips where many tags
+      sit close together, set [tone="muted"] to keep the quieter tinted
+      look instead — a wall of solid pills reads as visual noise there
       (gh#778).
+    - >-
+      A family [variant] (info/success/warning/danger/primary) with no
+      [tone] renders the tinted-container look by default (gh#864). Set
+      [tone="solid"] for a saturated status stamp instead.
 anti_patterns: []
 examples:
   - name: basic-tag

package/components/toast/toast.a2ui.json

@@ -40,7 +40,7 @@
       "default": ""
     },
     "variant": {
-      "description": "Semantic variant — `default | info | success | warning | danger`. `primary` and `muted` are style hints; canonical \"neutral but interesting\" tone is `info`.",
+      "description": "Semantic variant — `default | info | success | warning | danger | primary`. `primary` is the brand-emphasis fill (mirrors badge-ui/button-ui's `primary`); canonical \"neutral but interesting\" tone is `info`.",
       "type": "string",
       "enum": [
         "default",
@@ -48,9 +48,7 @@
         "success",
         "warning",
         "danger",
-        "primary",
-        "muted",
-        "neutral"
+        "primary"
       ],
       "default": "info"
     }