vintage-frames 0.12.6 → 0.12.8

package/custom-elements.json

@@ -6289,7 +6289,7 @@
               "kind": "field",
               "name": "#onPointerUp",
               "privacy": "private",
-              "description": "The release of a press on this icon. The drag controller hears it first\n(a started drag ends there); then a press that was kept from collapsing\nthe selection — a plain press on an already-selected member of a field —\ncollapses it now, if no drag ever began: a click on one of several\nselected icons selects that one alone, on the release rather than the\npress, so the same press could have dragged them all. A cancel collapses\nnothing. Last, the second tap of a pair opens the icon, where a\n`dblclick` would have landed in the order of things."
+              "description": "The release of a press on this icon. The drag controller hears it first\n(a started drag ends there); then a press that was kept from collapsing\nthe selection — a plain press on an already-selected member of a field —\ncollapses it now, if no drag ever began: a click on one of several\nselected icons selects that one alone, on the release rather than the\npress, so the same press could have dragged them all. A cancel collapses\nnothing. Last, the second tap of a pair opens the icon, where a\n`dblclick` would have landed in the order of things. A capture lost\nbefore the release is the release (see `DragController.onPointerUp`);\none lost after it finds all three already done."
             },
             {
               "kind": "method",

package/dist/chrome.js

@@ -29,6 +29,7 @@ var a = i`${[
     @pointermove=${e.onPointerMove}
     @pointerup=${e.onPointerUp}
     @pointercancel=${e.onPointerUp}
+    @lostpointercapture=${e.onPointerUp}
   >
     <div class=${r ? `${n} vf-tile-grid` : n}>
       ${r ?? (n === "vf-stripes" ? a : null)}

package/dist/components/vf-icon-field.js

@@ -108,7 +108,7 @@ var g = (e, t, n) => Math.min(Math.max(e, t), n), _ = class extends c(a(f)) {
 			!t || e.pointerId !== t.pointerId || this.#m(e.type === "pointercancel");
 		}, this.#p = (e) => {
 			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.#m(!0));
-		}, this.#e.role = "listbox", this.#e.ariaMultiSelectable = "true", this.addEventListener("pointerdown", this.#u), this.addEventListener("pointermove", this.#d), this.addEventListener("pointerup", this.#f), this.addEventListener("pointercancel", this.#f);
+		}, this.#e.role = "listbox", this.#e.ariaMultiSelectable = "true", this.addEventListener("pointerdown", this.#u), this.addEventListener("pointermove", this.#d), this.addEventListener("pointerup", this.#f), this.addEventListener("pointercancel", this.#f), this.addEventListener("lostpointercapture", this.#f);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.#t?.canvas?.remove(), this.#t = null, this.#S();

package/dist/components/vf-icon.js

@@ -110,7 +110,7 @@ var j, M = {
 			let r = this.#ee(t, n);
 			if (this.#a) {
 				this.#a = !1;
-				let e = t.type === "pointerup" ? this.#i : null;
+				let e = t.type === "pointercancel" ? null : this.#i;
 				for (let t of e?.querySelectorAll("vf-icon") ?? []) t !== this && t.selected && t.setSelected(!1);
 			}
 			r && e(this, "vf-open", {});
@@ -709,6 +709,7 @@ var j, M = {
       @pointermove=${this.#v.onPointerMove}
       @pointerup=${this.#$}
       @pointercancel=${this.#$}
+      @lostpointercapture=${this.#$}
       @dblclick=${this.#Q}
     >
       <div class=${a} part="icon">
@@ -798,7 +799,7 @@ var j, M = {
 	#$;
 	#ee(e, t) {
 		let n = this.#d;
-		return !n || n.pointerId !== e.pointerId || (this.#d = null, !(e.type === "pointerup" && !t && !this._editing && Math.hypot(e.clientX - n.x, e.clientY - n.y) < g(e))) ? !1 : n.second ? !0 : (this.#f = {
+		return !n || n.pointerId !== e.pointerId || (this.#d = null, !(e.type !== "pointercancel" && !t && !this._editing && Math.hypot(e.clientX - n.x, e.clientY - n.y) < g(e))) ? !1 : n.second ? !0 : (this.#f = {
 			time: n.time,
 			x: n.x,
 			y: n.y

package/dist/components/vf-window.js

@@ -445,11 +445,11 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 			let h = n ? 13 - e : e;
 			d.animations.push(p.animate([{ visibility: "visible" }, { visibility: "visible" }], {
 				delay: h * 17,
-				duration: 68,
-				endDelay: (14 - h) * 17
+				duration: 68
 			}));
 		}
-		return d;
+		let f = new Animation(new KeyframeEffect(null, null, 306));
+		return f.play(), d.animations.push(f), d;
 	}
 	#d() {
 		let t = { surface: null };

package/dist/drag.d.ts

@@ -42,7 +42,8 @@ export interface DragTarget {
 /**
  * Drag-to-move for 1-bit chrome. Bind {@link onPointerDown} / {@link onPointerMove}
  * / {@link onPointerUp} to a handle element (`vf-window`'s title bar,
- * `vf-dialog`'s title bar); the controller captures the pointer on that handle,
+ * `vf-dialog`'s title bar) — the last to `pointerup`, `pointercancel` and
+ * `lostpointercapture` alike; the controller captures the pointer on that handle,
  * tracks the delta from the press point, and hands the {@link DragTarget} a new
  * origin in system px, snapped onto the placement lattice — whole art pixels,
  * the way QuickDraw moved windows, which is also what keeps the pixel art
@@ -61,7 +62,11 @@ export declare class DragController implements ReactiveController {
     /**
      * The release — or, bound to `pointercancel` as every handle binds it, the
      * platform abandoning the gesture (a touch the browser took for a scroll),
-     * which the target hears as a cancel.
+     * which the target hears as a cancel. Bound to `lostpointercapture` too: a
+     * capture lost first ends the gesture as a release. Chrome drops it on a
+     * mouse move that reports no button down, which a trackpad can send just
+     * before its release, and the `pointerup` then lands wherever the pointer
+     * is. Idempotent: the capture released here re-enters with no gesture left.
      */
     onPointerUp: (event: PointerEvent) => void;
     /**

package/editor/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "vintage-frames",
-  "version": "0.12.6",
+  "version": "0.12.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vintage-frames",
-  "version": "0.12.6",
+  "version": "0.12.8",
   "description": "Lit web components that emulate the look and feel of classic Mac OS System 7",
   "type": "module",
   "license": "MIT",