@adia-ai/web-components 0.6.32 → 0.6.33

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.33] — 2026-05-23
+
+### Changed — `dist/icons-manifest.js` comment header updated (FB-53 §1 companion)
+
+- **`dist/icons-manifest.js`** is regenerated as a companion to the web-modules co-emit (see `@adia-ai/web-modules` [Unreleased] entry). The manifest file content is byte-identical except for the header comment, which now mentions co-location with both `web-components.min.js` AND `web-modules/everything.min.js`. `dist/web-components.min.js` rebuilt as part of the same bundle pass; no functional change. Files: `dist/icons-manifest.js`, `dist/web-components.min.js`.
+
+### Fixed — `<table-ui raw>` is now a true visual-only passthrough (FB-53 §2)
+
+- **`<table-ui raw>` previously applied the chrome reset but still ran the full data lifecycle**, so wrapping a consumer-authored native `<table>` with no `.data` set produced a phantom `[data-empty]` "No data" overlay above the consumer's content. Root cause: `class.js` `render()` had no `this.raw` short-circuit; `#renderOverlays` injected the empty-state placeholder unconditionally whenever `this.#data.length === 0`. Fix: `render()` now early-returns when `this.raw` is set — no header injection, no body reconciliation, no overlays, no aggregation, no pagination. Raw is now the documented "consumer owns the body shape" mode. yaml description expanded with the full semantic. NEW 4 vitest cases in `table.test.js` (lock the contract: no `[data-empty]`, no `[data-header]`, no `[data-body]`, no rowgroups; non-raw default still injects them); 18/18 passing. Files: `components/table/class.js`, `components/table/table.yaml`, `components/table/table.test.js`.
+
+### Fixed — `<field-ui>` no longer reserves row-gap for an absent message row (FB-54)
+
+- **`field.css` `:scope` declared `row-gap: var(--field-gap)` unconditionally**, so when no `[slot="hint"]` and no `[slot="error"]` were present, the grid's zero-content message row still reserved `--field-gap` (~8 px) between itself and the control row. Result: `<field-ui inline>` rendered ~7-8 px taller than non-field-ui siblings in a `<row-ui align="center">`, visually "lifting" the label relative to sibling control text. Fix: move `row-gap: var(--field-gap)` into a `:has(> [slot="hint"], > [slot="error"])` guard so the gap is reserved only when a message slot is actually present. Existing consumers with hints/errors get the same rendering; consumers without get a tighter, sibling-matching height. `:has()` is baseline (Chromium 105 / Safari 15.4 / Firefox 121 — well within ADR-0007's floor). NEW source-grep regression tests in `field.test.js` lock the contract (19/19 passing). Files: `components/field/field.css`, `components/field/field.test.js`.
+
+### Changed — `<tabs-ui>` row height now anchors to `var(--a-size)` (was hardcoded `2.25rem`)
+
+- **`--tabs-button-height` retargeted from the hardcoded `2.25rem` (36 px, equivalent to `[size="lg"]`) to `var(--a-size)`.** Tabs now respond to the universal `[size]` attribute system like `button-ui`, `select-ui`, `nav-item-ui`, and other row-family primitives — `<tabs-ui size="sm">` → 24 px, default → 30 px, `<tabs-ui size="lg">` → 36 px (all at default `--a-density: 1`). Default-rendered tabs visibly shrink from 36 px → 30 px. **Behavior change** for consumers depending on lg-by-default tabs: set `[size="lg"]` on the host (or override `--tabs-button-height: var(--a-size-lg)`) to restore. Caught by NEW `check:size-wiring` audit (commit `2d931b980`). Files: `components/tabs/tabs.css`, `components/tabs/tabs.examples.html`.
+
+### Maintenance — `<kbd-ui>` exempted from size-wiring audit
+
+- **`scripts/release/check-size-wiring.mjs`** EXEMPT + YAML_SIZE_EXEMPT: added `kbd-ui` to both — `--kbd-height: 1.25rem` is intentional (keyboard-key cap matching small-text rhythm, not row-family) and the `size:` prop drives font-size scale, parallel to existing exemptions for `badge`, `tag`, `icon`. Pre-existing technical debt surfaced by the new audit in v0.6.32; not a v0.6.33-introduced violation. Files: `scripts/release/check-size-wiring.mjs`.
+
 ## [0.6.32] — 2026-05-23
 
 ### Fixed (P0) — `everything.js` CDN bundle now includes all primitives (FB-51)

package/components/field/field.css

@@ -33,10 +33,19 @@
       "control"
       "message";
     column-gap: var(--field-gap);
-    row-gap: var(--field-gap);
     align-items: center;
   }
 
+  /* Gate `row-gap` on actual message presence — otherwise the grid
+     reserves --field-gap (~8px) between the control row and a
+     zero-content message row, making field-ui[inline] visibly taller
+     (~7-8 px) than non-field-ui siblings in a `<row-ui align="center">`.
+     FB-54 (v0.6.32) — closes the trap for compact filter bars that
+     mix field-ui with bare primitives. */
+  :scope:has(> [slot="hint"], > [slot="error"]) {
+    row-gap: var(--field-gap);
+  }
+
   /* Stacked + (trailing or action) → 2-col */
   :scope:has(> :is([slot="trailing"], [slot="action"])) {
     grid-template-columns: minmax(0, 1fr) auto;

package/components/field/field.test.js

@@ -1,4 +1,7 @@
 import { describe, it, expect, beforeEach } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
 import '../../core/element.js';
 import './field.js';
 // Preload <input-ui> at module top so the error-mirror test can rely on
@@ -8,6 +11,9 @@ import './field.js';
 // it to top-level removes that race entirely.
 import '../input/input.js';
 
+const HERE = dirname(fileURLToPath(import.meta.url));
+const FIELD_CSS = readFileSync(resolve(HERE, 'field.css'), 'utf8');
+
 const tick = () => new Promise((r) => queueMicrotask(r));
 
 function mount(html) {
@@ -200,4 +206,30 @@ describe('field-ui', () => {
     const f = mount('<field-ui label="X"><input /></field-ui>');
     expect(hasAlignProp(f)).toBe(true);
   });
+
+  // ── FB-54 row-gap presence guard ──────────────────────────────────
+  //
+  // field-ui grid's :scope previously declared `row-gap: var(--field-gap)`
+  // unconditionally. Without a hint/error slot the message row collapses
+  // to 0px content, but the gap is still reserved — so field-ui[inline]
+  // is ~7-8 px taller than non-field-ui siblings in a row-ui[align=center].
+  //
+  // The fix moves `row-gap` into a `:has(> [slot="hint"], > [slot="error"])`
+  // guard. jsdom doesn't evaluate @scope rules in getComputedStyle, so the
+  // contract is locked by source-grep — same recipe as
+  // description-list / text-ui / tag-ui contract pins.
+
+  it('CSS source contract: base :scope does NOT declare unconditional row-gap', () => {
+    // Match the `:scope { ... }` block (no chained attribute/pseudo selectors).
+    // Within that block, `row-gap` must NOT appear.
+    const scopeBlock = FIELD_CSS.match(/:scope\s*\{[^}]+\}/);
+    expect(scopeBlock).not.toBeNull();
+    expect(scopeBlock[0]).not.toMatch(/row-gap\s*:/);
+  });
+
+  it('CSS source contract: `:scope:has(> [slot="hint"], > [slot="error"])` declares row-gap', () => {
+    expect(FIELD_CSS).toMatch(
+      /:scope:has\(>\s*\[slot="hint"\]\s*,\s*>\s*\[slot="error"\]\)\s*\{[^}]*row-gap:\s*var\(--field-gap\)/
+    );
+  });
 });

package/components/table/class.js

@@ -541,6 +541,15 @@ export class UITable extends UIElement {
   // ── Render ─────────────────────────────────────────────────────────────────
 
   render() {
+    // Raw mode: visual-only passthrough. The consumer authored the entire
+    // body shape (native <table>, custom row rendering, etc.) and only wants
+    // table-ui's CSS tokens (chrome reset via :scope[raw]). The data
+    // lifecycle (header injection, body reconciliation, overlays, aggregation,
+    // pagination) MUST NOT run — otherwise `.data === []` injects a
+    // [data-empty] overlay above the consumer's content (FB-53 §2). Raw is
+    // the explicit "consumer owns layout" mode.
+    if (this.raw) return;
+
     const visCols = this.#visibleColumns;
 
     // Set grid template

package/components/table/table.a2ui.json

@@ -52,7 +52,7 @@
       "default": 0
     },
     "raw": {
-      "description": "Raw mode",
+      "description": "Visual-only passthrough — applies `<table-ui>`'s chrome reset (background / border / border-radius all transparent) AND short-circuits the data lifecycle entirely. The consumer owns the body shape: no header injection, no row reconciliation from `.data`, no empty-state / loading overlays, no aggregation or pagination footers. Use raw when embedding `<table-ui>` inside surfaces that supply their own chrome (e.g. `<card-ui><section bleed>`), or when wrapping a consumer-authored native `<table>` for design-token styling without the framework's data semantics. Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle still ran — wrapping a `.data`-unset native table produced a phantom \"No data\" overlay. v0.6.33+ matches the documented contract.",
       "type": "boolean",
       "default": false
     },

package/components/table/table.d.ts

@@ -98,7 +98,7 @@ export class UITable extends UIElement {
   loading: boolean;
   /** Rows per page. 0 = show all rows without pagination. When > 0, renders a pagination bar below the table. */
   paginate: number;
-  /** Raw mode */
+  /** Visual-only passthrough — applies `<table-ui>`'s chrome reset (background / border / border-radius all transparent) AND short-circuits the data lifecycle entirely. The consumer owns the body shape: no header injection, no row reconciliation from `.data`, no empty-state / loading overlays, no aggregation or pagination footers. Use raw when embedding `<table-ui>` inside surfaces that supply their own chrome (e.g. `<card-ui><section bleed>`), or when wrapping a consumer-authored native `<table>` for design-token styling without the framework's data semantics. Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle still ran — wrapping a `.data`-unset native table produced a phantom "No data" overlay. v0.6.33+ matches the documented contract. */
   raw: boolean;
   /** Global search/filter string. Filters visible rows across all columns using case-insensitive substring matching. Resets to page 1 on change. */
   search: string;

package/components/table/table.test.js

@@ -283,3 +283,56 @@ describe('table-ui — FB-47 keyboard: Enter activates focused body cell', () =>
     expect(cellClickFired).toBe(false);
   });
 });
+
+/**
+ * Raw mode: visual-only passthrough — consumer owns the body shape.
+ *
+ * Pre-v0.6.33 (FB-53 §2), `<table-ui raw>` only applied the CSS chrome
+ * reset (background/border/radius transparent) but the data lifecycle
+ * still ran. With `.data === []` (the natural state when wrapping a
+ * consumer-authored native <table>), `#renderOverlays` injected a
+ * [data-empty] "No data" placeholder above the consumer's content.
+ *
+ * v0.6.33 short-circuits `render()` at the top when `this.raw` is set:
+ * no header injection, no body reconciliation, no overlays, no
+ * aggregation, no pagination.
+ */
+describe('table-ui — raw mode passthrough (FB-53 §2)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('raw mode does NOT inject [data-empty] overlay when .data is empty', async () => {
+    const el = mount('<table-ui raw><table><tr><td>foo</td></tr></table></table-ui>');
+    // No .data set → empty by default. Without the raw early-return,
+    // #renderOverlays would create the [data-empty] placeholder.
+    await raf();
+    expect(el.querySelector(':scope > [data-empty]')).toBeNull();
+    // Consumer's native <table> survives untouched.
+    expect(el.querySelector(':scope > table')).not.toBeNull();
+  });
+
+  it('raw mode does NOT inject [data-header] or [data-body] rowgroups', async () => {
+    const el = mount('<table-ui raw><table><tr><td>x</td></tr></table></table-ui>');
+    await raf();
+    expect(el.querySelector(':scope > [data-header]')).toBeNull();
+    expect(el.querySelector(':scope > [data-body]')).toBeNull();
+  });
+
+  it('raw mode preserves consumer markup even when .columns + .data are set', async () => {
+    const el = mount('<table-ui raw><table id="consumer"><tr><td>consumer-owned</td></tr></table></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+    // The consumer's native <table> is still the only table-shaped child.
+    expect(el.querySelector('#consumer')).not.toBeNull();
+    expect(el.querySelectorAll(':scope > [role="rowgroup"]').length).toBe(0);
+  });
+
+  it('non-raw mode (default) still injects header + body rowgroups', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+    expect(el.querySelector(':scope > [data-header]')).not.toBeNull();
+    expect(el.querySelector(':scope > [data-body]')).not.toBeNull();
+  });
+});

package/components/table/table.yaml

@@ -55,7 +55,19 @@ props:
     type: number
     default: 0
   raw:
-    description: Raw mode
+    description: >-
+      Visual-only passthrough — applies `<table-ui>`'s chrome reset
+      (background / border / border-radius all transparent) AND
+      short-circuits the data lifecycle entirely. The consumer
+      owns the body shape: no header injection, no row reconciliation
+      from `.data`, no empty-state / loading overlays, no aggregation
+      or pagination footers. Use raw when embedding `<table-ui>` inside
+      surfaces that supply their own chrome (e.g. `<card-ui><section
+      bleed>`), or when wrapping a consumer-authored native `<table>`
+      for design-token styling without the framework's data semantics.
+      Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle
+      still ran — wrapping a `.data`-unset native table produced a
+      phantom "No data" overlay. v0.6.33+ matches the documented contract.
     type: boolean
     default: false
     reflect: true

package/components/tabs/tabs.css

@@ -4,7 +4,7 @@
     --tabs-border:          transparent;
     --tabs-bg:              transparent;
     --tabs-radius:          var(--a-radius-md);
-    --tabs-button-height:   2.25rem;
+    --tabs-button-height:   var(--a-size);
     --tabs-button-px:       var(--a-space-2);
     --tabs-font-size:       var(--a-ui-md);
     --tabs-gap:             var(--a-space-1);

package/dist/icons-manifest.js

@@ -1,7 +1,7 @@
 // Auto-generated by scripts/build/bundle-js.mjs — do not edit.
-// Co-located with web-components.min.js so CDN consumers can load icon data
-// without a bundler. icons-phosphor.js fetches this file then lazy-loads
-// individual SVGs from the `cdn` URL below.
+// Co-located with web-components.min.js + web-modules/everything.min.js
+// so CDN consumers can load icon data without a bundler. icons-phosphor.js
+// fetches this file then lazy-loads individual SVGs from the `cdn` URL below.
 export default {
   "cdn": "https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/",
   "regular": [