vintage-frames 0.14.0 → 0.15.0

package/dist/components/vf-icon.js

@@ -19,7 +19,7 @@ import { property as A, state as j } from "lit/decorators.js";
 var M, N = {
 	large: 32,
 	small: 16
-}, P = 1, F = 8, I = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), L = class extends c(E) {
+}, 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) {
 	static {
 		M = this;
 	}
@@ -27,14 +27,14 @@ var M, N = {
 		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, () => [[
 			document,
 			"pointerdown",
-			this.#te,
+			this.#ne,
 			!0
 		]]), this.#m = (e, t, n) => this.#h() ? {
 			x: Math.max(e, 0),
-			y: Math.max(t, 0)
+			y: Math.max(t, n.top)
 		} : {
-			x: I(e, n.width - a(this.offsetWidth, this)),
-			y: I(t, n.height - a(this.offsetHeight, this))
+			x: I(e, 0, n.width - a(this.offsetWidth, this)),
+			y: I(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;
@@ -86,10 +86,16 @@ var M, N = {
 		}, this.#w = (e) => {
 			e.key !== "Escape" || !this.#x || (e.preventDefault(), e.stopPropagation(), this.#x.finish());
 		}, this.#I = !1, this.#B = () => {
-			this.#H(), this.#K();
+			this.#H(), this.#q();
 		}, this.#V = () => {
 			this.#U();
-		}, this.#Z = (e) => {
+		}, this.#K = () => {
+			queueMicrotask(() => {
+				if (!this._editing) return;
+				let e = this.renderRoot.querySelector("input");
+				e && this.renderRoot.activeElement === e || this.commitEditing();
+			});
+		}, this.#Q = (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();
@@ -102,43 +108,43 @@ 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.#X(!0) : this.#X(!this.selected)), this.#a = a && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#W(), this.#J && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#v.onPointerDown(e);
-		}, this.#Q = () => {
+			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._editing || this.#u || e(this, "vf-open", {});
-		}, this.#$ = (t) => {
+		}, this.#ee = (t) => {
 			let n = this.#_?.proposal != null;
 			this.#v.onPointerUp(t);
-			let r = this.#ee(t, n);
+			let r = this.#te(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.#te = (e) => {
+		}, this.#ne = (e) => {
 			let t = e.composedPath();
 			if (t.includes(this) || (this.#G(), 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?.selected && e.#i === n) return;
+				if (!e && !t.some(R) || e?.selected && e.#i === n) return;
 			}
-			this.#X(!1);
-		}, this.#ne = (e) => {
+			this.#Z(!1);
+		}, this.#re = (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.#ie(a);
-		}, this.#re = (e) => {
+			a.length > this.maxlength && this.#ae(a);
+		}, this.#ie = (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.#ie(e);
+				t.value = e.slice(0, this.maxlength), t.setSelectionRange(n, n), this.#ae(e);
 			}
 			this._draft = t.value;
-		}, this.#ae = (e) => {
+		}, this.#oe = (e) => {
 			e.key === "Enter" ? (e.preventDefault(), this.commitEditing(), this.focus()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.cancelEditing(), this.focus());
-		}, this.#oe = (t) => {
+		}, this.#se = (t) => {
 			if (this.#G(), !(this._editing || t.defaultPrevented)) {
 				if ((t.metaKey || t.ctrlKey) && !t.altKey && (t.key.toLowerCase() === "o" || t.key === "ArrowDown")) {
 					t.preventDefault(), e(this, "vf-open", {});
@@ -151,7 +157,7 @@ var M, N = {
 						return;
 					case " ":
 						if (!this.selectable) return;
-						t.preventDefault(), this.focusRule.reveal(), this.#X(!this.selected);
+						t.preventDefault(), this.focusRule.reveal(), this.#Z(!this.selected);
 						return;
 					case "ArrowLeft":
 					case "ArrowRight":
@@ -405,7 +411,7 @@ var M, N = {
 		return this.#i !== null;
 	}
 	get #i() {
-		return this.closest("vf-icon-field, [role=\"listbox\"]");
+		return this.closest(L);
 	}
 	#a;
 	#o;
@@ -533,11 +539,11 @@ var M, N = {
 		}, ...e.followers.map((e) => ({
 			corner: r(e.origin, e.offset),
 			size: e.size
-		}))], a = this.#h(), o = (e, t, n, r) => {
-			let o = -Infinity, s = Infinity;
-			for (let e of i) o = Math.max(o, -t(e)), a || (s = Math.min(s, r - n(e) - t(e)));
-			return s < o && (s = Infinity), Math.min(Math.max(e, o), s);
-		}, s = o(t.left - e.origin.x, (e) => e.corner.x, (e) => e.size.width, n.width), c = o(t.top - e.origin.y, (e) => e.corner.y, (e) => e.size.height, n.height);
+		}))], a = this.#h(), o = (e, t, n, r, o) => {
+			let s = -Infinity, c = Infinity;
+			for (let e of i) s = Math.max(s, r - t(e)), a || (c = Math.min(c, o - n(e) - t(e)));
+			return c < s && (c = Infinity), Math.min(Math.max(e, s), c);
+		}, s = o(t.left - e.origin.x, (e) => e.corner.x, (e) => e.size.width, 0, n.width), c = o(t.top - e.origin.y, (e) => e.corner.y, (e) => e.size.height, n.top, n.height);
 		this.#g.moveTo(e.origin.x + s, e.origin.y + c);
 		for (let t of e.followers) t.drop(s, c);
 	}
@@ -601,15 +607,15 @@ var M, N = {
 		};
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#Y(), this.#K(), this.selectable && this.selected && this.#p.attach(), this.addEventListener("keydown", this.#oe);
+		super.connectedCallback(), this.#X(), this.#q(), this.selectable && this.selected && this.#p.attach(), this.addEventListener("keydown", this.#se);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("keydown", this.#oe), this.#G(), this.#_?.outline?.canvas.remove();
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.#se), this.#G(), this.#_?.outline?.canvas.remove();
 		for (let e of this.#_?.followers ?? []) e.end();
 		this.#_ = null, this.#x?.finish();
 	}
 	updated(e) {
-		if (e.has("selectable") && this.#Y(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#K(), (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.#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) {
 			let e = this.renderRoot.querySelector("input");
 			e?.focus(), e?.select();
 		}
@@ -696,6 +702,7 @@ var M, N = {
 			previous: t
 		}));
 	}
+	#K;
 	cancelEditing() {
 		this._editing && (this._editing = !1, this._draft = this.#s);
 	}
@@ -705,12 +712,12 @@ var M, N = {
       class="frame vf-snap"
       part="frame"
       style=${o}
-      @pointerdown=${this.#Z}
+      @pointerdown=${this.#Q}
       @pointermove=${this.#v.onPointerMove}
-      @pointerup=${this.#$}
-      @pointercancel=${this.#$}
-      @lostpointercapture=${this.#$}
-      @dblclick=${this.#Q}
+      @pointerup=${this.#ee}
+      @pointercancel=${this.#ee}
+      @lostpointercapture=${this.#ee}
+      @dblclick=${this.#$}
     >
       <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}
@@ -731,16 +738,16 @@ var M, N = {
                     type="text"
                     maxlength=${this.maxlength}
                     .value=${this._draft}
-                    @beforeinput=${this.#ne}
-                    @input=${this.#re}
-                    @keydown=${this.#ae}
-                    @blur=${this.commitEditing}
+                    @beforeinput=${this.#re}
+                    @input=${this.#ie}
+                    @keydown=${this.#oe}
+                    @blur=${this.#K}
                   />
                 </div>` : k}
           </div>` : k}
     </div>`;
 	}
-	#K() {
+	#q() {
 		if (!this.selectable) {
 			this.#n.role = null, this.#n.ariaSelected = null, this.#n.ariaLabel = null;
 			return;
@@ -749,22 +756,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.#q || null;
+		this.#n.role = "img", this.#n.ariaSelected = null, this.#n.ariaLabel = this.label || this.#J || null;
 	}
-	get #q() {
+	get #J() {
 		return this.#t instanceof HTMLImageElement ? this.#t.alt : "";
 	}
-	get #J() {
+	get #Y() {
 		return this.selectable;
 	}
-	#Y() {
-		this.hasAttribute("tabindex") || (this.#J ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
+	#X() {
+		this.hasAttribute("tabindex") || (this.#Y ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
 	}
-	#X(t) {
+	#Z(t) {
 		t !== this.selected && (this.selected = t, e(this, "vf-select", { selected: t }));
 	}
 	setSelected(e) {
-		this.#X(e);
+		this.#Z(e);
 	}
 	touches(e) {
 		let t = this.renderRoot;
@@ -794,10 +801,10 @@ var M, N = {
 			}), this.#x = t, this.#S.attach();
 		})) : (this.#g.moveTo(r.x, r.y), !1);
 	}
-	#Z;
 	#Q;
 	#$;
-	#ee(e, t) {
+	#ee;
+	#te(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,
@@ -805,40 +812,40 @@ var M, N = {
 			y: n.y
 		}, !1);
 	}
-	#te;
 	#ne;
 	#re;
-	#ie(t) {
+	#ie;
+	#ae(t) {
 		e(this, "vf-name-too-long", {
 			attempted: t,
 			accepted: t.slice(0, this.maxlength),
 			limit: this.maxlength
 		});
 	}
-	#ae;
 	#oe;
+	#se;
 };
-o([A()], L.prototype, "label", void 0), o([A({ reflect: !0 })], L.prototype, "size", void 0), o([A({
+o([A()], z.prototype, "label", void 0), o([A({ reflect: !0 })], z.prototype, "size", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], L.prototype, "selectable", void 0), o([A({
+})], z.prototype, "selectable", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], L.prototype, "selected", void 0), o([A({
+})], z.prototype, "selected", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], L.prototype, "target", void 0), o([A({
+})], z.prototype, "target", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], L.prototype, "color", void 0), o([A({
+})], z.prototype, "color", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], L.prototype, "open", void 0), o([A({
+})], z.prototype, "open", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], L.prototype, "movable", void 0), o([A({
+})], z.prototype, "movable", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], L.prototype, "editable", void 0), o([A({ type: Number })], L.prototype, "width", void 0), o([A({ type: Number })], L.prototype, "maxlength", void 0), o([j()], L.prototype, "_editing", void 0), o([j()], L.prototype, "_draft", void 0), o([j()], L.prototype, "_ghost", void 0), L = M = o([t("vf-icon")], L);
+})], 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);
 //#endregion
-export { L as VfIcon };
+export { z as VfIcon };

package/dist/components/vf-menu-bar.d.ts

@@ -18,6 +18,9 @@ declare const VfMenuBar_base: (new (...args: any[]) => import("../position.js").
  * same mechanic.
  *
  * @slot - `vf-menu` elements.
+ * @slot end - The bar's right end: a clock, say. Held 9px in from the end,
+ *   and a `vf-label` there rides the bar's line, so its baseline is the
+ *   menu titles'.
  * @csspart bar - The horizontal layout container.
  * @cssprop [--vf-menubar-height=20px] - `vf-menu-bar`
  */
@@ -52,6 +55,8 @@ export declare class VfMenuBar extends VfMenuBar_base {
      */
     shortcuts: boolean;
     private _menus;
+    /** Whether the `end` slot has assigned content (drives its `.empty` gate). */
+    private _hasEnd;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**

package/dist/components/vf-menu-bar.js

@@ -10,53 +10,53 @@ import { SCREEN_CORNER as c, steppedCornerClip as l } from "../pixel-frame.js";
 import { TypeAheadBuffer as u } from "../type-ahead.js";
 import { MenuPressController as d } from "../menu-press.js";
 import { LitElement as f, css as p, html as m, unsafeCSS as h } from "lit";
-import { property as g, queryAssignedElements as _ } from "lit/decorators.js";
+import { property as g, queryAssignedElements as _, state as v } from "lit/decorators.js";
 //#region src/components/vf-menu-bar.ts
-var v = class extends r(f) {
+var y = class extends r(f) {
 	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new o(this), this.label = "", this.rounded = !1, this.shortcuts = !1, this.#e = null, this.#t = this.attachInternals(), this.#n = new u(), this.#r = null, this.#i = new s(this, () => [[
+		super(...e), this.scale = new t(this), this.gridSnap = new o(this), this.label = "", this.rounded = !1, this.shortcuts = !1, this._hasEnd = !1, this.#e = null, this.#t = this.attachInternals(), this.#n = new u(), this.#r = null, this.#i = new s(this, () => [[
 			document,
 			"pointerdown",
-			this.#h,
+			this.#g,
 			!0
 		], [
 			document,
 			"keydown",
-			this.#g,
+			this.#_,
 			!0
 		]]), this.#a = new d(this, {
 			menus: () => this._menus,
-			open: (e) => this.#p(e),
-			close: () => this.#m()
+			open: (e) => this.#m(e),
+			close: () => this.#h()
 		}), this.#o = (e) => {
 			if (!this.#e) return;
 			let t = e.relatedTarget;
-			t instanceof Node && (this.contains(t) || this.renderRoot.contains(t)) || this.#m();
-		}, this.#u = (e) => {
-			let t = e.detail;
-			e.preventDefault(), e.stopPropagation(), t.menu.open ? this.#m() : this.#p(t.menu);
+			t instanceof Node && (this.contains(t) || this.renderRoot.contains(t)) || this.#h();
 		}, this.#d = (e) => {
 			let t = e.detail;
-			this.#e && t.menu !== this.#e && this.#p(t.menu);
-		}, this.#f = () => {
-			this.#e?.focus(), this.#m();
-		}, this.#h = (e) => {
-			e.composedPath().includes(this) || this.#m();
+			e.preventDefault(), e.stopPropagation(), t.menu.open ? this.#h() : this.#m(t.menu);
+		}, this.#f = (e) => {
+			let t = e.detail;
+			this.#e && t.menu !== this.#e && this.#m(t.menu);
+		}, this.#p = () => {
+			this.#e?.focus(), this.#h();
 		}, this.#g = (e) => {
+			e.composedPath().includes(this) || this.#h();
+		}, this.#_ = (e) => {
 			if (!(e.defaultPrevented || !this.#e)) switch (e.key) {
 				case "Escape":
-					e.preventDefault(), this.#e.focus(), this.#m();
+					e.preventDefault(), this.#e.focus(), this.#h();
 					break;
 				case "Tab":
-					this.#m();
+					this.#h();
 					break;
 				case "ArrowLeft":
 				case "ArrowRight":
-					e.preventDefault(), this.#v(e.key === "ArrowRight" ? 1 : -1);
+					e.preventDefault(), this.#y(e.key === "ArrowRight" ? 1 : -1);
 					break;
 				case "ArrowDown":
 				case "ArrowUp":
-					e.preventDefault(), this.#y(e.key === "ArrowDown" ? 1 : -1);
+					e.preventDefault(), this.#b(e.key === "ArrowDown" ? 1 : -1);
 					break;
 				case "Home":
 				case "End": {
@@ -76,7 +76,7 @@ var v = class extends r(f) {
 					break;
 				}
 			}
-		}, this.#_ = (e) => {
+		}, this.#v = (e) => {
 			if (this.#e) return;
 			let t = this._menus;
 			if (t.length === 0) return;
@@ -98,7 +98,7 @@ var v = class extends r(f) {
 					break;
 				default: return;
 			}
-			e.preventDefault(), i && (this.#l(i), i.focus());
+			e.preventDefault(), i && (this.#u(i), i.focus());
 		};
 	}
 	static {
@@ -141,6 +141,22 @@ var v = class extends r(f) {
       ::slotted(vf-menu) {
         margin-inline-start: calc(var(--vf-scale, 1) * -5px);
       }
+      /* The bar's right end (slot="end"): a clock, say. A row of its own,
+         pushed to the end and held 9px in, mirroring the first title's
+         inset. A caption in it rides the bar's line, so its baseline is the
+         titles'. */
+      slot[name='end'] {
+        display: flex;
+        align-items: stretch;
+        margin-inline-start: auto;
+        padding-inline-end: calc(var(--vf-scale, 1) * 9px);
+        --vf-label-line-height: var(--vf-menubar-height, 20px);
+      }
+      /* Empty, it takes no part in the row: a page that pushes its own item
+         to the end with an auto margin keeps the whole of the slack. */
+      slot[name='end'].empty {
+        display: none;
+      }
       /* rounded: the screen-corner mask. The corners aren't a shape of the
          bar's own — they're the black staircase the ROM painted over the
          CRT's rounded corners, worn by the menu bar because it sat flush with
@@ -178,10 +194,10 @@ var v = class extends r(f) {
 	#i;
 	#a;
 	connectedCallback() {
-		super.connectedCallback(), this.#t.role = "menubar", this.addEventListener("vf-menu-toggle-request", this.#u), this.addEventListener("vf-menu-hover", this.#d), this.addEventListener("vf-menu-close-request", this.#f), this.addEventListener("keydown", this.#_), this.addEventListener("pointerdown", this.#a.onPointerDown), this.addEventListener("focusout", this.#o);
+		super.connectedCallback(), this.#t.role = "menubar", this.addEventListener("vf-menu-toggle-request", this.#d), this.addEventListener("vf-menu-hover", this.#f), this.addEventListener("vf-menu-close-request", this.#p), this.addEventListener("keydown", this.#v), this.addEventListener("pointerdown", this.#a.onPointerDown), this.addEventListener("focusout", this.#o);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("vf-menu-toggle-request", this.#u), this.removeEventListener("vf-menu-hover", this.#d), this.removeEventListener("vf-menu-close-request", this.#f), this.removeEventListener("keydown", this.#_), this.removeEventListener("pointerdown", this.#a.onPointerDown), this.removeEventListener("focusout", this.#o), this.#e = null, this.#r = null;
+		super.disconnectedCallback(), this.removeEventListener("vf-menu-toggle-request", this.#d), this.removeEventListener("vf-menu-hover", this.#f), this.removeEventListener("vf-menu-close-request", this.#p), this.removeEventListener("keydown", this.#v), this.removeEventListener("pointerdown", this.#a.onPointerDown), this.removeEventListener("focusout", this.#o), this.#e = null, this.#r = null;
 	}
 	focus(e) {
 		(this.#e ?? this.#r ?? this._menus[0])?.focus(e);
@@ -193,41 +209,49 @@ var v = class extends r(f) {
 	render() {
 		return m`
       <div class="bar vf-snap vf-rule-bottom" part="bar" role="presentation">
-        <slot @slotchange=${this.#s}></slot>
+        <slot @slotchange=${this.#c}></slot>
+        <slot
+          name="end"
+          class=${this._hasEnd ? "" : "empty"}
+          @slotchange=${this.#s}
+        ></slot>
       </div>
     `;
 	}
-	#s() {
-		this.#e && !this._menus.includes(this.#e) && this.#m(), this.#r && !this._menus.includes(this.#r) && (this.#r = null), this.#c();
+	#s(e) {
+		this._hasEnd = e.target.assignedElements().length > 0;
 	}
 	#c() {
+		this.#e && !this._menus.includes(this.#e) && this.#h(), this.#r && !this._menus.includes(this.#r) && (this.#r = null), this.#l();
+	}
+	#l() {
 		let e = this._menus, t = this.#e ?? this.#r ?? e[0];
 		for (let n of e) n.barTabIndex = n === t ? 0 : -1;
 	}
-	#l(e) {
-		this.#r = e, this.#c();
+	#u(e) {
+		this.#r = e, this.#l();
 	}
-	#u;
 	#d;
 	#f;
-	#p(e) {
+	#p;
+	#m(e) {
 		for (let t of this._menus) t !== e && (t.open = !1);
-		e.open = !0, this.#e = e, this.#r = e, this.#n.reset(), this.#c(), this.#i.attach();
+		e.open = !0, this.#e = e, this.#r = e, this.#n.reset(), this.#l(), this.#i.attach();
 	}
-	#m() {
+	#h() {
 		for (let e of this._menus) e.open = !1;
-		this.#e = null, this.#n.reset(), this.#i.detach(), this.#c();
+		this.#e = null, this.#n.reset(), this.#i.detach(), this.#l();
 	}
-	#h;
 	#g;
 	#_;
-	#v(e) {
+	#v;
+	#y(e) {
 		let t = this._menus;
 		if (!this.#e || t.length === 0) return;
 		let n = t[(t.indexOf(this.#e) + e + t.length) % t.length];
-		n && n !== this.#e && (this.#p(n), n.focus());
+		n && n !== this.#e && (this.#m(n), n.focus());
 	}
-	#y(e) {
+	#b(e) {
 		if (!this.#e) return;
 		let t = this.#e.items;
 		if (t.length === 0) return;
@@ -235,15 +259,15 @@ var v = class extends r(f) {
 		r = n < 0 ? e === 1 ? 0 : t.length - 1 : (n + e + t.length) % t.length, t[r]?.focus();
 	}
 };
-n([g()], v.prototype, "label", void 0), n([g({
+n([g()], y.prototype, "label", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "rounded", void 0), n([g({
+})], y.prototype, "rounded", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "shortcuts", void 0), n([_({
+})], y.prototype, "shortcuts", void 0), n([_({
 	selector: "vf-menu",
 	flatten: !0
-})], v.prototype, "_menus", void 0), v = n([e("vf-menu-bar")], v);
+})], y.prototype, "_menus", void 0), n([v()], y.prototype, "_hasEnd", void 0), y = n([e("vf-menu-bar")], y);
 //#endregion
-export { v as VfMenuBar };
+export { y as VfMenuBar };

package/dist/components/vf-window.d.ts

@@ -190,6 +190,19 @@ export declare class VfWindow extends VfWindow_base {
     maxWidth?: number | null;
     /** See {@link minWidth}. Unbounded by default. */
     maxHeight?: number | null;
+    /**
+     * The sizeRect as it applies, in whole system px: `min-width` and
+     * `min-height`, or the 80×54 floor where unset, and `max-width` and
+     * `max-height`, `Infinity` where unbounded — the range the grow box drags
+     * the window in. A page that sizes the window itself, re-fitting it to a
+     * smaller screen say, reads it to stay inside the same range.
+     */
+    get sizeLimits(): {
+        minWidth: number;
+        minHeight: number;
+        maxWidth: number;
+        maxHeight: number;
+    };
     /**
      * Put System 7 scroll rails on the window edge — the classic document
      * window. The body slot renders inside a built-in `vf-scroll-area` pulled

package/dist/components/vf-window.js

@@ -18,6 +18,7 @@ import { DragController as j } from "../drag.js";
 import { TitleCenterController as M, chromeTitleBar as N, closeBox as P, widgetLabel as F, zoomBox as I } from "../chrome.js";
 import { prefersReducedMotion as L, windowRectFraction as R } from "../motion.js";
 import { paintSelectionRect as z, penPhase as B, xorPenCanvas as V } from "../open-art.js";
+import "../window-chrome.js";
 import "./vf-scroll-area.js";
 import { LitElement as H, css as U, html as W, nothing as G } from "lit";
 import { property as K, query as q, state as J } from "lit/decorators.js";
@@ -37,7 +38,7 @@ var Q = 24, $ = class extends A(l(H)) {
 			let r = o(this.offsetWidth, this);
 			return {
 				x: Math.min(Math.max(e, Q - r), n.width - Q),
-				y: Math.min(Math.max(t, 0), Math.max(0, n.height - Q))
+				y: Math.min(Math.max(t, n.top), Math.max(n.top, n.height - Q))
 			};
 		}, this._placement = new c(this, (e, t, n) => this.#t(e, t, n)), this._drag = new j(this, {
 			onDragStart: (e) => {
@@ -376,6 +377,14 @@ var Q = 24, $ = class extends A(l(H)) {
     `
 		];
 	}
+	get sizeLimits() {
+		return {
+			minWidth: this.minWidth ?? Y,
+			minHeight: this.minHeight ?? X,
+			maxWidth: this.maxWidth ?? Infinity,
+			maxHeight: this.maxHeight ?? Infinity
+		};
+	}
 	#e;
 	willUpdate(e) {
 		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = m(this, "--vf-dots-pattern"));

package/dist/events.d.ts

@@ -46,7 +46,8 @@ export declare function emitNative(host: EventTarget, type: 'input' | 'change'):
 /**
  * Run a control's **activation behavior** the way HTML runs a native one's: at
  * the *end* of the click's propagation, and not at all if anything on the path
- * called `preventDefault()`.
+ * called `preventDefault()`. A form's `submit` defers the same way: the
+ * listener waits on the event's own type.
  *
  * This is what makes `preventDefault()` on a native checkbox — or on any
  * ancestor — actually stop it from checking. A handler that acts where it sits
@@ -73,7 +74,7 @@ export declare function emitNative(host: EventTarget, type: 'input' | 'change'):
  * submit proxy's re-entrancy guard woven through it.
  *
  * @param host    the element whose ownerDocument supplies the window to defer on
- * @param event   the click being deferred; its `defaultPrevented` is the verdict
+ * @param event   the click (or submit) being deferred; its `defaultPrevented` is the verdict
  * @param action  run once, at the end of the path, unless cancelled
  */
 export declare function deferActivation(host: Element, event: Event, action: () => void): void;

package/dist/events.js

@@ -16,10 +16,10 @@ function t(e, t) {
 function n(e, t, n) {
 	let r = e.ownerDocument.defaultView;
 	if (!r) return;
-	let i = 0, a = () => {
-		r.removeEventListener("click", a), r.clearTimeout(i), !t.defaultPrevented && n();
+	let i = t.type, a = 0, o = () => {
+		r.removeEventListener(i, o), r.clearTimeout(a), !t.defaultPrevented && n();
 	};
-	r.addEventListener("click", a), i = r.setTimeout(a, 0);
+	r.addEventListener(i, o), a = r.setTimeout(o, 0);
 }
 //#endregion
 export { n as deferActivation, e as emit, t as emitNative };

package/dist/index.d.ts

@@ -13,6 +13,8 @@
 export { VfDesktop } from './components/vf-desktop.js';
 export { VfWindow } from './components/vf-window.js';
 export type { VfViewportBox, VfWindowHideOptions, VfWindowShowOptions, } from './components/vf-window.js';
+export { windowChrome, WINDOW_MIN_WIDTH, WINDOW_MIN_HEIGHT } from './window-chrome.js';
+export type { VfInsets, VfWindowChromeOptions } from './window-chrome.js';
 export { VfDialog } from './components/vf-dialog.js';
 export { VfSeparator } from './components/vf-separator.js';
 export { VfButton } from './components/vf-button.js';
@@ -172,7 +174,7 @@ export type { PlacementBounds, PlacementClamp, PlacementOrigin, VfPositionedInte
 export { VfSized } from './size.js';
 export type { VfSizedInterface } from './size.js';
 export { VfModalDialog, modalDialogStyles } from './modal-dialog.js';
-export type { VfCloseReason } from './modal-dialog.js';
+export type { VfCloseDetail, VfCloseReason } from './modal-dialog.js';
 /** The embedded System 7 bitmap faces and the registration helper. */
 export { registerEmbeddedFont, PIXEL_GRID_METRICS } from './styles/register-embedded-font.js';
 export type { EmbeddedFontMetrics } from './styles/register-embedded-font.js';