stimeo-ui 0.1.0.pre.alpha.1

data/dist/controllers/roving_controller.js

@@ -0,0 +1,116 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/roving_controller.ts
+
+// src/utils/roving_tabindex.ts
+var RovingTabindex = class {
+  /** Returns the current ordered item elements; called on every operation. */
+  #getItems;
+  /**
+   * @param getItems - Returns the current ordered item elements. Called on every
+   *   operation so the live target list is always used.
+   */
+  constructor(getItems) {
+    this.#getItems = getItems;
+  }
+  /** Index of the currently tabbable item (`tabindex="0"`), or `-1` if none. */
+  get activeIndex() {
+    return this.#getItems().findIndex((item) => item.tabIndex === 0);
+  }
+  /**
+   * Makes exactly the item at `index` tabbable (`tabindex="0"`) and removes every
+   * other item from the Tab sequence (`tabindex="-1"`). An out-of-range `index`
+   * (e.g. `-1`) leaves all items at `-1`, which a controller can use to express
+   * "nothing is currently tabbable".
+   *
+   * @param index - Position of the item to make tabbable.
+   * @param options - Pass `{ focus: true }` to also move DOM focus to that item.
+   */
+  setActive(index, { focus = false } = {}) {
+    const items = this.#getItems();
+    items.forEach((item, i) => {
+      item.tabIndex = i === index ? 0 : -1;
+    });
+    if (focus) items[index]?.focus();
+  }
+};
+function rovingMove(current, length, delta, wrap) {
+  if (length === 0) return -1;
+  const next = current + delta;
+  if (wrap === "wrap") return (next + length) % length;
+  return Math.min(length - 1, Math.max(0, next));
+}
+
+// src/controllers/roving_controller.ts
+var RovingController = class extends Controller {
+  static targets = ["item"];
+  static values = {
+    orientation: { type: String, default: "horizontal" },
+    wrap: { type: Boolean, default: true },
+    homeEnd: { type: Boolean, default: true }
+  };
+  static events = ["change"];
+  #roving = new RovingTabindex(() => this.itemTargets);
+  connect() {
+    const active = this.#roving.activeIndex;
+    this.#roving.setActive(active === -1 ? 0 : active);
+    this.element.addEventListener("keydown", this.#onKeydown);
+    this.element.addEventListener("focusin", this.#onFocusin);
+  }
+  disconnect() {
+    this.element.removeEventListener("keydown", this.#onKeydown);
+    this.element.removeEventListener("focusin", this.#onFocusin);
+  }
+  /** Arrow keys move focus + the tab stop; Home/End jump to the ends. */
+  #onKeydown = (event) => {
+    const items = this.itemTargets;
+    const current = this.#indexOf(event.target);
+    if (current === -1) return;
+    const length = items.length;
+    const wrap = this.wrapValue ? "wrap" : "clamp";
+    const orientation = this.orientationValue;
+    const horizontal = orientation === "horizontal" || orientation === "both";
+    const vertical = orientation === "vertical" || orientation === "both";
+    let next;
+    if (horizontal && event.key === "ArrowRight" || vertical && event.key === "ArrowDown") {
+      next = rovingMove(current, length, 1, wrap);
+    } else if (horizontal && event.key === "ArrowLeft" || vertical && event.key === "ArrowUp") {
+      next = rovingMove(current, length, -1, wrap);
+    } else if (this.homeEndValue && event.key === "Home") {
+      next = 0;
+    } else if (this.homeEndValue && event.key === "End") {
+      next = length - 1;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    this.#activate(next, true);
+  };
+  /**
+   * Syncs the single tab stop to an item that received focus by other means
+   * (click, programmatic `focus()`), so returning via Tab lands on it. The
+   * keyboard path's own `focus()` re-enters here but is a no-op (index unchanged).
+   */
+  #onFocusin = (event) => {
+    const index = this.#indexOf(event.target);
+    if (index !== -1) this.#activate(index, false);
+  };
+  /** Resolves the item index owning an event target (the item or a descendant). */
+  #indexOf(target) {
+    const node = target;
+    if (!node) return -1;
+    return this.itemTargets.findIndex((item) => item === node || item.contains(node));
+  }
+  /** Makes `index` the tab stop (optionally focusing it), emitting `change` once. */
+  #activate(index, focus) {
+    const previous = this.#roving.activeIndex;
+    this.#roving.setActive(index, { focus });
+    if (index !== previous) {
+      this.dispatch("change", { detail: { index, item: this.itemTargets[index] } });
+    }
+  }
+};
+
+export { RovingController };
+//# sourceMappingURL=roving_controller.js.map
+//# sourceMappingURL=roving_controller.js.map

data/dist/controllers/scroll_area_controller.js

@@ -0,0 +1,183 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/scroll_area_controller.ts
+
+// 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/scroll_area_controller.ts
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+  "[contenteditable='true']"
+].join(",");
+var EDGE_EPSILON = 1;
+var ScrollAreaController = class extends Controller {
+  static targets = ["viewport"];
+  static values = {
+    orientation: { type: String, default: "vertical" }
+  };
+  static events = ["reach"];
+  #layout = new LayoutObserver(() => this.#update());
+  /** 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;
+  /** Whether this controller added `role="region"`, for symmetric teardown. */
+  #addedRole = false;
+  #onScroll = () => {
+    this.#update();
+  };
+  connect() {
+    if (!this.hasViewportTarget) return;
+    this.viewportTarget.addEventListener("scroll", this.#onScroll, { passive: true });
+    this.#layout.observe(this.viewportTarget);
+    this.#layout.observeViewport();
+    this.#update();
+  }
+  disconnect() {
+    if (this.hasViewportTarget) {
+      this.viewportTarget.removeEventListener("scroll", this.#onScroll);
+      this.#clearAddedAttributes(this.viewportTarget);
+    }
+    this.#layout.disconnect();
+    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");
+    this.#syncKeyboardReach(vp, overflowing);
+    const { position, progress } = this.#measurePosition(vp);
+    this.element.setAttribute("data-scroll", position);
+    this.element.style.setProperty("--stimeo-scroll-progress", String(progress));
+    const edge = position === "start" ? "start" : position === "end" ? "end" : null;
+    if (overflowing && edge && edge !== this.#lastEdge) {
+      this.#lastEdge = edge;
+      this.dispatch("reach", { detail: { edge } });
+    } else if (!edge) {
+      this.#lastEdge = null;
+    }
+  }
+  /** Whether the viewport can scroll on the configured axis. */
+  #measureOverflow(vp) {
+    const o = this.orientationValue;
+    const vertical = o !== "horizontal" && vp.scrollHeight > vp.clientHeight + EDGE_EPSILON;
+    const horizontal = o !== "vertical" && vp.scrollWidth > vp.clientWidth + EDGE_EPSILON;
+    return vertical || horizontal;
+  }
+  /**
+   * Reports the scroll position bucket and 0–1 progress on the primary axis. For
+   * `both`, the vertical axis is used when it overflows, otherwise the horizontal.
+   */
+  #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;
+    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 };
+    if (scrollPos >= maxScroll - EDGE_EPSILON) return { position: "end", progress };
+    return { position: "middle", progress };
+  }
+  /**
+   * Makes the viewport keyboard-scrollable when it overflows and contains no
+   * focusable elements of its own (avoiding a double tab stop). Adds `role="region"`
+   * only when the viewport already carries an accessible name.
+   */
+  #syncKeyboardReach(vp, overflowing) {
+    const wantsTabindex = overflowing && !this.#hasFocusableContent(vp);
+    if (wantsTabindex) {
+      if (!vp.hasAttribute("tabindex")) {
+        vp.setAttribute("tabindex", "0");
+        this.#addedTabindex = true;
+      }
+      if (!vp.hasAttribute("role") && this.#hasAccessibleName(vp)) {
+        vp.setAttribute("role", "region");
+        this.#addedRole = true;
+      }
+    } else {
+      this.#clearAddedAttributes(vp);
+    }
+  }
+  /** Removes (and resets the flags for) only the attributes this controller added. */
+  #clearAddedAttributes(vp) {
+    if (this.#addedTabindex) {
+      vp.removeAttribute("tabindex");
+      this.#addedTabindex = false;
+    }
+    if (this.#addedRole) {
+      vp.removeAttribute("role");
+      this.#addedRole = false;
+    }
+  }
+  #hasFocusableContent(vp) {
+    return vp.querySelector(FOCUSABLE_SELECTOR) !== null;
+  }
+  #hasAccessibleName(vp) {
+    return vp.hasAttribute("aria-label") || vp.hasAttribute("aria-labelledby");
+  }
+};
+
+export { ScrollAreaController };
+//# sourceMappingURL=scroll_area_controller.js.map
+//# sourceMappingURL=scroll_area_controller.js.map

data/dist/controllers/scroll_visibility_controller.js

@@ -0,0 +1,103 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/scroll_visibility_controller.ts
+var ScrollVisibilityController = class extends Controller {
+  static targets = ["element"];
+  static values = {
+    offset: { type: Number, default: 400 },
+    mode: { type: String, default: "offset" },
+    focusSelector: { type: String, default: "" },
+    root: { type: String, default: "" }
+  };
+  static actions = ["toTop"];
+  static events = ["change"];
+  /** Pending rAF id used to coalesce scroll bursts into one measurement. */
+  #rafId = null;
+  /** Previous scroll position, for `direction` mode delta detection. */
+  #lastScrollY = 0;
+  /** Current visibility, tracked to dispatch `change` only on real transitions. */
+  #visible = null;
+  /**
+   * The observed scroll source: a container element when `root` resolves, else
+   * the window. Captured on connect so teardown detaches from the same source.
+   */
+  #scrollSource = window;
+  #onScroll = () => {
+    if (this.#rafId !== null) return;
+    this.#rafId = requestAnimationFrame(() => {
+      this.#rafId = null;
+      this.#evaluate();
+    });
+  };
+  connect() {
+    this.#scrollSource = this.#resolveScrollSource();
+    this.#lastScrollY = this.#scrollY();
+    this.#scrollSource.addEventListener("scroll", this.#onScroll, { passive: true });
+    this.#evaluate();
+  }
+  disconnect() {
+    this.#scrollSource.removeEventListener("scroll", this.#onScroll);
+    if (this.#rafId !== null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+    this.#visible = null;
+  }
+  /** Scrolls the source to the top and, optionally, moves focus to a safe target. */
+  toTop() {
+    const behavior = this.#prefersReducedMotion() ? "auto" : "smooth";
+    this.#scrollSource.scrollTo({ top: 0, behavior });
+    if (this.focusSelectorValue) {
+      const target = document.querySelector(this.focusSelectorValue);
+      if (target) {
+        if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+        target.focus();
+      }
+    }
+  }
+  /** Decides the next visibility from the current scroll state and applies it. */
+  #evaluate() {
+    const y = this.#scrollY();
+    let nextVisible;
+    if (this.modeValue === "direction") {
+      if (y <= this.offsetValue) {
+        nextVisible = true;
+      } else {
+        nextVisible = y < this.#lastScrollY;
+      }
+    } else {
+      nextVisible = y > this.offsetValue;
+    }
+    this.#lastScrollY = y;
+    this.#setVisible(nextVisible);
+  }
+  /** Applies visibility to the target, syncing `hidden`, `data-state`, `change`. */
+  #setVisible(next) {
+    if (next === this.#visible) return;
+    this.#visible = next;
+    if (this.hasElementTarget) this.elementTarget.hidden = !next;
+    this.element.setAttribute("data-state", next ? "visible" : "hidden");
+    this.dispatch("change", { detail: { visible: next } });
+  }
+  /** Resolves the scroll source from `root` (falling back to the window). */
+  #resolveScrollSource() {
+    if (this.rootValue) {
+      const root = document.querySelector(this.rootValue);
+      if (root) return root;
+    }
+    return window;
+  }
+  #scrollY() {
+    if (this.#scrollSource === window) {
+      return window.scrollY ?? window.pageYOffset ?? 0;
+    }
+    return this.#scrollSource.scrollTop;
+  }
+  #prefersReducedMotion() {
+    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+};
+
+export { ScrollVisibilityController };
+//# sourceMappingURL=scroll_visibility_controller.js.map
+//# sourceMappingURL=scroll_visibility_controller.js.map

data/dist/controllers/scrollspy_controller.js

@@ -0,0 +1,171 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/scrollspy_controller.ts
+var ScrollspyController = class extends Controller {
+  static targets = ["link"];
+  static values = {
+    offset: { type: Number, default: 0 },
+    rootMargin: { type: String, default: "" },
+    rootSelector: { type: String, default: "" }
+  };
+  static actions = ["scrollTo"];
+  static events = ["change"];
+  #observer = null;
+  #isConnected = false;
+  /** Track active/intersecting status of each section element by ID. */
+  #intersectionStates = /* @__PURE__ */ new Map();
+  /** Current active section ID, used to avoid duplicate event dispatching. */
+  #activeSectionId = "";
+  connect() {
+    this.#isConnected = true;
+    this.#initializeObserver();
+  }
+  disconnect() {
+    this.#isConnected = false;
+    if (this.#observer) {
+      this.#observer.disconnect();
+      this.#observer = null;
+    }
+    this.#intersectionStates.clear();
+    this.#activeSectionId = "";
+  }
+  /**
+   * Re-initializes the observer if the offset or rootMargin values change dynamically.
+   */
+  offsetValueChanged() {
+    if (!this.#isConnected) return;
+    this.#initializeObserver();
+  }
+  rootMarginValueChanged() {
+    if (!this.#isConnected) return;
+    this.#initializeObserver();
+  }
+  rootSelectorValueChanged() {
+    if (!this.#isConnected) return;
+    this.#initializeObserver();
+  }
+  /**
+   * Smoothly scrolls to the target element mapped by the link anchor.
+   * Prevents full window scroll jumps when tracking nested scrollable containers.
+   */
+  scrollTo(event) {
+    const link = event.currentTarget;
+    const id = this.#getAnchorId(link);
+    if (!id) return;
+    event.preventDefault();
+    const targetElement = document.getElementById(id);
+    if (!targetElement) return;
+    const rootElement = this.#getRootElement();
+    if (rootElement) {
+      const containerRect = rootElement.getBoundingClientRect();
+      const targetRect = targetElement.getBoundingClientRect();
+      const scrollPosition = rootElement.scrollTop + (targetRect.top - containerRect.top) - this.offsetValue;
+      rootElement.scrollTo({
+        top: scrollPosition,
+        behavior: "smooth"
+      });
+    } else {
+      const targetRect = targetElement.getBoundingClientRect();
+      const scrollPosition = window.scrollY + targetRect.top - this.offsetValue;
+      window.scrollTo({
+        top: scrollPosition,
+        behavior: "smooth"
+      });
+    }
+  }
+  #getRootElement() {
+    if (!this.rootSelectorValue) return null;
+    return document.querySelector(this.rootSelectorValue);
+  }
+  #initializeObserver() {
+    if (this.#observer) {
+      this.#observer.disconnect();
+      this.#observer = null;
+    }
+    this.#intersectionStates.clear();
+    this.#activeSectionId = "";
+    if (this.linkTargets.length === 0) return;
+    const margin = this.rootMarginValue || `-${this.offsetValue}px 0px -80% 0px`;
+    const rootEl = this.#getRootElement();
+    this.#observer = new IntersectionObserver(this.#onIntersection, {
+      root: rootEl,
+      rootMargin: margin,
+      threshold: [0, 0.2, 0.4, 0.6, 0.8, 1]
+      // Multiple thresholds handle large sections safely
+    });
+    for (const link of this.linkTargets) {
+      const id = this.#getAnchorId(link);
+      if (!id) continue;
+      const section = document.getElementById(id);
+      if (section) {
+        this.#observer.observe(section);
+      }
+    }
+  }
+  #onIntersection = (entries) => {
+    if (!this.#isConnected) return;
+    for (const entry of entries) {
+      const id = entry.target.id;
+      if (!id) continue;
+      this.#intersectionStates.set(id, {
+        isIntersecting: entry.isIntersecting,
+        top: entry.boundingClientRect.top
+      });
+    }
+    this.#evaluateActiveSection();
+  };
+  #evaluateActiveSection() {
+    const rootEl = this.#getRootElement();
+    const triggerLine = (rootEl ? rootEl.getBoundingClientRect().top : 0) + this.offsetValue;
+    let bestId = "";
+    let closestTop = Number.MAX_VALUE;
+    for (const [id, state] of this.#intersectionStates.entries()) {
+      if (state.isIntersecting) {
+        const distance = Math.abs(state.top - triggerLine);
+        if (distance < closestTop) {
+          closestTop = distance;
+          bestId = id;
+        }
+      }
+    }
+    if (!bestId && this.#intersectionStates.size > 0) {
+      let absoluteClosestId = "";
+      let absoluteClosestTop = Number.MAX_VALUE;
+      for (const [id, state] of this.#intersectionStates.entries()) {
+        const distance = Math.abs(state.top - triggerLine);
+        if (distance < absoluteClosestTop) {
+          absoluteClosestTop = distance;
+          absoluteClosestId = id;
+        }
+      }
+      bestId = absoluteClosestId;
+    }
+    if (bestId && bestId !== this.#activeSectionId) {
+      this.#activeSectionId = bestId;
+      this.#syncActiveStates();
+    }
+  }
+  #syncActiveStates() {
+    const activeLink = this.linkTargets.find((l) => this.#getAnchorId(l) === this.#activeSectionId);
+    for (const link of this.linkTargets) {
+      const isActive = link === activeLink;
+      if (isActive) {
+        link.setAttribute("aria-current", "location");
+      } else {
+        link.removeAttribute("aria-current");
+      }
+    }
+    if (activeLink) {
+      this.dispatch("change", { detail: { id: this.#activeSectionId, link: activeLink } });
+    }
+  }
+  #getAnchorId(link) {
+    const href = link.getAttribute("href") || link.getAttribute("data-href");
+    if (!href?.startsWith("#")) return null;
+    return href.substring(1);
+  }
+};
+
+export { ScrollspyController };
+//# sourceMappingURL=scrollspy_controller.js.map
+//# sourceMappingURL=scrollspy_controller.js.map

data/dist/controllers/skeleton_controller.js

@@ -0,0 +1,125 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/skeleton_controller.ts
+
+// 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/skeleton_controller.ts
+var SkeletonController = class extends Controller {
+  static targets = ["placeholder", "content"];
+  static values = {
+    minDuration: { type: Number, default: 0 }
+  };
+  static actions = ["ready", "reset"];
+  static events = ["ready"];
+  #timers = new SafeTimeout();
+  /** Pending min-duration reveal timer id, or `null` when none is scheduled. */
+  #revealTimerId = null;
+  /** Epoch ms when the loading state began, used to enforce `minDuration`. */
+  #loadingSince = 0;
+  connect() {
+    if (this.#state !== "ready") {
+      this.#enterLoading();
+    }
+  }
+  disconnect() {
+    this.#timers.clearAll();
+    this.#revealTimerId = null;
+  }
+  /** Swaps to the real content. Honors `minDuration` to prevent a flash. */
+  ready() {
+    if (this.#state === "ready" || this.#revealTimerId !== null) return;
+    const remaining = this.minDurationValue - (Date.now() - this.#loadingSince);
+    if (remaining > 0) {
+      this.#revealTimerId = this.#timers.set(() => {
+        this.#revealTimerId = null;
+        this.#reveal();
+      }, remaining);
+    } else {
+      this.#reveal();
+    }
+  }
+  /** Returns to the loading state (e.g. a Turbo Stream re-fetch). */
+  reset() {
+    if (this.#revealTimerId !== null) {
+      this.#timers.clear(this.#revealTimerId);
+      this.#revealTimerId = null;
+    }
+    this.#enterLoading();
+  }
+  /** Shows the placeholder, hides content, and marks the region busy. */
+  #enterLoading() {
+    this.#loadingSince = Date.now();
+    if (this.hasPlaceholderTarget) this.placeholderTarget.hidden = false;
+    if (this.hasContentTarget) this.contentTarget.hidden = true;
+    this.element.setAttribute("aria-busy", "true");
+    this.element.setAttribute("data-state", "loading");
+  }
+  /** Hides the placeholder, shows content, and clears the busy state. */
+  #reveal() {
+    if (this.hasPlaceholderTarget) this.placeholderTarget.hidden = true;
+    if (this.hasContentTarget) this.contentTarget.hidden = false;
+    this.element.setAttribute("aria-busy", "false");
+    this.element.setAttribute("data-state", "ready");
+    this.dispatch("ready", { detail: {} });
+  }
+  /** Current lifecycle phase as reflected on `data-state`. */
+  get #state() {
+    return this.element.getAttribute("data-state") ?? "loading";
+  }
+};
+
+export { SkeletonController };
+//# sourceMappingURL=skeleton_controller.js.map
+//# sourceMappingURL=skeleton_controller.js.map