stimeo-ui 0.14.0 → 0.16.0

package/dist/controllers/skeleton_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/announce.ts","../../src/utils/detach_gate.ts","../../src/utils/min_duration_floor.ts","../../src/utils/safe_timeout.ts","../../src/controllers/skeleton_controller.ts"],"names":[],"mappings":"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","file":"skeleton_controller.js","sourcesContent":["/**\n * Sends one message to the page's shared `stimeo--announcer`.\n *\n * A component that has to reach assistive tech does not carry a live region of its\n * own: a region only announces what changes *after* assistive tech already knows\n * about it, which a region that appears (or is un-hidden) with its message cannot\n * satisfy. The one region that can is the announcer sitting in the page from the\n * start, so state changes are handed to it as an event and it does the reading.\n *\n * The event goes to `window` because the announcer is usually a sibling high in the\n * document rather than an ancestor of the component dispatching it.\n *\n * Wording comes from the consumer — the library ships no English strings — so an\n * empty message is silently dropped and nothing is announced.\n *\n * @example\n * ```ts\n * announce(this.announceTextValue, { assertive: false });\n * ```\n */\nexport function announce(message: string, options: { assertive?: boolean } = {}): void {\n  const text = message.trim();\n  if (text.length === 0) return;\n  window.dispatchEvent(\n    new CustomEvent(\"stimeo--announcer:announce\", {\n      detail: { message: text, assertive: options.assertive === true },\n    }),\n  );\n}\n\n/**\n * Fills `{name}` placeholders in an announcement template from `values`.\n *\n * The same substitution the value-text templates use, so a consumer writes\n * `\"{percent}% complete\"` in one attribute and gets the same rules everywhere. A\n * placeholder with no matching entry is left as authored rather than blanked, which\n * keeps a typo visible instead of silently swallowing the word.\n */\nexport function fillTemplate(template: string, values: Record<string, string | number>): string {\n  return template.replace(/\\{([a-zA-Z][a-zA-Z0-9]*)\\}/g, (match, name: string) => {\n    const replacement = values[name];\n    return replacement === undefined ? match : String(replacement);\n  });\n}\n","/**\n * Shared \"in-page move vs real detach\" discriminator for `disconnect()`.\n *\n * A mid-session `disconnect()` whose element is still in the document is\n * ambiguous. It can be:\n *\n * - an **in-page move** — a consumer (sortable, a teleport) re-inserted the\n *   element; Stimulus reconnects the SAME instance in the same mutation batch\n *   and the controller's runtime state must survive;\n * - a **detach that keeps the element** — `data-controller` no longer lists the\n *   identifier (a Turbo 8 morph), or the element moved outside the observed\n *   root (a scoped `Application.start(root)`, a shadow root); no reconnect will\n *   ever come and the controller must tear down or it leaks its sessions,\n *   document listeners, and moved nodes.\n *\n * Neither available signal decides this alone. A synchronous `data-controller`\n * token check catches the morph case but misses an observed-root exit (the\n * token stays, the reconnect never comes). Deferring teardown one microtask and\n * letting `connect()` cancel it catches the root exit, but leans on Stimulus\n * reconnecting moved elements within the same mutation batch — internal\n * behavior, not a public contract. {@link DetachGate} composes both: the token\n * check is the synchronous fast path (no probe, no reliance on batching), the\n * microtask probe is the fallback for the genuinely ambiguous remainder.\n *\n * Policy stays with the consumer; this util owns the discrimination only:\n *\n * - **Probe** ({@link disconnected}) when the teardown must eventually happen —\n *   live drag sessions, document listeners, teleported *content*. Call\n *   {@link cancel} from `connect()` (a reconnect means in-page move) and from\n *   the head of any direct teardown path (see below).\n * - **Keep** (bare {@link DetachGate.isDetached}) when undoing the ambiguous\n *   case would fight the controller's own effect: a controller that moves its\n *   OWN element (portal's no-`content` form) exits a scoped observed root as\n *   its normal job — a probe-driven teardown would restore the element into\n *   the root, reconnect, re-teleport, and disconnect again, forever. Such\n *   controllers keep their state on an ambiguous disconnect and tear down only\n *   on {@link DetachGate.isDetached}.\n *\n * Event convention for probe consumers: teardown into a dead (detached) tree is\n * silent — consumers restore from their own `connect()`; a detach that keeps the\n * tree alive must end an in-flight session with a `cancel` event, or composing\n * consumers strand their session bookkeeping.\n */\n\n/** The slice of a Stimulus controller the gate inspects. */\nexport interface DetachGateHost {\n  readonly element: Element;\n  readonly identifier: string;\n}\n\n/**\n * Per-controller-instance gate deciding whether a `disconnect()` is a real\n * detach. Hold one per controller (`#gate = new DetachGate()`) — Stimulus\n * reuses the instance across reconnects, so the pending probe state carries\n * over exactly as the protocol needs.\n *\n * @example\n * ```ts\n * #gate = new DetachGate();\n *\n * connect(): void {\n *   this.#gate.cancel(); // a reconnect: the element moved in-page\n *   // …\n * }\n *\n * disconnect(): void {\n *   this.#gate.disconnected(this, () => this.#teardown());\n * }\n *\n * #teardown(): void {\n *   this.#gate.cancel(); // disarm a still-queued probe (double-run guard)\n *   // …\n * }\n * ```\n */\nexport class DetachGate {\n  /** Set while a probe is queued, waiting for a reconnect to cancel it. */\n  #pending = false;\n\n  /**\n   * True while a probe is queued — the last disconnect was ambiguous and no\n   * reconnect has cancelled it yet. Read it from `connect()` to tell the\n   * reconnect half of an in-page move from a first connect: a controller whose\n   * initialisation restarts a measurement (a min-duration floor, an elapsed\n   * counter) must skip it for the move, where nothing actually restarted.\n   */\n  get pending(): boolean {\n    return this.#pending;\n  }\n\n  /**\n   * True when the disconnect is definitely a real detach — the element left\n   * the document, or `data-controller` no longer lists the identifier. False\n   * means ambiguous (in-page move or observed-root exit), NOT \"alive\".\n   */\n  static isDetached(host: DetachGateHost): boolean {\n    if (!host.element.isConnected) return true;\n    const tokens = (host.element.getAttribute(\"data-controller\") ?? \"\").split(/\\s+/);\n    return !tokens.includes(host.identifier);\n  }\n\n  /**\n   * Call from `disconnect()`: runs `teardown` synchronously on a definite\n   * detach (fast path), otherwise defers it one microtask — a reconnect\n   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.\n   * One microtask is the whole probe window: Stimulus reconnects a moved\n   * element within the same mutation batch, before the checkpoint drains.\n   */\n  disconnected(host: DetachGateHost, teardown: () => void): void {\n    if (DetachGate.isDetached(host)) {\n      // Also disarms a probe a previous ambiguous disconnect left queued\n      // (defer, element removed, disconnect again) — exactly one teardown.\n      this.#pending = false;\n      teardown();\n      return;\n    }\n    this.#pending = true;\n    queueMicrotask(() => {\n      if (!this.#pending) return;\n      this.#pending = false;\n      teardown();\n    });\n  }\n\n  /**\n   * Disarms a pending probe. Call from `connect()` (the reconnect that proves\n   * an in-page move) and from the head of any teardown path not routed through\n   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can\n   * never run the teardown a second time.\n   */\n  cancel(): void {\n    this.#pending = false;\n  }\n}\n","import type { SafeTimeout } from \"./safe_timeout\";\n\n/**\n * Holds a transient state visible for a minimum time before letting it end.\n *\n * A loading indicator that appears and disappears within a few frames reads as a\n * flicker rather than as feedback, so several controllers keep one up for a floor\n * of `minDuration` milliseconds measured from the moment it became visible. The\n * shape is always the same: note the moment, and when the end signal arrives\n * either run it now, because the floor has already passed, or hold it on a timer\n * for whatever is left.\n *\n * The floor **borrows** a {@link SafeTimeout} instead of owning one, so a\n * controller that also schedules other work (a show delay) keeps every timer in a\n * single registry and one `clearAll()` in its teardown still drops them all.\n * Cancelling after such a bulk clear is safe: the registry no-ops on an id it no\n * longer holds.\n *\n * Scope is the floor itself. **When an end signal is allowed to arrive at all\n * stays with the controller**, because the answers differ — one keeps the first\n * queued finish and ignores repeats, another lets the newest replace it — and\n * flattening that into a shared default would silently change what the consumers\n * already promise.\n *\n * @example\n * ```ts\n * readonly #timers = new SafeTimeout();\n * readonly #floor = new MinDurationFloor(this.#timers);\n *\n * #show()  { this.#floor.begin(); … }\n * stop()   { this.#floor.schedule(this.minDurationValue, () => this.#hide()); }\n * ```\n */\nexport class MinDurationFloor {\n  readonly #timers: SafeTimeout;\n\n  /** Pending finish timer id, or `null` when nothing is held back. */\n  #timerId: number | null = null;\n\n  /** Epoch ms the floor is measured from. */\n  #since = 0;\n\n  /** @param timers - the controller's registry; the floor schedules into it. */\n  constructor(timers: SafeTimeout) {\n    this.#timers = timers;\n  }\n\n  /** Starts the floor: call when the state being held becomes visible. */\n  begin(): void {\n    this.#since = Date.now();\n  }\n\n  /** True while a finish is held back waiting for the floor to elapse. */\n  get pending(): boolean {\n    return this.#timerId !== null;\n  }\n\n  /**\n   * Runs `finish` once the floor has elapsed, immediately when it already has.\n   *\n   * A held-back finish is **replaced**, never stacked: only the most recently\n   * queued id is cancellable, so a second timer would outlive every cancel and\n   * end a state that has since restarted. Controllers that want the first signal\n   * to win guard on {@link pending} before calling.\n   */\n  schedule(minDuration: number, finish: () => void): void {\n    this.cancel();\n    const remaining = minDuration - (Date.now() - this.#since);\n    if (remaining > 0) {\n      this.#timerId = this.#timers.set(() => {\n        this.#timerId = null;\n        finish();\n      }, remaining);\n    } else {\n      finish();\n    }\n  }\n\n  /** Drops a held-back finish. Safe when none is queued, or after a bulk clear. */\n  cancel(): void {\n    if (this.#timerId !== null) {\n      this.#timers.clear(this.#timerId);\n      this.#timerId = null;\n    }\n  }\n}\n","/**\n * Self-cleaning timer registries shared by Stimeo controllers.\n *\n * Stimulus controllers frequently schedule `setTimeout` / `setInterval` work\n * (auto-dismiss, debouncing, polling). When the element leaves the DOM — a\n * Turbo Drive navigation, a Turbo Stream replacement, or any `disconnect()` —\n * orphaned timers keep firing against a detached controller, leaking memory and\n * mutating stale state. {@link SafeTimeout} and {@link SafeInterval} track every\n * timer they create so a single {@link TimerRegistry.clearAll | clearAll()} call\n * in `disconnect()` tears them all down.\n *\n * These are intentionally low-level primitives: they own *registration and\n * cleanup only*. Higher-level policy (pause/resume, remaining-time accounting)\n * stays in the individual controllers so per-widget semantics are not flattened\n * into a lowest-common-denominator helper.\n */\n\n/**\n * Largest delay a timer can hold: the platform stores it in a 32-bit signed\n * integer, and anything larger overflows to `1`, so a delay meant to be far in\n * the future fires almost immediately. A declared delay above this bound names\n * no delay at all, and a controller reading one falls back to its default.\n */\nexport const MAX_TIMER_DELAY_MS = 2_147_483_647;\n\n/**\n * Shared registry bookkeeping for the timeout/interval variants.\n *\n * Subclasses provide the scheduling primitive ({@link schedule}) and its matching\n * canceller ({@link cancel}); this base owns the set of live ids plus the\n * per-id and bulk teardown shared by both.\n */\nabstract class TimerRegistry {\n  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */\n  protected readonly ids = new Set<number>();\n\n  /** Schedules the underlying platform timer and returns its id. */\n  protected abstract schedule(callback: () => void, delay: number): number;\n\n  /** Cancels the underlying platform timer for `id`. */\n  protected abstract cancel(id: number): void;\n\n  /**\n   * Cancels a single tracked timer.\n   *\n   * No-ops if the id is unknown (already cleared, fired, or never owned by this\n   * registry), so callers can clear defensively without guarding.\n   */\n  clear(id: number): void {\n    if (this.ids.delete(id)) {\n      this.cancel(id);\n    }\n  }\n\n  /**\n   * Cancels every tracked timer. Call this from a controller's `disconnect()`\n   * to guarantee no timer outlives the element.\n   */\n  clearAll(): void {\n    for (const id of this.ids) {\n      this.cancel(id);\n    }\n    this.ids.clear();\n  }\n\n  /** Number of timers currently tracked (pending). */\n  get size(): number {\n    return this.ids.size;\n  }\n}\n\n/**\n * `setTimeout` wrapper that auto-forgets each timer once it fires and supports\n * bulk teardown on disconnect.\n *\n * @example\n * ```ts\n * #timers = new SafeTimeout();\n *\n * connect() {\n *   this.#timers.set(() => this.dismiss(), 5000);\n * }\n *\n * disconnect() {\n *   this.#timers.clearAll();\n * }\n * ```\n */\nexport class SafeTimeout extends TimerRegistry {\n  /**\n   * Schedules `callback` after `delay` ms and returns the timer id.\n   *\n   * The id is removed from the registry automatically when the timeout fires,\n   * so {@link TimerRegistry.size | size} reflects only still-pending timers.\n   */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(() => {\n      this.ids.delete(id);\n      callback();\n    }, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setTimeout(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearTimeout(id);\n  }\n}\n\n/**\n * `setInterval` wrapper that tracks every interval for bulk teardown on\n * disconnect. Unlike {@link SafeTimeout}, intervals are retained until they are\n * explicitly cleared because they fire repeatedly.\n *\n * @example\n * ```ts\n * #intervals = new SafeInterval();\n *\n * connect() {\n *   this.#intervals.set(() => this.tick(), 1000);\n * }\n *\n * disconnect() {\n *   this.#intervals.clearAll();\n * }\n * ```\n */\nexport class SafeInterval extends TimerRegistry {\n  /** Schedules a repeating `callback` every `delay` ms and returns the timer id. */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(callback, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setInterval(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearInterval(id);\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { announce, fillTemplate } from \"../utils/announce\";\nimport { DetachGate } from \"../utils/detach_gate\";\nimport { MinDurationFloor } from \"../utils/min_duration_floor\";\nimport { SafeTimeout } from \"../utils/safe_timeout\";\n\n/**\n * Headless skeleton/placeholder manager. No dedicated APG pattern; it follows\n * the `aria-busy` + show/hide practice.\n *\n * Markup contract (identifier: `stimeo--skeleton`):\n *   <div data-controller=\"stimeo--skeleton\" aria-busy=\"true\"\n *        data-stimeo--skeleton-min-duration-value=\"300\"\n *        data-action=\"content:ready->stimeo--skeleton#ready\">\n *     <div aria-hidden=\"true\" data-stimeo--skeleton-target=\"placeholder\"></div>\n *     <div hidden data-stimeo--skeleton-target=\"content\"></div>\n *   </div>\n *\n * Starts in the loading state (placeholder shown, real content hidden, region\n * `aria-busy=\"true\"`); `ready` swaps to the content and clears busy. The\n * placeholder is `aria-hidden` (decorative) so assistive tech never reads the\n * skeleton. `minDuration` keeps the placeholder up long enough to avoid a flash\n * when content arrives almost immediately.\n *\n * `ready` dispatches `{}`.\n *\n * @remarks\n * Behavior only — skeleton shapes/animation are the consumer's. The\n * min-duration wait is held by `MinDurationFloor` on a `SafeTimeout`,\n * kept across an in-page move and dropped on a real detach via `DetachGate`.\n */\nexport class SkeletonController extends Controller<HTMLElement> {\n  static override targets = [\"placeholder\", \"content\"];\n  static override values = {\n    announceReadyText: { type: String, default: \"\" },\n    minDuration: { type: Number, default: 0 },\n  };\n  static actions = [\"ready\", \"reset\"] as const;\n  static events = [\"ready\"] as const;\n\n  declare readonly placeholderTarget: HTMLElement;\n  declare readonly contentTarget: HTMLElement;\n  declare readonly hasPlaceholderTarget: boolean;\n  declare readonly hasContentTarget: boolean;\n\n  declare minDurationValue: number;\n  declare announceReadyTextValue: string;\n\n  readonly #timers = new SafeTimeout();\n  readonly #floor = new MinDurationFloor(this.#timers);\n  readonly #gate = new DetachGate();\n\n  override connect(): void {\n    // A probe still queued means this is the reconnect half of an in-page move.\n    // The placeholder never left the screen, so the loading hooks already hold\n    // the values `#enterLoading()` would write and the floor is still measuring\n    // from the moment the skeleton actually appeared — restarting it here would\n    // hold the reveal back for longer than `minDuration` asks.\n    const moved = this.#gate.pending;\n    this.#gate.cancel();\n    if (!moved && this.#state !== \"ready\") {\n      this.#enterLoading();\n    }\n  }\n\n  override disconnect(): void {\n    this.#gate.disconnected(this, () => this.#teardown());\n  }\n\n  /** Swaps to the real content. Honors `minDuration` to prevent a flash. */\n  ready(): void {\n    // The first signal wins: a repeat while the floor still holds the reveal back\n    // must not restart the wait, or a stream of ready events keeps postponing it.\n    if (this.#state === \"ready\" || this.#floor.pending) return;\n    this.#floor.schedule(this.minDurationValue, () => this.#reveal());\n  }\n\n  /** Returns to the loading state (e.g. a Turbo Stream re-fetch). */\n  reset(): void {\n    this.#floor.cancel();\n    this.#enterLoading();\n  }\n\n  /** Shows the placeholder, hides content, and marks the region busy. */\n  #enterLoading(): void {\n    this.#floor.begin();\n    if (this.hasPlaceholderTarget) this.placeholderTarget.hidden = false;\n    if (this.hasContentTarget) this.contentTarget.hidden = true;\n    this.element.setAttribute(\"aria-busy\", \"true\");\n    this.element.setAttribute(\"data-state\", \"loading\");\n  }\n\n  /** Hides the placeholder, shows content, and clears the busy state. */\n  #reveal(): void {\n    if (this.hasPlaceholderTarget) this.placeholderTarget.hidden = true;\n    if (this.hasContentTarget) this.contentTarget.hidden = false;\n    this.element.setAttribute(\"aria-busy\", \"false\");\n    this.element.setAttribute(\"data-state\", \"ready\");\n    this.dispatch(\"ready\", { detail: {} });\n    // loading → ready is the transition; the skeleton itself carries no words.\n    announce(fillTemplate(this.announceReadyTextValue, {}));\n  }\n\n  /**\n   * Drops the held reveal on a real detach. The markup keeps whatever it last\n   * held: an element on its way out of the document has no reader left, and one\n   * whose `data-controller` dropped the identifier no longer resolves its own\n   * targets, so the rollback could only ever be partial.\n   */\n  #teardown(): void {\n    this.#gate.cancel();\n    this.#timers.clearAll();\n    this.#floor.cancel();\n  }\n\n  /** Current lifecycle phase as reflected on `data-state`. */\n  get #state(): string {\n    return this.element.getAttribute(\"data-state\") ?? \"loading\";\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/announce.ts","../../src/utils/detach_gate.ts","../../src/utils/min_duration_floor.ts","../../src/utils/safe_timeout.ts","../../src/controllers/skeleton_controller.ts"],"names":[],"mappings":"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","file":"skeleton_controller.js","sourcesContent":["/**\n * Sends one message to the page's shared `stimeo--announcer`.\n *\n * A component that has to reach assistive tech does not carry a live region of its\n * own: a region only announces what changes *after* assistive tech already knows\n * about it, which a region that appears (or is un-hidden) with its message cannot\n * satisfy. The one region that can is the announcer sitting in the page from the\n * start, so state changes are handed to it as an event and it does the reading.\n *\n * The event goes to `window` because the announcer is usually a sibling high in the\n * document rather than an ancestor of the component dispatching it.\n *\n * Wording comes from the consumer — the library ships no English strings — so an\n * empty message is silently dropped and nothing is announced.\n *\n * @example\n * ```ts\n * announce(this.announceTextValue, { assertive: false });\n * ```\n */\nexport function announce(message: string, options: { assertive?: boolean } = {}): void {\n  const text = message.trim();\n  if (text.length === 0) return;\n  window.dispatchEvent(\n    new CustomEvent(\"stimeo--announcer:announce\", {\n      detail: { message: text, assertive: options.assertive === true },\n    }),\n  );\n}\n\n/**\n * Fills `{name}` placeholders in an announcement template from `values`.\n *\n * The same substitution the value-text templates use, so a consumer writes\n * `\"{percent}% complete\"` in one attribute and gets the same rules everywhere. A\n * placeholder with no matching entry is left as authored rather than blanked, which\n * keeps a typo visible instead of silently swallowing the word.\n */\nexport function fillTemplate(template: string, values: Record<string, string | number>): string {\n  return template.replace(/\\{([a-zA-Z][a-zA-Z0-9]*)\\}/g, (match, name: string) => {\n    const replacement = values[name];\n    return replacement === undefined ? match : String(replacement);\n  });\n}\n","/**\n * Shared \"in-page move vs real detach\" discriminator for `disconnect()`.\n *\n * A mid-session `disconnect()` whose element is still in the document is\n * ambiguous. It can be:\n *\n * - an **in-page move** — a consumer (sortable, a teleport) re-inserted the\n *   element; Stimulus reconnects the SAME instance in the same mutation batch\n *   and the controller's runtime state must survive;\n * - a **detach that keeps the element** — `data-controller` no longer lists the\n *   identifier (a Turbo 8 morph), or the element moved outside the observed\n *   root (a scoped `Application.start(root)`, a shadow root); no reconnect will\n *   ever come and the controller must tear down or it leaks its sessions,\n *   document listeners, and moved nodes.\n *\n * Neither available signal decides this alone. A synchronous `data-controller`\n * token check catches the morph case but misses an observed-root exit (the\n * token stays, the reconnect never comes). Deferring teardown one microtask and\n * letting `connect()` cancel it catches the root exit, but leans on Stimulus\n * reconnecting moved elements within the same mutation batch — internal\n * behavior, not a public contract. {@link DetachGate} composes both: the token\n * check is the synchronous fast path (no probe, no reliance on batching), the\n * microtask probe is the fallback for the genuinely ambiguous remainder.\n *\n * Policy stays with the consumer; this util owns the discrimination only:\n *\n * - **Probe** ({@link disconnected}) when the teardown must eventually happen —\n *   live drag sessions, document listeners, teleported *content*. Call\n *   {@link cancel} from `connect()` (a reconnect means in-page move) and from\n *   the head of any direct teardown path (see below).\n * - **Keep** (bare {@link DetachGate.isDetached}) when undoing the ambiguous\n *   case would fight the controller's own effect: a controller that moves its\n *   OWN element (portal's no-`content` form) exits a scoped observed root as\n *   its normal job — a probe-driven teardown would restore the element into\n *   the root, reconnect, re-teleport, and disconnect again, forever. Such\n *   controllers keep their state on an ambiguous disconnect and tear down only\n *   on {@link DetachGate.isDetached}.\n *\n * Event convention for probe consumers: teardown into a dead (detached) tree is\n * silent — consumers restore from their own `connect()`; a detach that keeps the\n * tree alive must end an in-flight session with a `cancel` event, or composing\n * consumers strand their session bookkeeping.\n */\n\n/** The slice of a Stimulus controller the gate inspects. */\nexport interface DetachGateHost {\n  readonly element: Element;\n  readonly identifier: string;\n}\n\n/**\n * Per-controller-instance gate deciding whether a `disconnect()` is a real\n * detach. Hold one per controller (`#gate = new DetachGate()`) — Stimulus\n * reuses the instance across reconnects, so the pending probe state carries\n * over exactly as the protocol needs.\n *\n * @example\n * ```ts\n * #gate = new DetachGate();\n *\n * connect(): void {\n *   this.#gate.cancel(); // a reconnect: the element moved in-page\n *   // …\n * }\n *\n * disconnect(): void {\n *   this.#gate.disconnected(this, () => this.#teardown());\n * }\n *\n * #teardown(): void {\n *   this.#gate.cancel(); // disarm a still-queued probe (double-run guard)\n *   // …\n * }\n * ```\n */\nexport class DetachGate {\n  /** Set while a probe is queued, waiting for a reconnect to cancel it. */\n  #pending = false;\n\n  /**\n   * True while a probe is queued — the last disconnect was ambiguous and no\n   * reconnect has cancelled it yet. Read it from `connect()` to tell the\n   * reconnect half of an in-page move from a first connect: a controller whose\n   * initialisation restarts a measurement (a min-duration floor, an elapsed\n   * counter) must skip it for the move, where nothing actually restarted.\n   */\n  get pending(): boolean {\n    return this.#pending;\n  }\n\n  /**\n   * True when the disconnect is definitely a real detach — the element left\n   * the document, or `data-controller` no longer lists the identifier. False\n   * means ambiguous (in-page move or observed-root exit), NOT \"alive\".\n   */\n  static isDetached(host: DetachGateHost): boolean {\n    if (!host.element.isConnected) return true;\n    const tokens = (host.element.getAttribute(\"data-controller\") ?? \"\").split(/\\s+/);\n    return !tokens.includes(host.identifier);\n  }\n\n  /**\n   * Call from `disconnect()`: runs `teardown` synchronously on a definite\n   * detach (fast path), otherwise defers it one microtask — a reconnect\n   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.\n   * One microtask is the whole probe window: Stimulus reconnects a moved\n   * element within the same mutation batch, before the checkpoint drains.\n   */\n  disconnected(host: DetachGateHost, teardown: () => void): void {\n    if (DetachGate.isDetached(host)) {\n      // Also disarms a probe a previous ambiguous disconnect left queued\n      // (defer, element removed, disconnect again) — exactly one teardown.\n      this.#pending = false;\n      teardown();\n      return;\n    }\n    this.#pending = true;\n    queueMicrotask(() => {\n      if (!this.#pending) return;\n      this.#pending = false;\n      teardown();\n    });\n  }\n\n  /**\n   * Disarms a pending probe. Call from `connect()` (the reconnect that proves\n   * an in-page move) and from the head of any teardown path not routed through\n   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can\n   * never run the teardown a second time.\n   */\n  cancel(): void {\n    this.#pending = false;\n  }\n}\n","import type { SafeTimeout } from \"./safe_timeout\";\n\n/**\n * Holds a transient state visible for a minimum time before letting it end.\n *\n * A loading indicator that appears and disappears within a few frames reads as a\n * flicker rather than as feedback, so several controllers keep one up for a floor\n * of `minDuration` milliseconds measured from the moment it became visible. The\n * shape is always the same: note the moment, and when the end signal arrives\n * either run it now, because the floor has already passed, or hold it on a timer\n * for whatever is left.\n *\n * The floor **borrows** a {@link SafeTimeout} instead of owning one, so a\n * controller that also schedules other work (a show delay) keeps every timer in a\n * single registry and one `clearAll()` in its teardown still drops them all.\n * Cancelling after such a bulk clear is safe: the registry no-ops on an id it no\n * longer holds.\n *\n * Scope is the floor itself. **When an end signal is allowed to arrive at all\n * stays with the controller**, because the answers differ — one keeps the first\n * queued finish and ignores repeats, another lets the newest replace it — and\n * flattening that into a shared default would silently change what the consumers\n * already promise.\n *\n * @example\n * ```ts\n * readonly #timers = new SafeTimeout();\n * readonly #floor = new MinDurationFloor(this.#timers);\n *\n * #show()  { this.#floor.begin(); … }\n * stop()   { this.#floor.schedule(this.minDurationValue, () => this.#hide()); }\n * ```\n */\nexport class MinDurationFloor {\n  readonly #timers: SafeTimeout;\n\n  /** Pending finish timer id, or `null` when nothing is held back. */\n  #timerId: number | null = null;\n\n  /** Epoch ms the floor is measured from. */\n  #since = 0;\n\n  /** @param timers - the controller's registry; the floor schedules into it. */\n  constructor(timers: SafeTimeout) {\n    this.#timers = timers;\n  }\n\n  /** Starts the floor: call when the state being held becomes visible. */\n  begin(): void {\n    this.#since = Date.now();\n  }\n\n  /** True while a finish is held back waiting for the floor to elapse. */\n  get pending(): boolean {\n    return this.#timerId !== null;\n  }\n\n  /**\n   * Runs `finish` once the floor has elapsed, immediately when it already has.\n   *\n   * A held-back finish is **replaced**, never stacked: only the most recently\n   * queued id is cancellable, so a second timer would outlive every cancel and\n   * end a state that has since restarted. Controllers that want the first signal\n   * to win guard on {@link pending} before calling.\n   */\n  schedule(minDuration: number, finish: () => void): void {\n    this.cancel();\n    const remaining = minDuration - (Date.now() - this.#since);\n    if (remaining > 0) {\n      this.#timerId = this.#timers.set(() => {\n        this.#timerId = null;\n        finish();\n      }, remaining);\n    } else {\n      finish();\n    }\n  }\n\n  /** Drops a held-back finish. Safe when none is queued, or after a bulk clear. */\n  cancel(): void {\n    if (this.#timerId !== null) {\n      this.#timers.clear(this.#timerId);\n      this.#timerId = null;\n    }\n  }\n}\n","/**\n * Self-cleaning timer registries shared by Stimeo controllers.\n *\n * Stimulus controllers frequently schedule `setTimeout` / `setInterval` work\n * (auto-dismiss, debouncing, polling). When the element leaves the DOM — a\n * Turbo Drive navigation, a Turbo Stream replacement, or any `disconnect()` —\n * orphaned timers keep firing against a detached controller, leaking memory and\n * mutating stale state. {@link SafeTimeout} and {@link SafeInterval} track every\n * timer they create so a single {@link TimerRegistry.clearAll | clearAll()} call\n * in `disconnect()` tears them all down.\n *\n * These are intentionally low-level primitives: they own *registration and\n * cleanup only*. Higher-level policy (pause/resume, remaining-time accounting)\n * stays in the individual controllers so per-widget semantics are not flattened\n * into a lowest-common-denominator helper.\n */\n\n/**\n * Largest delay a timer can hold: the platform stores it in a 32-bit signed\n * integer, and anything larger overflows to `1`, so a delay meant to be far in\n * the future fires almost immediately. A declared delay above this bound names\n * no delay at all, and a controller reading one falls back to its default.\n */\nexport const MAX_TIMER_DELAY_MS = 2_147_483_647;\n\n/**\n * Shared registry bookkeeping for the timeout/interval variants.\n *\n * Subclasses provide the scheduling primitive ({@link schedule}) and its matching\n * canceller ({@link cancel}); this base owns the set of live ids plus the\n * per-id and bulk teardown shared by both.\n */\nabstract class TimerRegistry {\n  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */\n  protected readonly ids = new Set<number>();\n\n  /** Schedules the underlying platform timer and returns its id. */\n  protected abstract schedule(callback: () => void, delay: number): number;\n\n  /** Cancels the underlying platform timer for `id`. */\n  protected abstract cancel(id: number): void;\n\n  /**\n   * Cancels a single tracked timer.\n   *\n   * No-ops if the id is unknown (already cleared, fired, or never owned by this\n   * registry), so callers can clear defensively without guarding.\n   */\n  clear(id: number): void {\n    if (this.ids.delete(id)) {\n      this.cancel(id);\n    }\n  }\n\n  /**\n   * Cancels every tracked timer. Call this from a controller's `disconnect()`\n   * to guarantee no timer outlives the element.\n   */\n  clearAll(): void {\n    for (const id of this.ids) {\n      this.cancel(id);\n    }\n    this.ids.clear();\n  }\n\n  /** Number of timers currently tracked (pending). */\n  get size(): number {\n    return this.ids.size;\n  }\n}\n\n/**\n * `setTimeout` wrapper that auto-forgets each timer once it fires and supports\n * bulk teardown on disconnect.\n *\n * @example\n * ```ts\n * #timers = new SafeTimeout();\n *\n * connect() {\n *   this.#timers.set(() => this.dismiss(), 5000);\n * }\n *\n * disconnect() {\n *   this.#timers.clearAll();\n * }\n * ```\n */\nexport class SafeTimeout extends TimerRegistry {\n  /**\n   * Schedules `callback` after `delay` ms and returns the timer id.\n   *\n   * The id is removed from the registry automatically when the timeout fires,\n   * so {@link TimerRegistry.size | size} reflects only still-pending timers.\n   */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(() => {\n      this.ids.delete(id);\n      callback();\n    }, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setTimeout(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearTimeout(id);\n  }\n}\n\n/**\n * `setInterval` wrapper that tracks every interval for bulk teardown on\n * disconnect. Unlike {@link SafeTimeout}, intervals are retained until they are\n * explicitly cleared because they fire repeatedly.\n *\n * @example\n * ```ts\n * #intervals = new SafeInterval();\n *\n * connect() {\n *   this.#intervals.set(() => this.tick(), 1000);\n * }\n *\n * disconnect() {\n *   this.#intervals.clearAll();\n * }\n * ```\n */\nexport class SafeInterval extends TimerRegistry {\n  /** Schedules a repeating `callback` every `delay` ms and returns the timer id. */\n  set(callback: () => void, delay: number): number {\n    const id = this.schedule(callback, delay);\n    this.ids.add(id);\n    return id;\n  }\n\n  protected schedule(callback: () => void, delay: number): number {\n    return window.setInterval(callback, delay);\n  }\n\n  protected cancel(id: number): void {\n    window.clearInterval(id);\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { announce, fillTemplate } from \"../utils/announce\";\nimport { DetachGate } from \"../utils/detach_gate\";\nimport { MinDurationFloor } from \"../utils/min_duration_floor\";\nimport { SafeTimeout } from \"../utils/safe_timeout\";\n\n/**\n * Headless skeleton/placeholder manager. No dedicated APG pattern; it follows\n * the `aria-busy` + show/hide practice.\n *\n * Markup contract (identifier: `stimeo--skeleton`):\n *   <div data-controller=\"stimeo--skeleton\" aria-busy=\"true\"\n *        data-stimeo--skeleton-min-duration-value=\"300\"\n *        data-action=\"content:ready->stimeo--skeleton#ready\">\n *     <div aria-hidden=\"true\" data-stimeo--skeleton-target=\"placeholder\"></div>\n *     <div hidden data-stimeo--skeleton-target=\"content\"></div>\n *   </div>\n *\n * Starts in the loading state (placeholder shown, real content hidden, region\n * `aria-busy=\"true\"`); `ready` swaps to the content and clears busy. The\n * placeholder is `aria-hidden` (decorative) so assistive tech never reads the\n * skeleton. `minDuration` keeps the placeholder up long enough to avoid a flash\n * when content arrives almost immediately.\n *\n * `ready` dispatches `{}`.\n *\n * @remarks\n * Behavior only — skeleton shapes/animation are the consumer's. The\n * min-duration wait is held by `MinDurationFloor` on a `SafeTimeout`,\n * kept across an in-page move and dropped on a real detach via `DetachGate`.\n */\nexport class SkeletonController extends Controller<HTMLElement> {\n  static override targets = [\"placeholder\", \"content\"];\n  static override values = {\n    announceReadyText: { type: String, default: \"\" },\n    minDuration: { type: Number, default: 0 },\n  };\n  static actions = [\"ready\", \"reset\"] as const;\n  static events = [\"ready\"] as const;\n\n  declare readonly placeholderTarget: HTMLElement;\n  declare readonly contentTarget: HTMLElement;\n  declare readonly hasPlaceholderTarget: boolean;\n  declare readonly hasContentTarget: boolean;\n\n  declare minDurationValue: number;\n  declare announceReadyTextValue: string;\n\n  readonly #timers = new SafeTimeout();\n  readonly #floor = new MinDurationFloor(this.#timers);\n  readonly #gate = new DetachGate();\n\n  override connect(): void {\n    // A probe still queued means this is the reconnect half of an in-page move.\n    // The placeholder never left the screen, so the loading hooks already hold\n    // the values `#enterLoading()` would write and the floor is still measuring\n    // from the moment the skeleton actually appeared — restarting it here would\n    // hold the reveal back for longer than `minDuration` asks.\n    const moved = this.#gate.pending;\n    this.#gate.cancel();\n    if (!moved && this.#state !== \"ready\") {\n      this.#enterLoading();\n    }\n  }\n\n  override disconnect(): void {\n    this.#gate.disconnected(this, () => this.#teardown());\n  }\n\n  /** Swaps to the real content. Honors `minDuration` to prevent a flash. */\n  ready(): void {\n    // The first signal wins: a repeat while the floor still holds the reveal back\n    // must not restart the wait, or a stream of ready events keeps postponing it.\n    if (this.#state === \"ready\" || this.#floor.pending) return;\n    this.#floor.schedule(this.minDurationValue, () => this.#reveal());\n  }\n\n  /** Returns to the loading state (e.g. a Turbo Stream re-fetch). */\n  reset(): void {\n    this.#floor.cancel();\n    this.#enterLoading();\n  }\n\n  /** Shows the placeholder, hides content, and marks the region busy. */\n  #enterLoading(): void {\n    this.#floor.begin();\n    if (this.hasPlaceholderTarget) this.placeholderTarget.hidden = false;\n    if (this.hasContentTarget) this.contentTarget.hidden = true;\n    this.element.setAttribute(\"aria-busy\", \"true\");\n    this.element.setAttribute(\"data-state\", \"loading\");\n  }\n\n  /**\n   * Hides the placeholder, shows content, and clears the busy state.\n   *\n   * @stimeoRuntimeOnly `announceReadyText` is the wording of the one announcement this reveal\n   *   makes.\n   */\n  #reveal(): void {\n    if (this.hasPlaceholderTarget) this.placeholderTarget.hidden = true;\n    if (this.hasContentTarget) this.contentTarget.hidden = false;\n    this.element.setAttribute(\"aria-busy\", \"false\");\n    this.element.setAttribute(\"data-state\", \"ready\");\n    this.dispatch(\"ready\", { detail: {} });\n    // loading → ready is the transition; the skeleton itself carries no words.\n    announce(fillTemplate(this.announceReadyTextValue, {}));\n  }\n\n  /**\n   * Drops the held reveal on a real detach. The markup keeps whatever it last\n   * held: an element on its way out of the document has no reader left, and one\n   * whose `data-controller` dropped the identifier no longer resolves its own\n   * targets, so the rollback could only ever be partial.\n   */\n  #teardown(): void {\n    this.#gate.cancel();\n    this.#timers.clearAll();\n    this.#floor.cancel();\n  }\n\n  /** Current lifecycle phase as reflected on `data-state`. */\n  get #state(): string {\n    return this.element.getAttribute(\"data-state\") ?? \"loading\";\n  }\n}\n"]}

package/dist/controllers/slider_controller.d.ts

@@ -9,6 +9,7 @@ import { Controller } from '@hotwired/stimulus';
  *        data-stimeo--slider-max-value="100"
  *        data-stimeo--slider-step-value="1"
  *        data-stimeo--slider-value-value="40">
+ *     <input type="hidden" name="volume" data-stimeo--slider-target="field" />
  *     <div data-stimeo--slider-target="track"
  *          data-action="pointerdown->stimeo--slider#onPointerDown">
  *       <div data-stimeo--slider-target="thumb" role="slider" tabindex="0" aria-label="Volume"
@@ -23,7 +24,37 @@ import { Controller } from '@hotwired/stimulus';
  * property (a number in `[0, 1]`) set on the controller element — the library
  * positions nothing itself.
  *
- * `change` dispatches `{ value: number }`.
+ * `change` dispatches `{ value: number }`; `reconcile` dispatches `{ value: number }`.
+ *
+ * The Values are inputs. A declared `value` outside `[min, max]` or off the step
+ * grid stays in its attribute as the page wrote it; the thumb's ARIA, the
+ * fraction and the field publish the normalized value instead, and only a move
+ * the user makes writes `value`. `change` reports a move the user made that left
+ * the value somewhere other than the value last published. When a Value the page
+ * changes at runtime — a Turbo morph or application code — moves the published
+ * value, `reconcile` reports it once per batch with the same detail, so a
+ * consumer can tell its user's move from the page's. Connecting reports
+ * neither. A move handled before a page write is repainted reads the written
+ * value, so its `change` covers the write as well, and a move that ends on the
+ * value last published reports nothing. An event dispatched from script runs
+ * every listener with no microtask between them, so a write made just before
+ * it, or by a listener that runs ahead of the slider, is handled that way. An
+ * event the browser dispatches runs microtasks between the listeners it calls
+ * separately, so a write made by one called ahead of the slider's — a capture
+ * listener on an ancestor or on `document`, a `:capture` action, or a listener
+ * added to the thumb or the track before the slider's action was bound — is
+ * repainted, and reported as `reconcile`, before the move is measured from it.
+ * Stimulus calls the actions an element declares for one event and one set of
+ * listener options from a single listener, in declaration order, so a write
+ * made by an action declared before the slider's own on the thumb or the track
+ * is handled like a write within an event dispatched from script.
+ *
+ * The optional `field` target mirrors the normalized value so the slider can be
+ * submitted and read server-side. A value the user moved emits a native
+ * bubbling `change` from that field, the way a form control does, so
+ * `stimeo--auto-submit` and form-level validation hear it. The mirror is
+ * refreshed silently on connect, on a replacement field, and whenever a morph
+ * or application code writes a Value.
  *
  * @remarks
  * Behavior only. The consumer owns all layout (e.g. positioning the thumb from
@@ -67,30 +98,37 @@ declare class SliderController extends Controller<HTMLElement> {
         };
     };
     static actions: readonly ["onKeydown", "onPointerDown"];
-    static events: readonly ["change"];
+    static events: readonly ["change", "reconcile"];
     readonly trackTarget: HTMLElement;
     readonly thumbTarget: HTMLElement;
+    readonly fieldTarget: HTMLInputElement;
     readonly hasTrackTarget: boolean;
     readonly hasThumbTarget: boolean;
+    readonly hasFieldTarget: boolean;
     minValue: number;
     maxValue: number;
     stepValue: number;
     valueValue: number;
     logicalTrackValue: boolean;
-    /** Clamps the initial value and renders the starting position. */
+    /**
+     * Renders the normalized value as the starting position without writing it
+     * back, and takes it as the baseline, so connecting reports nothing.
+     */
     connect(): void;
     /** Cancels any active pointer drag so document listeners never leak. */
     disconnect(): void;
-    /** Silently repaints a minimum changed by application code or a Turbo morph. */
+    /** Repaints a minimum changed by application code or a Turbo morph. */
     minValueChanged(): void;
-    /** Silently repaints a maximum changed by application code or a Turbo morph. */
+    /** Repaints a maximum changed by application code or a Turbo morph. */
     maxValueChanged(): void;
-    /** Silently repaints a step changed by application code or a Turbo morph. */
+    /** Repaints a step changed by application code or a Turbo morph. */
     stepValueChanged(): void;
-    /** Silently repaints a value changed by application code or a Turbo morph. */
+    /** Repaints a value changed by application code or a Turbo morph. */
     valueValueChanged(): void;
     /** Hydrates a thumb inserted or replaced at runtime with the current ARIA state. */
     thumbTargetConnected(thumb: HTMLElement): void;
+    /** Fills a form field inserted or replaced at runtime on the next repaint. */
+    fieldTargetConnected(): void;
     /** Drops the stale focus owner while allowing a live track gesture to continue. */
     thumbTargetDisconnected(thumb: HTMLElement): void;
     /** Ends a gesture whose geometry target disappeared or ceased being a target. */

package/dist/controllers/slider_controller.js

@@ -18,6 +18,16 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
+// src/utils/field_mirror.ts
+function writeField(field, value) {
+  if (field.value === value) return false;
+  field.value = value;
+  return true;
+}
+function commitField(target) {
+  target.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -53,54 +63,46 @@ var MicrotaskCoalescer = class {
 
 // src/utils/owned_pointer_session.ts
 var OwnedPointerSession = class {
-  pointerId;
+  #pointerId;
   #owner;
   #handlers;
   #abort = new AbortController();
   #active = true;
   constructor(start, owner, handlers) {
-    this.pointerId = start.pointerId;
+    this.#pointerId = start.pointerId;
     this.#owner = owner;
     this.#handlers = handlers;
     const { signal } = this.#abort;
     owner.ownerDocument.addEventListener("pointermove", this.#onMove, { signal });
     owner.ownerDocument.addEventListener("pointerup", this.#onEndEvent, { signal });
     owner.ownerDocument.addEventListener("pointercancel", this.#onEndEvent, { signal });
-    owner.addEventListener("lostpointercapture", this.#onLostCapture, { signal });
     try {
-      owner.setPointerCapture?.(this.pointerId);
+      owner.setPointerCapture?.(this.#pointerId);
     } catch {
     }
   }
-  /** Whether this session still owns its pointer and listeners. */
-  get active() {
-    return this.#active;
-  }
-  /** Whether `event` belongs to the initiating pointer of the live session. */
-  owns(event) {
-    return this.#active && event.pointerId === this.pointerId;
-  }
-  /** Releases capture/listeners and invokes the end callback exactly once. */
+  /** Releases capture and listeners, then reports the end exactly once. */
   end() {
+    this.#finish("teardown");
+  }
+  #finish(kind) {
     if (!this.#active) return;
     this.#active = false;
     this.#abort.abort();
     try {
-      this.#owner.releasePointerCapture?.(this.pointerId);
+      this.#owner.releasePointerCapture?.(this.#pointerId);
     } catch {
     }
-    this.#handlers.end?.();
+    this.#handlers.end?.(kind);
+  }
+  #owns(event) {
+    return this.#active && event.pointerId === this.#pointerId;
   }
   #onMove = (event) => {
-    if (this.owns(event)) this.#handlers.move(event);
+    if (this.#owns(event)) this.#handlers.move(event);
   };
   #onEndEvent = (event) => {
-    if (this.owns(event)) this.end();
-  };
-  #onLostCapture = (event) => {
-    const pointerId = event.pointerId;
-    if (typeof pointerId === "number" && pointerId !== this.pointerId) return;
-    this.end();
+    if (this.#owns(event)) this.#finish(event.type === "pointerup" ? "up" : "cancel");
   };
 };
 
@@ -229,7 +231,7 @@ function finiteFallback(min, max) {
 // src/controllers/slider_controller.ts
 var FRACTION_PROPERTY = "--stimeo--slider-fraction";
 var SliderController = class extends Controller {
-  static targets = ["track", "thumb"];
+  static targets = ["track", "thumb", "field"];
   static values = {
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
@@ -238,38 +240,47 @@ var SliderController = class extends Controller {
     logicalTrack: { type: Boolean, default: false }
   };
   static actions = ["onKeydown", "onPointerDown"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
   /** One initiating pointer owns each live drag and its stable target snapshot. */
   #drag = null;
-  /** Collapses a morph that swaps several render Values into one silent repaint. */
+  /**
+   * The value last published: taken on connect, then moved by each user commit
+   * and by each repaint that reports a page-driven move.
+   */
+  #settled = 0;
+  /** Collapses a morph that swaps several render Values into one repaint. */
   #repaint = new MicrotaskCoalescer(() => this.#render());
   /** Whether the consumer declared a mirroring track and the direction mirrors it. */
   get #mirrored() {
     return this.logicalTrackValue && isRtl(this.element);
   }
-  /** Clamps the initial value and renders the starting position. */
+  /**
+   * Renders the normalized value as the starting position without writing it
+   * back, and takes it as the baseline, so connecting reports nothing.
+   */
   connect() {
     this.#repaint.activate();
-    this.#commit(this.valueValue, false);
+    this.#settled = this.#currentValue();
+    this.#render();
   }
   /** Cancels any active pointer drag so document listeners never leak. */
   disconnect() {
     this.#repaint.cancel();
     this.#endDrag();
   }
-  /** Silently repaints a minimum changed by application code or a Turbo morph. */
+  /** Repaints a minimum changed by application code or a Turbo morph. */
   minValueChanged() {
     this.#repaint.schedule();
   }
-  /** Silently repaints a maximum changed by application code or a Turbo morph. */
+  /** Repaints a maximum changed by application code or a Turbo morph. */
   maxValueChanged() {
     this.#repaint.schedule();
   }
-  /** Silently repaints a step changed by application code or a Turbo morph. */
+  /** Repaints a step changed by application code or a Turbo morph. */
   stepValueChanged() {
     this.#repaint.schedule();
   }
-  /** Silently repaints a value changed by application code or a Turbo morph. */
+  /** Repaints a value changed by application code or a Turbo morph. */
   valueValueChanged() {
     this.#repaint.schedule();
   }
@@ -284,6 +295,10 @@ var SliderController = class extends Controller {
     }
     this.#repaint.schedule();
   }
+  /** Fills a form field inserted or replaced at runtime on the next repaint. */
+  fieldTargetConnected() {
+    this.#repaint.schedule();
+  }
   /** Drops the stale focus owner while allowing a live track gesture to continue. */
   thumbTargetDisconnected(thumb) {
     if (this.#drag?.thumb === thumb) this.#drag.thumb = null;
@@ -296,22 +311,22 @@ var SliderController = class extends Controller {
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     let next = null;
-    const current = this.#currentValue();
+    const declared = this.valueValue;
     const range = this.#steppedRange;
     switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {
       case "ArrowRight":
       case "ArrowUp":
-        next = stepSteppedValue(current, 1, range);
+        next = stepSteppedValue(declared, 1, range);
         break;
       case "ArrowLeft":
       case "ArrowDown":
-        next = stepSteppedValue(current, -1, range);
+        next = stepSteppedValue(declared, -1, range);
         break;
       case "PageUp":
-        next = stepSteppedValue(current, 10, range);
+        next = stepSteppedValue(declared, 10, range);
         break;
       case "PageDown":
-        next = stepSteppedValue(current, -10, range);
+        next = stepSteppedValue(declared, -10, range);
         break;
       case "Home":
         next = this.minValue;
@@ -323,7 +338,7 @@ var SliderController = class extends Controller {
         return;
     }
     event.preventDefault();
-    this.#commit(next, true);
+    this.#commit(next);
   }
   /** Begins a pointer drag: sets the value and tracks subsequent movement. */
   onPointerDown(event) {
@@ -334,7 +349,7 @@ var SliderController = class extends Controller {
     const value = this.#valueFromClientX(event.clientX, mirrored, track);
     if (value === null) return;
     event.preventDefault();
-    this.#commit(value, true);
+    this.#commit(value);
     thumb.focus();
     const drag = { pointer: null, track, thumb };
     drag.pointer = new OwnedPointerSession(event, track, {
@@ -344,7 +359,7 @@ var SliderController = class extends Controller {
           return;
         }
         const moved = this.#valueFromClientX(move.clientX, mirrored, track);
-        if (moved !== null) this.#commit(moved, true);
+        if (moved !== null) this.#commit(moved);
       },
       end: () => {
         if (this.#drag === drag) this.#drag = null;
@@ -361,24 +376,44 @@ var SliderController = class extends Controller {
     return this.minValue + fraction * (this.maxValue - this.minValue);
   }
   /**
-   * Stores a normalized value and renders synchronously for responsive input.
-   * Morph callbacks use {@link #render} instead, so they never write Values back
-   * or dispatch a user-facing change event.
+   * Stores the normalized value the user moved to, renders it synchronously for
+   * responsive input, and reports it as `change` when it differs from the value
+   * last published. The comparison is with the value last published, not with
+   * the value the move started from, so a page write no repaint has published
+   * yet is reported once, as this change, and a move that ends where the value
+   * was last published reports nothing. The baseline moves before either report
+   * goes out, so the repaint the Value write schedules — and any move a
+   * subscriber makes while the report is dispatched — is measured from this
+   * value.
    */
-  #commit(raw, notify) {
-    const previous = this.#currentValue();
+  #commit(raw) {
     const value = snapSteppedValue(raw, this.#steppedRange);
+    const reported = this.#settled;
+    this.#settled = value;
     if (!Object.is(this.valueValue, value)) this.valueValue = value;
     this.#renderValue(value);
-    if (notify && value !== previous) this.dispatch("change", { detail: { value } });
+    this.#mirrorField(value, true);
+    if (value !== reported) this.dispatch("change", { detail: { value } });
+  }
+  /** Mirrors `value` into the optional form field, reporting only a user's move. */
+  #mirrorField(value, notify) {
+    if (!this.hasFieldTarget) return;
+    if (writeField(this.fieldTarget, String(value)) && notify) commitField(this.fieldTarget);
   }
   /**
-   * Reflects the normalized current Value without mutating or dispatching it.
+   * Reflects the normalized current Value without writing it back. A published
+   * value that moved from the last one is reported once as `reconcile`; the
+   * field follows without a native `change`.
    *
    * @stimeoRenderRoot
    */
   #render() {
-    this.#renderValue(this.#currentValue());
+    const value = this.#currentValue();
+    this.#renderValue(value);
+    this.#mirrorField(value, false);
+    if (value === this.#settled) return;
+    this.#settled = value;
+    this.dispatch("reconcile", { detail: { value } });
   }
   /** Reflects one normalized value on the current target and CSS output. */
   #renderValue(value) {