@adia-ai/web-components 0.7.2 → 0.7.4

package/components/toggle-group/toggle-group.css

@@ -10,18 +10,18 @@ toggle-option-ui:not([disabled]):hover {
 @scope (toggle-group-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --toggle-group-border-width-default: 1px;
-    --toggle-group-border-color-default: var(--a-ui-border);
-    --toggle-group-radius-default:       var(--a-radius);
-    --toggle-group-height-default:       var(--a-size);
+    --toggle-group-border-width: 1px;
+    --toggle-group-border-color: var(--a-ui-border);
+    --toggle-group-radius:       var(--a-radius);
+    --toggle-group-height:       var(--a-size);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
   :scope {
     box-sizing: border-box;
     display: flex;
-    border: var(--toggle-group-border-width, var(--toggle-group-border-width-default)) solid var(--toggle-group-border-color, var(--toggle-group-border-color-default));
-    border-radius: var(--toggle-group-radius, var(--toggle-group-radius-default));
+    border: var(--toggle-group-border-width) solid var(--toggle-group-border-color);
+    border-radius: var(--toggle-group-radius);
     overflow: hidden;
   }
 
@@ -70,6 +70,9 @@ toggle-option-ui:not([disabled]):hover {
     background: var(--toggle-option-bg);
     color: var(--toggle-option-fg);
     font: inherit;
+    /* font-family floor — see segment.css rationale (inline default; this
+       scope's tokens don't use the -default suffix). */
+    font-family: var(--toggle-option-font-family, var(--a-font-family-ui));
     font-size: var(--toggle-option-font-size);
     cursor: pointer;
     transition:

package/components/toggle-scheme/toggle-scheme.css

@@ -1,6 +1,6 @@
 @scope (toggle-scheme-ui) {
   :where(:scope) {
-    --toggle-scheme-icon-transition-default: var(--a-duration-fast) var(--a-easing);
+    --toggle-scheme-icon-transition: var(--a-duration-fast) var(--a-easing);
   }
 
   :scope {
@@ -18,6 +18,6 @@
   }
 
   :scope > [part="button"] {
-    transition: color var(--toggle-scheme-icon-transition, var(--toggle-scheme-icon-transition-default));
+    transition: color var(--toggle-scheme-icon-transition);
   }
 }

package/components/toolbar/toolbar.css

@@ -1,15 +1,15 @@
 @scope (toolbar-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --toolbar-gap-default:    var(--a-space-1);
-    --toolbar-radius-default: var(--a-radius-md);
-    --toolbar-px-default:     var(--a-space-1);
-    --toolbar-py-default:     var(--a-space-1);
+    --toolbar-gap:    var(--a-space-1);
+    --toolbar-radius: var(--a-radius-md);
+    --toolbar-px:     var(--a-space-1);
+    --toolbar-py:     var(--a-space-1);
 
     /* ── Colors ── */
-    --toolbar-bg-default:     transparent;
-    --toolbar-fg-default:     var(--a-fg);
-    --toolbar-border-default: var(--a-border-subtle);
+    --toolbar-bg:     transparent;
+    --toolbar-fg:     var(--a-fg);
+    --toolbar-border: var(--a-border-subtle);
   }
 
   /* ── Base ── */
@@ -18,10 +18,10 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--toolbar-gap, var(--toolbar-gap-default));
-    padding: var(--toolbar-py, var(--toolbar-py-default)) var(--toolbar-px, var(--toolbar-px-default));
-    border-radius: var(--toolbar-radius, var(--toolbar-radius-default));
-    color: var(--toolbar-fg, var(--toolbar-fg-default));
+    gap: var(--toolbar-gap);
+    padding: var(--toolbar-py) var(--toolbar-px);
+    border-radius: var(--toolbar-radius);
+    color: var(--toolbar-fg);
     min-width: 0;        /* allow shrinking within flex/grid parents */
     overflow: hidden;    /* prevent pre-measurement flash before reflow */
   }
@@ -34,14 +34,14 @@
 
   /* ── Bordered ── */
   :scope[bordered] {
-    border: 1px solid var(--toolbar-border, var(--toolbar-border-default));
-    background: var(--toolbar-bg, var(--toolbar-bg-default));
+    border: 1px solid var(--toolbar-border);
+    background: var(--toolbar-bg);
   }
 
   /* ── Gap variants ── */
-  :scope[gap="sm"] { --toolbar-gap-default: var(--a-space-1); }
-  :scope[gap="md"] { --toolbar-gap-default: var(--a-space-2); }
-  :scope[gap="lg"] { --toolbar-gap-default: var(--a-space-3); }
+  :scope[gap="sm"] { --toolbar-gap: var(--a-space-1); }
+  :scope[gap="md"] { --toolbar-gap: var(--a-space-2); }
+  :scope[gap="lg"] { --toolbar-gap: var(--a-space-3); }
 
   /* ── Align ── */
   :scope[align="start"]         { justify-content: flex-start; }
@@ -102,9 +102,9 @@ toolbar-ui [data-toolbar-spillover-menu]:popover-open {
   background: var(--a-bg-subtle);
   box-shadow: var(--a-shadow-lg);
   min-width: 10rem;
-  font-family: inherit;
+  font-family: var(--toolbar-font-family, var(--a-font-family-ui));
   font-size: var(--a-ui-size);
-  color: var(--toolbar-fg, var(--toolbar-fg-default));
+  color: var(--toolbar-fg);
   /* Stack overflow items as rows (each row can be a group with its own gap). */
   display: flex;
   flex-direction: column;

package/components/tooltip/tooltip.css

@@ -3,12 +3,12 @@
     /* Host (anchor) tokens. The popover itself escapes to top-layer and
        cannot inherit these — top-layer rules below reference --a-*
        directly per documented exception. */
-    --tooltip-host-display-default: inline-flex;
+    --tooltip-host-display: inline-flex;
   }
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
-    display: var(--tooltip-host-display, var(--tooltip-host-display-default));
+    display: var(--tooltip-host-display);
     position: relative;
   }
 }

package/components/tour/tour.css

@@ -1,8 +1,8 @@
 @scope (tour-ui) {
   :where(:scope) {
-    --tour-scrim-default:             var(--a-scrim-dialog);
-    --tour-spotlight-padding-default: var(--a-space-2);
-    --tour-spotlight-radius-default:  var(--a-radius-md);
+    --tour-scrim:             var(--a-scrim-dialog);
+    --tour-spotlight-padding: var(--a-space-2);
+    --tour-spotlight-radius:  var(--a-radius-md);
   }
 
   :scope {
@@ -67,7 +67,7 @@
   box-shadow: var(--tour-popover-shadow, var(--a-shadow-lg));
   min-width: var(--tour-popover-min-width, 18rem);
   max-width: var(--tour-popover-max-width, 22rem);
-  font-family: inherit;
+  font-family: var(--tour-font-family, var(--a-font-family-ui));
   font-size: var(--a-ui-size);
   color: var(--a-fg);
   /* Above the spotlight (1000) so the user can read + click it */

package/components/tree/tree.class.js

@@ -266,6 +266,11 @@ export class UITreeItem extends UIElement {
 
   static template = () => null;
 
+  // FB-96: late-adoption of interpolated [slot="actions"]/[slot="caret"]
+  // children — see connected() + #adoptSlotted().
+  #slotObserver = null;
+  #adopting = false;
+
   get hasChildren() {
     return this.querySelector(':scope > tree-item-ui') !== null;
   }
@@ -303,6 +308,17 @@ export class UITreeItem extends UIElement {
       row.setAttribute('role', 'treeitem');
       if (!row.hasAttribute('tabindex')) row.setAttribute('tabindex', '0');
     }
+
+    // FB-96: declarative [slot="actions"]/[slot="caret"] children rendered via
+    // the template engine (`.map()`/`repeat()`/conditional) arrive in a LATER
+    // reactive tick — AFTER #stamp() — nested in the engine's display:contents
+    // wrapper spans. So neither a connect-time read nor a `:scope >` direct-child
+    // query sees them, and e.g. a `<button-ui slot="actions">` is left as a bare
+    // role=button child of the group/tree (axe `aria-required-children`). Adopt
+    // what's present now, then observe for the late arrivals.
+    this.#adoptSlotted();
+    this.#slotObserver = new MutationObserver(() => this.#adoptSlotted());
+    this.#slotObserver.observe(this, { childList: true, subtree: true });
   }
 
   #stamp() {
@@ -310,15 +326,18 @@ export class UITreeItem extends UIElement {
     row.setAttribute('slot', 'row');
     row.setAttribute('tabindex', '0');
 
-    // Caret — adopt a declarative [slot="caret"] child if the consumer supplied
-    // one, else stamp the default. (Adopt-or-stamp; same pattern as actions.)
-    const declaredCaret = this.querySelector(':scope > [slot="caret"]');
+    // Caret — adopt a declarative [slot="caret"] child if one is already present
+    // (incl. inside the engine's display:contents wrappers, FB-96), else stamp
+    // the default, marked so #adoptSlotted() can drop it if a declared caret
+    // arrives late.
+    const declaredCaret = this.#logicalSlotChildren('caret')[0];
     if (declaredCaret) {
       row.appendChild(declaredCaret);
     } else {
       const caret = document.createElement('icon-ui');
       caret.setAttribute('slot', 'caret');
       caret.setAttribute('name', 'caret-right');
+      caret.dataset.treeCaretDefault = '1';
       row.appendChild(caret);
     }
 
@@ -343,19 +362,16 @@ export class UITreeItem extends UIElement {
     if (this.badge) badgeEl.textContent = this.badge;
     row.appendChild(badgeEl);
 
-    // Actions — adopt pre-existing declarative [slot="actions"] children into
-    // the row (FEEDBACK-89) so per-row action buttons land in the styled,
-    // hover-revealed actions area; else stamp an empty placeholder. The host
-    // #onClick already excludes [slot="actions"] * from row selection, so
-    // adoption is click-safe.
-    const declaredActions = this.querySelectorAll(':scope > [slot="actions"]');
-    if (declaredActions.length) {
-      for (const a of declaredActions) row.appendChild(a);
-    } else {
-      const actions = document.createElement('span');
-      actions.setAttribute('slot', 'actions');
-      row.appendChild(actions);
-    }
+    // Actions — stamp an empty placeholder; the real declarative [slot="actions"]
+    // children (FEEDBACK-89) are moved into the row by #adoptSlotted(), which
+    // runs in connected() AND on later mutations, so interpolated buttons that
+    // arrive after #stamp (nested in the engine's display:contents wrappers,
+    // FB-96) get adopted too. The placeholder is dropped once a real one lands.
+    // (#onClick excludes [slot="actions"] * from row selection — adoption-safe.)
+    const actions = document.createElement('span');
+    actions.setAttribute('slot', 'actions');
+    actions.dataset.treeActionsPlaceholder = '1';
+    row.appendChild(actions);
 
     this.prepend(row);
   }
@@ -385,4 +401,61 @@ export class UITreeItem extends UIElement {
     const badgeEl = row.querySelector('[slot="badge"]');
     if (badgeEl) badgeEl.textContent = this.badge || '';
   }
+
+  // ── FB-96: wrapper-piercing, late adoption of slotted row children ──
+
+  /**
+   * Collect this item's logical `[slot="<slot>"]` children — direct, or nested
+   * inside the template engine's `display:contents` wrapper spans (which carry
+   * `role="presentation"` since 0.7.2) — but NOT inside a nested `<tree-item-ui>`
+   * (a plain descendant query would wrongly grab a child item's actions/caret).
+   */
+  #logicalSlotChildren(slot) {
+    const out = [];
+    const walk = (parent) => {
+      for (const ch of parent.children) {
+        if (ch.matches('tree-item-ui')) continue;                 // nested-item boundary
+        if (ch.getAttribute('slot') === slot) { out.push(ch); continue; }
+        // pierce the engine's transparent wrapper spans
+        if (ch.matches('[role="presentation"]') || ch.style?.display === 'contents') walk(ch);
+      }
+    };
+    walk(this);
+    return out;
+  }
+
+  /**
+   * Move declarative `[slot="actions"]`/`[slot="caret"]` children into the
+   * stamped row. Idempotent + re-entrancy-guarded (it mutates `this`, which
+   * re-fires #slotObserver). Drops the auto-stamped placeholder/default once a
+   * real child is adopted. (FEEDBACK-89 + FB-96.)
+   */
+  #adoptSlotted() {
+    if (this.#adopting) return;
+    const row = this.querySelector(':scope > [slot="row"]');
+    if (!row) return;
+    this.#adopting = true;
+    try {
+      const actions = this.#logicalSlotChildren('actions')
+        .filter((el) => !el.dataset.treeActionsPlaceholder && el.parentElement !== row);
+      if (actions.length) {
+        row.querySelector(':scope > [slot="actions"][data-tree-actions-placeholder]')?.remove();
+        for (const el of actions) row.appendChild(el);
+      }
+      const caret = this.#logicalSlotChildren('caret')
+        .find((el) => !el.dataset.treeCaretDefault && el.parentElement !== row);
+      if (caret) {
+        row.querySelector(':scope > [slot="caret"][data-tree-caret-default]')?.remove();
+        row.prepend(caret);
+      }
+    } finally {
+      this.#slotObserver?.takeRecords();   // drain self-mutations — no re-entrant pass
+      this.#adopting = false;
+    }
+  }
+
+  disconnected() {
+    this.#slotObserver?.disconnect();
+    this.#slotObserver = null;
+  }
 }

package/components/tree/tree.css

@@ -1,30 +1,30 @@
 @scope (tree-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --tree-row-height-default:      var(--a-size);
-    --tree-row-radius-default:      var(--a-radius-sm);
-    --tree-row-px-default:          var(--a-space-1);
-    --tree-row-gap-default:         var(--a-space-1);
-    --tree-actions-gap-default:     var(--a-space-0-5);
-    --tree-indent-default:          var(--a-space-4);
-    --tree-caret-size-default:      var(--a-space-2);
-    --tree-icon-size-default:       var(--a-space-3);
+    --tree-row-height:      var(--a-size);
+    --tree-row-radius:      var(--a-radius-sm);
+    --tree-row-px:          var(--a-space-1);
+    --tree-row-gap:         var(--a-space-1);
+    --tree-actions-gap:     var(--a-space-0-5);
+    --tree-indent:          var(--a-space-4);
+    --tree-caret-size:      var(--a-space-2);
+    --tree-icon-size:       var(--a-space-3);
 
     /* ── Typography ── */
-    --tree-font-size-default:       var(--a-ui-size);
+    --tree-font-size:       var(--a-ui-size);
 
     /* ── Colors ── */
-    --tree-fg-default:              var(--a-fg);
-    --tree-fg-muted-default:        var(--a-fg-muted);
-    --tree-bg-hover-default:        var(--a-bg-muted);
-    --tree-bg-selected-default:     var(--a-bg-hover);
+    --tree-fg:              var(--a-fg);
+    --tree-fg-muted:        var(--a-fg-muted);
+    --tree-bg-hover:        var(--a-bg-muted);
+    --tree-bg-selected:     var(--a-bg-hover);
 
     /* ── Transition ── */
-    --tree-duration-default:        var(--a-duration-fast);
-    --tree-easing-default:          var(--a-easing);
+    --tree-duration:        var(--a-duration-fast);
+    --tree-easing:          var(--a-easing);
 
     /* ── State ── */
-    --tree-focus-ring-default:      var(--a-focus-ring);
+    --tree-focus-ring:      var(--a-focus-ring);
   }
 
   :scope {
@@ -32,8 +32,8 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    font-size: var(--tree-font-size, var(--tree-font-size-default));
-    color: var(--tree-fg, var(--tree-fg-default));
+    font-size: var(--tree-font-size);
+    color: var(--tree-fg);
   }
 }
 
@@ -69,35 +69,35 @@
   [slot="row"] {
     display: flex;
     align-items: center;
-    gap: var(--tree-row-gap, var(--tree-row-gap-default));
-    height: var(--tree-row-height, var(--tree-row-height-default));
-    padding-inline-end: var(--tree-row-px, var(--tree-row-px-default));
-    border-radius: var(--tree-row-radius, var(--tree-row-radius-default));
+    gap: var(--tree-row-gap);
+    height: var(--tree-row-height);
+    padding-inline-end: var(--tree-row-px);
+    border-radius: var(--tree-row-radius);
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
     transition:
-      background var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default)),
-      color var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
+      background var(--tree-duration) var(--tree-easing),
+      color var(--tree-duration) var(--tree-easing);
     outline: none;
   }
 
   [slot="row"]:hover {
-    background: var(--tree-bg-hover, var(--tree-bg-hover-default));
+    background: var(--tree-bg-hover);
   }
 
   [slot="row"]:focus-visible {
-    box-shadow: var(--tree-focus-ring, var(--tree-focus-ring-default));
+    box-shadow: var(--tree-focus-ring);
   }
 
   /* :scope[selected] rules moved outside @scope — see tree-ui Safari note at end of file. */
 
   /* ── Caret ── */
   [slot="caret"] {
-    --a-icon-size: var(--tree-caret-size, var(--tree-caret-size-default));
+    --a-icon-size: var(--tree-caret-size);
     flex-shrink: 0;
-    color: var(--tree-fg-muted, var(--tree-fg-muted-default));
-    transition: transform var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
+    color: var(--tree-fg-muted);
+    transition: transform var(--tree-duration) var(--tree-easing);
     transform: rotate(90deg);
   }
 
@@ -112,8 +112,8 @@
 
   /* ── Icon ── */
   [slot="icon"] {
-    --a-icon-size: var(--tree-icon-size, var(--tree-icon-size-default));
-    color: var(--tree-fg-muted, var(--tree-fg-muted-default));
+    --a-icon-size: var(--tree-icon-size);
+    color: var(--tree-fg-muted);
     flex-shrink: 0;
   }
 
@@ -134,7 +134,7 @@
   [slot="badge"] {
     flex-shrink: 0;
     font-size: var(--tree-badge-size, var(--a-ui-xs));
-    color: var(--tree-badge-fg, var(--tree-fg-muted, var(--tree-fg-muted-default)));
+    color: var(--tree-badge-fg, var(--tree-fg-muted));
     background: var(--tree-badge-bg, transparent);
     padding: 0 var(--tree-badge-px, var(--a-space-1));
     border-radius: var(--tree-badge-radius, var(--a-radius-sm));
@@ -149,10 +149,10 @@
   [slot="actions"] {
     display: flex;
     align-items: center;
-    gap: var(--tree-actions-gap, var(--tree-actions-gap-default));
+    gap: var(--tree-actions-gap);
     margin-inline-start: auto;
     opacity: 0;
-    transition: opacity var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
+    transition: opacity var(--tree-duration) var(--tree-easing);
   }
 
   [slot="row"]:hover [slot="actions"] {
@@ -173,11 +173,11 @@
    `:where(:scope)` still resolve via inheritance. See
    docs/BROWSER-COMPAT.md §3a. */
 tree-ui[selected] > [slot="row"] {
-  background: var(--tree-bg-selected, var(--tree-bg-selected-default));
-  color: var(--tree-fg, var(--tree-fg-default));
+  background: var(--tree-bg-selected);
+  color: var(--tree-fg);
 }
 tree-ui[selected] > [slot="row"] [slot="icon"] {
-  color: var(--tree-fg, var(--tree-fg-default));
+  color: var(--tree-fg);
 }
 tree-ui[selected] > [slot="row"] [slot="actions"] {
   opacity: 1;

package/components/tree/tree.test.js

@@ -11,6 +11,7 @@ import { html, stamp } from '../../core/template.js';
 
 beforeAll(async () => {
   await import('./tree.js');
+  await import('../button/button.js');
 });
 
 describe('<tree-ui> tree-select forwards modifier keys (FB-46)', () => {
@@ -261,3 +262,51 @@ describe('<tree-item-ui> ARIA tree containment (FEEDBACK-91)', () => {
     expect(parent.querySelector(':scope > [slot="row"]').hasAttribute('aria-selected')).toBe(false);
   });
 });
+
+describe('<tree-item-ui> adopts interpolated [slot="actions"] into the row (FEEDBACK-96)', () => {
+  let host;
+  const settle = () => new Promise((r) => setTimeout(r, 40));
+  beforeEach(() => { host = document.createElement('div'); document.body.appendChild(host); });
+  afterEach(() => host.remove());
+
+  it('moves a `.map()`-rendered actions button into the treeitem row (not a stray child of the group)', async () => {
+    const PALS = [{ id: 'n', name: 'Neutral' }, { id: 'b', name: 'Brand' }];
+    stamp(html`
+      <tree-ui>
+        <tree-item-ui text="Colors" value="colors" open>
+          ${html`<button-ui slot="actions" icon="plus" title="Add"></button-ui>`}
+          ${PALS.map((p) => html`<tree-item-ui text="${p.name}" value="${p.id}"></tree-item-ui>`)}
+        </tree-item-ui>
+      </tree-ui>
+    `, host);
+    await settle();
+
+    const colors = host.querySelector('tree-item-ui[value="colors"]');
+    const row = colors.querySelector(':scope > [slot="row"]');
+    const btn = colors.querySelector('button-ui[slot="actions"]');
+    expect(btn).not.toBeNull();
+    // The fix: the interpolated button (wrapped in a display:contents span) is
+    // adopted INTO the row. Pre-fix, #stamp's `:scope >` query missed it (the
+    // button arrives after #stamp, inside a wrapper span) and it stayed a bare
+    // child of the group/tree → axe aria-required-children.
+    expect(btn.parentElement).toBe(row);
+    // Auto-stamped empty placeholder dropped — exactly one actions slot in the row.
+    expect(row.querySelectorAll(':scope > [slot="actions"]').length).toBe(1);
+    // Nested items NOT mis-adopted as actions (the tree-item-ui boundary holds).
+    expect(host.querySelectorAll('tree-item-ui').length).toBe(3);
+  });
+
+  it('is idempotent — no double-adopt across settles', async () => {
+    stamp(html`
+      <tree-ui>
+        <tree-item-ui text="Colors" value="colors" open>
+          ${html`<button-ui slot="actions" icon="plus"></button-ui>`}
+        </tree-item-ui>
+      </tree-ui>
+    `, host);
+    await settle();
+    await settle();
+    const row = host.querySelector('tree-item-ui[value="colors"] > [slot="row"]');
+    expect(row.querySelectorAll(':scope > [slot="actions"]').length).toBe(1);
+  });
+});