stimeo-ui 0.2.1 → 0.4.0

package/dist/controllers/local_time_controller.d.ts

@@ -20,9 +20,14 @@ import { Controller } from '@hotwired/stimulus';
  * Behavior only. The machine-readable `datetime` (UTC) is left untouched so
  * assistive tech and crawlers keep the canonical value while only the display
  * text — and an optional `title` — change. Formatting is a pure function of
- * `datetime` with no module-scope state, listeners, or timers, so a Turbo Drive
- * cache restore or morph re-runs `connect()` and stays consistent. A parse or
- * `Intl` error leaves the authored absolute text in place rather than throwing.
+ * `datetime` with no module-scope state or timers, so a Turbo Drive cache restore
+ * re-runs `connect()` and stays consistent. A parse or `Intl` error leaves the
+ * authored absolute text in place rather than throwing.
+ *
+ * Render inputs are followed at runtime: a morph that swaps a Value or the
+ * `datetime` attribute on the live element — which keeps the element, so
+ * `connect()` never runs again — repaints through one coalesced pass
+ * ({@link MicrotaskCoalescer}) rather than leaving a stale reading on screen.
  */
 declare class LocalTimeController extends Controller<HTMLElement> {
     #private;
@@ -55,6 +60,17 @@ declare class LocalTimeController extends Controller<HTMLElement> {
     timeStyleValue: string;
     titleFormatValue: string;
     connect(): void;
+    disconnect(): void;
+    /** Repaints when application code (or a Turbo morph) changes `locale` at runtime. */
+    localeValueChanged(): void;
+    /** Repaints when application code (or a Turbo morph) changes `timeZone` at runtime. */
+    timeZoneValueChanged(): void;
+    /** Repaints when application code (or a Turbo morph) changes `dateStyle` at runtime. */
+    dateStyleValueChanged(): void;
+    /** Repaints when application code (or a Turbo morph) changes `timeStyle` at runtime. */
+    timeStyleValueChanged(): void;
+    /** Repaints when application code (or a Turbo morph) changes `titleFormat` at runtime. */
+    titleFormatValueChanged(): void;
 }
 
 export { LocalTimeController };

package/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,53 @@ 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.
+   */
+  #render() {
     const date = this.#parse();
     if (date === null) return;
     const formatted = this.#applyFormat(date, this.dateStyleValue, this.timeStyleValue);
@@ -24,7 +105,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;
@@ -32,16 +116,26 @@ var LocalTimeController = class extends Controller {
     return Number.isNaN(ms) ? null : new Date(ms);
   }
   /**
-   * Reads a timezone-less date-time as UTC — the documented input contract —
-   * since `Date.parse` would otherwise interpret e.g. `"2026-06-08T12:30:00"` in
+   * Reads a timezone-less date-time as UTC — the input contract of this
+   * controller — since `Date.parse` would otherwise read `"2026-06-08T12:30:00"` in
    * 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 +164,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;
   }
 };
 

package/dist/controllers/local_time_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/controllers/local_time_controller.ts"],"names":[],"mappings":";;;AAMA,IAAM,MAAA,uBAAa,GAAA,CAAmB,CAAC,QAAQ,MAAA,EAAQ,QAAA,EAAU,OAAO,CAAC,CAAA;AAGzE,SAAS,QAAQ,KAAA,EAA0C;AACzD,EAAA,OAAQ,MAAA,CAAuB,GAAA,CAAI,KAAK,CAAA,GAAK,KAAA,GAA0B,MAAA;AACzE;AA0BO,IAAM,mBAAA,GAAN,cAAkC,UAAA,CAAwB;AAAA,EAC/D,OAAgB,MAAA,GAAS;AAAA,IACvB,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,EAAA,EAAG;AAAA,IACpC,QAAA,EAAU,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,EAAA,EAAG;AAAA,IACtC,SAAA,EAAW,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,QAAA,EAAS;AAAA,IAC7C,SAAA,EAAW,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,OAAA,EAAQ;AAAA,IAC5C,WAAA,EAAa,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,EAAA;AAAG,GAC3C;AAAA,EACA,OAAO,MAAA,GAAS,CAAC,QAAQ,CAAA;AAAA,EAQhB,OAAA,GAAgB;AACvB,IAAA,MAAM,IAAA,GAAO,KAAK,MAAA,EAAO;AACzB,IAAA,IAAI,SAAS,IAAA,EAAM;AAEnB,IAAA,MAAM,YAAY,IAAA,CAAK,YAAA,CAAa,MAAM,IAAA,CAAK,cAAA,EAAgB,KAAK,cAAc,CAAA;AAClF,IAAA,IAAI,cAAc,IAAA,EAAM;AAIxB,IAAA,IAAA,CAAK,QAAQ,WAAA,GAAc,SAAA;AAE3B,IAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,MAAA,CAAO,IAAI,CAAA;AAC9B,IAAA,IAAI,UAAU,IAAA,EAAM,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,SAAS,KAAK,CAAA;AAE5D,IAAA,IAAA,CAAK,SAAS,QAAA,EAAU,EAAE,QAAQ,EAAE,SAAA,IAAa,CAAA;AAAA,EACnD;AAAA;AAAA,EAGA,MAAA,GAAsB;AACpB,IAAA,MAAM,GAAA,GAAM,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,UAAU,CAAA;AAChD,IAAA,IAAI,CAAC,KAAK,OAAO,IAAA;AACjB,IAAA,MAAM,EAAA,GAAK,KAAK,KAAA,CAAM,IAAA,CAAK,OAAO,GAAA,CAAI,IAAA,EAAM,CAAC,CAAA;AAC7C,IAAA,OAAO,OAAO,KAAA,CAAM,EAAE,IAAI,IAAA,GAAO,IAAI,KAAK,EAAE,CAAA;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,OAAO,KAAA,EAAuB;AAC5B,IAAA,MAAM,OAAA,GAAU,cAAA,CAAe,IAAA,CAAK,KAAK,CAAA;AACzC,IAAA,MAAM,OAAA,GAAU,uBAAA,CAAwB,IAAA,CAAK,KAAK,CAAA;AAClD,IAAA,OAAO,OAAA,IAAW,CAAC,OAAA,GAAU,CAAA,EAAG,KAAK,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,IAAA,EAA2B;AAChC,IAAA,IAAI,IAAA,CAAK,gBAAA,CAAiB,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAC/C,IAAA,OAAO,KAAK,YAAA,CAAa,IAAA,EAAM,IAAA,CAAK,gBAAA,EAAkB,KAAK,gBAAgB,CAAA;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,YAAA,CAAa,IAAA,EAAY,SAAA,EAAmB,SAAA,EAAkC;AAG5E,IAAA,MAAM,OAAA,GAAsC;AAAA,MAC1C,SAAA,EAAW,QAAQ,SAAS,CAAA;AAAA,MAC5B,SAAA,EAAW,QAAQ,SAAS;AAAA,KAC9B;AACA,IAAA,IAAI,QAAQ,SAAA,KAAc,MAAA,IAAa,OAAA,CAAQ,SAAA,KAAc,QAAW,OAAO,IAAA;AAC/E,IAAA,IAAI,KAAK,aAAA,CAAc,MAAA,GAAS,CAAA,EAAG,OAAA,CAAQ,WAAW,IAAA,CAAK,aAAA;AAE3D,IAAA,IAAI;AACF,MAAA,OAAO,IAAI,KAAK,cAAA,CAAe,IAAA,CAAK,SAAS,OAAO,CAAA,CAAE,OAAO,IAAI,CAAA;AAAA,IACnE,CAAA,CAAA,MAAQ;AAGN,MAAA,OAAO,IAAA;AAAA,IACT;AAAA,EACF;AAAA;AAAA,EAGA,IAAI,OAAA,GAA8B;AAChC,IAAA,OAAO,KAAK,WAAA,IAAe,IAAA,CAAK,QAAQ,IAAA,IAAQ,QAAA,CAAS,gBAAgB,IAAA,IAAQ,MAAA;AAAA,EACnF;AACF","file":"local_time_controller.js","sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\n/** A date/time style keyword accepted by `Intl` `dateStyle` / `timeStyle`. */\ntype DateTimeStyle = \"full\" | \"long\" | \"medium\" | \"short\";\n\n/** The valid `Intl` style keywords, used to validate the string-typed values. */\nconst STYLES = new Set<DateTimeStyle>([\"full\", \"long\", \"medium\", \"short\"]);\n\n/** Narrows an arbitrary string to a valid {@link DateTimeStyle}, or `undefined`. */\nfunction toStyle(value: string): DateTimeStyle | undefined {\n  return (STYLES as Set<string>).has(value) ? (value as DateTimeStyle) : undefined;\n}\n\n/**\n * Headless local-time behavior: renders the UTC instant in a `<time datetime>`\n * as an absolute, viewer-localized string via `Intl.DateTimeFormat`. No\n * dedicated APG pattern; it follows the HTML `<time>` semantics.\n *\n * Markup contract (identifier: `stimeo--local-time`):\n *   <time datetime=\"2026-06-08T12:30:00Z\"\n *         data-controller=\"stimeo--local-time\"\n *         data-stimeo--local-time-date-style-value=\"medium\"\n *         data-stimeo--local-time-time-style-value=\"short\">2026-06-08 12:30 UTC</time>\n *\n * The server emits UTC (cache-friendly — it never needs to know the viewer's\n * timezone), and the controller reformats the visible text into the viewer's\n * locale/zone on connect. This is the *absolute* localization axis, distinct from\n * {@link RelativeTimeController}'s \"3 minutes ago\".\n *\n * @remarks\n * Behavior only. The machine-readable `datetime` (UTC) is left untouched so\n * assistive tech and crawlers keep the canonical value while only the display\n * text — and an optional `title` — change. Formatting is a pure function of\n * `datetime` with no module-scope state, listeners, or timers, so a Turbo Drive\n * cache restore or morph re-runs `connect()` and stays consistent. A parse or\n * `Intl` error leaves the authored absolute text in place rather than throwing.\n */\nexport class LocalTimeController extends Controller<HTMLElement> {\n  static override values = {\n    locale: { type: String, default: \"\" },\n    timeZone: { type: String, default: \"\" },\n    dateStyle: { type: String, default: \"medium\" },\n    timeStyle: { type: String, default: \"short\" },\n    titleFormat: { type: String, default: \"\" },\n  };\n  static events = [\"format\"] as const;\n\n  declare localeValue: string;\n  declare timeZoneValue: string;\n  declare dateStyleValue: string;\n  declare timeStyleValue: string;\n  declare titleFormatValue: string;\n\n  override connect(): void {\n    const date = this.#parse();\n    if (date === null) return;\n\n    const formatted = this.#applyFormat(date, this.dateStyleValue, this.timeStyleValue);\n    if (formatted === null) return;\n\n    // Only the visible text (and optional title) change; `datetime` is the\n    // immutable machine-readable source and is never rewritten.\n    this.element.textContent = formatted;\n\n    const title = this.#title(date);\n    if (title !== null) this.element.setAttribute(\"title\", title);\n\n    this.dispatch(\"format\", { detail: { formatted } });\n  }\n\n  /** Parses the UTC `datetime` attribute into a {@link Date}, or `null`. */\n  #parse(): Date | null {\n    const raw = this.element.getAttribute(\"datetime\");\n    if (!raw) return null;\n    const ms = Date.parse(this.#asUtc(raw.trim()));\n    return Number.isNaN(ms) ? null : new Date(ms);\n  }\n\n  /**\n   * Reads a timezone-less date-time as UTC — the documented input contract —\n   * since `Date.parse` would otherwise interpret e.g. `\"2026-06-08T12:30:00\"` in\n   * the *runtime's* local zone, contradicting \"the server emits UTC\". Values that\n   * already carry `Z` or a `±hh:mm` offset (and bare `YYYY-MM-DD` dates, already\n   * parsed as UTC) are returned unchanged.\n   */\n  #asUtc(value: string): string {\n    const hasTime = /T\\d{2}:\\d{2}/.test(value);\n    const hasZone = /(Z|[+-]\\d{2}:?\\d{2})$/.test(value);\n    return hasTime && !hasZone ? `${value}Z` : value;\n  }\n\n  /**\n   * Builds the optional detailed `title`. `titleFormat` is an `Intl` style\n   * keyword applied to *both* date and time; empty (the default) adds no title.\n   */\n  #title(date: Date): string | null {\n    if (this.titleFormatValue.length === 0) return null;\n    return this.#applyFormat(date, this.titleFormatValue, this.titleFormatValue);\n  }\n\n  /**\n   * Formats `date` with `Intl.DateTimeFormat`, including each style only when it\n   * is a valid keyword (so a consumer can show date-only or time-only by clearing\n   * the other). Returns `null` when neither style is usable or `Intl` throws, so\n   * the caller can leave the authored text untouched.\n   */\n  #applyFormat(date: Date, dateStyle: string, timeStyle: string): string | null {\n    // `toStyle` yields `undefined` for an empty/invalid keyword; assigning it is\n    // equivalent to omitting the option, so a consumer can show date- or time-only.\n    const options: Intl.DateTimeFormatOptions = {\n      dateStyle: toStyle(dateStyle),\n      timeStyle: toStyle(timeStyle),\n    };\n    if (options.dateStyle === undefined && options.timeStyle === undefined) return null;\n    if (this.timeZoneValue.length > 0) options.timeZone = this.timeZoneValue;\n\n    try {\n      return new Intl.DateTimeFormat(this.#locale, options).format(date);\n    } catch {\n      // An invalid locale / timeZone (or unsupported style) must not break the\n      // page; the authored absolute text remains as the graceful fallback.\n      return null;\n    }\n  }\n\n  /** Locale precedence: the value, then the element's `lang`, then the document's. */\n  get #locale(): string | undefined {\n    return this.localeValue || this.element.lang || document.documentElement.lang || undefined;\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/microtask_coalescer.ts","../../src/controllers/local_time_controller.ts"],"names":[],"mappings":"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","file":"local_time_controller.js","sourcesContent":["/**\n * Collapses many target callbacks from one DOM mutation into a single pass.\n *\n * Stimulus fires `<name>TargetConnected` / `Disconnected` once per element, so\n * replacing a list of N options delivers N callbacks — but the useful unit of\n * work is \"reconcile against the DOM that resulted\", once, after the batch has\n * settled. Every controller that owns a reconcilable target set needs the same\n * shape: a `queued` flag plus `queueMicrotask`.\n *\n * **A microtask is the right horizon, and the reason is specific.** Stimulus\n * drives these callbacks from a `MutationObserver`, whose own callback already\n * runs as a microtask with the whole batch in hand; scheduling one more lands\n * after the last sibling callback of that batch and still before paint or any\n * event handler. A timer would be later than it needs to be, and reconciling\n * synchronously would run once per element against a half-applied DOM.\n *\n * **The two guards are not the same guard.** Scheduling is refused before the\n * controller connects, and running is refused after it disconnects:\n *\n * - **Before `connect()`** — Stimulus delivers the *initial* target callbacks\n *   ahead of `connect()`. Reconciling there would compute a fallback against a\n *   controller whose own state has not been initialised, and `connect()` is\n *   about to do a full pass anyway.\n * - **After `disconnect()`** — Stimulus fires a callback for **every** target\n *   during teardown, and a microtask queued just before it would otherwise run\n *   against a detached tree. {@link MicrotaskCoalescer.cancel} exists for the\n *   teardown path to drop the pending pass outright.\n *\n * Both guards are part of one contract here rather than something each consumer\n * has to remember separately.\n *\n * Scope is the scheduling only. *What* to reconcile — keep the surviving active\n * option, fall back to the next / previous / first visible one, rebuild derived\n * chips or hidden fields — stays in the controller, because no two consumers\n * answer it the same way.\n *\n * This file's own doc block is dropped from `dist`, but every member comment is\n * inlined into each consumer entry (`tsup` builds with `splitting: false`), so\n * rationale belongs here and only the contract belongs on the members.\n *\n * @example\n * ```ts\n * readonly #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());\n *\n * connect()    { this.#reconcile.activate(); }\n * disconnect() { this.#reconcile.cancel(); }\n *\n * optionTargetConnected()    { this.#reconcile.schedule(); }\n * optionTargetDisconnected() { this.#reconcile.schedule(); }\n * ```\n */\nexport class MicrotaskCoalescer {\n  readonly #run: () => void;\n  #queued = false;\n  #active = false;\n  #generation = 0;\n\n  /** @param run - the single reconciliation pass, invoked at most once per batch. */\n  constructor(run: () => void) {\n    this.#run = run;\n  }\n\n  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */\n  activate(): void {\n    this.#active = true;\n  }\n\n  /** Closes the window and drops any pending pass; call from `disconnect()`. */\n  cancel(): void {\n    this.#active = false;\n    this.#queued = false;\n    this.#generation += 1;\n  }\n\n  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */\n  schedule(): void {\n    if (!this.#active || this.#queued) return;\n    this.#queued = true;\n    const generation = this.#generation;\n    queueMicrotask(() => {\n      // A cancelled callback must not consume a pass queued after reconnect.\n      if (generation !== this.#generation || !this.#queued || !this.#active) return;\n      this.#queued = false;\n      this.#run();\n    });\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { MicrotaskCoalescer } from \"../utils/microtask_coalescer\";\n\n/** A date/time style keyword accepted by `Intl` `dateStyle` / `timeStyle`. */\ntype DateTimeStyle = \"full\" | \"long\" | \"medium\" | \"short\";\n\n/** The valid `Intl` style keywords, used to validate the string-typed values. */\nconst STYLES = new Set<DateTimeStyle>([\"full\", \"long\", \"medium\", \"short\"]);\n\n/** Narrows an arbitrary string to a valid {@link DateTimeStyle}, or `undefined`. */\nfunction toStyle(value: string): DateTimeStyle | undefined {\n  return (STYLES as Set<string>).has(value) ? (value as DateTimeStyle) : undefined;\n}\n\n/**\n * Headless local-time behavior: renders the UTC instant in a `<time datetime>`\n * as an absolute, viewer-localized string via `Intl.DateTimeFormat`. No\n * dedicated APG pattern; it follows the HTML `<time>` semantics.\n *\n * Markup contract (identifier: `stimeo--local-time`):\n *   <time datetime=\"2026-06-08T12:30:00Z\"\n *         data-controller=\"stimeo--local-time\"\n *         data-stimeo--local-time-date-style-value=\"medium\"\n *         data-stimeo--local-time-time-style-value=\"short\">2026-06-08 12:30 UTC</time>\n *\n * The server emits UTC (cache-friendly — it never needs to know the viewer's\n * timezone), and the controller reformats the visible text into the viewer's\n * locale/zone on connect. This is the *absolute* localization axis, distinct from\n * {@link RelativeTimeController}'s \"3 minutes ago\".\n *\n * @remarks\n * Behavior only. The machine-readable `datetime` (UTC) is left untouched so\n * assistive tech and crawlers keep the canonical value while only the display\n * text — and an optional `title` — change. Formatting is a pure function of\n * `datetime` with no module-scope state or timers, so a Turbo Drive cache restore\n * re-runs `connect()` and stays consistent. A parse or `Intl` error leaves the\n * authored absolute text in place rather than throwing.\n *\n * Render inputs are followed at runtime: a morph that swaps a Value or the\n * `datetime` attribute on the live element — which keeps the element, so\n * `connect()` never runs again — repaints through one coalesced pass\n * ({@link MicrotaskCoalescer}) rather than leaving a stale reading on screen.\n */\nexport class LocalTimeController extends Controller<HTMLElement> {\n  static override values = {\n    locale: { type: String, default: \"\" },\n    timeZone: { type: String, default: \"\" },\n    dateStyle: { type: String, default: \"medium\" },\n    timeStyle: { type: String, default: \"short\" },\n    titleFormat: { type: String, default: \"\" },\n  };\n  static events = [\"format\"] as const;\n\n  declare localeValue: string;\n  declare timeZoneValue: string;\n  declare dateStyleValue: string;\n  declare timeStyleValue: string;\n  declare titleFormatValue: string;\n\n  /** Collapses a morph that swaps several render inputs at once into one repaint. */\n  readonly #resync = new MicrotaskCoalescer(() => this.#render());\n  /**\n   * Watches the one render input that is not a Value. Only `datetime` is filtered\n   * in, so the text and `title` this controller writes cannot re-enter the pass.\n   */\n  readonly #datetimeWatch = new MutationObserver(() => {\n    this.#resync.schedule();\n  });\n\n  override connect(): void {\n    this.#resync.activate();\n    this.#datetimeWatch.observe(this.element, { attributeFilter: [\"datetime\"] });\n    this.#render();\n  }\n\n  override disconnect(): void {\n    this.#resync.cancel();\n    this.#datetimeWatch.disconnect();\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `locale` at runtime. */\n  localeValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `timeZone` at runtime. */\n  timeZoneValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `dateStyle` at runtime. */\n  dateStyleValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `timeStyle` at runtime. */\n  timeStyleValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `titleFormat` at runtime. */\n  titleFormatValueChanged(): void {\n    this.#resync.schedule();\n  }\n\n  /**\n   * Formats the instant in `datetime` against the current Values and writes it out.\n   *\n   * The `format` event rides with every pass, including a repaint a morph triggers:\n   * its condition is that formatting was applied, and a repaint applies it with a\n   * new result. A pass that cannot format writes nothing and emits nothing, so the\n   * authored absolute text stays as the fallback.\n   */\n  #render(): void {\n    const date = this.#parse();\n    if (date === null) return;\n\n    const formatted = this.#applyFormat(date, this.dateStyleValue, this.timeStyleValue);\n    if (formatted === null) return;\n\n    // Only the visible text (and optional title) change; `datetime` is the\n    // immutable machine-readable source and is never rewritten.\n    this.element.textContent = formatted;\n\n    const title = this.#title(date);\n    if (title !== null) this.element.setAttribute(\"title\", title);\n\n    this.dispatch(\"format\", { detail: { formatted } });\n  }\n\n  /**\n   * Parses the UTC `datetime` attribute into a {@link Date}, or `null`. Whitespace\n   * around the attribute value is tolerated.\n   */\n  #parse(): Date | null {\n    const raw = this.element.getAttribute(\"datetime\");\n    if (!raw) return null;\n    const ms = Date.parse(this.#asUtc(raw.trim()));\n    return Number.isNaN(ms) ? null : new Date(ms);\n  }\n\n  /**\n   * Reads a timezone-less date-time as UTC — the input contract of this\n   * controller — since `Date.parse` would otherwise read `\"2026-06-08T12:30:00\"` in\n   * the *runtime's* local zone, contradicting \"the server emits UTC\". Values that\n   * already carry `Z` or a `±hh:mm` offset (and bare `YYYY-MM-DD` dates, already\n   * parsed as UTC) are returned unchanged.\n   *\n   * HTML accepts a space where ISO 8601 wants `T`, and `Date.parse` of that form is\n   * left to each engine, so a whole value shaped that way is normalized to the `T`\n   * separator first. The pattern is anchored: a value trailing anything else — a\n   * zone word such as `\"2026-06-08 12:30:00 UTC\"` — is handed to `Date.parse` as\n   * authored instead of being turned into a string nothing can parse.\n   */\n  #asUtc(value: string): string {\n    const isoLike = value.replace(\n      /^(\\d{4}-\\d{2}-\\d{2}) (\\d{2}:\\d{2}(?::\\d{2}(?:\\.\\d+)?)?(?:Z|[+-]\\d{2}:?\\d{2})?)$/,\n      \"$1T$2\",\n    );\n    const hasTime = /T\\d{2}:\\d{2}/.test(isoLike);\n    const hasZone = /(Z|[+-]\\d{2}:?\\d{2})$/.test(isoLike);\n    return hasTime && !hasZone ? `${isoLike}Z` : isoLike;\n  }\n\n  /**\n   * Builds the optional detailed `title`. `titleFormat` is an `Intl` style\n   * keyword applied to *both* date and time; empty (the default) adds no title.\n   */\n  #title(date: Date): string | null {\n    if (this.titleFormatValue.length === 0) return null;\n    return this.#applyFormat(date, this.titleFormatValue, this.titleFormatValue);\n  }\n\n  /**\n   * Formats `date` with `Intl.DateTimeFormat`, including each style only when it\n   * is a valid keyword (so a consumer can show date-only or time-only by clearing\n   * the other). Returns `null` when neither style is usable or `Intl` throws, so\n   * the caller can leave the authored text untouched.\n   */\n  #applyFormat(date: Date, dateStyle: string, timeStyle: string): string | null {\n    // `toStyle` yields `undefined` for an empty/invalid keyword; assigning it is\n    // equivalent to omitting the option, so a consumer can show date- or time-only.\n    const options: Intl.DateTimeFormatOptions = {\n      dateStyle: toStyle(dateStyle),\n      timeStyle: toStyle(timeStyle),\n    };\n    if (options.dateStyle === undefined && options.timeStyle === undefined) return null;\n    if (this.timeZoneValue.length > 0) options.timeZone = this.timeZoneValue;\n\n    try {\n      return new Intl.DateTimeFormat(this.#locale, options).format(date);\n    } catch {\n      // An invalid locale / timeZone (or unsupported style) must not break the\n      // page; the authored absolute text remains as the graceful fallback.\n      return null;\n    }\n  }\n\n  /** Locale precedence: the value, then the nearest `lang` up the ancestor chain. */\n  get #locale(): string | undefined {\n    return this.localeValue || this.element.closest(\"[lang]\")?.getAttribute(\"lang\") || undefined;\n  }\n}\n"]}

package/dist/controllers/menu_controller.d.ts

@@ -15,13 +15,20 @@ import { Controller } from '@hotwired/stimulus';
  *         data-stimeo--menu-target="menu" hidden>
  *       <li role="none">
  *         <button role="menuitem" tabindex="-1"
- *                 data-stimeo--menu-target="item"
- *                 data-action="click->stimeo--menu#activate
- *                              keydown->stimeo--menu#onItemKeydown">…</button>
+ *                 data-stimeo--menu-target="item">…</button>
  *       </li>
  *     </ul>
  *   </div>
  *
+ * The trigger's two actions are required. Items need none: their click and key
+ * handling is delegated from the controller element, so an item added, moved, or
+ * server-rendered after connect works without the consumer wiring anything onto
+ * it. The per-element form (`click->stimeo--menu#activate` /
+ * `keydown->stimeo--menu#onItemKeydown`) is supported alongside it. A
+ * focus-moving key runs once (the action claims it and the delegate stands
+ * down), and `activate`, reachable on both paths, claims the click so one
+ * gesture activates once. See {@link #onDelegatedItemClick}.
+ *
  * Implements the WAI-ARIA APG **Menu Button** pattern (a button that opens a menu
  * of commands). Unlike `stimeo--dropdown` (a disclosure for arbitrary content),
  * this is a true `role="menu"` widget with roving focus across `role="menuitem"`
@@ -42,14 +49,14 @@ import { Controller } from '@hotwired/stimulus';
  * - `Escape` closes and returns focus to the trigger. While open the menu is a
  *   layer on the shared {@link EscapeLayer} stack; it claims a press only while
  *   focus is inside the controller or fell to the body, so one keypress closes
- *   exactly one layer (the shared layered-Escape contract) and a newer layer
- *   (e.g. a tooltip shown over an item) is dismissed first.
+ *   exactly one layer and a newer layer (e.g. a tooltip shown over an item) is
+ *   dismissed first.
  * - A click outside the controller closes the menu without moving focus away
  *   from the clicked element.
  *
- * Roving focus skips items that are not navigable — `hidden`, natively
- * `disabled`, or `aria-disabled="true"` — so the keyboard never lands focus on an
- * inert command (matching `stimeo--command-palette` / `stimeo--toolbar`).
+ * Roving focus skips `hidden` and natively `disabled` items. An
+ * `aria-disabled="true"` item remains discoverable by arrow-key focus, while its
+ * activation is suppressed in the capture phase.
  */
 declare class MenuController extends Controller<HTMLElement> {
     #private;
@@ -60,7 +67,7 @@ declare class MenuController extends Controller<HTMLElement> {
     readonly itemTargets: HTMLButtonElement[];
     readonly hasTriggerTarget: boolean;
     readonly hasMenuTarget: boolean;
-    /** Starts closed and registers delegated listeners. */
+    /** Starts closed and registers activation / outside-click listeners. */
     connect(): void;
     /** Releases the listeners, stack membership, and any pending Tab-close task. */
     disconnect(): void;
@@ -81,8 +88,19 @@ declare class MenuController extends Controller<HTMLElement> {
     onTriggerKeydown(event: KeyboardEvent): void;
     /** Implements roving focus and closing keys inside the menu. */
     onItemKeydown(event: KeyboardEvent): void;
-    /** Closes the menu after an item is activated. Bound via `data-action`. */
-    activate(): void;
+    /**
+     * Closes the menu after an item is activated. Bound via `data-action`, and
+     * also reached from the delegated listener.
+     *
+     * Markup that carries the per-element action *and* gets the delegate would run
+     * this twice for one gesture. `close()` writes the state hooks (`hidden`,
+     * `aria-expanded`), and an identical reassign still queues a MutationRecord,
+     * so a second pass is observable to anyone watching them. The event is
+     * therefore claimed: the path that gets there first does the work, the other
+     * one finds it claimed and returns. A programmatic call with no event always
+     * runs.
+     */
+    activate(event?: Event): void;
 }
 
 export { MenuController };

package/dist/controllers/menu_controller.js

@@ -2,6 +2,12 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/menu_controller.ts
 
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/escape_layer.ts
 function claimsWhileFocusWithin(element) {
   return () => {
@@ -159,18 +165,30 @@ var MenuController = class extends Controller {
   #timers = new SafeTimeout();
   /** Escape-stack membership while open; the shared resolver dismisses via it. */
   #escapeLayer = new EscapeLayer();
-  /** Starts closed and registers delegated listeners. */
+  /**
+   * The item a click started on, recorded in the capture pass. Read once by the
+   * delegated bubble listener, which must not re-derive it: consumer handlers run
+   * in between and may detach the item.
+   */
+  #clickOwner = null;
+  /** Clicks already turned into an activation, so the two paths run it once. */
+  #activated = /* @__PURE__ */ new WeakSet();
+  /** Starts closed and registers activation / outside-click listeners. */
   connect() {
     this.close();
     this.element.addEventListener("click", this.#onItemClickCapture, true);
-    document.addEventListener("click", this.#onOutsideClick);
+    this.element.addEventListener("click", this.#onDelegatedItemClick);
+    this.element.addEventListener("keydown", this.#onDelegatedItemKeydown);
+    document.addEventListener("click", this.#onOutsideClick, true);
   }
   /** Releases the listeners, stack membership, and any pending Tab-close task. */
   disconnect() {
     this.#timers.clearAll();
     this.#escapeLayer.deactivate();
     this.element.removeEventListener("click", this.#onItemClickCapture, true);
-    document.removeEventListener("click", this.#onOutsideClick);
+    this.element.removeEventListener("click", this.#onDelegatedItemClick);
+    this.element.removeEventListener("keydown", this.#onDelegatedItemKeydown);
+    document.removeEventListener("click", this.#onOutsideClick, true);
   }
   /** Toggles the menu open/closed. Bound via `data-action` (click). */
   toggle() {
@@ -209,6 +227,8 @@ var MenuController = class extends Controller {
    * open and then immediately re-toggle the menu.
    */
   onTriggerKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     if (event.key === "ArrowDown") {
       event.preventDefault();
       this.open();
@@ -221,8 +241,18 @@ var MenuController = class extends Controller {
   }
   /** Implements roving focus and closing keys inside the menu. */
   onItemKeydown(event) {
+    this.#handleItemKeydown(event, event.currentTarget);
+  }
+  /**
+   * The roving-focus body, shared by the per-element action and its delegated
+   * twin. `from` is the item the key belongs to: the bound element for the
+   * action, the resolved owner of the event target for the delegate.
+   */
+  #handleItemKeydown(event, from) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const items = this.#navigableItems;
-    const currentIndex = items.indexOf(event.currentTarget);
+    const currentIndex = items.indexOf(from);
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
@@ -246,8 +276,23 @@ var MenuController = class extends Controller {
         break;
     }
   }
-  /** Closes the menu after an item is activated. Bound via `data-action`. */
-  activate() {
+  /**
+   * Closes the menu after an item is activated. Bound via `data-action`, and
+   * also reached from the delegated listener.
+   *
+   * Markup that carries the per-element action *and* gets the delegate would run
+   * this twice for one gesture. `close()` writes the state hooks (`hidden`,
+   * `aria-expanded`), and an identical reassign still queues a MutationRecord,
+   * so a second pass is observable to anyone watching them. The event is
+   * therefore claimed: the path that gets there first does the work, the other
+   * one finds it claimed and returns. A programmatic call with no event always
+   * runs.
+   */
+  activate(event) {
+    if (event !== void 0) {
+      if (this.#activated.has(event)) return;
+      this.#activated.add(event);
+    }
     this.#closeAndRestore();
   }
   /** Closes and returns focus to the trigger (Escape / item-activation path). */
@@ -260,16 +305,59 @@ var MenuController = class extends Controller {
     if (this.#isOpen && !this.element.contains(event.target)) this.close();
   };
   /**
-   * Captures clicks so `aria-disabled` commands cannot reach consumer handlers.
-   * Native Enter/Space activation also synthesizes a click and is blocked here.
+   * Delegated twin of {@link onItemKeydown}, bound on the controller element.
+   *
+   * An item that arrives *after* connect — Overflow Menu moves toolbar controls
+   * into this menu at runtime — carries whatever `data-action` its author wrote,
+   * and that is exactly the binding a consumer forgets, because the markup that
+   * declares the item lives nowhere near the menu. Listening on the container
+   * makes membership in the `item` target enough to be operable. The per-element
+   * action stays supported and is not double-handled: see
+   * {@link #handleItemKeydown}.
+   */
+  #onDelegatedItemKeydown = (event) => {
+    const item = this.#itemFrom(event.target);
+    if (item === null) return;
+    this.#handleItemKeydown(event, item);
+  };
+  /**
+   * Delegated twin of {@link activate}, for the same reason as the keydown one.
+   *
+   * It works from the item the capture pass recorded, not from a fresh lookup:
+   * by the time a click bubbles up here, a consumer handler may already have
+   * detached the row it lives in, and `itemTargets` is a live query that would
+   * then resolve nothing — the activation would be lost and the menu left open
+   * over an item that no longer exists. `aria-disabled` items never reach this
+   * listener at all: the capture pass stops the click outright.
+   */
+  #onDelegatedItemClick = (event) => {
+    const item = this.#clickOwner;
+    this.#clickOwner = null;
+    if (item === null) return;
+    this.activate(event);
+  };
+  /** The item target that is, or contains, `node`; `null` when it is neither. */
+  #itemFrom(node) {
+    if (!(node instanceof Node)) return null;
+    return this.itemTargets.find((item) => item === node || item.contains(node)) ?? null;
+  }
+  /**
+   * First look at every click inside the controller, and the only point at which
+   * the DOM is still the one the user clicked. Two jobs: record which item owns
+   * the click for the delegate above, and stop an `aria-disabled` command before
+   * it reaches consumer handlers (native Enter/Space activation synthesizes a
+   * click and is blocked here too).
    */
   #onItemClickCapture = (event) => {
     const target = event.target;
-    if (!(target instanceof Node)) return;
-    const disabled = this.itemTargets.some(
-      (item) => item.getAttribute("aria-disabled") === "true" && item.contains(target)
-    );
-    if (!disabled) return;
+    if (!(target instanceof Node)) {
+      this.#clickOwner = null;
+      return;
+    }
+    const item = this.#itemFrom(target);
+    this.#clickOwner = item;
+    if (item === null || item.getAttribute("aria-disabled") !== "true") return;
+    this.#clickOwner = null;
     event.preventDefault();
     event.stopImmediatePropagation();
   };
@@ -287,13 +375,12 @@ var MenuController = class extends Controller {
     return this.itemTargets.filter((item) => this.#isNavigable(item));
   }
   /**
-   * An item can take roving focus unless it is `hidden`, `aria-disabled="true"`,
-   * or a natively `disabled` form control. CSS-only visibility is not detectable
-   * here and is the consumer's responsibility.
+   * An item can take roving focus unless it is `hidden` or a natively `disabled`
+   * form control. `aria-disabled` remains focusable for discoverability; capture
+   * suppresses activation. CSS-only visibility is the consumer's responsibility.
    */
   #isNavigable(item) {
     if (item.hasAttribute("hidden")) return false;
-    if (item.getAttribute("aria-disabled") === "true") return false;
     return !item.disabled;
   }
   /** Whether the menu is currently visible. */