stimeo-ui 0.18.0 → 0.18.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 05c2871de0e4c97223dfb10803e8c4fa84abc3a0cf5e9c946d6570d88c46f065
-  data.tar.gz: a772dc1b21e16d21ea37af8dbb2f6a56618fa94252fe43eebcbede4ab296c2a2
+  metadata.gz: 54a0ca530097c890ee9b7292939afa617a822905abb0c8b93ee841c9bbc196b8
+  data.tar.gz: 7ffbb49e1e7c617aadd557a774d0d88fd4d79361d56aa3ea3b7e656d492e2adf
 SHA512:
-  metadata.gz: a74a9a638fadb04fcec7c72ced80825fb75215051533508d2e58c40fc64ef4eb3aa41a0b76ee85ab9697004f9861d6b6a46b75ec62c39b013d274487f7986d42
-  data.tar.gz: 2b0ff0e66bc0f7062c241ee01032888206b300eb74c552561c3638638a9255a19ea69b1a9555fa5e72b50ab1e8bd8479f9b37f8e79743077df6da59ee65e2409
+  metadata.gz: 5b1c8cde31c41ff03270c5f8e5d94cfe75b453eaf89d0bd6dcbca1bf095a360b7669e2012860812c5b7b4fa0e363cba5c6dbb156419f971ba042af8c46dff4d7
+  data.tar.gz: 1ced263a41d46a475685c30b0e636b14fe6307aa310ce7d80ec5fd645662c6eb16d1af05c6dc1a3d006cb1da0d5506af14072e1706d2ddff932e82a2b6260847

data/CHANGELOG.md

@@ -7,7 +7,36 @@ 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
 
@@ -1411,7 +1440,7 @@ 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.18.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

data/dist/controllers/command_palette_controller.js

@@ -1629,6 +1629,7 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
     return this.hasDialogTarget && !this.dialogTarget.hidden;
   }
   #onGlobalKeydown = (event) => {
+    if (event.defaultPrevented) return;
     if (this.#composition.isComposing(event) || !this.#matchesHotkey(event)) return;
     event.preventDefault();
     this.toggle();

data/dist/controllers/dismissible_controller.js

@@ -323,6 +323,8 @@ var DismissibleController = class extends Controller {
       if (document.activeElement === candidate) return;
     }
     document.body.focus();
+    const remaining = document.activeElement;
+    if (remaining instanceof HTMLElement && root.contains(remaining)) remaining.blur();
   }
   *#focusFallbacks(root) {
     const explicitFallback = this.hasFallbackTarget ? this.fallbackTarget : null;

data/dist/controllers/editable_controller.js

@@ -420,6 +420,7 @@ var EditableController = class extends Controller {
     this.#revertValue = null;
   }
   onDisplayKeydown(event) {
+    if (event.defaultPrevented) return;
     if (event.key === "F2") {
       event.preventDefault();
       this.edit();

data/dist/controllers/input_mask_controller.js

@@ -590,6 +590,27 @@ var InputMaskController = class extends Controller {
   #textBeforeComposition = "";
   #formatted = null;
   #shown = { result: null, empty: true };
+  #edits = new ListenerSet();
+  #onBeforeInput = (event) => {
+    const data = event.data;
+    if (event.defaultPrevented || !event.cancelable || event.inputType !== "insertText" || data === null || Array.from(data).length !== 1 || !this.#started || this.#composition.isComposing(event))
+      return;
+    const input = this.element;
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    if (start === null || end === null || start === end || input.readOnly || input.disabled || inheritsFieldsetDisabled(input) || !input.isConnected || !this.application.element.contains(input) || !(input.getAttribute("data-controller") ?? "").split(/\s+/).includes(this.identifier) || this.patternValue === "" || this.#formatted !== this.#declared || input.value !== this.#lastValue)
+      return;
+    const prefix = applyMask(input.value.slice(0, start), this.patternValue, this.#tokens);
+    for (const character of Array.from(this.patternValue).slice(prefix.tokenFlags.length)) {
+      const token = this.#tokens.get(character);
+      if (token) {
+        if (acceptedForm(token, data) === null) event.preventDefault();
+        return;
+      }
+      if (halfWidthChar(data) === halfWidthChar(character)) return;
+    }
+    event.preventDefault();
+  };
   #composition = new CompositionTracker({
     onStart: () => {
       this.#textBeforeComposition = this.element.value;
@@ -625,6 +646,7 @@ var InputMaskController = class extends Controller {
     this.#morph.observe(this.element);
     this.#started = true;
     this.#composition.observe(this.element);
+    this.#edits.add(this.element, "beforeinput", this.#onBeforeInput);
     if (!this.unmaskToHiddenValue) this.#withdraw();
     if (this.#composition.isComposing()) {
       this.#reformat("reconcile");
@@ -639,6 +661,7 @@ var InputMaskController = class extends Controller {
   disconnect() {
     this.#morph.disconnect();
     this.#started = false;
+    this.#edits.dispose();
     this.#composition.disconnect();
     this.#adoption.clearAll();
     this.#gate.disconnected(this, () => this.#retractRaw());

data/dist/controllers/multi_select_controller.js

@@ -1118,7 +1118,9 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     focusAfterEnd: () => this.#focusInput()
   });
   #listeners = new ListenerSet();
+  #tab = null;
   connect() {
+    this.#tab = null;
     this.#tabindex.reclaim(this.element);
     this.#rows.connect();
     this.#normalizeSelection([]);
@@ -1130,6 +1132,9 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#selectionValues = this.#values;
     this.#syncFields();
     this.#listeners.add(document, "click", this.#onOutsideClick, { capture: true });
+    this.#listeners.add(this.element, "keydown", this.#onTab);
+    for (const type of ["focus", "keydown", "keyup", "pointerdown"])
+      this.#listeners.add(document, type, this.#trackTab, { capture: true });
     this.#connected = true;
     this.#reconcile.observe(this.element);
   }
@@ -1151,6 +1156,7 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#composition.disconnect();
     this.#chipRow.disconnect();
     this.#listeners.dispose();
+    this.#tab = null;
     this.#releaseTabindex();
   }
   optionTargetConnected() {
@@ -1320,7 +1326,11 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#setActive(visible[0] ?? null);
     this.dispatch("filter", { detail: { query } });
   }
-  open() {
+  open(event) {
+    if (event instanceof FocusEvent && event === this.#tab) {
+      this.#tab = null;
+      return;
+    }
     if (!this.hasListTarget || !this.hasInputTarget) {
       this.#reflectEmpty();
       return;
@@ -1407,6 +1417,16 @@ var MultiSelectController = class _MultiSelectController extends Controller {
         break;
     }
   }
+  #onTab = (event) => {
+    if (event.key !== "Tab" || event.defaultPrevented || event.isComposing || !this.hasTagsTarget || !this.tagsTarget.contains(event.target))
+      return;
+    this.#tab = event;
+    this.close();
+  };
+  #trackTab = (event) => {
+    const key = this.#tab;
+    this.#tab = event.type === "focus" && key instanceof KeyboardEvent && !key.defaultPrevented && event.target === this.inputTargets[0] ? event : null;
+  };
   toggleOption(source) {
     const { event, host, origin, reason } = actionSource(source);
     if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)

data/dist/controllers/pointer_drag_controller.js

@@ -408,6 +408,7 @@ var PointerDragController = class _PointerDragController extends Controller {
   #tabindex = new TabindexLoan("0", this.identifier, { preserveFocus: true });
   #pointer = null;
   #keyboard = null;
+  #connected = false;
   #keyboardFocusSession = null;
   #listeners = new ListenerSet();
   #shadowFocus = new ListenerSet();
@@ -421,6 +422,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#reflectSession();
   });
   connect() {
+    this.#connected = true;
     this.#morphRender.observe(this.element);
     if (!this.#pointer && !this.#keyboard) this.#followOutput = null;
     this.#gate.cancel();
@@ -438,6 +440,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
   }
   disconnect() {
+    this.#connected = false;
     this.#morphRender.disconnect();
     this.#listeners.dispose();
     this.#shadowFocus.dispose();
@@ -464,7 +467,9 @@ var PointerDragController = class _PointerDragController extends Controller {
   }
   handleTargetDisconnected(handle) {
     this.#restoreHandle(handle);
-    if (this.element.contains(handle)) return;
+    if (!this.#connected) return;
+    if (this.element.contains(handle) && (this.handleTargets.includes(handle) || DetachGate.isDetached(this)))
+      return;
     const interrupted = this.#pointer?.handle === handle && this.#pointer.started ? this.#pointer.pointerType : this.#keyboard?.handle === handle ? "keyboard" : null;
     if (this.#pointer?.handle === handle) this.#endPointerSession();
     if (this.#keyboard?.handle === handle) this.#clearKeyboardSession();

data/dist/controllers/popover_controller.js

@@ -369,6 +369,7 @@ var PopoverController = class extends Controller {
     this.#close("api");
     this.#listeners.add(document, "click", this.#onOutsideClick, { capture: true });
     this.#listeners.add(this.element, "focusout", this.#onFocusOut);
+    this.#listeners.add(document, "focusin", this.#onDocumentFocusIn, { capture: true });
     this.#connected = true;
     this.#reporting = true;
   }
@@ -475,6 +476,14 @@ var PopoverController = class extends Controller {
     if (!(next instanceof Node) || this.element.contains(next)) return;
     this.#close("focus");
   };
+  #onDocumentFocusIn = (event) => {
+    if (!this.#closable) return;
+    const target = event.target;
+    if (!(target instanceof Node) || target === document.body || this.element.contains(target)) {
+      return;
+    }
+    this.#close("focus");
+  };
   get #isOpen() {
     return this.hasPanelTarget && !this.panelTarget.hidden;
   }

data/dist/index.js

@@ -5735,6 +5735,7 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
     return this.hasDialogTarget && !this.dialogTarget.hidden;
   }
   #onGlobalKeydown = (event) => {
+    if (event.defaultPrevented) return;
     if (this.#composition.isComposing(event) || !this.#matchesHotkey(event)) return;
     event.preventDefault();
     this.toggle();
@@ -9037,6 +9038,8 @@ var DismissibleController = class extends Controller {
       if (document.activeElement === candidate) return;
     }
     document.body.focus();
+    const remaining = document.activeElement;
+    if (remaining instanceof HTMLElement && root.contains(remaining)) remaining.blur();
   }
   *#focusFallbacks(root) {
     const explicitFallback = this.hasFallbackTarget ? this.fallbackTarget : null;
@@ -9482,6 +9485,7 @@ var EditableController = class extends Controller {
     this.#revertValue = null;
   }
   onDisplayKeydown(event) {
+    if (event.defaultPrevented) return;
     if (event.key === "F2") {
       event.preventDefault();
       this.edit();
@@ -11666,6 +11670,27 @@ var InputMaskController = class extends Controller {
   #textBeforeComposition = "";
   #formatted = null;
   #shown = { result: null, empty: true };
+  #edits = new ListenerSet();
+  #onBeforeInput = (event) => {
+    const data = event.data;
+    if (event.defaultPrevented || !event.cancelable || event.inputType !== "insertText" || data === null || Array.from(data).length !== 1 || !this.#started || this.#composition.isComposing(event))
+      return;
+    const input = this.element;
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    if (start === null || end === null || start === end || input.readOnly || input.disabled || inheritsFieldsetDisabled(input) || !input.isConnected || !this.application.element.contains(input) || !(input.getAttribute("data-controller") ?? "").split(/\s+/).includes(this.identifier) || this.patternValue === "" || this.#formatted !== this.#declared || input.value !== this.#lastValue)
+      return;
+    const prefix = applyMask(input.value.slice(0, start), this.patternValue, this.#tokens);
+    for (const character of Array.from(this.patternValue).slice(prefix.tokenFlags.length)) {
+      const token = this.#tokens.get(character);
+      if (token) {
+        if (acceptedForm(token, data) === null) event.preventDefault();
+        return;
+      }
+      if (halfWidthChar(data) === halfWidthChar(character)) return;
+    }
+    event.preventDefault();
+  };
   #composition = new CompositionTracker({
     onStart: () => {
       this.#textBeforeComposition = this.element.value;
@@ -11701,6 +11726,7 @@ var InputMaskController = class extends Controller {
     this.#morph.observe(this.element);
     this.#started = true;
     this.#composition.observe(this.element);
+    this.#edits.add(this.element, "beforeinput", this.#onBeforeInput);
     if (!this.unmaskToHiddenValue) this.#withdraw();
     if (this.#composition.isComposing()) {
       this.#reformat("reconcile");
@@ -11715,6 +11741,7 @@ var InputMaskController = class extends Controller {
   disconnect() {
     this.#morph.disconnect();
     this.#started = false;
+    this.#edits.dispose();
     this.#composition.disconnect();
     this.#adoption.clearAll();
     this.#gate.disconnected(this, () => this.#retractRaw());
@@ -13885,7 +13912,9 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     focusAfterEnd: () => this.#focusInput()
   });
   #listeners = new ListenerSet();
+  #tab = null;
   connect() {
+    this.#tab = null;
     this.#tabindex.reclaim(this.element);
     this.#rows.connect();
     this.#normalizeSelection([]);
@@ -13897,6 +13926,9 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#selectionValues = this.#values;
     this.#syncFields();
     this.#listeners.add(document, "click", this.#onOutsideClick, { capture: true });
+    this.#listeners.add(this.element, "keydown", this.#onTab);
+    for (const type of ["focus", "keydown", "keyup", "pointerdown"])
+      this.#listeners.add(document, type, this.#trackTab, { capture: true });
     this.#connected = true;
     this.#reconcile.observe(this.element);
   }
@@ -13918,6 +13950,7 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#composition.disconnect();
     this.#chipRow.disconnect();
     this.#listeners.dispose();
+    this.#tab = null;
     this.#releaseTabindex();
   }
   optionTargetConnected() {
@@ -14087,7 +14120,11 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#setActive(visible[0] ?? null);
     this.dispatch("filter", { detail: { query } });
   }
-  open() {
+  open(event) {
+    if (event instanceof FocusEvent && event === this.#tab) {
+      this.#tab = null;
+      return;
+    }
     if (!this.hasListTarget || !this.hasInputTarget) {
       this.#reflectEmpty();
       return;
@@ -14174,6 +14211,16 @@ var MultiSelectController = class _MultiSelectController extends Controller {
         break;
     }
   }
+  #onTab = (event) => {
+    if (event.key !== "Tab" || event.defaultPrevented || event.isComposing || !this.hasTagsTarget || !this.tagsTarget.contains(event.target))
+      return;
+    this.#tab = event;
+    this.close();
+  };
+  #trackTab = (event) => {
+    const key = this.#tab;
+    this.#tab = event.type === "focus" && key instanceof KeyboardEvent && !key.defaultPrevented && event.target === this.inputTargets[0] ? event : null;
+  };
   toggleOption(source) {
     const { event, host, origin, reason } = actionSource(source);
     if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
@@ -17986,6 +18033,7 @@ var PointerDragController = class _PointerDragController extends Controller {
   #tabindex = new TabindexLoan("0", this.identifier, { preserveFocus: true });
   #pointer = null;
   #keyboard = null;
+  #connected = false;
   #keyboardFocusSession = null;
   #listeners = new ListenerSet();
   #shadowFocus = new ListenerSet();
@@ -17999,6 +18047,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#reflectSession();
   });
   connect() {
+    this.#connected = true;
     this.#morphRender.observe(this.element);
     if (!this.#pointer && !this.#keyboard) this.#followOutput = null;
     this.#gate.cancel();
@@ -18016,6 +18065,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
   }
   disconnect() {
+    this.#connected = false;
     this.#morphRender.disconnect();
     this.#listeners.dispose();
     this.#shadowFocus.dispose();
@@ -18042,7 +18092,9 @@ var PointerDragController = class _PointerDragController extends Controller {
   }
   handleTargetDisconnected(handle) {
     this.#restoreHandle(handle);
-    if (this.element.contains(handle)) return;
+    if (!this.#connected) return;
+    if (this.element.contains(handle) && (this.handleTargets.includes(handle) || DetachGate.isDetached(this)))
+      return;
     const interrupted = this.#pointer?.handle === handle && this.#pointer.started ? this.#pointer.pointerType : this.#keyboard?.handle === handle ? "keyboard" : null;
     if (this.#pointer?.handle === handle) this.#endPointerSession();
     if (this.#keyboard?.handle === handle) this.#clearKeyboardSession();
@@ -18397,6 +18449,7 @@ var PopoverController = class extends Controller {
     this.#close("api");
     this.#listeners.add(document, "click", this.#onOutsideClick, { capture: true });
     this.#listeners.add(this.element, "focusout", this.#onFocusOut);
+    this.#listeners.add(document, "focusin", this.#onDocumentFocusIn, { capture: true });
     this.#connected = true;
     this.#reporting = true;
   }
@@ -18503,6 +18556,14 @@ var PopoverController = class extends Controller {
     if (!(next instanceof Node) || this.element.contains(next)) return;
     this.#close("focus");
   };
+  #onDocumentFocusIn = (event) => {
+    if (!this.#closable) return;
+    const target = event.target;
+    if (!(target instanceof Node) || target === document.body || this.element.contains(target)) {
+      return;
+    }
+    this.#close("focus");
+  };
   get #isOpen() {
     return this.hasPanelTarget && !this.panelTarget.hidden;
   }

data/lib/stimeo/ui/version.rb

@@ -5,6 +5,6 @@ module Stimeo
     # Kept in lockstep with package.json (stable versions share the same
     # notation; a prerelease maps npm `-beta.N` ⇔ gem `.pre.beta.N` because
     # RubyGems forbids dashes). Bump both together.
-    VERSION = "0.18.0"
+    VERSION = "0.18.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: stimeo-ui
 version: !ruby/object:Gem::Version
-  version: 0.18.0
+  version: 0.18.1
 platform: ruby
 authors:
 - Stimeo Labs
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-10-22 00:00:00.000000000 Z
+date: 2026-10-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties