stimeo-ui 0.17.0 → 0.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0ab94f6bcd6de9b272ef9049a92e84b7e69af7d955dee82d24fef5dc09f61682
-  data.tar.gz: 180f338981fd0e02a0c5dc9b30032eedfcdb0841d5734524d02d00862bbfad57
+  metadata.gz: 05c2871de0e4c97223dfb10803e8c4fa84abc3a0cf5e9c946d6570d88c46f065
+  data.tar.gz: a772dc1b21e16d21ea37af8dbb2f6a56618fa94252fe43eebcbede4ab296c2a2
 SHA512:
-  metadata.gz: f65e42f9fdbe28e84af7ecc703f2bd92620bbe75ef197dfd478255286f23278625a1bc3c57237c3390b60c3f0d1714ffdc60ddb6584a334187e2775dbc36072a
-  data.tar.gz: 8c832a6e93363515f8343913f2456113086812f7d6fbd63f8751b2279cecb8e3682482978cd5adee9354fd871fbae0b328d38797fdcd7a81e4a8703016bf78a8
+  metadata.gz: a74a9a638fadb04fcec7c72ced80825fb75215051533508d2e58c40fc64ef4eb3aa41a0b76ee85ab9697004f9861d6b6a46b75ec62c39b013d274487f7986d42
+  data.tar.gz: 2b0ff0e66bc0f7062c241ee01032888206b300eb74c552561c3638638a9255a19ea69b1a9555fa5e72b50ab1e8bd8479f9b37f8e79743077df6da59ee65e2409

data/CHANGELOG.md

@@ -9,6 +9,110 @@ change between releases.
 
 ## [Unreleased]
 
+## [0.18.0] - 2026-10-22
+
+Minor release with no new components. IME composition, Turbo morphs, and form
+submission now behave consistently across the input components, and several
+contracts change, so read Changed before upgrading. The Inspector manifest moves
+to schema v16; update `stimeo check` and the VS Code extension together and run
+`stimeo check` before deploying.
+
+### Added
+
+- time-picker: `amLabel` and `pmLabel` Values set the meridiem text and its
+  speech, and `hour12ZeroBased` shows and enters a twelve-hour clock's hours as
+  0–11, as `午前` / `午後` time is written. The submitted value stays on the
+  24-hour clock.
+
+### Changed
+
+- **Breaking** input-mask: a synchronized hidden field carries a unique internal
+  DOM name; native FormData and native / Turbo submission restore the original
+  name, and removing the source submits an empty entry. Find managed fields by id
+  or the pairing attribute, use native FormData, and call
+  `prepareInputMaskForm(form)` before reading FormData from a new detached form.
+  input-mask clears only the raw value it wrote.
+- **Breaking** otp: a pattern drop held for a composition is reported as
+  `reconcile` before the edit's own `change` / `complete` / `invalid`, and a
+  reconnect under another `pattern` drops what it rejects as `reconcile`. Use the
+  edit events for submission.
+- **Breaking** number-input: a range or step change made during IME composition
+  applies when the user confirms, reported as `change`; a morph that changes
+  neither holds nothing.
+- **Breaking** currency-input: actions and events act only on the first `display`
+  target, and a display already focused when the controller connects starts
+  formatting at its next ordinary edit or composition end. Render the initial
+  hidden and accessible values on the server. `stimeo check` warns about extra
+  displays.
+- **Breaking** tabs, calendar, date-range-picker, slider, range-slider,
+  color-picker, multi-select, and tags-input read the writing direction from their
+  layout targets instead of the root; carousel gains a `pickerList` and
+  navigation-menu a `list` target.
+- **Breaking** dirty-form and optimistic accept only the terminal event matching
+  the latest start's source and token, and only `success: true` succeeds. For a
+  custom save, call `markClean` or dispatch the paired events with `success`.
+- **Breaking** local-time and relative-time read `datetime` strictly: a clock
+  without a zone is UTC (relative-time read it as local time), and an incomplete
+  or invalid value keeps the current display.
+- **Breaking** presence and typing-indicator templates use `{count}`, `{name}`,
+  and `{names}` instead of `%{…}`.
+- **Breaking** modified `Home` / `End` / `PageUp` / `PageDown` go to the browser
+  in widgets without a dedicated binding; pointer-drag cancels a keyboard grab
+  when focus leaves the handle; time-picker accepts digits typed with `Shift`.
+- **Breaking** progress, meter, pointer-drag, countdown, overflow-menu, listbox,
+  submit-once, clipboard, announcer, and currency-input change their ownership
+  markers (pointer-drag: `data-stimeo--pointer-drag-tabindex-loan`, listbox:
+  `owns-label`); re-render persisted HTML from authored markup. progress and meter
+  restore the authored `aria-valuetext` when the template is cleared or the
+  controller disconnects.
+- **Breaking** menubar, navigation-menu, menu, and context-menu treat an entry
+  inside an `aria-disabled="true"` ancestor as disabled (it stays reachable with
+  the arrow keys), and with nested entries refuse an action when any entry holding
+  its target is disabled. A click is judged when it reaches the component, so a
+  handler inside the component that disables its entry during the click keeps the
+  open or close it started; a menubar top it leaves natively `disabled` then has
+  its menu closed again, without a `close` event.
+- **Breaking** pointer-drag: `reset()` returns the inline `translate` to the
+  origin only when `follow` is on; otherwise it cancels the gesture in flight and
+  leaves the author's `translate` alone.
+- toggle-group writes `aria-pressed`, time-picker `aria-valuenow`, and radio-group
+  its arrival and release `tabindex` only when the value changes.
+- context-menu: the region contract drops `aria-haspopup`; give the region a role
+  and name that fit its content and advertise the key with
+  `aria-keyshortcuts="Shift+F10"`.
+- `stimeo check` reports `missing-announcer` for the `stimeo-ui/cable`
+  controllers (live-counter, presence, typing-indicator), and the
+  `stimeo:install` generator writes commented-out pins and registrations for the
+  opt-in `stimeo-ui/cable` and `stimeo-ui/positioning` entry points.
+
+### Removed
+
+- character-counter: the `announceTextValueChanged()` callback is gone from the
+  shipped types; pending announcements still read the current `announceText`.
+
+### Fixed
+
+- IME composition no longer sticks after a page write, a move, or a Turbo morph
+  in auto-submit, character-counter, combobox, command-palette, currency-input,
+  editable, input-mask, multi-select, number-input, otp, tags-input, and toolbar.
+  A morph leaves a field mid-composition alone, and a focused draft survives
+  morphs and reconnection.
+- switch, otp, currency-input, and input-mask keep their hidden form values right
+  across Turbo morphs and removal.
+- State events and reconciliation stay right when a `change` listener disconnects
+  the controller or the page edits state during a repair.
+- Components release what an earlier connection registered when connected twice,
+  and keep authored text, ARIA, and tab stops through restores.
+- relative-time follows live `datetime` changes; template substitution leaves
+  inherited names such as `{constructor}` unchanged.
+- menubar, navigation-menu, menu, and context-menu refuse a `hidden`, natively
+  `disabled`, or `aria-disabled` entry on every route — an explicit element, any
+  event, or hover — as a click on it already was; `context-menu#activate` takes
+  the optional event.
+- The MCP server accepts JSON-RPC batches in sessions that negotiated protocol
+  version 2025-03-26; other versions, and batches before `initialize`, are still
+  rejected.
+
 ## [0.17.0] - 2026-10-04
 
 ### Changed
@@ -1307,7 +1411,8 @@ Initial public alpha: 101 behavior-only, accessible Stimulus controllers driven
 by `data-*` attributes, shipping no CSS. Published to npm (with provenance) and
 RubyGems.
 
-[Unreleased]: https://github.com/taiyaky/stimeo-ui/compare/v0.17.0...HEAD
+[Unreleased]: https://github.com/taiyaky/stimeo-ui/compare/v0.18.0...HEAD
+[0.18.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.18.0
 [0.17.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.17.0
 [0.16.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.16.0
 [0.15.0]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.15.0

data/README.md

@@ -15,9 +15,9 @@
 owns the look entirely.
 
 - Lean by design: the **core** needs only `@hotwired/stimulus` at runtime (kept
-  external in the build). The opt-in `stimeo-ui/positioning` module is the one
-  exception — it uses `@floating-ui/dom` (an optional **peer dependency**; see the
-  Peer dependencies note below).
+  external in the build). Two opt-in subpaths each add one optional **peer
+  dependency**: `stimeo-ui/positioning` (`@floating-ui/dom`) and `stimeo-ui/cable`
+  (`@rails/actioncable`); see the Peer dependencies note below.
 - Accessibility first: every controller follows the relevant WAI-ARIA APG pattern
   and the related WCAG 2.2 AA criteria.
 - Public controller identifiers use the `stimeo--` namespace (e.g.
@@ -36,8 +36,12 @@ bin/rails generate stimeo:install
 ```
 
 The generator vendors the prebuilt JS into `vendor/javascript/stimeo/`, pins
-`stimeo-ui` in `config/importmap.rb`, and registers all controllers with your
-Stimulus application. Then drive components from HTML alone:
+`stimeo-ui` in `config/importmap.rb`, and registers the core controllers with your
+Stimulus application (`app/javascript/controllers/stimeo.js`). It writes the opt-in
+`stimeo-ui/positioning` and `stimeo-ui/cable` entry points into those two files
+commented out; to enable one, uncomment its lines. The cable lines include the pin
+for its `@rails/actioncable` peer; positioning also needs a pin for
+`@floating-ui/dom`. Then drive components from HTML alone:
 
 ```erb
 <div data-controller="stimeo--dropdown">
@@ -58,9 +62,12 @@ import { Application } from "@hotwired/stimulus";
 import { registerStimeo } from "stimeo-ui";
 
 const application = Application.start();
-registerStimeo(application); // registers every stimeo--* controller
+registerStimeo(application); // registers every controller of the core entry point
 ```
 
+The opt-in `stimeo-ui/positioning` and `stimeo-ui/cable` entry points register
+theirs with `registerPositioning` / `registerCable`.
+
 Need only a few controllers? Import them individually from
 `stimeo-ui/controllers/*` and register them under your own identifiers. Each
 file loads on its own, yet the coordination between components — which layer
@@ -73,7 +80,8 @@ and peer departure decisions; generated ARIA ids stay distinct across copies too
 
 - **Peer dependencies:** `@hotwired/stimulus` (always), `@floating-ui/dom` (only
   if you use the opt-in `stimeo-ui/positioning` module — tooltips, popovers, etc.
-  work without it via the default flow layout).
+  work without it via the default flow layout), and `@rails/actioncable` (only if
+  you use the opt-in `stimeo-ui/cable` module).
 - **No CSS is shipped.** Style the components yourself; controllers only toggle
   ARIA state and `data-*` hooks.
 
@@ -118,8 +126,9 @@ keep the rules on everywhere else. For Biome:
 The `eslint-plugin-jsx-a11y` equivalents are
 `no-noninteractive-element-to-interactive-role`, `no-redundant-roles`,
 `prefer-tag-over-role`, `interactive-supports-focus`, and
-`no-noninteractive-tabindex`. These components' real accessibility is exercised
-with axe-core and real screen readers in this project's own test suite.
+`no-noninteractive-tabindex`. This repository's tests check these components
+with axe-core and with a virtual screen reader for speech order; neither stands
+in for a real screen reader on your own pages.
 
 ## Composing components
 
@@ -279,7 +288,7 @@ or in `.mcp.json` (Claude Code) / `.cursor/mcp.json` (Cursor):
 It exposes four read-only tools — `stimeo_check` (validate a source string),
 `stimeo_catalog`, `stimeo_controller` (one controller's full contract,
 accessibility requirements included), and `stimeo_example` (verified example
-markup: the official catalog demo under [`examples/`](examples/), bundled at
+markup: the controller's demo under [`examples/`](examples/), bundled at
 build time and guaranteed to pass the checker) — plus MCP resources
 (`stimeo://manifest`, `stimeo://examples/<id>`) for preloading context without
 a tool round-trip. The server reads only its bundled manifest and example

data/dist/cable/index.js

@@ -1,6 +1,13 @@
 import { Controller } from '@hotwired/stimulus';
 import { createConsumer } from '@rails/actioncable';
 
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = Object.hasOwn(values, name) ? values[name] : void 0;
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
 function announce(message, options = {}) {
   const text = message.trim();
   if (text.length === 0) return;
@@ -10,12 +17,6 @@ function announce(message, options = {}) {
     })
   );
 }
-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);
-  });
-}
 
 var TOKEN_BODY = /\d[\d.,'’’    _]*\d|\d/;
 var SIGN_OPENER = /[\s([]/;
@@ -97,6 +98,9 @@ var MicrotaskCoalescer = class {
     this.#queued = false;
     this.#generation += 1;
   }
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -138,6 +142,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();
@@ -601,6 +608,7 @@ var PresenceController = class _PresenceController extends Controller {
   #pendingBeacon = null;
   #announceId = null;
   #connected = false;
+  #cycleListeners = new ListenerSet();
   #speakerKey = "";
   #speakerId = "";
   channelValueChanged() {
@@ -666,10 +674,10 @@ var PresenceController = class _PresenceController extends Controller {
       received: (data) => this.#onReceived(data)
     });
     this.#armHeartbeat();
-    window.addEventListener("pagehide", this.#onPageHide);
+    this.#cycleListeners.add(window, "pagehide", this.#onPageHide);
   }
   #close() {
-    window.removeEventListener("pagehide", this.#onPageHide);
+    this.#cycleListeners.dispose();
     this.#sendLeaveNotice(this.#releaseSpeaker());
     this.#subscription?.unsubscribe();
     this.#subscription = null;
@@ -797,7 +805,7 @@ ${this.#speakerId}`;
   #countMessage(count) {
     const templates = this.countTarget.dataset;
     const template = (count === 0 ? templates.zero : count === 1 ? templates.one : templates.other) ?? templates.other;
-    return template ? template.replace("%{count}", String(count)) : String(count);
+    return template ? fillTemplate(template, { count }) : String(count);
   }
   #drawList() {
     if (!this.hasListTarget) return;
@@ -877,7 +885,6 @@ var TRANSIENT3 = new TransientHooks({
 });
 var DEFAULT_TIMEOUT = 3e3;
 var DEFAULT_THROTTLE = 2e3;
-var fillTokens = (template, values) => template.replace(/%\{(name|names|count)\}/g, (match, token) => values[token] ?? match);
 var TypingIndicatorController = class _TypingIndicatorController extends Controller {
   #numbers = new NumberValueReader();
   static targets = ["input", "status"];
@@ -905,6 +912,7 @@ var TypingIndicatorController = class _TypingIndicatorController extends Control
   #lastSentAt = 0;
   #announceId = null;
   #connected = false;
+  #listeners = new ListenerSet();
   channelValueChanged() {
     this.#follow.schedule();
   }
@@ -927,14 +935,14 @@ var TypingIndicatorController = class _TypingIndicatorController extends Control
   connect() {
     this.#connected = true;
     this.#reset();
-    this.element.addEventListener("input", this.#onInput);
+    this.#listeners.add(this.element, "input", this.#onInput);
     this.#follow.activate();
     this.#open();
   }
   disconnect() {
     this.#connected = false;
     this.#follow.cancel();
-    this.element.removeEventListener("input", this.#onInput);
+    this.#listeners.dispose();
     this.#close();
     this.#reset();
   }
@@ -1034,10 +1042,10 @@ var TypingIndicatorController = class _TypingIndicatorController extends Control
     if (names.length === 1) {
       const template2 = this.statusTarget.dataset.one;
       const name = names[0] ?? "";
-      return template2 ? fillTokens(template2, { name }) : `${name} is typing\u2026`;
+      return template2 ? fillTemplate(template2, { name }) : `${name} is typing\u2026`;
     }
     const template = this.statusTarget.dataset.many;
-    return template ? fillTokens(template, { names: joined, count: String(names.length) }) : `${joined} are typing\u2026`;
+    return template ? fillTemplate(template, { names: joined, count: names.length }) : `${joined} are typing\u2026`;
   }
   get #safeTimeout() {
     return this.#numbers.read(

data/dist/controllers/accordion_controller.js

@@ -26,6 +26,16 @@ 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");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
 
 function sharedRegistry(key, create) {
   const symbol = Symbol.for(key);
@@ -81,9 +91,8 @@ var StateRegions = class _StateRegions {
         const below = hold.linked ? stack[index - 1] : void 0;
         if (below) {
           if (region.hidden !== below.written) region.hidden = below.written;
-        } else if (region.getAttribute("hidden") !== hold.authored) {
-          if (hold.authored === null) region.removeAttribute("hidden");
-          else region.setAttribute("hidden", hold.authored);
+        } else {
+          setAttributeIfChanged(region, "hidden", hold.authored);
         }
       }
       this.#mark(region, stack);
@@ -158,9 +167,7 @@ var StateRegions = class _StateRegions {
       );
     });
     for (const [name, recorded] of records) {
-      if (region.getAttribute(name) === recorded) continue;
-      if (recorded === null) region.removeAttribute(name);
-      else region.setAttribute(name, recorded);
+      setAttributeIfChanged(region, name, recorded);
     }
   }
   #recorded(region, name) {
@@ -251,6 +258,7 @@ var AccordionController = class extends Controller {
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifierChord(event)) return;
     const current = event.currentTarget;
     if (this.triggerTargets.indexOf(current) === -1) return;
     const navigable = this.triggerTargets.filter((trigger) => trigger.closest("[hidden]") === null);