stimeo-ui 0.16.0 → 0.17.0

data/dist/controllers/input_mask_controller.js

@@ -1,8 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/input_mask_controller.ts
-
-// src/utils/composition_tracker.ts
 var COMPOSITION_INPUT_TYPES = /* @__PURE__ */ new Set([
   "insertCompositionText",
   "insertFromComposition",
@@ -14,13 +11,11 @@ var CompositionTracker = class {
   #activeTargets = /* @__PURE__ */ new Set();
   #onStart;
   #onEnd;
-  /** The field whose confirming `input` is still owed, while the window is open. */
   #confirmedTarget = null;
   constructor(options = {}) {
     this.#onStart = options.onStart;
     this.#onEnd = options.onEnd;
   }
-  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
   observe(target) {
     if (this.#observedTargets.has(target)) return;
     target.addEventListener("compositionstart", this.#handleStart);
@@ -28,7 +23,6 @@ var CompositionTracker = class {
     target.addEventListener("keydown", this.#handleKeydown);
     this.#observedTargets.add(target);
   }
-  /** Stops tracking one target and clears any active composition it owned. */
   unobserve(target) {
     if (!this.#observedTargets.delete(target)) return;
     target.removeEventListener("compositionstart", this.#handleStart);
@@ -37,7 +31,6 @@ var CompositionTracker = class {
     this.#activeTargets.delete(target);
     if (this.#confirmedTarget === target) this.#confirmedTarget = null;
   }
-  /** Releases every listener and clears state so reconnect starts cleanly. */
   disconnect() {
     for (const target of this.#observedTargets) {
       target.removeEventListener("compositionstart", this.#handleStart);
@@ -48,16 +41,9 @@ var CompositionTracker = class {
     this.#activeTargets.clear();
     this.#confirmedTarget = null;
   }
-  /** True when lifecycle tracking or the current event reports composition. */
   isComposing(event) {
     return this.#activeTargets.size > 0 || event?.isComposing === true;
   }
-  /**
-   * Whether `event` is the `input` echoing the composition just confirmed.
-   *
-   * Asking closes the window either way, so one confirmation is folded at most
-   * once and a consumer asks once per `input`.
-   */
   consumesConfirmedInput(event) {
     const confirmed = this.#confirmedTarget;
     this.#confirmedTarget = null;
@@ -75,13 +61,11 @@ var CompositionTracker = class {
     this.#confirmedTarget = event.target;
     this.#onEnd?.(event);
   };
-  /** A key on an observed field opens an edit of its own, so no echo is owed. */
   #handleKeydown = () => {
     this.#confirmedTarget = null;
   };
 };
 
-// src/utils/declared_value.ts
 function parseDeclared(raw, parse, fallback) {
   try {
     return parse(raw);
@@ -105,7 +89,6 @@ function parseJsonObject(raw) {
   return parsed;
 }
 
-// src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
   while (fieldset) {
@@ -116,7 +99,6 @@ function inheritsFieldsetDisabled(control) {
   return false;
 }
 
-// src/utils/half_width.ts
 var FULL_WIDTH_SHIFT = 65248;
 function halfWidthChar(char) {
   if (char >= "\uFF01" && char <= "\uFF5E") {
@@ -125,7 +107,70 @@ function halfWidthChar(char) {
   return char === "\u3000" ? " " : char;
 }
 
-// src/controllers/input_mask_controller.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  constructor(run) {
+    this.#run = run;
+  }
+  activate() {
+    this.#active = true;
+  }
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
 var DEFAULT_TOKENS = {
   "9": "\\d",
   a: "[A-Za-z]",
@@ -208,7 +253,6 @@ function tokenCharOffset(tokenFlags, n) {
   return -1;
 }
 var InputMaskController = class extends Controller {
-  /** The attribute above, in the namespace this controller is registered under. */
   get #unmaskAttribute() {
     return `data-${this.identifier}-${UNMASK_ATTR}`;
   }
@@ -219,19 +263,10 @@ var InputMaskController = class extends Controller {
   };
   static actions = ["format"];
   static events = ["change", "reconcile"];
-  /** The value this controller last committed, and the baseline both events compare. */
   #lastValue = null;
   #started = false;
-  /** Validated token map; the hot path never parses the `tokens` declaration. */
   #tokens = compileTokens("");
-  /** The field's text when the running composition began. */
   #textBeforeComposition = "";
-  /**
-   * Holds mid-composition input so the IME's uncommitted text is never rewritten,
-   * and formats the confirmed text once when the composition ends. A composition
-   * that ends on the text it began with committed nothing, so a re-format then is
-   * the page's: the mask changed while it ran.
-   */
   #composition = new CompositionTracker({
     onStart: () => {
       this.#textBeforeComposition = this.element.value;
@@ -241,7 +276,6 @@ var InputMaskController = class extends Controller {
       this.#reformat(committedNothing ? "reconcile" : "edit");
     }
   });
-  /** Re-parses the declaration and re-formats under the tokens it now selects. */
   tokensValueChanged() {
     this.#tokens = compileTokens(this.tokensValue);
     if (this.#started) this.#reformat("reconcile");
@@ -249,7 +283,6 @@ var InputMaskController = class extends Controller {
   patternValueChanged() {
     if (this.#started) this.#reformat("reconcile");
   }
-  /** Clears a sink it stops maintaining so a submit cannot carry a stale raw value. */
   unmaskToHiddenValueChanged() {
     if (!this.#started) return;
     if (!this.unmaskToHiddenValue) {
@@ -258,27 +291,23 @@ var InputMaskController = class extends Controller {
     }
     this.#reformat("reconcile");
   }
+  #morph = new MorphRenderWatcher(() => this.#reformat("reconcile"));
   connect() {
+    this.#morph.observe(this.element);
     this.#started = true;
     this.#composition.observe(this.element);
     this.#lastValue = this.element.value;
     this.#reformat("reconcile");
   }
   disconnect() {
+    this.#morph.disconnect();
     this.#started = false;
     this.#composition.disconnect();
   }
-  /** Formats the field on input, preserving the caret. Bound via `data-action`. */
   format(event) {
     if (this.#composition.isComposing(event)) return;
     this.#reformat("edit", deletionOf(event));
   }
-  /**
-   * Core reformat: mask the current value, restore the caret, sync the sink and
-   * the state hooks, and report a moved value under the event `cause` selects.
-   *
-   * @stimeoRenderRoot
-   */
   #reformat(cause, deletion = null) {
     if (this.#composition.isComposing()) return;
     const input = this.element;
@@ -309,8 +338,10 @@ var InputMaskController = class extends Controller {
       this.#lastValue = raw;
       return;
     }
-    input.value = result.masked;
-    this.#restoreCaret(result.tokenFlags, anchor);
+    if (input.value !== result.masked) {
+      input.value = result.masked;
+      this.#restoreCaret(result.tokenFlags, anchor);
+    }
     this.#publish(result, result.masked);
     if (result.masked === this.#lastValue) return;
     this.#lastValue = result.masked;
@@ -318,7 +349,6 @@ var InputMaskController = class extends Controller {
     if (cause === "edit") this.dispatch("change", { detail });
     else this.dispatch("reconcile", { detail });
   }
-  /** Syncs the raw-value sink and the state hooks for the `shown` field text. */
   #publish(result, shown) {
     if (this.unmaskToHiddenValue) {
       const sink = this.#resolveSink();
@@ -327,15 +357,9 @@ var InputMaskController = class extends Controller {
     this.#flag("data-mask-complete", result.complete);
     this.#flag("data-mask-empty", shown.length === 0);
   }
-  /**
-   * How many token slots the text before the caret fills. Masking that prefix is
-   * what makes a rejected character — or a literal that also matches a token —
-   * count exactly as the rendering counts it, so the caret cannot drift.
-   */
   #significantBefore(prefix) {
     return applyMask(prefix, this.patternValue, this.#tokens).unmasked.length;
   }
-  /** Places the caret after the `n`-th token char (skipping following literals). */
   #restoreCaret(tokenFlags, n) {
     let position;
     if (n <= 0) {
@@ -357,23 +381,6 @@ var InputMaskController = class extends Controller {
     } catch {
     }
   }
-  /**
-   * The hidden raw-value sink for this input, resolved so several masked inputs
-   * can coexist in one form:
-   *
-   * 1. **Explicit pairing** — a sink whose attribute value names this input's
-   *    `id` (`data-stimeo--input-mask-unmask="zip"`).
-   * 2. **Nearest container** — otherwise, walking up from the input, the first
-   *    *value-less* sink in the closest ancestor. Wrapped input+sink pairs each
-   *    find their own sink, and a single form-level sink is found the same
-   *    way. A sink claimed by another input's id is never matched here.
-   *
-   * Both steps only ever consider the associated form's own controls, so a sink
-   * belonging to a different form (or to none) is never written, while one the
-   * `form` attribute associates from elsewhere in the document still resolves —
-   * for either the input or the sink, neither of which needs to contain or be
-   * contained by the form. A form-less input reads the document instead.
-   */
   #resolveSink() {
     const candidates = this.#sinkCandidates();
     const id = this.element.id;
@@ -389,12 +396,6 @@ var InputMaskController = class extends Controller {
     }
     return null;
   }
-  /**
-   * Every sink the input's form owns, in document order — one collection read per
-   * resolution, so the cost tracks the form's own controls and not the depth of
-   * the markup around it. `form.elements` lists controls the `form` attribute
-   * associates from anywhere in the document, and lists nothing another form owns.
-   */
   #sinkCandidates() {
     const form = this.element.form;
     if (form === null) {
@@ -406,7 +407,6 @@ var InputMaskController = class extends Controller {
       (element) => element instanceof HTMLInputElement && element.hasAttribute(this.#unmaskAttribute)
     );
   }
-  /** Sets a boolean `data-*` flag to `"true"` when `on`, else removes it. */
   #flag(name, on) {
     if (on) this.element.setAttribute(name, "true");
     else this.element.removeAttribute(name);
@@ -414,5 +414,4 @@ var InputMaskController = class extends Controller {
 };
 
 export { InputMaskController, applyMask };
-//# sourceMappingURL=input_mask_controller.js.map
 //# sourceMappingURL=input_mask_controller.js.map

data/dist/controllers/intersection_controller.js

@@ -1,8 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/intersection_controller.ts
-
-// src/utils/declared_value.ts
 function parseDeclared(raw, parse, fallback) {
   try {
     return parse(raw);
@@ -10,8 +7,18 @@ function parseDeclared(raw, parse, fallback) {
     return fallback;
   }
 }
+function validSelector(element, raw, fallback) {
+  if (raw.length === 0) return fallback;
+  return parseDeclared(
+    raw,
+    (selector) => {
+      element.matches(selector);
+      return selector;
+    },
+    fallback
+  );
+}
 
-// src/utils/intersection_watcher.ts
 function isBeforeRootStart(entry) {
   const rect = entry.boundingClientRect;
   if (rect.width === 0 && rect.height === 0) return false;
@@ -30,30 +37,12 @@ var IntersectionWatcher = class {
   constructor(onEntries) {
     this.#onEntries = onEntries;
   }
-  /** Whether an observer is live (started, `IntersectionObserver` supported). */
   get active() {
     return this.#active;
   }
-  /** Whether the live observer discarded configured options after construction failed. */
   get usingPlatformDefaults() {
     return this.#usingPlatformDefaults;
   }
-  /**
-   * (Re)creates the observer and observes `targets`. Returns `false` — leaving
-   * the watcher inert — without `IntersectionObserver` support (very old
-   * browsers; the caller's no-JS fallback stays in charge) or with no targets.
-   * If initial construction with the configured options fails, the watcher
-   * warns and retries once with the same root and platform defaults. A
-   * `rootSelector` that does not parse resolves to the viewport (see
-   * {@link IntersectionWatchOptions.rootSelector}), so a typo never fails the
-   * call.
-   *
-   * @throws The fallback constructor error if both construction attempts fail,
-   *   or whatever the platform throws from `observe()`. The exception is passed
-   *   through unchanged, but the watcher rolls back first: every target observed
-   *   so far is released and `active` stays `false`, so a caller that retries
-   *   starts from a clean slate.
-   */
   start(targets, options = {}) {
     this.stop();
     if (typeof IntersectionObserver === "undefined") return false;
@@ -91,14 +80,6 @@ var IntersectionWatcher = class {
       throw error;
     }
   }
-  /**
-   * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`
-   * only reports *changes*, but `observe()` always reports the present state,
-   * so unobserve→observe turns "still intersecting" into a fresh callback.
-   *
-   * @throws Whatever `unobserve()`/`observe()` throws. The watcher is stopped
-   *   first, so it never stays live with a half-rearmed target.
-   */
   rearm(target) {
     if (!this.#observer) return;
     try {
@@ -109,7 +90,6 @@ var IntersectionWatcher = class {
       throw error;
     }
   }
-  /** Severs the observer; late queued callbacks become no-ops via the guard. */
   stop() {
     this.#active = false;
     this.#observer?.disconnect();
@@ -118,10 +98,82 @@ var IntersectionWatcher = class {
   }
 };
 
-// src/controllers/intersection_controller.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  constructor(run) {
+    this.#run = run;
+  }
+  activate() {
+    this.#active = true;
+  }
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
+var NUMBER_BOUNDS = {
+  finite: { finite: true }};
+function matchesNumberBounds(value, bounds) {
+  if (!Number.isFinite(value)) {
+    const direction = value === Infinity ? "positive" : value === -Infinity ? "negative" : null;
+    if (direction === null) return false;
+    if (bounds.allowInfinity !== "both" && bounds.allowInfinity !== direction) return false;
+  }
+  if (bounds.min !== void 0 && value < bounds.min) return false;
+  if (bounds.max !== void 0 && value > bounds.max) return false;
+  if (bounds.exclusiveMin !== void 0 && value <= bounds.exclusiveMin) return false;
+  if (bounds.integer && !Number.isInteger(value)) return false;
+  if (bounds.allowedValues !== void 0 && !bounds.allowedValues.includes(value)) return false;
+  return true;
+}
+
+function readNumber(raw, fallback, bounds) {
+  return matchesNumberBounds(raw, bounds) ? raw : fallback;
+}
+
+var NumberValueReader = class {
+  #lastRejected = /* @__PURE__ */ new Map();
+  read(owner, name, raw, fallback, bounds) {
+    const resolved = readNumber(raw, fallback, bounds);
+    if (matchesNumberBounds(raw, bounds)) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    const attribute = `data-${owner.identifier}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-value`;
+    const literal = owner.element.getAttribute(attribute);
+    if (literal === null) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    if (this.#lastRejected.get(name) !== literal) {
+      this.#lastRejected.set(name, literal);
+      console.warn(
+        `Stimeo UI: "${owner.identifier}" has an invalid number Value "${name}" declaration ${JSON.stringify(literal)}; using ${fallback}.`
+      );
+    }
+    return resolved;
+  }
+};
+
 var RATIO_PROPERTY = "--stimeo--intersection-ratio";
 var RATIO_EPSILON = 0.01;
-var IntersectionController = class extends Controller {
+var IntersectionController = class _IntersectionController extends Controller {
+  #numbers = new NumberValueReader();
   static values = {
     threshold: { type: Number, default: 0 },
     ratioSteps: { type: Number, default: 0 },
@@ -129,13 +181,18 @@ var IntersectionController = class extends Controller {
     rootSelector: { type: String, default: "" },
     once: { type: Boolean, default: false }
   };
+  static valueConstraints = {
+    threshold: NUMBER_BOUNDS.finite,
+    ratioSteps: { finite: true, min: 0, max: 1e3 }
+  };
   static actions = ["refresh"];
   static events = ["enter", "exit", "change", "passed"];
-  /** Shared IO plumbing (support guard, root resolution, active guard, re-arm). */
   #watcher = new IntersectionWatcher((entries) => this.#onIntersect(entries));
-  /** Threshold actually installed in the live observer (0 after option fallback). */
+  #rebuild = new MicrotaskCoalescer(() => this.#sync());
+  #rootSelector = "";
+  #builtRoot = null;
+  #builtOptions = "";
   #effectiveThreshold = 0;
-  /** Bumped by `refresh()`: an in-flight batch becomes stale and stops. */
   #generation = 0;
   #onIntersect(entries) {
     const generation = this.#generation;
@@ -151,46 +208,49 @@ var IntersectionController = class extends Controller {
     }
   }
   connect() {
-    if (this.onceValue && this.element.getAttribute("data-intersecting") === "true") return;
-    this.#observe();
+    this.#rebuild.activate();
+    this.#sync();
   }
   disconnect() {
+    this.#rebuild.cancel();
     this.#watcher.stop();
   }
-  /**
-   * Re-reads the visibility line and rebuilds the observer. Turbo 8 morphing
-   * rewrites the attribute in place without a reconnect, and the line is what
-   * the intersection callback compares every ratio against, so a value frozen at
-   * connect time would decide `data-intersecting` wrongly for the rest of the
-   * page's life. Nothing to rebuild before the first `connect()`; after a spent
-   * one-shot the watcher is deliberately stopped, and re-observing would deliver
-   * the current state and fire `enter` a second time.
-   */
   thresholdValueChanged() {
-    if (this.#watcher.active) this.#observe();
+    this.#rebuild.schedule();
+  }
+  ratioStepsValueChanged() {
+    this.#rebuild.schedule();
+  }
+  rootMarginValueChanged() {
+    this.#rebuild.schedule();
+  }
+  rootSelectorValueChanged() {
+    this.#rootSelector = validSelector(this.element, this.rootSelectorValue, "");
+    this.#rebuild.schedule();
   }
-  /** (Re)installs the observer from the current Values. */
-  #observe() {
-    this.#effectiveThreshold = this.#clampedThreshold();
+  onceValueChanged() {
+    this.#rebuild.schedule();
+  }
+  #sync() {
+    if (this.onceValue && this.element.getAttribute("data-intersecting") === "true") {
+      this.#watcher.stop();
+      return;
+    }
+    const root = this.#rootSelector ? document.querySelector(this.#rootSelector) : null;
+    const threshold = this.#clampedThreshold();
+    const thresholds = this.#thresholds();
+    const options = `${this.rootMarginValue} ${threshold} ${thresholds.join(",")}`;
+    if (this.#watcher.active && root === this.#builtRoot && options === this.#builtOptions) return;
+    this.#builtRoot = root;
+    this.#builtOptions = options;
+    this.#effectiveThreshold = threshold;
     this.#watcher.start(this.element, {
-      rootSelector: this.rootSelectorValue,
+      root,
       rootMargin: this.rootMarginValue,
-      threshold: this.#thresholds()
+      threshold: thresholds
     });
     if (this.#watcher.usingPlatformDefaults) this.#effectiveThreshold = 0;
   }
-  /**
-   * Re-delivers the current intersection state as a fresh transition. Bound via
-   * `data-action` (e.g. `my-feed:appended@window->stimeo--intersection#refresh`).
-   *
-   * `IntersectionObserver` only reports state *changes*, so a sentinel that
-   * stays visible while content is appended below it never fires `enter` again
-   * and a hand-rolled infinite scroll stalls. `observe()` always delivers the
-   * current state, and clearing the recorded `data-intersecting`/`data-passed`
-   * makes that delivery count as a transition — a still-visible sentinel
-   * re-fires `enter`. No-op once the observer is gone (`once` fired, no
-   * `IntersectionObserver` support, or after `disconnect()`).
-   */
   refresh() {
     if (!this.#watcher.active) return;
     this.#generation += 1;
@@ -198,16 +258,6 @@ var IntersectionController = class extends Controller {
     this.element.removeAttribute("data-passed");
     this.#watcher.rearm(this.element);
   }
-  /**
-   * Reflects the visibility onto `data-intersecting` and fires `enter`/`exit`
-   * on transitions. The previous state is the DOM attribute (source of truth),
-   * so the observer's initial callback fires `enter` for an element that starts
-   * visible but stays silent after a cache restore that already recorded it.
-   * An initial not-visible state is established silently (no `exit`).
-   *
-   * @stimeoRuntimeOnly `once` decides whether this enter spends the watcher's one shot; the hook it
-   *   writes follows the entry.
-   */
   #syncIntersecting(intersecting, ratio, entry) {
     const previous = this.element.getAttribute("data-intersecting");
     this.element.setAttribute("data-intersecting", intersecting ? "true" : "false");
@@ -220,57 +270,48 @@ var IntersectionController = class extends Controller {
       });
     }
   }
-  /**
-   * Which edge the element left across, for the `exit` detail. A non-zero
-   * `threshold` withdraws visibility while the element still overlaps the root,
-   * so the leaving rect can straddle the start edge — the direction is the
-   * element's own top against that edge, not whether it has cleared the root
-   * entirely (that is what `passed` reports). An element with no layout box
-   * (`display: none`, a collapsed `<details>`) is reported with an empty rect
-   * that carries no position at all, so it is deliberately neither direction
-   * and takes the "still ahead" reading.
-   */
   #leftViaStartEdge(entry) {
     const rect = entry.boundingClientRect;
     if (rect.width === 0 && rect.height === 0) return false;
     return rect.top < (entry.rootBounds?.top ?? 0);
   }
-  /**
-   * Reflects the "scrolled past" state onto `data-passed` and fires `passed` on
-   * transitions — the line sticky headers and reading progress key off. Like
-   * `enter`, an initial `passed=true` (page restored mid-scroll) fires; the
-   * initial `false` is established silently.
-   */
   #syncPassed(passed) {
     const previous = this.element.getAttribute("data-passed");
     this.element.setAttribute("data-passed", passed ? "true" : "false");
     const changed = previous === null ? passed : previous === "true" !== passed;
     if (changed) this.dispatch("passed", { detail: { passed } });
   }
-  /** The configured `threshold`, clamped to the 0..1 the observer accepts. */
   #clampedThreshold() {
-    return Math.min(1, Math.max(0, this.thresholdValue));
+    return Math.min(1, Math.max(0, this.#safeThreshold));
   }
-  /**
-   * Observer thresholds: the `threshold` line itself, plus `ratioSteps` evenly
-   * spaced steps when fine-grained `change` ratios are wanted (progress bars).
-   *
-   * 0 is always observed. An observer notifies only at the lines it was given,
-   * so a non-zero `threshold` on its own delivers its last callback while the
-   * element is still partly visible: the element leaving for good would never be
-   * reported, freezing the ratio and `data-passed` mid-departure.
-   */
   #thresholds() {
     const thresholds = /* @__PURE__ */ new Set([0, this.#clampedThreshold()]);
-    if (this.ratioStepsValue > 0) {
-      for (let i = 0; i <= this.ratioStepsValue; i += 1) {
-        thresholds.add(i / this.ratioStepsValue);
+    if (this.#safeRatioSteps > 0) {
+      for (let i = 0; i <= this.#safeRatioSteps; i += 1) {
+        thresholds.add(i / this.#safeRatioSteps);
       }
     }
     return [...thresholds].sort((a, b) => a - b);
   }
+  get #safeThreshold() {
+    return this.#numbers.read(
+      this,
+      "threshold",
+      this.thresholdValue,
+      _IntersectionController.values.threshold.default,
+      _IntersectionController.valueConstraints.threshold
+    );
+  }
+  get #safeRatioSteps() {
+    return this.#numbers.read(
+      this,
+      "ratioSteps",
+      this.ratioStepsValue,
+      _IntersectionController.values.ratioSteps.default,
+      _IntersectionController.valueConstraints.ratioSteps
+    );
+  }
 };
 
 export { IntersectionController };
-//# sourceMappingURL=intersection_controller.js.map
 //# sourceMappingURL=intersection_controller.js.map