@adia-ai/web-components 0.8.39 → 0.8.41

package/components/table/table.class.js

@@ -21,8 +21,11 @@
  *   sortable   — enable column sorting on header click
  *   selectable — enable row selection via checkboxes
  *   striped    — alternate row background
- *   density    — 'compact' | 'standard' | 'comfortable'
  *   valign     — 'center' (default) | 'top' — body-cell vertical alignment (gh#505)
+ *
+ * table-ui has no local `density` prop (ADR-0054) — it converges onto the
+ * ambient global [density="compact"|"spacious"] attribute; --table-py/-px
+ * already derive from --a-space-* steps, which --a-density scales.
  *   paginate   — rows per page (0 = no pagination)
  *   loading    — show loading overlay
  *   search     — global search filter string
@@ -53,6 +56,7 @@
 
 import { UIElement } from '../../core/element.js';
 import { cellTypes, sortFns } from './cell-types.js';
+import { isNode } from '../../core/dom.js';
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -118,7 +122,6 @@ export class UITable extends UIElement {
     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 },
     paginate:   { type: Number,  default: 0,     reflect: true },
     loading:    { type: Boolean, default: false, reflect: true },
     search:     { type: String,  default: '',    reflect: true },
@@ -294,7 +297,6 @@ export class UITable extends UIElement {
       columnWidths: Object.fromEntries(this.#columnWidths),
       hiddenColumns: this.#columns.filter(c => c.hidden).map(c => c.key),
       page: this.#page,
-      density: this.density,
     };
   }
 
@@ -319,7 +321,6 @@ export class UITable extends UIElement {
       }
     }
     if (state.page != null) this.#page = state.page;
-    if (state.density) this.density = state.density;
     this.#requestRender();
   }
 
@@ -683,7 +684,7 @@ export class UITable extends UIElement {
           detail.dataset.for = idx;
           if (this.expandRenderer) {
             const content = this.expandRenderer(this.#data[idx], idx);
-            if (content instanceof Node) detail.appendChild(content);
+            if (isNode(content)) detail.appendChild(content);
             else detail.textContent = String(content);
           }
         }
@@ -784,7 +785,7 @@ export class UITable extends UIElement {
       // Resize handle
       if (col.resizable !== false) {
         const handle = document.createElement('div');
-        handle.setAttribute('data-resize-handle', '');
+        handle.setAttribute('data-column-resize-handle', '');
         handle.dataset.resizeKey = col.key;
         cell.appendChild(handle);
       }
@@ -835,10 +836,8 @@ export class UITable extends UIElement {
     row.dataset.index = dataIndex;
 
     if (isSelected) {
-      row.setAttribute('data-selected', '');
       row.setAttribute('aria-selected', 'true');
     } else {
-      row.removeAttribute('data-selected');
       row.removeAttribute('aria-selected');
     }
 
@@ -887,7 +886,7 @@ export class UITable extends UIElement {
       // Render priority: column.render > column.format > cellType.render > text
       if (typeof col.render === 'function') {
         const result = col.render(value, data, cell, dataIndex);
-        if (result instanceof Node) {
+        if (isNode(result)) {
           cell.replaceChildren(result);
         } else if (typeof result === 'string') {
           cell.innerHTML = result;
@@ -982,7 +981,7 @@ export class UITable extends UIElement {
           const widths = ['60%', '80%', '70%', '50%', '90%'];
           sk.setAttribute('width', widths[c % widths.length]);
           sk.setAttribute('height', '1em');
-          sk.setAttribute('radius', 'sm');
+          sk.setAttribute('corner-radius', 'sm');
           cell.appendChild(sk);
           row.appendChild(cell);
         }
@@ -1270,7 +1269,7 @@ export class UITable extends UIElement {
    *  pointer events cover mouse + touch + pen in one handler. */
   #onPointerdown = (e) => {
     if (e.button !== undefined && e.button !== 0) return;  // primary button only
-    const handle = e.target.closest('[data-resize-handle]');
+    const handle = e.target.closest('[data-column-resize-handle]');
     if (handle && this.contains(handle)) {
       e.preventDefault();
       this.#startResize(e, handle);
@@ -1308,7 +1307,7 @@ export class UITable extends UIElement {
     }
 
     // ── Resize handle mousedown is handled separately ──
-    const resizeHandle = target.closest('[data-resize-handle]');
+    const resizeHandle = target.closest('[data-column-resize-handle]');
     if (resizeHandle && this.contains(resizeHandle)) {
       this.#startResize(e, resizeHandle);
       return;
@@ -1450,9 +1449,12 @@ export class UITable extends UIElement {
     const startWidth = headerCell ? headerCell.getBoundingClientRect().width : 100;
     const startX = e.clientX;
 
-    this.setAttribute('data-resizing', '');
+    // Stamped on the HANDLE itself, not the table host — table.css's
+    // `[data-column-resize-handle][data-resizing]` rule requires both
+    // attributes on the same element (matching :hover's per-handle scope).
+    handle.setAttribute('data-resizing', '');
 
-    this.#resizeState = { key, col, startX, startWidth };
+    this.#resizeState = { key, col, startX, startWidth, handle };
 
     document.addEventListener('pointermove', this.#onResizeMove);
     document.addEventListener('pointerup', this.#onResizeEnd);
@@ -1475,12 +1477,12 @@ export class UITable extends UIElement {
 
   #onResizeEnd = (e) => {
     if (!this.#resizeState) return;
-    const { key } = this.#resizeState;
+    const { key, handle } = this.#resizeState;
 
     document.removeEventListener('pointermove', this.#onResizeMove);
     document.removeEventListener('pointerup', this.#onResizeEnd);
 
-    this.removeAttribute('data-resizing');
+    handle.removeAttribute('data-resizing');
 
     const width = this.#columnWidths.get(key);
     this.#resizeState = null;

package/components/table/table.css

@@ -419,10 +419,12 @@
 
   /* Selected row — must out-specify the base row rule `[data-body] >
      [role="row"]` (0,2,0) and the hover rule (0,2,1), or the highlight never
-     paints. Scoping to `[data-body] > [role="row"][data-selected]` lifts it to
-     (0,4,0). (The striped-even override below handles selected+striped, which
-     is higher still.) */
-  [data-body] > [role="row"][data-selected] {
+     paints. Scoping to `[data-body] > [role="row"][aria-selected="true"]` lifts
+     it to (0,4,0). (The striped-even override below handles selected+striped,
+     which is higher still.) Keys off `aria-selected` directly — no private
+     `[data-selected]` mirror (gh#1332 Category A; matches admin-roster's
+     `[aria-checked="true"]` precedent from PR #1438). */
+  [data-body] > [role="row"][aria-selected="true"] {
     background: var(--table-row-bg-selected);
   }
 
@@ -446,7 +448,7 @@
   /* Selected wins over the stripe — same (0,5,0) specificity as the striped-
      even rule above, placed AFTER it so source order resolves the tie in
      favor of selection (a selected row reads as selected regardless of stripe). */
-  :scope[striped] [data-body] > [role="row"][data-selected] {
+  :scope[striped] [data-body] > [role="row"][aria-selected="true"] {
     background: var(--table-row-bg-selected);
   }
 
@@ -463,14 +465,11 @@
 
   /* ═══════ Density ═══════ */
 
-  :scope[density="compact"] {
-    --table-py: var(--a-space-1);
-    --table-px: var(--a-space-2);
-  }
-
-  :scope[density="comfortable"] {
-    --table-py: var(--a-space-4);
-  }
+  /* No local override (ADR-0054 convergence) — --table-py/-px above already
+     derive from --a-space-* steps, which the ambient global
+     [density="compact"|"spacious"] attribute already scales via
+     --a-density. Do not reintroduce a component-local :scope[density=…]
+     block; that would re-shadow the global grammar (ADR-0053). */
 
   /* ═══════ Pinned cells ═══════ */
 
@@ -494,7 +493,7 @@
 
   /* ═══════ Resize handle ═══════ */
 
-  [data-resize-handle] {
+  [data-column-resize-handle] {
     position: absolute;
     right: calc(-1 * var(--table-resize-width) / 2);
     top: 0;
@@ -511,13 +510,13 @@
      table's right edge (handle centered on the column boundary; the last
      column has no neighbor to resize against) and triggered a 2 px scrollbar
      overhang on every table even with nothing to scroll. */
-  [role="row"] > [role="columnheader"]:last-child [data-resize-handle] {
+  [role="row"] > [role="columnheader"]:last-child [data-column-resize-handle] {
     display: none;
     z-index: 1;
   }
 
-  [data-resize-handle]:hover,
-  [data-resize-handle][data-resizing] {
+  [data-column-resize-handle]:hover,
+  [data-column-resize-handle][data-resizing] {
     background: var(--table-accent);
   }
 
@@ -744,7 +743,7 @@
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
     border-top: 2px solid var(--table-agg-border);
-    font-weight: 600;
+    font-weight: var(--a-weight-semibold);
     font-size: var(--table-agg-size);
     color: var(--table-fg-secondary);
   }

package/components/table/table.d.ts

@@ -90,8 +90,6 @@ export class UITable extends UIElement {
   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;
-  /** Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows. */
-  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. Note: `<card-ui><section bleed>` already drops a direct-child table-ui's chrome automatically (card.css, gh#796) — `frameless`/`raw` on the instance still applies and is honored, but is no longer required just to avoid the doubled-edge look in that composition. */

package/components/table/table.yaml

@@ -36,15 +36,6 @@ props:
       type: object
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
-  density:
-    description: Controls cell padding and row height. 'compact' for dense data, 'standard' for default
-      spacing, 'comfortable' for spacious rows.
-    type: string
-    default: standard
-    enum:
-      - compact
-      - standard
-      - comfortable
   expandable:
     description: Enable row expansion
     type: boolean

package/components/table-toolbar/table-toolbar.a2ui.json

@@ -121,6 +121,7 @@
       "records"
     ],
     "name": "UITableToolbar",
+    "parts": {},
     "related": [
       "table",
       "search",

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

@@ -270,7 +270,7 @@ export class UITableToolbar extends UIElement {
     title.appendChild(heading);
 
     const badge = document.createElement('badge-ui');
-    badge.setAttribute('data-count-badge', '');
+    badge.setAttribute('data-toolbar-count-badge', '');
     badge.setAttribute('size', 'sm');
     badge.setAttribute('tone', 'muted');
     badge.hidden = true;
@@ -343,26 +343,45 @@ export class UITableToolbar extends UIElement {
 
   #updateTitle() {
     const heading = this.querySelector(':scope [data-heading]');
-    if (!heading) return;
-    if (this.text) {
-      heading.textContent = this.text;
-      heading.hidden = false;
-    } else if (heading.textContent.trim()) {
-      heading.hidden = false;
-    } else {
-      heading.hidden = true;
+    if (heading) {
+      if (this.text) {
+        heading.textContent = this.text;
+        heading.hidden = false;
+      } else if (heading.textContent.trim()) {
+        heading.hidden = false;
+      } else {
+        heading.hidden = true;
+      }
+    }
+
+    const badge = this.querySelector(':scope [data-toolbar-count-badge]');
+    if (badge) {
+      const explicit = this.count?.toString().trim();
+      const fallback = this.#target?.data?.length;
+      const value = explicit || (Number.isFinite(fallback) ? String(fallback) : '');
+      if (value) {
+        badge.setAttribute('text', value);
+        badge.hidden = false;
+      } else {
+        badge.hidden = true;
+      }
     }
 
-    const badge = this.querySelector(':scope [data-count-badge]');
-    if (!badge) return;
-    const explicit = this.count?.toString().trim();
-    const fallback = this.#target?.data?.length;
-    const value = explicit || (Number.isFinite(fallback) ? String(fallback) : '');
-    if (value) {
-      badge.setAttribute('text', value);
-      badge.hidden = false;
-    } else {
-      badge.hidden = true;
+    // The CLUSTER hides with its children, not just them (ADIA2-8897):
+    // `[data-title]` is `flex: 0 0 auto` in the toolbar row, so an
+    // empty-but-present cluster still consumes one `--table-toolbar-gap`
+    // (`--a-space-3`, 12px at d=1) and pushes `[data-controls]` off the leading
+    // edge of the table it labels — the whole visible toolbar on the
+    // columns-only shape. Derived from the children's own hidden state so a
+    // third child of the cluster stays covered; matched down the stamped path
+    // because `#stamp` MOVES `[slot="actions"]` children into the same subtree
+    // and a consumer's own `data-title` must not be mistaken for the cluster.
+    // Both branches above are guarded, not early-returning, so a missing part
+    // can't strand the wrapper mid-state. `children` is array-LIKE (not
+    // guaranteed iterable) under the SSR shims, hence `Array.from`.
+    const title = this.querySelector(':scope > [data-toolbar] > [data-title]');
+    if (title) {
+      title.hidden = Array.from(title.children).every((child) => child.hidden);
     }
   }
 

package/components/table-toolbar/table-toolbar.css

@@ -82,10 +82,10 @@
     font-size: var(--table-toolbar-title-size);
     font-weight: var(--table-toolbar-title-weight);
     color: var(--table-toolbar-title-fg);
-    line-height: 1.2;
+    line-height: var(--a-font-leading-snug);
   }
 
-  [data-count-badge][hidden] { display: none; }
+  [data-toolbar-count-badge][hidden] { display: none; }
 
   /* ═══════ Controls cluster ═══════ */
 

package/components/tabs/tab.a2ui.json

@@ -25,6 +25,11 @@
       "description": "Optional leading icon name (Phosphor) for the tab button.",
       "type": "string"
     },
+    "selected": {
+      "description": "Whether this tab's panel is the active one. Managed by the parent <tabs-ui> container — don't set directly; the parent's [value] is the single source of truth (ADR-0056).",
+      "type": "boolean",
+      "default": false
+    },
     "text": {
       "description": "Tab button label (rendered by parent <tabs-ui>).",
       "type": "string"
@@ -39,6 +44,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedParents": [
+      "Tabs"
+    ],
     "anti_patterns": [],
     "category": "navigation",
     "composes": [],
@@ -51,6 +59,7 @@
       "tabs-child"
     ],
     "name": "UITab",
+    "parts": {},
     "related": [
       "Tabs",
       "Nav",

package/components/tabs/tab.js

@@ -16,6 +16,10 @@ class UITab extends UIElement {
     value:    { type: String,  default: '', reflect: true },
     icon:     { type: String,  default: '', reflect: true },
     disabled: { type: Boolean, default: false, reflect: true },
+    // ADR-0056 (gh#1303, #1363 B7): declared reflected selection-item state,
+    // parent-managed — <tabs-ui> stamps this instead of a private data-*
+    // hook. Mirrors <segment-ui>'s [selected].
+    selected: { type: Boolean, default: false, reflect: true },
   };
 
   static template = () => null;

package/components/tabs/tab.yaml

@@ -32,8 +32,18 @@ props:
     description: Whether the tab is selectable.
     type: boolean
     default: false
+  selected:
+    description: >-
+      Whether this tab's panel is the active one. Managed by the parent
+      <tabs-ui> container — don't set directly; the parent's [value] is
+      the single source of truth (ADR-0056).
+    type: boolean
+    default: false
+    reflect: true
 
 a2ui:
+  allowedParents:
+    - Tabs
   rules:
     - >-
       <tab-ui> only renders inside <tabs-ui>. Never use it standalone.
@@ -57,6 +67,11 @@ a2ui:
       non-selectable. Do not pair <tab-ui> with <button-ui> wrappers —
       the strip button is parent-rendered. Do not nest <tab-ui> inside
       another <tab-ui>.
+    - >-
+      [selected] reflects whether this tab's panel is active — it is
+      parent-managed (ADR-0056's selection-item convention, mirroring
+      <segment-ui>); author markup drives the parent's [value], never
+      [selected] directly.
 
 keywords:
   - tab

package/components/tabs/tabs.a2ui.json

@@ -42,8 +42,11 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedChildren": [
+      "Tab"
+    ],
     "anti_patterns": [],
-    "category": "container",
+    "category": "navigation",
     "composes": [
       "icon-ui"
     ],
@@ -73,15 +76,17 @@
       "tab"
     ],
     "name": "UITabs",
+    "parts": {
+      "indicator": {
+        "description": "Auto-created sliding indicator element (line variant only) — template-owned anatomy part, not a light-DOM insertion point (gh#1454). Lazily created once via an internal-field guard (`!this.#indicator`), never adopted from a consumer-authored element."
+      }
+    },
     "related": [
       "tab"
     ],
     "slots": {
       "default": {
         "description": "Child tab-ui elements that form the tab strip"
-      },
-      "indicator": {
-        "description": "Auto-created sliding indicator element (line variant only)"
       }
     },
     "states": [

package/components/tabs/tabs.class.js

@@ -25,6 +25,12 @@
  *
  * Keyboard:
  *   ArrowLeft / ArrowRight to navigate tabs
+ *
+ * Selection state: the active <tab-ui>'s [selected] is a declared,
+ * reflected prop stamped by this parent — never a private data-* hook
+ * (ADR-0056, #1363 B7). The synthesized [slot="tab-button"] strip button
+ * (an internal render detail, not a declared primitive) keeps its own
+ * [data-active] + aria-selected — ARIA/internal wiring is unchanged.
  */
 
 import { UIElement, html } from '../../core/element.js';
@@ -143,14 +149,20 @@ export class UITabs extends UIElement {
     // Update sliding indicator
     this.#updateIndicator();
 
-    // Sync tab content visibility
+    // Sync tab content visibility. [selected] is the declared, reflected
+    // API surface (ADR-0056, #1363 B7) — parent-managed, mirrors
+    // <segment-ui>. [hidden] stays the actual visibility driver (native
+    // a11y semantics independent of CSS) and is kept in lockstep with
+    // [selected] rather than replaced by it.
     for (const tab of tabs) {
       const tabVal = tab.value || tab.getAttribute('value') || '';
       const isActive = tabVal === this.value;
       if (isActive) {
+        tab.setAttribute('selected', '');
         tab.removeAttribute('hidden');
         tab.setAttribute('role', 'tabpanel');
       } else {
+        tab.removeAttribute('selected');
         tab.setAttribute('hidden', '');
       }
     }

package/components/tabs/tabs.css

@@ -138,7 +138,7 @@
     /* font-family floor — see segment.css rationale. */
     font-family: var(--tabs-font-family);
     font-size: var(--tabs-font-size);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
@@ -172,8 +172,16 @@
   }
 
   /* ── Tab panels ── */
+  /* [selected] (ADR-0056, #1363 B7) is the declared state hook driving
+     visibility; [hidden] stays set in lockstep as the native a11y/no-CSS
+     fallback (tabs.class.js) — both selectors key off the same state, so
+     they never disagree. */
   tab-ui {
     box-sizing: border-box;
+    display: none;
+  }
+
+  tab-ui[selected] {
     display: block;
   }
 

package/components/tabs/tabs.d.ts

@@ -40,6 +40,8 @@ export class UITab extends UIElement {
   disabled: boolean;
   /** Optional leading icon name (Phosphor) for the tab button. */
   icon: string;
+  /** Whether this tab's panel is the active one. Managed by the parent <tabs-ui> container — don't set directly; the parent's [value] is the single source of truth (ADR-0056). */
+  selected: boolean;
   /** Tab button label (rendered by parent <tabs-ui>). */
   text: string;
   /** Stable id for the tab. Parent uses this to coordinate active state. */

package/components/tabs/tabs.yaml

@@ -5,7 +5,7 @@ name: UITabs
 tag: tabs-ui
 status: stable
 component: Tabs
-category: container
+category: navigation
 version: 1
 description: >-
   Tabbed panel switcher. Renders a button strip from child <tab-ui>
@@ -43,8 +43,13 @@ events:
 slots:
   default:
     description: Child tab-ui elements that form the tab strip
+parts:
   indicator:
-    description: Auto-created sliding indicator element (line variant only)
+    description: >-
+      Auto-created sliding indicator element (line variant only) —
+      template-owned anatomy part, not a light-DOM insertion point
+      (gh#1454). Lazily created once via an internal-field guard
+      (`!this.#indicator`), never adopted from a consumer-authored element.
 states:
   - name: idle
     description: Default, ready for interaction.
@@ -83,6 +88,8 @@ tokens:
   --tabs-radius:
     description: Override base border radius
 a2ui:
+  allowedChildren:
+    - Tab
   rules:
     - >-
       Decision rule: use <tabs-ui> when switching VIEWS within the same

package/components/tag/tag.a2ui.json

@@ -112,6 +112,7 @@
       "pill"
     ],
     "name": "UITag",
+    "parts": {},
     "related": [
       "Badge",
       "NavGroup",

package/components/tag/tag.css

@@ -154,8 +154,8 @@ tag-ui[removable]:not([disabled]):hover {
     /* font-family floor — see segment.css rationale. */
     font-family: var(--tag-font-family);
     font-size: var(--tag-font);
-    font-weight: 500;
-    line-height: 1;
+    font-weight: var(--a-weight-medium);
+    line-height: var(--a-font-leading-none);
     color: var(--tag-fg);
     background: var(--tag-bg);
     white-space: nowrap;