@adia-ai/web-components 0.5.15 → 0.5.16

package/components/slider/slider.css

@@ -1,24 +1,98 @@
 @scope (slider-ui) {
   :where(:scope) {
-    /* ── Layout ── (sizes scale with universal [size] attribute) */
+    /* ═══════════════════════════════════════════════════════════════
+       SLIDER GEOMETRY — Mathematical foundation
+       ═══════════════════════════════════════════════════════════════
+
+       Variables
+         W    = track width  (100% of the track element)
+         t    = thumb width  (full outer width including internal padding)
+         h    = track height (var(--slider-track-height))
+         pad  = internal padding on the thumb (var(--slider-thumb-padding))
+         p    = progress     (0.0 → 1.0, written by JS as --slider-pct)
+
+       The thumb consists of two layers:
+         • Container: the geometry element that the fill aligns to.
+                      Sized to t × h. Provides the full-height grab area.
+         • Visual:    the white pill rendered inside the container via
+                      ::before. Sized to (t−2·pad) × (h−2·pad), centered
+                      by inset = pad on all sides.
+
+       ── Progressive fill ──
+       The blue fill starts at the thumb's full outer width and
+       grows incrementally:
+
+         fill_width(p) = t + p · (W − t)          (1)
+
+       At p = 0  →  fill = t   (entire thumb container is blue)
+       At p = 1  →  fill = W   (blue spans the full track)
+
+       The fill is anchored at the left track edge (left: 0), so:
+
+         fill_right(p) = t + p · (W − t)          (2)
+
+       ── Thumb travel ──
+       The thumb container's center moves across the travel zone:
+
+         travel = W − t                         (3)
+
+         thumb_center(p) = t/2 + p · (W − t)     (4)
+
+       At p = 0  →  center at t/2  (container left flush, visual inset by pad)
+       At p = 1  →  center at W−t/2 (container right flush, visual inset by pad)
+
+       In CSS (percentages relative to W):
+
+         left = calc(t/2 + p · (W − t))
+              = calc(var(--slider-thumb-width) / 2
+                     + var(--slider-pct) * (100% - var(--slider-thumb-width)))
+
+       The element is shifted back by 50% via transform so its
+       geometric center lands on the computed point.
+
+       ── Thumb visual inset ──
+       The white pill is rendered by ::before with:
+         inset: pad  (applied on all four sides)
+
+       This means the visual pill is inset from the container edge
+       by pad pixels, giving breathing room between the white surface
+       and the track boundary at both extremes.
+       ═══════════════════════════════════════════════════════════════ */
+
+    /* ── Layout ── */
     --slider-gap:               var(--a-space-1);
     --slider-readout-gap:       var(--a-space-0-5);
     --slider-radius:            var(--a-radius-full);
-    --slider-track-height:      calc(var(--a-size) * 0.125);
-    --slider-track-area-height: calc(var(--a-size) * 0.75);
-    --slider-thumb-size:        calc(var(--a-size) * 0.375);
 
-    /* ── Colors ── */
+    /* Track height scales with the universal [size] attribute
+       via --a-toggle-size: 16 sm / 20 md / 24 lg at density=1.
+       Override --slider-track-height directly for custom sizes. */
+    --slider-track-height:      var(--a-toggle-size);
+
+    /* Thumb padding: internal breathing room on all sides.
+       The visual pill sits pad px away from the container edge. */
+    --slider-thumb-padding:     2px;
+
+    /* Visual thumb height: track height minus top and bottom padding. */
+    --slider-thumb-visual-h:    calc(var(--slider-track-height) - 2 * var(--slider-thumb-padding));
+
+    /* Visual thumb width: 2×1 pill ratio. */
+    --slider-thumb-visual-w:    calc(var(--slider-thumb-visual-h) * 2);
+
+    /* Container / geometry thumb width: visual width plus left and
+       right padding.  This is the width used in the travel equation. */
+    --slider-thumb-width:       calc(var(--slider-thumb-visual-w) + 2 * var(--slider-thumb-padding));
+
+    /* Progress fraction (0.0 → 1.0) written by JS. */
+    --slider-pct:               0;
+
+    /* ── Colors ──
+       Track: dim recessed surface  |  Fill: primary  |  Thumb: white chrome */
     --slider-track-bg:          var(--a-bg-muted);
-    --slider-fill-bg:           var(--a-accent-bg);
-    --slider-thumb-bg:          var(--a-accent-bg);
-    --slider-thumb-border:      var(--a-bg); /* intentional: cutout ring must match page bg */
-    --slider-thumb-hover-ring:  0 0 0 4px var(--a-bg-muted);
+    --slider-fill-bg:           var(--a-primary-bg);
+    --slider-thumb-bg:          var(--a-chrome-light);
     --slider-fill-bg-disabled:  var(--a-border-subtle);
     --slider-thumb-bg-disabled: var(--a-fg-muted);
-    --slider-label-fg:          var(--a-fg-muted);
-    --slider-value-fg:          var(--a-fg);
-    --slider-suffix-fg:         var(--a-fg-muted);
 
     /* ── Typography ── */
     --slider-font-size:         var(--a-ui-size);
@@ -28,7 +102,7 @@
     --slider-duration:          var(--a-duration-fast);
     --slider-easing:            var(--a-easing);
 
-    /* ── State ── */
+    /* ── Focus ── */
     --slider-focus-ring:        var(--a-focus-ring);
   }
 
@@ -55,7 +129,7 @@
   }
 
   [slot="label"] {
-    color: var(--slider-label-fg);
+    color: var(--a-fg-subtle);
   }
 
   [slot="readout"] {
@@ -65,86 +139,102 @@
   }
 
   [slot="value"] {
-    color: var(--slider-value-fg);
+    color: var(--a-fg);
     font-weight: var(--slider-value-weight);
     font-variant-numeric: tabular-nums;
   }
 
   [slot="suffix"] {
-    color: var(--slider-suffix-fg);
+    color: var(--a-fg-muted);
   }
 
-  /* Track */
+  /* Track: the reference frame W for all geometry calculations. */
   [slot="track"] {
     position: relative;
-    height: var(--slider-track-area-height);
-    display: flex;
-    align-items: center;
+    height: var(--slider-track-height);
+    border-radius: var(--slider-radius);
+    background: var(--slider-track-bg);
     cursor: pointer;
     touch-action: none;
   }
 
+  /* Fill — equation (1): width = t + p·(W−t)            */
   [slot="fill"] {
     position: absolute;
+    top: 0;
     left: 0;
-    height: var(--slider-track-height);
-    border-radius: var(--slider-radius);
+    height: 100%;
+    border-radius: inherit;
     background: var(--slider-fill-bg);
     pointer-events: none;
+    width: calc(var(--slider-thumb-width)
+                + var(--slider-pct) * (100% - var(--slider-thumb-width)));
   }
 
-  [slot="track"]::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: var(--slider-track-height);
-    border-radius: var(--slider-radius);
-    background: var(--slider-track-bg);
-  }
-
-  /* Thumb */
+  /* Thumb CONTAINER: full track height, geometry width.
+     Transparent background; the white pill is rendered by ::before.
+     This element provides a generous vertical grab area.     */
   [slot="thumb"] {
     position: absolute;
-    width: var(--slider-thumb-size);
-    height: var(--slider-thumb-size);
+    top: 50%;
+    left: calc(var(--slider-thumb-width) / 2
+               + var(--slider-pct) * (100% - var(--slider-thumb-width)));
+    width: var(--slider-thumb-width);
+    height: var(--slider-track-height);
     border-radius: var(--slider-radius);
-    background: var(--slider-thumb-bg);
-    border: 2px solid var(--slider-thumb-border);
-    transform: translateX(-50%);
+    background: transparent;
+    transform: translate(-50%, -50%);
     cursor: grab;
     touch-action: none;
     transition:
-      transform var(--slider-duration) var(--slider-easing),
-      box-shadow var(--slider-duration) var(--slider-easing);
+      left     var(--slider-duration) var(--slider-easing),
+      transform var(--slider-duration) var(--slider-easing);
     z-index: 1;
   }
+
+  /* Thumb VISUAL: white pill rendered inside the transparent
+     container via ::before.  Inset = padding on all four sides,
+     so the pill is vertically and horizontally inset from the
+     container edge by pad pixels.                               */
+  [slot="thumb"]::before {
+    content: '';
+    position: absolute;
+    inset: var(--slider-thumb-padding);
+    border-radius: inherit;
+    background: var(--slider-thumb-bg);
+  }
+
+  /* During drag: kill the left transition so the thumb follows
+     the pointer frame-by-frame without CSS interpolation lag. */
+  :scope[data-dragging] [slot="thumb"] {
+    transition: transform var(--slider-duration) var(--slider-easing);
+  }
+
   [slot="thumb"]:hover {
-    box-shadow: var(--slider-thumb-hover-ring);
+    transform: translate(-50%, -50%) scale(1.05);
   }
+
   [slot="thumb"]:active {
-    transform: translateX(-50%) scale(1.15);
+    transform: translate(-50%, -50%) scale(1.1);
     cursor: grabbing;
   }
+
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="thumb"] { box-shadow: var(--slider-focus-ring); }
 
   /* Disabled */
   :scope[disabled] [slot="track"] { cursor: not-allowed; }
-  :scope[disabled] [slot="fill"] { background: var(--slider-fill-bg-disabled); }
-  :scope[disabled] [slot="thumb"] { cursor: not-allowed; background: var(--slider-thumb-bg-disabled); }
-  :scope[disabled] [slot="thumb"]:hover { box-shadow: none; }
-
-  /* ── Hint (§184, v0.5.5, FEEDBACK-08 §7) ──
-     Small caption rendered beneath the track. aria-describedby is
-     wired on the host in class.js so screen readers announce this
-     as a description (distinct from aria-label, which comes from
-     [label]). Uses the same muted typography as field-ui's hint. */
+  :scope[disabled] [slot="fill"]  { background: var(--slider-fill-bg-disabled); }
+  :scope[disabled] [slot="thumb"]::before {
+    background: var(--slider-thumb-bg-disabled);
+  }
+
+  /* ── Hint (§184, v0.5.5, FEEDBACK-08 §7) ── */
   [slot="hint"] {
     display: block;
     margin-top: var(--slider-hint-mt, var(--a-space-1));
     font-size: var(--slider-hint-size, var(--a-ui-xs));
-    color: var(--slider-hint-fg, var(--a-fg-muted));
+    color:     var(--slider-hint-fg, var(--a-fg-muted));
     line-height: var(--slider-hint-lh, 1.4);
   }
 }

package/components/slider/slider.test.js

@@ -14,43 +14,46 @@ function mount(html) {
 describe('slider-ui', () => {
   beforeEach(() => { document.body.innerHTML = ''; });
 
-  it('renders thumb at correct % for initial value', async () => {
+  // §330 (v0.5.16) — slider iOS-style pill redesign. Thumb position no
+  // longer set via thumb.style.left; instead the host gets a CSS custom
+  // property `--slider-pct` (fraction 0.0–1.0) and CSS calc() composes
+  // the full geometry: `fill_width(p) = t + p·(W−t)`, where t = thumb
+  // width and W = track width. Test asserts the CSS variable carries
+  // the expected fraction (50% → 0.5).
+  const pct = (s) => s.style.getPropertyValue('--slider-pct').trim();
+
+  it('renders host --slider-pct for initial value', async () => {
     const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
     await tick();
-    const thumb = s.querySelector('[slot="thumb"]');
-    expect(thumb.style.left).toBe('50%');
+    expect(pct(s)).toBe('0.5');
   });
 
   // Property reactivity contract — locks in the behavior that consumer
   // feedback (FEEDBACK-adia-packages.md §5, 2026-05-12) incorrectly
   // claimed was broken. UIElement's signal-backed property setters
-  // (core/element.js:31-50) trigger the host's render effect on every
-  // property change; slider-ui's render() reads this.value and updates
-  // [slot="thumb"].style.left. This test catches any regression that
-  // would break undo/redo or any other programmatic-value flow.
-  it('moves thumb when .value is set programmatically', async () => {
+  // trigger the host's render effect on every property change; slider-ui's
+  // render() reads this.value and writes --slider-pct on the host.
+  it('updates --slider-pct when .value is set programmatically', async () => {
     const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
     await tick();
-    const thumb = s.querySelector('[slot="thumb"]');
-    expect(thumb.style.left).toBe('50%');
+    expect(pct(s)).toBe('0.5');
 
     s.value = 75;
     await tick();
-    expect(thumb.style.left).toBe('75%');
+    expect(pct(s)).toBe('0.75');
 
     s.value = 10;
     await tick();
-    expect(thumb.style.left).toBe('10%');
+    expect(pct(s)).toBe('0.1');
   });
 
-  it('moves thumb when attribute is set imperatively', async () => {
+  it('updates --slider-pct when attribute is set imperatively', async () => {
     const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
     await tick();
-    const thumb = s.querySelector('[slot="thumb"]');
 
     s.setAttribute('value', '25');
     await tick();
-    expect(thumb.style.left).toBe('25%');
+    expect(pct(s)).toBe('0.25');
   });
 
   it('updates [slot="value"] readout text when .value changes', async () => {

package/components/slider/slider.yaml

@@ -82,11 +82,15 @@ states:
 traits: []
 tokens:
   --slider-fill:
-    description: Filled track / thumb color
-  --slider-thumb-size:
-    description: Thumb diameter
+    description: Filled portion / progress color (was mixed accent, now primary)
+  --slider-thumb-width:
+    description: Thumb pill width (2× thumb-height, driven by track-height)
+  --slider-thumb-height:
+    description: Thumb pill height (track-height − 2× inset)
   --slider-track:
-    description: Track background color
+    description: Unfilled track background color
+  --slider-track-height:
+    description: Full track height (scales via universal [size] attribute)
 a2ui:
   rules: []
 anti_patterns: []

package/components/swatch/class.js

@@ -218,9 +218,28 @@ 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
@@ -331,6 +350,23 @@ export class UISwatch extends UIElement {
         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() {

package/components/swatch/swatch.test.js

@@ -161,3 +161,109 @@ describe('<swatch-ui> late-arriving [slot="chrome"] children (FB-37 / §326)', (
     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);
+  });
+});