@adia-ai/web-components 0.8.22 → 0.8.24

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/components/toolbar/toolbar.class.js

@@ -90,6 +90,11 @@ function outerWidth(el) {
 }
 
 export class UIToolbar extends UIElement {
+  // Phosphor icons this primitive auto-stamps (without consumer markup).
+  // Aggregated by installIconLoadersForRegistered() across all defined
+  // elements. Audited by check-required-icons.mjs.
+  static requiredIcons = ['dots-three'];
+
   static properties = {
     gap:      { type: String,  default: 'sm', reflect: true },
     align:    { type: String,  default: 'start', reflect: true },
@@ -320,6 +325,12 @@ export class UIToolbar extends UIElement {
       trigger.hidden = true;
 
       // 2. Measure.
+      // Hidden-ancestor guard (gh#528): a display:none mount reads
+      // clientWidth 0 — committing a spill from that reading strands the
+      // bar collapsed. Step 1 already restored everything visible, so
+      // leaving now is the correct state; the ResizeObserver fires again
+      // with a real size when the ancestor becomes visible.
+      if (this.clientWidth === 0) return;
       const style = getComputedStyle(this);
       const padL = parseFloat(style.paddingLeft) || 0;
       const padR = parseFloat(style.paddingRight) || 0;
@@ -329,7 +340,16 @@ export class UIToolbar extends UIElement {
       // Include horizontal margins — components like divider-ui add their own
       // margin-inline which getBoundingClientRect() does NOT include but flex
       // layout DOES count toward the row width.
+      // Grow-item guard (gh#528): a flex-grow child (a spacer, a stretched
+      // group) measures at its EXPANDED width — the row then always reads
+      // "full" and the last real action spills unrecoverably (the pattern
+      // bug gh#494's build hit). Measure grow items at their natural size
+      // by zeroing flex-grow for the read, then restoring.
+      const grown = all.filter(el => parseFloat(getComputedStyle(el).flexGrow) > 0);
+      const savedGrow = grown.map(el => el.style.flexGrow);
+      for (const el of grown) el.style.flexGrow = '0';
       const widths = all.map(el => outerWidth(el));
+      grown.forEach((el, i) => { el.style.flexGrow = savedGrow[i]; });
       const total = widths.reduce((a, w) => a + w, 0) + Math.max(0, all.length - 1) * gap;
 
       // Reserve OVERFLOW_BUFFER worth of headroom — start spilling sooner

package/components/toolbar/toolbar.yaml

@@ -41,6 +41,8 @@ states:
     description: Default, ready for interaction.
 traits: []
 tokens: {}
+requiredIcons:
+  - dots-three
 a2ui:
   rules:
     - rule: 'Horizontal action bar — hosts <button-ui>, <toolbar-group-ui>, and <divider-ui> children.'

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);