@monabbous/slidebox 1.1.0 → 1.3.0

package/dist/css/group.css

@@ -0,0 +1,121 @@
+.slidebox-group {
+  --_size: var(--slidebox-size, 36px);
+  --_spacing: var(--slidebox-spacing, .12);
+  --_deform: var(--slidebox-deform, .06);
+  --_duration: var(--slidebox-duration, 200ms);
+  --_easing: var(--slidebox-easing, ease-in-out);
+  --_track: var(--slidebox-track, Field);
+  --_border: var(--slidebox-border, ButtonBorder);
+  --_off: var(--slidebox-off, FieldText);
+  --_on: var(--slidebox-on, var(--_accent, light-dark(#0b75ff, SelectedItem)));
+  --_text: var(--slidebox-text, var(--slidebox-off, FieldText));
+  --_selected-text: var(--slidebox-selected-text, HighlightText);
+  --_press-start: 0px;
+  --_press-end: 0px;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  box-sizing: border-box;
+  padding: calc(var(--_size) * var(--_spacing));
+  gap: calc(var(--_size) * var(--_spacing));
+  border: 1px solid var(--_border);
+  border-radius: var(--slidebox-radius, 100vw);
+  background: var(--_track);
+  color: var(--_text);
+  isolation: isolate;
+  position: relative;
+}
+.slidebox-group > label {
+  position: relative;
+  display: grid;
+  min-width: 0;
+  cursor: pointer;
+}
+.slidebox-group > label > input[type="radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.slidebox-group > label > span {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  min-height: var(--_size);
+  padding: .35em 1em;
+  border: 1px solid transparent;
+  border-radius: var(--slidebox-radius, 100vw);
+  color: var(--_text);
+  background: transparent;
+  transition: color var(--_duration) var(--_easing);
+}
+.slidebox-group > label > input:checked + span {
+  color: var(--_selected-text);
+}
+.slidebox-group > label > input:checked + span::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  border-radius: inherit;
+  background: var(--_on);
+  margin-inline-start: var(--_press-start);
+  margin-inline-end: var(--_press-end);
+  transition: margin-inline-start var(--_duration) var(--_easing), margin-inline-end var(--_duration) var(--_easing);
+}
+.slidebox-group > label > input:not(:checked) + span { color: var(--_text); }
+.slidebox-group:has(> label > input:checked):has(> label:active > input:not(:checked):not(:disabled)):not(:has(> label:active ~ label > input:checked)) {
+  --_press-end: calc(-1 * var(--_size) * var(--_deform));
+}
+.slidebox-group:has(> label:active > input:not(:disabled)):has(> label:active ~ label > input:checked) {
+  --_press-start: calc(-1 * var(--_size) * var(--_deform));
+}
+.slidebox-group > label > input:focus-visible + span {
+  outline: 2px solid var(--_on);
+  outline-offset: 2px;
+}
+.slidebox-group > label:has(> input:disabled) { cursor: not-allowed; }
+.slidebox-group > label > input:disabled + span { opacity: .5; }
+@supports (color: AccentColor) {
+  .slidebox-group { --_accent: AccentColor; }
+}
+/* A shared sliding indicator where scoped CSS anchor positioning is available.
+   Other browsers retain the per-segment highlight above. Neither needs JS. */
+@supports (anchor-scope: --slidebox-selection) and (left: anchor(left)) {
+  .slidebox-group { anchor-scope: --slidebox-selection; }
+  .slidebox-group > label:has(> input:checked) { anchor-name: --slidebox-selection; }
+  .slidebox-group:has(> label > input:checked)::before {
+    content: "";
+    position: absolute;
+    position-anchor: --slidebox-selection;
+    left: anchor(left);
+    right: anchor(right);
+    top: anchor(top);
+    height: anchor-size(height);
+    margin-inline-start: var(--_press-start);
+    margin-inline-end: var(--_press-end);
+    z-index: -1;
+    border-radius: var(--slidebox-radius, 100vw);
+    background: var(--_on);
+    pointer-events: none;
+    transition: left var(--_duration) var(--_easing), right var(--_duration) var(--_easing), top var(--_duration) var(--_easing), height var(--_duration) var(--_easing), margin-inline-start var(--_duration) var(--_easing), margin-inline-end var(--_duration) var(--_easing);
+  }
+  .slidebox-group > label > input:checked + span::before { content: none; }
+}
+@media (forced-colors: active) {
+  .slidebox-group { --_track: Field; --_border: ButtonBorder; --_off: FieldText; --_on: Highlight; --_text: FieldText; --_selected-text: HighlightText; }
+  .slidebox-group > label > input:checked + span { border-color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; }
+  .slidebox-group > label > input:disabled + span { color: GrayText; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .slidebox-group > label > span { transition-duration: .01ms; }
+  .slidebox-group > label > input:checked + span::before { transition-duration: .01ms; }
+  .slidebox-group::before { transition-duration: .01ms; }
+}

package/dist/css/slidebox.css

@@ -28,6 +28,7 @@
 }
 .slidebox::after {
   --_start: 0; --_end: 1;
+  box-sizing: border-box;
   content: "";
   display: block;
   flex: 1 1 auto;
@@ -38,6 +39,7 @@
   margin-inline-start: calc((1em * var(--_container-width-ratio) - 1em) * var(--_start) + var(--_thumb-spacing-ratio) * .5em);
   margin-inline-end: calc((1em * var(--_container-width-ratio) - 1em) * var(--_end) + var(--_thumb-spacing-ratio) * .5em);
   border-radius: inherit;
+  border: 1px solid var(--_track);
   background: var(--_off);
   transition: background var(--_duration) var(--_easing-function), margin-inline-start var(--_duration) var(--_easing-function), margin-inline-end var(--_duration) var(--_easing-function);
   transition-delay: 0s, 0s, calc(var(--_duration) * var(--_deform));
@@ -50,6 +52,11 @@
 .slidebox:not(:checked):active::after { --_end: calc(1 - var(--_deform)); }
 .slidebox:checked:active::after { --_start: calc(1 - var(--_deform)); }
 .slidebox:disabled { cursor: not-allowed; opacity: .5; }
+.slidebox[data-slidebox-dragging]::after {
+  margin-inline-start: calc((1em * var(--_container-width-ratio) - 1em) * max(0, var(--slidebox-drag-progress) - max(0, var(--slidebox-drag-stretch, 0))) + var(--_thumb-spacing-ratio) * .5em);
+  margin-inline-end: calc((1em * var(--_container-width-ratio) - 1em) * max(0, 1 - var(--slidebox-drag-progress) - max(0, -1 * var(--slidebox-drag-stretch, 0))) + var(--_thumb-spacing-ratio) * .5em);
+  transition: none;
+}
 @media (forced-colors: active) {
   .slidebox { --_track: Field; --_border: ButtonBorder; --_off: FieldText; --_on: Highlight; }
 }

package/experimental/drag.d.mts

@@ -0,0 +1,15 @@
+export interface SlideboxDragOptions {
+  /** Horizontal movement in CSS pixels before a drag starts. Default: 5. */
+  threshold?: number;
+}
+
+/**
+ * Experimental opt-in pointer dragging for a native checkbox styled by Slidebox.
+ * Call after mounting the input. Returns an idempotent cleanup function.
+ * Calling again for the same input returns its existing cleanup function;
+ * destroy it first to change options. Safe to import during server rendering.
+ */
+export declare function enhanceSlidebox(
+  input: HTMLInputElement,
+  options?: SlideboxDragOptions,
+): () => void;

package/experimental/drag.mjs

@@ -0,0 +1,158 @@
+const enhancements = new WeakMap();
+
+/** Opt in a native checkbox to experimental horizontal pointer dragging. */
+export function enhanceSlidebox(input, { threshold = 5 } = {}) {
+  if (input?.tagName !== "INPUT" || input.type !== "checkbox") {
+    throw new TypeError("enhanceSlidebox expects a checkbox input");
+  }
+  if (!Number.isFinite(threshold) || threshold < 0) {
+    throw new RangeError("threshold must be a non-negative number of pixels");
+  }
+  if (enhancements.has(input)) return enhancements.get(input);
+
+  const view = input.ownerDocument.defaultView;
+  if (!view?.PointerEvent || typeof input.setPointerCapture !== "function") {
+    throw new Error("Slidebox dragging requires a browser with Pointer Events and pointer capture");
+  }
+  const originalTouchAction = input.style.getPropertyValue("touch-action");
+  const originalTouchPriority = input.style.getPropertyPriority("touch-action");
+  let gesture;
+  let suppressed;
+  let suppressionTimer;
+  input.style.setProperty("touch-action", "pan-y pinch-zoom");
+
+  function disabled() { return input.matches(":disabled"); }
+  function clearSuppression() {
+    suppressed = undefined;
+    view.clearTimeout(suppressionTimer);
+  }
+  function suppressClick(id) {
+    clearSuppression();
+    suppressed = id;
+    suppressionTimer = view.setTimeout(clearSuppression, 500);
+  }
+  function finish(commit = false) {
+    if (!gesture) return;
+    const current = gesture;
+    gesture = undefined;
+    if (current.frame !== undefined) view.cancelAnimationFrame(current.frame);
+    if (current.dragging) {
+      if (current.attribute === null) input.removeAttribute("data-slidebox-dragging");
+      else input.setAttribute("data-slidebox-dragging", current.attribute);
+      if (current.progressStyle) input.style.setProperty("--slidebox-drag-progress", current.progressStyle, current.progressPriority);
+      else input.style.removeProperty("--slidebox-drag-progress");
+      if (current.stretchStyle) input.style.setProperty("--slidebox-drag-stretch", current.stretchStyle, current.stretchPriority);
+      else input.style.removeProperty("--slidebox-drag-stretch");
+      suppressClick(current.id);
+    }
+    if (input.hasPointerCapture(current.id)) input.releasePointerCapture(current.id);
+    if (commit && current.dragging && !disabled()) {
+      const checked = current.progress >= .5;
+      if (checked !== input.checked) {
+        input.checked = checked;
+        input.dispatchEvent(new view.Event("input", { bubbles: true }));
+        input.dispatchEvent(new view.Event("change", { bubbles: true }));
+      }
+    }
+  }
+  function down(event) {
+    if (gesture || disabled() || !event.isPrimary || event.button !== 0) return;
+    clearSuppression();
+    const box = input.getBoundingClientRect();
+    const travel = box.width - box.height;
+    if (travel <= 0) return;
+    const computed = view.getComputedStyle(input);
+    const deformation = Number.parseFloat(computed.getPropertyValue("--_deform")) || 0;
+    const durationValue = computed.getPropertyValue("--_duration").trim();
+    const duration = (Number.parseFloat(durationValue) || 0) * (durationValue.endsWith("ms") ? 1 : 1000);
+    gesture = {
+      id: event.pointerId, x: event.clientX, y: event.clientY, travel,
+      start: input.checked ? 1 : 0, progress: input.checked ? 1 : 0,
+      direction: computed.direction === "rtl" ? -1 : 1,
+      deform: view.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : Math.max(0, Math.min(1, deformation)),
+      duration, stretch: 0,
+      attribute: input.getAttribute("data-slidebox-dragging"),
+      progressStyle: input.style.getPropertyValue("--slidebox-drag-progress"),
+      progressPriority: input.style.getPropertyPriority("--slidebox-drag-progress"),
+      stretchStyle: input.style.getPropertyValue("--slidebox-drag-stretch"),
+      stretchPriority: input.style.getPropertyPriority("--slidebox-drag-stretch"),
+      dragging: false,
+    };
+    input.setPointerCapture(event.pointerId);
+  }
+  function relax(now) {
+    if (!gesture) return;
+    const elapsed = gesture.lastFrame === undefined ? 16 : Math.max(0, now - gesture.lastFrame);
+    gesture.lastFrame = now;
+    gesture.stretch *= Math.exp(-elapsed / Math.max(16, gesture.duration * .35));
+    if (Math.abs(gesture.stretch) < .0001) gesture.stretch = 0;
+    input.style.setProperty("--slidebox-drag-stretch", String(gesture.stretch));
+    gesture.frame = gesture.stretch ? view.requestAnimationFrame(relax) : undefined;
+    if (!gesture.stretch) gesture.lastFrame = undefined;
+  }
+  function move(event) {
+    if (!gesture || event.pointerId !== gesture.id) return;
+    if (disabled()) { finish(); return; }
+    const dx = event.clientX - gesture.x;
+    const dy = event.clientY - gesture.y;
+    if (!gesture.dragging) {
+      // Leave vertical gestures to page scrolling and taps to native clicks.
+      if (Math.abs(dy) > threshold && Math.abs(dy) > Math.abs(dx)) { finish(); return; }
+      if (Math.abs(dx) <= threshold) return;
+      gesture.dragging = true;
+      input.setAttribute("data-slidebox-dragging", "");
+      input.focus({ preventScroll: true });
+    }
+    const progress = Math.max(0, Math.min(1, gesture.start + dx * gesture.direction / gesture.travel));
+    gesture.stretch = Math.max(-gesture.deform, Math.min(gesture.deform, gesture.stretch + progress - gesture.progress));
+    gesture.progress = progress;
+    input.style.setProperty("--slidebox-drag-progress", String(gesture.progress));
+    input.style.setProperty("--slidebox-drag-stretch", String(gesture.stretch));
+    if (gesture.stretch && gesture.frame === undefined) gesture.frame = view.requestAnimationFrame(relax);
+    event.preventDefault();
+  }
+  function up(event) {
+    if (!gesture || event.pointerId !== gesture.id) return;
+    move(event);
+    finish(true);
+  }
+  function cancel(event) {
+    if (gesture && event.pointerId === gesture.id) finish();
+  }
+  function click(event) {
+    // Keyboard activation has detail=0 and must retain native behavior.
+    if (suppressed === undefined || event.detail === 0) return;
+    if ("pointerId" in event && event.pointerId !== suppressed) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    clearSuppression();
+  }
+  function reset() { finish(); }
+  const form = input.form;
+  input.addEventListener("pointerdown", down);
+  input.addEventListener("pointermove", move);
+  input.addEventListener("pointerup", up);
+  input.addEventListener("pointercancel", cancel);
+  input.addEventListener("lostpointercapture", cancel);
+  input.addEventListener("click", click, true);
+  form?.addEventListener("reset", reset);
+
+  function destroy() {
+    finish();
+    clearSuppression();
+    input.removeEventListener("pointerdown", down);
+    input.removeEventListener("pointermove", move);
+    input.removeEventListener("pointerup", up);
+    input.removeEventListener("pointercancel", cancel);
+    input.removeEventListener("lostpointercapture", cancel);
+    input.removeEventListener("click", click, true);
+    form?.removeEventListener("reset", reset);
+    if (input.style.getPropertyValue("touch-action") === "pan-y pinch-zoom") {
+      if (originalTouchAction) input.style.setProperty("touch-action", originalTouchAction, originalTouchPriority);
+      else input.style.removeProperty("touch-action");
+    }
+    enhancements.delete(input);
+  }
+  enhancements.set(input, destroy);
+  return destroy;
+}

package/experimental/range.css

@@ -0,0 +1,99 @@
+.slidebox-range {
+  --_size: var(--slidebox-size, 24px);
+  --_spacing: var(--slidebox-spacing, .33);
+  --_range-inset: max(0px, calc(var(--_size) * var(--_spacing) * .5));
+  --_thumb-size: calc(var(--_size) * (1 - var(--_spacing)));
+  --_deform: var(--slidebox-deform, .1);
+  --_duration: var(--slidebox-duration, 200ms);
+  --_easing: var(--slidebox-easing, ease-in-out);
+  --_track: var(--slidebox-track, Field);
+  --_border: var(--slidebox-border, ButtonBorder);
+  --_on: var(--slidebox-on, var(--_accent, light-dark(#0b75ff, SelectedItem)));
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: var(--_size);
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--_range-inset);
+  border: 1px solid var(--_border);
+  border-radius: var(--slidebox-radius, 100vw);
+  background: var(--_track);
+  color: var(--_on);
+  cursor: pointer;
+  accent-color: var(--_on);
+}
+.slidebox-range[data-slidebox-range-fill] {
+  --_fill-size: max(0px, min(var(--_thumb-size), calc(var(--_size) - 2px)));
+  --_fill-stop: clamp(0px, calc(var(--_thumb-size) * .5 + (100% - var(--_thumb-size)) * clamp(0, var(--slidebox-range-fill, 0), 1)), 100%);
+  background-image:
+    radial-gradient(circle closest-side, var(--_fill-color, var(--_on)) calc(100% - .5px), transparent 100%),
+    linear-gradient(to right, transparent 0 calc(var(--_fill-size) * .5), var(--_fill-color, var(--_on)) calc(var(--_fill-size) * .5) var(--_fill-stop), transparent var(--_fill-stop)),
+    var(--_range-track-image, none);
+  background-size: var(--_fill-size) var(--_fill-size), max(0px, calc(100% - 2 * var(--_range-inset))) var(--_fill-size), 100vw 100vh;
+  background-position: left var(--_range-inset) center, center, 0 0;
+  background-repeat: no-repeat;
+  background-attachment: scroll, scroll, fixed;
+  background-clip: padding-box;
+}
+.slidebox-range[data-slidebox-range-fill]:dir(rtl) {
+  background-image:
+    radial-gradient(circle closest-side, var(--_fill-color, var(--_on)) calc(100% - .5px), transparent 100%),
+    linear-gradient(to left, transparent 0 calc(var(--_fill-size) * .5), var(--_fill-color, var(--_on)) calc(var(--_fill-size) * .5) var(--_fill-stop), transparent var(--_fill-stop)),
+    var(--_range-track-image, none);
+  background-position: right var(--_range-inset) center, center, 0 0;
+}
+.slidebox-range::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  height: calc(var(--_size) - 2px);
+  border: 0;
+  border-radius: var(--slidebox-radius, 100vw);
+  background: transparent;
+}
+.slidebox-range::-moz-range-track {
+  box-sizing: border-box;
+  height: calc(var(--_size) - 2px);
+  border: 0;
+  border-radius: var(--slidebox-radius, 100vw);
+  background: transparent;
+}
+.slidebox-range::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  width: calc(var(--_size) * (1 - var(--_spacing)));
+  height: calc(var(--_size) * (1 - var(--_spacing)));
+  margin-top: calc(var(--_size) * var(--_spacing) / 2 - 1px);
+  border: 1px solid var(--_track);
+  border-radius: var(--slidebox-radius, 100vw);
+  background: var(--_on);
+  transition: none;
+}
+.slidebox-range::-moz-range-thumb {
+  box-sizing: border-box;
+  width: calc(var(--_size) * (1 - var(--_spacing)));
+  height: calc(var(--_size) * (1 - var(--_spacing)));
+  border: 1px solid var(--_track);
+  border-radius: var(--slidebox-radius, 100vw);
+  background: var(--_on);
+  transition: none;
+}
+.slidebox-range:focus-visible { outline: 2px solid var(--_on); outline-offset: 3px; }
+.slidebox-range[data-slidebox-range-dragging]::-webkit-slider-thumb { background: transparent; border-color: transparent; transition: none; }
+.slidebox-range[data-slidebox-range-dragging]::-moz-range-thumb { background: transparent; border-color: transparent; transition: none; }
+.slidebox-range:disabled { cursor: not-allowed; opacity: .5; }
+@supports (color: AccentColor) {
+  .slidebox-range { --_accent: AccentColor; }
+}
+@media (forced-colors: active) {
+  .slidebox-range { --_track: Field; --_border: ButtonBorder; --_on: Highlight; }
+  .slidebox-range::-webkit-slider-thumb { border-color: Highlight; }
+  .slidebox-range::-moz-range-thumb { border-color: Highlight; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .slidebox-range { transition-duration: .01ms; }
+  .slidebox-range::-webkit-slider-thumb { transition-duration: .01ms; }
+  .slidebox-range::-moz-range-thumb { transition-duration: .01ms; }
+}

package/experimental/range.d.mts

@@ -0,0 +1,14 @@
+/**
+ * Experimental, opt-in directional deformation for a native Slidebox range.
+ * Does not replace native values or emit synthetic input/change events.
+ * Call after mounting; call the returned cleanup function before unmounting.
+ * Importing during server rendering is safe.
+ */
+export declare function enhanceSlideboxRange(input: HTMLInputElement): () => void;
+
+/**
+ * Experimental progress fill, independent of directional motion.
+ * Updates on native input/change and form reset. Call cleanup before unmounting.
+ * After programmatic value changes, dispatch an input event to update the fill.
+ */
+export declare function enhanceSlideboxRangeFill(input: HTMLInputElement): () => void;

package/experimental/range.mjs

@@ -0,0 +1,213 @@
+const enhancements = new WeakMap();
+const clamp = value => Math.max(0, Math.min(1, value));
+
+/** Native value = leading edge; a delayed visual tail supplies the deformation. */
+export function enhanceSlideboxRange(input) {
+  if (input?.tagName !== "INPUT" || input.type !== "range") {
+    throw new TypeError("enhanceSlideboxRange expects a range input");
+  }
+  if (enhancements.has(input)) return enhancements.get(input);
+  const view = input.ownerDocument.defaultView;
+  if (!view?.PointerEvent) throw new Error("Slidebox range motion requires a browser with Pointer Events");
+  let motion;
+  let previous = progress();
+
+  function progress() {
+    const min = Number.parseFloat(input.min) || 0;
+    const parsedMax = Number.parseFloat(input.max);
+    const max = Number.isFinite(parsedMax) ? parsedMax : 100;
+    return max > min ? clamp((input.valueAsNumber - min) / (max - min)) : 0;
+  }
+  function stop() {
+    if (!motion) return;
+    const current = motion;
+    motion = undefined;
+    current.visual.remove();
+    if (current.frame !== undefined) view.cancelAnimationFrame(current.frame);
+    if (current.attribute === null) input.removeAttribute("data-slidebox-range-dragging");
+    else input.setAttribute("data-slidebox-range-dragging", current.attribute);
+    if (current.style) input.style.setProperty("--slidebox-range-stretch", current.style, current.priority);
+    else input.style.removeProperty("--slidebox-range-stretch");
+    if (current.progressStyle) input.style.setProperty("--slidebox-range-progress", current.progressStyle, current.progressPriority);
+    else input.style.removeProperty("--slidebox-range-progress");
+  }
+  function start() {
+    if (motion) return motion;
+    if (!input.isConnected || !input.parentElement || input.matches(":disabled") || view.matchMedia("(prefers-reduced-motion: reduce)").matches || view.matchMedia("(forced-colors: active)").matches) return;
+    const computed = view.getComputedStyle(input);
+    const deform = Math.max(0, Math.min(1, Number.parseFloat(computed.getPropertyValue("--_deform")) || 0));
+    const time = computed.getPropertyValue("--_duration").trim();
+    const duration = (Number.parseFloat(time) || 0) * (time.endsWith("ms") ? 1 : 1000);
+    const box = input.getBoundingClientRect();
+    if (!deform || !duration || box.height <= 0 || box.width <= box.height) return;
+    // Keep the native thumb's layout/hit box constant. Resizing it changes the
+    // browser's pointer-to-value mapping mid-drag and makes the head jump.
+    const visual = input.ownerDocument.createElement("span");
+    visual.setAttribute("data-slidebox-range-visual", "");
+    visual.setAttribute("aria-hidden", "true");
+    Object.assign(visual.style, {
+      position: "absolute", display: "flex", alignItems: "center",
+      boxSizing: "border-box", pointerEvents: "none", zIndex: "1",
+      border: "1px solid transparent", padding: "0", margin: "0",
+      direction: computed.direction, colorScheme: computed.colorScheme,
+    });
+    const thumb = input.ownerDocument.createElement("span");
+    const size = Number.parseFloat(computed.height);
+    const spacing = Number.parseFloat(computed.getPropertyValue("--_spacing")) || 0;
+    Object.assign(thumb.style, {
+      display: "block", flex: "1 1 auto", minWidth: "0", boxSizing: "border-box",
+      height: `${size * (1 - spacing)}px`, width: `${size * (1 - spacing)}px`,
+      border: `1px solid ${computed.getPropertyValue("--_track").trim()}`,
+      borderRadius: computed.getPropertyValue("--slidebox-radius").trim() || "100vw",
+      background: computed.getPropertyValue("--_on").trim(), pointerEvents: "none",
+    });
+    visual.append(thumb);
+    input.after(visual);
+    motion = {
+      deform, duration, tail: previous, target: previous, direction: 0,
+      visual, thumb, size, gap: Math.max(0, size * spacing / 2),
+      travelSize: size * (1 - spacing) + 2 * Math.max(0, size * spacing / 2),
+      holdUntil: view.performance.now(),
+      distanceRatio: (box.width - box.height) / box.height,
+      attribute: input.getAttribute("data-slidebox-range-dragging"),
+      style: input.style.getPropertyValue("--slidebox-range-stretch"),
+      priority: input.style.getPropertyPriority("--slidebox-range-stretch"),
+      progressStyle: input.style.getPropertyValue("--slidebox-range-progress"),
+      progressPriority: input.style.getPropertyPriority("--slidebox-range-progress"),
+    };
+    input.setAttribute("data-slidebox-range-dragging", "");
+    return motion;
+  }
+  function draw() {
+    // Clamp the tail in progress space: it cannot extend beyond either endpoint.
+    const lag = Math.max(-motion.deform, Math.min(motion.deform, motion.target - motion.tail));
+    input.style.setProperty("--slidebox-range-stretch", String(lag * motion.distanceRatio));
+    input.style.setProperty("--slidebox-range-progress", String(motion.target));
+    const tail = motion.target - lag;
+    const start = Math.min(motion.target, tail);
+    const end = 1 - Math.max(motion.target, tail);
+    motion.thumb.style.marginInlineStart = `calc((100% - ${motion.travelSize}px) * ${start} + ${motion.gap}px)`;
+    motion.thumb.style.marginInlineEnd = `calc((100% - ${motion.travelSize}px) * ${end} + ${motion.gap}px)`;
+    positionVisual();
+  }
+  function positionVisual() {
+    if (!motion) return;
+    const rect = input.getBoundingClientRect();
+    const parent = motion.visual.offsetParent;
+    let left = rect.left + view.scrollX;
+    let top = rect.top + view.scrollY;
+    if (parent && !(parent === input.ownerDocument.body && view.getComputedStyle(parent).position === "static")) {
+      const box = parent.getBoundingClientRect();
+      left = rect.left - box.left - parent.clientLeft + parent.scrollLeft;
+      top = rect.top - box.top - parent.clientTop + parent.scrollTop;
+    }
+    Object.assign(motion.visual.style, {
+      left: `${left}px`, top: `${top}px`, width: `${rect.width}px`, height: `${rect.height}px`,
+    });
+  }
+  function animate(now) {
+    if (!motion) return;
+    if (!input.isConnected || input.matches(":disabled") || view.matchMedia("(prefers-reduced-motion: reduce)").matches || view.matchMedia("(forced-colors: active)").matches) { stop(); return; }
+    const from = Math.max(motion.lastFrame ?? now, motion.holdUntil);
+    const elapsed = Math.max(0, now - from);
+    motion.lastFrame = now;
+    // The leading edge is always positioned by the browser's native value.
+    // Only the tail eases toward that destination after the initial delay.
+    motion.tail += (motion.target - motion.tail) * (1 - Math.exp(-elapsed / Math.max(16, motion.duration / 3)));
+    if (Math.abs(motion.target - motion.tail) < .0001) { stop(); return; }
+    draw();
+    motion.frame = view.requestAnimationFrame(animate);
+  }
+  function changed() {
+    const next = progress();
+    if (next === previous) return;
+    const current = start();
+    if (current) {
+      const direction = Math.sign(next - current.target);
+      if (direction && direction !== current.direction) {
+        // On reversal, the old leading edge becomes the new trailing edge.
+        current.tail = current.target;
+        current.direction = direction;
+        current.holdUntil = view.performance.now() + current.duration * current.deform;
+      }
+      current.target = next;
+      draw();
+      if (current.frame === undefined) current.frame = view.requestAnimationFrame(animate);
+    }
+    previous = next;
+  }
+  function baseline() { if (!motion) previous = progress(); }
+  function cancel() { stop(); previous = progress(); }
+  input.addEventListener("pointerdown", baseline);
+  input.addEventListener("keydown", baseline);
+  input.addEventListener("input", changed);
+  input.addEventListener("pointercancel", cancel);
+  view.addEventListener("blur", cancel);
+  view.addEventListener("scroll", positionVisual, true);
+  view.addEventListener("resize", positionVisual);
+  const form = input.form;
+  form?.addEventListener("reset", cancel);
+
+  function destroy() {
+    cancel();
+    input.removeEventListener("pointerdown", baseline);
+    input.removeEventListener("keydown", baseline);
+    input.removeEventListener("input", changed);
+    input.removeEventListener("pointercancel", cancel);
+    view.removeEventListener("blur", cancel);
+    view.removeEventListener("scroll", positionVisual, true);
+    view.removeEventListener("resize", positionVisual);
+    form?.removeEventListener("reset", cancel);
+    enhancements.delete(input);
+  }
+  enhancements.set(input, destroy);
+  return destroy;
+}
+
+const fills = new WeakMap();
+
+/** Optional progress paint; independent of directional motion. */
+export function enhanceSlideboxRangeFill(input) {
+  if (input?.tagName !== "INPUT" || input.type !== "range") {
+    throw new TypeError("enhanceSlideboxRangeFill expects a range input");
+  }
+  if (fills.has(input)) return fills.get(input);
+  const view = input.ownerDocument.defaultView;
+  if (!view) throw new Error("Slidebox range fill requires a mounted browser document");
+  const attribute = input.getAttribute("data-slidebox-range-fill");
+  const value = input.style.getPropertyValue("--slidebox-range-fill");
+  const priority = input.style.getPropertyPriority("--slidebox-range-fill");
+  let resetFrame;
+  function update() {
+    const min = Number.parseFloat(input.min) || 0;
+    const parsedMax = Number.parseFloat(input.max);
+    const max = Number.isFinite(parsedMax) ? parsedMax : 100;
+    const progress = max > min ? clamp((input.valueAsNumber - min) / (max - min)) : 0;
+    input.style.setProperty("--slidebox-range-fill", String(progress));
+  }
+  function reset() {
+    view.cancelAnimationFrame(resetFrame);
+    // Native reset applies defaultValue after dispatching the reset event.
+    resetFrame = view.requestAnimationFrame(update);
+  }
+  input.setAttribute("data-slidebox-range-fill", "");
+  input.addEventListener("input", update);
+  input.addEventListener("change", update);
+  const form = input.form;
+  form?.addEventListener("reset", reset);
+  update();
+
+  function destroy() {
+    view.cancelAnimationFrame(resetFrame);
+    input.removeEventListener("input", update);
+    input.removeEventListener("change", update);
+    form?.removeEventListener("reset", reset);
+    if (attribute === null) input.removeAttribute("data-slidebox-range-fill");
+    else input.setAttribute("data-slidebox-range-fill", attribute);
+    if (value) input.style.setProperty("--slidebox-range-fill", value, priority);
+    else input.style.removeProperty("--slidebox-range-fill");
+    fills.delete(input);
+  }
+  fills.set(input, destroy);
+  return destroy;
+}