stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/rating_controller.js

@@ -2,6 +2,17 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/rating_controller.ts
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -77,16 +88,19 @@ var RatingController = class extends Controller {
   }
   /** Arrow/Home/End/Space keyboard control, clamped (no wrap). */
   onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     if (this.readonlyValue) return;
     let next = null;
+    const rtl = isRtl(this.element);
     switch (event.key) {
       case "ArrowRight":
       case "ArrowUp":
-        next = this.valueValue + 1;
+        next = this.valueValue + (event.key === "ArrowRight" && rtl ? -1 : 1);
         break;
       case "ArrowLeft":
       case "ArrowDown":
-        next = this.valueValue - 1;
+        next = this.valueValue - (event.key === "ArrowLeft" && rtl ? -1 : 1);
         break;
       case "Home":
         next = this.#minValue;

data/dist/controllers/read_more_controller.js

@@ -0,0 +1,238 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/read_more_controller.ts
+
+// src/utils/blur_deferral.ts
+var BlurDeferral = class {
+  /** Elements currently holding an update back, mapped to their `blur` listener. */
+  #pending = /* @__PURE__ */ new Map();
+  /** Called after a pending element blurs and has been detached. */
+  #onRelease;
+  /** @param onRelease - Invoked once `element` actually blurs; never on `release`. */
+  constructor(onRelease) {
+    this.#onRelease = onRelease;
+  }
+  /** Number of elements currently holding an update back. */
+  get size() {
+    return this.#pending.size;
+  }
+  /** Snapshot of the pending elements, safe to iterate while releasing them. */
+  get elements() {
+    return [...this.#pending.keys()];
+  }
+  /** Whether `element` is currently holding an update back. */
+  has(element) {
+    return this.#pending.has(element);
+  }
+  /** Holds an update back until `element` blurs. Idempotent (no stacked listeners). */
+  defer(element) {
+    if (this.#pending.has(element)) return;
+    const onBlur = () => {
+      this.#detach(element);
+      this.#onRelease(element);
+    };
+    this.#pending.set(element, onBlur);
+    element.addEventListener("blur", onBlur);
+  }
+  /** Defers `element` as the only pending entry, cancelling any others. */
+  deferOnly(element) {
+    for (const pending of this.elements) {
+      if (pending !== element) this.#detach(pending);
+    }
+    this.defer(element);
+  }
+  /** Cancels `element`'s deferral without completing it; no-ops when not pending. */
+  release(element) {
+    this.#detach(element);
+  }
+  /** Cancels every deferral without completing any of them. */
+  releaseAll() {
+    for (const element of this.elements) this.#detach(element);
+  }
+  /** Removes the `blur` listener for `element` and forgets it. */
+  #detach(element) {
+    const onBlur = this.#pending.get(element);
+    if (onBlur) element.removeEventListener("blur", onBlur);
+    this.#pending.delete(element);
+  }
+};
+
+// src/utils/layout_observer.ts
+var LayoutObserver = class {
+  #callback;
+  #resizeObserverFactory;
+  #resizeObserver = null;
+  #observingViewport = false;
+  /** Stable bound handler so add/removeEventListener target the same reference. */
+  #handleViewportResize = () => {
+    this.#callback();
+  };
+  constructor(callback, options = {}) {
+    this.#callback = callback;
+    this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
+  }
+  /**
+   * Starts observing an element's size. Repeated calls observe additional
+   * elements through the same shared observer. No-ops when no
+   * `ResizeObserver` implementation is available.
+   */
+  observe(element) {
+    if (!this.#resizeObserverFactory) return;
+    if (!this.#resizeObserver) {
+      this.#resizeObserver = this.#resizeObserverFactory(() => {
+        this.#callback();
+      });
+    }
+    this.#resizeObserver.observe(element);
+  }
+  /** Stops observing a single element while leaving any others in place. */
+  unobserve(element) {
+    this.#resizeObserver?.unobserve(element);
+  }
+  /** Starts observing viewport resizes. Idempotent: the listener is added once. */
+  observeViewport() {
+    if (this.#observingViewport) return;
+    this.#observingViewport = true;
+    window.addEventListener("resize", this.#handleViewportResize);
+  }
+  /** Stops observing viewport resizes without affecting element observation. */
+  unobserveViewport() {
+    if (!this.#observingViewport) return;
+    this.#observingViewport = false;
+    window.removeEventListener("resize", this.#handleViewportResize);
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and
+   * removes the viewport listener. Safe to call multiple times. Call this from a
+   * controller's `disconnect()`.
+   */
+  disconnect() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.unobserveViewport();
+  }
+};
+
+// src/controllers/read_more_controller.ts
+var ReadMoreController = class extends Controller {
+  static targets = ["content", "trigger"];
+  static values = {
+    collapsed: { type: Boolean, default: true }
+  };
+  static actions = ["toggle"];
+  #connected = false;
+  #collapsed = true;
+  #observedContent = null;
+  #contentMutationObserver = null;
+  #update = () => {
+    if (this.#connected) this.#evaluateOverflow();
+  };
+  #layout = new LayoutObserver(this.#update);
+  /** Holds the trigger's hide back while it has focus; re-evaluates on blur. */
+  #deferredHide = new BlurDeferral(() => {
+    this.#update();
+  });
+  connect() {
+    this.#connected = true;
+    this.#collapsed = this.#initialCollapsed();
+    this.#syncTargets();
+  }
+  disconnect() {
+    this.#connected = false;
+    this.#stopObservingContent();
+    this.#layout.disconnect();
+  }
+  contentTargetConnected() {
+    this.#syncTargets();
+  }
+  contentTargetDisconnected() {
+    this.#syncTargets();
+  }
+  triggerTargetConnected() {
+    this.#syncTargets();
+  }
+  triggerTargetDisconnected(trigger) {
+    this.#deferredHide.release(trigger);
+    this.#syncTargets();
+  }
+  /** Toggles between the collapsed (clamped) and expanded states. */
+  toggle() {
+    if (!this.#connected) return;
+    this.#collapsed = !this.#collapsed;
+    this.#reflect();
+    this.#evaluateOverflow();
+  }
+  #initialCollapsed() {
+    if (this.hasContentTarget) {
+      const state = this.contentTarget.getAttribute("data-state");
+      if (state === "expanded") return false;
+      if (state === "collapsed") return true;
+    }
+    return this.collapsedValue;
+  }
+  #reflect() {
+    if (this.hasContentTarget) {
+      this.contentTarget.setAttribute("data-state", this.#collapsed ? "collapsed" : "expanded");
+    }
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", this.#collapsed ? "false" : "true");
+    }
+  }
+  #syncTargets() {
+    if (!this.#connected) return;
+    this.#syncContentObservation();
+    this.#reflect();
+    this.#evaluateOverflow();
+  }
+  #syncContentObservation() {
+    const next = this.hasContentTarget ? this.contentTarget : null;
+    if (next === this.#observedContent) return;
+    this.#stopObservingContent();
+    if (!next) return;
+    this.#observedContent = next;
+    this.#layout.observe(next);
+    this.#layout.observeViewport();
+    next.addEventListener("load", this.#update, true);
+    if (typeof MutationObserver !== "undefined") {
+      this.#contentMutationObserver = new MutationObserver(this.#update);
+      this.#contentMutationObserver.observe(next, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
+  }
+  #stopObservingContent() {
+    this.#deferredHide.releaseAll();
+    if (this.#observedContent) {
+      this.#layout.unobserve(this.#observedContent);
+      this.#observedContent.removeEventListener("load", this.#update, true);
+    }
+    this.#observedContent = null;
+    this.#contentMutationObserver?.disconnect();
+    this.#contentMutationObserver = null;
+    this.#layout.unobserveViewport();
+  }
+  #evaluateOverflow() {
+    if (!this.hasTriggerTarget || !this.hasContentTarget) return;
+    const trigger = this.triggerTarget;
+    const content = this.contentTarget;
+    const useful = !this.#collapsed || content.scrollHeight > content.clientHeight;
+    if (useful) {
+      this.#deferredHide.releaseAll();
+      trigger.hidden = false;
+      return;
+    }
+    if (document.activeElement === trigger) {
+      trigger.hidden = false;
+      this.#deferredHide.deferOnly(trigger);
+      return;
+    }
+    this.#deferredHide.releaseAll();
+    trigger.hidden = true;
+  }
+};
+
+export { ReadMoreController };
+//# sourceMappingURL=read_more_controller.js.map
+//# sourceMappingURL=read_more_controller.js.map

data/dist/controllers/resizable_controller.js

@@ -1,5 +1,40 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/resizable_controller.ts
+
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
+// src/utils/tabindex_loan.ts
+var TabindexLoan = class {
+  #value;
+  #lent = /* @__PURE__ */ new Set();
+  /**
+   * @param value - the `tabindex` to lend. `"-1"` (the default) is
+   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
+   *   which a scroll region with no focusable content of its own needs.
+   */
+  constructor(value = "-1") {
+    this.#value = value;
+  }
+  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
+  lend(element) {
+    if (element.hasAttribute("tabindex")) return;
+    element.setAttribute("tabindex", this.#value);
+    this.#lent.add(element);
+  }
+  /** Takes back every loan whose value is still the one that was lent. */
+  returnAll() {
+    for (const element of this.#lent) {
+      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+    }
+    this.#lent.clear();
+  }
+};
+
 // src/controllers/resizable_controller.ts
 var ResizableController = class extends Controller {
   static targets = ["primary", "secondary", "separator"];
@@ -11,18 +46,46 @@ var ResizableController = class extends Controller {
   };
   static actions = ["onKeydown", "onPointerDown", "toggle"];
   static events = ["change"];
-  /** Track previously held value before collapse toggles. */
+  /** The value held before the current collapse, restored when toggling back. */
   #valueBeforeCollapse = 50;
   /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
   #dragAbort = null;
+  /** `tabindex` lent to a pane so `F6` can put focus on it; panes carry none. */
+  #paneTabindex = new TabindexLoan();
+  /** Releases the pane cycle listener bound in {@link connect}. */
+  #cycleAbort = null;
   connect() {
     this.#clampAndSync();
+    this.#cycleAbort = new AbortController();
+    this.element.addEventListener("keydown", this.#onCycleKeydown, {
+      signal: this.#cycleAbort.signal
+    });
   }
   /** Cancels any active pointer drag so listeners never leak past disconnect. */
   disconnect() {
     this.#dragAbort?.abort();
     this.#dragAbort = null;
+    this.#cycleAbort?.abort();
+    this.#cycleAbort = null;
+    this.#paneTabindex.returnAll();
   }
+  /** Moves focus to the next pane on `F6`, wrapping; entering at the first one. */
+  #onCycleKeydown = (event) => {
+    if (event.key !== "F6") return;
+    if (event.defaultPrevented) return;
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const panes = [];
+    if (this.hasPrimaryTarget) panes.push(this.primaryTarget);
+    if (this.hasSecondaryTarget) panes.push(this.secondaryTarget);
+    if (panes.length === 0) return;
+    const target = event.target;
+    const current = panes.findIndex((pane) => target instanceof Node && pane.contains(target));
+    const next = panes[(current + 1) % panes.length];
+    if (!next) return;
+    event.preventDefault();
+    this.#paneTabindex.lend(next);
+    next.focus();
+  };
   /**
    * Stimulus lifecycle callback when the valueValue changes.
    * Keeps CSS fractions and ARIA status completely aligned.
@@ -47,6 +110,7 @@ var ResizableController = class extends Controller {
   }
   /** Keydown adjustments for ArrowUp/Down/Left/Right and Home/End. */
   onKeydown(event) {
+    if (isReservedArrowChord(event)) return;
     if (!this.hasSeparatorTarget) return;
     const orientation = this.separatorTarget.getAttribute("aria-orientation") || "vertical";
     const isVertical = orientation === "vertical";

data/dist/controllers/roving_controller.js

@@ -2,6 +2,17 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/roving_controller.ts
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -64,6 +75,7 @@ var RovingController = class extends Controller {
   /** Arrow keys move focus + the tab stop; Home/End jump to the ends. */
   #onKeydown = (event) => {
     if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const items = this.itemTargets;
     const current = this.#indexOf(event.target);
     if (current === -1) return;
@@ -72,10 +84,13 @@ var RovingController = class extends Controller {
     const orientation = this.orientationValue;
     const horizontal = orientation === "horizontal" || orientation === "both";
     const vertical = orientation === "vertical" || orientation === "both";
+    const rtl = horizontal && isRtl(this.element);
+    const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+    const backwardKey = rtl ? "ArrowRight" : "ArrowLeft";
     let next;
-    if (horizontal && event.key === "ArrowRight" || vertical && event.key === "ArrowDown") {
+    if (horizontal && event.key === forwardKey || vertical && event.key === "ArrowDown") {
       next = rovingMove(current, length, 1, wrap);
-    } else if (horizontal && event.key === "ArrowLeft" || vertical && event.key === "ArrowUp") {
+    } else if (horizontal && event.key === backwardKey || vertical && event.key === "ArrowUp") {
       next = rovingMove(current, length, -1, wrap);
     } else if (this.homeEndValue && event.key === "Home") {
       next = 0;

data/dist/controllers/scroll_area_controller.js

@@ -58,6 +58,47 @@ 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 };
+}
+
+// src/utils/tabindex_loan.ts
+var TabindexLoan = class {
+  #value;
+  #lent = /* @__PURE__ */ new Set();
+  /**
+   * @param value - the `tabindex` to lend. `"-1"` (the default) is
+   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
+   *   which a scroll region with no focusable content of its own needs.
+   */
+  constructor(value = "-1") {
+    this.#value = value;
+  }
+  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
+  lend(element) {
+    if (element.hasAttribute("tabindex")) return;
+    element.setAttribute("tabindex", this.#value);
+    this.#lent.add(element);
+  }
+  /** Takes back every loan whose value is still the one that was lent. */
+  returnAll() {
+    for (const element of this.#lent) {
+      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+    }
+    this.#lent.clear();
+  }
+};
+
 // src/controllers/scroll_area_controller.ts
 var FOCUSABLE_SELECTOR = [
   "a[href]",
@@ -76,10 +117,12 @@ var ScrollAreaController = class extends Controller {
   };
   static events = ["reach"];
   #layout = new LayoutObserver(() => this.#update());
+  /** Re-checks the tab stop when the viewport's focusable content comes or goes. */
+  #content = null;
   /** Last edge reported via `reach`, so the event fires once per arrival. */
   #lastEdge = null;
   /** Whether this controller added `tabindex`, so teardown only removes its own. */
-  #addedTabindex = false;
+  #tabindex = new TabindexLoan("0");
   /** Whether this controller added `role="region"`, for symmetric teardown. */
   #addedRole = false;
   #onScroll = () => {
@@ -90,6 +133,18 @@ var ScrollAreaController = class extends Controller {
     this.viewportTarget.addEventListener("scroll", this.#onScroll, { passive: true });
     this.#layout.observe(this.viewportTarget);
     this.#layout.observeViewport();
+    if (typeof MutationObserver !== "undefined") {
+      this.#content = new MutationObserver(() => {
+        if (!this.hasViewportTarget) return;
+        const vp = this.viewportTarget;
+        this.#syncKeyboardReach(vp, this.#syncOverflow(vp));
+      });
+      this.#content.observe(this.viewportTarget, {
+        subtree: true,
+        childList: true,
+        attributes: true
+      });
+    }
     this.#update();
   }
   disconnect() {
@@ -98,14 +153,15 @@ var ScrollAreaController = class extends Controller {
       this.#clearAddedAttributes(this.viewportTarget);
     }
     this.#layout.disconnect();
+    this.#content?.disconnect();
+    this.#content = null;
     this.#lastEdge = null;
   }
   /** Re-measures overflow and scroll position and reflects the state hooks. */
   #update() {
     if (!this.hasViewportTarget) return;
     const vp = this.viewportTarget;
-    const overflowing = this.#measureOverflow(vp);
-    this.element.setAttribute("data-overflow", overflowing ? "true" : "false");
+    const overflowing = this.#syncOverflow(vp);
     this.#syncKeyboardReach(vp, overflowing);
     const { position, progress } = this.#measurePosition(vp);
     this.element.setAttribute("data-scroll", position);
@@ -119,6 +175,21 @@ var ScrollAreaController = class extends Controller {
     }
   }
   /** Whether the viewport can scroll on the configured axis. */
+  /**
+   * Measures overflow and reflects the `data-overflow` hook.
+   *
+   * The write is skipped when the value is unchanged. An identical `setAttribute` still
+   * queues a MutationRecord, and markup that puts the viewport target on the controller
+   * element itself would then have the content observer trigger its own next callback.
+   */
+  #syncOverflow(vp) {
+    const overflowing = this.#measureOverflow(vp);
+    const next = overflowing ? "true" : "false";
+    if (this.element.getAttribute("data-overflow") !== next) {
+      this.element.setAttribute("data-overflow", next);
+    }
+    return overflowing;
+  }
   #measureOverflow(vp) {
     const o = this.orientationValue;
     const vertical = o !== "horizontal" && vp.scrollHeight > vp.clientHeight + EDGE_EPSILON;
@@ -131,8 +202,7 @@ var ScrollAreaController = class extends Controller {
    */
   #measurePosition(vp) {
     const horizontalPrimary = this.orientationValue === "horizontal" || this.orientationValue === "both" && vp.scrollHeight <= vp.clientHeight + EDGE_EPSILON;
-    const scrollPos = horizontalPrimary ? vp.scrollLeft : vp.scrollTop;
-    const maxScroll = horizontalPrimary ? vp.scrollWidth - vp.clientWidth : vp.scrollHeight - vp.clientHeight;
+    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontalPrimary);
     if (maxScroll <= EDGE_EPSILON) return { position: "start", progress: 0 };
     const progress = Math.min(1, Math.max(0, scrollPos / maxScroll));
     if (scrollPos <= EDGE_EPSILON) return { position: "start", progress };
@@ -147,10 +217,7 @@ var ScrollAreaController = class extends Controller {
   #syncKeyboardReach(vp, overflowing) {
     const wantsTabindex = overflowing && !this.#hasFocusableContent(vp);
     if (wantsTabindex) {
-      if (!vp.hasAttribute("tabindex")) {
-        vp.setAttribute("tabindex", "0");
-        this.#addedTabindex = true;
-      }
+      this.#tabindex.lend(vp);
       if (!vp.hasAttribute("role") && this.#hasAccessibleName(vp)) {
         vp.setAttribute("role", "region");
         this.#addedRole = true;
@@ -161,17 +228,37 @@ var ScrollAreaController = class extends Controller {
   }
   /** Removes (and resets the flags for) only the attributes this controller added. */
   #clearAddedAttributes(vp) {
-    if (this.#addedTabindex) {
-      vp.removeAttribute("tabindex");
-      this.#addedTabindex = false;
-    }
+    this.#tabindex.returnAll();
     if (this.#addedRole) {
       vp.removeAttribute("role");
       this.#addedRole = false;
     }
   }
+  /**
+   * Whether the viewport owns something the user can Tab to *right now*.
+   *
+   * The selector alone is not enough: a `display: none` button still matches it,
+   * so a viewport whose only control is revealed on demand would never get a tab
+   * stop — leaving it unreachable by keyboard exactly while it has nothing else to
+   * offer. Only rendered candidates count.
+   */
   #hasFocusableContent(vp) {
-    return vp.querySelector(FOCUSABLE_SELECTOR) !== null;
+    return Array.from(vp.querySelectorAll(FOCUSABLE_SELECTOR)).some(
+      (el) => this.#isRendered(el)
+    );
+  }
+  /**
+   * Whether `el` is actually rendered, and so can hold focus.
+   *
+   * `checkVisibility()` answers this for every way CSS can remove a box, including
+   * a class-driven `display: none` that no attribute reveals. The `hidden` walk in
+   * front of it is not redundant: it is the one case a DOM-only environment with no
+   * layout engine has to be told about explicitly.
+   */
+  #isRendered(el) {
+    if (el.closest("[hidden]") !== null) return false;
+    const check = el.checkVisibility;
+    return typeof check === "function" ? check.call(el, { visibilityProperty: true }) : true;
   }
   #hasAccessibleName(vp) {
     return vp.hasAttribute("aria-label") || vp.hasAttribute("aria-labelledby");

data/dist/controllers/scroll_restore_controller.js

@@ -0,0 +1,93 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/scroll_restore_controller.ts
+var ScrollRestoreController = class extends Controller {
+  static values = {
+    key: { type: String, default: "" },
+    axis: { type: String, default: "vertical" }
+  };
+  /** Pending rAF id that coalesces scroll bursts into one save. */
+  #rafId = null;
+  /** Resolved storage key; empty disables persistence (no key and no id). */
+  #storageKey = "";
+  /** Last offset captured while the element was live; persisted as-is on teardown. */
+  #lastTop = 0;
+  #lastLeft = 0;
+  #onScroll = () => {
+    this.#capture();
+    if (this.#rafId !== null) return;
+    this.#rafId = requestAnimationFrame(() => {
+      this.#rafId = null;
+      this.#persist();
+    });
+  };
+  connect() {
+    this.#storageKey = this.#resolveKey();
+    if (!this.#storageKey) return;
+    this.#restore();
+    this.element.addEventListener("scroll", this.#onScroll, { passive: true });
+  }
+  disconnect() {
+    if (!this.#storageKey) return;
+    this.element.removeEventListener("scroll", this.#onScroll);
+    if (this.#rafId !== null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+    this.#persist();
+  }
+  /** Records the live scroll offset for the configured axis. */
+  #capture() {
+    if (this.#tracksVertical) this.#lastTop = this.element.scrollTop;
+    if (this.#tracksHorizontal) this.#lastLeft = this.element.scrollLeft;
+  }
+  /** Persists the last captured scroll offset for the configured axis. */
+  #persist() {
+    const data = {};
+    if (this.#tracksVertical) data.top = this.#lastTop;
+    if (this.#tracksHorizontal) data.left = this.#lastLeft;
+    try {
+      sessionStorage.setItem(this.#storageKey, JSON.stringify(data));
+    } catch {
+    }
+  }
+  /** Applies the persisted scroll offset, if any, without moving focus. */
+  #restore() {
+    let raw = null;
+    try {
+      raw = sessionStorage.getItem(this.#storageKey);
+    } catch {
+      return;
+    }
+    if (raw === null) return;
+    let data;
+    try {
+      data = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    if (this.#tracksVertical && typeof data.top === "number") {
+      this.element.scrollTop = data.top;
+      this.#lastTop = data.top;
+    }
+    if (this.#tracksHorizontal && typeof data.left === "number") {
+      this.element.scrollLeft = data.left;
+      this.#lastLeft = data.left;
+    }
+  }
+  /** The `sessionStorage` key: explicit `key`, else the element `id`, else none. */
+  #resolveKey() {
+    const base = this.keyValue || this.element.id;
+    return base ? `stimeo--scroll-restore:${base}` : "";
+  }
+  get #tracksVertical() {
+    return this.axisValue !== "horizontal";
+  }
+  get #tracksHorizontal() {
+    return this.axisValue === "horizontal" || this.axisValue === "both";
+  }
+};
+
+export { ScrollRestoreController };
+//# sourceMappingURL=scroll_restore_controller.js.map
+//# sourceMappingURL=scroll_restore_controller.js.map