@adia-ai/web-components 0.8.40 → 0.8.42

package/components/switch/switch.a2ui.json

@@ -75,7 +75,7 @@
         "wrong": "<field-ui inline label=\"Email notifications\">\n  <switch-ui></switch-ui>\n</field-ui>\n"
       }
     ],
-    "category": "layout",
+    "category": "input",
     "composes": [],
     "events": {
       "change": {
@@ -93,25 +93,26 @@
       "switch"
     ],
     "name": "UISwitch",
-    "related": [
-      "Check",
-      "Radio",
-      "Field"
-    ],
-    "slots": {
+    "parts": {
       "hint": {
-        "description": "Help text below the label"
+        "description": "Help text below the label — set via the `hint` attribute (template renders the span and wires aria-describedby); template-owned, not a light-DOM insertion point"
       },
       "label": {
-        "description": "Label text beside the toggle"
+        "description": "Label text beside the toggle — set via the `label` attribute (template renders the span); template-owned, not a light-DOM insertion point (gh#1435, gh#1447)"
       },
       "thumb": {
-        "description": "Sliding thumb indicator inside track"
+        "description": "Sliding thumb indicator inside track — template-owned anatomy part"
       },
       "track": {
-        "description": "Toggle track container (holds thumb)"
+        "description": "Toggle track container (holds thumb) — template-owned anatomy part"
       }
     },
+    "related": [
+      "Check",
+      "Radio",
+      "Field"
+    ],
+    "slots": {},
     "states": [
       {
         "description": "Default, ready for interaction.",

package/components/switch/switch.css

@@ -113,7 +113,7 @@ switch-ui[checked] [slot="thumb"] {
     margin-top: var(--switch-hint-mt, var(--a-space-1));
     font-size: var(--switch-hint-size, var(--a-ui-xs));
     color: var(--switch-hint-fg, var(--a-fg-muted));
-    line-height: var(--switch-hint-lh, 1.4);
+    line-height: var(--switch-hint-lh, var(--a-font-leading-normal));
   }
   /* The hint is documented (yaml + props table) as rendering BELOW the label,
      but the base `inline-flex` row laid the stamped `[slot="hint"]` out as a

package/components/switch/switch.yaml

@@ -3,7 +3,7 @@ name: UISwitch
 tag: switch-ui
 status: stable
 component: Switch
-category: layout
+category: input
 version: 1
 description: |
   Toggle switch primitive — binary on/off control where the host IS
@@ -57,15 +57,15 @@ props:
 events:
   change:
     description: Fired when checked state changes
-slots:
+parts:
   hint:
-    description: Help text below the label
+    description: Help text below the label — set via the `hint` attribute (template renders the span and wires aria-describedby); template-owned, not a light-DOM insertion point
   label:
-    description: Label text beside the toggle
+    description: Label text beside the toggle — set via the `label` attribute (template renders the span); template-owned, not a light-DOM insertion point (gh#1435, gh#1447)
   thumb:
-    description: Sliding thumb indicator inside track
+    description: Sliding thumb indicator inside track — template-owned anatomy part
   track:
-    description: Toggle track container (holds thumb)
+    description: Toggle track container (holds thumb) — template-owned anatomy part
 states:
 - name: idle
   description: Default, ready for interaction.

package/components/table/table.a2ui.json

@@ -277,6 +277,7 @@
       "manage"
     ],
     "name": "UITable",
+    "parts": {},
     "related": [
       "button",
       "input",

package/components/table/table.class.js

@@ -56,6 +56,7 @@
 
 import { UIElement } from '../../core/element.js';
 import { cellTypes, sortFns } from './cell-types.js';
+import { isNode } from '../../core/dom.js';
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -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);
   }
 
@@ -491,7 +493,7 @@
 
   /* ═══════ Resize handle ═══════ */
 
-  [data-resize-handle] {
+  [data-column-resize-handle] {
     position: absolute;
     right: calc(-1 * var(--table-resize-width) / 2);
     top: 0;
@@ -508,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);
   }
 

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

@@ -57,6 +57,18 @@ function popoverHead(text) {
   return el;
 }
 
+// `col.label` is sometimes set to an nbsp or a bare space — the idiom
+// consumers use on render-only columns (e.g. `_cancel` / `_download` /
+// `_replay`) to keep the TABLE header cell blank while still rendering a
+// custom cell. That whitespace is truthy, so a plain `col.label || col.key`
+// fallback never engages and popover rows (filter / sort / columns) render
+// with no visible text. Trim before testing so the fallback only skips when
+// a label is genuinely present, never when it's intentional whitespace.
+function columnLabel(col) {
+  const label = col.label;
+  return typeof label === 'string' && label.trim() ? label : col.key;
+}
+
 const SELECT_THRESHOLD = 50;
 const SAMPLE_LIMIT     = 500;
 
@@ -270,7 +282,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 +355,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);
     }
   }
 
@@ -511,7 +542,7 @@ export class UITableToolbar extends UIElement {
       const row = document.createElement('field-ui');
       row.setAttribute('data-filter-row', '');
       row.setAttribute('inline', '');
-      row.setAttribute('label', col.label || col.key);
+      row.setAttribute('label', columnLabel(col));
 
       const shape = detectFilterShape(col, data);
       const current = filters[col.key];
@@ -618,7 +649,7 @@ export class UITableToolbar extends UIElement {
       const dir = dirByKey.get(col.key);
       const row = document.createElement('menu-item-ui');
       row.setAttribute('data-sort-row', '');
-      row.setAttribute('text', col.label || col.key);
+      row.setAttribute('text', columnLabel(col));
       row.dataset.key = col.key;
       if (dir) row.dataset.active = dir;
 
@@ -712,7 +743,7 @@ export class UITableToolbar extends UIElement {
       const row = document.createElement('field-ui');
       row.setAttribute('data-columns-row', '');
       row.setAttribute('inline', '');
-      row.setAttribute('label', col.label || col.key);
+      row.setAttribute('label', columnLabel(col));
 
       const check = document.createElement('check-ui');
       if (!col.hidden) check.setAttribute('checked', '');

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

@@ -85,7 +85,7 @@
     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

@@ -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",