stimeo-ui 0.17.0 → 0.18.1

package/CHANGELOG.md

@@ -7,7 +7,140 @@ 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.
 
-## [Unreleased]
+## [0.18.1] - 2026-10-31
+
+Patch release focused on keyboard ownership, focus handoff, masked selections,
+and Inspector compatibility.
+
+### Changed
+
+- Inspector host contracts can admit the `<input>` types a controller composes
+  with instead of replacing (`inputTypes`); any other `<input>` on such a host is
+  still reported as `invalid-host`. The manifest carries this as `schemaVersion`
+  17. Update Inspector engines and the VS Code extension together with their
+  manifest; an older engine reading it may report an admitted input as
+  `invalid-host`.
+- Refresh pinned build and test tooling: Biome 2.6.3, happy-dom 21.0.4,
+  tsup 9.0.0, and Rollup 4.66.0.
+
+### Fixed
+
+- command-palette and editable: respect keyboard events already handled by another
+  listener, including global shortcuts and F2.
+- multi-select: close on Tab from a chip and keep the list closed when that Tab
+  reaches the input.
+- popover: close when focus reaches an unrelated control after first falling to
+  the document body, while preserving the destination focus.
+- dismissible: release focus from hidden content when no fallback can receive
+  focus.
+- input-mask: preserve selected text when a single invalid typed character would
+  replace it.
+- pointer-drag: cancel active sessions when a handle loses its target declaration
+  and restore the fallback handle when no declared handles remain.
+
+## [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
 
@@ -1307,7 +1440,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
+[0.18.1]: https://github.com/taiyaky/stimeo-ui/releases/tag/v0.18.1
+[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

package/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

package/dist/cable/index.d.ts

@@ -145,7 +145,7 @@ declare class LiveCounterController extends Controller<HTMLElement> {
  *        data-stimeo--presence-channel-value="PresenceChannel"
  *        data-stimeo--presence-params-value='{"room":"doc_7"}'
  *        data-stimeo--presence-id-value="17" data-stimeo--presence-name-value="Alice">
- *     <span data-stimeo--presence-target="count" data-other="%{count} viewing"></span>
+ *     <span data-stimeo--presence-target="count" data-other="{count} viewing"></span>
  *     <ul data-stimeo--presence-target="list"></ul>
  *     <template data-stimeo--presence-target="template">
  *       <li><span data-presence-name></span></li>
@@ -169,7 +169,7 @@ declare class LiveCounterController extends Controller<HTMLElement> {
  * `template` pair, one clone per peer is appended (elements marked
  * `data-presence-name` receive the name; the clone root is tagged
  * `data-presence-id`), and the `count` target renders through localizable
- * `data-zero` / `data-one` / `data-other` templates (`%{count}`). Richer
+ * `data-zero` / `data-one` / `data-other` templates (`{count}`). Richer
  * per-user rendering (avatars, links) belongs to the consumer via the `join` /
  * `leave` / `change` events or a server-rendered Turbo Stream. A `template` holds
  * one root element: the clone appended for a peer, and the node removed when the
@@ -189,9 +189,10 @@ declare class LiveCounterController extends Controller<HTMLElement> {
  * whatever a Turbo cache snapshot preserved (hooks + rendered clones), renders
  * the known-empty count (the `data-present*` hooks stay absent until the first
  * beacon), and the stream re-populates; a `count` or `list` target swapped in by a
- * Stream or a morph arrives empty and is drawn from the roster as it connects; the subscription, heartbeat interval,
- * per-peer expiry timers, and the `pagehide` listener are all released on
- * `disconnect()` (Turbo navigation included).
+ * Stream or a morph arrives empty and is drawn from the roster as it connects;
+ * the subscription, heartbeat interval, per-peer expiry timers, and the
+ * `pagehide` listener are all released on `disconnect()` (Turbo navigation
+ * included).
  *
  * The live resources follow the declaration; Values changed together move them
  * once, after the batch, and nothing moves before `connect()` or after
@@ -316,7 +317,7 @@ declare class PresenceController extends Controller<HTMLElement> {
  *        data-stimeo--typing-indicator-announce-one-text-value="{name} is typing">
  *     <textarea data-stimeo--typing-indicator-target="input"></textarea>
  *     <p data-stimeo--typing-indicator-target="status"
- *        data-one="%{name} is typing…" data-many="%{names} are typing…"></p>
+ *        data-one="{name} is typing…" data-many="{names} are typing…"></p>
  *   </div>
  *
  * Server contract (a trivial rebroadcast channel):
@@ -337,8 +338,8 @@ declare class PresenceController extends Controller<HTMLElement> {
  * @remarks
  * Behavior only — the indicator's look is the consumer's CSS, keyed off the
  * `data-typing` hook; the copy is localizable through the `data-one` /
- * `data-many` templates (`%{name}` / `%{names}` / `%{count}`, terse English
- * fallback — the same channel design as `stimeo--sortable`). The own echo is
+ * `data-many` templates (`{name}` / `{names}` / `{count}`), with terse English
+ * as the fallback. The own echo is
  * dropped by comparing the broadcast `name` against `name` (a same-name guard,
  * not authentication — identity belongs to the server). Sending tracks the full
  * subscription lifecycle (via the shared confirmation-aware subscription):
@@ -563,4 +564,5 @@ declare const cableControllers: {
  */
 declare function registerCable(application: Application): void;
 
-export { type CableConsumer, type CableSubscription, type CableSubscriptionMixin, type ConfirmedCableSubscription, LiveCounterController, PresenceController, TypingIndicatorController, cableControllers, createConfirmedSubscription, getCableConsumer, registerCable, setCableConsumer };
+export { LiveCounterController, PresenceController, TypingIndicatorController, cableControllers, createConfirmedSubscription, getCableConsumer, registerCable, setCableConsumer };
+export type { CableConsumer, CableSubscription, CableSubscriptionMixin, ConfirmedCableSubscription };

package/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(