vintage-frames 0.17.0 → 0.19.0

package/dist/components/vf-icon.js

@@ -13,28 +13,29 @@ import { DragController as g } from "../drag.js";
 import { dragSlop as _, prefersReducedMotion as v, runOutlineTravel as y } from "../motion.js";
 import { deriveDragOutline as b, deriveOpenArt as x, dotOutline as S, penPhase as C, xorPenCanvas as w } from "../open-art.js";
 import { FocusRuleController as T } from "../focus-modality.js";
+import "../styles/body-italic-font.js";
 import { LitElement as E, css as D, html as O, nothing as k } from "lit";
 import { property as A, state as j } from "lit/decorators.js";
 //#region src/components/vf-icon.ts
 var M, N = {
 	large: 32,
 	small: 16
-}, P = 1, F = 8, I = (e, t, n) => n <= t ? Math.max(e, t) : Math.min(Math.max(e, t), n), L = "vf-icon-field, [role=\"listbox\"]", R = (e) => e instanceof Element && e.matches(L), z = class extends c(E) {
+}, P, F = 1, I = 8, L = (e, t, n) => n <= t ? Math.max(e, t) : Math.min(Math.max(e, t), n), R = "vf-icon-field, [role=\"listbox\"]", z = (e) => e instanceof Element && e.matches(R), B = class extends c(E) {
 	static {
 		M = this;
 	}
 	constructor(...t) {
-		super(...t), this.label = "", this.size = "large", this.selectable = !1, this.selected = !1, this.target = !1, this.color = !1, this.open = !1, this.movable = !1, this.editable = !1, this.maxlength = 31, this.scale = new n(this), this.gridSnap = new m(this), this.focusRule = new T(this), this._editing = !1, this._draft = "", this.#e = 0, this._ghost = null, this.#t = null, this.#n = this.attachInternals(), this.#a = !1, this.#o = "", this.#s = "", this.#c = 0, this.#l = -Infinity, this.#u = !1, this.#d = null, this.#f = null, this.#p = new h(this, () => [[
+		super(...t), this.label = "", this.size = "large", this.selectable = !1, this.selected = !1, this.target = !1, this.color = !1, this.open = !1, this.alias = !1, this.movable = !1, this.editable = !1, this.maxlength = 31, this.scale = new n(this), this.gridSnap = new m(this), this.focusRule = new T(this), this._editing = !1, this._draft = "", this.#e = 0, this._ghost = null, this.#t = null, this.#n = this.attachInternals(), this.#a = !1, this.#o = "", this.#s = "", this.#c = 0, this.#l = -Infinity, this.#u = !1, this.#d = null, this.#f = null, this.#p = new h(this, () => [[
 			document,
 			"pointerdown",
-			this.#ne,
+			this.#re,
 			!0
 		]]), this.#m = (e, t, n) => this.#h() ? {
 			x: Math.max(e, 0),
 			y: Math.max(t, n.top)
 		} : {
-			x: I(e, 0, n.width - a(this.offsetWidth, this)),
-			y: I(t, n.top, n.height - a(this.offsetHeight, this))
+			x: L(e, 0, n.width - a(this.offsetWidth, this)),
+			y: L(t, n.top, n.height - a(this.offsetHeight, this))
 		}, this.#g = new s(this, (e, t, n) => this.#m(e, t, n)), this.#_ = null, this.#v = new g(this, {
 			onDragStart: (e) => {
 				if (!this.movable || e.button !== 0 || this._editing) return null;
@@ -85,20 +86,20 @@ var M, N = {
 			this.#x?.finish();
 		}, this.#w = (e) => {
 			e.key !== "Escape" || !this.#x || (e.preventDefault(), e.stopPropagation(), this.#x.finish());
-		}, this.#I = !1, this.#B = () => {
-			this.#H(), this.#q();
-		}, this.#V = () => {
-			this.#U();
-		}, this.#K = () => {
+		}, this.#I = !1, this.#V = () => {
+			this.#U(), this.#J();
+		}, this.#H = () => {
+			this.#W();
+		}, this.#q = () => {
 			queueMicrotask(() => {
 				if (!this._editing) return;
 				let e = this.renderRoot.querySelector("input");
 				e && this.renderRoot.activeElement === e || this.commitEditing();
 			});
-		}, this.#Q = (e) => {
+		}, this.#$ = (e) => {
 			if (e.button !== 0 || this._editing) return;
 			let t = e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("label")), n = this.selected, r = e.timeStamp - this.#l < 800;
-			this.#l = e.timeStamp, this.#G();
+			this.#l = e.timeStamp, this.#K();
 			let i = this.#f;
 			this.#f = null, this.#u = e.pointerType !== "mouse", this.#d = this.#u && e.isPrimary ? {
 				pointerId: e.pointerId,
@@ -108,44 +109,44 @@ var M, N = {
 				second: i !== null && e.timeStamp - i.time <= 500 && Math.hypot(e.clientX - i.x, e.clientY - i.y) <= 24
 			} : null;
 			let a = !e.shiftKey && !e.metaKey;
-			this.selectable && (a ? this.#Z(!0) : this.#Z(!this.selected)), this.#a = a && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#W(), this.#Y && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#v.onPointerDown(e);
-		}, this.#$ = () => {
+			this.selectable && (a ? this.#Q(!0) : this.#Q(!this.selected)), this.#a = a && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#G(), this.#X && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#v.onPointerDown(e);
+		}, this.#ee = () => {
 			this._editing || this.#u || e(this, "vf-open", {});
-		}, this.#ee = (t) => {
+		}, this.#te = (t) => {
 			let n = this.#_?.proposal != null;
 			this.#v.onPointerUp(t);
-			let r = this.#te(t, n);
+			let r = this.#ne(t, n);
 			if (this.#a) {
 				this.#a = !1;
 				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", {});
-		}, this.#ne = (e) => {
+		}, this.#re = (e) => {
 			let t = e.composedPath();
-			if (t.includes(this) || (this.#G(), this.#f = null, e.shiftKey || e.metaKey)) return;
+			if (t.includes(this) || (this.#K(), this.#f = null, e.shiftKey || e.metaKey)) return;
 			let n = this.#i;
 			if (n !== null) {
 				let e = t.find((e) => e instanceof M);
-				if (!e && !t.some(R) || e?.selected && e.#i === n) return;
+				if (!e && !t.some(z) || e?.selected && e.#i === n) return;
 			}
-			this.#Z(!1);
-		}, this.#re = (e) => {
+			this.#Q(!1);
+		}, this.#ie = (e) => {
 			let t = e.target, n = e.data ?? e.dataTransfer?.getData("text") ?? "";
 			if (n === "") return;
 			let r = t.selectionStart ?? t.value.length, i = t.selectionEnd ?? r, a = t.value.slice(0, r) + n + t.value.slice(i);
-			a.length > this.maxlength && this.#ae(a);
-		}, this.#ie = (e) => {
+			a.length > this.maxlength && this.#oe(a);
+		}, this.#ae = (e) => {
 			let t = e.target;
 			if (t.value.length > this.maxlength) {
 				let e = t.value, n = Math.min(t.selectionStart ?? this.maxlength, this.maxlength);
-				t.value = e.slice(0, this.maxlength), t.setSelectionRange(n, n), this.#ae(e);
+				t.value = e.slice(0, this.maxlength), t.setSelectionRange(n, n), this.#oe(e);
 			}
 			this._draft = t.value;
-		}, this.#oe = (e) => {
+		}, this.#se = (e) => {
 			e.key === "Enter" ? (e.preventDefault(), this.commitEditing(), this.focus()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.cancelEditing(), this.focus());
-		}, this.#se = (t) => {
-			if (this.#G(), !(this._editing || t.defaultPrevented)) {
+		}, this.#ce = (t) => {
+			if (this.#K(), !(this._editing || t.defaultPrevented)) {
 				if ((t.metaKey || t.ctrlKey) && !t.altKey && (t.key.toLowerCase() === "o" || t.key === "ArrowDown")) {
 					t.preventDefault(), e(this, "vf-open", {});
 					return;
@@ -157,7 +158,7 @@ var M, N = {
 						return;
 					case " ":
 						if (!this.selectable) return;
-						t.preventDefault(), this.focusRule.reveal(), this.#Z(!this.selected);
+						t.preventDefault(), this.focusRule.reveal(), this.#Q(!this.selected);
 						return;
 					case "ArrowLeft":
 					case "ArrowRight":
@@ -165,7 +166,7 @@ var M, N = {
 					case "ArrowDown": {
 						if (!this.movable) return;
 						t.preventDefault(), this.focusRule.reveal();
-						let e = t.shiftKey ? F : P, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
+						let e = t.shiftKey ? I : F, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
 						this.#L();
 						let i = this.#g.seed();
 						this.#g.moveTo(i.x + n, i.y + r);
@@ -302,6 +303,14 @@ var M, N = {
         padding: 0 calc(var(--vf-scale, 1) * 1px);
         text-align: left;
       }
+      /* An alias's name, plate and rename field alike: the body face's own
+         italic, slanted on the pixel grid. Never a synthesized oblique, which
+         would smear it; until the italic loads the name stands upright. */
+      :host([alias]) .label,
+      :host([alias]) .rename {
+        font-style: italic;
+        font-synthesis: none;
+      }
       :host([selected]) .name {
         /* Forced colors: exempt the inverted plate from the mode's text
            backplate, which would land a Canvas slab on the highlight bar —
@@ -411,7 +420,7 @@ var M, N = {
 		return this.#i !== null;
 	}
 	get #i() {
-		return this.closest(L);
+		return this.closest(R);
 	}
 	#a;
 	#o;
@@ -489,7 +498,7 @@ var M, N = {
 			clientY: r.clientY
 		}, !i.proposal) {
 			if (Math.hypot(r.clientX - i.press.clientX, r.clientY - i.press.clientY) < i.slop || t === i.origin.x && n === i.origin.y) return;
-			this.#G(), this.#a = !1, i.proposal = {
+			this.#K(), this.#a = !1, i.proposal = {
 				left: i.origin.x,
 				top: i.origin.y
 			}, this.#y.attach();
@@ -607,19 +616,19 @@ var M, N = {
 		};
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#X(), this.#q(), this.selectable && this.selected && this.#p.attach(), this.addEventListener("keydown", this.#se);
+		super.connectedCallback(), this.#Z(), this.#J(), this.selectable && this.selected && this.#p.attach(), this.addEventListener("keydown", this.#ce);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("keydown", this.#se), this.#G(), this.#_?.outline?.canvas.remove();
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.#ce), this.#K(), this.#_?.outline?.canvas.remove();
 		for (let e of this.#_?.followers ?? []) e.end();
 		this.#_ = null, this.#x?.finish();
 	}
 	updated(e) {
-		if (e.has("selectable") && this.#X(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#q(), (e.has("selected") || e.has("selectable")) && (this.selectable && this.selected ? this.#p.attach() : this.#p.detach()), e.has("_editing") && this._editing) {
+		if (e.has("selectable") && this.#Z(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#J(), (e.has("selected") || e.has("selectable")) && (this.selectable && this.selected ? this.#p.attach() : this.#p.detach()), e.has("_editing") && this._editing) {
 			let e = this.renderRoot.querySelector("input");
 			e?.focus(), e?.select();
 		}
-		(e.has("label") || e.has("_draft") || e.has("_editing")) && this.#R(), (e.has("open") || e.has("size")) && this.#H();
+		(e.has("label") || e.has("_draft") || e.has("_editing") || e.has("alias")) && this.#R(), (e.has("open") || e.has("size")) && this.#U();
 	}
 	#I;
 	#L() {
@@ -639,15 +648,23 @@ var M, N = {
 			let n = document.createRange();
 			n.selectNodeContents(e), t = n.getBoundingClientRect().width, n.detach();
 		}
-		let n = t / r(this) + 2, i = Math.max(2, Math.ceil(n / 2) * 2);
-		this.#e = this._editing && t === 0 ? Math.max(i, N[this.size]) : i, e.style.width = this.#z;
-	}
-	get #z() {
+		let n = t / r(this) + 2 + (this.alias ? this.#z(e) : 0), i = Math.max(2, Math.ceil(n / 2) * 2);
+		this.#e = this._editing && t === 0 ? Math.max(i, N[this.size]) : i, e.style.width = this.#B;
+	}
+	#z(e) {
+		let t = e.textContent ?? "";
+		if (P ??= document.createElement("canvas").getContext("2d"), !t || !P) return 0;
+		let { fontStyle: n, fontWeight: i, fontSize: a, fontFamily: o } = getComputedStyle(e);
+		P.font = `${n} ${i} ${a} ${o}`;
+		let s = P.measureText(t);
+		return Math.max(0, Math.ceil((s.actualBoundingBoxRight - s.width) / r(this)));
+	}
+	get #B() {
 		return this.#e ? `calc(var(--vf-scale, 1) * ${this.#e}px)` : "";
 	}
-	#B;
 	#V;
-	#H() {
+	#H;
+	#U() {
 		let e = this.renderRoot?.querySelector(`slot[name='${this.size}']`), t = null;
 		for (let n of e?.assignedElements({ flatten: !0 }) ?? []) {
 			let e = n instanceof HTMLImageElement || n instanceof HTMLCanvasElement ? n : n.querySelector("img, canvas");
@@ -656,9 +673,9 @@ var M, N = {
 				break;
 			}
 		}
-		t !== this.#t && (this.#t?.removeEventListener("load", this.#V), this.#t?.removeEventListener("error", this.#V), this.#t = t, t?.addEventListener("load", this.#V), t?.addEventListener("error", this.#V)), this.#U();
+		t !== this.#t && (this.#t?.removeEventListener("load", this.#H), this.#t?.removeEventListener("error", this.#H), this.#t = t, t?.addEventListener("load", this.#H), t?.addEventListener("error", this.#H)), this.#W();
 	}
-	#U() {
+	#W() {
 		let e = this.#t, t = e instanceof HTMLImageElement ? e.complete && e.naturalWidth > 0 : e != null && e.width > 0;
 		if (!this.open || e == null || !t) {
 			this._ghost = null, this.#o = "";
@@ -674,16 +691,16 @@ var M, N = {
 		}
 		this._ghost = r, this.#o = r ? n : "";
 	}
-	#W() {
-		this.#G(), this.#c = window.setTimeout(() => {
+	#G() {
+		this.#K(), this.#c = window.setTimeout(() => {
 			this.#c = 0, this.startEditing();
 		}, 800);
 	}
-	#G() {
+	#K() {
 		this.#c &&= (clearTimeout(this.#c), 0);
 	}
 	startEditing() {
-		this.#G(), !(!this.editable || this._editing) && (this.#s = this.label, this._draft = this.label, this._editing = !0);
+		this.#K(), !(!this.editable || this._editing) && (this.#s = this.label, this._draft = this.label, this._editing = !0);
 	}
 	commitEditing() {
 		if (!this._editing) return;
@@ -702,7 +719,7 @@ var M, N = {
 			previous: t
 		}));
 	}
-	#K;
+	#q;
 	cancelEditing() {
 		this._editing && (this._editing = !1, this._draft = this.#s);
 	}
@@ -712,15 +729,15 @@ var M, N = {
       class="frame vf-snap"
       part="frame"
       style=${o}
-      @pointerdown=${this.#Q}
+      @pointerdown=${this.#$}
       @pointermove=${this.#v.onPointerMove}
-      @pointerup=${this.#ee}
-      @pointercancel=${this.#ee}
-      @lostpointercapture=${this.#ee}
-      @dblclick=${this.#$}
+      @pointerup=${this.#te}
+      @pointercancel=${this.#te}
+      @lostpointercapture=${this.#te}
+      @dblclick=${this.#ee}
     >
       <div class=${a} part="icon">
-        ${this.size === "small" ? O`<slot name="small" @slotchange=${this.#B}></slot>` : O`<slot name="large" @slotchange=${this.#B}></slot>`}${this._ghost ?? k}
+        ${this.size === "small" ? O`<slot name="small" @slotchange=${this.#V}></slot>` : O`<slot name="large" @slotchange=${this.#V}></slot>`}${this._ghost ?? k}
       </div>
       ${r ? O`<div class=${i}>
             <!-- No whitespace around the span: it is the measured run, and a
@@ -728,7 +745,7 @@ var M, N = {
             <div class="label" part="label"><span
               class="name"
               part="plate"
-              style=${this.#e ? `width: ${this.#z}` : ""}
+              style=${this.#e ? `width: ${this.#B}` : ""}
               >${t}</span
             ></div>
             ${e ? O`<div class="rename-box">
@@ -738,16 +755,16 @@ var M, N = {
                     type="text"
                     maxlength=${this.maxlength}
                     .value=${this._draft}
-                    @beforeinput=${this.#re}
-                    @input=${this.#ie}
-                    @keydown=${this.#oe}
-                    @blur=${this.#K}
+                    @beforeinput=${this.#ie}
+                    @input=${this.#ae}
+                    @keydown=${this.#se}
+                    @blur=${this.#q}
                   />
                 </div>` : k}
           </div>` : k}
     </div>`;
 	}
-	#q() {
+	#J() {
 		if (!this.selectable) {
 			this.#n.role = null, this.#n.ariaSelected = null, this.#n.ariaLabel = null;
 			return;
@@ -756,22 +773,22 @@ var M, N = {
 			this.#n.role = "option", this.#n.ariaSelected = this.selected ? "true" : "false", this.#n.ariaLabel = null;
 			return;
 		}
-		this.#n.role = "img", this.#n.ariaSelected = null, this.#n.ariaLabel = this.label || this.#J || null;
+		this.#n.role = "img", this.#n.ariaSelected = null, this.#n.ariaLabel = this.label || this.#Y || null;
 	}
-	get #J() {
+	get #Y() {
 		return this.#t instanceof HTMLImageElement ? this.#t.alt : "";
 	}
-	get #Y() {
+	get #X() {
 		return this.selectable;
 	}
-	#X() {
-		this.hasAttribute("tabindex") || (this.#Y ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
+	#Z() {
+		this.hasAttribute("tabindex") || (this.#X ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
 	}
-	#Z(t) {
+	#Q(t) {
 		t !== this.selected && (this.selected = t, e(this, "vf-select", { selected: t }));
 	}
 	setSelected(e) {
-		this.#Z(e);
+		this.#Q(e);
 	}
 	touches(e) {
 		let t = this.renderRoot;
@@ -801,10 +818,10 @@ var M, N = {
 			}), this.#x = t, this.#S.attach();
 		})) : (this.#g.moveTo(r.x, r.y), !1);
 	}
-	#Q;
 	#$;
 	#ee;
-	#te(e, t) {
+	#te;
+	#ne(e, t) {
 		let n = this.#d;
 		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) < _(e))) ? !1 : n.second ? !0 : (this.#f = {
 			time: n.time,
@@ -812,40 +829,43 @@ var M, N = {
 			y: n.y
 		}, !1);
 	}
-	#ne;
 	#re;
 	#ie;
-	#ae(t) {
+	#ae;
+	#oe(t) {
 		e(this, "vf-name-too-long", {
 			attempted: t,
 			accepted: t.slice(0, this.maxlength),
 			limit: this.maxlength
 		});
 	}
-	#oe;
 	#se;
+	#ce;
 };
-o([A()], z.prototype, "label", void 0), o([A({ reflect: !0 })], z.prototype, "size", void 0), o([A({
+o([A()], B.prototype, "label", void 0), o([A({ reflect: !0 })], B.prototype, "size", void 0), o([A({
+	type: Boolean,
+	reflect: !0
+})], B.prototype, "selectable", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "selectable", void 0), o([A({
+})], B.prototype, "selected", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "selected", void 0), o([A({
+})], B.prototype, "target", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "target", void 0), o([A({
+})], B.prototype, "color", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "color", void 0), o([A({
+})], B.prototype, "open", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "open", void 0), o([A({
+})], B.prototype, "alias", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "movable", void 0), o([A({
+})], B.prototype, "movable", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], z.prototype, "editable", void 0), o([A({ type: Number })], z.prototype, "width", void 0), o([A({ type: Number })], z.prototype, "maxlength", void 0), o([j()], z.prototype, "_editing", void 0), o([j()], z.prototype, "_draft", void 0), o([j()], z.prototype, "_ghost", void 0), z = M = o([t("vf-icon")], z);
+})], B.prototype, "editable", void 0), o([A({ type: Number })], B.prototype, "width", void 0), o([A({ type: Number })], B.prototype, "maxlength", void 0), o([j()], B.prototype, "_editing", void 0), o([j()], B.prototype, "_draft", void 0), o([j()], B.prototype, "_ghost", void 0), B = M = o([t("vf-icon")], B);
 //#endregion
-export { z as VfIcon };
+export { B as VfIcon };

package/dist/index.d.ts

@@ -181,3 +181,4 @@ export { registerEmbeddedFont, PIXEL_GRID_METRICS } from './styles/register-embe
 export type { EmbeddedFontMetrics } from './styles/register-embedded-font.js';
 export { registerDisplayFace, VF_DISPLAY_FAMILY } from './styles/display-font.js';
 export { registerBodyFace, VF_BODY_FAMILY } from './styles/body-font.js';
+export { registerBodyItalicFace } from './styles/body-italic-font.js';

package/dist/index.js

@@ -61,17 +61,18 @@ import { VfSlider as nn } from "./components/vf-slider.js";
 import { VfLabel as rn } from "./components/vf-label.js";
 import { VfParagraph as an } from "./components/vf-paragraph.js";
 import { VfImg as on } from "./components/vf-img.js";
-import { VfIcon as sn } from "./components/vf-icon.js";
-import { VfIconField as cn } from "./components/vf-icon-field.js";
-import { VfMenuBar as ln } from "./components/vf-menu-bar.js";
-import { VfMenu as un } from "./components/vf-menu.js";
-import { VfMenuItem as dn } from "./components/vf-menu-item.js";
-import { VfList as fn } from "./components/vf-list.js";
-import { VfListItem as pn } from "./components/vf-list-item.js";
-import { VfFieldset as mn } from "./components/vf-fieldset.js";
-import { VfGrid as hn } from "./components/vf-grid.js";
-import { VfStack as gn } from "./components/vf-stack.js";
-import { VfContainer as _n } from "./components/vf-container.js";
-import { CURSOR_ARROW as vn, CURSOR_CROSSHAIR as yn, CURSOR_I_BEAM as bn, CURSOR_WAIT as xn } from "./cursor-art.js";
-import { applyCursor as Sn } from "./cursor.js";
-export { Ge as BLINK_FLIPS, Ke as BLINK_INTERVAL_MS, Ne as BUTTON_FACE, Pe as BUTTON_FRAME, ht as CARET_DOWN, gt as CARET_DOWN_SMALL, _t as CHECKBOX_X, vt as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, vn as CURSOR_ARROW, yn as CURSOR_CROSSHAIR, bn as CURSOR_I_BEAM, xn as CURSOR_WAIT, qe as DRAG_SLOP_COARSE_PX, Je as DRAG_SLOP_PX, Me as DocumentListenersController, We as DragController, Gt as FocusRuleController, Ae as GridSnapController, $ as PATTERNS, ee as PATTERN_NAMES, te as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ye as PRESS_HOLD_MS, Oe as PatternFillController, T as PlacementController, yt as RADIO_DOT, bt as RADIO_FACE, xt as RADIO_RING, St as RADIO_RING_PRESSED, Xe as RENAME_DELAY_MS, G as REPEAT_TILE, Fe as RING_FRAME, Ie as RING_HOLE, Le as RING_INSET, ge as RULE_EDGES, K as RepeatTileController, Re as SCREEN_CORNER, Ct as SLIDER_THUMB, wt as SLIDER_THUMB_FACE, Tt as STEPPER, Et as STEPPER_DOWN_FILL, Dt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, kt as ScrollRailController, mt as ScrollStateController, Ze as TAP_PAIR_MS, Qe as TAP_PAIR_SLOP_PX, R as TILE_LATTICE, en as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, Rt as VfButton, zt as VfButtonGroup, Ht as VfCheckbox, _n as VfContainer, He as VfDesktop, Ft as VfDialog, mn as VfFieldset, Lt as VfFormControl, hn as VfGrid, sn as VfIcon, cn as VfIconField, on as VfImg, rn as VfLabel, fn as VfList, pn as VfListItem, un as VfMenu, ln as VfMenuBar, dn as VfMenuItem, Nt as VfModalDialog, Zt as VfNumberField, Qt as VfOption, an as VfParagraph, E as VfPositioned, tn as VfProgressBar, Ut as VfRadio, Wt as VfRadioGroup, jt as VfScrollArea, $t as VfSelect, It as VfSeparator, Ue as VfSized, nn as VfSlider, gn as VfStack, Bt as VfSwatch, Xt as VfTextArea, Jt as VfTextControlBase, Yt as VfTextField, Vt as VfToggleControl, Mt as VfWindow, $e as WALK_BEAT_MS, et as WALK_STEP_MS, tt as WALK_STEP_PX, dt as WINDOW_MIN_HEIGHT, ft as WINDOW_MIN_WIDTH, nt as WINDOW_RECTS_VISIBLE, rt as WINDOW_RECT_RATIO, it as WINDOW_RECT_STEPS, at as WINDOW_RECT_STEP_MS, Sn as applyCursor, f as applyScale, t as defineElement, q as devicePxAt, o as devicePxPerSystemPx, ot as dragSlop, p as effectiveScale, e as emit, Kt as focusModality, m as getScale, s as getZoom, Ot as glyphSvg, Pt as modalDialogStyles, h as onScaleChange, c as onZoomChange, ne as parsePattern, _e as parseRule, re as patternHex, ie as patternMotif, J as patternOverride, ae as patternRects, st as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, At as renderScrollRail, Y as repeatTile, je as requestGridSnap, l as resetZoomBaseline, ve as ruleClasses, ct as runOutlineTravel, lt as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, ze as steppedCornerClip, Be as steppedRectClip, Ve as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, X as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, qt as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, pe as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, oe as vfDots, n as vfElement, Ee as vfField, Se as vfFocus, Ce as vfFocusRing, we as vfFocusUnderline, ce as vfHardShadow, le as vfHardShadowDecls, me as vfModalFrame, he as vfPanel, ke as vfPatternFill, Z as vfRepeatTileSize, ye as vfRule, De as vfScrollRail, L as vfStaticText, se as vfStripes, ue as vfStrokeDecls, de as vfStrokeInset, fe as vfStrokeShadow, Q as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, be as vfTitleBar, Te as vfToggle, xe as vfWindowWidgets, pt as windowChrome, ut as windowRectFraction };
+import { registerBodyItalicFace as sn } from "./styles/body-italic-font.js";
+import { VfIcon as cn } from "./components/vf-icon.js";
+import { VfIconField as ln } from "./components/vf-icon-field.js";
+import { VfMenuBar as un } from "./components/vf-menu-bar.js";
+import { VfMenu as dn } from "./components/vf-menu.js";
+import { VfMenuItem as fn } from "./components/vf-menu-item.js";
+import { VfList as pn } from "./components/vf-list.js";
+import { VfListItem as mn } from "./components/vf-list-item.js";
+import { VfFieldset as hn } from "./components/vf-fieldset.js";
+import { VfGrid as gn } from "./components/vf-grid.js";
+import { VfStack as _n } from "./components/vf-stack.js";
+import { VfContainer as vn } from "./components/vf-container.js";
+import { CURSOR_ARROW as yn, CURSOR_CROSSHAIR as bn, CURSOR_I_BEAM as xn, CURSOR_WAIT as Sn } from "./cursor-art.js";
+import { applyCursor as Cn } from "./cursor.js";
+export { Ge as BLINK_FLIPS, Ke as BLINK_INTERVAL_MS, Ne as BUTTON_FACE, Pe as BUTTON_FRAME, ht as CARET_DOWN, gt as CARET_DOWN_SMALL, _t as CHECKBOX_X, vt as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, yn as CURSOR_ARROW, bn as CURSOR_CROSSHAIR, xn as CURSOR_I_BEAM, Sn as CURSOR_WAIT, qe as DRAG_SLOP_COARSE_PX, Je as DRAG_SLOP_PX, Me as DocumentListenersController, We as DragController, Gt as FocusRuleController, Ae as GridSnapController, $ as PATTERNS, ee as PATTERN_NAMES, te as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ye as PRESS_HOLD_MS, Oe as PatternFillController, T as PlacementController, yt as RADIO_DOT, bt as RADIO_FACE, xt as RADIO_RING, St as RADIO_RING_PRESSED, Xe as RENAME_DELAY_MS, G as REPEAT_TILE, Fe as RING_FRAME, Ie as RING_HOLE, Le as RING_INSET, ge as RULE_EDGES, K as RepeatTileController, Re as SCREEN_CORNER, Ct as SLIDER_THUMB, wt as SLIDER_THUMB_FACE, Tt as STEPPER, Et as STEPPER_DOWN_FILL, Dt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, kt as ScrollRailController, mt as ScrollStateController, Ze as TAP_PAIR_MS, Qe as TAP_PAIR_SLOP_PX, R as TILE_LATTICE, en as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, Rt as VfButton, zt as VfButtonGroup, Ht as VfCheckbox, vn as VfContainer, He as VfDesktop, Ft as VfDialog, hn as VfFieldset, Lt as VfFormControl, gn as VfGrid, cn as VfIcon, ln as VfIconField, on as VfImg, rn as VfLabel, pn as VfList, mn as VfListItem, dn as VfMenu, un as VfMenuBar, fn as VfMenuItem, Nt as VfModalDialog, Zt as VfNumberField, Qt as VfOption, an as VfParagraph, E as VfPositioned, tn as VfProgressBar, Ut as VfRadio, Wt as VfRadioGroup, jt as VfScrollArea, $t as VfSelect, It as VfSeparator, Ue as VfSized, nn as VfSlider, _n as VfStack, Bt as VfSwatch, Xt as VfTextArea, Jt as VfTextControlBase, Yt as VfTextField, Vt as VfToggleControl, Mt as VfWindow, $e as WALK_BEAT_MS, et as WALK_STEP_MS, tt as WALK_STEP_PX, dt as WINDOW_MIN_HEIGHT, ft as WINDOW_MIN_WIDTH, nt as WINDOW_RECTS_VISIBLE, rt as WINDOW_RECT_RATIO, it as WINDOW_RECT_STEPS, at as WINDOW_RECT_STEP_MS, Cn as applyCursor, f as applyScale, t as defineElement, q as devicePxAt, o as devicePxPerSystemPx, ot as dragSlop, p as effectiveScale, e as emit, Kt as focusModality, m as getScale, s as getZoom, Ot as glyphSvg, Pt as modalDialogStyles, h as onScaleChange, c as onZoomChange, ne as parsePattern, _e as parseRule, re as patternHex, ie as patternMotif, J as patternOverride, ae as patternRects, st as prefersReducedMotion, A as registerBodyFace, sn as registerBodyItalicFace, N as registerDisplayFace, O as registerEmbeddedFont, At as renderScrollRail, Y as repeatTile, je as requestGridSnap, l as resetZoomBaseline, ve as ruleClasses, ct as runOutlineTravel, lt as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, ze as steppedCornerClip, Be as steppedRectClip, Ve as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, X as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, qt as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, pe as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, oe as vfDots, n as vfElement, Ee as vfField, Se as vfFocus, Ce as vfFocusRing, we as vfFocusUnderline, ce as vfHardShadow, le as vfHardShadowDecls, me as vfModalFrame, he as vfPanel, ke as vfPatternFill, Z as vfRepeatTileSize, ye as vfRule, De as vfScrollRail, L as vfStaticText, se as vfStripes, ue as vfStrokeDecls, de as vfStrokeInset, fe as vfStrokeShadow, Q as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, be as vfTitleBar, Te as vfToggle, xe as vfWindowWidgets, pt as windowChrome, ut as windowRectFraction };

package/dist/modal-dialog.d.ts

@@ -51,7 +51,10 @@ export declare const modalDialogStyles: import("lit").CSSResult;
  * the reason. Because every close path — Escape, `close()`, the opt-in
  * {@link lightDismiss} click outside — routes through the native `close`
  * event, an Escape-close no longer leaves a stale origin behind, so the next
- * open re-derives it.
+ * open re-derives it. That event is queued: a modal opened again before it
+ * comes (`close()` then `show()` in one turn) runs the funnel at the open,
+ * inside `show()`, so the close's `vf-close` still comes before the open's
+ * `vf-show`, and the late event changes nothing.
  *
  * It also owns the two keyboard rules every classic dialog followed (see
  * {@link defaultButton} and {@link initialFocusTarget}): Return or Enter
@@ -242,11 +245,9 @@ export declare class VfModalDialog extends LitElement {
     /** Native `cancel` (Escape): remember the reason; `close` follows. */
     protected _onNativeCancel(): void;
     /**
-     * Native `close` — the single teardown funnel for every close path. Drops
-     * the written origin so the next open re-derives it from the box it will
-     * actually have (a stated `top`/`left` is the author's or the user's and
-     * survives, and is re-applied by that open), syncs `open`, and fires
-     * `vf-close` with the reason and the value the close carried.
+     * Native `close`, which every close path ends in: syncs `open` and runs the
+     * close funnel. An open that came before the event has run the funnel for
+     * this close already, and the event passes.
      */
     protected _onNativeClose(): void;
 }

package/dist/modal-dialog.js

@@ -112,7 +112,7 @@ var p = 24, m = /* @__PURE__ */ new Set([
 			this.#o = null, !(!t || e.target !== this._dialog || !this.lightDismiss) && (this.#n = "outside", this.close());
 		}, this.#f = () => {
 			this.#o = null;
-		}, this.#p = null, this.#y = () => this.settle(), this.addEventListener("submit", this.#a);
+		}, this.#p = null, this.#m = !1, this.#b = () => this.settle(), this.addEventListener("submit", this.#a);
 	}
 	#a;
 	#o;
@@ -133,41 +133,42 @@ var p = 24, m = /* @__PURE__ */ new Set([
 	#d;
 	#f;
 	#p;
+	#m;
 	show() {
-		this.open = !0, this.hasUpdated && this.#v();
+		this.open = !0, this.hasUpdated && this.#y();
 	}
 	close(e) {
-		this.open && e !== void 0 && (this.#r = e), this.open = !1, this.hasUpdated && this.#v();
+		this.open && e !== void 0 && (this.#r = e), this.open = !1, this.hasUpdated && this.#y();
 	}
 	closeFromBox(e) {
 		this.open && (this.#i = e), this.close();
 	}
 	updated(e) {
-		e.has("open") && this.#v(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
+		e.has("open") && this.#y(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
 	}
-	#m() {
+	#h() {
 		let e = document.documentElement;
 		return {
 			width: o(e.clientWidth || window.innerWidth, this),
 			height: o(e.clientHeight || window.innerHeight, this)
 		};
 	}
-	#h(e, t) {
-		let n = this.#m(), r = o(this._dialog?.offsetWidth ?? 0, this);
+	#g(e, t) {
+		let n = this.#h(), r = o(this._dialog?.offsetWidth ?? 0, this);
 		return {
 			x: Math.min(Math.max(e, p - r), n.width - p),
 			y: Math.min(Math.max(t, 0), Math.max(0, n.height - p))
 		};
 	}
-	#g() {
-		let e = this.#m(), t = this._dialog?.getBoundingClientRect();
+	#_() {
+		let e = this.#h(), t = this._dialog?.getBoundingClientRect();
 		return {
 			x: (e.width - o(t?.width ?? 0, this)) / 2,
 			y: (e.height - o(t?.height ?? 0, this)) / 2
 		};
 	}
 	placeAt(e, t) {
-		let n = this.#h(e, t);
+		let n = this.#g(e, t);
 		this.left = i(n.x, this), this.top = i(n.y, this);
 	}
 	settle() {
@@ -176,10 +177,10 @@ var p = 24, m = /* @__PURE__ */ new Set([
 		let t = this.left != null || this.top != null ? {
 			x: this.left ?? 0,
 			y: this.top ?? 0
-		} : this.#g(), n = this.#h(t.x, t.y);
+		} : this.#_(), n = this.#g(t.x, t.y);
 		e.style.left = a(i(n.x, this)), e.style.top = a(i(n.y, this)), e.style.right = "auto", e.style.bottom = "auto", e.style.margin = "0";
 	}
-	#_() {
+	#v() {
 		let e = this._dialog?.style;
 		if (e) for (let t of [
 			"left",
@@ -189,27 +190,31 @@ var p = 24, m = /* @__PURE__ */ new Set([
 			"margin"
 		]) e.removeProperty(t);
 	}
-	#v() {
+	#y() {
 		let e = this._dialog;
 		if (e) {
 			if (this.open && !e.open) {
-				this.#p = document.activeElement, this.returnValue = "", e.showModal();
+				if (this.#m) {
+					this.#T(), this.#y();
+					return;
+				}
+				this.#p = document.activeElement, this.returnValue = "", this.#n = null, this.#r = null, this.#i = null, e.showModal(), this.#m = !0;
 				let n = this.#c();
-				this.settle(), this.#S(e), this.#s.attach(), t(this, "vf-show", { focus: n }), n && _(n) && n.select?.();
+				this.settle(), this.#C(e), this.#s.attach(), t(this, "vf-show", { focus: n }), n && _(n) && n.select?.();
 			} else !this.open && e.open && e.close();
 		}
 	}
-	#y;
 	#b;
 	#x;
-	#S(e) {
-		typeof ResizeObserver < "u" && !this.#b && (this.#b = new ResizeObserver(this.#y), this.#b.observe(e)), window.addEventListener("resize", this.#y), this.#x ??= r(this.#y);
+	#S;
+	#C(e) {
+		typeof ResizeObserver < "u" && !this.#x && (this.#x = new ResizeObserver(this.#b), this.#x.observe(e)), window.addEventListener("resize", this.#b), this.#S ??= r(this.#b);
 	}
-	#C() {
-		this.#b?.disconnect(), this.#b = void 0, window.removeEventListener("resize", this.#y), this.#x?.(), this.#x = void 0;
+	#w() {
+		this.#x?.disconnect(), this.#x = void 0, window.removeEventListener("resize", this.#b), this.#S?.(), this.#S = void 0;
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#C();
+		super.disconnectedCallback(), this.#w();
 		let e = this._dialog;
 		if (e?.open) {
 			e.close();
@@ -222,8 +227,11 @@ var p = 24, m = /* @__PURE__ */ new Set([
 		this.#n = "escape";
 	}
 	_onNativeClose() {
+		!this.#m || this._dialog?.open || (this.open = !1, this.#T());
+	}
+	#T() {
 		let e = this.#n ?? "close", n = this.#r, r = this.#i;
-		this.#n = null, this.#r = null, this.#i = null, n !== null && (this.returnValue = n), this.#p = null, this.#o = null, this.#s.detach(), this.#C(), this.open = !1, this.#_(), t(this, "vf-close", {
+		this.#n = null, this.#r = null, this.#i = null, this.#m = !1, n !== null && (this.returnValue = n), this.#p = null, this.#o = null, this.#s.detach(), this.#w(), this.#v(), t(this, "vf-close", {
 			reason: e,
 			returnValue: n,
 			...r