stimeo-ui 0.6.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2883d44061c4c7ec8e5cd1a3b021c1d7fa8bf34bf8f2f74df1a3f496fe99f578
-  data.tar.gz: 9024ef97e2802777390ebc1a18cbbc202df8643ccac875d59b49a06bf6ae7f3e
+  metadata.gz: b7dc7faa9f1a7d87af3398be60736f22e76e8e1b6ef534d0b8605e3fcdb9f4eb
+  data.tar.gz: 05bd47298cc4e0592f1247140c83e1cedff106c91b6a972734e5d9d3a507e3ea
 SHA512:
-  metadata.gz: a6dd511725546fc75ffa9e150ff02640d22c09404238f9ac418b8042eac78fab90bf6c19e8266933a5b2c47178ccc13dea00793c76c7e4184f708e9619afb84c
-  data.tar.gz: 926ccd828054b1e374bc5e9039d94d0eb4b0c398a45b235090af702ce037993e2bff6b774f6932d39e8eabdb27e69ae80fd953e25b2a8ead7525c1ee6a59d585
+  metadata.gz: aa22c951a7b4d5ba07c34f5f17c86227f8079d1222c40d895a1198c274c021198dc89edad6c129df4526b79001455834c88bd7ffdd46eb95dbd76166dba5975e
+  data.tar.gz: f95da4d63fee6006b75ec78a7dd91a73d3535fe82b456a298dd7a273e1f415df829c0fe08fc4c065d0d680d70d8434874226f30eadb5eccf4e5fc1b5ef5c99cb

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.8.0] - 2026-08-22
+
+Minor release with no new components. Eight existing ones are reworked —
+auto-submit, carousel, currency-input, file-dropzone, input-mask, nested-form,
+otp, and textarea-autosize — and of those, carousel, otp, and file-dropzone also
+changed their markup contracts, so read Removed and Changed before upgrading. The
+Inspector manifest stays on schema v12.
+
+### Removed
+
+- otp: `length` — the number of `field` targets is the passcode length.
+- file-dropzone: the `status` target, `dragLabel`, and the
+  `data-file-dropzone-slot` attributes.
+
+### Added
+
+- `reconcile` on auto-submit, direct-upload, file-dropzone, flash, frame-loading,
+  input-mask, nested-form, otp, spinner, and submit-once — it also reports the
+  state a Turbo rewind discarded, carrying what that component lost
+  (`{ files }`, `{ ids }`, `{ forms }`, `{ removed }`, or `{}`).
+- carousel: `data-state`, `inert` on inactive slides, `prefers-reduced-motion`,
+  and optional pickers. otp: `clear` / `onPointerDown`, and text carrying several
+  characters spread across the following fields. file-dropzone:
+  `allowDuplicates`, a `thumb` target, and the `announce*Text` wording.
+- Characters an IME commits full-width are read as their half-width form in
+  input-mask, otp, and currency-input.
+- Inspector: rules for the reworked markup — carousel's controller-owned ARIA,
+  the `playToggle` an `autoplay` carousel needs, the `prev` / `next` pair, a
+  finite positive `interval`, otp's group and field names, and the parts
+  file-dropzone's item template must contain.
+
+### Changed
+
+- carousel: drop the `data-action` wiring and any authored `aria-pressed` —
+  clicks, picker keys, hover, and focus are delegated, and `aria-pressed` /
+  `aria-disabled` / `aria-live` / `aria-atomic` are controller-owned. Name the
+  toggle with `aria-label`, pair `prev` with `next`, and give an `autoplay`
+  carousel a `playToggle` (WCAG 2.2.2).
+- otp: the root needs `role="group"` and a name, and each `field` its own.
+  `invalid` reports only input that filled no field.
+- file-dropzone: put a `stimeo--announcer` on the page, set the `announce*Text`
+  wording, and use `name` / `thumb` / `remove` targets in the item template with
+  an authored `aria-label`. Validation runs `type` → `size` → `duplicate` →
+  `count`, and `change` precedes `reject`.
+- input-mask: `change` fires only for a user edit; normalization and runtime
+  Value changes report `reconcile`. The manifest reports `tokens` as `String`
+  where it reported `Object`.
+- textarea-autosize: `resize` no longer fires when a connect leaves the height
+  unchanged; width, font, and runtime `minRows` / `maxRows` changes are followed.
+- currency-input keeps what was typed while typing and rounds on blur;
+  nested-form absorbs rows added or removed outside it; auto-submit follows a
+  swapped `form` target.
+
+### Fixed
+
+- carousel: the play toggle stops rotation — the `focusin` before the click no
+  longer makes the press resume instead. otp: a full-width commit into one field
+  fills the following ones. currency-input: a locale with non-Latin digits
+  reparses its own output. nested-form: a discarded-but-visible row's remove
+  button no longer swallows the click.
+
+## [0.7.0] - 2026-08-16
+
+Minor release reworking the form stack, separator, and scroll-area, with
+announcements moving onto the shared `stimeo--announcer`. The Inspector manifest
+moves to schema v12, so `stimeo check` can report on views that passed under
+0.6.0.
+
+### Removed
+
+- **Breaking** — direct-upload: the `status` target and the `announce` /
+  `doneLabel` / `errorLabel` Values. Use `announceDoneText` /
+  `announceErrorText` with `{name}` instead of `%{name}`.
+- **Breaking** — persist: the unversioned draft format. Drafts written by earlier
+  releases are discarded, not migrated.
+
+### Added
+
+- separator `min` / `max` / `value`; submit-once `finish` / `cancel` and
+  `idle` / `busy` targets; dirty-form `acceptRestore`; character-counter
+  `announceText`; form-field `setError(message, { focus })`; persist `error`;
+  `reconcile` on character-counter and conditional-fields.
+- form-validation: localized constraint wording through
+  `data-stimeo--form-validation-message[-<constraint>]`, a declarative
+  `disallow="whitespace"`, and controls attached with `form="id"`.
+- Inspector: schema v12 (`requiredActions`, `actionCompletion`) with the
+  `missing-required-action`, `missing-action-completion`, and
+  `missing-announcer` diagnostics.
+
+### Changed
+
+- **Breaking** — announcing components need a `stimeo--announcer` on the page
+  plus the wording: character-counter `announceText`, direct-upload
+  `announceDoneText` / `announceErrorText`, submit-once `announceText` /
+  `announceReadyText`. Drop `role="alert"` from form-field's `error` target and
+  `aria-live` from character-counter's `output`.
+- **Breaking** — separator: the Values are the only runtime input, so move
+  `role`, `tabindex`, and the orientation / range ARIA into `orientation`,
+  `focusable`, `min`, `max`, `step`, and `value`. A `focusable` separator also
+  needs `keydown->stimeo--separator#onKeydown` on itself and an accessible name.
+- **Breaking** — submit-once: sessions are per form, and `preventDefault()` no
+  longer ends one — wire `finish` or `cancel`, or set a `timeout`. `start` /
+  `end` carry `{ form, submitter, … }`.
+- **Breaking** — direct-upload: `done` fires only on success, and a row that
+  reached `error` stays there.
+- **Breaking** — dirty-form: a successful submit re-baselines to what Turbo
+  submitted, so later edits stay dirty, and one native confirmation covers every
+  dirty form per navigation. With persist, add
+  `data-action="stimeo--persist:restore->stimeo--dirty-form#acceptRestore"`.
+- **Breaking** — character-counter: `change` fires only when a committed edit
+  changes the length. form-field: `validate` fires only for `setError` /
+  `clearError`.
+- persist: `exclude` defaults to Rails' `authenticity_token` / `_method` /
+  `utf8`; `password` is always excluded regardless of the list.
+
+### Fixed
+
+- Attribute and style leases are released by the subscriber that owns the
+  lifecycle, so a cached page no longer retains detached elements.
+- localStorage access goes through one guarded helper, so persist, sidebar, and
+  theme keep working when the browser denies storage.
+
 ## [0.6.0] - 2026-08-15
 
 Minor release that separates reconciled state from user edits: `change` now
@@ -573,6 +695,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.8.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.8.0
+[0.7.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.7.0
 [0.6.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.6.0
 [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

data/dist/controllers/alert_dialog_controller.js

@@ -115,8 +115,81 @@ var EscapeLayer = class _EscapeLayer {
   }
 };
 
+// src/utils/focus_candidate.ts
+function inheritsFieldsetDisabled(control) {
+  let fieldset = control.closest("fieldset[disabled]");
+  while (fieldset) {
+    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(control)) return true;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
+  }
+  return false;
+}
+function canTakeFocus(element) {
+  if (element.closest("[hidden], [inert]")) return false;
+  if (element instanceof HTMLInputElement && element.type === "hidden") return false;
+  if (!("disabled" in element)) return true;
+  if (element.disabled) return false;
+  return !inheritsFieldsetDisabled(element);
+}
+var TAB_STOP_CANDIDATE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  "[tabindex]",
+  "[contenteditable]"
+].join(",");
+function isRenderedForFocus(element) {
+  const check = element.checkVisibility;
+  return typeof check === "function" ? check.call(element, { visibilityProperty: true }) : true;
+}
+function authoredTabindex(element) {
+  const value = element.getAttribute("tabindex");
+  if (value === null || !/^[+-]?\d+$/.test(value.trim())) return null;
+  return Number(value);
+}
+function hasNativeTabStop(element) {
+  if (element instanceof HTMLAnchorElement || element instanceof HTMLAreaElement) {
+    return element.hasAttribute("href");
+  }
+  if (element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+    return true;
+  }
+  if (element instanceof HTMLInputElement) return element.type !== "hidden";
+  if (element instanceof HTMLIFrameElement) return true;
+  if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
+    return element.hasAttribute("controls");
+  }
+  if (element instanceof HTMLElement && element.tagName === "SUMMARY") {
+    const details = element.parentElement;
+    return details instanceof HTMLDetailsElement && Array.from(details.children).find((child) => child.tagName === "SUMMARY") === element;
+  }
+  return false;
+}
+function hasEditableTabStop(element) {
+  const value = element.getAttribute("contenteditable")?.toLowerCase();
+  return value === "" || value === "true" || value === "plaintext-only";
+}
+function isTabStop(element) {
+  if (!canTakeFocus(element) || !isRenderedForFocus(element)) return false;
+  const tabindex = authoredTabindex(element);
+  if (tabindex !== null) return tabindex >= 0;
+  return hasNativeTabStop(element) || hasEditableTabStop(element);
+}
+function tabStopsWithin(root) {
+  return Array.from(root.querySelectorAll(TAB_STOP_CANDIDATE_SELECTOR)).filter(
+    isTabStop
+  );
+}
+
 // src/utils/focus_trap.ts
-var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FocusTrap = class {
   /** The element focused before activation, restored on deactivation. */
   #previouslyFocused = null;
@@ -278,9 +351,7 @@ var FocusTrap = class {
   }
   /** Collects the container's currently focusable descendants in DOM order. */
   #focusableElements() {
-    return Array.from(this.#getContainer().querySelectorAll(FOCUSABLE)).filter(
-      (el) => !el.hidden
-    );
+    return tabStopsWithin(this.#getContainer());
   }
 };
 

data/dist/controllers/auto_submit_controller.js

@@ -2,6 +2,35 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/auto_submit_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/composition_tracker.ts
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
@@ -112,14 +141,18 @@ var AutoSubmitController = class extends Controller {
     message: { type: String, default: "" }
   };
   static actions = ["submit"];
-  static events = ["submit", "done"];
+  static events = ["submit", "done", "reconcile"];
   /** Debounce timer registry; one `clearAll()` in disconnect tears it down. */
   #timers = new SafeTimeout();
   /** Id of the pending debounce timer, so a new keystroke can reset it. */
   #pendingId = 0;
+  /** The form the listeners are attached to; target callbacks rebind it. */
+  #boundForm = null;
+  /** Rewinds the transient state hooks just before Turbo snapshots the page. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   /** Clears `aria-busy` and emits completion once Turbo finishes the submit. */
   #onSubmitEnd = () => {
-    this.#form.removeAttribute("aria-busy");
+    this.#boundForm?.removeAttribute("aria-busy");
     const message = this.messageValue;
     this.dispatch("done", { detail: { message: message || void 0 } });
     if (this.announceValue && message) {
@@ -133,15 +166,23 @@ var AutoSubmitController = class extends Controller {
     }
   });
   connect() {
-    this.#form.addEventListener("turbo:submit-end", this.#onSubmitEnd);
-    this.#composition.observe(this.#form);
+    this.#beforeCache.activate();
+    this.#bindForm(this.#resolveForm());
   }
   disconnect() {
+    this.#beforeCache.deactivate();
+    this.#bindForm(null);
+    this.#composition.disconnect();
     this.#timers.clearAll();
     this.#pendingId = 0;
-    this.#composition.disconnect();
-    this.#form.removeAttribute("data-auto-submit-pending");
-    this.#form.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+  }
+  /** Follows a `form` target added (or swapped in) at runtime. */
+  formTargetConnected() {
+    this.#bindForm(this.#resolveForm());
+  }
+  /** Follows a `form` target removed (or swapped out) at runtime. */
+  formTargetDisconnected() {
+    this.#bindForm(this.#resolveForm());
   }
   /**
    * Schedules a debounced submit. Wired to `input`/`change`; the `on` value is an
@@ -155,21 +196,58 @@ var AutoSubmitController = class extends Controller {
   }
   /** Schedules (and coalesces) the debounced submit for the given trigger. */
   #schedule(trigger) {
-    this.#form.setAttribute("data-auto-submit-pending", "true");
-    if (this.#pendingId) this.#timers.clear(this.#pendingId);
+    const form = this.#boundForm;
+    if (!form) return;
+    form.setAttribute("data-auto-submit-pending", "true");
+    this.#cancelPending();
     this.#pendingId = this.#timers.set(() => {
       this.#pendingId = 0;
-      this.#form.removeAttribute("data-auto-submit-pending");
+      form.removeAttribute("data-auto-submit-pending");
       this.dispatch("submit", { detail: { trigger } });
-      if (this.#form.checkValidity()) {
-        this.#form.setAttribute("aria-busy", "true");
+      if (form.checkValidity()) {
+        form.setAttribute("aria-busy", "true");
       }
-      this.#form.requestSubmit();
+      form.requestSubmit();
     }, this.debounceValue);
   }
-  /** Resolves the form element (explicit `form` target, else the controller root). */
-  get #form() {
-    return this.hasFormTarget ? this.formTarget : this.element;
+  /** Cancels the pending debounced submit, if any (`clear` no-ops on unknown ids). */
+  #cancelPending() {
+    this.#timers.clear(this.#pendingId);
+    this.#pendingId = 0;
+  }
+  /**
+   * Replaces the subscribed form symmetrically. The outgoing form loses the
+   * `turbo:submit-end`/composition listeners, its pending hook, and any pending
+   * debounced submit (which described the outgoing form). An in-flight `aria-busy`
+   * is left for `turbo:submit-end` or the pre-cache rewind — removing it here
+   * would wipe a legitimately in-progress submission.
+   */
+  #bindForm(form) {
+    if (form === this.#boundForm) return;
+    const previous = this.#boundForm;
+    if (previous) {
+      this.#cancelPending();
+      previous.removeAttribute("data-auto-submit-pending");
+      previous.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+      this.#composition.unobserve(previous);
+    }
+    this.#boundForm = form;
+    if (!form) return;
+    form.addEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#composition.observe(form);
+  }
+  /** Resolves the form: the explicit `form` target, else a `<form>` root, else null. */
+  #resolveForm() {
+    if (this.hasFormTarget) return this.formTarget;
+    return this.element instanceof HTMLFormElement ? this.element : null;
+  }
+  /** Returns the transient state hooks to their initial (absent) state. */
+  #rewindForCache() {
+    const inProgress = this.#pendingId !== 0 || this.#boundForm?.hasAttribute("aria-busy") === true;
+    this.#cancelPending();
+    this.#boundForm?.removeAttribute("data-auto-submit-pending");
+    this.#boundForm?.removeAttribute("aria-busy");
+    if (inProgress) this.dispatch("reconcile", { detail: {} });
   }
   /** Whether `type` is one of the whitespace-separated event types in `on`. */
   #triggers(type) {

data/dist/controllers/avatar_controller.js

@@ -21,17 +21,21 @@ var AttributeLease = class {
         written: value
       });
     }
-    if (value === null) element.removeAttribute(this.#attribute);
-    else element.setAttribute(this.#attribute, value);
+    this.#reflect(element, value);
   }
   /** Returns one lease without overwriting a value subsequently authored by a consumer. */
   return(element) {
     const record = this.#records.get(element);
     if (!record) return;
     this.#records.delete(element);
-    if (element.getAttribute(this.#attribute) !== record.written) return;
-    if (record.original === null) element.removeAttribute(this.#attribute);
-    else element.setAttribute(this.#attribute, record.original);
+    const stillOwned = element.getAttribute(this.#attribute) === record.written;
+    if (stillOwned) this.#reflect(element, record.original);
+  }
+  /** Reflects only a real value transition, avoiding self-triggered mutation work. */
+  #reflect(element, value) {
+    if (element.getAttribute(this.#attribute) === value) return;
+    if (value === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, value);
   }
   /** Returns every outstanding lease using the same ownership check as {@link return}. */
   returnAll() {
@@ -39,6 +43,35 @@ var AttributeLease = class {
   }
 };
 
+// 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;
@@ -81,6 +114,7 @@ var AvatarController = class extends Controller {
   /** Collapses one morph's Value, target, and direct-attribute signals into one pass. */
   #reconcile = new MicrotaskCoalescer(() => this.#render());
   /** Preserves directly-authored source and visibility while targets are controlled. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #src = new AttributeLease("src");
   #imageHidden = new AttributeLease("hidden");
   #fallbackHidden = new AttributeLease("hidden");
@@ -96,6 +130,7 @@ var AvatarController = class extends Controller {
   connect() {
     this.#connected = true;
     this.#reconcile.activate();
+    this.#beforeCache.activate();
     this.#srcObserver.observe(this.element, {
       attributes: true,
       attributeFilter: ["src"],
@@ -107,6 +142,7 @@ var AvatarController = class extends Controller {
   disconnect() {
     this.#connected = false;
     this.#reconcile.cancel();
+    this.#beforeCache.deactivate();
     this.#srcObserver.disconnect();
   }
   /** Repaints when application code or a Turbo morph changes the source Value. */
@@ -214,6 +250,12 @@ var AvatarController = class extends Controller {
     }
     this.element.setAttribute("data-state", state);
   }
+  /** Returns borrowed image and fallback semantics before Turbo snapshots the page. */
+  #rewindForCache() {
+    this.#src.returnAll();
+    this.#imageHidden.returnAll();
+    this.#fallbackHidden.returnAll();
+  }
 };
 
 export { AvatarController };