stimeo-ui 0.2.0 → 0.2.1

package/dist/controllers/color_picker_controller.js

@@ -0,0 +1,213 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/color_picker_controller.ts
+var COLOR_PROPERTY = "--stimeo-color";
+var CHANNEL_RANGE = {
+  hue: [0, 360],
+  saturation: [0, 100],
+  lightness: [0, 100],
+  alpha: [0, 100]
+};
+var ColorPickerController = class extends Controller {
+  static targets = ["slider", "hex", "preview", "field"];
+  static values = {
+    value: { type: String, default: "#000000" },
+    alpha: { type: Boolean, default: false }
+  };
+  static actions = ["onHexInput", "onKeydown", "onPointerDown"];
+  static events = ["change"];
+  /** The current color in the editing model. */
+  #color = { hue: 0, saturation: 0, lightness: 0, alpha: 100 };
+  /** Aborts in-progress pointer-drag listeners on drag end / teardown. */
+  #dragAbort = null;
+  /** Seeds the model from the initial hex value and renders every surface. */
+  connect() {
+    const parsed = hexToHsla(this.valueValue);
+    if (parsed) this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+    this.#render();
+  }
+  /** Cancels any active pointer drag so document listeners never leak. */
+  disconnect() {
+    this.#dragAbort?.abort();
+    this.#dragAbort = null;
+  }
+  /** Keyboard stepping on the focused channel slider (APG Slider model). */
+  onKeydown(event) {
+    const slider = event.currentTarget;
+    const channel = this.#channelOf(slider);
+    if (!channel) return;
+    const [min, max] = this.#rangeOf(slider, channel);
+    const value = this.#color[channel];
+    let next = null;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = value + 1;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = value - 1;
+        break;
+      case "PageUp":
+        next = value + 10;
+        break;
+      case "PageDown":
+        next = value - 10;
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    this.#setChannel(channel, next, min, max);
+  }
+  /** Begins a pointer drag on a channel slider and tracks movement. */
+  onPointerDown(event) {
+    const slider = event.currentTarget;
+    const channel = this.#channelOf(slider);
+    if (!channel) return;
+    event.preventDefault();
+    slider.focus();
+    const [min, max] = this.#rangeOf(slider, channel);
+    const update = (clientX) => {
+      const rect = slider.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const fraction = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+      this.#setChannel(channel, min + fraction * (max - min), min, max);
+    };
+    update(event.clientX);
+    this.#dragAbort?.abort();
+    const abort = new AbortController();
+    this.#dragAbort = abort;
+    const onMove = (move) => update(move.clientX);
+    const onUp = () => {
+      abort.abort();
+      this.#dragAbort = null;
+    };
+    document.addEventListener("pointermove", onMove, { signal: abort.signal });
+    document.addEventListener("pointerup", onUp, { signal: abort.signal });
+    document.addEventListener("pointercancel", onUp, { signal: abort.signal });
+  }
+  /** Parses the hex input on confirm and syncs every channel + surface. */
+  onHexInput() {
+    if (!this.hasHexTarget) return;
+    const parsed = hexToHsla(this.hexTarget.value);
+    if (!parsed) {
+      this.hexTarget.value = this.#hexString();
+      return;
+    }
+    this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+    this.#render();
+  }
+  /** Clamps and snaps one channel to an integer, then re-renders + emits change. */
+  #setChannel(channel, raw, min, max) {
+    this.#color[channel] = Math.round(Math.min(max, Math.max(min, raw)));
+    this.#render();
+  }
+  /** Reflects the model onto sliders, the hex input, preview, and form field. */
+  #render() {
+    for (const slider of this.sliderTargets) {
+      const channel = this.#channelOf(slider);
+      if (!channel) continue;
+      const value = this.#color[channel];
+      slider.setAttribute("aria-valuenow", String(value));
+      slider.setAttribute("aria-valuetext", valueText(channel, value));
+    }
+    const hex = this.#hexString();
+    if (this.hasHexTarget) this.hexTarget.value = hex;
+    for (const field of this.fieldTargets) field.value = hex;
+    for (const preview of this.previewTargets) preview.style.setProperty(COLOR_PROPERTY, hex);
+    this.element.style.setProperty(COLOR_PROPERTY, hex);
+    const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);
+    this.dispatch("change", {
+      detail: { value: hex, rgba: { ...rgb, a: this.#color.alpha / 100 } }
+    });
+  }
+  /** The current color as `#RRGGBB`, or `#RRGGBBAA` when alpha is enabled. */
+  #hexString() {
+    const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);
+    const base = `#${hex2(rgb.r)}${hex2(rgb.g)}${hex2(rgb.b)}`;
+    if (!this.alphaValue) return base;
+    return `${base}${hex2(Math.round(this.#color.alpha / 100 * 255))}`;
+  }
+  /** Reads a slider's `data-channel`, if it is a known channel. */
+  #channelOf(slider) {
+    const channel = slider.getAttribute("data-channel");
+    return channel && channel in CHANNEL_RANGE ? channel : null;
+  }
+  /** A slider's `[min, max]` from aria-valuemin/max, falling back per channel. */
+  #rangeOf(slider, channel) {
+    const [defMin, defMax] = CHANNEL_RANGE[channel];
+    const min = Number(slider.getAttribute("aria-valuemin"));
+    const max = Number(slider.getAttribute("aria-valuemax"));
+    return [Number.isFinite(min) ? min : defMin, Number.isFinite(max) ? max : defMax];
+  }
+};
+function valueText(channel, value) {
+  const label = channel.charAt(0).toUpperCase() + channel.slice(1);
+  const unit = channel === "hue" ? "degrees" : "percent";
+  return `${label} ${value} ${unit}`;
+}
+function hex2(value) {
+  return Math.round(Math.min(255, Math.max(0, value))).toString(16).padStart(2, "0");
+}
+function hslToRgb(h, s, l) {
+  const sat = s / 100;
+  const light = l / 100;
+  const c = (1 - Math.abs(2 * light - 1)) * sat;
+  const hp = (h % 360 + 360) % 360 / 60;
+  const x = c * (1 - Math.abs(hp % 2 - 1));
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (hp >= 0 && hp < 1) [r, g, b] = [c, x, 0];
+  else if (hp < 2) [r, g, b] = [x, c, 0];
+  else if (hp < 3) [r, g, b] = [0, c, x];
+  else if (hp < 4) [r, g, b] = [0, x, c];
+  else if (hp < 5) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const m = light - c / 2;
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255)
+  };
+}
+function rgbToHsl(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const delta = max - min;
+  const l = (max + min) / 2;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rn) h = (gn - bn) / delta % 6;
+    else if (max === gn) h = (bn - rn) / delta + 2;
+    else h = (rn - gn) / delta + 4;
+    h = (h * 60 + 360) % 360;
+  }
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+function hexToHsla(input) {
+  const hex = input.trim().replace(/^#/, "");
+  if (!/^(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(hex)) return null;
+  const full = hex.length <= 4 ? hex.split("").map((char) => char + char).join("") : hex;
+  const r = Number.parseInt(full.slice(0, 2), 16);
+  const g = Number.parseInt(full.slice(2, 4), 16);
+  const b = Number.parseInt(full.slice(4, 6), 16);
+  const a = full.length === 8 ? Number.parseInt(full.slice(6, 8), 16) : 255;
+  const { h, s, l } = rgbToHsl(r, g, b);
+  return { hue: h, saturation: s, lightness: l, alpha: Math.round(a / 255 * 100) };
+}
+
+export { ColorPickerController };
+//# sourceMappingURL=color_picker_controller.js.map
+//# sourceMappingURL=color_picker_controller.js.map

package/dist/controllers/color_picker_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/controllers/color_picker_controller.ts"],"names":[],"mappings":"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","file":"color_picker_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/** CSS custom property exposing the current color to consumer CSS. */\nconst COLOR_PROPERTY = \"--stimeo-color\";\n\n/** A color channel slider, identified by its `data-channel` attribute. */\ntype Channel = \"hue\" | \"saturation\" | \"lightness\" | \"alpha\";\n\n/** Default `[min, max]` per channel when the slider omits aria-valuemin/max. */\nconst CHANNEL_RANGE: Record<Channel, [number, number]> = {\n  hue: [0, 360],\n  saturation: [0, 100],\n  lightness: [0, 100],\n  alpha: [0, 100],\n};\n\n/** Internal color model: HSL plus an alpha percentage (0–100). */\ninterface Hsla {\n  hue: number;\n  saturation: number;\n  lightness: number;\n  alpha: number;\n}\n\n/**\n * Headless, accessible **Color Picker** behavior.\n *\n * Markup contract (identifier: `stimeo--color-picker`):\n *   <div data-controller=\"stimeo--color-picker\"\n *        data-stimeo--color-picker-value-value=\"#3366cc\">\n *     <div role=\"slider\" aria-label=\"Hue\" data-channel=\"hue\" tabindex=\"0\"\n *          aria-valuemin=\"0\" aria-valuemax=\"360\" aria-valuenow=\"210\"\n *          data-stimeo--color-picker-target=\"slider\"\n *          data-action=\"keydown->stimeo--color-picker#onKeydown\n *                       pointerdown->stimeo--color-picker#onPointerDown\"></div>\n *     <!-- saturation / lightness / alpha sliders share the same contract -->\n *     <input type=\"text\" aria-label=\"Hex color\"\n *            data-stimeo--color-picker-target=\"hex\"\n *            data-action=\"change->stimeo--color-picker#onHexInput\" />\n *     <div data-stimeo--color-picker-target=\"preview\" aria-hidden=\"true\"></div>\n *     <input type=\"hidden\" data-stimeo--color-picker-target=\"field\" />\n *   </div>\n *\n * Decomposes color selection into independent APG **Slider** channels (hue,\n * saturation, lightness, optional alpha) instead of a 2-D palette, so every\n * adjustment is keyboard- and screen-reader-operable. Each slider exposes\n * `aria-valuenow` and a human-readable `aria-valuetext` (e.g. \"Hue 210 degrees\");\n * the hex input stays two-way synced; the current color is published on the\n * preview and root as the `--stimeo-color` custom property and mirrored into a\n * hidden form field.\n *\n * @remarks\n * Behavior only — the swatch/gradient visuals are the consumer's CSS/canvas, fed\n * by `--stimeo-color`. Pointer-drag listeners on `document` are bound to an\n * {@link AbortController} and released on drag end and on `disconnect()` (Turbo\n * navigation included). Color is fully reconstructable from the `value` (hex), so\n * there is no transient state to restore after a Turbo cache/morph.\n *\n * The internal model is integer HSL(A), so a hex → HSL → hex round-trip is not\n * exactly bijective: a typed hex can normalize to a near (not identical) value\n * once the HSL sliders are touched. This keeps the model small and zero-dep; use a\n * dedicated color library on the consumer side if exact hex preservation matters.\n */\nexport class ColorPickerController extends Controller<HTMLElement> {\n  static override targets = [\"slider\", \"hex\", \"preview\", \"field\"];\n  static override values = {\n    value: { type: String, default: \"#000000\" },\n    alpha: { type: Boolean, default: false },\n  };\n  static actions = [\"onHexInput\", \"onKeydown\", \"onPointerDown\"] as const;\n  static events = [\"change\"] as const;\n\n  declare readonly sliderTargets: HTMLElement[];\n  declare readonly hexTarget: HTMLInputElement;\n  declare readonly hasHexTarget: boolean;\n  declare readonly previewTargets: HTMLElement[];\n  declare readonly fieldTargets: HTMLInputElement[];\n  declare valueValue: string;\n  declare alphaValue: boolean;\n\n  /** The current color in the editing model. */\n  #color: Hsla = { hue: 0, saturation: 0, lightness: 0, alpha: 100 };\n  /** Aborts in-progress pointer-drag listeners on drag end / teardown. */\n  #dragAbort: AbortController | null = null;\n\n  /** Seeds the model from the initial hex value and renders every surface. */\n  override connect(): void {\n    const parsed = hexToHsla(this.valueValue);\n    // When alpha is disabled, drop any alpha carried by an `#RRGGBBAA` value so\n    // the model stays opaque — otherwise `hexString()` would emit `#RRGGBB`\n    // while `change` reported `rgba.a < 1`. Mirrors `onHexInput()`.\n    if (parsed) this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };\n    this.#render();\n  }\n\n  /** Cancels any active pointer drag so document listeners never leak. */\n  override disconnect(): void {\n    this.#dragAbort?.abort();\n    this.#dragAbort = null;\n  }\n\n  /** Keyboard stepping on the focused channel slider (APG Slider model). */\n  onKeydown(event: KeyboardEvent): void {\n    const slider = event.currentTarget as HTMLElement;\n    const channel = this.#channelOf(slider);\n    if (!channel) return;\n\n    const [min, max] = this.#rangeOf(slider, channel);\n    const value = this.#color[channel];\n    let next: number | null = null;\n    switch (event.key) {\n      case \"ArrowRight\":\n      case \"ArrowUp\":\n        next = value + 1;\n        break;\n      case \"ArrowLeft\":\n      case \"ArrowDown\":\n        next = value - 1;\n        break;\n      case \"PageUp\":\n        next = value + 10;\n        break;\n      case \"PageDown\":\n        next = value - 10;\n        break;\n      case \"Home\":\n        next = min;\n        break;\n      case \"End\":\n        next = max;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.#setChannel(channel, next, min, max);\n  }\n\n  /** Begins a pointer drag on a channel slider and tracks movement. */\n  onPointerDown(event: PointerEvent): void {\n    const slider = event.currentTarget as HTMLElement;\n    const channel = this.#channelOf(slider);\n    if (!channel) return;\n    event.preventDefault();\n    slider.focus();\n\n    const [min, max] = this.#rangeOf(slider, channel);\n    const update = (clientX: number): void => {\n      const rect = slider.getBoundingClientRect();\n      if (rect.width === 0) return;\n      const fraction = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));\n      this.#setChannel(channel, min + fraction * (max - min), min, max);\n    };\n    update(event.clientX);\n\n    this.#dragAbort?.abort();\n    const abort = new AbortController();\n    this.#dragAbort = abort;\n    const onMove = (move: PointerEvent): void => update(move.clientX);\n    const onUp = (): void => {\n      abort.abort();\n      this.#dragAbort = null;\n    };\n    document.addEventListener(\"pointermove\", onMove, { signal: abort.signal });\n    document.addEventListener(\"pointerup\", onUp, { signal: abort.signal });\n    document.addEventListener(\"pointercancel\", onUp, { signal: abort.signal });\n  }\n\n  /** Parses the hex input on confirm and syncs every channel + surface. */\n  onHexInput(): void {\n    if (!this.hasHexTarget) return;\n    const parsed = hexToHsla(this.hexTarget.value);\n    if (!parsed) {\n      // Reject invalid input by restoring the last valid hex.\n      this.hexTarget.value = this.#hexString();\n      return;\n    }\n    this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };\n    this.#render();\n  }\n\n  /** Clamps and snaps one channel to an integer, then re-renders + emits change. */\n  #setChannel(channel: Channel, raw: number, min: number, max: number): void {\n    this.#color[channel] = Math.round(Math.min(max, Math.max(min, raw)));\n    this.#render();\n  }\n\n  /** Reflects the model onto sliders, the hex input, preview, and form field. */\n  #render(): void {\n    for (const slider of this.sliderTargets) {\n      const channel = this.#channelOf(slider);\n      if (!channel) continue;\n      const value = this.#color[channel];\n      slider.setAttribute(\"aria-valuenow\", String(value));\n      slider.setAttribute(\"aria-valuetext\", valueText(channel, value));\n    }\n\n    const hex = this.#hexString();\n    if (this.hasHexTarget) this.hexTarget.value = hex;\n    for (const field of this.fieldTargets) field.value = hex;\n    for (const preview of this.previewTargets) preview.style.setProperty(COLOR_PROPERTY, hex);\n    this.element.style.setProperty(COLOR_PROPERTY, hex);\n\n    const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);\n    this.dispatch(\"change\", {\n      detail: { value: hex, rgba: { ...rgb, a: this.#color.alpha / 100 } },\n    });\n  }\n\n  /** The current color as `#RRGGBB`, or `#RRGGBBAA` when alpha is enabled. */\n  #hexString(): string {\n    const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);\n    const base = `#${hex2(rgb.r)}${hex2(rgb.g)}${hex2(rgb.b)}`;\n    if (!this.alphaValue) return base;\n    return `${base}${hex2(Math.round((this.#color.alpha / 100) * 255))}`;\n  }\n\n  /** Reads a slider's `data-channel`, if it is a known channel. */\n  #channelOf(slider: HTMLElement): Channel | null {\n    const channel = slider.getAttribute(\"data-channel\");\n    return channel && channel in CHANNEL_RANGE ? (channel as Channel) : null;\n  }\n\n  /** A slider's `[min, max]` from aria-valuemin/max, falling back per channel. */\n  #rangeOf(slider: HTMLElement, channel: Channel): [number, number] {\n    const [defMin, defMax] = CHANNEL_RANGE[channel];\n    const min = Number(slider.getAttribute(\"aria-valuemin\"));\n    const max = Number(slider.getAttribute(\"aria-valuemax\"));\n    return [Number.isFinite(min) ? min : defMin, Number.isFinite(max) ? max : defMax];\n  }\n}\n\n/** Capitalizes a channel name for `aria-valuetext` (e.g. \"Hue\"). */\nfunction valueText(channel: Channel, value: number): string {\n  const label = channel.charAt(0).toUpperCase() + channel.slice(1);\n  const unit = channel === \"hue\" ? \"degrees\" : \"percent\";\n  return `${label} ${value} ${unit}`;\n}\n\n/** Formats a 0–255 byte as a 2-digit lowercase hex pair. */\nfunction hex2(value: number): string {\n  return Math.round(Math.min(255, Math.max(0, value)))\n    .toString(16)\n    .padStart(2, \"0\");\n}\n\n/** Converts HSL (h:0–360, s/l:0–100) to RGB bytes (0–255). */\nfunction hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {\n  const sat = s / 100;\n  const light = l / 100;\n  const c = (1 - Math.abs(2 * light - 1)) * sat;\n  const hp = (((h % 360) + 360) % 360) / 60;\n  const x = c * (1 - Math.abs((hp % 2) - 1));\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (hp >= 0 && hp < 1) [r, g, b] = [c, x, 0];\n  else if (hp < 2) [r, g, b] = [x, c, 0];\n  else if (hp < 3) [r, g, b] = [0, c, x];\n  else if (hp < 4) [r, g, b] = [0, x, c];\n  else if (hp < 5) [r, g, b] = [x, 0, c];\n  else [r, g, b] = [c, 0, x];\n  const m = light - c / 2;\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n  };\n}\n\n/** Converts RGB bytes (0–255) to HSL (h:0–360, s/l:0–100). */\nfunction rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {\n  const rn = r / 255;\n  const gn = g / 255;\n  const bn = b / 255;\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const delta = max - min;\n  const l = (max + min) / 2;\n\n  let h = 0;\n  if (delta !== 0) {\n    if (max === rn) h = ((gn - bn) / delta) % 6;\n    else if (max === gn) h = (bn - rn) / delta + 2;\n    else h = (rn - gn) / delta + 4;\n    h = (h * 60 + 360) % 360;\n  }\n  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));\n  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n}\n\n/**\n * Parses `#RGB`, `#RGBA`, `#RRGGBB`, or `#RRGGBBAA` into the HSLA model, or\n * returns null when the string is not a valid hex color.\n */\nfunction hexToHsla(input: string): Hsla | null {\n  const hex = input.trim().replace(/^#/, \"\");\n  if (!/^(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(hex)) return null;\n\n  // Expand shorthand (#RGB / #RGBA) so every channel is a full byte pair.\n  const full =\n    hex.length <= 4\n      ? hex\n          .split(\"\")\n          .map((char) => char + char)\n          .join(\"\")\n      : hex;\n\n  const r = Number.parseInt(full.slice(0, 2), 16);\n  const g = Number.parseInt(full.slice(2, 4), 16);\n  const b = Number.parseInt(full.slice(4, 6), 16);\n  const a = full.length === 8 ? Number.parseInt(full.slice(6, 8), 16) : 255;\n\n  const { h, s, l } = rgbToHsl(r, g, b);\n  return { hue: h, saturation: s, lightness: l, alpha: Math.round((a / 255) * 100) };\n}\n"]}

package/dist/controllers/count_up_controller.js

@@ -1,5 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/count_up_controller.ts
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/count_up_controller.ts
 var CountUpController = class extends Controller {
   static values = {
@@ -32,7 +39,7 @@ var CountUpController = class extends Controller {
     this.#finalText = this.element.textContent ?? "";
     const target = Number.parseInt(this.#finalText.replace(/[^0-9-]/g, ""), 10);
     if (Number.isNaN(target)) return;
-    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    if (prefersReducedMotion()) {
       this.element.setAttribute("data-count-up-done", "true");
       this.dispatch("end", { detail: { value: target } });
       return;

package/dist/controllers/count_up_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/controllers/count_up_controller.ts"],"names":[],"mappings":"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","file":"count_up_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/**\n * Headless **count-up**: animates a number from `from` up to the value already\n * in the DOM — typically started the moment the element scrolls into view by\n * composing with the `stimeo--intersection` primitive (the classic \"animate\n * when visible\"). Distinct from `stimeo--countdown` (time-based). Core\n * (zero dependencies).\n *\n * Markup contract (identifier: `stimeo--count-up`):\n *   <span data-controller=\"stimeo--intersection stimeo--count-up\"\n *         data-stimeo--intersection-once-value=\"true\"\n *         data-action=\"stimeo--intersection:enter->stimeo--count-up#start\">1200</span>\n *\n * The **final number stays authored in the markup** (SEO / no-JS / SR read the\n * real value); `start` animates the displayed text from `from` to it over\n * `duration` ms with an ease-out curve, then restores the exact authored text.\n * With `once` (default) later starts are ignored (`data-count-up-done` records\n * a finished run across Turbo cache restores).\n *\n * @remarks\n * Behavior only — no formatting is imposed: the authored text is parsed for\n * its integer value (separators are ignored) and restored verbatim at the end;\n * intermediate frames render plain integers. Accessibility: when the user\n * prefers reduced motion the animation is skipped entirely (the value just\n * stays final — WCAG 2.3.3). The element is not a live region, so the ticking\n * intermediate numbers are never actively announced; during the run the\n * authored value is additionally kept in `aria-label` (best-effort — generic\n * roles may ignore it) and that lingering label doubles as the\n * interrupted-run marker `connect()` restores from after a Turbo cache\n * snapshot taken mid-animation. The animation frame is canceled on\n * `disconnect()` (Turbo navigation included) and the authored text restored.\n */\nexport class CountUpController extends Controller<HTMLElement> {\n  static override values = {\n    duration: { type: Number, default: 1200 },\n    from: { type: Number, default: 0 },\n    once: { type: Boolean, default: true },\n  };\n  static actions = [\"start\"] as const;\n  static events = [\"end\"] as const;\n\n  declare durationValue: number;\n  declare fromValue: number;\n  declare onceValue: boolean;\n\n  #frame: number | null = null;\n  /** The authored final text, restored verbatim when the run settles. */\n  #finalText = \"\";\n\n  override connect(): void {\n    // Turbo snapshots the page BEFORE the body swap, so a cached page can hold\n    // a mid-animation frame (disconnect()'s settle runs too late for it). The\n    // OWN-label marker (never a bare aria-label — that may be authored) flags\n    // the interrupted run: the label it owns still holds the authored text.\n    if (this.element.hasAttribute(\"data-count-up-label\")) {\n      this.element.textContent =\n        this.element.getAttribute(\"aria-label\") ?? this.element.textContent;\n      this.#restoreLabel();\n      this.element.setAttribute(\"data-count-up-done\", \"true\");\n    }\n  }\n\n  override disconnect(): void {\n    // A run cannot survive the element: settle instantly so the cached\n    // snapshot holds the real value, never a mid-animation frame.\n    if (this.#frame !== null) this.#settle();\n  }\n\n  /**\n   * Starts the animation (typically from `stimeo--intersection:enter` via\n   * `data-action`). No-ops while running, and after a finished run when `once`.\n   */\n  start(): void {\n    if (this.#frame !== null) return;\n    if (this.onceValue && this.element.hasAttribute(\"data-count-up-done\")) return;\n\n    this.#finalText = this.element.textContent ?? \"\";\n    const target = Number.parseInt(this.#finalText.replace(/[^0-9-]/g, \"\"), 10);\n    if (Number.isNaN(target)) return;\n\n    // Reduced motion: no ticking, just the final value (WCAG 2.3.3).\n    if (window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches) {\n      this.element.setAttribute(\"data-count-up-done\", \"true\");\n      this.dispatch(\"end\", { detail: { value: target } });\n      return;\n    }\n\n    // AT keeps the real value while the visible text ticks. An authored\n    // aria-label is parked (save-restore, never clobbered) and the override is\n    // marker-owned so connect()/settle() only ever touch what this set.\n    const authored = this.element.getAttribute(\"aria-label\");\n    if (authored !== null) {\n      this.element.setAttribute(\"data-count-up-original-label\", authored);\n    }\n    this.element.setAttribute(\"data-count-up-label\", \"true\");\n    this.element.setAttribute(\"aria-label\", this.#finalText);\n    const started = performance.now();\n    const step = (now: number): void => {\n      const t = Math.min((now - started) / this.durationValue, 1);\n      const eased = 1 - (1 - t) ** 3; // ease-out cubic\n      this.element.textContent = String(\n        Math.round(this.fromValue + (target - this.fromValue) * eased),\n      );\n      if (t < 1) {\n        this.#frame = requestAnimationFrame(step);\n      } else {\n        this.#settle();\n        this.dispatch(\"end\", { detail: { value: target } });\n      }\n    };\n    this.#frame = requestAnimationFrame(step);\n  }\n\n  /** Ends the run: cancels the frame and restores the authored presentation. */\n  #settle(): void {\n    if (this.#frame !== null) cancelAnimationFrame(this.#frame);\n    this.#frame = null;\n    this.element.textContent = this.#finalText;\n    this.#restoreLabel();\n    this.element.setAttribute(\"data-count-up-done\", \"true\");\n  }\n\n  /** Releases the marker-owned aria-label, restoring any parked authored value. */\n  #restoreLabel(): void {\n    if (!this.element.hasAttribute(\"data-count-up-label\")) return;\n    const original = this.element.getAttribute(\"data-count-up-original-label\");\n    if (original !== null) {\n      this.element.setAttribute(\"aria-label\", original);\n      this.element.removeAttribute(\"data-count-up-original-label\");\n    } else {\n      this.element.removeAttribute(\"aria-label\");\n    }\n    this.element.removeAttribute(\"data-count-up-label\");\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/reduced_motion.ts","../../src/controllers/count_up_controller.ts"],"names":[],"mappings":"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","file":"count_up_controller.js","sourcesContent":["/**\n * Shared `prefers-reduced-motion` lookup for the motion-aware controllers\n * (count-up, highlight, overflow-indicator, scroll-visibility, stick-to-bottom,\n * transition).\n *\n * Each of those controllers used to duplicate the same guarded `matchMedia`\n * read; this one-liner keeps the media query string and the environment guard\n * single-sourced. The preference is intentionally re-read on every call — the\n * controllers check it at each animation/scroll start (WCAG 2.2 **2.3.3**), so\n * flipping the OS setting takes effect immediately without any listener or\n * cache bookkeeping here.\n */\n\n/**\n * Whether the user currently requests reduced motion.\n *\n * @returns `true` when `(prefers-reduced-motion: reduce)` matches; `false`\n * otherwise, including environments without `window.matchMedia` (treated as\n * \"no preference\").\n */\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { prefersReducedMotion } from \"../utils/reduced_motion\";\n\n/**\n * Headless **count-up**: animates a number from `from` up to the value already\n * in the DOM — typically started the moment the element scrolls into view by\n * composing with the `stimeo--intersection` primitive (the classic \"animate\n * when visible\"). Distinct from `stimeo--countdown` (time-based). Core\n * (zero dependencies).\n *\n * Markup contract (identifier: `stimeo--count-up`):\n *   <span data-controller=\"stimeo--intersection stimeo--count-up\"\n *         data-stimeo--intersection-once-value=\"true\"\n *         data-action=\"stimeo--intersection:enter->stimeo--count-up#start\">1200</span>\n *\n * The **final number stays authored in the markup** (SEO / no-JS / SR read the\n * real value); `start` animates the displayed text from `from` to it over\n * `duration` ms with an ease-out curve, then restores the exact authored text.\n * With `once` (default) later starts are ignored (`data-count-up-done` records\n * a finished run across Turbo cache restores).\n *\n * @remarks\n * Behavior only — no formatting is imposed: the authored text is parsed for\n * its integer value (separators are ignored) and restored verbatim at the end;\n * intermediate frames render plain integers. Accessibility: when the user\n * prefers reduced motion the animation is skipped entirely (the value just\n * stays final — WCAG 2.3.3). The element is not a live region, so the ticking\n * intermediate numbers are never actively announced; during the run the\n * authored value is additionally kept in `aria-label` (best-effort — generic\n * roles may ignore it) and that lingering label doubles as the\n * interrupted-run marker `connect()` restores from after a Turbo cache\n * snapshot taken mid-animation. The animation frame is canceled on\n * `disconnect()` (Turbo navigation included) and the authored text restored.\n */\nexport class CountUpController extends Controller<HTMLElement> {\n  static override values = {\n    duration: { type: Number, default: 1200 },\n    from: { type: Number, default: 0 },\n    once: { type: Boolean, default: true },\n  };\n  static actions = [\"start\"] as const;\n  static events = [\"end\"] as const;\n\n  declare durationValue: number;\n  declare fromValue: number;\n  declare onceValue: boolean;\n\n  #frame: number | null = null;\n  /** The authored final text, restored verbatim when the run settles. */\n  #finalText = \"\";\n\n  override connect(): void {\n    // Turbo snapshots the page BEFORE the body swap, so a cached page can hold\n    // a mid-animation frame (disconnect()'s settle runs too late for it). The\n    // OWN-label marker (never a bare aria-label — that may be authored) flags\n    // the interrupted run: the label it owns still holds the authored text.\n    if (this.element.hasAttribute(\"data-count-up-label\")) {\n      this.element.textContent =\n        this.element.getAttribute(\"aria-label\") ?? this.element.textContent;\n      this.#restoreLabel();\n      this.element.setAttribute(\"data-count-up-done\", \"true\");\n    }\n  }\n\n  override disconnect(): void {\n    // A run cannot survive the element: settle instantly so the cached\n    // snapshot holds the real value, never a mid-animation frame.\n    if (this.#frame !== null) this.#settle();\n  }\n\n  /**\n   * Starts the animation (typically from `stimeo--intersection:enter` via\n   * `data-action`). No-ops while running, and after a finished run when `once`.\n   */\n  start(): void {\n    if (this.#frame !== null) return;\n    if (this.onceValue && this.element.hasAttribute(\"data-count-up-done\")) return;\n\n    this.#finalText = this.element.textContent ?? \"\";\n    const target = Number.parseInt(this.#finalText.replace(/[^0-9-]/g, \"\"), 10);\n    if (Number.isNaN(target)) return;\n\n    // Reduced motion: no ticking, just the final value (WCAG 2.3.3).\n    if (prefersReducedMotion()) {\n      this.element.setAttribute(\"data-count-up-done\", \"true\");\n      this.dispatch(\"end\", { detail: { value: target } });\n      return;\n    }\n\n    // AT keeps the real value while the visible text ticks. An authored\n    // aria-label is parked (save-restore, never clobbered) and the override is\n    // marker-owned so connect()/settle() only ever touch what this set.\n    const authored = this.element.getAttribute(\"aria-label\");\n    if (authored !== null) {\n      this.element.setAttribute(\"data-count-up-original-label\", authored);\n    }\n    this.element.setAttribute(\"data-count-up-label\", \"true\");\n    this.element.setAttribute(\"aria-label\", this.#finalText);\n    const started = performance.now();\n    const step = (now: number): void => {\n      const t = Math.min((now - started) / this.durationValue, 1);\n      const eased = 1 - (1 - t) ** 3; // ease-out cubic\n      this.element.textContent = String(\n        Math.round(this.fromValue + (target - this.fromValue) * eased),\n      );\n      if (t < 1) {\n        this.#frame = requestAnimationFrame(step);\n      } else {\n        this.#settle();\n        this.dispatch(\"end\", { detail: { value: target } });\n      }\n    };\n    this.#frame = requestAnimationFrame(step);\n  }\n\n  /** Ends the run: cancels the frame and restores the authored presentation. */\n  #settle(): void {\n    if (this.#frame !== null) cancelAnimationFrame(this.#frame);\n    this.#frame = null;\n    this.element.textContent = this.#finalText;\n    this.#restoreLabel();\n    this.element.setAttribute(\"data-count-up-done\", \"true\");\n  }\n\n  /** Releases the marker-owned aria-label, restoring any parked authored value. */\n  #restoreLabel(): void {\n    if (!this.element.hasAttribute(\"data-count-up-label\")) return;\n    const original = this.element.getAttribute(\"data-count-up-original-label\");\n    if (original !== null) {\n      this.element.setAttribute(\"aria-label\", original);\n      this.element.removeAttribute(\"data-count-up-original-label\");\n    } else {\n      this.element.removeAttribute(\"aria-label\");\n    }\n    this.element.removeAttribute(\"data-count-up-label\");\n  }\n}\n"]}

package/dist/controllers/currency_input_controller.d.ts

@@ -0,0 +1,72 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Headless currency / amount input behavior: groups digits for display while
+ * keeping a machine-readable number in a hidden field, and mirrors the
+ * normalized value to a visually-hidden span so assistive tech reads the real
+ * amount rather than the grouped display string.
+ *
+ * Markup contract (identifier: `stimeo--currency-input`):
+ *   <div data-controller="stimeo--currency-input"
+ *        data-stimeo--currency-input-locale-value="en-US"
+ *        data-stimeo--currency-input-currency-value="USD"
+ *        data-stimeo--currency-input-precision-value="2">
+ *     <input type="text" inputmode="decimal"
+ *            aria-describedby="amt-sr"
+ *            data-stimeo--currency-input-target="display"
+ *            data-action="input->stimeo--currency-input#onInput
+ *                         blur->stimeo--currency-input#format" />
+ *     <span id="amt-sr" class="visually-hidden"
+ *           data-stimeo--currency-input-target="srValue"></span>
+ *     <input type="hidden" data-stimeo--currency-input-target="field" />
+ *   </div>
+ *
+ * @remarks
+ * Behavior only — no styling, no validation (range/required belong to the
+ * consumer or Form Field). The display field is the sole Tab stop and keeps its
+ * native text-editing behavior; this controller never steals focus. Grouping is
+ * applied on every input while preserving the caret (counted by digits to its
+ * left), and the fixed-precision rounding is applied on `blur`.
+ *
+ * Honest a11y note: a hidden `<input>` is not exposed to assistive tech, so the
+ * normalized value is *also* published as text in the `srValue` span referenced
+ * by the display's `aria-describedby` — that, not the hidden field, is what a
+ * screen reader announces.
+ */
+declare class CurrencyInputController extends Controller<HTMLElement> {
+    #private;
+    static targets: string[];
+    static values: {
+        locale: {
+            type: StringConstructor;
+            default: string;
+        };
+        currency: {
+            type: StringConstructor;
+            default: string;
+        };
+        precision: {
+            type: NumberConstructor;
+            default: number;
+        };
+    };
+    static actions: readonly ["format", "onInput"];
+    static events: readonly ["change"];
+    readonly displayTarget: HTMLInputElement;
+    readonly fieldTarget: HTMLInputElement;
+    readonly srValueTarget: HTMLElement;
+    readonly hasDisplayTarget: boolean;
+    readonly hasFieldTarget: boolean;
+    readonly hasSrValueTarget: boolean;
+    localeValue: string;
+    currencyValue: string;
+    precisionValue: number;
+    /** Normalizes any pre-filled display value to its fixed-precision form. */
+    connect(): void;
+    /** Re-groups digits as the user types, preserving the caret position. */
+    onInput(): void;
+    /** Applies the fixed-precision rounding on blur. */
+    format(): void;
+}
+
+export { CurrencyInputController };

package/dist/controllers/currency_input_controller.js

@@ -0,0 +1,147 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/currency_input_controller.ts
+var CurrencyInputController = class extends Controller {
+  static targets = ["display", "field", "srValue"];
+  static values = {
+    locale: { type: String, default: "en-US" },
+    currency: { type: String, default: "" },
+    precision: { type: Number, default: 2 }
+  };
+  static actions = ["format", "onInput"];
+  static events = ["change"];
+  /** Last committed numeric value, to suppress duplicate `change` dispatches. */
+  #lastValue = null;
+  /** Normalizes any pre-filled display value to its fixed-precision form. */
+  connect() {
+    if (!this.hasDisplayTarget) return;
+    const parsed = this.#parse(this.displayTarget.value);
+    this.#lastValue = parsed === null ? null : round(parsed, this.precisionValue);
+    if (this.displayTarget.value.trim() !== "") {
+      this.#reformat(true);
+    } else {
+      this.#reflect(null, "");
+    }
+  }
+  /** Re-groups digits as the user types, preserving the caret position. */
+  onInput() {
+    this.#reformat(false);
+  }
+  /** Applies the fixed-precision rounding on blur. */
+  format() {
+    this.#reformat(true);
+  }
+  /**
+   * Parses the display value, rewrites it grouped (optionally at fixed
+   * precision), keeps the caret stable by digit count, and syncs the field,
+   * the screen-reader span, and the `change` event.
+   */
+  #reformat(fixedPrecision) {
+    if (!this.hasDisplayTarget) return;
+    const raw = this.displayTarget.value;
+    const number = this.#parse(raw);
+    if (number === null) {
+      this.displayTarget.value = "";
+      this.#reflect(null, "");
+      return;
+    }
+    const value = fixedPrecision ? round(number, this.precisionValue) : number;
+    const caret = this.displayTarget.selectionStart;
+    const digitsBeforeCaret = typeof caret === "number" ? countDigits(raw.slice(0, caret)) : null;
+    const formatted = this.#formatNumber(value, fixedPrecision);
+    this.displayTarget.value = formatted;
+    if (digitsBeforeCaret !== null) this.#restoreCaret(formatted, digitsBeforeCaret);
+    this.#reflect(value, formatted);
+  }
+  /** Restores the caret to sit just after the n-th digit of the new string. */
+  #restoreCaret(formatted, digitsBefore) {
+    let seen = 0;
+    let position = formatted.length;
+    for (let i = 0; i < formatted.length; i++) {
+      if (seen >= digitsBefore) {
+        position = i;
+        break;
+      }
+      if (/\d/.test(formatted[i])) seen += 1;
+    }
+    try {
+      this.displayTarget.setSelectionRange(position, position);
+    } catch {
+    }
+  }
+  /** Writes the normalized value to the field, the SR span, and `change`. */
+  #reflect(value, formatted) {
+    const isEmpty = value === null;
+    if (this.hasFieldTarget) this.fieldTarget.value = isEmpty ? "" : String(value);
+    if (this.hasSrValueTarget) {
+      this.srValueTarget.textContent = isEmpty ? "" : this.#accessibleText(value);
+    }
+    this.element.toggleAttribute("data-stimeo--currency-input-empty", isEmpty);
+    if (value !== this.#lastValue) {
+      this.#lastValue = value;
+      if (!isEmpty) this.dispatch("change", { detail: { value, formatted } });
+    }
+  }
+  /** Parses arbitrary input text into a finite number, or `null` when blank. */
+  #parse(text) {
+    if (text.trim() === "") return null;
+    const { decimal } = this.#separators();
+    let cleaned = "";
+    let sawDot = false;
+    for (let i = 0; i < text.length; i++) {
+      const ch = text[i];
+      if (ch >= "0" && ch <= "9") cleaned += ch;
+      else if ((ch === "-" || ch === "+") && cleaned === "") cleaned += ch;
+      else if ((ch === decimal || ch === ".") && !sawDot) {
+        cleaned += ".";
+        sawDot = true;
+      }
+    }
+    if (cleaned === "" || cleaned === "-" || cleaned === "+" || cleaned === ".") return null;
+    const value = Number(cleaned);
+    return Number.isFinite(value) ? value : null;
+  }
+  /** Formats a number with grouping for the display field. */
+  #formatNumber(value, fixedPrecision) {
+    const formatter = new Intl.NumberFormat(this.localeValue, {
+      useGrouping: true,
+      minimumFractionDigits: fixedPrecision ? this.precisionValue : 0,
+      maximumFractionDigits: this.precisionValue
+    });
+    return formatter.format(value);
+  }
+  /** The text announced to assistive tech (currency-aware when configured). */
+  #accessibleText(value) {
+    if (this.currencyValue) {
+      return new Intl.NumberFormat(this.localeValue, {
+        style: "currency",
+        currency: this.currencyValue
+      }).format(value);
+    }
+    return new Intl.NumberFormat(this.localeValue, {
+      minimumFractionDigits: this.precisionValue,
+      maximumFractionDigits: this.precisionValue
+    }).format(value);
+  }
+  /** Resolves the locale's grouping and decimal separator characters. */
+  #separators() {
+    const parts = new Intl.NumberFormat(this.localeValue).formatToParts(11111.1);
+    const group = parts.find((p) => p.type === "group")?.value ?? ",";
+    const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+    return { group, decimal };
+  }
+};
+function countDigits(text) {
+  let count = 0;
+  for (const ch of text) if (ch >= "0" && ch <= "9") count += 1;
+  return count;
+}
+function round(value, precision) {
+  const factor = 10 ** Math.max(0, precision);
+  const rounded = Math.round(value * factor) / factor;
+  return rounded === 0 ? 0 : rounded;
+}
+
+export { CurrencyInputController };
+//# sourceMappingURL=currency_input_controller.js.map
+//# sourceMappingURL=currency_input_controller.js.map

package/dist/controllers/currency_input_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/controllers/currency_input_controller.ts"],"names":[],"mappings":"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","file":"currency_input_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/**\n * Headless currency / amount input behavior: groups digits for display while\n * keeping a machine-readable number in a hidden field, and mirrors the\n * normalized value to a visually-hidden span so assistive tech reads the real\n * amount rather than the grouped display string.\n *\n * Markup contract (identifier: `stimeo--currency-input`):\n *   <div data-controller=\"stimeo--currency-input\"\n *        data-stimeo--currency-input-locale-value=\"en-US\"\n *        data-stimeo--currency-input-currency-value=\"USD\"\n *        data-stimeo--currency-input-precision-value=\"2\">\n *     <input type=\"text\" inputmode=\"decimal\"\n *            aria-describedby=\"amt-sr\"\n *            data-stimeo--currency-input-target=\"display\"\n *            data-action=\"input->stimeo--currency-input#onInput\n *                         blur->stimeo--currency-input#format\" />\n *     <span id=\"amt-sr\" class=\"visually-hidden\"\n *           data-stimeo--currency-input-target=\"srValue\"></span>\n *     <input type=\"hidden\" data-stimeo--currency-input-target=\"field\" />\n *   </div>\n *\n * @remarks\n * Behavior only — no styling, no validation (range/required belong to the\n * consumer or Form Field). The display field is the sole Tab stop and keeps its\n * native text-editing behavior; this controller never steals focus. Grouping is\n * applied on every input while preserving the caret (counted by digits to its\n * left), and the fixed-precision rounding is applied on `blur`.\n *\n * Honest a11y note: a hidden `<input>` is not exposed to assistive tech, so the\n * normalized value is *also* published as text in the `srValue` span referenced\n * by the display's `aria-describedby` — that, not the hidden field, is what a\n * screen reader announces.\n */\nexport class CurrencyInputController extends Controller<HTMLElement> {\n  static override targets = [\"display\", \"field\", \"srValue\"];\n  static override values = {\n    locale: { type: String, default: \"en-US\" },\n    currency: { type: String, default: \"\" },\n    precision: { type: Number, default: 2 },\n  };\n  static actions = [\"format\", \"onInput\"] as const;\n  static events = [\"change\"] as const;\n\n  declare readonly displayTarget: HTMLInputElement;\n  declare readonly fieldTarget: HTMLInputElement;\n  declare readonly srValueTarget: HTMLElement;\n  declare readonly hasDisplayTarget: boolean;\n  declare readonly hasFieldTarget: boolean;\n  declare readonly hasSrValueTarget: boolean;\n  declare localeValue: string;\n  declare currencyValue: string;\n  declare precisionValue: number;\n\n  /** Last committed numeric value, to suppress duplicate `change` dispatches. */\n  #lastValue: number | null = null;\n\n  /** Normalizes any pre-filled display value to its fixed-precision form. */\n  override connect(): void {\n    if (!this.hasDisplayTarget) return;\n    // Seed lastValue with the *rounded* initial value so the idempotent\n    // connect-time reformat does not dispatch a spurious `change`.\n    const parsed = this.#parse(this.displayTarget.value);\n    this.#lastValue = parsed === null ? null : round(parsed, this.precisionValue);\n    if (this.displayTarget.value.trim() !== \"\") {\n      this.#reformat(true);\n    } else {\n      this.#reflect(null, \"\");\n    }\n  }\n\n  /** Re-groups digits as the user types, preserving the caret position. */\n  onInput(): void {\n    this.#reformat(false);\n  }\n\n  /** Applies the fixed-precision rounding on blur. */\n  format(): void {\n    this.#reformat(true);\n  }\n\n  /**\n   * Parses the display value, rewrites it grouped (optionally at fixed\n   * precision), keeps the caret stable by digit count, and syncs the field,\n   * the screen-reader span, and the `change` event.\n   */\n  #reformat(fixedPrecision: boolean): void {\n    if (!this.hasDisplayTarget) return;\n    const raw = this.displayTarget.value;\n    const number = this.#parse(raw);\n\n    if (number === null) {\n      this.displayTarget.value = \"\";\n      this.#reflect(null, \"\");\n      return;\n    }\n\n    const value = fixedPrecision ? round(number, this.precisionValue) : number;\n    const caret = this.displayTarget.selectionStart;\n    const digitsBeforeCaret = typeof caret === \"number\" ? countDigits(raw.slice(0, caret)) : null;\n\n    const formatted = this.#formatNumber(value, fixedPrecision);\n    this.displayTarget.value = formatted;\n    if (digitsBeforeCaret !== null) this.#restoreCaret(formatted, digitsBeforeCaret);\n\n    this.#reflect(value, formatted);\n  }\n\n  /** Restores the caret to sit just after the n-th digit of the new string. */\n  #restoreCaret(formatted: string, digitsBefore: number): void {\n    let seen = 0;\n    let position = formatted.length;\n    for (let i = 0; i < formatted.length; i++) {\n      if (seen >= digitsBefore) {\n        position = i;\n        break;\n      }\n      if (/\\d/.test(formatted[i] as string)) seen += 1;\n    }\n    try {\n      this.displayTarget.setSelectionRange(position, position);\n    } catch {\n      // Some hosts disallow selection on certain input states; the value is\n      // already correct, so a failed caret restore is non-fatal.\n    }\n  }\n\n  /** Writes the normalized value to the field, the SR span, and `change`. */\n  #reflect(value: number | null, formatted: string): void {\n    const isEmpty = value === null;\n    if (this.hasFieldTarget) this.fieldTarget.value = isEmpty ? \"\" : String(value);\n    if (this.hasSrValueTarget) {\n      this.srValueTarget.textContent = isEmpty ? \"\" : this.#accessibleText(value);\n    }\n    this.element.toggleAttribute(\"data-stimeo--currency-input-empty\", isEmpty);\n\n    if (value !== this.#lastValue) {\n      this.#lastValue = value;\n      if (!isEmpty) this.dispatch(\"change\", { detail: { value, formatted } });\n    }\n  }\n\n  /** Parses arbitrary input text into a finite number, or `null` when blank. */\n  #parse(text: string): number | null {\n    if (text.trim() === \"\") return null;\n    const { decimal } = this.#separators();\n    // Keep digits, a leading sign, and decimal marks; normalize the locale's\n    // decimal separator to \".\" and drop everything else (grouping, symbols).\n    let cleaned = \"\";\n    let sawDot = false;\n    for (let i = 0; i < text.length; i++) {\n      const ch = text[i] as string;\n      if (ch >= \"0\" && ch <= \"9\") cleaned += ch;\n      else if ((ch === \"-\" || ch === \"+\") && cleaned === \"\") cleaned += ch;\n      else if ((ch === decimal || ch === \".\") && !sawDot) {\n        cleaned += \".\";\n        sawDot = true;\n      }\n    }\n    if (cleaned === \"\" || cleaned === \"-\" || cleaned === \"+\" || cleaned === \".\") return null;\n    const value = Number(cleaned);\n    return Number.isFinite(value) ? value : null;\n  }\n\n  /** Formats a number with grouping for the display field. */\n  #formatNumber(value: number, fixedPrecision: boolean): string {\n    const formatter = new Intl.NumberFormat(this.localeValue, {\n      useGrouping: true,\n      minimumFractionDigits: fixedPrecision ? this.precisionValue : 0,\n      maximumFractionDigits: this.precisionValue,\n    });\n    return formatter.format(value);\n  }\n\n  /** The text announced to assistive tech (currency-aware when configured). */\n  #accessibleText(value: number): string {\n    if (this.currencyValue) {\n      return new Intl.NumberFormat(this.localeValue, {\n        style: \"currency\",\n        currency: this.currencyValue,\n      }).format(value);\n    }\n    return new Intl.NumberFormat(this.localeValue, {\n      minimumFractionDigits: this.precisionValue,\n      maximumFractionDigits: this.precisionValue,\n    }).format(value);\n  }\n\n  /** Resolves the locale's grouping and decimal separator characters. */\n  #separators(): { group: string; decimal: string } {\n    const parts = new Intl.NumberFormat(this.localeValue).formatToParts(11111.1);\n    const group = parts.find((p) => p.type === \"group\")?.value ?? \",\";\n    const decimal = parts.find((p) => p.type === \"decimal\")?.value ?? \".\";\n    return { group, decimal };\n  }\n}\n\n/** Counts the digit characters in a string. */\nfunction countDigits(text: string): number {\n  let count = 0;\n  for (const ch of text) if (ch >= \"0\" && ch <= \"9\") count += 1;\n  return count;\n}\n\n/** Rounds `value` to `precision` decimal places, avoiding `-0`. */\nfunction round(value: number, precision: number): number {\n  const factor = 10 ** Math.max(0, precision);\n  const rounded = Math.round(value * factor) / factor;\n  return rounded === 0 ? 0 : rounded;\n}\n"]}