stimeo-ui 0.3.0 → 0.5.0

data/dist/controllers/frame_loading_controller.js

@@ -2,6 +2,155 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/frame_loading_controller.ts
 
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
+// src/utils/detach_gate.ts
+var DetachGate = class _DetachGate {
+  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
+  #pending = false;
+  /**
+   * True while a probe is queued — the last disconnect was ambiguous and no
+   * reconnect has cancelled it yet. Read it from `connect()` to tell the
+   * reconnect half of an in-page move from a first connect: a controller whose
+   * initialisation restarts a measurement (a min-duration floor, an elapsed
+   * counter) must skip it for the move, where nothing actually restarted.
+   */
+  get pending() {
+    return this.#pending;
+  }
+  /**
+   * True when the disconnect is definitely a real detach — the element left
+   * the document, or `data-controller` no longer lists the identifier. False
+   * means ambiguous (in-page move or observed-root exit), NOT "alive".
+   */
+  static isDetached(host) {
+    if (!host.element.isConnected) return true;
+    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
+    return !tokens.includes(host.identifier);
+  }
+  /**
+   * Call from `disconnect()`: runs `teardown` synchronously on a definite
+   * detach (fast path), otherwise defers it one microtask — a reconnect
+   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
+   * One microtask is the whole probe window: Stimulus reconnects a moved
+   * element within the same mutation batch, before the checkpoint drains.
+   */
+  disconnected(host, teardown) {
+    if (_DetachGate.isDetached(host)) {
+      this.#pending = false;
+      teardown();
+      return;
+    }
+    this.#pending = true;
+    queueMicrotask(() => {
+      if (!this.#pending) return;
+      this.#pending = false;
+      teardown();
+    });
+  }
+  /**
+   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
+   * an in-page move) and from the head of any teardown path not routed through
+   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
+   * never run the teardown a second time.
+   */
+  cancel() {
+    this.#pending = false;
+  }
+};
+
+// src/utils/min_duration_floor.ts
+var MinDurationFloor = class {
+  #timers;
+  /** Pending finish timer id, or `null` when nothing is held back. */
+  #timerId = null;
+  /** Epoch ms the floor is measured from. */
+  #since = 0;
+  /** @param timers - the controller's registry; the floor schedules into it. */
+  constructor(timers) {
+    this.#timers = timers;
+  }
+  /** Starts the floor: call when the state being held becomes visible. */
+  begin() {
+    this.#since = Date.now();
+  }
+  /** True while a finish is held back waiting for the floor to elapse. */
+  get pending() {
+    return this.#timerId !== null;
+  }
+  /**
+   * Runs `finish` once the floor has elapsed, immediately when it already has.
+   *
+   * A held-back finish is **replaced**, never stacked: only the most recently
+   * queued id is cancellable, so a second timer would outlive every cancel and
+   * end a state that has since restarted. Controllers that want the first signal
+   * to win guard on {@link pending} before calling.
+   */
+  schedule(minDuration, finish) {
+    this.cancel();
+    const remaining = minDuration - (Date.now() - this.#since);
+    if (remaining > 0) {
+      this.#timerId = this.#timers.set(() => {
+        this.#timerId = null;
+        finish();
+      }, remaining);
+    } else {
+      finish();
+    }
+  }
+  /** Drops a held-back finish. Safe when none is queued, or after a bulk clear. */
+  cancel() {
+    if (this.#timerId !== null) {
+      this.#timers.clear(this.#timerId);
+      this.#timerId = null;
+    }
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -59,32 +208,42 @@ var SafeTimeout = class extends TimerRegistry {
 var FrameLoadingController = class extends Controller {
   static targets = ["content", "skeleton", "overlay"];
   static values = {
+    announceText: { type: String, default: "" },
+    announceReadyText: { type: String, default: "" },
     minDuration: { type: Number, default: 0 },
     restoreFocus: { type: Boolean, default: true }
   };
   static events = ["start", "end"];
   #timeouts = new SafeTimeout();
+  #floor = new MinDurationFloor(this.#timeouts);
+  #gate = new DetachGate();
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #loading = false;
-  #startedAt = 0;
-  #inertApplied = false;
+  /**
+   * The optional targets this controller revealed, and the content it marked inert.
+   * Held as references rather than re-resolved on the way out: a detach that keeps
+   * the element takes the identifier off `data-controller` first, and a scope
+   * without its identifier stops resolving targets — the elements to tidy would be
+   * unreachable exactly when the tidying matters. They double as the ownership
+   * marker, so a `hidden` or an `inert` the consumer wrote is never taken over.
+   */
+  #revealedSkeleton = null;
+  #revealedOverlay = null;
+  #inertTarget = null;
   #previousFocus = null;
   /** The id of the retreated element, used to re-find it if the load replaced it. */
   #previousFocusId = "";
   #onStart = () => {
-    this.#timeouts.clearAll();
+    this.#floor.cancel();
     if (!this.#loading) this.#begin();
   };
   #onEnd = () => {
     if (!this.#loading) return;
-    const remaining = this.minDurationValue - (Date.now() - this.#startedAt);
-    if (remaining > 0) {
-      this.#timeouts.clearAll();
-      this.#timeouts.set(() => this.#finish(), remaining);
-    } else {
-      this.#finish();
-    }
+    this.#floor.schedule(this.minDurationValue, () => this.#finish());
   };
   connect() {
+    this.#gate.cancel();
+    this.#beforeCache.activate();
     this.element.addEventListener("turbo:before-fetch-request", this.#onStart);
     this.element.addEventListener("turbo:frame-load", this.#onEnd);
     this.element.addEventListener("turbo:fetch-request-error", this.#onEnd);
@@ -93,48 +252,123 @@ var FrameLoadingController = class extends Controller {
     this.element.removeEventListener("turbo:before-fetch-request", this.#onStart);
     this.element.removeEventListener("turbo:frame-load", this.#onEnd);
     this.element.removeEventListener("turbo:fetch-request-error", this.#onEnd);
+    this.#beforeCache.deactivate();
+    this.#gate.disconnected(this, () => this.#teardown());
+  }
+  /**
+   * Drops the held finish and the loading bookkeeping on a real detach, returning
+   * the frame to its idle form. No reconnect is coming, so nothing is left that
+   * could finish the load and clear the hooks — a detach that keeps the element
+   * (a morph dropping the identifier, an exit from a scoped observed root) would
+   * otherwise strand it busy and inert. Focus is left where it is: the element is
+   * leaving this controller's care, and moving it now would be an unexplained jump.
+   */
+  #teardown() {
+    this.#gate.cancel();
     this.#timeouts.clearAll();
-    if (this.#loading) {
-      this.element.removeAttribute("aria-busy");
-      this.element.removeAttribute("data-frame-loading");
-      this.#clearInert();
-    }
+    this.#floor.cancel();
+    if (this.#loading) this.#rewindHooks();
     this.#loading = false;
     this.#previousFocus = null;
   }
+  /**
+   * Returns the frame to its idle form for the snapshot Turbo is about to take, so
+   * a page reached with the Back button does not restore a frame that is busy and
+   * inert with nothing left to finish it. State only — no `end` event and no focus
+   * move, because the load did not actually complete.
+   *
+   * The load is abandoned rather than paused, so the flag and any finish the floor
+   * still holds drop along with the hooks. A kept finish would surface after the
+   * rewind as exactly the three things this pass exists to avoid — an `end`, a
+   * completion announcement, and a focus move — and a kept flag would leave the
+   * next fetch on a page that survives a cancelled visit skipping the loading
+   * state, its idempotence guard already satisfied.
+   */
+  #rewindForCache() {
+    if (!this.#loading) return;
+    this.#loading = false;
+    this.#floor.cancel();
+    this.#rewindHooks();
+  }
+  /**
+   * Clears every hook the loading state writes. Shared by the three ways a load can
+   * stop — completion, detach, snapshot — so none of them can drift into tidying
+   * only part of it.
+   */
+  #rewindHooks() {
+    this.element.removeAttribute("aria-busy");
+    this.element.removeAttribute("data-frame-loading");
+    if (this.#revealedSkeleton) this.#revealedSkeleton.hidden = true;
+    if (this.#revealedOverlay) this.#revealedOverlay.hidden = true;
+    this.#revealedSkeleton = null;
+    this.#revealedOverlay = null;
+    this.#clearInert();
+  }
+  /**
+   * Re-shows a `skeleton` that arrived mid-load. Turbo's frame renderer empties the
+   * frame and re-inserts the response's children, so a response's authored (hidden)
+   * skeleton can land while a later fetch is still running, and only the controller
+   * knows the frame is still busy.
+   */
+  skeletonTargetConnected() {
+    if (this.#loading) this.#revealSkeleton();
+  }
+  /** Re-shows an `overlay` that arrived mid-load — the same swap as the skeleton. */
+  overlayTargetConnected() {
+    if (this.#loading) this.#revealOverlay();
+  }
+  /**
+   * Re-blocks a `content` that arrived mid-load, so the stale copy stays unusable.
+   * The element that left is released first and ownership is then decided afresh, so
+   * an `inert` the replacement authored stays the consumer's.
+   */
+  contentTargetConnected() {
+    if (!this.#loading) return;
+    this.#clearInert();
+    this.#applyInert();
+  }
+  /** Reveals the optional `skeleton`, noting it as this controller's to hide again. */
+  #revealSkeleton() {
+    if (!this.hasSkeletonTarget) return;
+    this.#revealedSkeleton = this.skeletonTarget;
+    this.skeletonTarget.hidden = false;
+  }
+  /** Reveals the optional `overlay`, noting it as this controller's to hide again. */
+  #revealOverlay() {
+    if (!this.hasOverlayTarget) return;
+    this.#revealedOverlay = this.overlayTarget;
+    this.overlayTarget.hidden = false;
+  }
   /** Enters the loading state: hooks, skeleton/overlay, inert content, focus retreat. */
   #begin() {
     this.#loading = true;
-    this.#startedAt = Date.now();
+    this.#floor.begin();
     this.element.setAttribute("aria-busy", "true");
     this.element.setAttribute("data-frame-loading", "true");
-    if (this.hasSkeletonTarget) this.skeletonTarget.hidden = false;
-    if (this.hasOverlayTarget) this.overlayTarget.hidden = false;
+    this.#revealSkeleton();
+    this.#revealOverlay();
     this.#applyInert();
     this.#retreatFocus();
     this.dispatch("start", { detail: {} });
+    announce(fillTemplate(this.announceTextValue, {}));
   }
   /** Leaves the loading state: restore hooks, hide skeleton/overlay, restore focus. */
   #finish() {
     this.#loading = false;
-    this.element.removeAttribute("aria-busy");
-    this.element.removeAttribute("data-frame-loading");
-    if (this.hasSkeletonTarget) this.skeletonTarget.hidden = true;
-    if (this.hasOverlayTarget) this.overlayTarget.hidden = true;
-    this.#clearInert();
+    this.#rewindHooks();
     this.#restoreFocus();
     this.dispatch("end", { detail: {} });
+    announce(fillTemplate(this.announceReadyTextValue, {}));
   }
   /** Marks the content inert to block double-submits while stale (if we own it). */
   #applyInert() {
     if (!this.hasContentTarget || this.contentTarget.hasAttribute("inert")) return;
     this.contentTarget.setAttribute("inert", "");
-    this.#inertApplied = true;
+    this.#inertTarget = this.contentTarget;
   }
   #clearInert() {
-    if (!this.#inertApplied) return;
-    this.#inertApplied = false;
-    if (this.hasContentTarget) this.contentTarget.removeAttribute("inert");
+    this.#inertTarget?.removeAttribute("inert");
+    this.#inertTarget = null;
   }
   /** Saves and blurs focus if it sits inside the frame about to go stale. */
   #retreatFocus() {

data/dist/controllers/highlight_controller.js

@@ -61,6 +61,7 @@ var SafeTimeout = class extends TimerRegistry {
 };
 
 // src/controllers/highlight_controller.ts
+var hookOwners = /* @__PURE__ */ new WeakMap();
 var HighlightController = class extends Controller {
   static values = {
     duration: { type: Number, default: 1500 },
@@ -68,9 +69,18 @@ var HighlightController = class extends Controller {
   };
   static events = ["start", "end"];
   #timeouts = new SafeTimeout();
+  /**
+   * The removal timer this connection has outstanding for an element. Held weakly so
+   * a row that leaves the DOM is not retained, and dropped wholesale on `disconnect()`
+   * so a cleared id can never be matched against a recycled one. Which connection owns
+   * an element's hook is answered by the shared owner registry above.
+   */
+  #pending = /* @__PURE__ */ new WeakMap();
   #observer = null;
   connect() {
+    this.#clearArrivedHook(this.element);
     if (this.observeValue) {
+      for (const child of this.element.children) this.#clearArrivedHook(child);
       if (typeof MutationObserver !== "undefined") {
         this.#observer = new MutationObserver((mutations) => this.#onMutations(mutations));
         this.#observer.observe(this.element, { childList: true });
@@ -83,6 +93,12 @@ var HighlightController = class extends Controller {
     this.#observer?.disconnect();
     this.#observer = null;
     this.#timeouts.clearAll();
+    this.#pending = /* @__PURE__ */ new WeakMap();
+  }
+  /** Drops a hook that arrived with the DOM, along with this connection's claim on it. */
+  #clearArrivedHook(el) {
+    if (hookOwners.get(el) === this) hookOwners.delete(el);
+    el.removeAttribute("data-highlight");
   }
   /** Highlights every element child added by a childList mutation. */
   #onMutations(mutations) {
@@ -95,12 +111,33 @@ var HighlightController = class extends Controller {
   /** Flags `el` with `data-highlight` and schedules its removal (unless reduced-motion). */
   #highlight(el) {
     if (prefersReducedMotion()) return;
+    this.#releasePending(el);
     el.setAttribute("data-highlight", "true");
     this.dispatch("start", { target: el, detail: { element: el } });
-    this.#timeouts.set(() => {
+    const id = this.#timeouts.set(() => {
+      this.#pending.delete(el);
+      hookOwners.delete(el);
       el.removeAttribute("data-highlight");
       this.dispatch("end", { target: el, detail: { element: el } });
     }, this.durationValue);
+    this.#pending.set(el, id);
+    hookOwners.set(el, this);
+  }
+  /**
+   * Releases whichever removal timer holds `el`'s hook. The row may have been
+   * highlighted inside a different watched container before it moved here, and that
+   * container's timer is reachable only through the shared owner registry.
+   */
+  #releasePending(el) {
+    const owner = hookOwners.get(el);
+    if (owner !== void 0 && owner !== this) owner.#cancelPending(el);
+    this.#cancelPending(el);
+  }
+  /** Releases `el`'s pending removal timer, if it has one. */
+  #cancelPending(el) {
+    this.#timeouts.clear(this.#pending.get(el) ?? -1);
+    this.#pending.delete(el);
+    hookOwners.delete(el);
   }
 };
 

data/dist/controllers/idle_controller.js

@@ -71,6 +71,12 @@ var IdleController = class extends Controller {
   #prompted = false;
   /** Timestamp of the last activity; the timers self-reschedule against it. */
   #lastActivity = 0;
+  /**
+   * Activity types actually registered on `document`, so `disconnect()` unbinds the
+   * same set even when `events` changed while connected (a Turbo morph can rewrite
+   * the Value in place, and the removal must match the registration, not the Value).
+   */
+  #boundEvents = [];
   #onActivity = () => {
     this.#lastActivity = Date.now();
     if (this.#idle || this.#prompted) {
@@ -85,16 +91,21 @@ var IdleController = class extends Controller {
     if (document.visibilityState === "visible") this.#onActivity();
   };
   connect() {
-    for (const type of this.eventsValue) {
+    this.#idle = false;
+    this.#prompted = false;
+    this.element.removeAttribute("data-idle");
+    this.#boundEvents = [...this.eventsValue];
+    for (const type of this.#boundEvents) {
       document.addEventListener(type, this.#onActivity, { passive: true, capture: true });
     }
     document.addEventListener("visibilitychange", this.#onVisibility);
     this.#arm();
   }
   disconnect() {
-    for (const type of this.eventsValue) {
+    for (const type of this.#boundEvents) {
       document.removeEventListener(type, this.#onActivity, { capture: true });
     }
+    this.#boundEvents = [];
     document.removeEventListener("visibilitychange", this.#onVisibility);
     this.#timeouts.clearAll();
   }

data/dist/controllers/local_time_controller.js

@@ -1,5 +1,40 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/local_time_controller.ts
+
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  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();
+    });
+  }
+};
+
 // src/controllers/local_time_controller.ts
 var STYLES = /* @__PURE__ */ new Set(["full", "long", "medium", "short"]);
 function toStyle(value) {
@@ -14,7 +49,55 @@ var LocalTimeController = class extends Controller {
     titleFormat: { type: String, default: "" }
   };
   static events = ["format"];
+  /** Collapses a morph that swaps several render inputs at once into one repaint. */
+  #resync = new MicrotaskCoalescer(() => this.#render());
+  /**
+   * Watches the one render input that is not a Value. Only `datetime` is filtered
+   * in, so the text and `title` this controller writes cannot re-enter the pass.
+   */
+  #datetimeWatch = new MutationObserver(() => {
+    this.#resync.schedule();
+  });
   connect() {
+    this.#resync.activate();
+    this.#datetimeWatch.observe(this.element, { attributeFilter: ["datetime"] });
+    this.#render();
+  }
+  disconnect() {
+    this.#resync.cancel();
+    this.#datetimeWatch.disconnect();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `locale` at runtime. */
+  localeValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `timeZone` at runtime. */
+  timeZoneValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `dateStyle` at runtime. */
+  dateStyleValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `timeStyle` at runtime. */
+  timeStyleValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `titleFormat` at runtime. */
+  titleFormatValueChanged() {
+    this.#resync.schedule();
+  }
+  /**
+   * Formats the instant in `datetime` against the current Values and writes it out.
+   *
+   * The `format` event rides with every pass, including a repaint a morph triggers:
+   * its condition is that formatting was applied, and a repaint applies it with a
+   * new result. A pass that cannot format writes nothing and emits nothing, so the
+   * authored absolute text stays as the fallback.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
     const date = this.#parse();
     if (date === null) return;
     const formatted = this.#applyFormat(date, this.dateStyleValue, this.timeStyleValue);
@@ -24,7 +107,10 @@ var LocalTimeController = class extends Controller {
     if (title !== null) this.element.setAttribute("title", title);
     this.dispatch("format", { detail: { formatted } });
   }
-  /** Parses the UTC `datetime` attribute into a {@link Date}, or `null`. */
+  /**
+   * Parses the UTC `datetime` attribute into a {@link Date}, or `null`. Whitespace
+   * around the attribute value is tolerated.
+   */
   #parse() {
     const raw = this.element.getAttribute("datetime");
     if (!raw) return null;
@@ -37,11 +123,21 @@ var LocalTimeController = class extends Controller {
    * the *runtime's* local zone, contradicting "the server emits UTC". Values that
    * already carry `Z` or a `±hh:mm` offset (and bare `YYYY-MM-DD` dates, already
    * parsed as UTC) are returned unchanged.
+   *
+   * HTML accepts a space where ISO 8601 wants `T`, and `Date.parse` of that form is
+   * left to each engine, so a whole value shaped that way is normalized to the `T`
+   * separator first. The pattern is anchored: a value trailing anything else — a
+   * zone word such as `"2026-06-08 12:30:00 UTC"` — is handed to `Date.parse` as
+   * authored instead of being turned into a string nothing can parse.
    */
   #asUtc(value) {
-    const hasTime = /T\d{2}:\d{2}/.test(value);
-    const hasZone = /(Z|[+-]\d{2}:?\d{2})$/.test(value);
-    return hasTime && !hasZone ? `${value}Z` : value;
+    const isoLike = value.replace(
+      /^(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?)$/,
+      "$1T$2"
+    );
+    const hasTime = /T\d{2}:\d{2}/.test(isoLike);
+    const hasZone = /(Z|[+-]\d{2}:?\d{2})$/.test(isoLike);
+    return hasTime && !hasZone ? `${isoLike}Z` : isoLike;
   }
   /**
    * Builds the optional detailed `title`. `titleFormat` is an `Intl` style
@@ -70,9 +166,9 @@ var LocalTimeController = class extends Controller {
       return null;
     }
   }
-  /** Locale precedence: the value, then the element's `lang`, then the document's. */
+  /** Locale precedence: the value, then the nearest `lang` up the ancestor chain. */
   get #locale() {
-    return this.localeValue || this.element.lang || document.documentElement.lang || void 0;
+    return this.localeValue || this.element.closest("[lang]")?.getAttribute("lang") || void 0;
   }
 };
 

data/dist/controllers/masonry_controller.js

@@ -59,7 +59,7 @@ var LayoutObserver = class {
 };
 
 // src/controllers/masonry_controller.ts
-var COLUMNS_PROPERTY = "--stimeo-masonry-columns";
+var COLUMNS_PROPERTY = "--stimeo--masonry-columns";
 var MasonryController = class extends Controller {
   static targets = ["item"];
   static values = {