@agencecinq/slider 6.0.0

package/README.md

@@ -0,0 +1,473 @@
+[![](https://img.shields.io/npm/v/@agencecinq/slider)](https://www.npmjs.com/package/@agencecinq/slider)
+[![](https://img.shields.io/npm/dm/@agencecinq/slider)](https://www.npmjs.com/package/@agencecinq/slider)
+
+# @agencecinq/slider
+
+> Accessible, WAI-ARIA slider as a lightweight Web Component.
+
+A slider lets users pick a value within a range by moving a thumb along a rail.
+`<cinq-slider>` is the **rail** (geometry + CSS variables). A nested
+`[role="slider"]` thumb is the focusable control: ARIA bounds, labels, and
+keyboard focus live there.
+
+Implementation follows the
+[WAI-ARIA Authoring Practices slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
+Inspired by [`@19h47/slider`](https://github.com/19h47/19h47-slider).
+
+Two custom elements in one package:
+
+| Tag | Pattern | Class |
+| --- | ------- | ----- |
+| `<cinq-slider>` | [Single-thumb slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) | `Slider` |
+| `<cinq-slider-range>` | [Multi-thumb range](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/) | `SliderRange` |
+
+Both support **horizontal** and **vertical** layout (`aria-orientation` on the thumb). Horizontal sliders mirror under RTL; vertical axis is unchanged by `dir`.
+
+## Installation
+
+```bash
+pnpm add @agencecinq/slider
+```
+
+## Usage
+
+```html
+<label id="volume-label" for="volume-slider">Volume</label>
+<cinq-slider class="volume-rail">
+  <button
+    type="button"
+    id="volume-slider"
+    role="slider"
+    tabindex="0"
+    aria-labelledby="volume-label"
+    aria-orientation="horizontal"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow="50"
+    aria-valuetext="50%"
+  ></button>
+</cinq-slider>
+```
+
+```js
+import "@agencecinq/slider";
+```
+
+Importing `@agencecinq/slider` registers **both** custom elements automatically.
+No manual `init()` call required.
+
+> **HTML is the source of truth.** The component will not auto-set `role`,
+> auto-migrate attributes, or warn about missing labels. Use an a11y linter
+> (axe-core, Lighthouse) to catch invalid markup.
+
+The package implements APG behaviour (keyboard, pointer, ARIA sync, events).
+**Layout, hit area, contrast, and focus rings are your CSS.** See
+[Consumer styling](#consumer-styling) below.
+
+### Required markup, single (`<cinq-slider>`)
+
+Author contract (not enforced in JS, use an a11y linter). The component **does** throw if thumb count ≠ 1.
+
+| Attribute / element | Expected | Role |
+| ------------------- | -------- | ---- |
+| `<cinq-slider>` | **Yes** | Rail / bounds container. |
+| One `[role="slider"]` | **Yes** | Focusable thumb (`$thumb`). |
+| `tabindex="0"` | **Yes** | On the thumb. |
+| `aria-orientation="horizontal"` or `"vertical"` | **Yes** | On the thumb. Geometry follows the declared axis. |
+| `aria-valuemin` / `aria-valuemax` / `aria-valuenow` | **Yes** | Read with fallbacks (`0` / `100`) if omitted. |
+| `aria-label` or `aria-labelledby` | **Yes** | On the thumb, per APG. |
+| `aria-valuetext` | Recommended | Updated by the component when `formatValue` is set. |
+
+Prefer `<button type="button">` for a clear focus target.
+
+### Range (`<cinq-slider-range>`)
+
+APG order: **first thumb in DOM = max handle**, **second = min handle**.
+
+```html
+<label id="price-label">Price range</label>
+<cinq-slider-range class="price-rail" aria-labelledby="price-label">
+  <button
+    type="button"
+    role="slider"
+    tabindex="0"
+    aria-label="Maximum price"
+    aria-orientation="horizontal"
+    aria-valuemin="100"
+    aria-valuemax="1000"
+    aria-valuenow="800"
+  ></button>
+  <button
+    type="button"
+    role="slider"
+    tabindex="0"
+    aria-label="Minimum price"
+    aria-orientation="horizontal"
+    aria-valuemin="100"
+    aria-valuemax="1000"
+    aria-valuenow="200"
+  ></button>
+</cinq-slider-range>
+```
+
+Range track fill between thumbs:
+
+```css
+cinq-slider-range::after {
+  inset-inline-start: calc(
+    var(--thumb-size) / 2 + var(--min-ratio) * (100% - var(--thumb-size))
+  );
+  width: calc(
+    (var(--max-ratio) - var(--min-ratio)) * (100% - var(--thumb-size))
+  );
+  border-radius: 0; /* square ends between two handles */
+}
+```
+
+See [Positioning with CSS variables](#positioning-with-css-variables) for the full pattern (rail, fill, thumbs).
+
+### Options
+
+| Attribute | Type | Default | Description |
+| --------- | ---- | ------- | ----------- |
+| `data-step` | number | `1` | Arrow key increment; values snap to this step (pointer + keyboard). |
+| `data-page` | number | `10` | Page Up / Page Down increment. |
+
+Thumb and track layout are **consumer CSS**. The component only updates CSS custom properties on the host (see [Styling hooks](#styling-hooks)).
+
+### API, `<cinq-slider>` (`Slider`)
+
+| Method | Description |
+| ------ | ----------- |
+| `setValue(value, options?)` | Clamp, sync, dispatch unless `emit: false`. |
+| `sync()` | Re-read ARIA and re-apply geometry. |
+| `rect()` | Host `DOMRect` (rail). |
+| `init()` / `destroy()` | Bind / unbind for DOM mutation. |
+
+| Property | Description |
+| -------- | ----------- |
+| `$thumb` | The `[role="slider"]` element. |
+| `value` / `min` / `max` / `ratio` | From thumb ARIA. |
+| `step` / `page` | From host `data-step` / `data-page`. |
+| `formatValue` | `(value) => string` for `aria-valuetext`. |
+
+### API, `<cinq-slider-range>` (`SliderRange`)
+
+| Method | Description |
+| ------ | ----------- |
+| `setValues(min, max, options?)` | Anti-cross clamp, sync, dispatch unless `emit: false`. |
+| `sync()` | Re-read ARIA and re-apply geometry. |
+| `rect()` | Host `DOMRect` (rail). |
+| `init()` / `destroy()` | Bind / unbind for DOM mutation. |
+
+| Property | Description |
+| -------- | ----------- |
+| `$max` / `$min` | Thumbs (first / second in DOM). |
+| `min` / `max` | Current selected values. |
+| `boundsMin` / `boundsMax` | Global bounds from initial markup. |
+| `step` / `page` | From host `data-step` / `data-page`. |
+| `formatValue` | `(value) => string` for both thumbs. |
+
+### Keyboard
+
+Matches [APG slider keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/slider/#keyboard-interaction).
+Focus must be on the thumb.
+
+**Range (`<cinq-slider-range>`):** both thumbs are in the tab sequence (APG
+multi-thumb). Use **Tab** / **Shift+Tab** to move focus between the max handle
+(first in DOM) and the min handle (second). Arrow keys adjust the **focused**
+thumb only. Tab order follows DOM order, not visual position when handles
+cross. Style `:focus-visible` and raise `z-index` on the focused thumb so the
+ring stays visible (see playground `[data-active]` pattern).
+
+**Vertical:** Up Arrow increases, Down Arrow decreases. **RTL does not apply**
+to the vertical axis (same as `@19h47/slider`).
+
+| Key | Horizontal LTR | Horizontal RTL | Vertical |
+| --- | -------------- | -------------- | -------- |
+| Right Arrow | + `data-step` | − `data-step` | + `data-step` |
+| Left Arrow | − `data-step` | + `data-step` | − `data-step` |
+| Up Arrow | + `data-step` | + `data-step` | + `data-step` |
+| Down Arrow | − `data-step` | − `data-step` | − `data-step` |
+| Home / End | min / max (single); APG multi-thumb rules (range) | same | same |
+| Page Up / Down | + / − `data-page` | same | same |
+
+### RTL
+
+Set `dir="rtl"` on the host or an ancestor for **horizontal** sliders. Thumb
+position, pointer mapping, and horizontal arrow keys mirror (same as
+`@agencecinq/tabs`). Vertical sliders ignore `direction` on the value axis.
+
+### Events
+
+Both hosts fire `slider:change` (constant `EVENTS.SLIDER_CHANGE`) after ARIA sync.
+
+Detail: `{ min, max, $thumb }`. Single thumb: `min === max`. Range: current
+endpoints. `$thumb` is always the handle that moved or has focus.
+
+```js
+import { EVENTS } from "@agencecinq/utils";
+
+document.querySelector("cinq-slider")?.addEventListener(
+  EVENTS.SLIDER_CHANGE,
+  (event) => {
+    const { min, max, $thumb } = event.detail;
+    console.log(min, max, $thumb);
+  },
+);
+
+document.querySelector("cinq-slider-range")?.addEventListener(
+  EVENTS.SLIDER_CHANGE,
+  (event) => {
+    const { min, max, $thumb } = event.detail;
+    const range = event.currentTarget;
+    const which =
+      $thumb === range.$min ? "min" : $thumb === range.$max ? "max" : null;
+    console.log(min, max, which);
+  },
+);
+```
+
+### Styling hooks
+
+| Hook | Host | Description |
+| ---- | ---- | ----------- |
+| `[dragging]` | Both | Pointer drag in progress |
+| `--value` / `--ratio` | `<cinq-slider>` | Current value and semantic ratio `0` to `1` |
+| `--min` / `--max` | `<cinq-slider-range>` | Current range values |
+| `--min-ratio` / `--max-ratio` | `<cinq-slider-range>` | Semantic ratios `0` to `1` within global bounds |
+| `[data-active="min"\|"max"]` | `<cinq-slider-range>` | Last focused / dragged thumb |
+| `[data-collapsed]` | `<cinq-slider-range>` | Set when `min === max` (side-by-side thumb CSS) |
+
+Ratios are **semantic**: `0` = global minimum, `1` = global maximum, unchanged in RTL. Use **logical properties** (`inset-inline-start`, etc.) so layout mirrors with `dir="rtl"`.
+
+### Positioning with CSS variables
+
+The package never positions thumbs or track in JS. It updates ARIA and sets the variables above on the **host**. You style the rail, fill, and thumbs in your stylesheet.
+
+Define a thumb size on the host (name is yours, the lib does not set it):
+
+```css
+cinq-slider,
+cinq-slider-range {
+  position: relative;
+  --thumb-size: 2.75rem; /* hit area width/height of [role="slider"] */
+}
+```
+
+The usable track is shorter than the host by one thumb (single) or two thumbs (range). Inset the rail and map ratios over `(100% - var(--thumb-size))` (or `2 * var(--thumb-size)` for range).
+
+#### Single thumb (`<cinq-slider>`)
+
+**Variables:** `--value` (number), `--ratio` (`0` to `1`).
+
+**Track rail** (full width, gray):
+
+```css
+cinq-slider::before {
+  content: "";
+  position: absolute;
+  inset-inline: calc(var(--thumb-size) / 2);
+  top: 50%;
+  block-size: 0.375rem;
+  border-radius: 9999px;
+  background: #e5e7eb;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+```
+
+**Track fill** (from start to current value):
+
+```css
+cinq-slider::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: calc(var(--thumb-size) / 2);
+  top: 50%;
+  width: calc(var(--ratio) * (100% - var(--thumb-size)));
+  block-size: 0.375rem;
+  border-radius: 9999px;
+  background: #111827;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+```
+
+**Thumb** (centered on ratio):
+
+```css
+cinq-slider [role="slider"] {
+  position: absolute;
+  top: calc(50% - var(--thumb-size) / 2);
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  inset-inline-start: calc(var(--ratio) * (100% - var(--thumb-size)));
+}
+```
+
+Alternative: keep `inset-inline-start: 0` and use `translate: calc(var(--ratio) * (100% - var(--thumb-size))) 0`.
+
+#### Range (`<cinq-slider-range>`)
+
+**Variables:** `--min`, `--max`, `--min-ratio`, `--max-ratio`.
+
+APG DOM order: **`:first-child` = max handle**, **`:last-child` = min handle**.
+
+**Track fill** (segment between the two values):
+
+```css
+cinq-slider-range::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: calc(
+    var(--thumb-size) / 2 + var(--min-ratio) * (100% - var(--thumb-size))
+  );
+  top: 50%;
+  width: calc(
+    (var(--max-ratio) - var(--min-ratio)) * (100% - var(--thumb-size))
+  );
+  block-size: 0.375rem;
+  border-radius: 0;
+  background: #111827;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+```
+
+**Thumbs:**
+
+```css
+cinq-slider-range [role="slider"]:first-child {
+  inset-inline-start: calc(var(--max-ratio) * (100% - var(--thumb-size)));
+  z-index: 2;
+}
+
+cinq-slider-range [role="slider"]:last-child {
+  inset-inline-start: calc(var(--min-ratio) * (100% - var(--thumb-size)));
+}
+```
+
+**Collapsed range** (`min === max`): the host gets `[data-collapsed]`. Offset the min
+handle by one thumb width on the low side so both handles stay visible and
+selectable (consumer CSS):
+
+```css
+cinq-slider-range[data-collapsed] [role="slider"]:last-child {
+  inset-inline-start: calc(
+    var(--min-ratio) * (100% - var(--thumb-size)) - var(--thumb-size)
+  );
+}
+
+[dir="rtl"] cinq-slider-range[data-collapsed] [role="slider"]:last-child {
+  inset-inline-start: calc(
+    var(--min-ratio) * (100% - var(--thumb-size)) + var(--thumb-size)
+  );
+}
+
+cinq-slider-range:has([aria-orientation="vertical"])[data-collapsed] [role="slider"]:last-child {
+  inset-block-end: calc(
+    var(--min-ratio) * (100% - var(--thumb-size)) - var(--thumb-size)
+  );
+}
+```
+
+When handles differ, raise the active thumb with `[data-active]`:
+
+```css
+cinq-slider-range[data-active="min"] [role="slider"]:last-child,
+cinq-slider-range[data-active="max"] [role="slider"]:first-child {
+  z-index: 3;
+}
+```
+
+#### Vertical, `<cinq-slider>`
+
+Semantic `--ratio` is unchanged (`0` = min, `1` = max). Map along the block
+axis with min at the bottom and max at the top (see **Potion potency** in the playground):
+
+```css
+cinq-slider:has([aria-orientation="vertical"]) {
+  width: var(--thumb-size);
+  height: 12rem;
+}
+
+cinq-slider:has([aria-orientation="vertical"])::before {
+  inset-block: calc(var(--thumb-size) / 2);
+  inset-inline-start: 50%;
+  inline-size: 0.375rem;
+  transform: translateX(-50%);
+}
+
+cinq-slider:has([aria-orientation="vertical"])::after {
+  inset-inline-start: 50%;
+  inset-block-end: calc(var(--thumb-size) / 2);
+  block-size: calc(var(--ratio) * (100% - var(--thumb-size)));
+  inline-size: 0.375rem;
+  transform: translateX(-50%);
+}
+
+cinq-slider [aria-orientation="vertical"] {
+  inset-inline-start: calc(50% - var(--thumb-size) / 2);
+  inset-block-end: calc(var(--ratio) * (100% - var(--thumb-size)));
+}
+```
+
+Range vertical thumbs and fill use `--min-ratio` / `--max-ratio` on
+`inset-block-end` the same way. See the docs playground **HP comfort band** demo.
+
+#### Interaction hooks
+
+```css
+cinq-slider[dragging] [role="slider"],
+cinq-slider-range[dragging] [role="slider"] {
+  cursor: grabbing;
+}
+
+cinq-slider [role="slider"]:focus-visible,
+cinq-slider-range [role="slider"]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 3px;
+}
+```
+
+Lead offsets for multi-thumb pointer mapping follow `@19h47/slider` (horizontal:
+max thumb; vertical: min thumb). The [interactive docs](https://agencecinq.github.io/ui/components/slider/) playground is the reference implementation.
+
+### Consumer styling
+
+The component does **not** enforce thumb size, contrast, or touch targets.
+
+- **Touch targets:** WCAG recommends at least **44×44 CSS px** for pointer
+  targets. You can use a large hit area with a smaller visual knob (`::before`).
+- **Focus:** use `:focus-visible` on the thumb.
+- **Touch AT:** the APG [warns](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)
+  that some touch-based assistive technologies may not yet synthesize the key
+  events custom sliders need. Test with VoiceOver / TalkBack on real devices.
+
+### `formatValue`
+
+```js
+const host = document.querySelector("cinq-slider");
+host.formatValue = (value) => `${value}%`;
+```
+
+### Runtime DOM mutation
+
+```js
+host.destroy();
+// mutate light DOM...
+host.init();
+```
+
+## Build setup
+
+```bash
+pnpm -C packages/slider build
+```
+
+## Acknowledgments
+
+- [WAI-ARIA Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)
+- [`@19h47/slider`](https://github.com/19h47/19h47-slider)
+- [Interactive docs](https://agencecinq.github.io/ui/components/slider/)

package/dist/geometry.d.ts

@@ -0,0 +1,19 @@
+import { ActiveThumb } from './types.js';
+/** Semantic ratio in `[0, 1]` from value and bounds. */
+export declare const ratioFromValue: (value: number, min: number, max: number) => number;
+/** Value from semantic ratio. */
+export declare const valueFromRatio: (ratio: number, min: number, max: number) => number;
+/** Snap a value to the nearest step within `[min, max]`. */
+export declare const snapToStep: (value: number, min: number, max: number, step: number) => number;
+/** Single-thumb track length. */
+export declare const singleTrackLength: (railLength: number, thumbSize: number) => number;
+/** Multi-thumb track length (two thumbs). */
+export declare const multiTrackLength: (railLength: number, thumbSize: number) => number;
+/** Map pointer position to semantic ratio (single thumb). */
+export declare const ratioFromPointer: (clientCoord: number, rect: DOMRect, thumbSize: number, rtl: boolean, vertical: boolean) => number;
+/**
+ * Map pointer position to value (multi-thumb, horizontal or vertical).
+ * `clientCoord` is `clientX` or `clientY`. RTL mirrors the horizontal axis.
+ */
+export declare const multiValueFromPointer: (clientCoord: number, rect: DOMRect, which: ActiveThumb, gmin: number, gmax: number, track: number, thumbSize: number, rtl: boolean, vertical: boolean) => number;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../src/geometry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,wDAAwD;AACxD,eAAO,MAAM,cAAc,GACzB,OAAO,MAAM,EACb,KAAK,MAAM,EACX,KAAK,MAAM,KACV,MAGF,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,cAAc,GACzB,OAAO,MAAM,EACb,KAAK,MAAM,EACX,KAAK,MAAM,KACV,MAAmC,CAAC;AAEvC,4DAA4D;AAC5D,eAAO,MAAM,UAAU,GACrB,OAAO,MAAM,EACb,KAAK,MAAM,EACX,KAAK,MAAM,EACX,MAAM,MAAM,KACX,MAOF,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,iBAAiB,GAC5B,YAAY,MAAM,EAClB,WAAW,MAAM,KAChB,MAA6C,CAAC;AAEjD,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,GAC3B,YAAY,MAAM,EAClB,WAAW,MAAM,KAChB,MAAiD,CAAC;AAoBrD,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,GAC3B,aAAa,MAAM,EACnB,MAAM,OAAO,EACb,WAAW,MAAM,EACjB,KAAK,OAAO,EACZ,UAAU,OAAO,KAChB,MAaF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAChC,aAAa,MAAM,EACnB,MAAM,OAAO,EACb,OAAO,WAAW,EAClB,MAAM,MAAM,EACZ,MAAM,MAAM,EACZ,OAAO,MAAM,EACb,WAAW,MAAM,EACjB,KAAK,OAAO,EACZ,UAAU,OAAO,KAChB,MAaF,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Slider } from './slider.js';
+export { SliderRange } from './slider-range.js';
+export type { ActiveThumb, Detail, FormatValue, SetValueOptions, SetValuesOptions, SliderChangeDetail, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EACV,WAAW,EACX,MAAM,EACN,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,387 @@
+//#region ../utils/dist/index.js
+var e = {
+	DRAWER_BEFORE_CLOSE: "drawer:before-close",
+	DRAWER_BEFORE_OPEN: "drawer:before-open",
+	DRAWER_CLOSE: "drawer:close",
+	DRAWER_OPEN: "drawer:open",
+	DRAWER_TOGGLE: "drawer:toggle",
+	MODAL_BEFORE_CLOSE: "modal:before-close",
+	MODAL_BEFORE_OPEN: "modal:before-open",
+	MODAL_CLOSE: "modal:close",
+	MODAL_OPEN: "modal:open",
+	MODAL_TOGGLE: "modal:toggle",
+	SPINBUTTON_CHANGE: "spinbutton:change",
+	DISCLOSURE_BUTTON_OPEN: "disclosure-button:open",
+	DISCLOSURE_BUTTON_CLOSE: "disclosure-button:close",
+	SWITCH_ACTIVATE: "switch:activate",
+	SWITCH_DEACTIVATE: "switch:deactivate",
+	ACCORDION_OPEN: "accordion:open",
+	ACCORDION_CLOSE: "accordion:close",
+	COMBOBOX_LOADING: "combobox:loading",
+	COMBOBOX_LOADED: "combobox:loaded",
+	COMBOBOX_UPDATE: "combobox:update",
+	COMBOBOX_SUBMIT: "combobox:submit",
+	COMBOBOX_EMPTY: "combobox:empty",
+	WINDOWSPLITTER_CHANGE: "windowsplitter:change",
+	SLIDER_CHANGE: "slider:change",
+	CALENDAR_CHANGE: "calendar:change",
+	TABS_BEFORE_ACTIVATE: "tabs:before-activate",
+	TABS_ACTIVATE: "tabs:activate",
+	TABS_DELETE: "tabs:delete",
+	CART_BEFORE_ADD: "cart:before-add",
+	CART_BEFORE_UPDATE: "cart:before-update",
+	CART_UPDATE: "cart:update",
+	VARIANT_CHANGE: "variant:change"
+}, t = (e, t, n, r = {}) => {
+	let { bubbles: i = !0, cancelable: a = !0 } = r;
+	return e.dispatchEvent(new CustomEvent(t, {
+		bubbles: i,
+		cancelable: a,
+		detail: n
+	}));
+}, n = (e, t) => {
+	if (e == null || e === "") return t;
+	let n = Number(e);
+	return Number.isFinite(n) ? n : t;
+}, r = (e, t) => {
+	let n = null, r = null, i = () => {
+		r && e(...r), n = null;
+	};
+	return (...e) => {
+		r = e, n ||= setTimeout(i, t);
+	};
+}, i = document.documentElement, { body: a } = document;
+i.hasAttribute("data-debug"), window.addEventListener("pointermove", r(({ x: e, y: t }) => {}, 100), { passive: !0 }), window.matchMedia("(width >= 64rem)"), window.matchMedia("(min-width: 1280px)"), window.matchMedia("(min-width: 1440px)"), window.matchMedia("(min-width: 1920px)");
+var o = (e, t, n) => Math.min(Math.max(e, t), n), s = (e, t, n) => {
+	let r = n - t;
+	return r > 0 ? (e - t) / r : 0;
+}, c = (e, t, n) => t + e * (n - t), l = (e, t, n, r) => o(r <= 0 ? e : t + Math.round((e - t) / r) * r, t, n), u = (e, t) => Math.max(0, e - t), d = (e, t) => Math.max(0, e - 2 * t), f = (e, t, n, r) => r || n ? e === "min" ? t : 0 : e === "max" ? t : 0, p = (e, t, n, r, i) => {
+	let a = i ? t.height : t.width, s = i ? t.top : t.left, c = u(a, n);
+	if (c <= 0) return 0;
+	let l = o((e - s - n / 2) / c, 0, 1);
+	return i || r ? 1 - l : l;
+}, m = (e, t, n, r, i, a, s, c, l) => {
+	let u = f(n, s, c, l), d = o(e - (l ? t.top : t.left) - u, 0, a), p = a > 0 ? d / a : 0, m = i - r;
+	return Math.round(l || c ? i - m * p : r + m * p);
+}, h = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	constructor(e, t, n, r = !1) {
+		this.#e = e, this.#t = t, this.#n = n, this.#r = r;
+	}
+	delta(e) {
+		let t = this.#e, n = -this.#e, r = this.#t, i = -this.#t;
+		if (this.#r) {
+			let r = {
+				ArrowUp: t,
+				ArrowDown: n,
+				ArrowRight: t,
+				ArrowLeft: n
+			};
+			if (e in r) return {
+				delta: r[e],
+				preventDefault: !0
+			};
+		} else {
+			let r = this.#n ? {
+				ArrowLeft: t,
+				ArrowRight: n,
+				ArrowUp: t,
+				ArrowDown: n
+			} : {
+				ArrowRight: t,
+				ArrowLeft: n,
+				ArrowUp: t,
+				ArrowDown: n
+			};
+			if (e in r) return {
+				delta: r[e],
+				preventDefault: !0
+			};
+		}
+		return e === "PageUp" ? {
+			delta: r,
+			preventDefault: !0
+		} : e === "PageDown" ? {
+			delta: i,
+			preventDefault: !0
+		} : e === "Home" || e === "End" ? {
+			delta: 0,
+			preventDefault: !0
+		} : null;
+	}
+	static isHome(e) {
+		return e === "Home";
+	}
+	static isEnd(e) {
+		return e === "End";
+	}
+}, g = class extends HTMLElement {
+	static observedAttributes = ["data-step", "data-page"];
+	step = 1;
+	page = 10;
+	#e;
+	#t = null;
+	#n = null;
+	onThumbFocus(e) {}
+	get formatValue() {
+		return this.#e;
+	}
+	set formatValue(e) {
+		this.#e = e, this.syncValuetext();
+	}
+	get isRtl() {
+		return getComputedStyle(this).direction === "rtl";
+	}
+	get isVertical() {
+		return this.orientation === "vertical";
+	}
+	connectedCallback() {
+		this.init();
+	}
+	disconnectedCallback() {
+		this.destroy();
+	}
+	attributeChangedCallback(e, t, r) {
+		if (e === "data-step") {
+			this.step = n(r, 1);
+			return;
+		}
+		e === "data-page" && (this.page = n(r, 10));
+	}
+	rect() {
+		return this.getBoundingClientRect();
+	}
+	observeResize() {
+		this.#t?.disconnect(), this.#t = new ResizeObserver(() => {
+			this.sync();
+		}), this.#t.observe(this);
+	}
+	disconnectResize() {
+		this.#t?.disconnect(), this.#t = null;
+	}
+	setValuetext(e, t) {
+		let n = this.formatValue ? this.formatValue(t) : String(t);
+		e.setAttribute("aria-valuetext", n);
+	}
+	bindThumb(e) {
+		e.tabIndex < 0 && !e.hasAttribute("tabindex") && (e.tabIndex = 0), e.style.touchAction = "none", e.addEventListener("keydown", this.#r), e.addEventListener("pointerdown", this.#a), e.addEventListener("pointermove", this.#o), e.addEventListener("pointerup", this.#s), e.addEventListener("pointercancel", this.#s), e.addEventListener("lostpointercapture", this.#s), e.addEventListener("focus", this.#i);
+	}
+	unbindThumb(e) {
+		e.removeEventListener("keydown", this.#r), e.removeEventListener("pointerdown", this.#a), e.removeEventListener("pointermove", this.#o), e.removeEventListener("pointerup", this.#s), e.removeEventListener("pointercancel", this.#s), e.removeEventListener("lostpointercapture", this.#s), e.removeEventListener("focus", this.#i), e.style.removeProperty("touch-action");
+	}
+	clearDragState() {
+		this.#n = null, this.removeAttribute("dragging");
+	}
+	#r = (e) => {
+		this.onKeydown(e);
+	};
+	#i = (e) => {
+		this.onThumbFocus(e);
+	};
+	#a = (e) => {
+		let t = e.currentTarget, { button: n, clientY: r, clientX: i, pointerId: a } = e;
+		if (n !== 0) return;
+		t.focus({ preventScroll: !0 }), e.preventDefault();
+		let { top: o, left: s, width: c, height: l } = t.getBoundingClientRect(), u = s + c / 2 - i;
+		this.isVertical && (u = o + l / 2 - r), this.#n = {
+			id: a,
+			offset: u,
+			$thumb: t
+		}, this.setAttribute("dragging", ""), t.setPointerCapture(a), this.commitPointerValue(e, t);
+	};
+	#o = (e) => {
+		if (!this.#n) return;
+		let { id: t, $thumb: n } = this.#n, { pointerId: r } = e;
+		r === t && (this.commitPointerValue(e, n), e.preventDefault());
+	};
+	#s = (e) => {
+		if (!this.#n) return;
+		let { id: t, $thumb: n } = this.#n, { pointerId: r } = e;
+		r === t && (this.#n = null, this.removeAttribute("dragging"), n.hasPointerCapture?.(t) && n.releasePointerCapture(t));
+	};
+	get offset() {
+		return this.#n?.offset ?? 0;
+	}
+}, _ = class extends g {
+	$thumb = null;
+	get orientation() {
+		return this.$thumb?.getAttribute("aria-orientation") ?? null;
+	}
+	get min() {
+		return n(this.$thumb?.getAttribute("aria-valuemin"), 0);
+	}
+	get max() {
+		return n(this.$thumb?.getAttribute("aria-valuemax"), 100);
+	}
+	get value() {
+		return n(this.$thumb?.getAttribute("aria-valuenow"), this.min);
+	}
+	get ratio() {
+		return s(this.value, this.min, this.max);
+	}
+	init() {
+		let e = this.querySelectorAll("[role=\"slider\"]");
+		if (e.length !== 1) throw Error("cinq-slider: exactly one [role=\"slider\"] thumb is required");
+		this.$thumb = e[0], this.step = n(this.getAttribute("data-step"), 1), this.page = n(this.getAttribute("data-page"), 10), this.bindThumb(this.$thumb), this.observeResize(), this.sync();
+	}
+	destroy() {
+		this.$thumb && this.unbindThumb(this.$thumb), this.disconnectResize(), this.clearDragState(), this.$thumb = null;
+	}
+	syncValuetext() {
+		this.$thumb && this.setValuetext(this.$thumb, this.value);
+	}
+	sync() {
+		this.#e(this.value, !1);
+	}
+	setValue(e, t = {}) {
+		let { emit: n = !0 } = t, r = l(e, this.min, this.max, this.step);
+		this.#e(r, n);
+	}
+	valueFromPointer(e, t) {
+		let { clientY: n, clientX: r } = e, i = this.getBoundingClientRect(), { min: a, max: o } = this, { offsetHeight: s, offsetWidth: l } = t, u = this.isVertical, d = p((u ? n : r) + this.offset, i, u ? s : l, this.isRtl, u);
+		return Math.round(c(d, a, o));
+	}
+	commitPointerValue(e, t) {
+		this.setValue(this.valueFromPointer(e, t));
+	}
+	onKeydown(e) {
+		if (!this.$thumb) return;
+		let { key: t } = e;
+		if (h.isHome(t)) {
+			e.preventDefault(), this.setValue(this.min);
+			return;
+		}
+		if (h.isEnd(t)) {
+			e.preventDefault(), this.setValue(this.max);
+			return;
+		}
+		let n = new h(this.step, this.page, this.isRtl, this.isVertical).delta(t);
+		if (!n) return;
+		let { preventDefault: r, delta: i } = n;
+		r && e.preventDefault(), i !== 0 && this.setValue(this.value + i);
+	}
+	#e(n, r) {
+		if (!this.$thumb) return;
+		let { min: i, max: a } = this, o = s(n, i, a);
+		this.$thumb.setAttribute("aria-valuenow", String(n)), this.setValuetext(this.$thumb, n), this.style.setProperty("--value", String(n)), this.style.setProperty("--ratio", String(o)), r && t(this, e.SLIDER_CHANGE, {
+			min: n,
+			max: n,
+			$thumb: this.$thumb
+		}, { cancelable: !1 });
+	}
+};
+customElements.get("cinq-slider") || customElements.define("cinq-slider", _);
+//#endregion
+//#region src/slider-range.ts
+var v = class extends g {
+	$max = null;
+	$min = null;
+	#e = "min";
+	#t = 0;
+	#n = 100;
+	get boundsMin() {
+		return this.#t;
+	}
+	get boundsMax() {
+		return this.#n;
+	}
+	get min() {
+		return n(this.$min?.getAttribute("aria-valuenow"), this.#t);
+	}
+	get max() {
+		return n(this.$max?.getAttribute("aria-valuenow"), this.#n);
+	}
+	get orientation() {
+		return this.$max?.getAttribute("aria-orientation") ?? null;
+	}
+	init() {
+		let e = [...this.querySelectorAll("[role=\"slider\"]")];
+		if (e.length !== 2) throw Error("cinq-slider-range: exactly two [role=\"slider\"] thumbs are required");
+		let [t, r] = e;
+		this.$max = t, this.$min = r, this.step = n(this.getAttribute("data-step"), 1), this.page = n(this.getAttribute("data-page"), 10), this.#t = n(this.$max.getAttribute("aria-valuemin"), 0), this.#n = n(this.$max.getAttribute("aria-valuemax"), 100), this.bindThumb(this.$max), this.bindThumb(this.$min), this.observeResize(), this.sync();
+	}
+	destroy() {
+		for (let e of [this.$max, this.$min]) e && this.unbindThumb(e);
+		this.disconnectResize(), this.clearDragState(), this.removeAttribute("data-active"), this.removeAttribute("data-collapsed"), this.$max = null, this.$min = null;
+	}
+	syncValuetext() {
+		this.$min && this.setValuetext(this.$min, this.min), this.$max && this.setValuetext(this.$max, this.max);
+	}
+	sync() {
+		this.#a(this.min, this.max, this.#e, !1);
+	}
+	setValues(e, t, n = {}) {
+		let { active: r = this.#e, emit: i = !0 } = n;
+		this.#a(e, t, r, i);
+	}
+	onThumbFocus(e) {
+		let t = this.#r(e.currentTarget);
+		t && (this.#e = t, this.setAttribute("data-active", t));
+	}
+	valueFromPointer(e, t) {
+		let { clientY: n, clientX: r } = e, { offsetHeight: i, offsetWidth: a } = t, o = t === this.$min ? "min" : "max", s = this.isVertical ? i : a;
+		return m(this.isVertical ? n + this.offset : r + this.offset, this.getBoundingClientRect(), o, this.#t, this.#n, this.#i(s), s, this.isRtl, this.isVertical);
+	}
+	commitPointerValue(e, t) {
+		let n = this.valueFromPointer(e, t);
+		if ((t === this.$min ? "min" : "max") == "min") {
+			this.setValues(n, this.max, { active: "min" });
+			return;
+		}
+		this.setValues(this.min, n, { active: "max" });
+	}
+	onKeydown(e) {
+		let t = this.#r(e.currentTarget);
+		if (!t) return;
+		this.#e = t;
+		let { key: n } = e, r = t === "min" ? this.min : this.max;
+		if (h.isHome(n)) {
+			e.preventDefault();
+			let n = t === "min" ? this.#t : this.min;
+			t === "min" ? this.setValues(n, this.max, { active: "min" }) : this.setValues(this.min, n, { active: "max" });
+			return;
+		}
+		if (h.isEnd(n)) {
+			e.preventDefault();
+			let n = t === "max" ? this.#n : this.max;
+			t === "min" ? this.setValues(n, this.max, { active: "min" }) : this.setValues(this.min, n, { active: "max" });
+			return;
+		}
+		let i = new h(this.step, this.page, this.isRtl, this.isVertical).delta(n);
+		if (!i) return;
+		let { delta: a } = i;
+		if (a !== 0) {
+			if (e.preventDefault(), t === "min") {
+				this.setValues(r + a, this.max, { active: "min" });
+				return;
+			}
+			this.setValues(this.min, r + a, { active: "max" });
+		}
+	}
+	#r(e) {
+		return e === this.$min ? "min" : e === this.$max ? "max" : null;
+	}
+	#i(e) {
+		return d(this.isVertical ? this.clientHeight : this.clientWidth, e);
+	}
+	#a(n, r, i, a) {
+		if (!this.$min || !this.$max) return;
+		let o = this.#t, c = this.#n, u = l(n, o, c, this.step), d = l(r, o, c, this.step);
+		i === "min" ? u = Math.min(u, d) : d = Math.max(d, u), this.#e = i, this.setAttribute("data-active", i), this.$min.setAttribute("aria-valuenow", String(u)), this.$max.setAttribute("aria-valuenow", String(d)), this.$min.setAttribute("aria-valuemax", String(d)), this.$max.setAttribute("aria-valuemin", String(u)), this.setValuetext(this.$min, u), this.setValuetext(this.$max, d);
+		let f = s(u, o, c), p = s(d, o, c);
+		if (this.style.setProperty("--min", String(u)), this.style.setProperty("--max", String(d)), this.style.setProperty("--min-ratio", String(f)), this.style.setProperty("--max-ratio", String(p)), u === d ? this.setAttribute("data-collapsed", "") : this.removeAttribute("data-collapsed"), a) {
+			let n = i === "min" ? this.$min : this.$max;
+			t(this, e.SLIDER_CHANGE, {
+				min: u,
+				max: d,
+				$thumb: n
+			}, { cancelable: !1 });
+		}
+	}
+};
+customElements.get("cinq-slider-range") || customElements.define("cinq-slider-range", v);
+//#endregion
+export { _ as Slider, v as SliderRange };

package/dist/keyboard.d.ts

@@ -0,0 +1,20 @@
+export type KeyboardDelta = {
+    delta: number;
+    preventDefault: boolean;
+};
+/**
+ * APG slider keyboard mapping for arrow and page keys.
+ *
+ * Horizontal: Left/Right swap in RTL (same convention as `@agencecinq/tabs`).
+ * Vertical: Up increases, Down decreases. RTL has no effect on the axis.
+ * Home/End are handled by the host (`Keyboard.isHome` / `Keyboard.isEnd`).
+ */
+export default class Keyboard {
+    #private;
+    constructor(step: number, page: number, rtl: boolean, vertical?: boolean);
+    /** Step/page delta for `key`, or `null` if unhandled. */
+    delta(key: string): KeyboardDelta | null;
+    static isHome(key: string): boolean;
+    static isEnd(key: string): boolean;
+}
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../src/keyboard.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ;;gBAMf,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,UAAQ;IAOtE,yDAAyD;IACzD,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI;IAoDxC,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAInC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;CAGnC"}

package/dist/slider-base.d.ts

@@ -0,0 +1,47 @@
+import { FormatValue } from './types.js';
+/**
+ * Shared slider host: lifecycle, `data-step` / `data-page`, pointer capture,
+ * resize sync, and thumb event wiring.
+ *
+ * Subclasses implement value mapping (`valueFromPointer`, `commitPointerValue`)
+ * and keyboard handling. Orientation comes from thumb `aria-orientation`.
+ */
+export declare abstract class SliderBase extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    step: number;
+    page: number;
+    protected abstract syncValuetext(): void;
+    /** Sync CSS custom properties from current ARIA values (no event). */
+    protected abstract sync(): void;
+    /** Raw value from pointer position before step snapping. */
+    protected abstract valueFromPointer(event: PointerEvent, $thumb: HTMLElement): number;
+    /** Apply pointer-derived value (called on pointerdown and pointermove). */
+    protected abstract commitPointerValue(event: PointerEvent, $thumb: HTMLElement): void;
+    protected abstract onKeydown(event: KeyboardEvent): void;
+    protected onThumbFocus(_event: FocusEvent): void;
+    /** Optional formatter for thumb `aria-valuetext`. */
+    get formatValue(): FormatValue | undefined;
+    set formatValue(fn: FormatValue | undefined);
+    protected get isRtl(): boolean;
+    /** `aria-orientation` on the thumb markup (`null` if unset). */
+    protected abstract get orientation(): string | null;
+    /** `true` when `orientation === "vertical"`. */
+    protected get isVertical(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    abstract init(): void;
+    abstract destroy(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    /** Host rail bounding rect (same as `getBoundingClientRect()`). */
+    rect(): DOMRect;
+    protected observeResize(): void;
+    protected disconnectResize(): void;
+    protected setValuetext($el: HTMLElement, value: number): void;
+    protected bindThumb($thumb: HTMLElement): void;
+    protected unbindThumb($thumb: HTMLElement): void;
+    protected clearDragState(): void;
+    /** Pointer-to-thumb-center offset while dragging (`0` when idle). */
+    protected get offset(): number;
+}
+//# sourceMappingURL=slider-base.d.ts.map

package/dist/slider-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-base.d.ts","sourceRoot":"","sources":["../src/slider-base.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C;;;;;;GAMG;AACH,8BAAsB,UAAW,SAAQ,WAAW;;IAClD,MAAM,CAAC,kBAAkB,WAA8B;IAEvD,IAAI,SAAK;IACT,IAAI,SAAM;IAMV,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IAExC,sEAAsE;IACtE,SAAS,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI;IAE/B,4DAA4D;IAC5D,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CACjC,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,WAAW,GAClB,MAAM;IAET,2EAA2E;IAC3E,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CACnC,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,WAAW,GAClB,IAAI;IAEP,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAExD,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAIhD,qDAAqD;IACrD,IAAI,WAAW,IAAI,WAAW,GAAG,SAAS,CAEzC;IAED,IAAI,WAAW,CAAC,EAAE,EAAE,WAAW,GAAG,SAAS,EAG1C;IAED,SAAS,KAAK,KAAK,IAAI,OAAO,CAE7B;IAED,gEAAgE;IAChE,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,MAAM,GAAG,IAAI,CAAC;IAEpD,gDAAgD;IAChD,SAAS,KAAK,UAAU,IAAI,OAAO,CAElC;IAED,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;IAI5B,QAAQ,CAAC,IAAI,IAAI,IAAI;IAErB,QAAQ,CAAC,OAAO,IAAI,IAAI;IAExB,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,GACtB,IAAI;IAWP,mEAAmE;IACnE,IAAI,IAAI,OAAO;IAIf,SAAS,CAAC,aAAa,IAAI,IAAI;IAQ/B,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAKlC,SAAS,CAAC,YAAY,CAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7D,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAgB9C,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAWhD,SAAS,CAAC,cAAc,IAAI,IAAI;IA+EhC,qEAAqE;IACrE,SAAS,KAAK,MAAM,IAAI,MAAM,CAE7B;CACF"}

package/dist/slider-range.d.ts

@@ -0,0 +1,47 @@
+import { SliderBase } from './slider-base.js';
+import { SetValuesOptions } from './types.js';
+/**
+ * Two-thumb range slider (WAI-ARIA multi-thumb pattern).
+ *
+ * Horizontal (default) or vertical via `aria-orientation` on a thumb.
+ * Horizontal axis mirrors for RTL. Vertical ignores RTL on the axis.
+ *
+ * APG DOM order: first thumb = max handle, second = min handle.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
+ * @see https://github.com/19h47/19h47-slider
+ */
+export declare class SliderRange extends SliderBase {
+    #private;
+    /** First `[role="slider"]` in DOM (max handle). */
+    $max: HTMLElement | null;
+    /** Second `[role="slider"]` in DOM (min handle). */
+    $min: HTMLElement | null;
+    /** Global lower bound from `$max` `aria-valuemin`. */
+    get boundsMin(): number;
+    /** Global upper bound from `$max` `aria-valuemax`. */
+    get boundsMax(): number;
+    /** Current min thumb value (`aria-valuenow` on `$min`). */
+    get min(): number;
+    /** Current max thumb value (`aria-valuenow` on `$max`). */
+    get max(): number;
+    /** `aria-orientation` on `$max` (`null` if unset). */
+    get orientation(): string | null;
+    /** Bind thumbs, read bounds and options, initial sync. */
+    init(): void;
+    /** Unbind thumbs, disconnect observers, clear drag state. */
+    destroy(): void;
+    protected syncValuetext(): void;
+    /** Re-read thumbs from markup, sync CSS vars and ARIA (no event). */
+    protected sync(): void;
+    /**
+     * Clamp both endpoints to bounds and step, enforce anti-crossing for
+     * `active`, sync, dispatch `slider:change` unless `emit: false`.
+     */
+    setValues(minimum: number, maximum: number, options?: SetValuesOptions): void;
+    protected onThumbFocus(event: FocusEvent): void;
+    protected valueFromPointer(event: PointerEvent, $thumb: HTMLElement): number;
+    protected commitPointerValue(event: PointerEvent, $thumb: HTMLElement): void;
+    protected onKeydown(event: KeyboardEvent): void;
+}
+//# sourceMappingURL=slider-range.d.ts.map

package/dist/slider-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-range.d.ts","sourceRoot":"","sources":["../src/slider-range.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAe,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEhE;;;;;;;;;;GAUG;AACH,qBAAa,WAAY,SAAQ,UAAU;;IACzC,mDAAmD;IACnD,IAAI,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEhC,oDAAoD;IACpD,IAAI,EAAE,WAAW,GAAG,IAAI,CAAQ;IAMhC,sDAAsD;IACtD,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,sDAAsD;IACtD,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,2DAA2D;IAC3D,IAAI,GAAG,IAAI,MAAM,CAKhB;IAED,2DAA2D;IAC3D,IAAI,GAAG,IAAI,MAAM,CAKhB;IAED,sDAAsD;IACtD,IAAI,WAAW,IAAI,MAAM,GAAG,IAAI,CAE/B;IAED,0DAA0D;IAC1D,IAAI,IAAI,IAAI;IAgCZ,6DAA6D;IAC7D,OAAO,IAAI,IAAI;IAef,SAAS,CAAC,aAAa,IAAI,IAAI;IAU/B,qEAAqE;IACrE,SAAS,CAAC,IAAI,IAAI,IAAI;IAItB;;;OAGG;IACH,SAAS,CACP,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,OAAO,GAAE,gBAAqB,GAC7B,IAAI;IAKP,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAS/C,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,GAAG,MAAM;IAsB5E,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI;IAY5E,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;CA2IhD"}

package/dist/slider.d.ts

@@ -0,0 +1,38 @@
+import { SliderBase } from './slider-base.js';
+import { SetValueOptions } from './types.js';
+/**
+ * Single-thumb slider (WAI-ARIA slider pattern).
+ *
+ * Horizontal (default) or vertical via `aria-orientation` on the thumb.
+ * Horizontal axis mirrors for RTL (`dir="rtl"` on host or ancestor).
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+ */
+export declare class Slider extends SliderBase {
+    #private;
+    /** Cached `[role="slider"]` thumb. */
+    $thumb: HTMLElement | null;
+    /** `aria-orientation` on `$thumb` (`null` if unset). */
+    get orientation(): string | null;
+    /** Lower bound from `$thumb` `aria-valuemin`. */
+    get min(): number;
+    /** Upper bound from `$thumb` `aria-valuemax`. */
+    get max(): number;
+    /** Current value from `$thumb` `aria-valuenow`. */
+    get value(): number;
+    /** Semantic position in `[0, 1]` within `min`..`max`. */
+    get ratio(): number;
+    /** Bind thumb, read options, initial sync. */
+    init(): void;
+    /** Unbind thumb, disconnect observers, clear drag state. */
+    destroy(): void;
+    protected syncValuetext(): void;
+    /** Re-read thumb from markup, sync CSS vars and ARIA (no event). */
+    protected sync(): void;
+    /** Clamp to bounds and step, sync, dispatch `slider:change` unless `emit: false`. */
+    setValue(value: number, options?: SetValueOptions): void;
+    protected valueFromPointer(event: PointerEvent, $thumb: HTMLElement): number;
+    protected commitPointerValue(event: PointerEvent, $thumb: HTMLElement): void;
+    protected onKeydown(event: KeyboardEvent): void;
+}
+//# sourceMappingURL=slider.d.ts.map

package/dist/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../src/slider.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD;;;;;;;GAOG;AACH,qBAAa,MAAO,SAAQ,UAAU;;IACpC,sCAAsC;IACtC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAQ;IAElC,wDAAwD;IACxD,IAAI,WAAW,IAAI,MAAM,GAAG,IAAI,CAE/B;IAED,iDAAiD;IACjD,IAAI,GAAG,IAAI,MAAM,CAEhB;IAED,iDAAiD;IACjD,IAAI,GAAG,IAAI,MAAM,CAEhB;IAED,mDAAmD;IACnD,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,yDAAyD;IACzD,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,8CAA8C;IAC9C,IAAI,IAAI,IAAI;IAiBZ,4DAA4D;IAC5D,OAAO,IAAI,IAAI;IAUf,SAAS,CAAC,aAAa,IAAI,IAAI;IAM/B,oEAAoE;IACpE,SAAS,CAAC,IAAI,IAAI,IAAI;IAItB,qFAAqF;IACrF,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,IAAI;IAM5D,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,GAAG,MAAM;IAmB5E,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI;IAI5E,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;CAgEhD"}

package/dist/types.d.ts

@@ -0,0 +1,25 @@
+export type FormatValue = (value: number) => string;
+/** Which range thumb is active (`data-active` on the host). */
+export type ActiveThumb = "min" | "max";
+/** Unified `slider:change` detail for `<cinq-slider>` and `<cinq-slider-range>`. */
+export interface SliderChangeDetail {
+    /** Current low end of the selection (single: equals `max`). */
+    min: number;
+    /** Current high end of the selection (single: equals `min`). */
+    max: number;
+    /** Thumb that moved or has focus (always set). */
+    $thumb: HTMLElement;
+}
+/** @deprecated Use `SliderChangeDetail`. */
+export type Detail = SliderChangeDetail;
+export interface SetValueOptions {
+    /** Dispatch `slider:change` after sync (default `true`). */
+    emit?: boolean;
+}
+export interface SetValuesOptions {
+    /** Thumb that drives anti-crossing clamp (default: last active). */
+    active?: ActiveThumb;
+    /** Dispatch `slider:change` after sync (default `true`). */
+    emit?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpD,+DAA+D;AAC/D,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,KAAK,CAAC;AAExC,oFAAoF;AACpF,MAAM,WAAW,kBAAkB;IACjC,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,4CAA4C;AAC5C,MAAM,MAAM,MAAM,GAAG,kBAAkB,CAAC;AAExC,MAAM,WAAW,eAAe;IAC9B,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@agencecinq/slider",
+  "version": "6.0.0",
+  "description": "Accessible, WAI-ARIA slider as a lightweight Web Component.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Jérémy Levron <jeremy@agencecinq.com> (https://agencecinq.com)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agencecinq/shopify.git",
+    "directory": "packages/slider"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@agencecinq/utils": "*"
+  },
+  "devDependencies": {
+    "vite": "^8.2.0",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^3.2.4",
+    "@agencecinq/utils": "7.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}