@monabbous/slidebox 1.2.0 → 1.3.1

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));

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;
+}

package/less/experimental.less

@@ -0,0 +1,119 @@
+// Generated by scripts/build.mjs.
+.slidebox-experimental-option(@name; @value) when not (@value = false) {
+  --slidebox-@{name}: @value;
+}
+
+.slidebox-range(@width: false; @spacing: false; @deform: false; @duration: false; @easing: false; @track: false; @border: false; @off: false; @on: false; @size: false; @radius: false; @text: false; @selected-text: false) {
+  .slidebox-experimental-option(width; @width);
+  .slidebox-experimental-option(spacing; @spacing);
+  .slidebox-experimental-option(deform; @deform);
+  .slidebox-experimental-option(duration; @duration);
+  .slidebox-experimental-option(easing; @easing);
+  .slidebox-experimental-option(track; @track);
+  .slidebox-experimental-option(border; @border);
+  .slidebox-experimental-option(off; @off);
+  .slidebox-experimental-option(on; @on);
+  .slidebox-experimental-option(size; @size);
+  .slidebox-experimental-option(radius; @radius);
+  .slidebox-experimental-option(text; @text);
+  .slidebox-experimental-option(selected-text; @selected-text);
+  & {
+    --_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);
+  }
+  &[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;
+  }
+  &[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;
+  }
+  &::-webkit-slider-runnable-track {
+    box-sizing: border-box;
+    height: calc(var(--_size) - 2px);
+    border: 0;
+    border-radius: var(--slidebox-radius, 100vw);
+    background: transparent;
+  }
+  &::-moz-range-track {
+    box-sizing: border-box;
+    height: calc(var(--_size) - 2px);
+    border: 0;
+    border-radius: var(--slidebox-radius, 100vw);
+    background: transparent;
+  }
+  &::-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;
+  }
+  &::-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;
+  }
+  &:focus-visible { outline: 2px solid var(--_on); outline-offset: 3px; }
+  &[data-slidebox-range-dragging]::-webkit-slider-thumb { background: transparent; border-color: transparent; transition: none; }
+  &[data-slidebox-range-dragging]::-moz-range-thumb { background: transparent; border-color: transparent; transition: none; }
+  &:disabled { cursor: not-allowed; opacity: .5; }
+  @supports (color: AccentColor) {
+    & { --_accent: AccentColor; }
+  }
+  @media (forced-colors: active) {
+    & { --_track: Field; --_border: ButtonBorder; --_on: Highlight; }
+    &::-webkit-slider-thumb { border-color: Highlight; }
+    &::-moz-range-thumb { border-color: Highlight; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    & { transition-duration: .01ms; }
+    &::-webkit-slider-thumb { transition-duration: .01ms; }
+    &::-moz-range-thumb { transition-duration: .01ms; }
+  }
+  }