@vielzeug/refine 2.0.3 → 2.1.2

package/dist/core/positioner.d.ts

@@ -35,6 +35,11 @@ export type DropdownPositionerOptions = {
     offsetPx?: number;
     /** Padding (px) used by flip, shift, and size middleware. Default: 6 */
     padding?: number;
+    /**
+     * Whether to constrain placement to a clipping ancestor when `boundary` is unset. Default:
+     * true. Disable for native Popover API panels, which render in the top layer.
+     */
+    useClippingAncestor?: boolean;
 };
 /**
  * Creates an Orbit-powered positioner for dropdown overlays (select, combobox, menu).
@@ -46,5 +51,5 @@ export type DropdownPositionerOptions = {
  * correct side, based on `getDir` (or the reference element's resolved direction when
  * `getDir` is omitted).
  */
-export declare function createDropdownPositioner({ boundary, getDir, getFloating, getPlacement, getReference, matchWidth, offsetPx, padding, }: DropdownPositionerOptions): OverlayPositioner;
+export declare function createDropdownPositioner({ boundary, getDir, getFloating, getPlacement, getReference, matchWidth, offsetPx, padding, useClippingAncestor, }: DropdownPositionerOptions): OverlayPositioner;
 //# sourceMappingURL=positioner.d.ts.map

package/dist/core/positioner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"positioner.d.ts","sourceRoot":"","sources":["../../src/core/positioner.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,IAAI,EAGV,MAAM,iBAAiB,CAAC;AAMzB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,MAAM,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAIF,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAC;IAC7B,wDAAwD;IACxD,WAAW,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACtC,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAC/B,kDAAkD;IAClD,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACvC,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAWF;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAiB,EACjB,QAAY,EACZ,OAAW,GACZ,EAAE,yBAAyB,GAAG,iBAAiB,CA6F/C"}
+{"version":3,"file":"positioner.d.ts","sourceRoot":"","sources":["../../src/core/positioner.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,IAAI,EAGV,MAAM,iBAAiB,CAAC;AAMzB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,MAAM,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAIF,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAC;IAC7B,wDAAwD;IACxD,WAAW,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACtC,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAC/B,kDAAkD;IAClD,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACvC,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAWF;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAiB,EACjB,QAAY,EACZ,OAAW,EACX,mBAA0B,GAC3B,EAAE,yBAAyB,GAAG,iBAAiB,CA6F/C"}

package/dist/core/positioner.js

@@ -2,15 +2,15 @@ import { elementDirection as e } from "./direction.js";
 import { autoUpdate as t, computePosition as n, flip as r, getClippingAncestorRect as i, offset as a, shift as o, size as s } from "@vielzeug/orbit";
 //#region src/core/positioner.ts
 var c = (e) => e.endsWith("-start") ? e.replace("-start", "-end") : e.endsWith("-end") ? e.replace("-end", "-start") : e;
-function l({ boundary: l, getDir: u, getFloating: d, getPlacement: f, getReference: p, matchWidth: m = !0, offsetPx: h = 0, padding: g = 6 }) {
-	function _() {
+function l({ boundary: l, getDir: u, getFloating: d, getPlacement: f, getReference: p, matchWidth: m = !0, offsetPx: h = 0, padding: g = 6, useClippingAncestor: _ = !0 }) {
+	function v() {
 		let t = f?.() ?? "bottom-start";
 		return (u?.() ?? e(p())) === "rtl" ? c(t) : t;
 	}
-	function v() {
+	function y() {
 		let e = p(), t = d();
 		if (!e || !t) return;
-		let c = _(), u = l ?? i(t), f = n(e, t, {
+		let c = v(), u = l ?? (_ ? i(t) : void 0), f = n(e, t, {
 			boundary: u,
 			middleware: [
 				...h ? [a(h)] : [],
@@ -21,20 +21,20 @@ function l({ boundary: l, getDir: u, getFloating: d, getPlacement: f, getReferen
 			placement: c
 		});
 		t.style.left = `${f.x}px`, t.style.top = `${f.y}px`;
-		let v = t.style.transition, y = t.style.transform;
+		let y = t.style.transition, b = t.style.transform;
 		t.style.transition = "none", t.style.transform = "none";
-		let b = t.getBoundingClientRect(), x = f.x - b.left, S = f.y - b.top;
-		t.style.transition = v, t.style.transform = y, (x !== 0 || S !== 0) && (t.style.left = `${f.x + x}px`, t.style.top = `${f.y + S}px`), m && (t.style.width = `${e.getBoundingClientRect().width}px`);
+		let x = t.getBoundingClientRect(), S = f.x - x.left, C = f.y - x.top;
+		t.style.transition = y, t.style.transform = b, (S !== 0 || C !== 0) && (t.style.left = `${f.x + S}px`, t.style.top = `${f.y + C}px`), m && (t.style.width = `${e.getBoundingClientRect().width}px`);
 	}
-	function y() {
+	function b() {
 		let e = p(), n = d();
-		return !e || !n ? () => {} : t(e, n, v);
+		return !e || !n ? () => {} : t(e, n, y);
 	}
 	return {
 		floating: d,
 		reference: p,
-		startAutoUpdate: y,
-		update: v
+		startAutoUpdate: b,
+		update: y
 	};
 }
 //#endregion

package/dist/core/positioner.js.map

@@ -1 +1 @@
-{"version":3,"file":"positioner.js","names":[],"sources":["../../src/core/positioner.ts"],"sourcesContent":["import {\n  autoUpdate,\n  computePosition,\n  flip,\n  getClippingAncestorRect,\n  offset,\n  type Placement,\n  type Rect,\n  shift,\n  size,\n} from '@vielzeug/orbit';\n\nimport { elementDirection } from './direction';\n\n// ── Overlay positioner contract ──────────────────────────────────────────────\n\nexport type OverlayPositioner = {\n  floating: () => HTMLElement | null;\n  reference: () => HTMLElement | null;\n  /** Start continuous position auto-updates. Returns a stop function. */\n  startAutoUpdate?: () => () => void;\n  update: () => void;\n};\n\n// ── Dropdown positioner ───────────────────────────────────────────────────────\n\nexport type DropdownPositionerOptions = {\n  /**\n   * Clipping boundary for flip/shift/size — the edges the dropdown must stay within.\n   * Defaults to the nearest ancestor that actually clips content (`overflow:\n   * hidden|auto|scroll|clip`, e.g. a dialog panel), auto-detected per update via\n   * `getClippingAncestorRect()`, intersected with the viewport. Without this, flip/shift only\n   * avoid the full page viewport — a dropdown can be \"in view\" by that measure while still\n   * visibly overhanging a much smaller container it's actually nested in. Pass an explicit\n   * boundary to override auto-detection.\n   */\n  boundary?: Element | Rect;\n  /**\n   * Returns the text direction used for placement mirroring. Defaults to the resolved\n   * direction of the reference element (nearest `dir=\"ltr\"|\"rtl\"` ancestor, falling back to\n   * computed style) — most callers never need to pass this explicitly.\n   */\n  getDir?: () => 'ltr' | 'rtl';\n  /** Getter for the floating (dropdown panel) element. */\n  getFloating: () => HTMLElement | null;\n  /** Getter for the current placement. Defaults to 'bottom-start' (RTL-aware: flips to 'bottom-end'). */\n  getPlacement?: () => Placement;\n  /** Getter for the reference (trigger) element. */\n  getReference: () => HTMLElement | null;\n  /** Whether to match the floating element width to the reference. Default: true */\n  matchWidth?: boolean;\n  /** Additional offset in pixels between reference and floating element. Default: 0 */\n  offsetPx?: number;\n  /** Padding (px) used by flip, shift, and size middleware. Default: 6 */\n  padding?: number;\n};\n\n/** Mirrors a start/end placement for RTL layouts. */\nconst rtlPlacement = (p: Placement): Placement => {\n  if (p.endsWith('-start')) return p.replace('-start', '-end') as Placement;\n\n  if (p.endsWith('-end')) return p.replace('-end', '-start') as Placement;\n\n  return p;\n};\n\n/**\n * Creates an Orbit-powered positioner for dropdown overlays (select, combobox, menu).\n *\n * Uses flip + shift + optional width-matching middleware. Supports continuous\n * auto-update for repositioning on scroll or resize.\n *\n * RTL-aware: start/end placements are automatically mirrored so dropdowns open on the\n * correct side, based on `getDir` (or the reference element's resolved direction when\n * `getDir` is omitted).\n */\nexport function createDropdownPositioner({\n  boundary,\n  getDir,\n  getFloating,\n  getPlacement,\n  getReference,\n  matchWidth = true,\n  offsetPx = 0,\n  padding = 6,\n}: DropdownPositionerOptions): OverlayPositioner {\n  function resolvedPlacement(): Placement {\n    const base = getPlacement?.() ?? 'bottom-start';\n    const dir = getDir?.() ?? elementDirection(getReference());\n\n    return dir === 'rtl' ? rtlPlacement(base) : base;\n  }\n\n  function updatePosition(): void {\n    const ref = getReference();\n    const floating = getFloating();\n\n    if (!ref || !floating) return;\n\n    const placement = resolvedPlacement();\n    // Defaults to `undefined` (meaning \"auto-detect\"), not the detected value itself —\n    // re-running the detection on every update (rather than once, at positioner-creation time)\n    // matters because the dialog/scroll-container an instance is rendered into can change\n    // across opens (e.g. the same `<ore-select>` reused in different dialogs), and the detected\n    // ancestor's own rect can change between opens even when it's the same element (a resized\n    // dialog).\n    const resolvedBoundary = boundary ?? getClippingAncestorRect(floating);\n\n    const result = computePosition(ref, floating, {\n      boundary: resolvedBoundary,\n      middleware: [\n        ...(offsetPx ? [offset(offsetPx)] : []),\n        flip({ padding }),\n        shift({ padding }),\n        ...(matchWidth ? [size({ padding })] : []),\n      ],\n      placement,\n    });\n\n    floating.style.left = `${result.x}px`;\n    floating.style.top = `${result.y}px`;\n\n    // `computePosition()` assumes `left`/`top` resolve relative to the viewport (correct for\n    // `position: fixed`) — true almost always, but not when some ancestor establishes a\n    // containing block for fixed descendants (a non-`none` `transform`, even a visually-identity\n    // one left over from an entrance transition that never resets to `none` at rest is a real,\n    // easy-to-hit case — a modal dialog's panel, say). Analytically detecting *that* ancestor via\n    // `getContainingBlock()` and pre-subtracting its rect turned out to be unreliable in\n    // practice: browsers don't apply the \"ancestor transform traps fixed descendants\" rule\n    // uniformly across every element nested under it in every case we tested — some floating\n    // elements in the exact same subtree needed the correction and some didn't, for reasons we\n    // couldn't fully pin down. Measuring what actually happened after writing `left`/`top`\n    // and correcting only the observed gap sidesteps that: it's a no-op when the browser already\n    // put the element where asked, and it fixes the same class of bug the moment there's a real\n    // mismatch, regardless of which specific ancestor (if any) turns out to be responsible.\n    //\n    // The measurement itself must not be fooled by the floating element's *own* transform,\n    // though: dropdowns/popovers here all use a `transform: translateY(...)` entrance transition\n    // driven by a `[data-open]` attribute + `@starting-style` — right at open, before the\n    // transition has visibly progressed, `getBoundingClientRect()` can still reflect that\n    // starting offset (a handful of px, matching `--overlay-enter-translate-y`), which this\n    // correction would otherwise misread as a permanent ancestor-driven mismatch and bake in\n    // forever. Temporarily neutralizing the floating element's own transform for the measurement\n    // (and restoring it before anything paints, so there's no visible flash) isolates the\n    // correction to ancestor-driven offsets only, which is the only thing it's meant to fix.\n    const prevTransition = floating.style.transition;\n    const prevTransform = floating.style.transform;\n\n    floating.style.transition = 'none';\n    floating.style.transform = 'none';\n\n    const actual = floating.getBoundingClientRect();\n    const deltaX = result.x - actual.left;\n    const deltaY = result.y - actual.top;\n\n    floating.style.transition = prevTransition;\n    floating.style.transform = prevTransform;\n\n    if (deltaX !== 0 || deltaY !== 0) {\n      floating.style.left = `${result.x + deltaX}px`;\n      floating.style.top = `${result.y + deltaY}px`;\n    }\n\n    if (matchWidth) {\n      floating.style.width = `${ref.getBoundingClientRect().width}px`;\n    }\n  }\n\n  function startAutoUpdate(): () => void {\n    const ref = getReference();\n    const floating = getFloating();\n\n    if (!ref || !floating) return () => {};\n\n    return autoUpdate(ref, floating, updatePosition);\n  }\n\n  return { floating: getFloating, reference: getReference, startAutoUpdate, update: updatePosition };\n}\n"],"mappings":";;;AA0DA,IAAM,KAAgB,MAChB,EAAE,SAAS,QAAQ,IAAU,EAAE,QAAQ,UAAU,MAAM,IAEvD,EAAE,SAAS,MAAM,IAAU,EAAE,QAAQ,QAAQ,QAAQ,IAElD;AAaT,SAAgB,EAAyB,EACvC,aACA,WACA,gBACA,iBACA,iBACA,gBAAa,IACb,cAAW,GACX,aAAU,KACqC;CAC/C,SAAS,IAA+B;EACtC,IAAM,IAAO,IAAe,KAAK;EAGjC,QAFY,IAAS,KAAK,EAAiB,EAAa,CAAC,OAE1C,QAAQ,EAAa,CAAI,IAAI;CAC9C;CAEA,SAAS,IAAuB;EAC9B,IAAM,IAAM,EAAa,GACnB,IAAW,EAAY;EAE7B,IAAI,CAAC,KAAO,CAAC,GAAU;EAEvB,IAAM,IAAY,EAAkB,GAO9B,IAAmB,KAAY,EAAwB,CAAQ,GAE/D,IAAS,EAAgB,GAAK,GAAU;GAC5C,UAAU;GACV,YAAY;IACV,GAAI,IAAW,CAAC,EAAO,CAAQ,CAAC,IAAI,CAAC;IACrC,EAAK,EAAE,WAAQ,CAAC;IAChB,EAAM,EAAE,WAAQ,CAAC;IACjB,GAAI,IAAa,CAAC,EAAK,EAAE,WAAQ,CAAC,CAAC,IAAI,CAAC;GAC1C;GACA;EACF,CAAC;EAGD,AADA,EAAS,MAAM,OAAO,GAAG,EAAO,EAAE,KAClC,EAAS,MAAM,MAAM,GAAG,EAAO,EAAE;EAyBjC,IAAM,IAAiB,EAAS,MAAM,YAChC,IAAgB,EAAS,MAAM;EAGrC,AADA,EAAS,MAAM,aAAa,QAC5B,EAAS,MAAM,YAAY;EAE3B,IAAM,IAAS,EAAS,sBAAsB,GACxC,IAAS,EAAO,IAAI,EAAO,MAC3B,IAAS,EAAO,IAAI,EAAO;EAUjC,AARA,EAAS,MAAM,aAAa,GAC5B,EAAS,MAAM,YAAY,IAEvB,MAAW,KAAK,MAAW,OAC7B,EAAS,MAAM,OAAO,GAAG,EAAO,IAAI,EAAO,KAC3C,EAAS,MAAM,MAAM,GAAG,EAAO,IAAI,EAAO,MAGxC,MACF,EAAS,MAAM,QAAQ,GAAG,EAAI,sBAAsB,CAAC,CAAC,MAAM;CAEhE;CAEA,SAAS,IAA8B;EACrC,IAAM,IAAM,EAAa,GACnB,IAAW,EAAY;EAI7B,OAFI,CAAC,KAAO,CAAC,UAAuB,CAAC,IAE9B,EAAW,GAAK,GAAU,CAAc;CACjD;CAEA,OAAO;EAAE,UAAU;EAAa,WAAW;EAAc;EAAiB,QAAQ;CAAe;AACnG"}
+{"version":3,"file":"positioner.js","names":[],"sources":["../../src/core/positioner.ts"],"sourcesContent":["import {\n  autoUpdate,\n  computePosition,\n  flip,\n  getClippingAncestorRect,\n  offset,\n  type Placement,\n  type Rect,\n  shift,\n  size,\n} from '@vielzeug/orbit';\n\nimport { elementDirection } from './direction';\n\n// ── Overlay positioner contract ──────────────────────────────────────────────\n\nexport type OverlayPositioner = {\n  floating: () => HTMLElement | null;\n  reference: () => HTMLElement | null;\n  /** Start continuous position auto-updates. Returns a stop function. */\n  startAutoUpdate?: () => () => void;\n  update: () => void;\n};\n\n// ── Dropdown positioner ───────────────────────────────────────────────────────\n\nexport type DropdownPositionerOptions = {\n  /**\n   * Clipping boundary for flip/shift/size — the edges the dropdown must stay within.\n   * Defaults to the nearest ancestor that actually clips content (`overflow:\n   * hidden|auto|scroll|clip`, e.g. a dialog panel), auto-detected per update via\n   * `getClippingAncestorRect()`, intersected with the viewport. Without this, flip/shift only\n   * avoid the full page viewport — a dropdown can be \"in view\" by that measure while still\n   * visibly overhanging a much smaller container it's actually nested in. Pass an explicit\n   * boundary to override auto-detection.\n   */\n  boundary?: Element | Rect;\n  /**\n   * Returns the text direction used for placement mirroring. Defaults to the resolved\n   * direction of the reference element (nearest `dir=\"ltr\"|\"rtl\"` ancestor, falling back to\n   * computed style) — most callers never need to pass this explicitly.\n   */\n  getDir?: () => 'ltr' | 'rtl';\n  /** Getter for the floating (dropdown panel) element. */\n  getFloating: () => HTMLElement | null;\n  /** Getter for the current placement. Defaults to 'bottom-start' (RTL-aware: flips to 'bottom-end'). */\n  getPlacement?: () => Placement;\n  /** Getter for the reference (trigger) element. */\n  getReference: () => HTMLElement | null;\n  /** Whether to match the floating element width to the reference. Default: true */\n  matchWidth?: boolean;\n  /** Additional offset in pixels between reference and floating element. Default: 0 */\n  offsetPx?: number;\n  /** Padding (px) used by flip, shift, and size middleware. Default: 6 */\n  padding?: number;\n  /**\n   * Whether to constrain placement to a clipping ancestor when `boundary` is unset. Default:\n   * true. Disable for native Popover API panels, which render in the top layer.\n   */\n  useClippingAncestor?: boolean;\n};\n\n/** Mirrors a start/end placement for RTL layouts. */\nconst rtlPlacement = (p: Placement): Placement => {\n  if (p.endsWith('-start')) return p.replace('-start', '-end') as Placement;\n\n  if (p.endsWith('-end')) return p.replace('-end', '-start') as Placement;\n\n  return p;\n};\n\n/**\n * Creates an Orbit-powered positioner for dropdown overlays (select, combobox, menu).\n *\n * Uses flip + shift + optional width-matching middleware. Supports continuous\n * auto-update for repositioning on scroll or resize.\n *\n * RTL-aware: start/end placements are automatically mirrored so dropdowns open on the\n * correct side, based on `getDir` (or the reference element's resolved direction when\n * `getDir` is omitted).\n */\nexport function createDropdownPositioner({\n  boundary,\n  getDir,\n  getFloating,\n  getPlacement,\n  getReference,\n  matchWidth = true,\n  offsetPx = 0,\n  padding = 6,\n  useClippingAncestor = true,\n}: DropdownPositionerOptions): OverlayPositioner {\n  function resolvedPlacement(): Placement {\n    const base = getPlacement?.() ?? 'bottom-start';\n    const dir = getDir?.() ?? elementDirection(getReference());\n\n    return dir === 'rtl' ? rtlPlacement(base) : base;\n  }\n\n  function updatePosition(): void {\n    const ref = getReference();\n    const floating = getFloating();\n\n    if (!ref || !floating) return;\n\n    const placement = resolvedPlacement();\n    // Defaults to `undefined` (meaning \"auto-detect\"), not the detected value itself —\n    // re-running the detection on every update (rather than once, at positioner-creation time)\n    // matters because the dialog/scroll-container an instance is rendered into can change\n    // across opens (e.g. the same `<ore-select>` reused in different dialogs), and the detected\n    // ancestor's own rect can change between opens even when it's the same element (a resized\n    // dialog).\n    const resolvedBoundary = boundary ?? (useClippingAncestor ? getClippingAncestorRect(floating) : undefined);\n\n    const result = computePosition(ref, floating, {\n      boundary: resolvedBoundary,\n      middleware: [\n        ...(offsetPx ? [offset(offsetPx)] : []),\n        flip({ padding }),\n        shift({ padding }),\n        ...(matchWidth ? [size({ padding })] : []),\n      ],\n      placement,\n    });\n\n    floating.style.left = `${result.x}px`;\n    floating.style.top = `${result.y}px`;\n\n    // `computePosition()` assumes `left`/`top` resolve relative to the viewport (correct for\n    // `position: fixed`) — true almost always, but not when some ancestor establishes a\n    // containing block for fixed descendants (a non-`none` `transform`, even a visually-identity\n    // one left over from an entrance transition that never resets to `none` at rest is a real,\n    // easy-to-hit case — a modal dialog's panel, say). Analytically detecting *that* ancestor via\n    // `getContainingBlock()` and pre-subtracting its rect turned out to be unreliable in\n    // practice: browsers don't apply the \"ancestor transform traps fixed descendants\" rule\n    // uniformly across every element nested under it in every case we tested — some floating\n    // elements in the exact same subtree needed the correction and some didn't, for reasons we\n    // couldn't fully pin down. Measuring what actually happened after writing `left`/`top`\n    // and correcting only the observed gap sidesteps that: it's a no-op when the browser already\n    // put the element where asked, and it fixes the same class of bug the moment there's a real\n    // mismatch, regardless of which specific ancestor (if any) turns out to be responsible.\n    //\n    // The measurement itself must not be fooled by the floating element's *own* transform,\n    // though: dropdowns/popovers here all use a `transform: translateY(...)` entrance transition\n    // driven by a `[data-open]` attribute + `@starting-style` — right at open, before the\n    // transition has visibly progressed, `getBoundingClientRect()` can still reflect that\n    // starting offset (a handful of px, matching `--overlay-enter-translate-y`), which this\n    // correction would otherwise misread as a permanent ancestor-driven mismatch and bake in\n    // forever. Temporarily neutralizing the floating element's own transform for the measurement\n    // (and restoring it before anything paints, so there's no visible flash) isolates the\n    // correction to ancestor-driven offsets only, which is the only thing it's meant to fix.\n    const prevTransition = floating.style.transition;\n    const prevTransform = floating.style.transform;\n\n    floating.style.transition = 'none';\n    floating.style.transform = 'none';\n\n    const actual = floating.getBoundingClientRect();\n    const deltaX = result.x - actual.left;\n    const deltaY = result.y - actual.top;\n\n    floating.style.transition = prevTransition;\n    floating.style.transform = prevTransform;\n\n    if (deltaX !== 0 || deltaY !== 0) {\n      floating.style.left = `${result.x + deltaX}px`;\n      floating.style.top = `${result.y + deltaY}px`;\n    }\n\n    if (matchWidth) {\n      floating.style.width = `${ref.getBoundingClientRect().width}px`;\n    }\n  }\n\n  function startAutoUpdate(): () => void {\n    const ref = getReference();\n    const floating = getFloating();\n\n    if (!ref || !floating) return () => {};\n\n    return autoUpdate(ref, floating, updatePosition);\n  }\n\n  return { floating: getFloating, reference: getReference, startAutoUpdate, update: updatePosition };\n}\n"],"mappings":";;;AA+DA,IAAM,KAAgB,MAChB,EAAE,SAAS,QAAQ,IAAU,EAAE,QAAQ,UAAU,MAAM,IAEvD,EAAE,SAAS,MAAM,IAAU,EAAE,QAAQ,QAAQ,QAAQ,IAElD;AAaT,SAAgB,EAAyB,EACvC,aACA,WACA,gBACA,iBACA,iBACA,gBAAa,IACb,cAAW,GACX,aAAU,GACV,yBAAsB,MACyB;CAC/C,SAAS,IAA+B;EACtC,IAAM,IAAO,IAAe,KAAK;EAGjC,QAFY,IAAS,KAAK,EAAiB,EAAa,CAAC,OAE1C,QAAQ,EAAa,CAAI,IAAI;CAC9C;CAEA,SAAS,IAAuB;EAC9B,IAAM,IAAM,EAAa,GACnB,IAAW,EAAY;EAE7B,IAAI,CAAC,KAAO,CAAC,GAAU;EAEvB,IAAM,IAAY,EAAkB,GAO9B,IAAmB,MAAa,IAAsB,EAAwB,CAAQ,IAAI,KAAA,IAE1F,IAAS,EAAgB,GAAK,GAAU;GAC5C,UAAU;GACV,YAAY;IACV,GAAI,IAAW,CAAC,EAAO,CAAQ,CAAC,IAAI,CAAC;IACrC,EAAK,EAAE,WAAQ,CAAC;IAChB,EAAM,EAAE,WAAQ,CAAC;IACjB,GAAI,IAAa,CAAC,EAAK,EAAE,WAAQ,CAAC,CAAC,IAAI,CAAC;GAC1C;GACA;EACF,CAAC;EAGD,AADA,EAAS,MAAM,OAAO,GAAG,EAAO,EAAE,KAClC,EAAS,MAAM,MAAM,GAAG,EAAO,EAAE;EAyBjC,IAAM,IAAiB,EAAS,MAAM,YAChC,IAAgB,EAAS,MAAM;EAGrC,AADA,EAAS,MAAM,aAAa,QAC5B,EAAS,MAAM,YAAY;EAE3B,IAAM,IAAS,EAAS,sBAAsB,GACxC,IAAS,EAAO,IAAI,EAAO,MAC3B,IAAS,EAAO,IAAI,EAAO;EAUjC,AARA,EAAS,MAAM,aAAa,GAC5B,EAAS,MAAM,YAAY,IAEvB,MAAW,KAAK,MAAW,OAC7B,EAAS,MAAM,OAAO,GAAG,EAAO,IAAI,EAAO,KAC3C,EAAS,MAAM,MAAM,GAAG,EAAO,IAAI,EAAO,MAGxC,MACF,EAAS,MAAM,QAAQ,GAAG,EAAI,sBAAsB,CAAC,CAAC,MAAM;CAEhE;CAEA,SAAS,IAA8B;EACrC,IAAM,IAAM,EAAa,GACnB,IAAW,EAAY;EAI7B,OAFI,CAAC,KAAO,CAAC,UAAuB,CAAC,IAE9B,EAAW,GAAK,GAAU,CAAc;CACjD;CAEA,OAAO;EAAE,UAAU;EAAa,WAAW;EAAc;EAAiB,QAAQ;CAAe;AACnG"}

package/dist/core/ref-callback.cjs

@@ -1,2 +1,2 @@
-let e=require("@vielzeug/ripple/watch");var t=(t,n)=>{t.value?.(n);let r=(0,e.watch)(t,e=>e?.(n));return()=>{r.dispose(),t.value?.(null)}};exports.bindRefCallback=t;
+let e=require("@vielzeug/ripple");var t=(t,n)=>{t.value?.(n);let r=(0,e.watch)(t,e=>e?.(n));return()=>{r.dispose(),t.value?.(null)}};exports.bindRefCallback=t;
 //# sourceMappingURL=ref-callback.cjs.map

package/dist/core/ref-callback.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ref-callback.cjs","names":[],"sources":["../../src/core/ref-callback.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { watch } from '@vielzeug/ripple/watch';\n\n/** Shape every `ref` prop in this package uses — a JS-only escape hatch to the live element. */\nexport type RefCallback<T> = ((el: T | null) => void) | null | undefined;\n\n/**\n * Forwards a mounted element to a JS-only `ref` callback prop, and keeps forwarding to a\n * *new* callback if the prop is set again after mount (e.g. a parent sets it via a ref\n * callback after render, rather than at initial mount). Every text-entry-style component\n * with a `ref` escape-hatch prop (`ore-input`, `ore-textarea`, `ore-message-composer`,\n * `ore-file-input`) wires this identically — call it once from inside `onElement()`, alongside\n * whatever else that element needs wired.\n *\n * @example\n * ```ts\n * onElement(fieldRef, (el) => {\n *   const unwireField = tf.wire(el);\n *   const unwireRef = bindRefCallback(props.ref, el);\n *\n *   return () => {\n *     unwireField();\n *     unwireRef();\n *   };\n * });\n * ```\n */\nexport const bindRefCallback = <T extends Element>(ref: Readable<RefCallback<T>>, el: T): (() => void) => {\n  // Immediate fire for when the prop is already set on mount.\n  ref.value?.(el);\n\n  const sub = watch(ref, (cb) => cb?.(el));\n\n  return () => {\n    sub.dispose();\n    ref.value?.(null);\n  };\n};\n"],"mappings":"wCA4BA,IAAa,GAAsC,EAA+B,IAAwB,CAExG,EAAI,QAAQ,CAAE,EAEd,IAAM,GAAA,EAAM,EAAA,MAAA,CAAM,EAAM,GAAO,IAAK,CAAE,CAAC,EAEvC,UAAa,CACX,EAAI,QAAQ,EACZ,EAAI,QAAQ,IAAI,CAClB,CACF"}
+{"version":3,"file":"ref-callback.cjs","names":[],"sources":["../../src/core/ref-callback.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple';\n\n/** Shape every `ref` prop in this package uses — a JS-only escape hatch to the live element. */\nexport type RefCallback<T> = ((el: T | null) => void) | null | undefined;\n\n/**\n * Forwards a mounted element to a JS-only `ref` callback prop, and keeps forwarding to a\n * *new* callback if the prop is set again after mount (e.g. a parent sets it via a ref\n * callback after render, rather than at initial mount). Every text-entry-style component\n * with a `ref` escape-hatch prop (`ore-input`, `ore-textarea`, `ore-message-composer`,\n * `ore-file-input`) wires this identically — call it once from inside `onElement()`, alongside\n * whatever else that element needs wired.\n *\n * @example\n * ```ts\n * onElement(fieldRef, (el) => {\n *   const unwireField = tf.wire(el);\n *   const unwireRef = bindRefCallback(props.ref, el);\n *\n *   return () => {\n *     unwireField();\n *     unwireRef();\n *   };\n * });\n * ```\n */\nexport const bindRefCallback = <T extends Element>(ref: Readable<RefCallback<T>>, el: T): (() => void) => {\n  // Immediate fire for when the prop is already set on mount.\n  ref.value?.(el);\n\n  const sub = watch(ref, (cb) => cb?.(el));\n\n  return () => {\n    sub.dispose();\n    ref.value?.(null);\n  };\n};\n"],"mappings":"kCA2BA,IAAa,GAAsC,EAA+B,IAAwB,CAExG,EAAI,QAAQ,CAAE,EAEd,IAAM,GAAA,EAAM,EAAA,MAAA,CAAM,EAAM,GAAO,IAAK,CAAE,CAAC,EAEvC,UAAa,CACX,EAAI,QAAQ,EACZ,EAAI,QAAQ,IAAI,CAClB,CACF"}

package/dist/core/ref-callback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ref-callback.d.ts","sourceRoot":"","sources":["../../src/core/ref-callback.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIjD,gGAAgG;AAChG,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAG,CAAC,MAAM,IAAI,CAUpG,CAAC"}
+{"version":3,"file":"ref-callback.d.ts","sourceRoot":"","sources":["../../src/core/ref-callback.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,gGAAgG;AAChG,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAG,CAAC,MAAM,IAAI,CAUpG,CAAC"}

package/dist/core/ref-callback.js

@@ -1,4 +1,4 @@
-import { watch as e } from "@vielzeug/ripple/watch";
+import { watch as e } from "@vielzeug/ripple";
 //#region src/core/ref-callback.ts
 var t = (t, n) => {
 	t.value?.(n);

package/dist/core/ref-callback.js.map

@@ -1 +1 @@
-{"version":3,"file":"ref-callback.js","names":[],"sources":["../../src/core/ref-callback.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { watch } from '@vielzeug/ripple/watch';\n\n/** Shape every `ref` prop in this package uses — a JS-only escape hatch to the live element. */\nexport type RefCallback<T> = ((el: T | null) => void) | null | undefined;\n\n/**\n * Forwards a mounted element to a JS-only `ref` callback prop, and keeps forwarding to a\n * *new* callback if the prop is set again after mount (e.g. a parent sets it via a ref\n * callback after render, rather than at initial mount). Every text-entry-style component\n * with a `ref` escape-hatch prop (`ore-input`, `ore-textarea`, `ore-message-composer`,\n * `ore-file-input`) wires this identically — call it once from inside `onElement()`, alongside\n * whatever else that element needs wired.\n *\n * @example\n * ```ts\n * onElement(fieldRef, (el) => {\n *   const unwireField = tf.wire(el);\n *   const unwireRef = bindRefCallback(props.ref, el);\n *\n *   return () => {\n *     unwireField();\n *     unwireRef();\n *   };\n * });\n * ```\n */\nexport const bindRefCallback = <T extends Element>(ref: Readable<RefCallback<T>>, el: T): (() => void) => {\n  // Immediate fire for when the prop is already set on mount.\n  ref.value?.(el);\n\n  const sub = watch(ref, (cb) => cb?.(el));\n\n  return () => {\n    sub.dispose();\n    ref.value?.(null);\n  };\n};\n"],"mappings":";;AA4BA,IAAa,KAAsC,GAA+B,MAAwB;CAExG,EAAI,QAAQ,CAAE;CAEd,IAAM,IAAM,EAAM,IAAM,MAAO,IAAK,CAAE,CAAC;CAEvC,aAAa;EAEX,AADA,EAAI,QAAQ,GACZ,EAAI,QAAQ,IAAI;CAClB;AACF"}
+{"version":3,"file":"ref-callback.js","names":[],"sources":["../../src/core/ref-callback.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple';\n\n/** Shape every `ref` prop in this package uses — a JS-only escape hatch to the live element. */\nexport type RefCallback<T> = ((el: T | null) => void) | null | undefined;\n\n/**\n * Forwards a mounted element to a JS-only `ref` callback prop, and keeps forwarding to a\n * *new* callback if the prop is set again after mount (e.g. a parent sets it via a ref\n * callback after render, rather than at initial mount). Every text-entry-style component\n * with a `ref` escape-hatch prop (`ore-input`, `ore-textarea`, `ore-message-composer`,\n * `ore-file-input`) wires this identically — call it once from inside `onElement()`, alongside\n * whatever else that element needs wired.\n *\n * @example\n * ```ts\n * onElement(fieldRef, (el) => {\n *   const unwireField = tf.wire(el);\n *   const unwireRef = bindRefCallback(props.ref, el);\n *\n *   return () => {\n *     unwireField();\n *     unwireRef();\n *   };\n * });\n * ```\n */\nexport const bindRefCallback = <T extends Element>(ref: Readable<RefCallback<T>>, el: T): (() => void) => {\n  // Immediate fire for when the prop is already set on mount.\n  ref.value?.(el);\n\n  const sub = watch(ref, (cb) => cb?.(el));\n\n  return () => {\n    sub.dispose();\n    ref.value?.(null);\n  };\n};\n"],"mappings":";;AA2BA,IAAa,KAAsC,GAA+B,MAAwB;CAExG,EAAI,QAAQ,CAAE;CAEd,IAAM,IAAM,EAAM,IAAM,MAAO,IAAK,CAAE,CAAC;CAEvC,aAAa;EAEX,AADA,EAAI,QAAQ,GACZ,EAAI,QAAQ,IAAI;CAClB;AACF"}

package/dist/core/signals.cjs

@@ -1,2 +1,2 @@
-let e=require("@vielzeug/ripple"),t=require("@vielzeug/ripple/watch");var n=(n,r,i=e=>e)=>{let a=(0,e.signal)((0,e.untrack)(()=>i(n.value))),o=(0,t.watch)(n,e=>{a.value=i(e)});return r&&r.addEventListener(`abort`,()=>o.dispose(),{once:!0}),a};exports.syncedSignal=n;
+let e=require("@vielzeug/ripple");var t=(t,n,r=e=>e)=>{let i=(0,e.signal)((0,e.untrack)(()=>r(t.value))),a=(0,e.watch)(t,e=>{i.value=r(e)});return n&&n.addEventListener(`abort`,()=>a.dispose(),{once:!0}),i};exports.syncedSignal=t;
 //# sourceMappingURL=signals.cjs.map

package/dist/core/signals.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"signals.cjs","names":[],"sources":["../../src/core/signals.ts"],"sourcesContent":["import { type Readable, signal, type Signal, untrack } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\n// ── syncedSignal ──────────────────────────────────────────────────────────────\n\n/**\n * Creates a local writable `Signal<T>` that stays in sync with an external\n * `Reactive<T>`. When `abortSignal` is provided the watcher subscription\n * is disposed automatically on abort; otherwise the caller is responsible for\n * disposal.\n *\n * Initialised synchronously via `untrack` so the first render never reads a\n * stale value. The optional `transform` coerces each incoming value (e.g.\n * `Boolean`, `String`).\n *\n * @example\n * ```ts\n * const value = syncedSignal(options.value, options.signal, (v) => String(v ?? ''));\n * // Without lifecycle signal (test / non-component context):\n * const value = syncedSignal(source);\n * ```\n */\nexport const syncedSignal = <TIn, TOut = TIn>(\n  source: Readable<TIn>,\n  abortSignal?: AbortSignal,\n  transform: (value: TIn) => TOut = (v) => v as unknown as TOut,\n): Signal<TOut> => {\n  const local = signal<TOut>(untrack(() => transform(source.value)));\n  const sub = watch(source, (v) => {\n    local.value = transform(v);\n  });\n\n  if (abortSignal) {\n    abortSignal.addEventListener('abort', () => sub.dispose(), { once: true });\n  }\n\n  return local;\n};\n"],"mappings":"sEAsBA,IAAa,GACX,EACA,EACA,EAAmC,GAAM,IACxB,CACjB,IAAM,GAAA,EAAQ,EAAA,OAAA,EAAA,EAAa,EAAA,QAAA,KAAc,EAAU,EAAO,KAAK,CAAC,CAAC,EAC3D,GAAA,EAAM,EAAA,MAAA,CAAM,EAAS,GAAM,CAC/B,EAAM,MAAQ,EAAU,CAAC,CAC3B,CAAC,EAMD,OAJI,GACF,EAAY,iBAAiB,YAAe,EAAI,QAAQ,EAAG,CAAE,KAAM,EAAK,CAAC,EAGpE,CACT"}
+{"version":3,"file":"signals.cjs","names":[],"sources":["../../src/core/signals.ts"],"sourcesContent":["import { type Readable, type Signal, signal, untrack, watch } from '@vielzeug/ripple';\n\n// ── syncedSignal ──────────────────────────────────────────────────────────────\n\n/**\n * Creates a local writable `Signal<T>` that stays in sync with an external\n * `Reactive<T>`. When `abortSignal` is provided the watcher subscription\n * is disposed automatically on abort; otherwise the caller is responsible for\n * disposal.\n *\n * Initialised synchronously via `untrack` so the first render never reads a\n * stale value. The optional `transform` coerces each incoming value (e.g.\n * `Boolean`, `String`).\n *\n * @example\n * ```ts\n * const value = syncedSignal(options.value, options.signal, (v) => String(v ?? ''));\n * // Without lifecycle signal (test / non-component context):\n * const value = syncedSignal(source);\n * ```\n */\nexport const syncedSignal = <TIn, TOut = TIn>(\n  source: Readable<TIn>,\n  abortSignal?: AbortSignal,\n  transform: (value: TIn) => TOut = (v) => v as unknown as TOut,\n): Signal<TOut> => {\n  const local = signal<TOut>(untrack(() => transform(source.value)));\n  const sub = watch(source, (v) => {\n    local.value = transform(v);\n  });\n\n  if (abortSignal) {\n    abortSignal.addEventListener('abort', () => sub.dispose(), { once: true });\n  }\n\n  return local;\n};\n"],"mappings":"kCAqBA,IAAa,GACX,EACA,EACA,EAAmC,GAAM,IACxB,CACjB,IAAM,GAAA,EAAQ,EAAA,OAAA,EAAA,EAAa,EAAA,QAAA,KAAc,EAAU,EAAO,KAAK,CAAC,CAAC,EAC3D,GAAA,EAAM,EAAA,MAAA,CAAM,EAAS,GAAM,CAC/B,EAAM,MAAQ,EAAU,CAAC,CAC3B,CAAC,EAMD,OAJI,GACF,EAAY,iBAAiB,YAAe,EAAI,QAAQ,EAAG,CAAE,KAAM,EAAK,CAAC,EAGpE,CACT"}

package/dist/core/signals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"signals.d.ts","sourceRoot":"","sources":["../../src/core/signals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAU,KAAK,MAAM,EAAW,MAAM,kBAAkB,CAAC;AAK/E;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,EAAE,IAAI,GAAG,GAAG,EAC1C,QAAQ,QAAQ,CAAC,GAAG,CAAC,EACrB,cAAc,WAAW,EACzB,YAAW,CAAC,KAAK,EAAE,GAAG,KAAK,IAAkC,KAC5D,MAAM,CAAC,IAAI,CAWb,CAAC"}
+{"version":3,"file":"signals.d.ts","sourceRoot":"","sources":["../../src/core/signals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,MAAM,EAA0B,MAAM,kBAAkB,CAAC;AAItF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,EAAE,IAAI,GAAG,GAAG,EAC1C,QAAQ,QAAQ,CAAC,GAAG,CAAC,EACrB,cAAc,WAAW,EACzB,YAAW,CAAC,KAAK,EAAE,GAAG,KAAK,IAAkC,KAC5D,MAAM,CAAC,IAAI,CAWb,CAAC"}

package/dist/core/signals.js

@@ -1,5 +1,4 @@
-import { signal as e, untrack as t } from "@vielzeug/ripple";
-import { watch as n } from "@vielzeug/ripple/watch";
+import { signal as e, untrack as t, watch as n } from "@vielzeug/ripple";
 //#region src/core/signals.ts
 var r = (r, i, a = (e) => e) => {
 	let o = e(t(() => a(r.value))), s = n(r, (e) => {

package/dist/core/signals.js.map

@@ -1 +1 @@
-{"version":3,"file":"signals.js","names":[],"sources":["../../src/core/signals.ts"],"sourcesContent":["import { type Readable, signal, type Signal, untrack } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\n// ── syncedSignal ──────────────────────────────────────────────────────────────\n\n/**\n * Creates a local writable `Signal<T>` that stays in sync with an external\n * `Reactive<T>`. When `abortSignal` is provided the watcher subscription\n * is disposed automatically on abort; otherwise the caller is responsible for\n * disposal.\n *\n * Initialised synchronously via `untrack` so the first render never reads a\n * stale value. The optional `transform` coerces each incoming value (e.g.\n * `Boolean`, `String`).\n *\n * @example\n * ```ts\n * const value = syncedSignal(options.value, options.signal, (v) => String(v ?? ''));\n * // Without lifecycle signal (test / non-component context):\n * const value = syncedSignal(source);\n * ```\n */\nexport const syncedSignal = <TIn, TOut = TIn>(\n  source: Readable<TIn>,\n  abortSignal?: AbortSignal,\n  transform: (value: TIn) => TOut = (v) => v as unknown as TOut,\n): Signal<TOut> => {\n  const local = signal<TOut>(untrack(() => transform(source.value)));\n  const sub = watch(source, (v) => {\n    local.value = transform(v);\n  });\n\n  if (abortSignal) {\n    abortSignal.addEventListener('abort', () => sub.dispose(), { once: true });\n  }\n\n  return local;\n};\n"],"mappings":";;;AAsBA,IAAa,KACX,GACA,GACA,KAAmC,MAAM,MACxB;CACjB,IAAM,IAAQ,EAAa,QAAc,EAAU,EAAO,KAAK,CAAC,CAAC,GAC3D,IAAM,EAAM,IAAS,MAAM;EAC/B,EAAM,QAAQ,EAAU,CAAC;CAC3B,CAAC;CAMD,OAJI,KACF,EAAY,iBAAiB,eAAe,EAAI,QAAQ,GAAG,EAAE,MAAM,GAAK,CAAC,GAGpE;AACT"}
+{"version":3,"file":"signals.js","names":[],"sources":["../../src/core/signals.ts"],"sourcesContent":["import { type Readable, type Signal, signal, untrack, watch } from '@vielzeug/ripple';\n\n// ── syncedSignal ──────────────────────────────────────────────────────────────\n\n/**\n * Creates a local writable `Signal<T>` that stays in sync with an external\n * `Reactive<T>`. When `abortSignal` is provided the watcher subscription\n * is disposed automatically on abort; otherwise the caller is responsible for\n * disposal.\n *\n * Initialised synchronously via `untrack` so the first render never reads a\n * stale value. The optional `transform` coerces each incoming value (e.g.\n * `Boolean`, `String`).\n *\n * @example\n * ```ts\n * const value = syncedSignal(options.value, options.signal, (v) => String(v ?? ''));\n * // Without lifecycle signal (test / non-component context):\n * const value = syncedSignal(source);\n * ```\n */\nexport const syncedSignal = <TIn, TOut = TIn>(\n  source: Readable<TIn>,\n  abortSignal?: AbortSignal,\n  transform: (value: TIn) => TOut = (v) => v as unknown as TOut,\n): Signal<TOut> => {\n  const local = signal<TOut>(untrack(() => transform(source.value)));\n  const sub = watch(source, (v) => {\n    local.value = transform(v);\n  });\n\n  if (abortSignal) {\n    abortSignal.addEventListener('abort', () => sub.dispose(), { once: true });\n  }\n\n  return local;\n};\n"],"mappings":";;AAqBA,IAAa,KACX,GACA,GACA,KAAmC,MAAM,MACxB;CACjB,IAAM,IAAQ,EAAa,QAAc,EAAU,EAAO,KAAK,CAAC,CAAC,GAC3D,IAAM,EAAM,IAAS,MAAM;EAC/B,EAAM,QAAQ,EAAU,CAAC;CAC3B,CAAC;CAMD,OAJI,KACF,EAAY,iBAAiB,eAAe,EAAI,QAAQ,GAAG,EAAE,MAAM,GAAK,CAAC,GAGpE;AACT"}

package/dist/core/slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.cjs","names":[],"sources":["../../src/core/slider.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { clamp as clampRange } from '@vielzeug/arsenal/math';\n\nimport { toFiniteNumberOr, toPositiveStep } from './numbers';\n\n// ── Slider control ────────────────────────────────────────────────────────────\n\nexport type SliderControlOptions = {\n  disabled?: Readable<boolean | undefined>;\n  max?: Readable<number | string | undefined>;\n  min?: Readable<number | string | undefined>;\n  readonly?: Readable<boolean | undefined>;\n  step?: Readable<number | string | undefined>;\n};\n\nexport type SliderControl = {\n  clamp: (value: number) => number;\n  fromClientX: (clientX: number, rect: { left: number; width: number }) => number;\n  /**\n   * Handles keyboard navigation for a slider input.\n   * When the slider is disabled or readonly, the event is ignored and `false` is returned.\n   * @returns `true` when the event was handled and `onCommit` was called, `false` otherwise.\n   */\n  handleKeydown: (event: KeyboardEvent, currentValue: number, onCommit: (value: number) => void) => boolean;\n  max: () => number;\n  min: () => number;\n  nextFromKey: (key: string, current: number) => number | null;\n  snap: (value: number) => number;\n  toPercent: (value: number) => number;\n};\n\nexport const createSliderControl = (options: SliderControlOptions): SliderControl => {\n  const min = (): number => toFiniteNumberOr(options.min?.value, 0);\n  const max = (): number => toFiniteNumberOr(options.max?.value, 100);\n  const step = (): number => toPositiveStep(options.step?.value, 1);\n\n  const clamp = (value: number): number => {\n    const minValue = min();\n    const maxValue = max();\n\n    return clampRange(toFiniteNumberOr(value, minValue), minValue, maxValue);\n  };\n\n  const snap = (value: number): number => {\n    const minValue = min();\n\n    return clamp(Math.round(toFiniteNumberOr(value, minValue) / step()) * step());\n  };\n\n  const toPercent = (value: number): number => {\n    const minValue = min();\n    const maxValue = max();\n    const normalized = toFiniteNumberOr(value, minValue);\n\n    if (maxValue <= minValue) return 0;\n\n    return ((normalized - minValue) / (maxValue - minValue)) * 100;\n  };\n\n  const fromClientX = (clientX: number, rect: { left: number; width: number }): number => {\n    if (rect.width <= 0) return snap(min());\n\n    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n    const minValue = min();\n    const maxValue = max();\n\n    return snap(minValue + pct * (maxValue - minValue));\n  };\n\n  const nextFromKey = (key: string, current: number): number | null => {\n    const normalized = toFiniteNumberOr(current, min());\n\n    if (key === 'ArrowRight' || key === 'ArrowUp') return clamp(normalized + step());\n\n    if (key === 'ArrowLeft' || key === 'ArrowDown') return clamp(normalized - step());\n\n    if (key === 'Home') return min();\n\n    if (key === 'End') return max();\n\n    return null;\n  };\n\n  const handleKeydown = (event: KeyboardEvent, currentValue: number, onCommit: (value: number) => void): boolean => {\n    if (options.disabled?.value || options.readonly?.value) return false;\n\n    const next = nextFromKey(event.key, currentValue);\n\n    if (next === null) return false;\n\n    event.preventDefault();\n    onCommit(next);\n\n    return true;\n  };\n\n  return { clamp, fromClientX, handleKeydown, max, min, nextFromKey, snap, toPercent };\n};\n"],"mappings":"yEAgCA,IAAa,EAAuB,GAAiD,CACnF,IAAM,MAAoB,EAAA,iBAAiB,EAAQ,KAAK,MAAO,CAAC,EAC1D,MAAoB,EAAA,iBAAiB,EAAQ,KAAK,MAAO,GAAG,EAC5D,MAAqB,EAAA,eAAe,EAAQ,MAAM,MAAO,CAAC,EAE1D,EAAS,GAA0B,CACvC,IAAM,EAAW,EAAI,EACf,EAAW,EAAI,EAErB,OAAA,EAAO,EAAA,MAAA,CAAW,EAAA,iBAAiB,EAAO,CAAQ,EAAG,EAAU,CAAQ,CACzE,EAEM,EAAQ,GAA0B,CACtC,IAAM,EAAW,EAAI,EAErB,OAAO,EAAM,KAAK,MAAM,EAAA,iBAAiB,EAAO,CAAQ,EAAI,EAAK,CAAC,EAAI,EAAK,CAAC,CAC9E,EAEM,EAAa,GAA0B,CAC3C,IAAM,EAAW,EAAI,EACf,EAAW,EAAI,EACf,EAAa,EAAA,iBAAiB,EAAO,CAAQ,EAInD,OAFI,GAAY,EAAiB,GAExB,EAAa,IAAa,EAAW,GAAa,GAC7D,EAEM,GAAe,EAAiB,IAAkD,CACtF,GAAI,EAAK,OAAS,EAAG,OAAO,EAAK,EAAI,CAAC,EAEtC,IAAM,EAAM,KAAK,IAAI,EAAG,KAAK,IAAI,GAAI,EAAU,EAAK,MAAQ,EAAK,KAAK,CAAC,EACjE,EAAW,EAAI,EACf,EAAW,EAAI,EAErB,OAAO,EAAK,EAAW,GAAO,EAAW,EAAS,CACpD,EAEM,GAAe,EAAa,IAAmC,CACnE,IAAM,EAAa,EAAA,iBAAiB,EAAS,EAAI,CAAC,EAUlD,OARI,IAAQ,cAAgB,IAAQ,UAAkB,EAAM,EAAa,EAAK,CAAC,EAE3E,IAAQ,aAAe,IAAQ,YAAoB,EAAM,EAAa,EAAK,CAAC,EAE5E,IAAQ,OAAe,EAAI,EAE3B,IAAQ,MAAc,EAAI,EAEvB,IACT,EAeA,MAAO,CAAE,QAAO,cAAa,eAbN,EAAsB,EAAsB,IAA+C,CAChH,GAAI,EAAQ,UAAU,OAAS,EAAQ,UAAU,MAAO,MAAO,GAE/D,IAAM,EAAO,EAAY,EAAM,IAAK,CAAY,EAOhD,OALI,IAAS,OAEb,EAAM,eAAe,EACrB,EAAS,CAAI,EAEN,GACT,EAE4C,MAAK,MAAK,cAAa,OAAM,WAAU,CACrF"}
+{"version":3,"file":"slider.cjs","names":[],"sources":["../../src/core/slider.ts"],"sourcesContent":["import { clamp as clampRange } from '@vielzeug/arsenal/math';\nimport type { Readable } from '@vielzeug/ripple';\n\nimport { toFiniteNumberOr, toPositiveStep } from './numbers';\n\n// ── Slider control ────────────────────────────────────────────────────────────\n\nexport type SliderControlOptions = {\n  disabled?: Readable<boolean | undefined>;\n  max?: Readable<number | string | undefined>;\n  min?: Readable<number | string | undefined>;\n  readonly?: Readable<boolean | undefined>;\n  step?: Readable<number | string | undefined>;\n};\n\nexport type SliderControl = {\n  clamp: (value: number) => number;\n  fromClientX: (clientX: number, rect: { left: number; width: number }) => number;\n  /**\n   * Handles keyboard navigation for a slider input.\n   * When the slider is disabled or readonly, the event is ignored and `false` is returned.\n   * @returns `true` when the event was handled and `onCommit` was called, `false` otherwise.\n   */\n  handleKeydown: (event: KeyboardEvent, currentValue: number, onCommit: (value: number) => void) => boolean;\n  max: () => number;\n  min: () => number;\n  nextFromKey: (key: string, current: number) => number | null;\n  snap: (value: number) => number;\n  toPercent: (value: number) => number;\n};\n\nexport const createSliderControl = (options: SliderControlOptions): SliderControl => {\n  const min = (): number => toFiniteNumberOr(options.min?.value, 0);\n  const max = (): number => toFiniteNumberOr(options.max?.value, 100);\n  const step = (): number => toPositiveStep(options.step?.value, 1);\n\n  const clamp = (value: number): number => {\n    const minValue = min();\n    const maxValue = max();\n\n    return clampRange(toFiniteNumberOr(value, minValue), minValue, maxValue);\n  };\n\n  const snap = (value: number): number => {\n    const minValue = min();\n\n    return clamp(Math.round(toFiniteNumberOr(value, minValue) / step()) * step());\n  };\n\n  const toPercent = (value: number): number => {\n    const minValue = min();\n    const maxValue = max();\n    const normalized = toFiniteNumberOr(value, minValue);\n\n    if (maxValue <= minValue) return 0;\n\n    return ((normalized - minValue) / (maxValue - minValue)) * 100;\n  };\n\n  const fromClientX = (clientX: number, rect: { left: number; width: number }): number => {\n    if (rect.width <= 0) return snap(min());\n\n    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n    const minValue = min();\n    const maxValue = max();\n\n    return snap(minValue + pct * (maxValue - minValue));\n  };\n\n  const nextFromKey = (key: string, current: number): number | null => {\n    const normalized = toFiniteNumberOr(current, min());\n\n    if (key === 'ArrowRight' || key === 'ArrowUp') return clamp(normalized + step());\n\n    if (key === 'ArrowLeft' || key === 'ArrowDown') return clamp(normalized - step());\n\n    if (key === 'Home') return min();\n\n    if (key === 'End') return max();\n\n    return null;\n  };\n\n  const handleKeydown = (event: KeyboardEvent, currentValue: number, onCommit: (value: number) => void): boolean => {\n    if (options.disabled?.value || options.readonly?.value) return false;\n\n    const next = nextFromKey(event.key, currentValue);\n\n    if (next === null) return false;\n\n    event.preventDefault();\n    onCommit(next);\n\n    return true;\n  };\n\n  return { clamp, fromClientX, handleKeydown, max, min, nextFromKey, snap, toPercent };\n};\n"],"mappings":"yEA+BA,IAAa,EAAuB,GAAiD,CACnF,IAAM,MAAoB,EAAA,iBAAiB,EAAQ,KAAK,MAAO,CAAC,EAC1D,MAAoB,EAAA,iBAAiB,EAAQ,KAAK,MAAO,GAAG,EAC5D,MAAqB,EAAA,eAAe,EAAQ,MAAM,MAAO,CAAC,EAE1D,EAAS,GAA0B,CACvC,IAAM,EAAW,EAAI,EACf,EAAW,EAAI,EAErB,OAAA,EAAO,EAAA,MAAA,CAAW,EAAA,iBAAiB,EAAO,CAAQ,EAAG,EAAU,CAAQ,CACzE,EAEM,EAAQ,GAA0B,CACtC,IAAM,EAAW,EAAI,EAErB,OAAO,EAAM,KAAK,MAAM,EAAA,iBAAiB,EAAO,CAAQ,EAAI,EAAK,CAAC,EAAI,EAAK,CAAC,CAC9E,EAEM,EAAa,GAA0B,CAC3C,IAAM,EAAW,EAAI,EACf,EAAW,EAAI,EACf,EAAa,EAAA,iBAAiB,EAAO,CAAQ,EAInD,OAFI,GAAY,EAAiB,GAExB,EAAa,IAAa,EAAW,GAAa,GAC7D,EAEM,GAAe,EAAiB,IAAkD,CACtF,GAAI,EAAK,OAAS,EAAG,OAAO,EAAK,EAAI,CAAC,EAEtC,IAAM,EAAM,KAAK,IAAI,EAAG,KAAK,IAAI,GAAI,EAAU,EAAK,MAAQ,EAAK,KAAK,CAAC,EACjE,EAAW,EAAI,EACf,EAAW,EAAI,EAErB,OAAO,EAAK,EAAW,GAAO,EAAW,EAAS,CACpD,EAEM,GAAe,EAAa,IAAmC,CACnE,IAAM,EAAa,EAAA,iBAAiB,EAAS,EAAI,CAAC,EAUlD,OARI,IAAQ,cAAgB,IAAQ,UAAkB,EAAM,EAAa,EAAK,CAAC,EAE3E,IAAQ,aAAe,IAAQ,YAAoB,EAAM,EAAa,EAAK,CAAC,EAE5E,IAAQ,OAAe,EAAI,EAE3B,IAAQ,MAAc,EAAI,EAEvB,IACT,EAeA,MAAO,CAAE,QAAO,cAAa,eAbN,EAAsB,EAAsB,IAA+C,CAChH,GAAI,EAAQ,UAAU,OAAS,EAAQ,UAAU,MAAO,MAAO,GAE/D,IAAM,EAAO,EAAY,EAAM,IAAK,CAAY,EAOhD,OALI,IAAS,OAEb,EAAM,eAAe,EACrB,EAAS,CAAI,EAEN,GACT,EAE4C,MAAK,MAAK,cAAa,OAAM,WAAU,CACrF"}

package/dist/core/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/core/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,GAAG,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IAChF;;;;OAIG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,KAAK,OAAO,CAAC;IAC1G,GAAG,EAAE,MAAM,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC7D,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,SAAS,oBAAoB,KAAG,aAkEnE,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/core/slider.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,GAAG,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IAChF;;;;OAIG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,KAAK,OAAO,CAAC;IAC1G,GAAG,EAAE,MAAM,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC7D,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,SAAS,oBAAoB,KAAG,aAkEnE,CAAC"}

package/dist/core/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/core/slider.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { clamp as clampRange } from '@vielzeug/arsenal/math';\n\nimport { toFiniteNumberOr, toPositiveStep } from './numbers';\n\n// ── Slider control ────────────────────────────────────────────────────────────\n\nexport type SliderControlOptions = {\n  disabled?: Readable<boolean | undefined>;\n  max?: Readable<number | string | undefined>;\n  min?: Readable<number | string | undefined>;\n  readonly?: Readable<boolean | undefined>;\n  step?: Readable<number | string | undefined>;\n};\n\nexport type SliderControl = {\n  clamp: (value: number) => number;\n  fromClientX: (clientX: number, rect: { left: number; width: number }) => number;\n  /**\n   * Handles keyboard navigation for a slider input.\n   * When the slider is disabled or readonly, the event is ignored and `false` is returned.\n   * @returns `true` when the event was handled and `onCommit` was called, `false` otherwise.\n   */\n  handleKeydown: (event: KeyboardEvent, currentValue: number, onCommit: (value: number) => void) => boolean;\n  max: () => number;\n  min: () => number;\n  nextFromKey: (key: string, current: number) => number | null;\n  snap: (value: number) => number;\n  toPercent: (value: number) => number;\n};\n\nexport const createSliderControl = (options: SliderControlOptions): SliderControl => {\n  const min = (): number => toFiniteNumberOr(options.min?.value, 0);\n  const max = (): number => toFiniteNumberOr(options.max?.value, 100);\n  const step = (): number => toPositiveStep(options.step?.value, 1);\n\n  const clamp = (value: number): number => {\n    const minValue = min();\n    const maxValue = max();\n\n    return clampRange(toFiniteNumberOr(value, minValue), minValue, maxValue);\n  };\n\n  const snap = (value: number): number => {\n    const minValue = min();\n\n    return clamp(Math.round(toFiniteNumberOr(value, minValue) / step()) * step());\n  };\n\n  const toPercent = (value: number): number => {\n    const minValue = min();\n    const maxValue = max();\n    const normalized = toFiniteNumberOr(value, minValue);\n\n    if (maxValue <= minValue) return 0;\n\n    return ((normalized - minValue) / (maxValue - minValue)) * 100;\n  };\n\n  const fromClientX = (clientX: number, rect: { left: number; width: number }): number => {\n    if (rect.width <= 0) return snap(min());\n\n    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n    const minValue = min();\n    const maxValue = max();\n\n    return snap(minValue + pct * (maxValue - minValue));\n  };\n\n  const nextFromKey = (key: string, current: number): number | null => {\n    const normalized = toFiniteNumberOr(current, min());\n\n    if (key === 'ArrowRight' || key === 'ArrowUp') return clamp(normalized + step());\n\n    if (key === 'ArrowLeft' || key === 'ArrowDown') return clamp(normalized - step());\n\n    if (key === 'Home') return min();\n\n    if (key === 'End') return max();\n\n    return null;\n  };\n\n  const handleKeydown = (event: KeyboardEvent, currentValue: number, onCommit: (value: number) => void): boolean => {\n    if (options.disabled?.value || options.readonly?.value) return false;\n\n    const next = nextFromKey(event.key, currentValue);\n\n    if (next === null) return false;\n\n    event.preventDefault();\n    onCommit(next);\n\n    return true;\n  };\n\n  return { clamp, fromClientX, handleKeydown, max, min, nextFromKey, snap, toPercent };\n};\n"],"mappings":";;;AAgCA,IAAa,KAAuB,MAAiD;CACnF,IAAM,UAAoB,EAAiB,EAAQ,KAAK,OAAO,CAAC,GAC1D,UAAoB,EAAiB,EAAQ,KAAK,OAAO,GAAG,GAC5D,UAAqB,EAAe,EAAQ,MAAM,OAAO,CAAC,GAE1D,KAAS,MAA0B;EACvC,IAAM,IAAW,EAAI,GACf,IAAW,EAAI;EAErB,OAAO,EAAW,EAAiB,GAAO,CAAQ,GAAG,GAAU,CAAQ;CACzE,GAEM,KAAQ,MAA0B;EACtC,IAAM,IAAW,EAAI;EAErB,OAAO,EAAM,KAAK,MAAM,EAAiB,GAAO,CAAQ,IAAI,EAAK,CAAC,IAAI,EAAK,CAAC;CAC9E,GAEM,KAAa,MAA0B;EAC3C,IAAM,IAAW,EAAI,GACf,IAAW,EAAI,GACf,IAAa,EAAiB,GAAO,CAAQ;EAInD,OAFI,KAAY,IAAiB,KAExB,IAAa,MAAa,IAAW,KAAa;CAC7D,GAEM,KAAe,GAAiB,MAAkD;EACtF,IAAI,EAAK,SAAS,GAAG,OAAO,EAAK,EAAI,CAAC;EAEtC,IAAM,IAAM,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,IAAU,EAAK,QAAQ,EAAK,KAAK,CAAC,GACjE,IAAW,EAAI,GACf,IAAW,EAAI;EAErB,OAAO,EAAK,IAAW,KAAO,IAAW,EAAS;CACpD,GAEM,KAAe,GAAa,MAAmC;EACnE,IAAM,IAAa,EAAiB,GAAS,EAAI,CAAC;EAUlD,OARI,MAAQ,gBAAgB,MAAQ,YAAkB,EAAM,IAAa,EAAK,CAAC,IAE3E,MAAQ,eAAe,MAAQ,cAAoB,EAAM,IAAa,EAAK,CAAC,IAE5E,MAAQ,SAAe,EAAI,IAE3B,MAAQ,QAAc,EAAI,IAEvB;CACT;CAeA,OAAO;EAAE,OAAA;EAAO;EAAa,gBAbN,GAAsB,GAAsB,MAA+C;GAChH,IAAI,EAAQ,UAAU,SAAS,EAAQ,UAAU,OAAO,OAAO;GAE/D,IAAM,IAAO,EAAY,EAAM,KAAK,CAAY;GAOhD,OALI,MAAS,SAEb,EAAM,eAAe,GACrB,EAAS,CAAI,GAEN;EACT;EAE4C;EAAK;EAAK;EAAa;EAAM;CAAU;AACrF"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/core/slider.ts"],"sourcesContent":["import { clamp as clampRange } from '@vielzeug/arsenal/math';\nimport type { Readable } from '@vielzeug/ripple';\n\nimport { toFiniteNumberOr, toPositiveStep } from './numbers';\n\n// ── Slider control ────────────────────────────────────────────────────────────\n\nexport type SliderControlOptions = {\n  disabled?: Readable<boolean | undefined>;\n  max?: Readable<number | string | undefined>;\n  min?: Readable<number | string | undefined>;\n  readonly?: Readable<boolean | undefined>;\n  step?: Readable<number | string | undefined>;\n};\n\nexport type SliderControl = {\n  clamp: (value: number) => number;\n  fromClientX: (clientX: number, rect: { left: number; width: number }) => number;\n  /**\n   * Handles keyboard navigation for a slider input.\n   * When the slider is disabled or readonly, the event is ignored and `false` is returned.\n   * @returns `true` when the event was handled and `onCommit` was called, `false` otherwise.\n   */\n  handleKeydown: (event: KeyboardEvent, currentValue: number, onCommit: (value: number) => void) => boolean;\n  max: () => number;\n  min: () => number;\n  nextFromKey: (key: string, current: number) => number | null;\n  snap: (value: number) => number;\n  toPercent: (value: number) => number;\n};\n\nexport const createSliderControl = (options: SliderControlOptions): SliderControl => {\n  const min = (): number => toFiniteNumberOr(options.min?.value, 0);\n  const max = (): number => toFiniteNumberOr(options.max?.value, 100);\n  const step = (): number => toPositiveStep(options.step?.value, 1);\n\n  const clamp = (value: number): number => {\n    const minValue = min();\n    const maxValue = max();\n\n    return clampRange(toFiniteNumberOr(value, minValue), minValue, maxValue);\n  };\n\n  const snap = (value: number): number => {\n    const minValue = min();\n\n    return clamp(Math.round(toFiniteNumberOr(value, minValue) / step()) * step());\n  };\n\n  const toPercent = (value: number): number => {\n    const minValue = min();\n    const maxValue = max();\n    const normalized = toFiniteNumberOr(value, minValue);\n\n    if (maxValue <= minValue) return 0;\n\n    return ((normalized - minValue) / (maxValue - minValue)) * 100;\n  };\n\n  const fromClientX = (clientX: number, rect: { left: number; width: number }): number => {\n    if (rect.width <= 0) return snap(min());\n\n    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n    const minValue = min();\n    const maxValue = max();\n\n    return snap(minValue + pct * (maxValue - minValue));\n  };\n\n  const nextFromKey = (key: string, current: number): number | null => {\n    const normalized = toFiniteNumberOr(current, min());\n\n    if (key === 'ArrowRight' || key === 'ArrowUp') return clamp(normalized + step());\n\n    if (key === 'ArrowLeft' || key === 'ArrowDown') return clamp(normalized - step());\n\n    if (key === 'Home') return min();\n\n    if (key === 'End') return max();\n\n    return null;\n  };\n\n  const handleKeydown = (event: KeyboardEvent, currentValue: number, onCommit: (value: number) => void): boolean => {\n    if (options.disabled?.value || options.readonly?.value) return false;\n\n    const next = nextFromKey(event.key, currentValue);\n\n    if (next === null) return false;\n\n    event.preventDefault();\n    onCommit(next);\n\n    return true;\n  };\n\n  return { clamp, fromClientX, handleKeydown, max, min, nextFromKey, snap, toPercent };\n};\n"],"mappings":";;;AA+BA,IAAa,KAAuB,MAAiD;CACnF,IAAM,UAAoB,EAAiB,EAAQ,KAAK,OAAO,CAAC,GAC1D,UAAoB,EAAiB,EAAQ,KAAK,OAAO,GAAG,GAC5D,UAAqB,EAAe,EAAQ,MAAM,OAAO,CAAC,GAE1D,KAAS,MAA0B;EACvC,IAAM,IAAW,EAAI,GACf,IAAW,EAAI;EAErB,OAAO,EAAW,EAAiB,GAAO,CAAQ,GAAG,GAAU,CAAQ;CACzE,GAEM,KAAQ,MAA0B;EACtC,IAAM,IAAW,EAAI;EAErB,OAAO,EAAM,KAAK,MAAM,EAAiB,GAAO,CAAQ,IAAI,EAAK,CAAC,IAAI,EAAK,CAAC;CAC9E,GAEM,KAAa,MAA0B;EAC3C,IAAM,IAAW,EAAI,GACf,IAAW,EAAI,GACf,IAAa,EAAiB,GAAO,CAAQ;EAInD,OAFI,KAAY,IAAiB,KAExB,IAAa,MAAa,IAAW,KAAa;CAC7D,GAEM,KAAe,GAAiB,MAAkD;EACtF,IAAI,EAAK,SAAS,GAAG,OAAO,EAAK,EAAI,CAAC;EAEtC,IAAM,IAAM,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,IAAU,EAAK,QAAQ,EAAK,KAAK,CAAC,GACjE,IAAW,EAAI,GACf,IAAW,EAAI;EAErB,OAAO,EAAK,IAAW,KAAO,IAAW,EAAS;CACpD,GAEM,KAAe,GAAa,MAAmC;EACnE,IAAM,IAAa,EAAiB,GAAS,EAAI,CAAC;EAUlD,OARI,MAAQ,gBAAgB,MAAQ,YAAkB,EAAM,IAAa,EAAK,CAAC,IAE3E,MAAQ,eAAe,MAAQ,cAAoB,EAAM,IAAa,EAAK,CAAC,IAE5E,MAAQ,SAAe,EAAI,IAE3B,MAAQ,QAAc,EAAI,IAEvB;CACT;CAeA,OAAO;EAAE,OAAA;EAAO;EAAa,gBAbN,GAAsB,GAAsB,MAA+C;GAChH,IAAI,EAAQ,UAAU,SAAS,EAAQ,UAAU,OAAO,OAAO;GAE/D,IAAM,IAAO,EAAY,EAAM,KAAK,CAAY;GAOhD,OALI,MAAS,SAEb,EAAM,eAAe,GACrB,EAAS,CAAI,GAEN;EACT;EAE4C;EAAK;EAAK;EAAa;EAAM;CAAU;AACrF"}

package/dist/core/spinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.cjs","names":[],"sources":["../../src/core/spinner.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { clamp as clampRange } from '@vielzeug/arsenal/math';\n\nimport { dispatchKeyboardAction } from './keyboard';\nimport { toFiniteNumber, toPositiveStep } from './numbers';\n\nexport type SpinnerControlOptions = {\n  commit: (value: number | null, originalEvent?: Event) => void;\n  disabled?: Readable<boolean | undefined>;\n  largeStep?: Readable<number | string | undefined>;\n  max?: Readable<number | string | undefined>;\n  min?: Readable<number | string | undefined>;\n  parse: () => number | null;\n  readonly?: Readable<boolean | undefined>;\n  step?: Readable<number | string | undefined>;\n};\n\nexport type SpinnerControl = {\n  atMax: () => boolean;\n  atMin: () => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  incrementBy: (delta: number, originalEvent?: Event) => void;\n};\n\nexport const createSpinnerControl = (options: SpinnerControlOptions): SpinnerControl => {\n  const isBlocked = (): boolean => Boolean(options.disabled?.value) || Boolean(options.readonly?.value);\n\n  const min = (): number | undefined => {\n    return toFiniteNumber(options.min?.value);\n  };\n\n  const max = (): number | undefined => {\n    return toFiniteNumber(options.max?.value);\n  };\n\n  const clamp = (value: number): number => {\n    return clampRange(value, min(), max());\n  };\n\n  const step = (): number => toPositiveStep(options.step?.value, 1);\n\n  const largeStep = (): number => {\n    const s = step();\n\n    return toPositiveStep(options.largeStep?.value, s * 10);\n  };\n\n  const currentOrFallback = (): number => {\n    const parsed = options.parse();\n\n    if (parsed != null) return parsed;\n\n    const minValue = min();\n\n    if (minValue != null) return minValue;\n\n    return 0;\n  };\n\n  const commit = (value: number | null, originalEvent?: Event): void => {\n    if (value == null) {\n      options.commit(null, originalEvent);\n\n      return;\n    }\n\n    options.commit(clamp(value), originalEvent);\n  };\n\n  const incrementBy = (delta: number, originalEvent?: Event): void => {\n    if (isBlocked()) return;\n\n    commit(currentOrFallback() + delta, originalEvent);\n  };\n\n  const atMin = (): boolean => {\n    const parsed = options.parse();\n    const minValue = min();\n\n    return parsed != null && minValue != null && parsed <= minValue;\n  };\n\n  const atMax = (): boolean => {\n    const parsed = options.parse();\n    const maxValue = max();\n\n    return parsed != null && maxValue != null && parsed >= maxValue;\n  };\n\n  const handleKeydown = (event: KeyboardEvent): boolean => {\n    if (isBlocked()) return false;\n\n    return dispatchKeyboardAction(event, {\n      keymap: {\n        ArrowDown: () => incrementBy(-step(), event),\n        ArrowUp: () => incrementBy(step(), event),\n        End: () => {\n          const maxValue = max();\n\n          if (maxValue == null) return false;\n\n          commit(maxValue, event);\n        },\n        Home: () => {\n          const minValue = min();\n\n          if (minValue == null) return false;\n\n          commit(minValue, event);\n        },\n        PageDown: () => incrementBy(-largeStep(), event),\n        PageUp: () => incrementBy(largeStep(), event),\n      },\n      preventDefault: 'after',\n    });\n  };\n\n  return {\n    atMax,\n    atMin,\n    handleKeydown,\n    incrementBy,\n  };\n};\n"],"mappings":"qGAyBA,IAAa,EAAwB,GAAmD,CACtF,IAAM,MAA2B,EAAQ,EAAQ,UAAU,OAAU,EAAQ,EAAQ,UAAU,MAEzF,MACG,EAAA,eAAe,EAAQ,KAAK,KAAK,EAGpC,MACG,EAAA,eAAe,EAAQ,KAAK,KAAK,EAGpC,EAAS,IACb,EAAO,EAAA,MAAA,CAAW,EAAO,EAAI,EAAG,EAAI,CAAC,EAGjC,MAAqB,EAAA,eAAe,EAAQ,MAAM,MAAO,CAAC,EAE1D,MAA0B,CAC9B,IAAM,EAAI,EAAK,EAEf,OAAO,EAAA,eAAe,EAAQ,WAAW,MAAO,EAAI,EAAE,CACxD,EAEM,MACW,EAAQ,MAEnB,GAEa,EAEb,GAEG,EAGH,GAAU,EAAsB,IAAgC,CACpE,GAAI,GAAS,KAAM,CACjB,EAAQ,OAAO,KAAM,CAAa,EAElC,MACF,CAEA,EAAQ,OAAO,EAAM,CAAK,EAAG,CAAa,CAC5C,EAEM,GAAe,EAAe,IAAgC,CAC9D,EAAU,GAEd,EAAO,EAAkB,EAAI,EAAO,CAAa,CACnD,EA4CA,MAAO,CACL,UApC2B,CAC3B,IAAM,EAAS,EAAQ,MAAM,EACvB,EAAW,EAAI,EAErB,OAAO,GAAU,MAAQ,GAAY,MAAQ,GAAU,CACzD,EAgCE,UA5C2B,CAC3B,IAAM,EAAS,EAAQ,MAAM,EACvB,EAAW,EAAI,EAErB,OAAO,GAAU,MAAQ,GAAY,MAAQ,GAAU,CACzD,EAwCE,cA/BqB,GACrB,CAAI,EAAU,GAEP,EAAA,uBAAuB,EAAO,CACnC,OAAQ,CACN,cAAiB,EAAY,CAAC,EAAK,EAAG,CAAK,EAC3C,YAAe,EAAY,EAAK,EAAG,CAAK,EACxC,QAAW,CACT,IAAM,EAAW,EAAI,EAErB,GAAI,GAAY,KAAM,MAAO,GAE7B,EAAO,EAAU,CAAK,CACxB,EACA,SAAY,CACV,IAAM,EAAW,EAAI,EAErB,GAAI,GAAY,KAAM,MAAO,GAE7B,EAAO,EAAU,CAAK,CACxB,EACA,aAAgB,EAAY,CAAC,EAAU,EAAG,CAAK,EAC/C,WAAc,EAAY,EAAU,EAAG,CAAK,CAC9C,EACA,eAAgB,OAClB,CAAC,EAOD,aACF,CACF"}
+{"version":3,"file":"spinner.cjs","names":[],"sources":["../../src/core/spinner.ts"],"sourcesContent":["import { clamp as clampRange } from '@vielzeug/arsenal/math';\nimport type { Readable } from '@vielzeug/ripple';\n\nimport { dispatchKeyboardAction } from './keyboard';\nimport { toFiniteNumber, toPositiveStep } from './numbers';\n\nexport type SpinnerControlOptions = {\n  commit: (value: number | null, originalEvent?: Event) => void;\n  disabled?: Readable<boolean | undefined>;\n  largeStep?: Readable<number | string | undefined>;\n  max?: Readable<number | string | undefined>;\n  min?: Readable<number | string | undefined>;\n  parse: () => number | null;\n  readonly?: Readable<boolean | undefined>;\n  step?: Readable<number | string | undefined>;\n};\n\nexport type SpinnerControl = {\n  atMax: () => boolean;\n  atMin: () => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  incrementBy: (delta: number, originalEvent?: Event) => void;\n};\n\nexport const createSpinnerControl = (options: SpinnerControlOptions): SpinnerControl => {\n  const isBlocked = (): boolean => Boolean(options.disabled?.value) || Boolean(options.readonly?.value);\n\n  const min = (): number | undefined => {\n    return toFiniteNumber(options.min?.value);\n  };\n\n  const max = (): number | undefined => {\n    return toFiniteNumber(options.max?.value);\n  };\n\n  const clamp = (value: number): number => {\n    return clampRange(value, min(), max());\n  };\n\n  const step = (): number => toPositiveStep(options.step?.value, 1);\n\n  const largeStep = (): number => {\n    const s = step();\n\n    return toPositiveStep(options.largeStep?.value, s * 10);\n  };\n\n  const currentOrFallback = (): number => {\n    const parsed = options.parse();\n\n    if (parsed != null) return parsed;\n\n    const minValue = min();\n\n    if (minValue != null) return minValue;\n\n    return 0;\n  };\n\n  const commit = (value: number | null, originalEvent?: Event): void => {\n    if (value == null) {\n      options.commit(null, originalEvent);\n\n      return;\n    }\n\n    options.commit(clamp(value), originalEvent);\n  };\n\n  const incrementBy = (delta: number, originalEvent?: Event): void => {\n    if (isBlocked()) return;\n\n    commit(currentOrFallback() + delta, originalEvent);\n  };\n\n  const atMin = (): boolean => {\n    const parsed = options.parse();\n    const minValue = min();\n\n    return parsed != null && minValue != null && parsed <= minValue;\n  };\n\n  const atMax = (): boolean => {\n    const parsed = options.parse();\n    const maxValue = max();\n\n    return parsed != null && maxValue != null && parsed >= maxValue;\n  };\n\n  const handleKeydown = (event: KeyboardEvent): boolean => {\n    if (isBlocked()) return false;\n\n    return dispatchKeyboardAction(event, {\n      keymap: {\n        ArrowDown: () => incrementBy(-step(), event),\n        ArrowUp: () => incrementBy(step(), event),\n        End: () => {\n          const maxValue = max();\n\n          if (maxValue == null) return false;\n\n          commit(maxValue, event);\n        },\n        Home: () => {\n          const minValue = min();\n\n          if (minValue == null) return false;\n\n          commit(minValue, event);\n        },\n        PageDown: () => incrementBy(-largeStep(), event),\n        PageUp: () => incrementBy(largeStep(), event),\n      },\n      preventDefault: 'after',\n    });\n  };\n\n  return {\n    atMax,\n    atMin,\n    handleKeydown,\n    incrementBy,\n  };\n};\n"],"mappings":"qGAwBA,IAAa,EAAwB,GAAmD,CACtF,IAAM,MAA2B,EAAQ,EAAQ,UAAU,OAAU,EAAQ,EAAQ,UAAU,MAEzF,MACG,EAAA,eAAe,EAAQ,KAAK,KAAK,EAGpC,MACG,EAAA,eAAe,EAAQ,KAAK,KAAK,EAGpC,EAAS,IACb,EAAO,EAAA,MAAA,CAAW,EAAO,EAAI,EAAG,EAAI,CAAC,EAGjC,MAAqB,EAAA,eAAe,EAAQ,MAAM,MAAO,CAAC,EAE1D,MAA0B,CAC9B,IAAM,EAAI,EAAK,EAEf,OAAO,EAAA,eAAe,EAAQ,WAAW,MAAO,EAAI,EAAE,CACxD,EAEM,MACW,EAAQ,MAEnB,GAEa,EAEb,GAEG,EAGH,GAAU,EAAsB,IAAgC,CACpE,GAAI,GAAS,KAAM,CACjB,EAAQ,OAAO,KAAM,CAAa,EAElC,MACF,CAEA,EAAQ,OAAO,EAAM,CAAK,EAAG,CAAa,CAC5C,EAEM,GAAe,EAAe,IAAgC,CAC9D,EAAU,GAEd,EAAO,EAAkB,EAAI,EAAO,CAAa,CACnD,EA4CA,MAAO,CACL,UApC2B,CAC3B,IAAM,EAAS,EAAQ,MAAM,EACvB,EAAW,EAAI,EAErB,OAAO,GAAU,MAAQ,GAAY,MAAQ,GAAU,CACzD,EAgCE,UA5C2B,CAC3B,IAAM,EAAS,EAAQ,MAAM,EACvB,EAAW,EAAI,EAErB,OAAO,GAAU,MAAQ,GAAY,MAAQ,GAAU,CACzD,EAwCE,cA/BqB,GACrB,CAAI,EAAU,GAEP,EAAA,uBAAuB,EAAO,CACnC,OAAQ,CACN,cAAiB,EAAY,CAAC,EAAK,EAAG,CAAK,EAC3C,YAAe,EAAY,EAAK,EAAG,CAAK,EACxC,QAAW,CACT,IAAM,EAAW,EAAI,EAErB,GAAI,GAAY,KAAM,MAAO,GAE7B,EAAO,EAAU,CAAK,CACxB,EACA,SAAY,CACV,IAAM,EAAW,EAAI,EAErB,GAAI,GAAY,KAAM,MAAO,GAE7B,EAAO,EAAU,CAAK,CACxB,EACA,aAAgB,EAAY,CAAC,EAAU,EAAG,CAAK,EAC/C,WAAc,EAAY,EAAU,EAAG,CAAK,CAC9C,EACA,eAAgB,OAClB,CAAC,EAOD,aACF,CACF"}

package/dist/core/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/core/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOjD,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9D,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAClD,GAAG,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,KAAK,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,OAAO,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;IACjD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,qBAAqB,KAAG,cAmGrE,CAAC"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/core/spinner.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKjD,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9D,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAClD,GAAG,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,KAAK,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,OAAO,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;IACjD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,qBAAqB,KAAG,cAmGrE,CAAC"}

package/dist/core/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../src/core/spinner.ts"],"sourcesContent":["import type { Readable } from '@vielzeug/ripple';\n\nimport { clamp as clampRange } from '@vielzeug/arsenal/math';\n\nimport { dispatchKeyboardAction } from './keyboard';\nimport { toFiniteNumber, toPositiveStep } from './numbers';\n\nexport type SpinnerControlOptions = {\n  commit: (value: number | null, originalEvent?: Event) => void;\n  disabled?: Readable<boolean | undefined>;\n  largeStep?: Readable<number | string | undefined>;\n  max?: Readable<number | string | undefined>;\n  min?: Readable<number | string | undefined>;\n  parse: () => number | null;\n  readonly?: Readable<boolean | undefined>;\n  step?: Readable<number | string | undefined>;\n};\n\nexport type SpinnerControl = {\n  atMax: () => boolean;\n  atMin: () => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  incrementBy: (delta: number, originalEvent?: Event) => void;\n};\n\nexport const createSpinnerControl = (options: SpinnerControlOptions): SpinnerControl => {\n  const isBlocked = (): boolean => Boolean(options.disabled?.value) || Boolean(options.readonly?.value);\n\n  const min = (): number | undefined => {\n    return toFiniteNumber(options.min?.value);\n  };\n\n  const max = (): number | undefined => {\n    return toFiniteNumber(options.max?.value);\n  };\n\n  const clamp = (value: number): number => {\n    return clampRange(value, min(), max());\n  };\n\n  const step = (): number => toPositiveStep(options.step?.value, 1);\n\n  const largeStep = (): number => {\n    const s = step();\n\n    return toPositiveStep(options.largeStep?.value, s * 10);\n  };\n\n  const currentOrFallback = (): number => {\n    const parsed = options.parse();\n\n    if (parsed != null) return parsed;\n\n    const minValue = min();\n\n    if (minValue != null) return minValue;\n\n    return 0;\n  };\n\n  const commit = (value: number | null, originalEvent?: Event): void => {\n    if (value == null) {\n      options.commit(null, originalEvent);\n\n      return;\n    }\n\n    options.commit(clamp(value), originalEvent);\n  };\n\n  const incrementBy = (delta: number, originalEvent?: Event): void => {\n    if (isBlocked()) return;\n\n    commit(currentOrFallback() + delta, originalEvent);\n  };\n\n  const atMin = (): boolean => {\n    const parsed = options.parse();\n    const minValue = min();\n\n    return parsed != null && minValue != null && parsed <= minValue;\n  };\n\n  const atMax = (): boolean => {\n    const parsed = options.parse();\n    const maxValue = max();\n\n    return parsed != null && maxValue != null && parsed >= maxValue;\n  };\n\n  const handleKeydown = (event: KeyboardEvent): boolean => {\n    if (isBlocked()) return false;\n\n    return dispatchKeyboardAction(event, {\n      keymap: {\n        ArrowDown: () => incrementBy(-step(), event),\n        ArrowUp: () => incrementBy(step(), event),\n        End: () => {\n          const maxValue = max();\n\n          if (maxValue == null) return false;\n\n          commit(maxValue, event);\n        },\n        Home: () => {\n          const minValue = min();\n\n          if (minValue == null) return false;\n\n          commit(minValue, event);\n        },\n        PageDown: () => incrementBy(-largeStep(), event),\n        PageUp: () => incrementBy(largeStep(), event),\n      },\n      preventDefault: 'after',\n    });\n  };\n\n  return {\n    atMax,\n    atMin,\n    handleKeydown,\n    incrementBy,\n  };\n};\n"],"mappings":";;;;AAyBA,IAAa,KAAwB,MAAmD;CACtF,IAAM,UAA2B,EAAQ,EAAQ,UAAU,SAAU,EAAQ,EAAQ,UAAU,OAEzF,UACG,EAAe,EAAQ,KAAK,KAAK,GAGpC,UACG,EAAe,EAAQ,KAAK,KAAK,GAGpC,KAAS,MACN,EAAW,GAAO,EAAI,GAAG,EAAI,CAAC,GAGjC,UAAqB,EAAe,EAAQ,MAAM,OAAO,CAAC,GAE1D,UAA0B;EAC9B,IAAM,IAAI,EAAK;EAEf,OAAO,EAAe,EAAQ,WAAW,OAAO,IAAI,EAAE;CACxD,GAEM,UACW,EAAQ,MAEnB,KAEa,EAEb,KAEG,GAGH,KAAU,GAAsB,MAAgC;EACpE,IAAI,KAAS,MAAM;GACjB,EAAQ,OAAO,MAAM,CAAa;GAElC;EACF;EAEA,EAAQ,OAAO,EAAM,CAAK,GAAG,CAAa;CAC5C,GAEM,KAAe,GAAe,MAAgC;EAC9D,EAAU,KAEd,EAAO,EAAkB,IAAI,GAAO,CAAa;CACnD;CA4CA,OAAO;EACL,aApC2B;GAC3B,IAAM,IAAS,EAAQ,MAAM,GACvB,IAAW,EAAI;GAErB,OAAO,KAAU,QAAQ,KAAY,QAAQ,KAAU;EACzD;EAgCE,aA5C2B;GAC3B,IAAM,IAAS,EAAQ,MAAM,GACvB,IAAW,EAAI;GAErB,OAAO,KAAU,QAAQ,KAAY,QAAQ,KAAU;EACzD;EAwCE,gBA/BqB,MACrB,CAAI,EAAU,KAEP,EAAuB,GAAO;GACnC,QAAQ;IACN,iBAAiB,EAAY,CAAC,EAAK,GAAG,CAAK;IAC3C,eAAe,EAAY,EAAK,GAAG,CAAK;IACxC,WAAW;KACT,IAAM,IAAW,EAAI;KAErB,IAAI,KAAY,MAAM,OAAO;KAE7B,EAAO,GAAU,CAAK;IACxB;IACA,YAAY;KACV,IAAM,IAAW,EAAI;KAErB,IAAI,KAAY,MAAM,OAAO;KAE7B,EAAO,GAAU,CAAK;IACxB;IACA,gBAAgB,EAAY,CAAC,EAAU,GAAG,CAAK;IAC/C,cAAc,EAAY,EAAU,GAAG,CAAK;GAC9C;GACA,gBAAgB;EAClB,CAAC;EAOD;CACF;AACF"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../src/core/spinner.ts"],"sourcesContent":["import { clamp as clampRange } from '@vielzeug/arsenal/math';\nimport type { Readable } from '@vielzeug/ripple';\n\nimport { dispatchKeyboardAction } from './keyboard';\nimport { toFiniteNumber, toPositiveStep } from './numbers';\n\nexport type SpinnerControlOptions = {\n  commit: (value: number | null, originalEvent?: Event) => void;\n  disabled?: Readable<boolean | undefined>;\n  largeStep?: Readable<number | string | undefined>;\n  max?: Readable<number | string | undefined>;\n  min?: Readable<number | string | undefined>;\n  parse: () => number | null;\n  readonly?: Readable<boolean | undefined>;\n  step?: Readable<number | string | undefined>;\n};\n\nexport type SpinnerControl = {\n  atMax: () => boolean;\n  atMin: () => boolean;\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  incrementBy: (delta: number, originalEvent?: Event) => void;\n};\n\nexport const createSpinnerControl = (options: SpinnerControlOptions): SpinnerControl => {\n  const isBlocked = (): boolean => Boolean(options.disabled?.value) || Boolean(options.readonly?.value);\n\n  const min = (): number | undefined => {\n    return toFiniteNumber(options.min?.value);\n  };\n\n  const max = (): number | undefined => {\n    return toFiniteNumber(options.max?.value);\n  };\n\n  const clamp = (value: number): number => {\n    return clampRange(value, min(), max());\n  };\n\n  const step = (): number => toPositiveStep(options.step?.value, 1);\n\n  const largeStep = (): number => {\n    const s = step();\n\n    return toPositiveStep(options.largeStep?.value, s * 10);\n  };\n\n  const currentOrFallback = (): number => {\n    const parsed = options.parse();\n\n    if (parsed != null) return parsed;\n\n    const minValue = min();\n\n    if (minValue != null) return minValue;\n\n    return 0;\n  };\n\n  const commit = (value: number | null, originalEvent?: Event): void => {\n    if (value == null) {\n      options.commit(null, originalEvent);\n\n      return;\n    }\n\n    options.commit(clamp(value), originalEvent);\n  };\n\n  const incrementBy = (delta: number, originalEvent?: Event): void => {\n    if (isBlocked()) return;\n\n    commit(currentOrFallback() + delta, originalEvent);\n  };\n\n  const atMin = (): boolean => {\n    const parsed = options.parse();\n    const minValue = min();\n\n    return parsed != null && minValue != null && parsed <= minValue;\n  };\n\n  const atMax = (): boolean => {\n    const parsed = options.parse();\n    const maxValue = max();\n\n    return parsed != null && maxValue != null && parsed >= maxValue;\n  };\n\n  const handleKeydown = (event: KeyboardEvent): boolean => {\n    if (isBlocked()) return false;\n\n    return dispatchKeyboardAction(event, {\n      keymap: {\n        ArrowDown: () => incrementBy(-step(), event),\n        ArrowUp: () => incrementBy(step(), event),\n        End: () => {\n          const maxValue = max();\n\n          if (maxValue == null) return false;\n\n          commit(maxValue, event);\n        },\n        Home: () => {\n          const minValue = min();\n\n          if (minValue == null) return false;\n\n          commit(minValue, event);\n        },\n        PageDown: () => incrementBy(-largeStep(), event),\n        PageUp: () => incrementBy(largeStep(), event),\n      },\n      preventDefault: 'after',\n    });\n  };\n\n  return {\n    atMax,\n    atMin,\n    handleKeydown,\n    incrementBy,\n  };\n};\n"],"mappings":";;;;AAwBA,IAAa,KAAwB,MAAmD;CACtF,IAAM,UAA2B,EAAQ,EAAQ,UAAU,SAAU,EAAQ,EAAQ,UAAU,OAEzF,UACG,EAAe,EAAQ,KAAK,KAAK,GAGpC,UACG,EAAe,EAAQ,KAAK,KAAK,GAGpC,KAAS,MACN,EAAW,GAAO,EAAI,GAAG,EAAI,CAAC,GAGjC,UAAqB,EAAe,EAAQ,MAAM,OAAO,CAAC,GAE1D,UAA0B;EAC9B,IAAM,IAAI,EAAK;EAEf,OAAO,EAAe,EAAQ,WAAW,OAAO,IAAI,EAAE;CACxD,GAEM,UACW,EAAQ,MAEnB,KAEa,EAEb,KAEG,GAGH,KAAU,GAAsB,MAAgC;EACpE,IAAI,KAAS,MAAM;GACjB,EAAQ,OAAO,MAAM,CAAa;GAElC;EACF;EAEA,EAAQ,OAAO,EAAM,CAAK,GAAG,CAAa;CAC5C,GAEM,KAAe,GAAe,MAAgC;EAC9D,EAAU,KAEd,EAAO,EAAkB,IAAI,GAAO,CAAa;CACnD;CA4CA,OAAO;EACL,aApC2B;GAC3B,IAAM,IAAS,EAAQ,MAAM,GACvB,IAAW,EAAI;GAErB,OAAO,KAAU,QAAQ,KAAY,QAAQ,KAAU;EACzD;EAgCE,aA5C2B;GAC3B,IAAM,IAAS,EAAQ,MAAM,GACvB,IAAW,EAAI;GAErB,OAAO,KAAU,QAAQ,KAAY,QAAQ,KAAU;EACzD;EAwCE,gBA/BqB,MACrB,CAAI,EAAU,KAEP,EAAuB,GAAO;GACnC,QAAQ;IACN,iBAAiB,EAAY,CAAC,EAAK,GAAG,CAAK;IAC3C,eAAe,EAAY,EAAK,GAAG,CAAK;IACxC,WAAW;KACT,IAAM,IAAW,EAAI;KAErB,IAAI,KAAY,MAAM,OAAO;KAE7B,EAAO,GAAU,CAAK;IACxB;IACA,YAAY;KACV,IAAM,IAAW,EAAI;KAErB,IAAI,KAAY,MAAM,OAAO;KAE7B,EAAO,GAAU,CAAK;IACxB;IACA,gBAAgB,EAAY,CAAC,EAAU,GAAG,CAAK;IAC/C,cAAc,EAAY,EAAU,GAAG,CAAK;GAC9C;GACA,gBAAgB;EAClB,CAAC;EAOD;CACF;AACF"}

package/dist/core/text-field.cjs

@@ -1,2 +1,2 @@
-const e=require("./field-base.cjs"),t=require("./signals.cjs");let n=require("@vielzeug/ripple");var r=e=>e.trim()===``,i=e=>String(e??``),a=a=>{let o=t.syncedSignal(a.value,a.signal,i),s=e.createField(a),c=a.maxLength?e.createCounterState({maxLength:a.maxLength,value:o}):null,l=(0,n.computed)(()=>!a.readonly?.value&&a.required?.value&&r(o.value)?{valueMissing:!0}:null),u=(0,n.computed)(()=>l.value?a.requiredMessage?.value||`This field is required.`:``),d=()=>{o.value=i(a.value.value),s.triggerValidation(`change`)},f=e=>{e?.preventDefault?.(),o.value=``,a.onInput?.(e??new InputEvent(`input`,{bubbles:!0}),``),a.onChange?.(e??new Event(`change`,{bubbles:!0}),``),s.triggerValidation(`change`)},p=(e,t)=>{let n=[],r=(t,r)=>{e.addEventListener(t,r),n.push(()=>e.removeEventListener(t,r))};a.onFocus&&r(`focus`,e=>a.onFocus(e)),r(`input`,t=>{t.stopPropagation(),a.onBeforeInput?.(t),o.value=e.value,a.onInput?.(t,e.value)}),r(`change`,t=>{t.stopPropagation(),o.value=e.value,a.onChange?.(t,e.value),s.triggerValidation(`change`)}),r(`blur`,e=>{a.onBlur?.(e),s.triggerValidation(`blur`)});let i=!1,c=()=>{if(!i){i=!0;for(let e of n)e()}};return t?.addEventListener(`abort`,c,{once:!0}),c};return{...s,clear:f,counter:c,reset:d,validationMessage:u,validity:l,value:o,wire:p}};exports.createTextField=a;
+const e=require("./field-base.cjs"),t=require("./signals.cjs");let n=require("@vielzeug/ripple");var r=e=>e.trim()===``,i=e=>String(e??``),a=a=>{let o=t.syncedSignal(a.value,a.signal,i),s=e.createField(a),c=a.maxLength?e.createCounterState({maxLength:a.maxLength,value:o}):null,l=(0,n.computed)(()=>!a.readonly?.value&&a.required?.value&&r(o.value)?{valueMissing:!0}:null),u=(0,n.computed)(()=>l.value?a.requiredMessage?.value||`This field is required.`:``),d=()=>{o.value=i(a.value.value),s.triggerValidation(`change`)},f=e=>{e?.preventDefault?.(),o.value=``,a.onInput?.(e??new InputEvent(`input`,{bubbles:!0}),``),a.onChange?.(e??new Event(`change`,{bubbles:!0}),``),s.triggerValidation(`change`)},p=(e,t)=>{let n=[],r=(t,r)=>{e.addEventListener(t,r),n.push(()=>e.removeEventListener(t,r))};a.onFocus&&r(`focus`,e=>a.onFocus?.(e)),r(`input`,t=>{t.stopPropagation(),a.onBeforeInput?.(t),o.value=e.value,a.onInput?.(t,e.value)}),r(`change`,t=>{t.stopPropagation(),o.value=e.value,a.onChange?.(t,e.value),s.triggerValidation(`change`)}),r(`blur`,e=>{a.onBlur?.(e),s.triggerValidation(`blur`)});let i=!1,c=()=>{if(!i){i=!0;for(let e of n)e()}};return t?.addEventListener(`abort`,c,{once:!0}),c};return{...s,clear:f,counter:c,reset:d,validationMessage:u,validity:l,value:o,wire:p}};exports.createTextField=a;
 //# sourceMappingURL=text-field.cjs.map

package/dist/core/text-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.cjs","names":[],"sources":["../../src/core/text-field.ts"],"sourcesContent":["import { computed, type Readable, type Signal } from '@vielzeug/ripple';\n\nimport { type CounterState, createCounterState, createField, type FieldHandle, type FieldOptions } from './field-base';\nimport { syncedSignal } from './signals';\n\n// ── Text field ────────────────────────────────────────────────────────────────\n\n/** Detach function returned by `wire()`. Call to remove element listeners. */\nexport type TextFieldDetach = () => void;\n\nexport type TextFieldOptions = FieldOptions & {\n  maxLength?: Readable<number | undefined>;\n  /**\n   * Called synchronously before value extraction on every input event.\n   * Use only for DOM side-effects (e.g. auto-resize measurement) that must\n   * run before the reactive value is updated.\n   */\n  onBeforeInput?: (event: Event) => void;\n  onBlur?: (event: FocusEvent) => void;\n  onChange?: (event: Event, value: string) => void;\n  onFocus?: (event: FocusEvent) => void;\n  onInput?: (event: Event, value: string) => void;\n  /**\n   * Bars the field from constraint validation while true — matches the native HTML rule that a\n   * `readonly` field is never a candidate for constraint validation (a `readonly required`\n   * field is always valid, per spec), so `validity`/`validationMessage` don't feed a false\n   * `valueMissing` into `useField()` just because a read-only field happens to be blank.\n   */\n  readonly?: Readable<boolean | undefined>;\n  /** Marks a blank value invalid — feeds `validity`/`validationMessage` (see below). */\n  required?: Readable<boolean | undefined>;\n  /** Message for the blank+required case. Defaults to `'This field is required.'`. */\n  requiredMessage?: Readable<string | undefined>;\n  /** `AbortSignal` from the component lifecycle. The internal value-sync watcher is disposed on abort. */\n  signal: AbortSignal;\n  value: Readable<string | undefined>;\n};\n\nexport type TextFieldHandle = FieldHandle & {\n  /**\n   * Registers the real form field handle (the return value of `useField()`) so that\n   * `triggerValidation()` — called internally on blur/change — can call its\n   * `reportValidity()`. `useField()` itself needs `value` (below) to exist first, so this\n   * is a two-step wiring rather than a constructor option:\n   *\n   * ```ts\n   * const tf = createTextField({ value: props.value, ... });\n   * const formField = useField({ value: tf.value, ... });\n   * tf.attachFormField(formField);\n   * ```\n   */\n  attachFormField: (formField: { reportValidity(): void }) => void;\n  /** Clears the field value and fires synthetic input/change events. */\n  clear: (event?: Event) => void;\n  /**\n   * Reactive counter state. Non-null when `maxLength` was provided; `null` otherwise.\n   * Components should only render a counter element when this is non-null.\n   */\n  counter: Readable<CounterState> | null;\n  /**\n   * Restores the value to whatever the `value` option currently holds (native form\n   * `reset()` semantics: a `<input>` reverts to its *current* `value` content attribute,\n   * not a frozen snapshot from element creation — so setting the attribute programmatically\n   * after mount changes what a later reset reverts to). Wire into `useField({ onReset: tf.reset })`.\n   */\n  reset: () => void;\n  /** Reactive validation message paired with `validity`. Empty string when valid. */\n  validationMessage: Readable<string>;\n  /**\n   * Reactive `ValidityStateFlags` — `{ valueMissing: true }` while `required` and blank,\n   * `null` (valid) otherwise. Pass straight to `useField({ validity: tf.validity })`.\n   */\n  validity: Readable<ValidityStateFlags | null>;\n  /** The local mutable field value (two-way bound to the input element via `wire()`). */\n  value: Signal<string>;\n  /**\n   * Attaches event listeners to the underlying input or textarea element.\n   *\n   * When `signal` is provided, the listeners are detached automatically when\n   * the signal's controller calls `abort()`. Without a signal the returned\n   * `TextFieldDetach` must be called manually.\n   *\n   * Safe to call multiple times — each call attaches a fresh set of listeners\n   * and returns a distinct detach function. Calling detach multiple times is\n   * a no-op (guarded internally).\n   */\n  wire: (el: HTMLInputElement | HTMLTextAreaElement, signal?: AbortSignal) => TextFieldDetach;\n};\n\nconst isBlank = (value: string): boolean => value.trim() === '';\nconst toFieldValue = (v: string | undefined): string => String(v ?? '');\n\nexport const createTextField = (options: TextFieldOptions): TextFieldHandle => {\n  const value = syncedSignal(options.value, options.signal, toFieldValue);\n\n  const field = createField(options);\n  const counter = options.maxLength ? createCounterState({ maxLength: options.maxLength, value }) : null;\n\n  const validity = computed<ValidityStateFlags | null>(() =>\n    !options.readonly?.value && options.required?.value && isBlank(value.value) ? { valueMissing: true } : null,\n  );\n  const validationMessage = computed(() =>\n    validity.value ? options.requiredMessage?.value || 'This field is required.' : '',\n  );\n\n  const reset = (): void => {\n    value.value = toFieldValue(options.value.value);\n    field.triggerValidation('change');\n  };\n\n  const clear = (event?: Event): void => {\n    event?.preventDefault?.();\n    value.value = '';\n    options.onInput?.(event ?? new InputEvent('input', { bubbles: true }), '');\n    options.onChange?.(event ?? new Event('change', { bubbles: true }), '');\n    field.triggerValidation('change');\n  };\n\n  const wire = (element: HTMLInputElement | HTMLTextAreaElement, signal?: AbortSignal): TextFieldDetach => {\n    const cleanups: Array<() => void> = [];\n    const on = (type: string, handler: EventListener): void => {\n      element.addEventListener(type, handler);\n      cleanups.push(() => element.removeEventListener(type, handler));\n    };\n\n    if (options.onFocus) {\n      on('focus', (e) => options.onFocus!(e as FocusEvent));\n    }\n\n    on('input', (e) => {\n      e.stopPropagation();\n      options.onBeforeInput?.(e);\n      value.value = element.value;\n      options.onInput?.(e, element.value);\n    });\n\n    on('change', (e) => {\n      e.stopPropagation();\n      value.value = element.value;\n      options.onChange?.(e, element.value);\n      field.triggerValidation('change');\n    });\n\n    on('blur', (e) => {\n      options.onBlur?.(e as FocusEvent);\n      field.triggerValidation('blur');\n    });\n\n    let detached = false;\n    const detach = (): void => {\n      if (detached) return;\n\n      detached = true;\n      for (const dispose of cleanups) dispose();\n    };\n\n    signal?.addEventListener('abort', detach, { once: true });\n\n    return detach;\n  };\n\n  return { ...field, clear, counter, reset, validationMessage, validity, value, wire };\n};\n"],"mappings":"iGAyFA,IAAM,EAAW,GAA2B,EAAM,KAAK,IAAM,GACvD,EAAgB,GAAkC,OAAO,GAAK,EAAE,EAEzD,EAAmB,GAA+C,CAC7E,IAAM,EAAQ,EAAA,aAAa,EAAQ,MAAO,EAAQ,OAAQ,CAAY,EAEhE,EAAQ,EAAA,YAAY,CAAO,EAC3B,EAAU,EAAQ,UAAY,EAAA,mBAAmB,CAAE,UAAW,EAAQ,UAAW,OAAM,CAAC,EAAI,KAE5F,GAAA,EAAW,EAAA,SAAA,KACf,CAAC,EAAQ,UAAU,OAAS,EAAQ,UAAU,OAAS,EAAQ,EAAM,KAAK,EAAI,CAAE,aAAc,EAAK,EAAI,IACzG,EACM,GAAA,EAAoB,EAAA,SAAA,KACxB,EAAS,MAAQ,EAAQ,iBAAiB,OAAS,0BAA4B,EACjF,EAEM,MAAoB,CACxB,EAAM,MAAQ,EAAa,EAAQ,MAAM,KAAK,EAC9C,EAAM,kBAAkB,QAAQ,CAClC,EAEM,EAAS,GAAwB,CACrC,GAAO,iBAAiB,EACxB,EAAM,MAAQ,GACd,EAAQ,UAAU,GAAS,IAAI,WAAW,QAAS,CAAE,QAAS,EAAK,CAAC,EAAG,EAAE,EACzE,EAAQ,WAAW,GAAS,IAAI,MAAM,SAAU,CAAE,QAAS,EAAK,CAAC,EAAG,EAAE,EACtE,EAAM,kBAAkB,QAAQ,CAClC,EAEM,GAAQ,EAAiD,IAA0C,CACvG,IAAM,EAA8B,CAAC,EAC/B,GAAM,EAAc,IAAiC,CACzD,EAAQ,iBAAiB,EAAM,CAAO,EACtC,EAAS,SAAW,EAAQ,oBAAoB,EAAM,CAAO,CAAC,CAChE,EAEI,EAAQ,SACV,EAAG,QAAU,GAAM,EAAQ,QAAS,CAAe,CAAC,EAGtD,EAAG,QAAU,GAAM,CACjB,EAAE,gBAAgB,EAClB,EAAQ,gBAAgB,CAAC,EACzB,EAAM,MAAQ,EAAQ,MACtB,EAAQ,UAAU,EAAG,EAAQ,KAAK,CACpC,CAAC,EAED,EAAG,SAAW,GAAM,CAClB,EAAE,gBAAgB,EAClB,EAAM,MAAQ,EAAQ,MACtB,EAAQ,WAAW,EAAG,EAAQ,KAAK,EACnC,EAAM,kBAAkB,QAAQ,CAClC,CAAC,EAED,EAAG,OAAS,GAAM,CAChB,EAAQ,SAAS,CAAe,EAChC,EAAM,kBAAkB,MAAM,CAChC,CAAC,EAED,IAAI,EAAW,GACT,MAAqB,CACrB,MAEJ,GAAW,GACX,IAAK,IAAM,KAAW,EAAU,EAAQ,CAD7B,CAEb,EAIA,OAFA,GAAQ,iBAAiB,QAAS,EAAQ,CAAE,KAAM,EAAK,CAAC,EAEjD,CACT,EAEA,MAAO,CAAE,GAAG,EAAO,QAAO,UAAS,QAAO,oBAAmB,WAAU,QAAO,MAAK,CACrF"}
+{"version":3,"file":"text-field.cjs","names":[],"sources":["../../src/core/text-field.ts"],"sourcesContent":["import { computed, type Readable, type Signal } from '@vielzeug/ripple';\n\nimport { type CounterState, createCounterState, createField, type FieldHandle, type FieldOptions } from './field-base';\nimport { syncedSignal } from './signals';\n\n// ── Text field ────────────────────────────────────────────────────────────────\n\n/** Detach function returned by `wire()`. Call to remove element listeners. */\nexport type TextFieldDetach = () => void;\n\nexport type TextFieldOptions = FieldOptions & {\n  maxLength?: Readable<number | undefined>;\n  /**\n   * Called synchronously before value extraction on every input event.\n   * Use only for DOM side-effects (e.g. auto-resize measurement) that must\n   * run before the reactive value is updated.\n   */\n  onBeforeInput?: (event: Event) => void;\n  onBlur?: (event: FocusEvent) => void;\n  onChange?: (event: Event, value: string) => void;\n  onFocus?: (event: FocusEvent) => void;\n  onInput?: (event: Event, value: string) => void;\n  /**\n   * Bars the field from constraint validation while true — matches the native HTML rule that a\n   * `readonly` field is never a candidate for constraint validation (a `readonly required`\n   * field is always valid, per spec), so `validity`/`validationMessage` don't feed a false\n   * `valueMissing` into `useField()` just because a read-only field happens to be blank.\n   */\n  readonly?: Readable<boolean | undefined>;\n  /** Marks a blank value invalid — feeds `validity`/`validationMessage` (see below). */\n  required?: Readable<boolean | undefined>;\n  /** Message for the blank+required case. Defaults to `'This field is required.'`. */\n  requiredMessage?: Readable<string | undefined>;\n  /** `AbortSignal` from the component lifecycle. The internal value-sync watcher is disposed on abort. */\n  signal: AbortSignal;\n  value: Readable<string | undefined>;\n};\n\nexport type TextFieldHandle = FieldHandle & {\n  /**\n   * Registers the real form field handle (the return value of `useField()`) so that\n   * `triggerValidation()` — called internally on blur/change — can call its\n   * `reportValidity()`. `useField()` itself needs `value` (below) to exist first, so this\n   * is a two-step wiring rather than a constructor option:\n   *\n   * ```ts\n   * const tf = createTextField({ value: props.value, ... });\n   * const formField = useField({ value: tf.value, ... });\n   * tf.attachFormField(formField);\n   * ```\n   */\n  attachFormField: (formField: { reportValidity(): void }) => void;\n  /** Clears the field value and fires synthetic input/change events. */\n  clear: (event?: Event) => void;\n  /**\n   * Reactive counter state. Non-null when `maxLength` was provided; `null` otherwise.\n   * Components should only render a counter element when this is non-null.\n   */\n  counter: Readable<CounterState> | null;\n  /**\n   * Restores the value to whatever the `value` option currently holds (native form\n   * `reset()` semantics: a `<input>` reverts to its *current* `value` content attribute,\n   * not a frozen snapshot from element creation — so setting the attribute programmatically\n   * after mount changes what a later reset reverts to). Wire into `useField({ onReset: tf.reset })`.\n   */\n  reset: () => void;\n  /** Reactive validation message paired with `validity`. Empty string when valid. */\n  validationMessage: Readable<string>;\n  /**\n   * Reactive `ValidityStateFlags` — `{ valueMissing: true }` while `required` and blank,\n   * `null` (valid) otherwise. Pass straight to `useField({ validity: tf.validity })`.\n   */\n  validity: Readable<ValidityStateFlags | null>;\n  /** The local mutable field value (two-way bound to the input element via `wire()`). */\n  value: Signal<string>;\n  /**\n   * Attaches event listeners to the underlying input or textarea element.\n   *\n   * When `signal` is provided, the listeners are detached automatically when\n   * the signal's controller calls `abort()`. Without a signal the returned\n   * `TextFieldDetach` must be called manually.\n   *\n   * Safe to call multiple times — each call attaches a fresh set of listeners\n   * and returns a distinct detach function. Calling detach multiple times is\n   * a no-op (guarded internally).\n   */\n  wire: (el: HTMLInputElement | HTMLTextAreaElement, signal?: AbortSignal) => TextFieldDetach;\n};\n\nconst isBlank = (value: string): boolean => value.trim() === '';\nconst toFieldValue = (v: string | undefined): string => String(v ?? '');\n\nexport const createTextField = (options: TextFieldOptions): TextFieldHandle => {\n  const value = syncedSignal(options.value, options.signal, toFieldValue);\n\n  const field = createField(options);\n  const counter = options.maxLength ? createCounterState({ maxLength: options.maxLength, value }) : null;\n\n  const validity = computed<ValidityStateFlags | null>(() =>\n    !options.readonly?.value && options.required?.value && isBlank(value.value) ? { valueMissing: true } : null,\n  );\n  const validationMessage = computed(() =>\n    validity.value ? options.requiredMessage?.value || 'This field is required.' : '',\n  );\n\n  const reset = (): void => {\n    value.value = toFieldValue(options.value.value);\n    field.triggerValidation('change');\n  };\n\n  const clear = (event?: Event): void => {\n    event?.preventDefault?.();\n    value.value = '';\n    options.onInput?.(event ?? new InputEvent('input', { bubbles: true }), '');\n    options.onChange?.(event ?? new Event('change', { bubbles: true }), '');\n    field.triggerValidation('change');\n  };\n\n  const wire = (element: HTMLInputElement | HTMLTextAreaElement, signal?: AbortSignal): TextFieldDetach => {\n    const cleanups: Array<() => void> = [];\n    const on = (type: string, handler: EventListener): void => {\n      element.addEventListener(type, handler);\n      cleanups.push(() => element.removeEventListener(type, handler));\n    };\n\n    if (options.onFocus) {\n      on('focus', (e) => options.onFocus?.(e as FocusEvent));\n    }\n\n    on('input', (e) => {\n      e.stopPropagation();\n      options.onBeforeInput?.(e);\n      value.value = element.value;\n      options.onInput?.(e, element.value);\n    });\n\n    on('change', (e) => {\n      e.stopPropagation();\n      value.value = element.value;\n      options.onChange?.(e, element.value);\n      field.triggerValidation('change');\n    });\n\n    on('blur', (e) => {\n      options.onBlur?.(e as FocusEvent);\n      field.triggerValidation('blur');\n    });\n\n    let detached = false;\n    const detach = (): void => {\n      if (detached) return;\n\n      detached = true;\n      for (const dispose of cleanups) dispose();\n    };\n\n    signal?.addEventListener('abort', detach, { once: true });\n\n    return detach;\n  };\n\n  return { ...field, clear, counter, reset, validationMessage, validity, value, wire };\n};\n"],"mappings":"iGAyFA,IAAM,EAAW,GAA2B,EAAM,KAAK,IAAM,GACvD,EAAgB,GAAkC,OAAO,GAAK,EAAE,EAEzD,EAAmB,GAA+C,CAC7E,IAAM,EAAQ,EAAA,aAAa,EAAQ,MAAO,EAAQ,OAAQ,CAAY,EAEhE,EAAQ,EAAA,YAAY,CAAO,EAC3B,EAAU,EAAQ,UAAY,EAAA,mBAAmB,CAAE,UAAW,EAAQ,UAAW,OAAM,CAAC,EAAI,KAE5F,GAAA,EAAW,EAAA,SAAA,KACf,CAAC,EAAQ,UAAU,OAAS,EAAQ,UAAU,OAAS,EAAQ,EAAM,KAAK,EAAI,CAAE,aAAc,EAAK,EAAI,IACzG,EACM,GAAA,EAAoB,EAAA,SAAA,KACxB,EAAS,MAAQ,EAAQ,iBAAiB,OAAS,0BAA4B,EACjF,EAEM,MAAoB,CACxB,EAAM,MAAQ,EAAa,EAAQ,MAAM,KAAK,EAC9C,EAAM,kBAAkB,QAAQ,CAClC,EAEM,EAAS,GAAwB,CACrC,GAAO,iBAAiB,EACxB,EAAM,MAAQ,GACd,EAAQ,UAAU,GAAS,IAAI,WAAW,QAAS,CAAE,QAAS,EAAK,CAAC,EAAG,EAAE,EACzE,EAAQ,WAAW,GAAS,IAAI,MAAM,SAAU,CAAE,QAAS,EAAK,CAAC,EAAG,EAAE,EACtE,EAAM,kBAAkB,QAAQ,CAClC,EAEM,GAAQ,EAAiD,IAA0C,CACvG,IAAM,EAA8B,CAAC,EAC/B,GAAM,EAAc,IAAiC,CACzD,EAAQ,iBAAiB,EAAM,CAAO,EACtC,EAAS,SAAW,EAAQ,oBAAoB,EAAM,CAAO,CAAC,CAChE,EAEI,EAAQ,SACV,EAAG,QAAU,GAAM,EAAQ,UAAU,CAAe,CAAC,EAGvD,EAAG,QAAU,GAAM,CACjB,EAAE,gBAAgB,EAClB,EAAQ,gBAAgB,CAAC,EACzB,EAAM,MAAQ,EAAQ,MACtB,EAAQ,UAAU,EAAG,EAAQ,KAAK,CACpC,CAAC,EAED,EAAG,SAAW,GAAM,CAClB,EAAE,gBAAgB,EAClB,EAAM,MAAQ,EAAQ,MACtB,EAAQ,WAAW,EAAG,EAAQ,KAAK,EACnC,EAAM,kBAAkB,QAAQ,CAClC,CAAC,EAED,EAAG,OAAS,GAAM,CAChB,EAAQ,SAAS,CAAe,EAChC,EAAM,kBAAkB,MAAM,CAChC,CAAC,EAED,IAAI,EAAW,GACT,MAAqB,CACrB,MAEJ,GAAW,GACX,IAAK,IAAM,KAAW,EAAU,EAAQ,CAD7B,CAEb,EAIA,OAFA,GAAQ,iBAAiB,QAAS,EAAQ,CAAE,KAAM,EAAK,CAAC,EAEjD,CACT,EAEA,MAAO,CAAE,GAAG,EAAO,QAAO,UAAS,QAAO,oBAAmB,WAAU,QAAO,MAAK,CACrF"}

package/dist/core/text-field.js

@@ -14,7 +14,7 @@ var i = (e) => e.trim() === "", a = (e) => String(e ?? ""), o = (o) => {
 		let n = [], r = (t, r) => {
 			e.addEventListener(t, r), n.push(() => e.removeEventListener(t, r));
 		};
-		o.onFocus && r("focus", (e) => o.onFocus(e)), r("input", (t) => {
+		o.onFocus && r("focus", (e) => o.onFocus?.(e)), r("input", (t) => {
 			t.stopPropagation(), o.onBeforeInput?.(t), s.value = e.value, o.onInput?.(t, e.value);
 		}), r("change", (t) => {
 			t.stopPropagation(), s.value = e.value, o.onChange?.(t, e.value), c.triggerValidation("change");

package/dist/core/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","names":[],"sources":["../../src/core/text-field.ts"],"sourcesContent":["import { computed, type Readable, type Signal } from '@vielzeug/ripple';\n\nimport { type CounterState, createCounterState, createField, type FieldHandle, type FieldOptions } from './field-base';\nimport { syncedSignal } from './signals';\n\n// ── Text field ────────────────────────────────────────────────────────────────\n\n/** Detach function returned by `wire()`. Call to remove element listeners. */\nexport type TextFieldDetach = () => void;\n\nexport type TextFieldOptions = FieldOptions & {\n  maxLength?: Readable<number | undefined>;\n  /**\n   * Called synchronously before value extraction on every input event.\n   * Use only for DOM side-effects (e.g. auto-resize measurement) that must\n   * run before the reactive value is updated.\n   */\n  onBeforeInput?: (event: Event) => void;\n  onBlur?: (event: FocusEvent) => void;\n  onChange?: (event: Event, value: string) => void;\n  onFocus?: (event: FocusEvent) => void;\n  onInput?: (event: Event, value: string) => void;\n  /**\n   * Bars the field from constraint validation while true — matches the native HTML rule that a\n   * `readonly` field is never a candidate for constraint validation (a `readonly required`\n   * field is always valid, per spec), so `validity`/`validationMessage` don't feed a false\n   * `valueMissing` into `useField()` just because a read-only field happens to be blank.\n   */\n  readonly?: Readable<boolean | undefined>;\n  /** Marks a blank value invalid — feeds `validity`/`validationMessage` (see below). */\n  required?: Readable<boolean | undefined>;\n  /** Message for the blank+required case. Defaults to `'This field is required.'`. */\n  requiredMessage?: Readable<string | undefined>;\n  /** `AbortSignal` from the component lifecycle. The internal value-sync watcher is disposed on abort. */\n  signal: AbortSignal;\n  value: Readable<string | undefined>;\n};\n\nexport type TextFieldHandle = FieldHandle & {\n  /**\n   * Registers the real form field handle (the return value of `useField()`) so that\n   * `triggerValidation()` — called internally on blur/change — can call its\n   * `reportValidity()`. `useField()` itself needs `value` (below) to exist first, so this\n   * is a two-step wiring rather than a constructor option:\n   *\n   * ```ts\n   * const tf = createTextField({ value: props.value, ... });\n   * const formField = useField({ value: tf.value, ... });\n   * tf.attachFormField(formField);\n   * ```\n   */\n  attachFormField: (formField: { reportValidity(): void }) => void;\n  /** Clears the field value and fires synthetic input/change events. */\n  clear: (event?: Event) => void;\n  /**\n   * Reactive counter state. Non-null when `maxLength` was provided; `null` otherwise.\n   * Components should only render a counter element when this is non-null.\n   */\n  counter: Readable<CounterState> | null;\n  /**\n   * Restores the value to whatever the `value` option currently holds (native form\n   * `reset()` semantics: a `<input>` reverts to its *current* `value` content attribute,\n   * not a frozen snapshot from element creation — so setting the attribute programmatically\n   * after mount changes what a later reset reverts to). Wire into `useField({ onReset: tf.reset })`.\n   */\n  reset: () => void;\n  /** Reactive validation message paired with `validity`. Empty string when valid. */\n  validationMessage: Readable<string>;\n  /**\n   * Reactive `ValidityStateFlags` — `{ valueMissing: true }` while `required` and blank,\n   * `null` (valid) otherwise. Pass straight to `useField({ validity: tf.validity })`.\n   */\n  validity: Readable<ValidityStateFlags | null>;\n  /** The local mutable field value (two-way bound to the input element via `wire()`). */\n  value: Signal<string>;\n  /**\n   * Attaches event listeners to the underlying input or textarea element.\n   *\n   * When `signal` is provided, the listeners are detached automatically when\n   * the signal's controller calls `abort()`. Without a signal the returned\n   * `TextFieldDetach` must be called manually.\n   *\n   * Safe to call multiple times — each call attaches a fresh set of listeners\n   * and returns a distinct detach function. Calling detach multiple times is\n   * a no-op (guarded internally).\n   */\n  wire: (el: HTMLInputElement | HTMLTextAreaElement, signal?: AbortSignal) => TextFieldDetach;\n};\n\nconst isBlank = (value: string): boolean => value.trim() === '';\nconst toFieldValue = (v: string | undefined): string => String(v ?? '');\n\nexport const createTextField = (options: TextFieldOptions): TextFieldHandle => {\n  const value = syncedSignal(options.value, options.signal, toFieldValue);\n\n  const field = createField(options);\n  const counter = options.maxLength ? createCounterState({ maxLength: options.maxLength, value }) : null;\n\n  const validity = computed<ValidityStateFlags | null>(() =>\n    !options.readonly?.value && options.required?.value && isBlank(value.value) ? { valueMissing: true } : null,\n  );\n  const validationMessage = computed(() =>\n    validity.value ? options.requiredMessage?.value || 'This field is required.' : '',\n  );\n\n  const reset = (): void => {\n    value.value = toFieldValue(options.value.value);\n    field.triggerValidation('change');\n  };\n\n  const clear = (event?: Event): void => {\n    event?.preventDefault?.();\n    value.value = '';\n    options.onInput?.(event ?? new InputEvent('input', { bubbles: true }), '');\n    options.onChange?.(event ?? new Event('change', { bubbles: true }), '');\n    field.triggerValidation('change');\n  };\n\n  const wire = (element: HTMLInputElement | HTMLTextAreaElement, signal?: AbortSignal): TextFieldDetach => {\n    const cleanups: Array<() => void> = [];\n    const on = (type: string, handler: EventListener): void => {\n      element.addEventListener(type, handler);\n      cleanups.push(() => element.removeEventListener(type, handler));\n    };\n\n    if (options.onFocus) {\n      on('focus', (e) => options.onFocus!(e as FocusEvent));\n    }\n\n    on('input', (e) => {\n      e.stopPropagation();\n      options.onBeforeInput?.(e);\n      value.value = element.value;\n      options.onInput?.(e, element.value);\n    });\n\n    on('change', (e) => {\n      e.stopPropagation();\n      value.value = element.value;\n      options.onChange?.(e, element.value);\n      field.triggerValidation('change');\n    });\n\n    on('blur', (e) => {\n      options.onBlur?.(e as FocusEvent);\n      field.triggerValidation('blur');\n    });\n\n    let detached = false;\n    const detach = (): void => {\n      if (detached) return;\n\n      detached = true;\n      for (const dispose of cleanups) dispose();\n    };\n\n    signal?.addEventListener('abort', detach, { once: true });\n\n    return detach;\n  };\n\n  return { ...field, clear, counter, reset, validationMessage, validity, value, wire };\n};\n"],"mappings":";;;;AAyFA,IAAM,KAAW,MAA2B,EAAM,KAAK,MAAM,IACvD,KAAgB,MAAkC,OAAO,KAAK,EAAE,GAEzD,KAAmB,MAA+C;CAC7E,IAAM,IAAQ,EAAa,EAAQ,OAAO,EAAQ,QAAQ,CAAY,GAEhE,IAAQ,EAAY,CAAO,GAC3B,IAAU,EAAQ,YAAY,EAAmB;EAAE,WAAW,EAAQ;EAAW;CAAM,CAAC,IAAI,MAE5F,IAAW,QACf,CAAC,EAAQ,UAAU,SAAS,EAAQ,UAAU,SAAS,EAAQ,EAAM,KAAK,IAAI,EAAE,cAAc,GAAK,IAAI,IACzG,GACM,IAAoB,QACxB,EAAS,QAAQ,EAAQ,iBAAiB,SAAS,4BAA4B,EACjF,GAEM,UAAoB;EAExB,AADA,EAAM,QAAQ,EAAa,EAAQ,MAAM,KAAK,GAC9C,EAAM,kBAAkB,QAAQ;CAClC,GAEM,KAAS,MAAwB;EAKrC,AAJA,GAAO,iBAAiB,GACxB,EAAM,QAAQ,IACd,EAAQ,UAAU,KAAS,IAAI,WAAW,SAAS,EAAE,SAAS,GAAK,CAAC,GAAG,EAAE,GACzE,EAAQ,WAAW,KAAS,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,GAAG,EAAE,GACtE,EAAM,kBAAkB,QAAQ;CAClC,GAEM,KAAQ,GAAiD,MAA0C;EACvG,IAAM,IAA8B,CAAC,GAC/B,KAAM,GAAc,MAAiC;GAEzD,AADA,EAAQ,iBAAiB,GAAM,CAAO,GACtC,EAAS,WAAW,EAAQ,oBAAoB,GAAM,CAAO,CAAC;EAChE;EAoBA,AAlBI,EAAQ,WACV,EAAG,UAAU,MAAM,EAAQ,QAAS,CAAe,CAAC,GAGtD,EAAG,UAAU,MAAM;GAIjB,AAHA,EAAE,gBAAgB,GAClB,EAAQ,gBAAgB,CAAC,GACzB,EAAM,QAAQ,EAAQ,OACtB,EAAQ,UAAU,GAAG,EAAQ,KAAK;EACpC,CAAC,GAED,EAAG,WAAW,MAAM;GAIlB,AAHA,EAAE,gBAAgB,GAClB,EAAM,QAAQ,EAAQ,OACtB,EAAQ,WAAW,GAAG,EAAQ,KAAK,GACnC,EAAM,kBAAkB,QAAQ;EAClC,CAAC,GAED,EAAG,SAAS,MAAM;GAEhB,AADA,EAAQ,SAAS,CAAe,GAChC,EAAM,kBAAkB,MAAM;EAChC,CAAC;EAED,IAAI,IAAW,IACT,UAAqB;GACrB,QAEJ;QAAW;IACX,KAAK,IAAM,KAAW,GAAU,EAAQ;GAD7B;EAEb;EAIA,OAFA,GAAQ,iBAAiB,SAAS,GAAQ,EAAE,MAAM,GAAK,CAAC,GAEjD;CACT;CAEA,OAAO;EAAE,GAAG;EAAO;EAAO;EAAS;EAAO;EAAmB;EAAU;EAAO;CAAK;AACrF"}
+{"version":3,"file":"text-field.js","names":[],"sources":["../../src/core/text-field.ts"],"sourcesContent":["import { computed, type Readable, type Signal } from '@vielzeug/ripple';\n\nimport { type CounterState, createCounterState, createField, type FieldHandle, type FieldOptions } from './field-base';\nimport { syncedSignal } from './signals';\n\n// ── Text field ────────────────────────────────────────────────────────────────\n\n/** Detach function returned by `wire()`. Call to remove element listeners. */\nexport type TextFieldDetach = () => void;\n\nexport type TextFieldOptions = FieldOptions & {\n  maxLength?: Readable<number | undefined>;\n  /**\n   * Called synchronously before value extraction on every input event.\n   * Use only for DOM side-effects (e.g. auto-resize measurement) that must\n   * run before the reactive value is updated.\n   */\n  onBeforeInput?: (event: Event) => void;\n  onBlur?: (event: FocusEvent) => void;\n  onChange?: (event: Event, value: string) => void;\n  onFocus?: (event: FocusEvent) => void;\n  onInput?: (event: Event, value: string) => void;\n  /**\n   * Bars the field from constraint validation while true — matches the native HTML rule that a\n   * `readonly` field is never a candidate for constraint validation (a `readonly required`\n   * field is always valid, per spec), so `validity`/`validationMessage` don't feed a false\n   * `valueMissing` into `useField()` just because a read-only field happens to be blank.\n   */\n  readonly?: Readable<boolean | undefined>;\n  /** Marks a blank value invalid — feeds `validity`/`validationMessage` (see below). */\n  required?: Readable<boolean | undefined>;\n  /** Message for the blank+required case. Defaults to `'This field is required.'`. */\n  requiredMessage?: Readable<string | undefined>;\n  /** `AbortSignal` from the component lifecycle. The internal value-sync watcher is disposed on abort. */\n  signal: AbortSignal;\n  value: Readable<string | undefined>;\n};\n\nexport type TextFieldHandle = FieldHandle & {\n  /**\n   * Registers the real form field handle (the return value of `useField()`) so that\n   * `triggerValidation()` — called internally on blur/change — can call its\n   * `reportValidity()`. `useField()` itself needs `value` (below) to exist first, so this\n   * is a two-step wiring rather than a constructor option:\n   *\n   * ```ts\n   * const tf = createTextField({ value: props.value, ... });\n   * const formField = useField({ value: tf.value, ... });\n   * tf.attachFormField(formField);\n   * ```\n   */\n  attachFormField: (formField: { reportValidity(): void }) => void;\n  /** Clears the field value and fires synthetic input/change events. */\n  clear: (event?: Event) => void;\n  /**\n   * Reactive counter state. Non-null when `maxLength` was provided; `null` otherwise.\n   * Components should only render a counter element when this is non-null.\n   */\n  counter: Readable<CounterState> | null;\n  /**\n   * Restores the value to whatever the `value` option currently holds (native form\n   * `reset()` semantics: a `<input>` reverts to its *current* `value` content attribute,\n   * not a frozen snapshot from element creation — so setting the attribute programmatically\n   * after mount changes what a later reset reverts to). Wire into `useField({ onReset: tf.reset })`.\n   */\n  reset: () => void;\n  /** Reactive validation message paired with `validity`. Empty string when valid. */\n  validationMessage: Readable<string>;\n  /**\n   * Reactive `ValidityStateFlags` — `{ valueMissing: true }` while `required` and blank,\n   * `null` (valid) otherwise. Pass straight to `useField({ validity: tf.validity })`.\n   */\n  validity: Readable<ValidityStateFlags | null>;\n  /** The local mutable field value (two-way bound to the input element via `wire()`). */\n  value: Signal<string>;\n  /**\n   * Attaches event listeners to the underlying input or textarea element.\n   *\n   * When `signal` is provided, the listeners are detached automatically when\n   * the signal's controller calls `abort()`. Without a signal the returned\n   * `TextFieldDetach` must be called manually.\n   *\n   * Safe to call multiple times — each call attaches a fresh set of listeners\n   * and returns a distinct detach function. Calling detach multiple times is\n   * a no-op (guarded internally).\n   */\n  wire: (el: HTMLInputElement | HTMLTextAreaElement, signal?: AbortSignal) => TextFieldDetach;\n};\n\nconst isBlank = (value: string): boolean => value.trim() === '';\nconst toFieldValue = (v: string | undefined): string => String(v ?? '');\n\nexport const createTextField = (options: TextFieldOptions): TextFieldHandle => {\n  const value = syncedSignal(options.value, options.signal, toFieldValue);\n\n  const field = createField(options);\n  const counter = options.maxLength ? createCounterState({ maxLength: options.maxLength, value }) : null;\n\n  const validity = computed<ValidityStateFlags | null>(() =>\n    !options.readonly?.value && options.required?.value && isBlank(value.value) ? { valueMissing: true } : null,\n  );\n  const validationMessage = computed(() =>\n    validity.value ? options.requiredMessage?.value || 'This field is required.' : '',\n  );\n\n  const reset = (): void => {\n    value.value = toFieldValue(options.value.value);\n    field.triggerValidation('change');\n  };\n\n  const clear = (event?: Event): void => {\n    event?.preventDefault?.();\n    value.value = '';\n    options.onInput?.(event ?? new InputEvent('input', { bubbles: true }), '');\n    options.onChange?.(event ?? new Event('change', { bubbles: true }), '');\n    field.triggerValidation('change');\n  };\n\n  const wire = (element: HTMLInputElement | HTMLTextAreaElement, signal?: AbortSignal): TextFieldDetach => {\n    const cleanups: Array<() => void> = [];\n    const on = (type: string, handler: EventListener): void => {\n      element.addEventListener(type, handler);\n      cleanups.push(() => element.removeEventListener(type, handler));\n    };\n\n    if (options.onFocus) {\n      on('focus', (e) => options.onFocus?.(e as FocusEvent));\n    }\n\n    on('input', (e) => {\n      e.stopPropagation();\n      options.onBeforeInput?.(e);\n      value.value = element.value;\n      options.onInput?.(e, element.value);\n    });\n\n    on('change', (e) => {\n      e.stopPropagation();\n      value.value = element.value;\n      options.onChange?.(e, element.value);\n      field.triggerValidation('change');\n    });\n\n    on('blur', (e) => {\n      options.onBlur?.(e as FocusEvent);\n      field.triggerValidation('blur');\n    });\n\n    let detached = false;\n    const detach = (): void => {\n      if (detached) return;\n\n      detached = true;\n      for (const dispose of cleanups) dispose();\n    };\n\n    signal?.addEventListener('abort', detach, { once: true });\n\n    return detach;\n  };\n\n  return { ...field, clear, counter, reset, validationMessage, validity, value, wire };\n};\n"],"mappings":";;;;AAyFA,IAAM,KAAW,MAA2B,EAAM,KAAK,MAAM,IACvD,KAAgB,MAAkC,OAAO,KAAK,EAAE,GAEzD,KAAmB,MAA+C;CAC7E,IAAM,IAAQ,EAAa,EAAQ,OAAO,EAAQ,QAAQ,CAAY,GAEhE,IAAQ,EAAY,CAAO,GAC3B,IAAU,EAAQ,YAAY,EAAmB;EAAE,WAAW,EAAQ;EAAW;CAAM,CAAC,IAAI,MAE5F,IAAW,QACf,CAAC,EAAQ,UAAU,SAAS,EAAQ,UAAU,SAAS,EAAQ,EAAM,KAAK,IAAI,EAAE,cAAc,GAAK,IAAI,IACzG,GACM,IAAoB,QACxB,EAAS,QAAQ,EAAQ,iBAAiB,SAAS,4BAA4B,EACjF,GAEM,UAAoB;EAExB,AADA,EAAM,QAAQ,EAAa,EAAQ,MAAM,KAAK,GAC9C,EAAM,kBAAkB,QAAQ;CAClC,GAEM,KAAS,MAAwB;EAKrC,AAJA,GAAO,iBAAiB,GACxB,EAAM,QAAQ,IACd,EAAQ,UAAU,KAAS,IAAI,WAAW,SAAS,EAAE,SAAS,GAAK,CAAC,GAAG,EAAE,GACzE,EAAQ,WAAW,KAAS,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,GAAG,EAAE,GACtE,EAAM,kBAAkB,QAAQ;CAClC,GAEM,KAAQ,GAAiD,MAA0C;EACvG,IAAM,IAA8B,CAAC,GAC/B,KAAM,GAAc,MAAiC;GAEzD,AADA,EAAQ,iBAAiB,GAAM,CAAO,GACtC,EAAS,WAAW,EAAQ,oBAAoB,GAAM,CAAO,CAAC;EAChE;EAoBA,AAlBI,EAAQ,WACV,EAAG,UAAU,MAAM,EAAQ,UAAU,CAAe,CAAC,GAGvD,EAAG,UAAU,MAAM;GAIjB,AAHA,EAAE,gBAAgB,GAClB,EAAQ,gBAAgB,CAAC,GACzB,EAAM,QAAQ,EAAQ,OACtB,EAAQ,UAAU,GAAG,EAAQ,KAAK;EACpC,CAAC,GAED,EAAG,WAAW,MAAM;GAIlB,AAHA,EAAE,gBAAgB,GAClB,EAAM,QAAQ,EAAQ,OACtB,EAAQ,WAAW,GAAG,EAAQ,KAAK,GACnC,EAAM,kBAAkB,QAAQ;EAClC,CAAC,GAED,EAAG,SAAS,MAAM;GAEhB,AADA,EAAQ,SAAS,CAAe,GAChC,EAAM,kBAAkB,MAAM;EAChC,CAAC;EAED,IAAI,IAAW,IACT,UAAqB;GACrB,QAEJ;QAAW;IACX,KAAK,IAAM,KAAW,GAAU,EAAQ;GAD7B;EAEb;EAIA,OAFA,GAAQ,iBAAiB,SAAS,GAAQ,EAAE,MAAM,GAAK,CAAC,GAEjD;CACT;CAEA,OAAO;EAAE,GAAG;EAAO;EAAO;EAAS;EAAO;EAAmB;EAAU;EAAO;CAAK;AACrF"}