@adia-ai/web-components 0.7.6 → 0.7.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.7] — 2026-06-02
+
+### Fixed
+
+- **`[verse]` register now scales `--a-toggle-size` (check / radio / switch) down with its type + controls.** Companion to the 0.7.6 `[verse]` icon/caret fix (`91460aae2`). `--a-toggle-size` (the check / radio / switch control size) is declared at `:root` (`styles/foundation/size.css` = `--a-size-sm − --a-space-1` = 20px @md) and shifted by the global `[size]` rules (`styles/api/sizing.css` = 16/24 at sm/lg), but was **absent from `styles/verse.css`** — so in a verse context check / radio / switch chrome stayed the `:root`-computed 20px against verse's smaller (18/20/24) controls and 11/12/13px type. Added `--a-toggle-size` to all three verse sites (base `[verse]` + `[verse][size="lg"]` + `[verse][size="sm"]`) on clean `--a-space` rungs, one tier down: verse toggle is now **12 / 16 / 20px** at sm/md/lg (was a flat 20px); the regular register is unchanged (16/20/24). The explicit `[size]` tier rules are **required** — verse's `context` layer shadows the lower-layer global `[size]` `--a-toggle-size` rules, the same reason `--a-size` and the icon/caret tokens need them. `--a-space` rungs (not literal px like icon/caret) because the toggle targets land exactly on rungs, keeping the values density-aware and consistent with verse's inset/gap. Verified by `scripts/qa/register-scale-probe.mjs` (extended with a toggle axis): verse 12/16/20, regular 16/20/24, all other registers/axes unchanged. Showcased on the `check` / `radio` / `switch` demos (a "Typography registers" section, mirroring the card / button / text / field / badge / stat pages). File: `styles/verse.css`.
+- **`<agent-artifact-ui>` no longer strands `.map()`-rendered action buttons in the body.** `#build()` grabbed the author's `slot="primary"` / `slot="secondary"` buttons with a `:scope > [slot]` direct-child query, then `this.innerHTML = ''`. Buttons supplied via interpolation (`${actions.map(…)}`) arrive nested in the template engine's `display:contents` / `role="presentation"` wrapper spans, so the direct-child grab missed them and the wipe left them rendered in the artifact *body* instead of the header actions cluster. `#build()` now partitions children with a wrapper-piercing logical walk (the FB-92/96/98 pattern, mirroring `select-ui` `#logicalOptionChildren`), so interpolated AND static action buttons both reach the actions cluster. +2 regression tests. Surfaced by `audit-wrapper-trap` arm 2. File: `components/agent-artifact/agent-artifact.class.js`.
+
+### Changed
+
+- **`<drawer-ui>` body inset is now register / size-aware (`--drawer-inset` → `var(--a-inset)`).** `--drawer-inset` hardcoded `var(--a-space-4)` (a literal 16px rung); it now reads `var(--a-inset)`, matching its sibling `card-ui` (`--card-inset: var(--a-inset)`). **Behavior-neutral at the default tier** (`--a-inset-md` == `--a-space-4` == 16px); the change is that the drawer body / header / footer inset (header & footer padding derive from `--drawer-inset`) now scales with `[size]` (sm 14 / lg 18), `[verse]` (12), and `[prose]` (40). drawer's `[padding]` / `[bleed]` are layout *modes* (canvas-bg / no-pad), not a value scale — unchanged. Part of the 0.7.7 inset-alignment audit, which left `page` / `canvas` / `table` filter / `richtext` `pre` as intentional fixed rungs (their literals aren't 16px, so a swap would change behavior). Files: `components/drawer/drawer.css`, `components/drawer/drawer.examples.html`.
+- **CDN bundle rebuilt** — `dist/web-components.min.css` regenerated so the `[verse]` `--a-toggle-size` fix + the drawer inset reach `@adia-ai/web-components@0.7` CDN consumers.
+
 ## [0.7.6] — 2026-06-02
 
 ### Added

package/components/agent-artifact/agent-artifact.class.js

@@ -139,19 +139,35 @@ export class UIAgentArtifact extends UIElement {
     // To keep the Light-DOM approach consistent, we wrap existing children
     // into a body container if one isn't already present.
 
-    // Capture any existing non-slotted children to put into the body wrapper
-    const existingBodyNodes = Array.from(this.childNodes).filter((n) => {
-      if (n.nodeType === 1) {
-        const slot = /** @type {Element} */ (n).getAttribute?.('slot') || '';
-        return slot !== 'primary' && slot !== 'secondary';
+    // Partition the author's children by LOGICAL slot, piercing the template
+    // engine's display:contents / role="presentation" wrapper spans. A consumer
+    // that interpolates the action buttons — `${actions.map(a => html`<button-ui
+    // slot="primary">…`)}` — gets them nested in wrapper spans (core/template.js
+    // wrap()), so the old `:scope > [slot="primary"]` direct-child grab returned
+    // nothing and `innerHTML = ''` stranded them in the body. This is the
+    // wrapper-trap class (FB-92/96/98); walk + pierce so wrapped action buttons
+    // reach the header actions cluster. Wrappers are flattened (display:contents
+    // is layout-transparent); everything non-action becomes body.
+    const primaryBtns = [];
+    const secondaryBtns = [];
+    const bodyNodes = [];
+    const isWrapper = (el) =>
+      el.getAttribute('role') === 'presentation' || el.style?.display === 'contents';
+    const partition = (nodes) => {
+      for (const n of nodes) {
+        if (n.nodeType === 1) {
+          const el = /** @type {Element} */ (n);
+          if (isWrapper(el)) { partition(el.childNodes); continue; } // pierce; drop the wrapper
+          const slot = el.getAttribute('slot') || '';
+          if (slot === 'primary') { primaryBtns.push(el); continue; }
+          if (slot === 'secondary') { secondaryBtns.push(el); continue; }
+        }
+        bodyNodes.push(n);
       }
-      return true;
-    });
-
-    // Clear — we'll rebuild, preserving slotted action buttons
-    const primaryBtns = this.querySelectorAll(':scope > [slot="primary"]');
-    const secondaryBtns = this.querySelectorAll(':scope > [slot="secondary"]');
+    };
+    partition(Array.from(this.childNodes));
 
+    // Clear — we'll rebuild around the captured (now-detached) children.
     this.innerHTML = '';
 
     // Header — keyboard-focusable button-style row that toggles collapsed.
@@ -197,7 +213,7 @@ export class UIAgentArtifact extends UIElement {
     // Body
     this.#bodyEl = document.createElement('div');
     this.#bodyEl.setAttribute('data-artifact-body', '');
-    for (const n of existingBodyNodes) this.#bodyEl.appendChild(n);
+    for (const n of bodyNodes) this.#bodyEl.appendChild(n);
     if (this.collapsed) this.#bodyEl.hidden = true;
 
     this.append(this.#headerEl, this.#bodyEl);

package/components/agent-artifact/agent-artifact.test.js

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './agent-artifact.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+describe('agent-artifact-ui', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  // Baseline — static slot="primary"/"secondary" buttons route into the header
+  // actions cluster, and the default-slot content lands in the body.
+  it('routes static action buttons into the header actions cluster (not the body)', async () => {
+    const a = mount(`
+      <agent-artifact-ui title="Build">
+        <button-ui slot="primary">Run</button-ui>
+        <button-ui slot="secondary">Cancel</button-ui>
+        <p>Body content</p>
+      </agent-artifact-ui>
+    `);
+    await tick();
+    const actions = a.querySelector('[data-artifact-actions]');
+    const body = a.querySelector('[data-artifact-body]');
+    expect(actions).toBeTruthy();
+    expect(actions.querySelectorAll('[slot="primary"], [slot="secondary"]').length).toBe(2);
+    expect(body.querySelectorAll('[slot="primary"], [slot="secondary"]').length).toBe(0);
+    expect(body.textContent).toContain('Body content');
+  });
+
+  // Wrapper-trap regression (audit-wrapper-trap arm 2): action buttons rendered
+  // via `.map()`/`repeat()` arrive nested in the template engine's
+  // display:contents / role="presentation" wrapper spans. The old `:scope >
+  // [slot="primary"]` direct-child grab missed them, so `innerHTML = ''`
+  // stranded them in the body. They must reach the actions cluster.
+  it('routes WRAPPED (interpolated) action buttons into the actions cluster, not the body', async () => {
+    const a = mount(`
+      <agent-artifact-ui title="Build">
+        <span style="display:contents" role="presentation">
+          <span style="display:contents" role="presentation"><button-ui slot="primary">Run</button-ui></span>
+          <span style="display:contents" role="presentation"><button-ui slot="secondary">Cancel</button-ui></span>
+        </span>
+        <p>Body content</p>
+      </agent-artifact-ui>
+    `);
+    await tick();
+    const actions = a.querySelector('[data-artifact-actions]');
+    const body = a.querySelector('[data-artifact-body]');
+    expect(actions.querySelectorAll('[slot="primary"], [slot="secondary"]').length).toBe(2);
+    // The regression: before the wrapper-pierce fix these landed in the body.
+    expect(body.querySelectorAll('[slot="primary"], [slot="secondary"]').length).toBe(0);
+    expect(body.textContent).toContain('Body content');
+    // No empty wrapper spans left dangling — they're flattened, not re-appended.
+    expect(a.querySelectorAll('[role="presentation"]').length).toBe(0);
+  });
+});

package/components/drawer/drawer.css

@@ -19,7 +19,7 @@
   /* ── Geometry ── */
   --drawer-width:       24rem;
   --drawer-height:      24rem;
-  --drawer-inset:       var(--a-space-4);
+  --drawer-inset:       var(--a-inset);
   --drawer-header-pad:  var(--drawer-inset);
   --drawer-footer-pad:  var(--drawer-inset);
   --drawer-header-gap:  var(--a-space-2);