@adia-ai/web-components 0.5.14 → 0.5.16

package/components/swatch/class.js

@@ -218,14 +218,44 @@ export class UISwatch extends UIElement {
     // survive stamping as direct host siblings, NOT funnel into #labelEl where
     // absolute-positioning anchors against the label text bbox. Pull them out
     // FIRST so the innerHTML='' wipe below doesn't lose them.
+    //
+    // §331 (v0.5.16, FB-39): also walk `display: contents` wrapper spans
+    // inserted by AdiaUI's `html\`\`` template engine (`core/template.js`
+    // `wrap()` at line 212). When the parent template interpolates child
+    // fragments via `${badgeFrag}` / `${dotFrag}`, each fragment lands
+    // INSIDE a wrapper span that's a direct child of <swatch-ui>; the
+    // chrome elements end up as GRANDCHILDREN, not direct children. The
+    // pre-§331 direct-children-only filter found `chromeSlot = []` →
+    // innerHTML='' wiped the wrapper spans + their chrome content →
+    // `#absorbChromeSlot()` in `#syncCore()` had nothing left to absorb.
+    // Deep-walk via querySelectorAll catches both shapes:
+    //   - static-HTML / pre-template: direct-child <span slot="chrome">
+    //   - template-render: <span slot="chrome"> nested in wrapper span
     const chromeSlot = Array.from(this.children).filter(
       n => n.getAttribute && n.getAttribute('slot') === 'chrome'
     );
+    // Also collect chrome elements nested inside wrapper-spans (template-render path).
+    for (const wrapper of Array.from(this.children)) {
+      if (wrapper.getAttribute?.('slot') === 'chrome') continue;
+      const nested = wrapper.querySelectorAll?.('[slot="chrome"]');
+      if (nested) for (const n of nested) chromeSlot.push(n);
+    }
     for (const n of chromeSlot) n.remove();
 
     // Capture pre-existing default-slot content so consumer-authored
     // children (e.g. <swatch-ui>Forecast</swatch-ui>) survive stamping.
     // `[slot="chrome"]` children are already removed above, so won't appear here.
+    //
+    // §325 (v0.5.16, FB-36): filter pure-whitespace text nodes from the
+    // capture. Pre-§325, indented multi-line HTML (`<swatch-ui
+    // label="500">\n  <span>tip</span>\n</swatch-ui>`) captured the
+    // leading whitespace text node, which then made #labelEl.firstChild
+    // a nodeType=3 text node. #syncCore()'s "stale-text-node" branch
+    // matched the whitespace + did textContent = this.label, wiping
+    // BOTH the whitespace AND the consumer's <span>. Filter here so
+    // #labelEl.firstChild is the actual element/non-whitespace text,
+    // and #syncCore's stale-text branch only fires for genuinely
+    // attr-driven cases.
     const slotted = Array.from(this.childNodes).filter(n =>
       !(n.nodeType === 1 && n.dataset && (
         n.dataset.tile !== undefined ||
@@ -233,7 +263,7 @@ export class UISwatch extends UIElement {
         n.dataset.detail !== undefined ||
         n.dataset.badge !== undefined ||
         n.dataset.copy !== undefined
-      ))
+      )) && !(n.nodeType === 3 && !n.textContent.trim())
     );
     this.innerHTML = '';
 
@@ -282,9 +312,70 @@ export class UISwatch extends UIElement {
 
   // ── Sync ──────────────────────────────────────────────────────────
 
+  /**
+   * §326 (v0.5.16, FB-37): Late-arriving `[slot="chrome"]` children may
+   * land on the host AFTER `#stamp()` runs — happens in any template
+   * engine (lit-html, AdiaUI `html\`\``, etc.) that batches child appends
+   * separately from element creation. `#stamp()` is gated by
+   * `this.#stamped` and won't re-run; this method picks up the late
+   * arrivals on every `render()` pass + moves them to the canonical
+   * sibling-of-tile position (between `#tileEl` and `#badgeEl`).
+   *
+   * Idempotent: chrome children already in the right slot are left
+   * alone (the `insertBefore` only moves them if they're not the
+   * #badgeEl's immediate previousSibling chain).
+   */
+  #absorbChromeSlot() {
+    if (!this.#tileEl || !this.#badgeEl) return;
+    const chromeChildren = [];
+    for (const child of this.children) {
+      if (child === this.#tileEl) continue;
+      if (child === this.#badgeEl) break; // hit the badge — done scanning the head region
+      if (child.getAttribute?.('slot') === 'chrome') chromeChildren.push(child);
+    }
+    // Walk the rest of the children looking for chrome children that landed
+    // AFTER the internal structure (the common template-late-append case).
+    for (const child of Array.from(this.children)) {
+      if (
+        child !== this.#tileEl &&
+        child !== this.#badgeEl &&
+        child !== this.#labelEl &&
+        child !== this.#detailEl &&
+        child !== this.#copyEl &&
+        child.getAttribute?.('slot') === 'chrome'
+      ) {
+        // Move to the canonical position: immediately after #tileEl.
+        // insertBefore is idempotent — moving an already-positioned child
+        // to the same spot is a no-op.
+        this.insertBefore(child, this.#badgeEl);
+      }
+    }
+    // §331 (v0.5.16, FB-39): also handle wrapper-spanned chrome children
+    // that arrive AFTER #stamp() (parent template's late update() pass).
+    // Hoist them OUT of any non-internal wrapper + into the canonical slot.
+    for (const child of Array.from(this.children)) {
+      if (
+        child === this.#tileEl ||
+        child === this.#badgeEl ||
+        child === this.#labelEl ||
+        child === this.#detailEl ||
+        child === this.#copyEl
+      ) continue;
+      const nested = child.querySelectorAll?.('[slot="chrome"]');
+      if (!nested || !nested.length) continue;
+      for (const n of nested) {
+        this.insertBefore(n, this.#badgeEl);
+      }
+    }
+  }
+
   #syncCore() {
     if (!this.#tileEl || !this.#labelEl) return;
 
+    // §326 (v0.5.16, FB-37): pick up `[slot="chrome"]` children that
+    // landed after #stamp() ran (template-render path).
+    this.#absorbChromeSlot();
+
     // Normalize enum values; fall back silently when a consumer sets a typo.
     const shape = SHAPES.has(this.shape) ? this.shape : 'square';
     const size  = SIZES.has(this.size)   ? this.size  : 'md';

package/components/swatch/swatch.css

@@ -291,7 +291,7 @@
     line-height: 1;
     cursor: pointer;
     border-radius: var(--a-radius-xs);
-    transition: color 100ms ease-out, background 100ms ease-out;
+    transition: color var(--a-duration-fast) var(--a-easing-out), background var(--a-duration-fast) var(--a-easing-out);
   }
   :scope > [data-copy]:hover { color: var(--a-fg); background: var(--a-bg-muted); }
   :scope > [data-copy]:focus-visible {
@@ -308,7 +308,7 @@
   :scope[selectable] {
     cursor: pointer;
     border-radius: var(--a-radius-sm);
-    transition: box-shadow 120ms ease-out;
+    transition: box-shadow var(--a-duration-fast) var(--a-easing-out);
   }
   :scope[selectable]:focus { outline: none; }
   :scope[selectable]:focus-visible {

package/components/swatch/swatch.test.js

@@ -0,0 +1,269 @@
+/**
+ * <swatch-ui> behavioral tests.
+ *
+ * Currently scoped to FB-36 / §325 regression coverage. Future tests for
+ * #stamp() lifecycle, chrome-slot composition, auto-contrast probe,
+ * etc. land here.
+ *
+ * Test setup note: happy-dom connects custom elements synchronously
+ * during innerHTML parsing — BEFORE sibling children inside the same
+ * element are appended. Real browsers connect after the full innerHTML
+ * is parsed. To exercise the FB-36 path (children present at connect
+ * time), tests use `document.createElement` + `appendChild` to build
+ * the full subtree FIRST, then attach to the document — guaranteeing
+ * the children are in `this.childNodes` when `connectedCallback()` fires.
+ */
+
+import { describe, it, expect, beforeAll, beforeEach } from 'vitest';
+
+beforeAll(async () => {
+  await import('./swatch.js');
+});
+
+function buildSwatch({ label, defaultSlot, shape = 'block', labelPosition = 'overlay', color = '#3b82f6' }) {
+  const swatch = document.createElement('swatch-ui');
+  swatch.setAttribute('shape', shape);
+  swatch.setAttribute('label-position', labelPosition);
+  swatch.setAttribute('color', color);
+  if (label !== undefined) swatch.setAttribute('label', label);
+  if (defaultSlot) {
+    // Mimic indented HTML's whitespace text nodes — the FB-36 trigger.
+    swatch.appendChild(document.createTextNode('\n      '));
+    const child = document.createElement('span');
+    child.id = defaultSlot.id;
+    child.textContent = defaultSlot.text;
+    swatch.appendChild(child);
+    swatch.appendChild(document.createTextNode('\n    '));
+  }
+  return swatch;
+}
+
+describe('<swatch-ui> default-slot + label-attr precedence (FB-36 / §325)', () => {
+  let host;
+
+  beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+  });
+
+  it('preserves default-slot element when label="X" is also present (FB-36 §325 fix)', async () => {
+    const swatch = buildSwatch({
+      label: '500',
+      defaultSlot: { id: 'probe-default', text: 'richlabel' },
+    });
+    host.appendChild(swatch);
+    await new Promise((r) => setTimeout(r, 80));
+
+    const label = swatch.querySelector('[data-label]');
+    const span = swatch.querySelector('#probe-default');
+
+    // Pre-§325 the span was wiped + label="500" took precedence.
+    // Post-§325 the default-slot wins (yaml spec: "richer content").
+    expect(span).not.toBeNull();
+    expect(label.textContent.trim()).toBe('richlabel');
+  });
+
+  it('renders label-attr text when no default-slot is present', async () => {
+    const swatch = buildSwatch({ label: '500' });
+    host.appendChild(swatch);
+    await new Promise((r) => setTimeout(r, 80));
+    const label = swatch.querySelector('[data-label]');
+    expect(label.textContent.trim()).toBe('500');
+  });
+
+  it('renders default-slot text when no label-attr is present', async () => {
+    const swatch = buildSwatch({
+      defaultSlot: { id: 'probe-only', text: 'defaultonly' },
+    });
+    host.appendChild(swatch);
+    await new Promise((r) => setTimeout(r, 80));
+    const label = swatch.querySelector('[data-label]');
+    const span = swatch.querySelector('#probe-only');
+    expect(span).not.toBeNull();
+    expect(label.textContent.trim()).toBe('defaultonly');
+  });
+
+  it('syncs label-attr changes when there is no default-slot (no whitespace regression)', async () => {
+    const swatch = buildSwatch({ label: '500' });
+    host.appendChild(swatch);
+    await new Promise((r) => setTimeout(r, 80));
+    swatch.label = '600';
+    await new Promise((r) => setTimeout(r, 80));
+    const label = swatch.querySelector('[data-label]');
+    expect(label.textContent.trim()).toBe('600');
+  });
+});
+
+describe('<swatch-ui> late-arriving [slot="chrome"] children (FB-37 / §326)', () => {
+  let host;
+
+  beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+  });
+
+  it('absorbs chrome child appended AFTER connectedCallback (template-render path)', async () => {
+    // Mimic the template-engine timing: create the swatch + connect it FIRST
+    // (children empty), then append the chrome child + trigger a render.
+    const swatch = document.createElement('swatch-ui');
+    swatch.setAttribute('shape', 'block');
+    swatch.setAttribute('label-position', 'overlay');
+    swatch.setAttribute('color', '#3b82f6');
+    swatch.setAttribute('label', '500');
+    host.appendChild(swatch);
+    await new Promise((r) => setTimeout(r, 80));
+
+    // At this point #stamp() has run + chromeSlot was empty.
+    // Append a chrome child LATER — this is what template engines do.
+    const chrome = document.createElement('span');
+    chrome.setAttribute('slot', 'chrome');
+    chrome.id = 'late-chrome';
+    chrome.textContent = '★';
+    swatch.appendChild(chrome);
+
+    // Trigger a re-render via property mutation (template engines typically
+    // set props after appending — this nudge fires render → #syncCore →
+    // #absorbChromeSlot picks up the late chrome child). Must use a value
+    // DIFFERENT from current to actually fire the signal write.
+    swatch.label = '999';
+    await new Promise((r) => setTimeout(r, 80));
+
+    const found = swatch.querySelector('#late-chrome');
+    expect(found).not.toBeNull();
+    // Chrome child should be a direct host sibling positioned between tile + badge.
+    const tile = swatch.querySelector('[data-tile]');
+    const badge = swatch.querySelector('[data-badge]');
+    expect(found.previousElementSibling).toBe(tile);
+    expect(found.nextElementSibling).toBe(badge);
+  });
+
+  it('still handles chrome child appended BEFORE connect (static-HTML path)', async () => {
+    // Build swatch with chrome child present at connect time — the canonical
+    // FB-34 / §314 path should still work post-§326.
+    const swatch = document.createElement('swatch-ui');
+    swatch.setAttribute('shape', 'block');
+    swatch.setAttribute('label-position', 'overlay');
+    swatch.setAttribute('color', '#3b82f6');
+    swatch.setAttribute('label', '500');
+    const chrome = document.createElement('span');
+    chrome.setAttribute('slot', 'chrome');
+    chrome.id = 'early-chrome';
+    chrome.textContent = '⚑';
+    swatch.appendChild(chrome);
+    host.appendChild(swatch);
+    await new Promise((r) => setTimeout(r, 80));
+
+    const found = swatch.querySelector('#early-chrome');
+    expect(found).not.toBeNull();
+    const tile = swatch.querySelector('[data-tile]');
+    const badge = swatch.querySelector('[data-badge]');
+    expect(found.previousElementSibling).toBe(tile);
+    expect(found.nextElementSibling).toBe(badge);
+  });
+});
+
+describe('<swatch-ui> chrome child nested in display:contents wrapper (FB-39 / §331)', () => {
+  let host;
+
+  beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+  });
+
+  it('hoists chrome child from inside wrapper span at #stamp() time (template-interpolation path)', async () => {
+    // Simulates AdiaUI's html`` template wrapping interpolated content in
+    // <span style="display: contents"> (per core/template.js:212 `wrap()`).
+    // When consumer writes `html`<swatch-ui>${chromeFrag}</swatch-ui>``,
+    // the chromeFrag's content lands NESTED inside a wrapper span — not
+    // as direct children of <swatch-ui>. Pre-§331 the chrome was wiped.
+    const swatch = document.createElement('swatch-ui');
+    swatch.setAttribute('shape', 'block');
+    swatch.setAttribute('label-position', 'overlay');
+    swatch.setAttribute('color', '#3b82f6');
+    swatch.setAttribute('label', '500');
+
+    const wrapper = document.createElement('span');
+    wrapper.style.display = 'contents';
+    const chrome = document.createElement('span');
+    chrome.setAttribute('slot', 'chrome');
+    chrome.id = 'wrapped-chrome';
+    chrome.textContent = 'P3';
+    wrapper.appendChild(chrome);
+    swatch.appendChild(wrapper);
+
+    host.appendChild(swatch);
+    await new Promise((r) => setTimeout(r, 80));
+
+    const found = swatch.querySelector('#wrapped-chrome');
+    expect(found).not.toBeNull();
+    // Chrome child should be a direct host sibling positioned between tile + badge.
+    const tile = swatch.querySelector('[data-tile]');
+    const badge = swatch.querySelector('[data-badge]');
+    expect(found.parentElement).toBe(swatch);
+    expect(found.previousElementSibling).toBe(tile);
+    expect(found.nextElementSibling).toBe(badge);
+  });
+
+  it('handles MULTIPLE chrome children nested in separate wrapper spans', async () => {
+    // Each interpolated fragment in html`` gets its own wrapper span,
+    // so multi-chrome usage (`${badge}${dot1}${dot2}`) produces multiple
+    // wrapper spans, each containing one chrome child.
+    const swatch = document.createElement('swatch-ui');
+    swatch.setAttribute('shape', 'block');
+    swatch.setAttribute('label-position', 'overlay');
+    swatch.setAttribute('color', '#3b82f6');
+
+    const ids = ['c1', 'c2', 'c3'];
+    for (const id of ids) {
+      const w = document.createElement('span');
+      w.style.display = 'contents';
+      const c = document.createElement('span');
+      c.setAttribute('slot', 'chrome');
+      c.id = id;
+      c.textContent = id;
+      w.appendChild(c);
+      swatch.appendChild(w);
+    }
+    host.appendChild(swatch);
+    await new Promise((r) => setTimeout(r, 80));
+
+    for (const id of ids) {
+      const found = swatch.querySelector(`#${id}`);
+      expect(found).not.toBeNull();
+      expect(found.parentElement).toBe(swatch);
+    }
+  });
+
+  it('hoists chrome from late-arriving wrapper span (post-stamp template re-render)', async () => {
+    // Parent template re-render after the swatch is already stamped:
+    // a new wrapper span carrying chrome content arrives after #stamp().
+    // #absorbChromeSlot() should pick it up on next render pass.
+    const swatch = document.createElement('swatch-ui');
+    swatch.setAttribute('shape', 'block');
+    swatch.setAttribute('color', '#3b82f6');
+    swatch.setAttribute('label', '500');
+    host.appendChild(swatch);
+    await new Promise((r) => setTimeout(r, 80));
+
+    // Late: append a wrapper-span carrying chrome
+    const wrapper = document.createElement('span');
+    wrapper.style.display = 'contents';
+    const chrome = document.createElement('span');
+    chrome.setAttribute('slot', 'chrome');
+    chrome.id = 'late-wrapped';
+    wrapper.appendChild(chrome);
+    swatch.appendChild(wrapper);
+
+    // Nudge a render via a property change
+    swatch.label = '600';
+    await new Promise((r) => setTimeout(r, 80));
+
+    const found = swatch.querySelector('#late-wrapped');
+    expect(found).not.toBeNull();
+    expect(found.parentElement).toBe(swatch);
+    const tile = swatch.querySelector('[data-tile]');
+    const badge = swatch.querySelector('[data-badge]');
+    expect(found.previousElementSibling).toBe(tile);
+    expect(found.nextElementSibling).toBe(badge);
+  });
+});