@adia-ai/web-components 0.5.14 → 0.5.16

package/components/slider/class.js

@@ -63,6 +63,7 @@ export class UISlider extends UIFormElement {
   #trackEl = null;
   #thumbEl = null;
   #dragging = false;
+  #dragOffset = 0;
 
   get #pct() {
     const range = this.max - this.min;
@@ -140,9 +141,10 @@ export class UISlider extends UIFormElement {
     }
 
     const pct = this.#pct;
-    const fill = this.querySelector('[slot="fill"]');
-    if (fill) fill.style.width = `${pct}%`;
-    if (this.#thumbEl) this.#thumbEl.style.left = `${pct}%`;
+    // Write progress to CSS custom property for pure-CSS positioning.
+    // --slider-pct is a fraction (0.0–1.0) used in calc() alongside
+    // --slider-travel so thumb + fill stay inside the track.
+    this.style.setProperty('--slider-pct', String(pct / 100));
 
     const valueEl = this.querySelector('[slot="value"]');
     if (valueEl) valueEl.textContent = this.#format(this.value);
@@ -152,9 +154,34 @@ export class UISlider extends UIFormElement {
     this.syncValue(String(this.value));
   }
 
+  /**
+   * Inverse geometry: given a *desired* thumb-center viewport-x, compute
+   * the slider value such that the thumb center lands exactly at that
+   * coordinate (clamped at the min/max extremes).
+   *
+   * Forward geometry (in slider.css):
+   *   thumb_center(p) = t/2 + p · (W − t)
+   *
+   * Inverse (solve for p, clamped):
+   *   p = clamp01((target − t/2) / (W − t))
+   *
+   * Two call paths share this:
+   *   • #onTrackClick — clientX is the click position; thumb center lands
+   *     under the cursor (or snaps to the t/2 end-zone when clicked beyond).
+   *   • #onPointerMove — (clientX − dragOffset) is the *intended* thumb
+   *     center (offset preserves where the user originally grabbed the
+   *     thumb, so dragging feels relative rather than snap-to-cursor).
+   */
   #valueFromX(clientX) {
-    const rect = this.#trackEl.getBoundingClientRect();
-    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    if (!this.#trackEl || !this.#thumbEl) return this.min;
+    const trackRect = this.#trackEl.getBoundingClientRect();
+    const thumbRect = this.#thumbEl.getBoundingClientRect();
+    const W = trackRect.width;
+    const t = thumbRect.width;
+    const travel = W - t;
+    if (travel <= 0) return this.min;
+    const target = clientX - trackRect.left;            // desired thumb-center, track-relative
+    const ratio = Math.max(0, Math.min(1, (target - t / 2) / travel));
     const raw = this.min + ratio * (this.max - this.min);
     return this.#snap(raw);
   }
@@ -178,6 +205,28 @@ export class UISlider extends UIFormElement {
     if (this.disabled) return;
     e.preventDefault();
     this.#dragging = true;
+    this.setAttribute('data-dragging', '');
+    // Capture the offset between the click point and the thumb's
+    // *logical* center (derived from `this.value` via the same forward
+    // equation the CSS uses). We deliberately do NOT read the thumb's
+    // bounding rect here — the CSS `left` transition can leave the
+    // physical rect mid-animation between values, producing a stale
+    // offset that would translate into a snap on the first move.
+    // Logical center is transition-immune and matches what #valueFromX
+    // inverts.
+    if (this.#trackEl && this.#thumbEl) {
+      const trackRect = this.#trackEl.getBoundingClientRect();
+      const thumbRect = this.#thumbEl.getBoundingClientRect();
+      const W = trackRect.width;
+      const t = thumbRect.width;
+      const travel = W - t;
+      const range = this.max - this.min;
+      const p = range > 0 ? (this.value - this.min) / range : 0;
+      const logicalCenter = trackRect.left + t / 2 + p * travel;
+      this.#dragOffset = e.clientX - logicalCenter;
+    } else {
+      this.#dragOffset = 0;
+    }
     this.#thumbEl.setPointerCapture(e.pointerId);
     this.#thumbEl.addEventListener('pointermove', this.#onPointerMove);
     this.#thumbEl.addEventListener('pointerup', this.#onPointerUp);
@@ -185,11 +234,16 @@ export class UISlider extends UIFormElement {
 
   #onPointerMove = (e) => {
     if (!this.#dragging) return;
-    this.#setValue(this.#valueFromX(e.clientX));
+    // Subtract the captured offset so the thumb center tracks the
+    // cursor relative to where the user originally pressed, avoiding
+    // the initial snap.
+    this.#setValue(this.#valueFromX(e.clientX - this.#dragOffset));
   };
 
   #onPointerUp = (e) => {
     this.#dragging = false;
+    this.#dragOffset = 0;
+    this.removeAttribute('data-dragging');
     this.#thumbEl.releasePointerCapture(e.pointerId);
     this.#thumbEl.removeEventListener('pointermove', this.#onPointerMove);
     this.#thumbEl.removeEventListener('pointerup', this.#onPointerUp);

package/components/slider/slider.a2ui.json

@@ -153,13 +153,19 @@
     "tag": "slider-ui",
     "tokens": {
       "--slider-fill": {
-        "description": "Filled track / thumb color"
+        "description": "Filled portion / progress color (was mixed accent, now primary)"
       },
-      "--slider-thumb-size": {
-        "description": "Thumb diameter"
+      "--slider-thumb-height": {
+        "description": "Thumb pill height (track-height − 2× inset)"
+      },
+      "--slider-thumb-width": {
+        "description": "Thumb pill width (2× thumb-height, driven by track-height)"
       },
       "--slider-track": {
-        "description": "Track background color"
+        "description": "Unfilled track background color"
+      },
+      "--slider-track-height": {
+        "description": "Full track height (scales via universal [size] attribute)"
       }
     },
     "traits": [],

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/stepper/stepper.css

@@ -20,13 +20,13 @@
     --stepper-weight:          var(--a-weight-medium);
     --stepper-border-size:     2px;
 
-    --stepper-active-bg:       var(--a-bg);
-    --stepper-active-border:   var(--a-accent);
-    --stepper-active-fg:       var(--a-accent);
+    --stepper-bg-active:       var(--a-bg);
+    --stepper-border-active:   var(--a-accent);
+    --stepper-fg-active:       var(--a-accent);
 
-    --stepper-done-bg:         var(--a-accent);
-    --stepper-done-border:     var(--a-accent);
-    --stepper-done-fg:         var(--a-accent-fg);
+    --stepper-bg-done:         var(--a-accent);
+    --stepper-border-done:     var(--a-accent);
+    --stepper-fg-done:         var(--a-accent-fg);
 
     --stepper-line:            var(--a-border-subtle);
     --stepper-line-done:       var(--a-accent);
@@ -76,13 +76,13 @@
     --stepper-item-weight:         var(--stepper-weight, var(--a-weight-medium));
     --stepper-item-border-size:    var(--stepper-border-size, 2px);
 
-    --stepper-item-active-bg:      var(--stepper-active-bg, var(--a-bg));
-    --stepper-item-active-border:  var(--stepper-active-border, var(--a-accent));
-    --stepper-item-active-fg:      var(--stepper-active-fg, var(--a-accent));
+    --stepper-item-bg-active:      var(--stepper-bg-active, var(--a-bg));
+    --stepper-item-border-active:  var(--stepper-border-active, var(--a-accent));
+    --stepper-item-fg-active:      var(--stepper-fg-active, var(--a-accent));
 
-    --stepper-item-done-bg:        var(--stepper-done-bg, var(--a-accent));
-    --stepper-item-done-border:    var(--stepper-done-border, var(--a-accent));
-    --stepper-item-done-fg:        var(--stepper-done-fg, var(--a-accent-fg));
+    --stepper-item-bg-done:        var(--stepper-bg-done, var(--a-accent));
+    --stepper-item-border-done:    var(--stepper-border-done, var(--a-accent));
+    --stepper-item-fg-done:        var(--stepper-fg-done, var(--a-accent-fg));
 
     --stepper-item-line:           var(--stepper-line, var(--a-border-subtle));
     --stepper-item-line-done:      var(--stepper-line-done, var(--a-accent));
@@ -158,9 +158,9 @@
 
   /* Active state */
   :scope[status="active"]::after {
-    border-color: var(--stepper-item-active-border);
-    color: var(--stepper-item-active-fg);
-    background: var(--stepper-item-active-bg);
+    border-color: var(--stepper-item-border-active);
+    color: var(--stepper-item-fg-active);
+    background: var(--stepper-item-bg-active);
   }
 
   :scope[status="active"] [slot="label"] {
@@ -171,9 +171,9 @@
   /* Completed state — checkmark replaces number */
   :scope[status="completed"]::after {
     content: '\2713';
-    background: var(--stepper-item-done-bg);
-    border-color: var(--stepper-item-done-border);
-    color: var(--stepper-item-done-fg);
+    background: var(--stepper-item-bg-done);
+    border-color: var(--stepper-item-border-done);
+    color: var(--stepper-item-fg-done);
   }
 
   :scope[status="completed"]::before {
@@ -214,15 +214,15 @@
   }
 
   :scope[status="active"] [slot="icon"] {
-    border-color: var(--stepper-item-active-border);
-    color: var(--stepper-item-active-fg);
-    background: var(--stepper-item-active-bg);
+    border-color: var(--stepper-item-border-active);
+    color: var(--stepper-item-fg-active);
+    background: var(--stepper-item-bg-active);
   }
 
   :scope[status="completed"] [slot="icon"] {
-    background: var(--stepper-item-done-bg);
-    border-color: var(--stepper-item-done-border);
-    color: var(--stepper-item-done-fg);
+    background: var(--stepper-item-bg-done);
+    border-color: var(--stepper-item-border-done);
+    color: var(--stepper-item-fg-done);
   }
 
   /* ── Content slots ── */