stimeo-ui 0.3.0 → 0.5.0

data/dist/controllers/overflow_menu_controller.js

@@ -2,6 +2,35 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/overflow_menu_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/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
@@ -161,7 +190,7 @@ var INDEX = "data-stimeo--overflow-menu-index";
 var BOUNDARY = "data-stimeo--overflow-menu-boundary";
 var SAVED_ROLE = "data-stimeo--overflow-menu-role";
 var SAVED_TABINDEX = "data-stimeo--overflow-menu-tabindex";
-var SAVED_MENU_TARGET = "data-stimeo--overflow-menu-menu-target";
+var SAVED_MENU_TARGET = "data-stimeo--overflow-menu-saved-menu";
 var MENU_TARGET = "data-stimeo--menu-target";
 var BOOKKEEPING = [BANKED, INDEX, SAVED_ROLE, SAVED_TABINDEX, SAVED_MENU_TARGET];
 var OverflowMenuController = class extends Controller {
@@ -183,17 +212,15 @@ var OverflowMenuController = class extends Controller {
   #lastHidden = null;
   /** The `tabindex` this instance lends the root for the focus fallback. */
   #tabindex = new TabindexLoan();
-  /** Hands Turbo a pristine snapshot: the cache is written after this event. */
-  #onBeforeCache = () => {
-    this.#restoreAll();
-  };
+  /** Hands Turbo a pristine snapshot of the bar, with every item back in place. */
+  #beforeCache = new BeforeCacheReset(() => this.#restoreAll());
   connect() {
     if (!this.hasItemsTarget || !this.hasMoreTarget) return;
     const trigger = this.#trigger();
     if (trigger !== null && this.#isBareTrigger(trigger)) {
       trigger.textContent = this.moreLabelValue;
     }
-    document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.activate();
     this.#layout.observe(this.element);
     this.#layout.observeViewport();
     this.update();
@@ -201,7 +228,7 @@ var OverflowMenuController = class extends Controller {
   disconnect() {
     this.#layout.disconnect();
     this.#timers.clearAll();
-    document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.deactivate();
     this.#restoreAll();
     this.#lastHidden = null;
   }

data/dist/controllers/pagination_controller.js

@@ -132,7 +132,11 @@ var PaginationController = class _PaginationController extends Controller {
     if (!Object.is(page, this.pageValue)) this.pageValue = page;
     this.#render();
   }
-  /** Syncs `aria-current` on the page buttons and the prev/next `disabled` state. */
+  /**
+   * Syncs `aria-current` on the page buttons and the prev/next `disabled` state.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const page = this.#page;
     for (const button of this.pageTargets) {

data/dist/controllers/password_strength_controller.js

@@ -126,7 +126,7 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
     this.#toggle("data-strength", band, band.length > 0);
     this.#toggle("data-below-min", "true", score > 0 && score < this.minScoreValue);
     const ratio = max > 0 ? score / max : 0;
-    this.element.style.setProperty("--stimeo-password-strength", String(ratio));
+    this.element.style.setProperty("--stimeo--password-strength", String(ratio));
   }
   #writeLabel(label) {
     if (this.hasLabelTarget) this.labelTarget.textContent = label;

data/dist/controllers/pointer_drag_controller.js

@@ -12,6 +12,16 @@ function isReservedArrowChord(event, allow = []) {
 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

data/dist/controllers/portal_controller.js

@@ -6,6 +6,16 @@ import { Controller } from '@hotwired/stimulus';
 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

data/dist/controllers/progress_controller.js

@@ -2,6 +2,23 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/progress_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/coerce.ts
 function toFiniteNumber(raw) {
   if (raw === null || raw === void 0 || raw === "") return null;
@@ -9,7 +26,57 @@ function toFiniteNumber(raw) {
   return Number.isFinite(value) ? value : null;
 }
 
+// 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/range.ts
+function rangeFraction(value, min, max) {
+  const span = max - min;
+  if (!(span > 0)) return 0;
+  const clamped = Math.min(max, Math.max(min, value));
+  let fraction;
+  if (Number.isFinite(span)) {
+    fraction = (clamped - min) / span;
+  } else {
+    const scale = Math.max(Math.abs(min), Math.abs(max));
+    fraction = (clamped / scale - min / scale) / (max / scale - min / scale);
+  }
+  if (!Number.isFinite(fraction)) return 0;
+  return Math.min(1, Math.max(0, fraction));
+}
+
 // src/controllers/progress_controller.ts
+var OWNED_VALUE_TEXT = "data-stimeo--progress-owns-valuetext";
 var ProgressController = class extends Controller {
   static targets = ["bar"];
   static values = {
@@ -17,13 +84,27 @@ var ProgressController = class extends Controller {
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
     indeterminate: { type: Boolean, default: false },
-    valueText: { type: String, default: "" }
+    valueText: { type: String, default: "" },
+    announceText: { type: String, default: "" }
   };
   static actions = ["setValue"];
   static events = ["change", "complete"];
+  /**
+   * Collapses a morph that swaps several render inputs at once into one repaint.
+   * A single update usually rewrites the whole set, and each Value would otherwise
+   * repaint on its own.
+   */
+  #repaint = new MicrotaskCoalescer(() => {
+    this.#render();
+  });
   connect() {
+    this.#repaint.activate();
     this.#render();
   }
+  /** Closes the window in which a queued repaint may still run. */
+  disconnect() {
+    this.#repaint.cancel();
+  }
   /**
    * Updates the progress value from an action param (`amount`) or a
    * `detail.value` CustomEvent, normalizes it into range, syncs ARIA, and
@@ -39,11 +120,30 @@ var ProgressController = class extends Controller {
     this.dispatch("change", { detail: { value, ratio: this.#ratio } });
     if (value >= this.maxValue) {
       this.dispatch("complete", { detail: { value } });
+      announce(
+        fillTemplate(this.announceTextValue, { value, percent: Math.round(this.#ratio * 100) })
+      );
     }
   }
-  /** Re-render when the indeterminate flag is toggled via its data attribute. */
+  /** Repaints when application code (or a Turbo morph) changes `indeterminate` at runtime. */
   indeterminateValueChanged() {
-    this.#render();
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `value` at runtime. */
+  valueValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `valueText` at runtime. */
+  valueTextValueChanged() {
+    this.#repaint.schedule();
   }
   /** Clamps `raw` into the configured `[min, max]` range. */
   #clamp(raw) {
@@ -51,40 +151,51 @@ var ProgressController = class extends Controller {
   }
   /** Current fraction of the range in `[0, 1]`; `0` when the range is empty. */
   get #ratio() {
-    const span = this.maxValue - this.minValue;
-    if (span <= 0) return 0;
-    return (this.#clamp(this.valueValue) - this.minValue) / span;
+    return rangeFraction(this.valueValue, this.minValue, this.maxValue);
   }
-  /** Reflects value/range/indeterminate onto ARIA, `data-state`, and the ratio. */
+  /**
+   * Reflects value/range/indeterminate onto ARIA, `data-state`, and the ratio.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     this.element.setAttribute("aria-valuemin", String(this.minValue));
     this.element.setAttribute("aria-valuemax", String(this.maxValue));
     if (this.indeterminateValue) {
       this.element.removeAttribute("aria-valuenow");
-      this.element.removeAttribute("aria-valuetext");
-      this.element.style.removeProperty("--stimeo-progress-ratio");
+      this.#clearOwnValueText();
+      this.element.style.removeProperty("--stimeo--progress-ratio");
       this.element.setAttribute("data-state", "indeterminate");
       return;
     }
     const value = this.#clamp(this.valueValue);
     this.element.setAttribute("aria-valuenow", String(value));
-    this.element.style.setProperty("--stimeo-progress-ratio", String(this.#ratio));
+    this.element.style.setProperty("--stimeo--progress-ratio", String(this.#ratio));
     this.element.setAttribute("data-state", "determinate");
     this.#applyValueText(value);
   }
   /**
    * Sets `aria-valuetext` from the consumer-provided template, substituting
    * `{value}` and `{percent}`. Left to the consumer so the human-readable text
-   * stays i18n-neutral in the library; cleared when no template is given.
+   * stays i18n-neutral in the library. With no template the attribute belongs to
+   * the consumer, so only a text this controller wrote is taken back
+   * ({@link OWNED_VALUE_TEXT}).
    */
   #applyValueText(value) {
     if (this.valueTextValue.length === 0) {
-      this.element.removeAttribute("aria-valuetext");
+      this.#clearOwnValueText();
       return;
     }
     const percent = Math.round(this.#ratio * 100);
     const text = this.valueTextValue.replaceAll("{value}", String(value)).replaceAll("{percent}", String(percent));
     this.element.setAttribute("aria-valuetext", text);
+    this.element.setAttribute(OWNED_VALUE_TEXT, "");
+  }
+  /** Removes `aria-valuetext` only when this controller is the one that wrote it. */
+  #clearOwnValueText() {
+    if (!this.element.hasAttribute(OWNED_VALUE_TEXT)) return;
+    this.element.removeAttribute("aria-valuetext");
+    this.element.removeAttribute(OWNED_VALUE_TEXT);
   }
 };