@adia-ai/web-components 0.8.32 → 0.8.34

package/components/nav-item/nav-item.css

@@ -40,11 +40,19 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
     --nav-item-font-size-sm:    var(--a-ui-sm);
     --nav-item-font-size-lg:    var(--a-ui-lg);
     --nav-item-font-weight:     var(--a-weight-normal);
-    --nav-item-fg:              var(--a-ui-text-subtle);
+    /* State color spec (gh#968, operator ruling 2026-08-11):
+         idle     — bg transparent · icon NEUTRAL · text NEUTRAL-HIGH
+         hover    — bg container-low · icon + text ON-SURFACE
+         selected — bg container · icon + text ON-SURFACE
+       Idle sits two quiet steps down (icon quieter than text); hover and
+       selected converge on on-surface. The selected ICON no longer takes
+       the primary accent (supersedes gh#522 for the glyph) — the accent
+       BAR remains the primary selection marker. */
+    --nav-item-fg:              var(--md-sys-color-neutral-high);
     --nav-item-fg-hover:        var(--a-ui-text-hover);
     --nav-item-fg-selected:     var(--a-ui-text-selected);
-    --nav-item-icon-fg:         var(--a-ui-text-muted);
-    --nav-item-icon-fg-selected: var(--nav-item-accent);
+    --nav-item-icon-fg:         var(--md-sys-color-neutral);
+    --nav-item-icon-fg-selected: var(--a-ui-text-selected);
     /* Two real container roles, one mechanism — no opacity synth.
        hover    = --a-bg-muted    (--md-sys-color-neutral-container-low, 10%),
                   matching nav-group-ui's own --nav-group-bg-hover exactly.

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/richtext/richtext.css

@@ -15,7 +15,11 @@
     --richtext-fg:             var(--md-sys-color-neutral-on-surface);
     --richtext-fg-muted:       var(--a-fg-muted);
     --richtext-fg-subtle:      var(--md-sys-color-neutral-on-surface-variant);
-    --richtext-code-bg:        var(--a-canvas-2);
+    /* Container-low (10% alpha), not an opaque canvas tier (gh#972): the
+       inline chip must RECEDE behind prose and composite consistently on
+       any stacked surface — an opaque canvas-2 chip read heavy on the
+       page and inverted inside cards. Same tier as --a-bg-muted/hover. */
+    --richtext-code-bg:        var(--md-sys-color-neutral-container-low);
     --richtext-border:         var(--md-sys-color-neutral-outline-variant);
     --richtext-link:           var(--a-primary-bg);
     --richtext-link-hover:     var(--md-sys-color-primary);

package/components/segment/segment.css

@@ -19,6 +19,13 @@ segment-ui[selected] {
     --segment-font-size:       var(--a-ui-size);
     --segment-font-weight:     var(--a-ui-weight);
     --segment-font-family:     var(--a-font-family-ui);
+    /* Leading for the [text] label box ONLY — never the host. The host's
+       `line-height: 1` is deliberate, but the label's ::after clips to its
+       own line box, so inheriting 1 makes half-leading negative and shears
+       descenders (g/j/p/q/y, parentheses) by ~0.93px at the default size —
+       gh#906. Snug (1.3) contains the font's content box at every [size];
+       mirrors --button-label-line-height. */
+    --segment-label-line-height: var(--a-leading-snug);
 
     /* ── Colors ── */
     --segment-fg:              var(--a-ui-text-subtle);
@@ -92,6 +99,9 @@ segment-ui[selected] {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    /* `overflow: hidden` (needed for the ellipsis) makes this line box the
+       clip box — give it leading tall enough to contain the descenders. */
+    line-height: var(--segment-label-line-height);
   }
 
   /* States — hover + [selected] rules moved outside @scope; see Safari 17.x bug note at top. */

package/components/step-progress/step-progress.css

@@ -14,9 +14,15 @@
     --step-progress-caption-fg: var(--a-fg-muted);
     --step-progress-caption-size: var(--a-ui-sm);
 
-    /* Sizing — match the bespoke flex shape in registration + onboarding
-       (flex:0 1 18rem; min-width:10rem). Consumers can override. */
-    --step-progress-flex:       0 1 18rem;
+    /* Sizing — 18rem of track width, shrinkable to 10rem, matching the
+       bespoke shape in registration + onboarding. Expressed as inline-size
+       rather than flex-basis (gh#942): a flex-basis of 18rem is
+       direction-fragile — inside a COLUMN-direction flex parent (col-ui,
+       any stacked wizard) the same basis constrains HEIGHT, inflating the
+       ~30px component to 288px. inline-size constrains width in both flex
+       directions. Consumers can override. */
+    --step-progress-flex:       0 1 auto;
+    --step-progress-inline-size: 18rem;
     --step-progress-min-width:  10rem;
   }
 
@@ -25,6 +31,13 @@
     flex-direction: column;
     gap: var(--step-progress-gap);
     flex: var(--step-progress-flex);
+    /* Deliberate SCOPE-EXTENT exception: this component has always shipped
+       a default extent (previously flex-basis 18rem + min-width 10rem —
+       extent by another name, just direction-fragile). Both remain
+       token-overridable; going fully size-agnostic would silently reflow
+       the registration/onboarding row-header consumers. */
+    inline-size: var(--step-progress-inline-size);
+    max-inline-size: 100%;
     min-width: var(--step-progress-min-width);
   }
 

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 ?? '');
@@ -271,10 +282,18 @@ registerCellType('progress', {
       wrapper = document.createElement('row-ui');
       wrapper.setAttribute('gap', '2');
       wrapper.setAttribute('align', 'center');
+      // The gridcell is a flex container; without an explicit flex the
+      // wrapper shrinks to content — and a progress bar has no intrinsic
+      // width, so the whole cell collapsed to ~33px and the value span
+      // ellipsized to "7.." (gh#940). Fill the cell; keep the numeric
+      // label un-shrinkable so the BAR absorbs the flexing instead.
+      wrapper.style.flex = '1';
+      wrapper.style.minWidth = '0';
       const prog = document.createElement('progress-ui');
       prog.setAttribute('size', 'sm');
       prog.style.flex = '1';
       const span = document.createElement('span');
+      span.style.flexShrink = '0';
       wrapper.appendChild(prog);
       wrapper.appendChild(span);
       cell.appendChild(wrapper);

package/components/table/table.a2ui.json

@@ -14,7 +14,7 @@
   ],
   "properties": {
     "columns": {
-      "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign=\"top\">).",
+      "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign=\"top\">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type=\"badge\" meta='{\"variants\":{\"Online\":\"success\"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML.",
       "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "component": {

package/components/table/table.class.js

@@ -432,6 +432,17 @@ export class UITable extends UIElement {
       const flex = el.getAttribute('flex');
       if (flex) col.flex = Number(flex);
 
+      /* gh#925 — cell-type meta (e.g. the badge type's per-value variant
+         map, currency's currency code) had no declarative form: columns[]
+         carries `meta` but col-def never parsed it, so a static-HTML badge
+         column was structurally stuck at the unmapped tone="muted"
+         fallback. JSON attribute, same silent-on-malformed discipline as
+         the host's `data` attribute (gh#288). */
+      const meta = el.getAttribute('meta');
+      if (meta) {
+        try { col.meta = JSON.parse(meta); } catch (_) { /* malformed JSON — ignored */ }
+      }
+
       cols.push(col);
       el.remove();
     }

package/components/table/table.css

@@ -313,8 +313,17 @@
     white-space: nowrap;
   }
 
+  /* Must match the span/a rule above: without flex:1, row-ui (a flex
+     child with default flex:0 1 auto) sizes to its own shrink-to-fit
+     content instead of filling the cell — avatar/progress composite
+     types then split that tiny intrinsic width between their
+     progress-ui/avatar-ui and label span, clipping the label (gh#940:
+     stock "71%" rendered as "7.."). Generalizes the per-renderer inline
+     flex fix from PR #945 to every composite cell type; adopted from
+     PR #943's analysis. */
   [data-body] [role="gridcell"] > row-ui {
     min-width: 0;
+    flex: 1;
     overflow: hidden;
   }
 

package/components/table/table.d.ts

@@ -86,7 +86,7 @@ export interface TableSortEventDetail {
 export type TableSortEvent = CustomEvent<TableSortEventDetail>;
 
 export class UITable extends UIElement {
-  /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">). */
+  /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type="badge" meta='{"variants":{"Online":"success"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML. */
   columns: string;
   /** JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute. */
   data: string;

package/components/table/table.yaml

@@ -20,7 +20,7 @@ composes:
   - badge-ui
 props:
   columns:
-    description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">).
+    description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type="badge" meta='{"variants":{"Online":"success"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML.
     type: array
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties

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/tabs/tabs.css

@@ -5,7 +5,9 @@
     --tabs-bg:              transparent;
     --tabs-radius:          var(--a-radius-md);
     --tabs-button-height:   var(--a-size);
-    --tabs-font-size:       var(--a-ui-md);
+    /* One rung UP the --a-ui-* scale (gh#965): tab labels are primary
+       navigation, not control chrome. */
+    --tabs-font-size:       var(--a-ui-lg);
     --tabs-font-family:     var(--a-font-family-ui);
     /* Strip owns the button-to-button spacing — 4px base gap + one
        padding unit (8px) folded in, since tab-button carries no

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: