stimeo-ui 0.2.0 → 0.2.1

data/dist/controllers/navigation_menu_controller.js

@@ -0,0 +1,384 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/navigation_menu_controller.ts
+
+// src/utils/escape_layer.ts
+function claimsWhileFocusWithin(element) {
+  return () => {
+    const active = element.ownerDocument.activeElement;
+    return active === null || active === element.ownerDocument.body || element.contains(active);
+  };
+}
+var EscapeLayer = class _EscapeLayer {
+  static #registries = /* @__PURE__ */ new WeakMap();
+  #ownerDocument = null;
+  /** Dismissal callback while active; `null` when inactive. */
+  #onDismiss = null;
+  /** Live predicate deciding whether the layer claims a press; `null` = always. */
+  #claims = null;
+  /**
+   * Activates this layer at the top of its document's Escape stack, installing
+   * the document's shared resolver listener if this is its first layer.
+   * Re-activating an already-active layer moves it to the top.
+   */
+  activate(ownerDocument = document, options) {
+    this.deactivate();
+    let registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) {
+      registry = _EscapeLayer.#createRegistry();
+      _EscapeLayer.#registries.set(ownerDocument, registry);
+      ownerDocument.addEventListener("keydown", registry.onKeydown);
+    }
+    registry.stack.push(this);
+    this.#ownerDocument = ownerDocument;
+    this.#onDismiss = options.onDismiss;
+    this.#claims = options.claims ?? null;
+  }
+  /**
+   * Removes this layer from its document's Escape stack, uninstalling the
+   * shared listener when the stack empties. Safe to call when inactive.
+   */
+  deactivate() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (registry) {
+      const index = registry.stack.lastIndexOf(this);
+      if (index >= 0) registry.stack.splice(index, 1);
+      if (registry.stack.length === 0) {
+        ownerDocument.removeEventListener("keydown", registry.onKeydown);
+        _EscapeLayer.#registries.delete(ownerDocument);
+      }
+    }
+    this.#ownerDocument = null;
+    this.#onDismiss = null;
+    this.#claims = null;
+  }
+  /**
+   * Whether this active layer would own a press right now: it is the topmost
+   * layer whose {@link EscapeLayerOptions.claims} passes. Exposed for tests
+   * and diagnostics — production dismissal goes through the shared listener.
+   */
+  get ownsEscape() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return false;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) return false;
+    return _EscapeLayer.#resolveOwner(registry.stack) === this;
+  }
+  /** Builds a document's registry with its shared resolver listener. */
+  static #createRegistry() {
+    const registry = {
+      stack: [],
+      onKeydown: (event) => {
+        if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+        const owner = _EscapeLayer.#resolveOwner(registry.stack);
+        if (!owner) return;
+        event.preventDefault();
+        owner.#onDismiss?.();
+      }
+    };
+    return registry;
+  }
+  /** The topmost stack layer whose claims predicate passes, or `null`. */
+  static #resolveOwner(stack) {
+    for (let index = stack.length - 1; index >= 0; index--) {
+      const layer = stack[index];
+      if (!layer) continue;
+      if (layer.#claims && !layer.#claims()) continue;
+      return layer;
+    }
+    return null;
+  }
+};
+
+// src/utils/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+// src/controllers/navigation_menu_controller.ts
+var NavigationMenuController = class extends Controller {
+  static targets = ["trigger", "panel", "hoverArea"];
+  static values = {
+    openOnHover: { type: Boolean, default: false },
+    hoverDelay: { type: Number, default: 150 }
+  };
+  static actions = ["onTriggerKeydown", "toggle"];
+  /** Open/close delay timers for hover mode; cleared together on disconnect. */
+  #hoverTimers = new SafeTimeout();
+  /**
+   * Elements currently carrying hover listeners. Removal always mirrors this
+   * set (not a recomputed target snapshot), so add/remove stays symmetric even
+   * when targets churn between connect and disconnect.
+   */
+  #hoverWired = /* @__PURE__ */ new Set();
+  /** Escape-stack membership while any panel is open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
+  /** Establishes the closed baseline and the dismissal listeners. */
+  connect() {
+    this.#closeAll();
+    document.addEventListener("click", this.#onOutsideClick);
+    this.element.addEventListener("focusout", this.#onFocusOut);
+    if (this.openOnHoverValue) this.#addHoverListeners();
+  }
+  /** Removes every listener, pending hover timer, and stack membership registered while connected. */
+  disconnect() {
+    this.#escapeLayer.deactivate();
+    document.removeEventListener("click", this.#onOutsideClick);
+    this.element.removeEventListener("focusout", this.#onFocusOut);
+    this.#removeHoverListeners();
+    this.#hoverTimers.clearAll();
+  }
+  /** Re-wires hover listeners when a target is added after connect (Turbo Streams etc.). */
+  triggerTargetConnected() {
+    this.#rewireHoverListeners();
+  }
+  /** Re-wires hover listeners when a target is removed while connected. */
+  triggerTargetDisconnected() {
+    this.#rewireHoverListeners();
+  }
+  /** See {@link NavigationMenuController.triggerTargetConnected}. */
+  panelTargetConnected() {
+    this.#rewireHoverListeners();
+  }
+  /** See {@link NavigationMenuController.triggerTargetDisconnected}. */
+  panelTargetDisconnected() {
+    this.#rewireHoverListeners();
+  }
+  /** See {@link NavigationMenuController.triggerTargetConnected}. */
+  hoverAreaTargetConnected() {
+    this.#rewireHoverListeners();
+  }
+  /** See {@link NavigationMenuController.triggerTargetDisconnected}. */
+  hoverAreaTargetDisconnected() {
+    this.#rewireHoverListeners();
+  }
+  /** Toggles a trigger's panel (single-open). Bound via `data-action` (click). */
+  toggle(event) {
+    const trigger = event.currentTarget;
+    if (this.#isExpanded(trigger)) {
+      this.#closePanel(trigger);
+    } else {
+      this.#openPanel(trigger);
+    }
+  }
+  /** `ArrowLeft`/`ArrowRight` move focus between triggers (keeping Tab order). */
+  onTriggerKeydown(event) {
+    const triggers = this.triggerTargets;
+    const index = triggers.indexOf(event.currentTarget);
+    if (index === -1) return;
+    const length = triggers.length;
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      triggers[(index + 1) % length]?.focus();
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      triggers[(index - 1 + length) % length]?.focus();
+    }
+  }
+  /** Opens `trigger`'s panel, closing any other open panel first. */
+  #openPanel(trigger) {
+    this.#closeAll();
+    const panel = this.#panelFor(trigger);
+    if (!panel) return;
+    panel.hidden = false;
+    trigger.setAttribute("aria-expanded", "true");
+    this.#syncEscapeLayer();
+  }
+  /** Closes `trigger`'s panel and reflects the collapsed state. */
+  #closePanel(trigger) {
+    const panel = this.#panelFor(trigger);
+    if (panel) panel.hidden = true;
+    trigger.setAttribute("aria-expanded", "false");
+    this.#syncEscapeLayer();
+  }
+  /** Closes every open panel. */
+  #closeAll() {
+    for (const trigger of this.triggerTargets) this.#closePanel(trigger);
+  }
+  /**
+   * Aligns Escape-stack membership with the open state: joins (or re-asserts to
+   * the top) while a panel is open, leaves once none is. Re-asserting when the
+   * user switches panels is deliberate — the nav is again the newest layer.
+   */
+  #syncEscapeLayer() {
+    if (this.#isAnyOpen) {
+      this.#escapeLayer.activate(document, {
+        onDismiss: () => this.#closeAndRestore(),
+        claims: claimsWhileFocusWithin(this.element)
+      });
+    } else {
+      this.#escapeLayer.deactivate();
+    }
+  }
+  /** Closes any open panel and returns focus to its trigger (Escape path). */
+  #closeAndRestore() {
+    const open = this.#openTrigger;
+    if (!open) return;
+    this.#closePanel(open);
+    open.focus();
+  }
+  /** Closes panels when a click lands outside the nav element. */
+  #onOutsideClick = (event) => {
+    if (this.#isAnyOpen && !this.element.contains(event.target)) this.#closeAll();
+  };
+  /**
+   * Closes (without restoring focus) when focus leaves the nav for a known
+   * external destination. A null/non-Node destination is indeterminate:
+   * browsers use it for clicks on non-focusable content and for window
+   * deactivation, so those never close the nav here (matching the popover
+   * convention) — the outside-click handler decides pointer dismissal, and the
+   * Escape stack's body-focus claim keeps keyboard dismissal working.
+   */
+  #onFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (!(next instanceof Node) || this.element.contains(next)) return;
+    this.#closeAll();
+  };
+  /** Opens a trigger's panel after the hover delay (hover mode). */
+  #onPointerEnter = (event) => {
+    const trigger = this.#triggerForHover(event.currentTarget);
+    if (!trigger) return;
+    this.#hoverTimers.clearAll();
+    this.#hoverTimers.set(() => this.#openPanel(trigger), this.hoverDelayValue);
+  };
+  /**
+   * Closes the open panel after the hover delay (hover mode) — unless the
+   * pointer moved directly into another part of the hover region (an adjacent
+   * trigger, panel, or hoverArea): crossing a shared edge must not schedule a
+   * spurious close, e.g. a hoverArea whose panel sits outside it as a sibling.
+   */
+  #onPointerLeave = (event) => {
+    const next = event instanceof MouseEvent ? event.relatedTarget : null;
+    if (next instanceof Node && this.#hoverElements.some((el) => el.contains(next))) return;
+    this.#hoverTimers.clearAll();
+    this.#hoverTimers.set(() => this.#closeAll(), this.hoverDelayValue);
+  };
+  /** Wires hover open/close on each hover element (opt-in), tracking what was wired. */
+  #addHoverListeners() {
+    for (const element of this.#hoverElements) {
+      element.addEventListener("mouseenter", this.#onPointerEnter);
+      element.addEventListener("mouseleave", this.#onPointerLeave);
+      this.#hoverWired.add(element);
+    }
+  }
+  /** Removes the hover listeners from exactly the elements that were wired. */
+  #removeHoverListeners() {
+    for (const element of this.#hoverWired) {
+      element.removeEventListener("mouseenter", this.#onPointerEnter);
+      element.removeEventListener("mouseleave", this.#onPointerLeave);
+    }
+    this.#hoverWired.clear();
+  }
+  /**
+   * Rebuilds the hover wiring from the current targets. Target callbacks call
+   * this so items added or removed after connect (e.g. a Turbo Stream append)
+   * participate in hover; the wired-set removal keeps the rebuild symmetric.
+   */
+  #rewireHoverListeners() {
+    if (!this.openOnHoverValue) return;
+    this.#removeHoverListeners();
+    this.#addHoverListeners();
+  }
+  /**
+   * Elements that participate in hover: each `hoverArea`, plus every trigger and
+   * panel **not** wrapped by one. A wrapped trigger/panel must defer to its
+   * wrapper — its own mouseleave would otherwise schedule a close while the
+   * pointer is still inside the area (mouseenter does not re-fire on the wrapper
+   * when moving among its descendants), flickering the panel shut.
+   */
+  get #hoverElements() {
+    const areas = this.hoverAreaTargets;
+    const covered = (element) => areas.some((area) => area.contains(element));
+    return [
+      ...areas,
+      ...this.triggerTargets.filter((trigger) => !covered(trigger)),
+      ...this.panelTargets.filter((panel) => !covered(panel))
+    ];
+  }
+  /**
+   * Resolves the trigger for a hovered element: the trigger itself, the trigger
+   * controlling a hovered panel, or the first trigger contained in a hovered
+   * `hoverArea` wrapper.
+   */
+  #triggerForHover(element) {
+    if (this.triggerTargets.includes(element)) return element;
+    if (this.panelTargets.includes(element)) {
+      return this.triggerTargets.find((trigger) => this.#panelFor(trigger) === element) ?? null;
+    }
+    if (this.hoverAreaTargets.includes(element)) {
+      return this.triggerTargets.find((trigger) => element.contains(trigger)) ?? null;
+    }
+    return null;
+  }
+  /** The panel controlled by `trigger` (matched by `aria-controls`/`id`). */
+  #panelFor(trigger) {
+    const id = trigger.getAttribute("aria-controls");
+    return id ? this.panelTargets.find((panel) => panel.id === id) ?? null : null;
+  }
+  /** Whether `trigger`'s panel is currently expanded. */
+  #isExpanded(trigger) {
+    return trigger.getAttribute("aria-expanded") === "true";
+  }
+  /** The trigger whose panel is currently open, if any. */
+  get #openTrigger() {
+    return this.triggerTargets.find((trigger) => this.#isExpanded(trigger)) ?? null;
+  }
+  /** Whether any panel is currently open. */
+  get #isAnyOpen() {
+    return this.#openTrigger !== null;
+  }
+};
+
+export { NavigationMenuController };
+//# sourceMappingURL=navigation_menu_controller.js.map
+//# sourceMappingURL=navigation_menu_controller.js.map

data/dist/controllers/overflow_indicator_controller.js

@@ -58,7 +58,30 @@ var LayoutObserver = class {
   }
 };
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+function logicalScrollMetrics(element, horizontal) {
+  const max = Math.max(
+    0,
+    horizontal ? element.scrollWidth - element.clientWidth : element.scrollHeight - element.clientHeight
+  );
+  const raw = horizontal ? element.scrollLeft : element.scrollTop;
+  const position = horizontal && isRtl(element) ? -raw : raw;
+  return { position: Math.min(max, Math.max(0, position)), max };
+}
+function physicalScrollDelta(element, horizontal, logicalDelta) {
+  return horizontal && isRtl(element) ? -logicalDelta : logicalDelta;
+}
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/overflow_indicator_controller.ts
+var DIRECTION_BUTTON_SELECTOR = "[data-stimeo--overflow-indicator-direction-param]";
 var OverflowIndicatorController = class extends Controller {
   static targets = ["viewport"];
   static values = {
@@ -67,38 +90,50 @@ var OverflowIndicatorController = class extends Controller {
   };
   static actions = ["scrollByPage", "update"];
   static events = ["change"];
-  #layout = new LayoutObserver(() => this.update());
+  #layout = new LayoutObserver(() => {
+    if (this.#connected) this.update();
+  });
+  #connected = false;
+  #observedViewport = null;
+  #observedContent = /* @__PURE__ */ new Set();
   #mutationObserver = null;
+  #pendingButtonDisables = /* @__PURE__ */ new Map();
   /** Last reported room, so `change` fires only on transitions. */
   #state = null;
   connect() {
-    if (!this.hasViewportTarget) return;
-    this.#layout.observe(this.viewportTarget);
-    this.#layout.observeViewport();
-    if (typeof MutationObserver !== "undefined") {
-      this.#mutationObserver = new MutationObserver(() => this.update());
-      this.#mutationObserver.observe(this.viewportTarget, {
-        childList: true,
-        subtree: true,
-        characterData: true
-      });
-    }
-    this.update();
+    this.#connected = true;
+    this.#syncViewport();
   }
   disconnect() {
+    this.#connected = false;
+    this.#stopObservingViewport();
     this.#layout.disconnect();
-    this.#mutationObserver?.disconnect();
-    this.#mutationObserver = null;
+    this.#clearPendingButtonDisables();
     this.#state = null;
   }
-  /** Re-measures remaining scroll room and reflects the state hooks. Public so it can be wired to the viewport's `scroll`. */
+  viewportTargetConnected() {
+    this.#syncViewport();
+  }
+  viewportTargetDisconnected(viewport) {
+    if (this.#observedViewport === viewport) this.#stopObservingViewport();
+    this.#syncViewport();
+  }
+  orientationValueChanged() {
+    if (this.#connected) this.update();
+  }
+  thresholdValueChanged() {
+    if (this.#connected) this.update();
+  }
+  /**
+   * Re-measures remaining scroll room and reflects the state hooks.
+   * Public so it can be wired to the viewport's `scroll`.
+   */
   update() {
     if (!this.hasViewportTarget) return;
     const vp = this.viewportTarget;
     const horizontal = this.orientationValue !== "vertical";
-    const t = this.thresholdValue;
-    const scrollPos = horizontal ? vp.scrollLeft : vp.scrollTop;
-    const maxScroll = horizontal ? vp.scrollWidth - vp.clientWidth : vp.scrollHeight - vp.clientHeight;
+    const t = this.#threshold;
+    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontal);
     const start = scrollPos > t;
     const end = scrollPos < maxScroll - t;
     vp.setAttribute("data-overflow-start", start ? "true" : "false");
@@ -114,11 +149,13 @@ var OverflowIndicatorController = class extends Controller {
     if (!this.hasViewportTarget) return;
     const direction = this.#directionFromEvent(event);
     if (!direction) return;
+    if (this.#state && !this.#state[direction]) return;
     const vp = this.viewportTarget;
     const horizontal = this.orientationValue !== "vertical";
     const page = horizontal ? vp.clientWidth : vp.clientHeight;
-    const delta = direction === "start" ? -page : page;
-    const behavior = this.#prefersReducedMotion() ? "auto" : "smooth";
+    const logicalDelta = direction === "start" ? -page : page;
+    const delta = physicalScrollDelta(vp, horizontal, logicalDelta);
+    const behavior = prefersReducedMotion() ? "auto" : "smooth";
     if (horizontal) {
       vp.scrollBy({ left: delta, behavior });
     } else {
@@ -127,10 +164,16 @@ var OverflowIndicatorController = class extends Controller {
   }
   /** Mirrors remaining room onto any direction buttons by toggling `disabled`. */
   #syncButtons(start, end) {
-    const buttons = this.element.querySelectorAll(
-      "[data-stimeo--overflow-indicator-direction-param]"
-    );
+    for (const button of [...this.#pendingButtonDisables.keys()]) {
+      if (!button.isConnected || button.closest("[data-controller~='stimeo--overflow-indicator']") !== this.element) {
+        this.#cancelPendingButtonDisable(button);
+      }
+    }
+    const buttons = this.element.querySelectorAll(DIRECTION_BUTTON_SELECTOR);
     for (const button of buttons) {
+      if (button.closest("[data-controller~='stimeo--overflow-indicator']") !== this.element) {
+        continue;
+      }
       const direction = button.getAttribute("data-stimeo--overflow-indicator-direction-param");
       if (direction === "start") this.#toggleButton(button, start);
       else if (direction === "end") this.#toggleButton(button, end);
@@ -143,7 +186,11 @@ var OverflowIndicatorController = class extends Controller {
    * whole control disabled) is therefore never blindly re-enabled.
    */
   #toggleButton(button, hasRoom) {
+    if (!this.#pendingButtonDisables.has(button) && button.hasAttribute("data-overflow-indicator-pending-disabled")) {
+      this.#cancelPendingButtonDisable(button);
+    }
     if (hasRoom) {
+      this.#cancelPendingButtonDisable(button);
       if (button.hasAttribute("data-overflow-indicator-disabled")) {
         button.disabled = false;
         button.removeAttribute("data-overflow-indicator-disabled");
@@ -151,17 +198,121 @@ var OverflowIndicatorController = class extends Controller {
       return;
     }
     if (button.disabled) return;
+    if (document.activeElement === button) {
+      this.#deferButtonDisable(button);
+    } else {
+      this.#disableButton(button);
+    }
+  }
+  /**
+   * Keeps a boundary button focusable until native blur, exposing its temporary
+   * inoperability with `aria-disabled` and making its action a no-op meanwhile.
+   */
+  #deferButtonDisable(button) {
+    if (this.#pendingButtonDisables.has(button)) return;
+    button.setAttribute("data-overflow-indicator-pending-disabled", "");
+    button.setAttribute(
+      "data-overflow-indicator-aria-disabled",
+      button.getAttribute("aria-disabled") ?? ""
+    );
+    button.setAttribute("aria-disabled", "true");
+    const onBlur = () => {
+      this.#cancelPendingButtonDisable(button);
+      if (!button.disabled) this.#disableButton(button);
+    };
+    this.#pendingButtonDisables.set(button, { onBlur });
+    button.addEventListener("blur", onBlur);
+  }
+  #disableButton(button) {
     button.disabled = true;
     button.setAttribute("data-overflow-indicator-disabled", "");
   }
+  #cancelPendingButtonDisable(button) {
+    const pending = this.#pendingButtonDisables.get(button);
+    if (pending) button.removeEventListener("blur", pending.onBlur);
+    this.#pendingButtonDisables.delete(button);
+    button.removeAttribute("data-overflow-indicator-pending-disabled");
+    const displaced = button.getAttribute("data-overflow-indicator-aria-disabled");
+    if (displaced !== null) {
+      button.removeAttribute("data-overflow-indicator-aria-disabled");
+      if (button.getAttribute("aria-disabled") === "true") {
+        if (displaced === "") button.removeAttribute("aria-disabled");
+        else button.setAttribute("aria-disabled", displaced);
+      }
+    }
+  }
+  #clearPendingButtonDisables() {
+    for (const button of [...this.#pendingButtonDisables.keys()]) {
+      this.#cancelPendingButtonDisable(button);
+    }
+  }
+  /** Moves resize/mutation/load observation to the current viewport target. */
+  #syncViewport() {
+    if (!this.#connected) return;
+    const next = this.hasViewportTarget ? this.viewportTarget : null;
+    if (next === this.#observedViewport) return;
+    this.#stopObservingViewport();
+    if (!next) return;
+    this.#observedViewport = next;
+    this.#layout.observe(next);
+    this.#layout.observeViewport();
+    next.addEventListener("load", this.#onContentLoad, true);
+    this.#syncContentObservation();
+    if (typeof MutationObserver !== "undefined") {
+      this.#mutationObserver = new MutationObserver(() => {
+        if (!this.#connected || this.#observedViewport !== next) return;
+        this.#syncContentObservation();
+        this.update();
+      });
+      this.#mutationObserver.observe(this.element, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: ["class", "style", "hidden"]
+      });
+    }
+    this.#state = null;
+    this.update();
+  }
+  /** Observes direct content boxes whose resize can change the viewport's scroll extent. */
+  #syncContentObservation() {
+    const next = new Set(this.#observedViewport?.children ?? []);
+    for (const content of this.#observedContent) {
+      if (!next.has(content)) {
+        this.#layout.unobserve(content);
+        this.#observedContent.delete(content);
+      }
+    }
+    for (const content of next) {
+      if (!this.#observedContent.has(content)) {
+        this.#observedContent.add(content);
+        this.#layout.observe(content);
+      }
+    }
+  }
+  #stopObservingViewport() {
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    this.#observedViewport?.removeEventListener("load", this.#onContentLoad, true);
+    if (this.#observedViewport) this.#layout.unobserve(this.#observedViewport);
+    for (const content of this.#observedContent) this.#layout.unobserve(content);
+    this.#observedContent.clear();
+    this.#observedViewport = null;
+    this.#layout.unobserveViewport();
+  }
+  #onContentLoad = () => {
+    if (this.#connected) this.update();
+  };
+  get #threshold() {
+    const value = this.thresholdValue;
+    return Number.isFinite(value) ? Math.max(0, value) : 1;
+  }
   #directionFromEvent(event) {
     const params = event.params;
     const direction = params?.direction;
     return direction === "start" || direction === "end" ? direction : null;
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 
 export { OverflowIndicatorController };