@monabbous/slidebox 1.0.0 → 1.2.0

package/README.md

@@ -1,65 +1,297 @@
-# Slidebox Lab
+# Slidebox
 
-An elastic CSS switch with a playground for geometry, colors, and motion.
+An elastic CSS switch built on a native checkbox. No JavaScript, extra elements, or runtime dependencies required. Add optional [experimental pointer dragging](#experimental-pointer-dragging) when you want the thumb to follow your pointer.
 
-[Preview the interactive playground online](https://htmlpreview.github.io/?https://github.com/monabbous/slidebox/blob/main/index.html)
+![Slidebox switch animation](assets/slidebox-demo.webp)
 
-![Slidebox Lab demo: default geometry, 200ms ease-in-out](assets/slidebox-demo.webp)
+[Try the playground](https://htmlpreview.github.io/?https://github.com/monabbous/slidebox/blob/main/index.html) · [npm](https://www.npmjs.com/package/@monabbous/slidebox)
 
-The animation uses the default width (2), thumb spacing (0.33), deformation (0.1), and a 200ms `ease-in-out` transition.
+## Install
 
-## npm package
+```sh
+npm install @monabbous/slidebox
+```
 
-The published CSS package keeps the name [`@monabbous/slidebox`](https://www.npmjs.com/package/@monabbous/slidebox).
-The package includes the switch stylesheet at `dist/css/slidebox.css` and a Sass-compatible entrypoint at `scss/slidebox.scss`. The playground is not included in npm.
+Choose **one** integration below: CSS, Sass, Less, or Tailwind. You don't need to import the plain CSS when using a mixin or the Tailwind plugin.
 
-```bash
-npm install @monabbous/slidebox
+## Plain CSS
+
+Import the stylesheet through your bundler:
+
+```js
+import "@monabbous/slidebox/dist/css/slidebox.css";
+```
+
+Add the class to a checkbox and give it an accessible label:
+
+```html
+<label>
+  <input class="slidebox" type="checkbox" role="switch" name="notifications">
+  Enable notifications
+</label>
+```
+
+Use normal checkbox attributes: `checked`, `disabled`, `required`, `name`, and `value`. Read or change its state with your framework's normal checkbox binding. `role="switch"` is optional; omit it for checkbox semantics.
+
+### Set defaults and override individual switches
+
+Public custom properties inherit, so you can set site-wide defaults on `:root`, section defaults on a parent, or overrides on a single input:
+
+```css
+:root {
+  color-scheme: light dark;
+  --slidebox-size: 24px;
+  --slidebox-on: #7c3aed;
+  --slidebox-duration: 250ms;
+}
+
+.settings {
+  --slidebox-width: 2.4;
+}
+
+.slidebox.compact {
+  --slidebox-size: 18px;
+  --slidebox-spacing: 0.25;
+}
+```
+
+`color-scheme: light dark` lets the system colors follow the user's theme. Use `light` or `dark` to force a scheme.
+
+## Controls
+
+The same names work as CSS properties (`--slidebox-NAME`), Sass map keys, Less arguments (`@NAME`), and Tailwind plugin options/utilities.
+
+| Control | Default | Meaning |
+| --- | --- | --- |
+| `size` | `54px` | Switch height; width and thumb geometry scale with it. Use a CSS length. |
+| `width` | `2` | Track width divided by height. Use a unitless number greater than 1. |
+| `spacing` | `.33` | Space around the thumb as a fraction of the height. Use a number from 0 to less than 1. |
+| `deform` | `.1` | Elastic press deformation and motion delay ratio. Use a number from 0 to less than 1; 0 removes the deformation. |
+| `duration` | `200ms` | Animation duration, including a time unit. |
+| `easing` | `ease-in-out` | Any CSS timing function, including `cubic-bezier()` and `linear()`. |
+| `track` | `Field` | Track background color. |
+| `border` | `ButtonBorder` | Track border color. |
+| `off` | `FieldText` | Unchecked thumb color. |
+| `on` | System accent, when supported | Checked thumb color; falls back to `light-dark(#0b75ff, SelectedItem)`. |
+
+Custom colors do not override forced-colors accessibility mode. Reduced-motion users get effectively instant transitions. Logical margins support both LTR and RTL layouts. Keep the browser's focus outline, or provide a visible `:focus-visible` style yourself.
+
+## Sass mixin
+
+Use Dart Sass's module system. Configure shared defaults with `$defaults`, then override any control per mixin call:
+
+```scss
+@use "@monabbous/slidebox/scss/mixins" as slidebox with (
+  $defaults: (
+    size: 24px,
+    on: #7c3aed,
+    duration: 250ms
+  )
+);
+
+.toggle {
+  @include slidebox.slidebox();
+}
+
+.toggle-large {
+  @include slidebox.slidebox((size: 36px, width: 2.5));
+}
+```
+
+```html
+<label><input class="toggle" type="checkbox"> Enable notifications</label>
+```
+
+Importing the mixin does not emit CSS until you include it. Configure the module once, before any other module loads it. Your Sass bundler must resolve npm imports (with the Sass CLI, add `--load-path=node_modules`).
+
+For the ready-made `.slidebox` class instead of a mixin:
+
+```scss
+@use "@monabbous/slidebox/scss/slidebox";
+```
+
+## Less mixin
+
+Import the mixin, then use named arguments. Create a wrapper mixin for project defaults:
+
+```less
+@import "@monabbous/slidebox/less/slidebox.less";
+
+.app-switch(@size: 24px; @on: #7c3aed; @duration: 250ms) {
+  .slidebox(@size: @size; @on: @on; @duration: @duration);
+}
+
+.toggle { .app-switch(); }
+.toggle-large { .app-switch(@size: 36px); }
+.toggle-wide { .slidebox(@size: 24px; @width: 2.5; @spacing: 0.25); }
+```
+
+The import emits no CSS on its own. Use semicolons between arguments, especially when passing timing functions containing commas. Your Less bundler must resolve npm imports; with the Less CLI, add `--include-path=node_modules`.
+
+## Tailwind CSS
+
+The plugin is included in the same npm package and supports Tailwind v3.4 and v4. Install Tailwind separately using its normal setup.
+
+### Tailwind v4
+
+Register the plugin in your Tailwind stylesheet. The options block sets project defaults; omit it to keep Slidebox's defaults:
+
+```css
+@import "tailwindcss";
+@plugin "@monabbous/slidebox/tailwind/index.cjs" {
+  size: 24px;
+  on: #7c3aed;
+  duration: 250ms;
+}
+```
+
+### Tailwind v3
+
+Register it in `tailwind.config.cjs`:
+
+```js
+module.exports = {
+  content: ["./src/**/*.{html,js,ts,jsx,tsx,vue,svelte}"],
+  plugins: [
+    require("@monabbous/slidebox/tailwind/index.cjs")({
+      size: "24px",
+      on: "#7c3aed",
+      duration: "250ms",
+    }),
+  ],
+};
+```
+
+### Utilities and overrides
+
+Add `slidebox` for the component, then control it with `slidebox-NAME-[VALUE]` utilities:
+
+```html
+<label>
+  <input
+    type="checkbox"
+    class="slidebox slidebox-size-[28px] slidebox-width-[2.5] slidebox-spacing-[0.25] slidebox-deform-[0.15] slidebox-duration-[300ms] slidebox-on-violet-600 dark:slidebox-on-violet-400"
+  >
+  Enable notifications
+</label>
 ```
 
-Import `@monabbous/slidebox/dist/css/slidebox.css` in a stylesheet or through your bundler, then use `<input class="slidebox" type="checkbox">`. The package is built from the component rules in `style.css` using `npm run build`.
+- All controls accept arbitrary values: `slidebox-track-[#222]`, `slidebox-easing-[cubic-bezier(0.4,0,0.2,1)]`, etc.
+- `track`, `border`, `off`, and `on` expose your Tailwind color palette, such as `slidebox-on-emerald-500`.
+- `duration` and `easing` also expose Tailwind's transition theme, such as `slidebox-duration-300` and `slidebox-easing-linear`.
+- Variants work normally: `md:slidebox-size-[32px]`, `hover:slidebox-on-emerald-600`, etc.
+- Use `slidebox-size-*` rather than `h-*` to resize: thumb geometry uses the switch's font size.
+- Keep complete class names in source; dynamically assembled class strings may not be detected by Tailwind.
 
-## Manual npm releases
+In v3, add named presets under `theme.extend.slidebox`:
 
-The release workflow is [Publish to npm](.github/workflows/publish-npm.yml). It is triggered **only** through GitHub Actions > Run workflow on `main`, with a `patch`, `minor`, or `major` choice.
+```js
+theme: {
+  extend: {
+    slidebox: {
+      size: { compact: "18px", comfortable: "28px" },
+      width: { wide: "2.5" },
+    },
+  },
+},
+// Now use slidebox-size-compact or slidebox-width-wide.
+```
 
-The manifest starts at `0.3.0`, so the first `patch` dispatch will release `0.3.1` (once npm credentials are configured). The workflow builds and tests the package, creates a `chore(release): vX.Y.Z` commit and tag, pushes both to `main`, then publishes to npm.
+CSS custom properties work with every integration. Avoid setting a control both through plugin/mixin defaults and an inherited variable: a value assigned directly to the switch wins over inheritance. Use a utility or a selector targeting that switch to override it.
 
-Before the first release:
+## Experimental pointer dragging
 
-1. In GitHub Settings > General > Default branch, change `master` to `main`.
-2. Add a granular npm publish token as the repository Actions secret `NPM_TOKEN`, scoped to `@monabbous/slidebox`, with permission to publish. Never commit the token.
-3. Ensure GitHub Actions has permission to write repository contents.
-4. Manually dispatch the release workflow on `main`.
+**Opt-in and experimental.** The switch works without JavaScript. This separate, dependency-free ES module adds mouse, touch, and pen dragging to a checkbox styled with Slidebox. It never initializes controls automatically. The API and gesture feel may change in future releases.
 
-The workflow does not run on pushes or tags. A failed npm publish after the Git tag has been pushed requires fixing the publish failure for that version before choosing a new bump. The old library is preserved in `legacy/`.
+Keep using your chosen CSS, Sass, Less, or Tailwind integration, then attach the enhancement **after the input is mounted**:
+
+```html
+<label>
+  <input id="notifications" class="slidebox" type="checkbox" role="switch" name="notifications">
+  Enable notifications
+</label>
+```
 
-## Run locally
+```js
+import "@monabbous/slidebox/dist/css/slidebox.css"; // Omit for Sass, Less, or Tailwind.
+import { enhanceSlidebox } from "@monabbous/slidebox/experimental/drag.mjs";
 
-Clone this repository, then serve its root directory:
+const input = document.querySelector("#notifications");
+const disableDragging = enhanceSlidebox(input, { threshold: 5 });
 
-```bash
-python3 -m http.server 8080
+// Before removing the input, or when disabling this experimental feature:
+// disableDragging();
 ```
 
-Open `http://localhost:8080`. The lab uses plain HTML, CSS, and JavaScript, without a build step.
+The JavaScript and drag styles must come from the **same package version**. Sass and Less mixins also include the necessary styles, so your checkbox can use a custom class instead of `.slidebox`.
 
-## Playground
+### Behavior and configuration
 
-- Adjust track width, thumb spacing, press deformation, and transition duration.
-- Change easing family and direction (In, Out, or In-Out), including Elastic and Bounce.
-- Compare Slidebox against native controls in light and dark schemes.
-- Choose browser-default, CSS system, nabous.dev, or custom colors.
-- Copy complete CSS, Tailwind v4 `@utility` CSS, or configuration variables.
+- `threshold` is the horizontal movement, in CSS pixels, required to begin dragging. Default: `5`. Must be a finite, non-negative number.
+- The thumb follows the pointer; its trailing edge stretches and relaxes using `--slidebox-deform` and `--slidebox-duration`. Set `--slidebox-deform: 0` to disable stretching. Reduced-motion preferences also disable drag stretching.
+- Releasing at or beyond the midpoint checks the input; releasing before it unchecks it. A changed state emits one bubbling `input` event followed by one bubbling `change` event. Drag movement alone does not emit either event.
+- Normal clicks, label clicks, Space-key activation, form values, and form resets remain native. A completed drag suppresses its following click to prevent a second toggle. No synthetic `click` is emitted for a drag.
+- RTL reverses the gesture direction. Disabled inputs, including those inside a disabled fieldset, cannot be dragged.
+- Vertical touch gestures remain available for scrolling, and pinch zoom remains enabled. Cancellation or lost pointer capture abandons the gesture without committing it.
+- Call the returned cleanup function to stop dragging and restore temporary styles. Cleanup can be called repeatedly. Disabling it during a drag cancels that drag.
+- Repeated calls for the same input return its existing cleanup function. To change `threshold`, clean up and initialize again.
 
-Chromium currently lacks support for the `AccentColor` CSS color keyword. In browser-default mode, the custom thumb uses a blue approximation in light mode and `SelectedItem` in dark mode, while native controls retain `accent-color: auto`. Browsers that support `AccentColor` use it automatically.
+Use normal checkbox bindings in your framework. In React, for example, initialize from a ref and return cleanup from an effect:
 
-Controls can be adjusted without triggering transition animations. The selected duration is restored after two animation frames.
+```jsx
+import { useEffect, useRef, useState } from "react";
+import { enhanceSlidebox } from "@monabbous/slidebox/experimental/drag.mjs";
+
+function Notifications() {
+  const input = useRef(null);
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    const element = input.current;
+    // Native listeners also receive the enhancement's programmatic change event.
+    const sync = () => setEnabled(element.checked);
+    element.addEventListener("change", sync);
+    const destroy = enhanceSlidebox(element);
+    return () => {
+      destroy();
+      element.removeEventListener("change", sync);
+    };
+  }, []);
+
+  return (
+    <label>
+      <input ref={input} className="slidebox" type="checkbox" role="switch"
+        checked={enabled} onChange={event => setEnabled(event.target.checked)} />
+      Enable notifications
+    </label>
+  );
+}
+```
 
-The easing functions follow [easings.net](https://easings.net/). Elastic and Bounce use sampled CSS `linear()` timing functions.
+TypeScript declarations ship alongside `drag.mjs`. Importing the module is safe during server rendering, but calling `enhanceSlidebox()` requires a mounted checkbox in a browser supporting Pointer Events and pointer capture. Use a sufficiently wide horizontal Slidebox (width ratio greater than 1). Test touch, scrolling, and your framework's controlled-input behavior before adopting it in production; vertical switches are not supported.
+
+Try it in the playground under **03 / Experimental → Enable pointer dragging**. Reset turns the option off. The playground's glass lighting is separate and is not shipped as part of the drag module.
+
+## Development
+
+```sh
+npm ci
+npm run build
+npm test
+npm pack --dry-run
+```
+
+The build extracts component rules from `style.css` and generates CSS, Sass, Less, and Tailwind rules. Tests compile both mixins and the plugin with Tailwind v3 and v4, and check the drag module's lifecycle.
+
+For real-browser drag and playground checks:
+
+```sh
+npx playwright install chromium
+npm run test:browser
+```
 
-## Original Slidebox package
+These run in Chromium; other browsers and devices still need testing. The lab itself is plain HTML/CSS/JavaScript; serve the repository with `python3 -m http.server 8080` and open `http://localhost:8080`.
 
-The original Sass package, compiled CSS, package manifests, and example are preserved in [`legacy/`](legacy/). See the [legacy README](legacy/README.md) for the previous installation instructions.
+Releases use the manual [Publish to npm](.github/workflows/publish-npm.yml) workflow on `main`, with npm trusted publishing through the `production` environment. Choose a version bump for a new release, or enable `publish_existing_version` to retry the current version without a bump or new tag.
 
-[Source](https://github.com/monabbous/slidebox) · [nabous.dev](https://nabous.dev)
+The original implementation is preserved in [`legacy/`](legacy/).

package/dist/css/slidebox.css

@@ -1,13 +1,13 @@
 .slidebox {
-  --_container-width-ratio: 2;
-  --_thumb-spacing-ratio: .33;
-  --_deform: .1;
-  --_duration: 200ms;
-  --_easing-function: ease-in-out;
-  --_track: Field;
-  --_border: ButtonBorder;
-  --_off: FieldText;
-  --_on: light-dark(#0b75ff, SelectedItem);
+  --_container-width-ratio: var(--slidebox-width, 2);
+  --_thumb-spacing-ratio: var(--slidebox-spacing, .33);
+  --_deform: var(--slidebox-deform, .1);
+  --_duration: var(--slidebox-duration, 200ms);
+  --_easing-function: 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)));
   appearance: none;
   -webkit-appearance: none;
   box-sizing: border-box;
@@ -16,7 +16,7 @@
   justify-content: center;
   width: calc(1em * var(--_container-width-ratio));
   height: 1em;
-  font-size: 54px;
+  font-size: var(--slidebox-size, 54px);
   padding: 0;
   border: 1px solid var(--_border);
   border-radius: 100vw;
@@ -24,7 +24,7 @@
   cursor: pointer;
 }
 @supports (color: AccentColor) {
-  .slidebox { --_on: AccentColor; }
+  .slidebox { --_accent: AccentColor; }
 }
 .slidebox::after {
   --_start: 0; --_end: 1;
@@ -50,6 +50,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/less/slidebox.less

@@ -0,0 +1,79 @@
+// Generated by scripts/build.mjs.
+.slidebox-option(@name; @value) when not (@value = false) {
+  --slidebox-@{name}: @value;
+}
+.slidebox(@width: false; @spacing: false; @deform: false; @duration: false; @easing: false; @track: false; @border: false; @off: false; @on: false; @size: false) {
+  .slidebox-option(width; @width);
+  .slidebox-option(spacing; @spacing);
+  .slidebox-option(deform; @deform);
+  .slidebox-option(duration; @duration);
+  .slidebox-option(easing; @easing);
+  .slidebox-option(track; @track);
+  .slidebox-option(border; @border);
+  .slidebox-option(off; @off);
+  .slidebox-option(on; @on);
+  .slidebox-option(size; @size);
+  & {
+    --_container-width-ratio: var(--slidebox-width, 2);
+    --_thumb-spacing-ratio: var(--slidebox-spacing, .33);
+    --_deform: var(--slidebox-deform, .1);
+    --_duration: var(--slidebox-duration, 200ms);
+    --_easing-function: 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)));
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(1em * var(--_container-width-ratio));
+    height: 1em;
+    font-size: var(--slidebox-size, 54px);
+    padding: 0;
+    border: 1px solid var(--_border);
+    border-radius: 100vw;
+    background: var(--_track);
+    cursor: pointer;
+  }
+  @supports (color: AccentColor) {
+    & { --_accent: AccentColor; }
+  }
+  &::after {
+    --_start: 0; --_end: 1;
+    content: "";
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    width: calc((1 - var(--_thumb-spacing-ratio)) * 1em);
+    height: calc((1 - var(--_thumb-spacing-ratio)) * 1em);
+    margin-block: calc(var(--_thumb-spacing-ratio) * .5em);
+    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;
+    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));
+  }
+  &:checked::after {
+    --_start: 1; --_end: 0;
+    background: var(--_on);
+    transition-delay: 0s, calc(var(--_duration) * var(--_deform)), 0s;
+  }
+  &:not(:checked):active::after { --_end: calc(1 - var(--_deform)); }
+  &:checked:active::after { --_start: calc(1 - var(--_deform)); }
+  &:disabled { cursor: not-allowed; opacity: .5; }
+  &[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) {
+    & { --_track: Field; --_border: ButtonBorder; --_off: FieldText; --_on: Highlight; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    &::after { transition-duration: .01ms; transition-delay: 0ms; }
+  }
+  }

package/package.json

@@ -1,17 +1,29 @@
 {
   "name": "@monabbous/slidebox",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Elastic, system-color-aware CSS checkbox switch.",
   "license": "ISC",
   "style": "./dist/css/slidebox.css",
   "sass": "./scss/slidebox.scss",
+  "less": "./less/slidebox.less",
   "files": [
     "dist/css/slidebox.css",
-    "scss/slidebox.scss"
+    "scss/",
+    "less/",
+    "tailwind/",
+    "experimental/"
   ],
   "publishConfig": {
     "access": "public"
   },
+  "peerDependencies": {
+    "tailwindcss": ">=3.4.0 <5"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/monabbous/slidebox.git"
@@ -23,6 +35,7 @@
   "scripts": {
     "build": "node scripts/build.mjs",
     "test": "node --test tests/*.test.mjs",
+    "test:browser": "playwright test",
     "prepack": "npm run build"
   },
   "keywords": [
@@ -34,5 +47,14 @@
     "scss",
     "elastic",
     "system-colors"
-  ]
+  ],
+  "devDependencies": {
+    "@playwright/test": "^1.64.1",
+    "@tailwindcss/node": "^4.3.3",
+    "less": "^4.9.1",
+    "postcss": "^8.5.32",
+    "sass": "^1.107.1",
+    "tailwindcss": "^3.4.19",
+    "tailwindcss-v4": "npm:tailwindcss@^4.3.3"
+  }
 }

package/scss/_mixins.scss

@@ -0,0 +1,73 @@
+// Generated by scripts/build.mjs.
+@use "sass:map";
+
+$defaults: () !default;
+
+@mixin slidebox($options: ()) {
+  @each $name, $value in map.merge($defaults, $options) {
+    --slidebox-#{$name}: #{$value};
+  }
+  & {
+    --_container-width-ratio: var(--slidebox-width, 2);
+    --_thumb-spacing-ratio: var(--slidebox-spacing, .33);
+    --_deform: var(--slidebox-deform, .1);
+    --_duration: var(--slidebox-duration, 200ms);
+    --_easing-function: 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)));
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(1em * var(--_container-width-ratio));
+    height: 1em;
+    font-size: var(--slidebox-size, 54px);
+    padding: 0;
+    border: 1px solid var(--_border);
+    border-radius: 100vw;
+    background: var(--_track);
+    cursor: pointer;
+  }
+  @supports (color: AccentColor) {
+    & { --_accent: AccentColor; }
+  }
+  &::after {
+    --_start: 0; --_end: 1;
+    content: "";
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    width: calc((1 - var(--_thumb-spacing-ratio)) * 1em);
+    height: calc((1 - var(--_thumb-spacing-ratio)) * 1em);
+    margin-block: calc(var(--_thumb-spacing-ratio) * .5em);
+    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;
+    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));
+  }
+  &:checked::after {
+    --_start: 1; --_end: 0;
+    background: var(--_on);
+    transition-delay: 0s, calc(var(--_duration) * var(--_deform)), 0s;
+  }
+  &:not(:checked):active::after { --_end: calc(1 - var(--_deform)); }
+  &:checked:active::after { --_start: calc(1 - var(--_deform)); }
+  &:disabled { cursor: not-allowed; opacity: .5; }
+  &[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) {
+    & { --_track: Field; --_border: ButtonBorder; --_off: FieldText; --_on: Highlight; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    &::after { transition-duration: .01ms; transition-delay: 0ms; }
+  }
+  }

package/scss/slidebox.scss

@@ -1,58 +1,2 @@
-.slidebox {
-  --_container-width-ratio: 2;
-  --_thumb-spacing-ratio: .33;
-  --_deform: .1;
-  --_duration: 200ms;
-  --_easing-function: ease-in-out;
-  --_track: Field;
-  --_border: ButtonBorder;
-  --_off: FieldText;
-  --_on: light-dark(#0b75ff, SelectedItem);
-  appearance: none;
-  -webkit-appearance: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(1em * var(--_container-width-ratio));
-  height: 1em;
-  font-size: 54px;
-  padding: 0;
-  border: 1px solid var(--_border);
-  border-radius: 100vw;
-  background: var(--_track);
-  cursor: pointer;
-}
-@supports (color: AccentColor) {
-  .slidebox { --_on: AccentColor; }
-}
-.slidebox::after {
-  --_start: 0; --_end: 1;
-  content: "";
-  display: block;
-  flex: 1 1 auto;
-  min-width: 0;
-  width: calc((1 - var(--_thumb-spacing-ratio)) * 1em);
-  height: calc((1 - var(--_thumb-spacing-ratio)) * 1em);
-  margin-block: calc(var(--_thumb-spacing-ratio) * .5em);
-  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;
-  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));
-}
-.slidebox:checked::after {
-  --_start: 1; --_end: 0;
-  background: var(--_on);
-  transition-delay: 0s, calc(var(--_duration) * var(--_deform)), 0s;
-}
-.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; }
-@media (forced-colors: active) {
-  .slidebox { --_track: Field; --_border: ButtonBorder; --_off: FieldText; --_on: Highlight; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .slidebox::after { transition-duration: .01ms; transition-delay: 0ms; }
-}
+@use "mixins";
+.slidebox { @include mixins.slidebox(); }

package/tailwind/index.cjs

@@ -0,0 +1,28 @@
+const plugin = require("tailwindcss/plugin");
+const rules = require("./rules.json");
+
+function flatten(colors, prefix = "") {
+  return Object.fromEntries(Object.entries(colors).flatMap(([key, value]) => {
+    const name = key === "DEFAULT" ? prefix : [prefix, key].filter(Boolean).join("-");
+    return typeof value === "object" && value !== null
+      ? Object.entries(flatten(value, name)) : [[name, value]];
+  }));
+}
+
+module.exports = plugin.withOptions((defaults = {}) => ({ addUtilities, matchUtilities, theme }) => {
+  const controls = ["size", "width", "spacing", "deform", "duration", "easing", "track", "border", "off", "on"];
+  for (const key of Object.keys(defaults)) {
+    if (!controls.includes(key)) throw new Error(`Unknown Slidebox control: ${key}`);
+  }
+  addUtilities({ ".slidebox": {
+    ...Object.fromEntries(Object.entries(defaults).map(([key, value]) => [`--slidebox-${key}`, String(value)])),
+    ...rules,
+  } });
+  for (const key of controls) {
+    let values = theme(`slidebox.${key}`, {});
+    if (["track", "border", "off", "on"].includes(key)) values = { ...flatten(theme("colors", {})), ...values };
+    if (key === "duration") values = { ...theme("transitionDuration", {}), ...values };
+    if (key === "easing") values = { ...theme("transitionTimingFunction", {}), ...values };
+    matchUtilities({ [`slidebox-${key}`]: value => ({ [`--slidebox-${key}`]: value }) }, { values });
+  }
+});

package/tailwind/rules.json

@@ -0,0 +1,82 @@
+{
+  "--_container-width-ratio": "var(--slidebox-width, 2)",
+  "--_thumb-spacing-ratio": "var(--slidebox-spacing, .33)",
+  "--_deform": "var(--slidebox-deform, .1)",
+  "--_duration": "var(--slidebox-duration, 200ms)",
+  "--_easing-function": "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)))",
+  "appearance": "none",
+  "-webkit-appearance": "none",
+  "box-sizing": "border-box",
+  "display": "inline-flex",
+  "align-items": "center",
+  "justify-content": "center",
+  "width": "calc(1em * var(--_container-width-ratio))",
+  "height": "1em",
+  "font-size": "var(--slidebox-size, 54px)",
+  "padding": "0",
+  "border": "1px solid var(--_border)",
+  "border-radius": "100vw",
+  "background": "var(--_track)",
+  "cursor": "pointer",
+  "@supports (color: AccentColor)": {
+    "&": {
+      "--_accent": "AccentColor"
+    }
+  },
+  "&::after": {
+    "--_start": "0",
+    "--_end": "1",
+    "content": "\"\"",
+    "display": "block",
+    "flex": "1 1 auto",
+    "min-width": "0",
+    "width": "calc((1 - var(--_thumb-spacing-ratio)) * 1em)",
+    "height": "calc((1 - var(--_thumb-spacing-ratio)) * 1em)",
+    "margin-block": "calc(var(--_thumb-spacing-ratio) * .5em)",
+    "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",
+    "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))"
+  },
+  "&:checked::after": {
+    "--_start": "1",
+    "--_end": "0",
+    "background": "var(--_on)",
+    "transition-delay": "0s, calc(var(--_duration) * var(--_deform)), 0s"
+  },
+  "&:not(:checked):active::after": {
+    "--_end": "calc(1 - var(--_deform))"
+  },
+  "&:checked:active::after": {
+    "--_start": "calc(1 - var(--_deform))"
+  },
+  "&:disabled": {
+    "cursor": "not-allowed",
+    "opacity": ".5"
+  },
+  "&[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)": {
+    "&": {
+      "--_track": "Field",
+      "--_border": "ButtonBorder",
+      "--_off": "FieldText",
+      "--_on": "Highlight"
+    }
+  },
+  "@media (prefers-reduced-motion: reduce)": {
+    "&::after": {
+      "transition-duration": ".01ms",
+      "transition-delay": "0ms"
+    }
+  }
+}