@adia-ai/web-components 0.8.22 → 0.8.23

package/components/select/select.class.js

@@ -53,6 +53,10 @@ export class UISelect extends UIFormElement {
     searchable:  { type: Boolean, default: false, reflect: true },
     freeText:    { type: Boolean, default: false, reflect: true, attribute: 'free-text' },
     divider:     { type: Boolean, default: false, reflect: true },
+    // gh#498 — suppress the single-select radio indicator for menu-shaped
+    // switchers (workspace/user identity menus) where the trigger already
+    // carries the committed value; rows keep layout + aria-selected.
+    noRadio:     { type: Boolean, default: false, reflect: true, attribute: 'no-radio' },
     // §184 (v0.5.5, FEEDBACK-08 §7): optional caption beneath the
     // trigger, wired to aria-describedby on the host.
     hint:        { type: String,  default: '', reflect: true },
@@ -817,11 +821,22 @@ export class UISelect extends UIFormElement {
         // Single-select mirrors the multi structure with a RADIO indicator
         // (operator ruling 2026-07-27) — selection is carried by the
         // indicator, not a row tint; CSS keys off [data-single-option].
+        // [no-radio] (gh#498) drops only the dot: identity-switcher menus
+        // read the committed value from the trigger, so the per-row radio
+        // is redundant there; row layout + aria-selected are unchanged.
+        // [mark] IMPLIES it (gh#498 reopen, 2026-07-30): mark declares an
+        // identity switcher, and the first fix proved per-instance
+        // attributes get forgotten — the playground got [no-radio], the
+        // site chrome switcher shipped radios anyway. The semantic
+        // attribute is the reliable signal; [no-radio] remains for
+        // markless menus.
         el.setAttribute('data-single-option', '');
-        const dot = document.createElement('span');
-        dot.setAttribute('data-radio', '');
-        dot.setAttribute('aria-hidden', 'true');
-        el.appendChild(dot);
+        if (!(this.noRadio || this.mark)) {
+          const dot = document.createElement('span');
+          dot.setAttribute('data-radio', '');
+          dot.setAttribute('aria-hidden', 'true');
+          el.appendChild(dot);
+        }
         const label = document.createElement('span');
         label.setAttribute('data-option-label', '');
         if (lead) label.innerHTML = `${lead}${escapeHTML(opt.label)}`;
@@ -1053,11 +1068,15 @@ export class UISelect extends UIFormElement {
 
   #applyFilter() {
     if (!this.#listbox) return;
-    const q = this.#query.toLowerCase();
+    // Underscores normalize to spaces on BOTH sides (gh#538): IANA-style
+    // labels ("America/Los_Angeles") must match the query a human types
+    // ("los angeles") — and vice versa.
+    const norm = (t) => t.toLowerCase().replace(/_/g, ' ');
+    const q = norm(this.#query);
     const opts = this.#listbox.querySelectorAll('[role="option"]');
     let anyVisible = false;
     for (const opt of opts) {
-      const label = (opt.textContent || '').toLowerCase();
+      const label = norm(opt.textContent || '');
       const match = !q || label.includes(q);
       if (match) {
         opt.removeAttribute('data-filtered-out');

package/components/select/select.yaml

@@ -74,6 +74,19 @@ props:
     type: boolean
     default: false
     reflect: true
+  no-radio:
+    description: >-
+      Suppress the single-select radio indicator on option rows (gh#498).
+      For menu-shaped switchers — workspace or user identity menus — where
+      the trigger already shows the committed value and a per-row radio
+      reads as redundant selection language. Rows keep their layout and
+      aria-selected state; the trigger and selected-row weight carry the
+      signal. No effect under [multiple]. IMPLIED by [mark] — a mark
+      declares an identity switcher, which is always menu-shaped
+      (gh#498 reopen: per-instance opt-outs proved forgettable).
+    type: boolean
+    default: false
+    reflect: true
   error:
     description: Validation error message
     type: string

package/components/stat/stat.js

@@ -8,6 +8,7 @@
  * Trend: up, down, neutral (colors the change badge accordingly)
  */
 
+import { defineIfFree } from '../../core/register.js';
 import { UIElement } from '../../core/element.js';
 
 class UIStat extends UIElement {
@@ -119,6 +120,8 @@ class UIStat extends UIElement {
     this.#iconEl = null;
   }
 }
-customElements.define('stat-ui', UIStat);
+// defineIfFree (gh#534): the prod bundle + module graph load in parallel;
+// second registration must no-op, not throw.
+defineIfFree('stat-ui', UIStat);
 
 export { UIStat };

package/components/stepper/stepper.css

@@ -13,20 +13,24 @@
   :where(:scope) {
     /* ── Circle ── */
     --stepper-size:            2rem;
-    --stepper-bg:              var(--md-sys-color-neutral-background);
-    --stepper-border:          var(--md-sys-color-neutral-outline);
-    --stepper-fg:              var(--a-fg-muted);
+    /* Operator stepper system (2026-07-30): next = transparent circle on a
+       low-emphasis outline; current = filled primary; completed = tonal
+       primary-container with a primary glyph. Borders on the two emphasized
+       states are transparent — the fill IS the affordance. */
+    --stepper-bg:              transparent;
+    --stepper-border:          var(--md-sys-color-neutral-outline-variant);
+    --stepper-fg:              var(--md-sys-color-neutral-on-surface-variant);
     --stepper-font:            var(--a-ui-sm);
     --stepper-weight:          var(--a-weight-medium);
     --stepper-border-size:     2px;
 
-    --stepper-bg-active:       var(--md-sys-color-neutral-background);
-    --stepper-border-active:   var(--md-sys-color-primary);
-    --stepper-fg-active:       var(--md-sys-color-primary);
+    --stepper-bg-active:       var(--md-sys-color-primary);
+    --stepper-border-active:   transparent;
+    --stepper-fg-active:       var(--md-sys-color-primary-on-primary);
 
-    --stepper-bg-done:         var(--md-sys-color-primary);
-    --stepper-border-done:     var(--md-sys-color-primary);
-    --stepper-fg-done:         var(--md-sys-color-primary-on-primary);
+    --stepper-bg-done:         var(--md-sys-color-primary-container);
+    --stepper-border-done:     transparent;
+    --stepper-fg-done:         var(--md-sys-color-primary);
 
     --stepper-line:            var(--md-sys-color-neutral-outline-variant);
     --stepper-line-done:       var(--md-sys-color-primary);
@@ -69,20 +73,20 @@
        co-located item legitimately reads parent tokens (the same
        scope pattern as menu-item-ui inside menu-ui's popover). */
     --stepper-item-size:           var(--stepper-size, 2rem);
-    --stepper-item-bg:             var(--stepper-bg, var(--md-sys-color-neutral-background));
-    --stepper-item-border:         var(--stepper-border, var(--md-sys-color-neutral-outline));
-    --stepper-item-fg:             var(--stepper-fg, var(--a-fg-muted));
+    --stepper-item-bg:             var(--stepper-bg, transparent);
+    --stepper-item-border:         var(--stepper-border, var(--md-sys-color-neutral-outline-variant));
+    --stepper-item-fg:             var(--stepper-fg, var(--md-sys-color-neutral-on-surface-variant));
     --stepper-item-font:           var(--stepper-font, var(--a-ui-sm));
     --stepper-item-weight:         var(--stepper-weight, var(--a-weight-medium));
     --stepper-item-border-size:    var(--stepper-border-size, 2px);
 
-    --stepper-item-bg-active:      var(--stepper-bg-active, var(--md-sys-color-neutral-background));
-    --stepper-item-border-active:  var(--stepper-border-active, var(--md-sys-color-primary));
-    --stepper-item-fg-active:      var(--stepper-fg-active, var(--md-sys-color-primary));
+    --stepper-item-bg-active:      var(--stepper-bg-active, var(--md-sys-color-primary));
+    --stepper-item-border-active:  var(--stepper-border-active, transparent);
+    --stepper-item-fg-active:      var(--stepper-fg-active, var(--md-sys-color-primary-on-primary));
 
-    --stepper-item-bg-done:        var(--stepper-bg-done, var(--md-sys-color-primary));
-    --stepper-item-border-done:    var(--stepper-border-done, var(--md-sys-color-primary));
-    --stepper-item-fg-done:        var(--stepper-fg-done, var(--md-sys-color-primary-on-primary));
+    --stepper-item-bg-done:        var(--stepper-bg-done, var(--md-sys-color-primary-container));
+    --stepper-item-border-done:    var(--stepper-border-done, transparent);
+    --stepper-item-fg-done:        var(--stepper-fg-done, var(--md-sys-color-primary));
 
     --stepper-item-line:           var(--stepper-line, var(--md-sys-color-neutral-outline-variant));
     --stepper-item-line-done:      var(--stepper-line-done, var(--md-sys-color-primary));
@@ -99,7 +103,8 @@
     --stepper-item-label-weight:   var(--a-weight-medium);
     --stepper-item-label-size:     var(--a-ui-size);
     --stepper-item-label-fg:       var(--md-sys-color-neutral-on-surface);
-    --stepper-item-pending-fg:     var(--a-fg-muted);
+    --stepper-item-label-fg-done:  var(--md-sys-color-neutral-on-surface-variant);
+    --stepper-item-pending-fg:     var(--md-sys-color-neutral-on-surface-variant);
     --stepper-item-desc-fg:        var(--md-sys-color-neutral-on-surface-variant);
     --stepper-item-desc-size:      var(--a-ui-sm);
 
@@ -181,7 +186,7 @@
   }
 
   :scope[status="completed"] [slot="label"] {
-    color: var(--stepper-item-label-fg);
+    color: var(--stepper-item-label-fg-done);
   }
 
   /* Pending label */

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?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.",
+      "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\">).",
       "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "component": {
@@ -39,6 +39,11 @@
       "type": "boolean",
       "default": false
     },
+    "frameless": {
+      "description": "Drop the table's outer 1px perimeter and nothing else (gh#511) — row dividers are untouched (the perimeter is split onto its own --table-perimeter token, defaulting to --table-border). For card-composed tables: the card owns the frame, so the table's square perimeter otherwise renders a doubled edge (flush bleed) or a stray inner box (with content above). Standalone tables keep their chrome by default. Theming path without the attribute: set --table-perimeter to transparent per instance.",
+      "type": "boolean",
+      "default": false
+    },
     "loading": {
       "description": "Renders N ghost skeleton rows in place of the body data (count derived from `paginate` if set, else 5). Header + columns stay intact so the table layout is preserved while data fetches. Sets aria-busy=\"true\" on the host. Data updates are deferred until loading is set back to false.",
       "type": "boolean",
@@ -74,6 +79,15 @@
       "type": "boolean",
       "default": false
     },
+    "valign": {
+      "description": "Vertical alignment of body-cell content. 'center' (default) keeps today's behavior — every cell centers on the row's cross-axis, which reads well for single-line rows. 'top' aligns each cell's content to the top of its padding box instead, so tall/wrapped rows (a [wrap] title column, a stacked identity cell) share one first-line scan anchor across the row rather than each cell floating at a different vertical center (gh#505). Per-column `valign` in the columns[] array (or <col-def valign=\"…\">) overrides the host per-column — e.g. keep a checkbox column centered while data cells top-align. Header cells always stay centered regardless of this prop (single-line by contract) — the checkbox/expand structural columns also default to centered under [valign=\"top\"] since they're not part of columns[].",
+      "type": "string",
+      "enum": [
+        "top",
+        "center"
+      ],
+      "default": "center"
+    },
     "wrap": {
       "description": "Allow body-cell content to wrap onto multiple lines. Default is single-line with ellipsis truncation (matches the row convention shared by <select-ui> + <nav-item-ui>); long unbreakable strings clip gracefully rather than rewrapping the row. With [wrap], row height auto-grows to fit wrapped content. For surgical opt-in on a single column, set [data-wrap] on the cell / col-def instead.",
       "type": "boolean",

package/components/table/table.class.js

@@ -22,6 +22,7 @@
  *   selectable — enable row selection via checkboxes
  *   striped    — alternate row background
  *   density    — 'compact' | 'standard' | 'comfortable'
+ *   valign     — 'center' (default) | 'top' — body-cell vertical alignment (gh#505)
  *   paginate   — rows per page (0 = no pagination)
  *   loading    — show loading overlay
  *   search     — global search filter string
@@ -33,7 +34,7 @@
  *
  * JS API:
  *   .columns = [{key, label, type, width, minWidth, maxWidth, flex,
- *                sortable, filterable, resizable, pinned, hidden,
+ *                sortable, filterable, resizable, pinned, hidden, valign,
  *                accessor, format, render, sortFn, sortDescFirst,
  *                filterType, filterFn, aggregate, meta}]
  *   .data    = [{...}, ...]
@@ -111,6 +112,10 @@ export class UITable extends UIElement {
     selectable: { type: Boolean, default: false, reflect: true },
     expandable: { type: Boolean, default: false, reflect: true },
     striped:    { type: Boolean, default: false, reflect: true },
+    valign:     { type: String,  default: 'center', reflect: true },
+    // gh#511 — drop the outer perimeter only (row dividers stay); the
+    // card+bleed composition's "let the container own the frame" knob.
+    frameless:  { type: Boolean, default: false, reflect: true },
     wrap:       { type: Boolean, default: false, reflect: true },
     raw:        { type: Boolean, default: false, reflect: true },
     density:    { type: String,  default: 'standard', reflect: true },
@@ -412,6 +417,7 @@ export class UITable extends UIElement {
         resizable: el.hasAttribute('resizable'),
         filterable: el.hasAttribute('filterable'),
         filterType: el.getAttribute('filter-type') || null,
+        valign:    el.getAttribute('valign') || null,        // 'top' | 'center' | null (inherit host)
       };
 
       const w = el.getAttribute('width');
@@ -896,6 +902,13 @@ export class UITable extends UIElement {
         cell.dataset.align = typeDef.align;
       }
 
+      // Vertical alignment — per-column override of the host [valign] (gh#505).
+      // Only stamped when the column explicitly opts in; unset falls through
+      // to the host's --table-valign token.
+      if (col.valign) {
+        cell.dataset.valign = col.valign;
+      }
+
       // Pinned
       if (col.pinned) {
         cell.setAttribute('data-pinned', col.pinned);

package/components/table/table.css

@@ -13,10 +13,26 @@
     --table-fg-hover:         var(--a-fg-strong);
     --table-fg-secondary:     var(--a-fg-muted);
     --table-border:           var(--md-sys-color-neutral-outline-variant);
+    /* Perimeter split off the divider token (gh#511): --table-border feeds
+       BOTH the outer frame and the row dividers (TKT-0026), so consumers
+       could never drop the frame without erasing dividers. Inside card-ui
+       set --table-perimeter: transparent (or use [frameless]) — the card
+       owns the frame; standalone tables keep their chrome by default. */
+    --table-perimeter:        var(--table-border);
     --table-border-strong:    var(--md-sys-color-neutral-outline);
     --table-py:               var(--a-space-3);
     --table-px:               var(--a-space-4);
 
+    /* Body-cell vertical alignment mode (gh#505). 'center' is the default,
+       unconditional behavior every consumer already ships against — this
+       token flips to flex-start when [valign="top"] (below). Uniform
+       padding (--table-py) IS the first-line alignment story: every body
+       cell's content box starts flush at the same y-offset, so a chip in
+       one column and a wrapped title's first line in another share one
+       scan anchor, rather than each cell floating at its own vertical
+       center on a tall row. */
+    --table-valign:           center;
+
     --table-row-bg:           transparent;
     /* container-low, not the generic --a-bg-hover state-layer token
        (TKT-0020) — --a-bg-hover / --md-sys-color-neutral-hover is tuned
@@ -130,7 +146,15 @@
        inside the content box and doesn't shrink clientWidth — a real
        `border: 1px` made grid content overflow by exactly 2 px on every
        table (scrollbar appeared with nothing to scroll). */
-    box-shadow: inset 0 0 0 1px var(--table-border);
+    /* Three-sided perimeter — no TOP edge (gh#537, operator ruling
+       2026-07-30): the header row's own border-bottom is the table's top
+       structure; a line above the header reads as a stray divider under
+       a card edge or empty-state. Sides + bottom keep the standalone
+       silhouette; [frameless] still blanks all of it. */
+    box-shadow:
+      inset 1px 0 0 var(--table-perimeter),
+      inset -1px 0 0 var(--table-perimeter),
+      inset 0 -1px 0 var(--table-perimeter);
     border-radius: var(--table-radius);
     position: relative;
     /* Own stacking context — sticky headers, pinned columns, and filter
@@ -176,6 +200,9 @@
 
   /* ═══════ Column headers ═══════ */
 
+  /* align-items:center is hardcoded, NOT --table-valign (gh#505) — header
+     cells are single-line by contract regardless of [valign] on the host
+     or any column. Do not swap this to the var. */
   [role="columnheader"] {
     box-sizing: border-box;
     text-align: left;
@@ -222,7 +249,9 @@
     color: var(--table-sort-fg);
     margin-inline-start: var(--table-sort-icon-gap);
     vertical-align: middle;
-    --a-icon-size: 0.75em;
+    /* 0.95em ≈ +2px over the former 0.75em at the heading's --a-ui-xs size
+       (gh#496) — em-based so the caret keeps scaling with the register. */
+    --a-icon-size: 0.95em;
   }
 
   [aria-sort] [data-sort-icon] {
@@ -247,7 +276,7 @@
   [data-body] [role="gridcell"] {
     box-sizing: border-box;
     display: flex;
-    align-items: center;
+    align-items: var(--table-valign);
     align-self: stretch;
     padding: var(--table-py) var(--table-px);
     min-width: 0;
@@ -331,6 +360,42 @@
     justify-content: center;
   }
 
+  /* ═══════ Vertical alignment (gh#505) ═══════ */
+
+  :scope[valign="top"] {
+    --table-valign: flex-start;
+  }
+
+  /* ═══════ Frameless (gh#511) ═══════
+     Drops ONLY the perimeter faux-border; row dividers keep reading
+     --table-border. For card-composed tables, where the card owns the
+     frame and the table's square perimeter otherwise double-borders. */
+  :scope[frameless] {
+    --table-perimeter: transparent;
+  }
+
+  /* Per-column override — beats the host var regardless of [valign], in
+     either direction (top column in a center table, or vice versa).
+     Higher specificity than the base `[data-body] [role="gridcell"]`
+     rule above (:249) so it wins without relying on source order. */
+  [data-body] [role="gridcell"][data-valign="top"] {
+    align-items: flex-start;
+  }
+
+  [data-body] [role="gridcell"][data-valign="center"] {
+    align-items: center;
+  }
+
+  /* Structural columns (checkbox / expand-toggle) are never part of
+     columns[] so authors can't set [data-valign] on them — they stay
+     centered under [valign="top"] by default (gh#505's checkbox example),
+     matching the icon/control's own fixed small size regardless of row
+     height. */
+  [data-body] [role="gridcell"][data-check-col],
+  [data-body] [role="gridcell"][data-expand-col] {
+    align-items: center;
+  }
+
   /* ═══════ Row states ═══════ */
 
   [data-body] > [role="row"] {

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?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children. */
+  /** 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">). */
   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;
@@ -94,6 +94,8 @@ export class UITable extends UIElement {
   density: 'compact' | 'standard' | 'comfortable';
   /** Enable row expansion */
   expandable: boolean;
+  /** Drop the table's outer 1px perimeter and nothing else (gh#511) — row dividers are untouched (the perimeter is split onto its own --table-perimeter token, defaulting to --table-border). For card-composed tables: the card owns the frame, so the table's square perimeter otherwise renders a doubled edge (flush bleed) or a stray inner box (with content above). Standalone tables keep their chrome by default. Theming path without the attribute: set --table-perimeter to transparent per instance. */
+  frameless: boolean;
   /** Renders N ghost skeleton rows in place of the body data (count derived from `paginate` if set, else 5). Header + columns stay intact so the table layout is preserved while data fetches. Sets aria-busy="true" on the host. Data updates are deferred until loading is set back to false. */
   loading: boolean;
   /** Rows per page. 0 = show all rows without pagination. When > 0, renders a pagination bar below the table. */
@@ -108,6 +110,8 @@ export class UITable extends UIElement {
   sortable: boolean;
   /** Alternate row background colors for visual scanning. */
   striped: boolean;
+  /** Vertical alignment of body-cell content. 'center' (default) keeps today's behavior — every cell centers on the row's cross-axis, which reads well for single-line rows. 'top' aligns each cell's content to the top of its padding box instead, so tall/wrapped rows (a [wrap] title column, a stacked identity cell) share one first-line scan anchor across the row rather than each cell floating at a different vertical center (gh#505). Per-column `valign` in the columns[] array (or <col-def valign="…">) overrides the host per-column — e.g. keep a checkbox column centered while data cells top-align. Header cells always stay centered regardless of this prop (single-line by contract) — the checkbox/expand structural columns also default to centered under [valign="top"] since they're not part of columns[]. */
+  valign: 'top' | 'center';
   /** Allow body-cell content to wrap onto multiple lines. Default is single-line with ellipsis truncation (matches the row convention shared by <select-ui> + <nav-item-ui>); long unbreakable strings clip gracefully rather than rewrapping the row. With [wrap], row height auto-grows to fit wrapped content. For surgical opt-in on a single column, set [data-wrap] on the cell / col-def instead. */
   wrap: boolean;
 

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?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.
+    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">).
     type: array
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
@@ -98,6 +98,39 @@ props:
     description: Alternate row background colors for visual scanning.
     type: boolean
     default: false
+  frameless:
+    description: >-
+      Drop the table's outer 1px perimeter and nothing else (gh#511) —
+      row dividers are untouched (the perimeter is split onto its own
+      --table-perimeter token, defaulting to --table-border). For
+      card-composed tables: the card owns the frame, so the table's
+      square perimeter otherwise renders a doubled edge (flush bleed) or
+      a stray inner box (with content above). Standalone tables keep
+      their chrome by default. Theming path without the attribute:
+      set --table-perimeter to transparent per instance.
+    type: boolean
+    default: false
+    reflect: true
+  valign:
+    description: >-
+      Vertical alignment of body-cell content. 'center' (default) keeps
+      today's behavior — every cell centers on the row's cross-axis, which
+      reads well for single-line rows. 'top' aligns each cell's content to
+      the top of its padding box instead, so tall/wrapped rows (a [wrap]
+      title column, a stacked identity cell) share one first-line scan
+      anchor across the row rather than each cell floating at a different
+      vertical center (gh#505). Per-column `valign` in the columns[] array
+      (or <col-def valign="…">) overrides the host per-column — e.g. keep a
+      checkbox column centered while data cells top-align. Header cells
+      always stay centered regardless of this prop (single-line by
+      contract) — the checkbox/expand structural columns also default to
+      centered under [valign="top"] since they're not part of columns[].
+    type: string
+    default: center
+    enum:
+      - top
+      - center
+    reflect: true
   wrap:
     description: >-
       Allow body-cell content to wrap onto multiple lines. Default is

package/components/tabs/tab.js

@@ -7,6 +7,7 @@
  * The tab button is rendered by the parent tabs-ui, not by tab-ui itself.
  */
 
+import { defineIfFree } from '../../core/register.js';
 import { UIElement } from '../../core/element.js';
 
 class UITab extends UIElement {
@@ -29,6 +30,8 @@ class UITab extends UIElement {
     else this.removeAttribute('aria-disabled');
   }
 }
-customElements.define('tab-ui', UITab);
+// defineIfFree (gh#534): the prod bundle + module graph load in parallel;
+// second registration must no-op, not throw.
+defineIfFree('tab-ui', UITab);
 
 export { UITab };

package/components/tag/tag.css

@@ -51,15 +51,21 @@ tag-ui[removable]:not([disabled]):hover {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    /* align-self: start — TKT-0021. A flex-column ancestor (col-ui
-       defaults to align-items: stretch) otherwise stretches a bare
-       tag-ui to the column's full width; a chip should size to its own
-       content regardless of ancestor. justify-content: center is the
-       matching defensive default badge-ui/button-ui already carry
-       (badge.css/button.css) — if the box is ever wider than its
-       content for any other reason, the label still centers instead of
-       reading left-aligned in an oversized pill. */
-    align-self: start;
+    /* width: fit-content — the TKT-0021 guard, re-cut for gh#503. The old
+       `align-self: start` defeated col-ui's stretch, but align-self acts on
+       whichever cross axis the PARENT has: in a flex-ROW parent (every
+       table-ui body cell, row-ui, toolbars) it governed the vertical axis
+       and top-pinned bare chips in tall rows (measured −34px off-center,
+       adia-v2 console). A definite inline size defeats stretch in a column
+       stack the same way (stretch applies only at auto cross size; the item
+       then sits at cross-start — identical content-sized, left-aligned
+       result), while a row parent's align-items: center regains control of
+       vertical placement. justify-content: center is the matching defensive
+       default badge-ui/button-ui already carry (badge.css/button.css) — if
+       the box is ever wider than its content for any other reason, the
+       label still centers instead of reading left-aligned in an oversized
+       pill. */
+    width: fit-content;
     justify-content: center;
     gap: var(--tag-gap);
     padding: var(--tag-py) var(--tag-px);

package/core/provider.js

@@ -23,6 +23,7 @@
  */
 
 import { UIElement } from './element.js';
+import { defineIfFree } from './register.js';
 import { BaseController } from './controller.js';
 
 // ═══════════════════════════════════════════════════════════════
@@ -295,4 +296,7 @@ export class UIRouter extends UIProvider {
   }
 }
 
-customElements.define('router-ui', UIRouter);
+// defineIfFree, not a bare define (gh#534): the site's prod bootstrap loads
+// the prebuilt everything-bundle ALONGSIDE the module graph — whichever
+// registers second must no-op, not throw.
+defineIfFree('router-ui', UIRouter);