stimeo-ui 0.3.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc8f7abf12a14555f6b1182d81844594d3bf86c772f115338d931e15eb35a43e
-  data.tar.gz: fee179d507f73e693b718e8563e3239d7a3fcad20d42d6db4624bdcbdf2a353c
+  metadata.gz: a78d7192424e66f85cd4fbc901f75f260178f890fbcf040724fd5e518314dda7
+  data.tar.gz: d14ba0559fd6659b4b1edc860c653815bb949439768f26e3540cb758dabee2f7
 SHA512:
-  metadata.gz: e68c6fd65748f2e637ddd8bd77364f74f4336549fdd2bb47803d5bd0e300c7838c0037850154d040f32aadb7ccab53879dc754acf8bbe99430ddedeb3b102b8f
-  data.tar.gz: 833febb4eb631e61d0d700e56a13cfb38fa59465757a4d0c5f9430a8f87967ef9a8cc993e3272922b4794ec88b9ab38c8244a1c7614a904cc1d539bc40cd3e81
+  metadata.gz: e02be89ae227eec783f0eb7f21c492a00ff75174c5285de3d8cf8418b3a826b6d9fb42d779b63a47845b77679d4b61adcade253746cf39ea83d7c924651f8a8e
+  data.tar.gz: 7661666a77da707d43ad07bf9e7bb4a8b0cb63caea75f2d0d8abf9f43fd6b43421bfe8d24203f814e70042a506177995df72e14487c4c11aa49016129bd44f02

data/CHANGELOG.md

@@ -7,6 +7,128 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 While the version is `0.x`, the public API (the `stimeo--*` data attributes) may
 change between releases.
 
+## [0.5.0] - 2026-08-13
+
+### Changed
+
+- **Breaking** — every CSS custom property the library writes now carries the
+  `--stimeo--` namespace (two hyphens). Rename them in your stylesheets: a name
+  you miss raises no error, it just falls back to `var()`'s default and the bar
+  or thumb stops moving.
+  - `--stimeo-range-start` / `--stimeo-range-end` →
+    `--stimeo--range-slider-start` / `--stimeo--range-slider-end`
+  - `--stimeo-<name>` → `--stimeo--<name>` for `aspect-ratio`,
+    `collapsible-content-height`, `color`, `context-menu-x`, `context-menu-y`,
+    `masonry-columns`, `meter-ratio`, `password-strength`, `progress-ratio`,
+    `scroll-progress`, `step-indicator-ratio`, `textarea-rows`,
+    `upload-progress`
+- **Breaking** — spinner's `indicator`, the network-status banners, and
+  countdown's `status` slot are no longer live regions. Drop `role="status"` /
+  `role="alert"` / `aria-live` from them and set `announceText` (and its
+  siblings) with a `stimeo--announcer` on the page; keeping the role reads the
+  change twice.
+- time-picker: committing a field change dispatches a native `change` from the
+  `field` target, and `stimeo--time-picker:change` reports the composed value
+  even when no `field` target is present.
+- tree-view: more native elements count as nested-interactive (`label`,
+  `summary`, `details`, `area[href]`, media with `controls`, `iframe`, `object`,
+  `embed`), so a click or key inside one is left alone instead of moving the
+  tree selection.
+
+### Added
+
+- Inspector: the manifest advances from schema v8 to **v11** — tools that read it
+  raw must accept the new `valueConstraints`, `hosts`, and `valueRelations`
+  fields. Two diagnostics are new, so **re-run `stimeo check` before deploying;
+  it can report errors on views that passed under 0.4.0**:
+  - `invalid-value` — slider, range-slider, and number-input need a finite,
+    positive `step`; range-slider needs finite `min`, `max`, `start`, and `end`
+    with `min` at or below `max`.
+  - `invalid-host` — switch, time-picker, and tree-view report an unsupported
+    host element before it reaches the browser.
+
+### Fixed
+
+- range-slider: two thumbs resting on the same value can be pulled apart with
+  the pointer again, and invalid or reversed bounds fall back to a finite
+  ordered range.
+- slider, range-slider, number-input: an endpoint that does not sit on the step
+  grid is reachable, and an invalid `step` falls back to `1`.
+- slider, range-slider: a Turbo morph that swaps a value repaints instead of
+  freezing, a replaced thumb or track picks up the current state, and a drag
+  stays with the pointer that started it.
+- switch: holding Space no longer scrolls a non-`<button>` host, and an ancestor
+  `fieldset[disabled]` or `aria-disabled` blocks activation.
+- flash: hover and focus pause the auto-dismiss independently, a flash paused
+  after its deadline dismisses instead of staying forever, a second dismiss on a
+  leaving flash is ignored, and a replaced `region` target is picked up.
+- frame-loading: `aria-busy`, the skeleton, and `inert` are rolled back when the
+  controller is detached, instead of burning in with nothing left to finish the
+  load.
+- empty-state: a replaced `list` or `empty` element and a runtime `itemSelector`
+  change are followed, so the placeholder no longer sticks beside a filled list.
+- highlight: a highlight that outlives a Turbo navigation is cleaned up on the
+  way back instead of staying marked.
+- idle: `data-idle` is cleared when a new measurement cycle connects, and
+  `disconnect()` removes the listeners it actually registered even when `events`
+  changed while connected.
+- skeleton: a skeleton moved within the page keeps its ready intent.
+
+## [0.4.0] - 2026-08-11
+
+The feedback and status components announce through the shared
+`stimeo--announcer` and survive Turbo caching and morphs. The Inspector reads the
+`data:` hashes Rails helpers render. Two public API entries were removed.
+
+### Removed
+
+- **Breaking** — sidebar: the `beforeCache` action. Delete
+  `data-action="turbo:before-cache@document->stimeo--sidebar#beforeCache"`; the
+  behavior is built in, and leaving it makes `stimeo check` report an unknown
+  action.
+- **Breaking** — empty-state: the `announce` boolean, and the `role="status"` /
+  `aria-live="polite"` it applied to the `empty` target. Use `announceText` /
+  `announceFilledText` instead.
+
+### Added
+
+- countdown, empty-state, frame-loading, meter, network-status, progress,
+  skeleton, spinner: `announceText`, plus `announceFilledText` /
+  `announceOnlineText` / `announceReadyText` where a component has two
+  transitions to report. Wording is yours and defaults to empty, and the page
+  needs a `stimeo--announcer` for any of it to be read.
+- spinner: `timeout`, with a `stimeo--spinner:timeout` event. Off by default.
+- stick-to-bottom: `pinOnConnect`. Off by default.
+- Inspector: Stimulus wiring in a Rails helper's literal `data:` hash is checked
+  like static attributes. Re-run `stimeo check` — it can report new diagnostics.
+
+### Changed
+
+- meter, progress: an `aria-valuetext` you authored is preserved across renders.
+- local-time, relative-time: the locale falls back to the nearest ancestor
+  carrying `lang`, not just the element's own and then the document's.
+- countdown: `data-state` is the source of truth for the run state; `autostart`
+  governs only markup that states none.
+
+### Fixed
+
+- Turbo caching and morphs across announcer, color-picker, countdown,
+  date-range-picker, frame-loading, local-time, meter, overflow-menu, progress,
+  range-slider, rating, relative-time, sidebar, spinner, step-indicator: the
+  page is rewound before the snapshot and repaints when values are swapped,
+  instead of restoring stuck state or leaving a stale reading.
+- network-status: transitions are actually announced.
+- countdown: resume steps by one unit, and a settled timer no longer re-emits
+  `complete` on reconnect.
+- step-indicator: runtime step changes re-derive the set, and a non-numeric
+  `current` falls back to the first step.
+- local-time: a `datetime` with a space separator (`2026-06-08 12:30`) parses.
+- relative-time: a malformed `locale` no longer throws.
+- skeleton, frame-loading: a repeated signal no longer restarts or stacks the
+  minimum-duration wait.
+- Empty, inverted, and non-numeric ranges floor to `0` across meter, progress,
+  slider, and range-slider.
+
 ## [0.3.0] - 2026-08-09
 
 Minor release focused on consistent keyboard and selection behavior, resilient
@@ -336,6 +458,8 @@ Initial public alpha: 101 behavior-only, accessible Stimulus controllers driven
 by `data-*` attributes, shipping no CSS. Published to npm (with provenance) and
 RubyGems.
 
+[0.5.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.5.0
+[0.4.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.4.0
 [0.3.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.3.0
 [0.2.1]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.2.1
 [0.2.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.2.0

data/dist/controllers/alert_dialog_controller.js

@@ -2,6 +2,35 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/alert_dialog_controller.ts
 
+// 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/escape_layer.ts
 var EscapeLayer = class _EscapeLayer {
   static #registries = /* @__PURE__ */ new WeakMap();
@@ -135,7 +164,7 @@ var FocusTrap = class {
     }
     if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
     document.addEventListener("keydown", this.#onKeydown);
-    document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.activate();
     const onEscape = this.#options.onEscape;
     if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
     if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
@@ -152,7 +181,7 @@ var FocusTrap = class {
     this.#activeState = false;
     this.#escapeLayer.deactivate();
     document.removeEventListener("keydown", this.#onKeydown);
-    document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.deactivate();
     if (this.#scrollLocked) {
       document.body.style.overflow = this.#previousBodyOverflow;
       this.#scrollLocked = false;
@@ -176,9 +205,7 @@ var FocusTrap = class {
    * untouched (restore-open designs reopen against a clean baseline), and focus
    * is left alone mid-navigation. The listener lives only while active.
    */
-  #onBeforeCache = () => {
-    this.deactivate({ restoreFocus: false });
-  };
+  #beforeCache = new BeforeCacheReset(() => this.deactivate({ restoreFocus: false }));
   /**
    * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
    * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of

data/dist/controllers/announcer_controller.js

@@ -2,6 +2,68 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/announcer_controller.ts
 
+// 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/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/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -56,6 +118,7 @@ var SafeTimeout = class extends TimerRegistry {
 };
 
 // src/controllers/announcer_controller.ts
+var LEVELS = ["polite", "assertive"];
 var AnnouncerController = class extends Controller {
   static targets = ["polite", "assertive"];
   static values = {
@@ -67,6 +130,30 @@ var AnnouncerController = class extends Controller {
   #timers = new SafeTimeout();
   /** Live regions generated to stand in for absent targets, for teardown. */
   #generated = /* @__PURE__ */ new Map();
+  /** Messages waiting to be written, oldest first, one queue per politeness. */
+  #queues = /* @__PURE__ */ new Map();
+  /** Politeness levels whose next drain is already armed. */
+  #draining = /* @__PURE__ */ new Set();
+  /** Collapses a batch of target callbacks (and morph removals) into one pass. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileRegions());
+  /**
+   * Watches the host's own children for a generated region disappearing. A morph
+   * drops it — the server's HTML never had it — and no target callback reports
+   * that, because a generated region carries no target attribute. `subtree` stays
+   * off so writing a message inside a region does not re-enter this pass.
+   */
+  #hostWatch = new MutationObserver(() => {
+    this.#reconcile.schedule();
+  });
+  /** Rewinds to an announceable initial state for the snapshot; see the remarks. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  /**
+   * The one timer a region may have outstanding — its dedupe re-set, then its
+   * auto-clear. Held weakly so a swapped-out target is not retained; a leftover
+   * id is harmless because {@link SafeTimeout.clear} no-ops on an id it does not
+   * own.
+   */
+  #pending = /* @__PURE__ */ new WeakMap();
   /**
    * Guards against handling the same CustomEvent twice. An event dispatched on
    * the controller element with `bubbles: true` reaches both the element and the
@@ -83,13 +170,86 @@ var AnnouncerController = class extends Controller {
     this.#announce(message, this.#assertiveFromDetail(detail));
   };
   connect() {
+    this.#reconcile.activate();
+    this.#beforeCache.activate();
+    this.#reconcileRegions();
+    this.#hostWatch.observe(this.element, { childList: true });
     this.element.addEventListener("stimeo--announcer:announce", this.#onAnnounceEvent);
     window.addEventListener("stimeo--announcer:announce", this.#onAnnounceEvent);
   }
   disconnect() {
+    this.#reconcile.cancel();
+    this.#hostWatch.disconnect();
+    this.#beforeCache.deactivate();
     this.element.removeEventListener("stimeo--announcer:announce", this.#onAnnounceEvent);
     window.removeEventListener("stimeo--announcer:announce", this.#onAnnounceEvent);
     this.#timers.clearAll();
+    this.#queues.clear();
+    this.#draining.clear();
+    this.#removeGenerated();
+  }
+  /** Retires the stand-in once the consumer supplies a polite region. */
+  politeTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Materialises a stand-in once the consumer's polite region goes away. */
+  politeTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Retires the stand-in once the consumer supplies an assertive region. */
+  assertiveTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Materialises a stand-in once the consumer's assertive region goes away. */
+  assertiveTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /**
+   * Brings the region set back to exactly one region per politeness and reports
+   * whether anything had to be created.
+   *
+   * A region created here is not written to in the same task: assistive tech
+   * reports changes to regions it already knows about, so {@link drain} waits a
+   * task whenever this says a region is new.
+   */
+  #reconcileRegions() {
+    let created = false;
+    for (const level of LEVELS) {
+      if (this.#hasTargetFor(level)) {
+        const generated = this.#generated.get(level);
+        if (generated) {
+          generated.remove();
+          this.#generated.delete(level);
+        }
+        continue;
+      }
+      const existing = this.#generated.get(level);
+      if (existing?.isConnected) continue;
+      this.#generated.set(level, this.#createRegion(level));
+      created = true;
+    }
+    return created;
+  }
+  /** Whether the consumer supplied a target for `level`. */
+  #hasTargetFor(level) {
+    return level === "assertive" ? this.hasAssertiveTarget : this.hasPoliteTarget;
+  }
+  /** Builds a visually hidden live region for `level` and attaches it. */
+  #createRegion(level) {
+    const region = document.createElement("div");
+    region.setAttribute("aria-live", level);
+    region.setAttribute("aria-atomic", "true");
+    visuallyHide(region);
+    this.element.appendChild(region);
+    return region;
+  }
+  /**
+   * Removes and forgets every region this controller generated. Authored targets
+   * belong to the consumer and are left untouched. Forgetting them is what keeps
+   * the live page working after a snapshot rewind: the next announcement finds an
+   * empty map and materialises a fresh region.
+   */
+  #removeGenerated() {
     for (const region of this.#generated.values()) {
       region.remove();
     }
@@ -111,47 +271,122 @@ var AnnouncerController = class extends Controller {
     this.#announce(message, assertive);
   }
   /**
-   * Writes `message` into the matching live region and schedules its clear.
+   * Queues `message` for its politeness and arms the drain.
    *
-   * When the region already holds the same text, an aria-atomic region is not
-   * re-read by assistive tech (the node did not change). If `dedupeReannounce`
-   * is on, the text is cleared and re-set on a later task so the mutation is
-   * observed and announced again.
+   * Queuing is what makes a burst audible: assistive tech announces the changes it
+   * observes, so several messages written into one region within a single task are
+   * one change and only the last is read.
    */
   #announce(message, assertive) {
-    const region = this.#regionFor(assertive ? "assertive" : "polite");
+    const level = assertive ? "assertive" : "polite";
+    const queue = this.#queues.get(level);
+    if (queue) {
+      queue.push(message);
+    } else {
+      this.#queues.set(level, [message]);
+    }
+    this.#scheduleDrain(level);
+  }
+  /** Arms one drain pass for `level`; further messages ride the pass already armed. */
+  #scheduleDrain(level) {
+    if (this.#draining.has(level)) return;
+    this.#draining.add(level);
+    this.#timers.set(() => {
+      this.#draining.delete(level);
+      this.#drain(level);
+    }, 0);
+  }
+  /**
+   * Writes one queued message, then arms the next pass while the queue holds more.
+   *
+   * Two steps take a whole pass without consuming the message: materialising a
+   * region (it has to be in the accessibility tree before the text arrives) and
+   * emptying a region that already holds this exact text (an unchanged node is not
+   * re-read, so `dedupeReannounce` clears first and writes on the following pass).
+   */
+  #drain(level) {
+    const queue = this.#queues.get(level);
+    const message = queue?.[0];
+    if (queue === void 0 || message === void 0) return;
+    if (this.#reconcileRegions()) {
+      this.#scheduleDrain(level);
+      return;
+    }
+    const region = this.#regionFor(level);
     if (this.dedupeReannounceValue && region.textContent === message) {
+      this.#cancelPending(region);
       region.textContent = "";
-      this.#timers.set(() => {
-        region.textContent = message;
-        this.#scheduleClear(region, message);
-      }, 0);
+      this.#scheduleDrain(level);
       return;
     }
+    queue.shift();
+    this.#cancelPending(region);
     region.textContent = message;
     this.#scheduleClear(region, message);
+    if (queue.length > 0) this.#scheduleDrain(level);
   }
   /** Clears the region after `clearAfter` ms, unless a newer message replaced it. */
   #scheduleClear(region, message) {
     if (this.clearAfterValue <= 0) return;
-    this.#timers.set(() => {
-      if (region.textContent === message) region.textContent = "";
-    }, this.clearAfterValue);
+    this.#schedule(
+      region,
+      () => {
+        if (region.textContent === message) region.textContent = "";
+      },
+      this.clearAfterValue
+    );
   }
-  /** Resolves the live region for a politeness level, generating it if absent. */
+  /**
+   * Arms `region`'s single pending timer. Callers reach here with the slot
+   * already free — `#announce` releases it, and a fired timer clears its own
+   * entry below — so this does not cancel again.
+   */
+  #schedule(region, callback, delay) {
+    const id = this.#timers.set(() => {
+      this.#pending.delete(region);
+      callback();
+    }, delay);
+    this.#pending.set(region, id);
+  }
+  /** Releases `region`'s pending timer, if it has one. */
+  #cancelPending(region) {
+    this.#timers.clear(this.#pending.get(region) ?? -1);
+    this.#pending.delete(region);
+  }
+  /**
+   * Resolves the live region for a politeness level.
+   *
+   * The remembered stand-in is used only while it is still in the document: a morph
+   * can drop it, and writing into the detached node would announce nothing at all.
+   */
   #regionFor(level) {
     if (level === "assertive" && this.hasAssertiveTarget) return this.assertiveTarget;
     if (level === "polite" && this.hasPoliteTarget) return this.politeTarget;
     const existing = this.#generated.get(level);
-    if (existing) return existing;
-    const region = document.createElement("div");
-    region.setAttribute("aria-live", level);
-    region.setAttribute("aria-atomic", "true");
-    visuallyHide(region);
-    this.element.appendChild(region);
+    if (existing?.isConnected) return existing;
+    const region = this.#createRegion(level);
     this.#generated.set(level, region);
     return region;
   }
+  /**
+   * Restores the announceable initial state for the snapshot Turbo is about to
+   * take: queued and displayed messages go, generated regions go, and the live
+   * page — which keeps running when a visit is aborted — gets its regions back on
+   * the next task, after the clone.
+   */
+  #rewindForCache() {
+    this.#queues.clear();
+    this.#draining.clear();
+    this.#timers.clearAll();
+    for (const level of LEVELS) {
+      if (this.#hasTargetFor(level)) {
+        const target = level === "assertive" ? this.assertiveTarget : this.politeTarget;
+        target.textContent = "";
+      }
+    }
+    this.#removeGenerated();
+    this.#timers.set(() => this.#reconcileRegions(), 0);
+  }
   /** Extracts a non-empty string `message` from a CustomEvent detail, else null. */
   #messageFromDetail(detail) {
     if (detail && typeof detail === "object" && "message" in detail) {

data/dist/controllers/aspect_ratio_controller.js

@@ -8,7 +8,7 @@ var AspectRatioController = class extends Controller {
   };
   /** Applies the ratio on connect and whenever the value changes. */
   ratioValueChanged() {
-    this.element.style.setProperty("--stimeo-aspect-ratio", this.#normalizeRatio(this.ratioValue));
+    this.element.style.setProperty("--stimeo--aspect-ratio", this.#normalizeRatio(this.ratioValue));
   }
   /**
    * Normalizes a ratio string to a valid CSS `<ratio>`:

data/dist/controllers/breadcrumb_controller.js

@@ -287,7 +287,11 @@ var BreadcrumbController = class extends Controller {
     this.ellipsisTarget.hidden = true;
     return this.listTarget.scrollWidth > this.listTarget.clientWidth + OVERFLOW_EPSILON;
   }
-  /** Applies the collapsed/expanded state to the items, ellipsis, and trigger. */
+  /**
+   * Applies the collapsed/expanded state to the items, ellipsis, and trigger.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const collapsed = this.#overflowing && !this.#expanded;
     const showEllipsis = this.#overflowing && this.collapsibleTargets.length > 0;

data/dist/controllers/carousel_controller.js

@@ -271,7 +271,11 @@ var CarouselController = class extends Controller {
     this.#syncTimer();
     if (changed) this.dispatch("change", { detail: { index, total: this.slideTargets.length } });
   }
-  /** Reflects `this.#index` onto slides and pickers (state hooks + roving). */
+  /**
+   * Reflects `this.#index` onto slides and pickers (state hooks + roving).
+   *
+   * @stimeoRenderRoot
+   */
   #render({ focus }) {
     this.slideTargets.forEach((slide, i) => {
       const active = i === this.#index;

data/dist/controllers/clipboard_controller.js

@@ -2,6 +2,13 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/clipboard_controller.ts
 
+// src/utils/default_attribute.ts
+function setDefaultAttribute(element, name, value) {
+  if (element.hasAttribute(name)) return false;
+  element.setAttribute(name, value);
+  return true;
+}
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -75,9 +82,7 @@ var ClipboardController = class extends Controller {
    */
   #resetTimerId = null;
   connect() {
-    if (!this.element.hasAttribute("data-state")) {
-      this.element.setAttribute("data-state", "idle");
-    }
+    setDefaultAttribute(this.element, "data-state", "idle");
   }
   disconnect() {
     this.#timers.clearAll();

data/dist/controllers/collapsible_controller.js

@@ -297,7 +297,10 @@ var CollapsibleController = class extends Controller {
   #applyContent(content, open, waitForCloseTransition) {
     if (open) {
       content.hidden = false;
-      content.style.setProperty("--stimeo-collapsible-content-height", `${content.scrollHeight}px`);
+      content.style.setProperty(
+        "--stimeo--collapsible-content-height",
+        `${content.scrollHeight}px`
+      );
       content.setAttribute("data-state", "open");
       return;
     }