vintage-frames 0.14.1 → 0.16.0

package/dist/chrome.d.ts

@@ -61,6 +61,15 @@ export declare class TitleCenterController implements ReactiveController {
  * belongs to.
  */
 export declare const widgetLabel: (action: string, heading: string) => string;
+/** The modifier keys held on a close box's click, which its `vf-close` carries. */
+export interface VfCloseKeys {
+    altKey: boolean;
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+}
+/** The modifier keys an event carries. */
+export declare const closeKeys: (event: MouseEvent | KeyboardEvent) => VfCloseKeys;
 /**
  * The close box (left of the bar) and zoom box (right of the bar), shared by
  * `vf-window` and a `closable` `vf-dialog`. Byte-identical markup for the same
@@ -69,5 +78,5 @@ export declare const widgetLabel: (action: string, heading: string) => string;
  * drag delegates must keep ignoring pointerdowns on `.box` so a press on a
  * widget never starts a bar drag.
  */
-export declare const closeBox: (label: string, onClick: () => void) => TemplateResult;
+export declare const closeBox: (label: string, onClick: (event: MouseEvent) => void) => TemplateResult;
 export declare const zoomBox: (label: string, onClick: () => void) => TemplateResult;

package/dist/chrome.js

@@ -74,7 +74,12 @@ var a = i`${[
 	reset() {
 		this.written &&= (this.host.style.removeProperty("--vf-title-dx"), this.applied = 0, "");
 	}
-}, u = (e, t) => t ? `${e} ${t}` : e, d = (e, t) => i`
+}, u = (e, t) => t ? `${e} ${t}` : e, d = (e) => ({
+	altKey: e.altKey,
+	shiftKey: e.shiftKey,
+	metaKey: e.metaKey,
+	ctrlKey: e.ctrlKey
+}), f = (e, t) => i`
   <button
     type="button"
     class="box close vf-focus"
@@ -82,7 +87,7 @@ var a = i`${[
     aria-label=${e}
     @click=${t}
   ></button>
-`, f = (e, t) => i`
+`, p = (e, t) => i`
   <button
     type="button"
     class="box zoom vf-focus"
@@ -92,4 +97,4 @@ var a = i`${[
   ></button>
 `;
 //#endregion
-export { l as TitleCenterController, o as chromeTitleBar, d as closeBox, u as widgetLabel, f as zoomBox };
+export { l as TitleCenterController, o as chromeTitleBar, f as closeBox, d as closeKeys, u as widgetLabel, p as zoomBox };

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

@@ -75,7 +75,11 @@ export declare class VfButton extends VfButton_base {
     type: 'button' | 'submit' | 'reset';
     /** Form field name; submitted as `name=value` when `type="submit"`. */
     name: string;
-    /** Value submitted under `name` when `type="submit"`. */
+    /**
+     * Value submitted under `name` when `type="submit"`. In a
+     * `<form method="dialog">` inside a `vf-dialog`, the dialog's answer
+     * (`returnValue`), with or without a `name`.
+     */
     value: string;
     /**
      * The submission overrides native `<button>` carries, honored on

package/dist/components/vf-button.js

@@ -253,7 +253,7 @@ var S = "vf-submitter", C = class extends i(h) {
 		let e = this.resolvedType;
 		if (!this.internals.form || e === "button" || this.isDisabled) return;
 		let t = document.createElement("button");
-		t.type = e, t.slot = S, t.addEventListener("click", (e) => e.stopPropagation()), e === "submit" && (this.name && (t.name = this.name, t.value = this.value), this.formAction && (t.formAction = this.formAction), this.formEnctype && (t.formEnctype = this.formEnctype), this.formMethod && (t.formMethod = this.formMethod), this.formTarget && (t.formTarget = this.formTarget), t.formNoValidate = this.formNoValidate), this.#e = !0;
+		t.type = e, t.slot = S, t.addEventListener("click", (e) => e.stopPropagation()), e === "submit" && (this.name && (t.name = this.name), t.value = this.value, this.formAction && (t.formAction = this.formAction), this.formEnctype && (t.formEnctype = this.formEnctype), this.formMethod && (t.formMethod = this.formMethod), this.formTarget && (t.formTarget = this.formTarget), t.formNoValidate = this.formNoValidate), this.#e = !0;
 		try {
 			this.append(t), t.click();
 		} finally {

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

@@ -8,7 +8,9 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * setting) — and manages the stacking order and `active` state of slotted
  * `vf-window` children: a `pointerdown` or
  * `focusin` (keyboard focus) anywhere inside a window brings it to the front
- * and makes it the single active window. The windows' light-DOM order is kept
+ * and makes it the single active window. A press on a title bar with ⌘ held
+ * raises nothing, so a background window is dragged where it stands in the
+ * stack. The windows' light-DOM order is kept
  * in step with the stacking order (bottom-most first, synced in a task once
  * any pointer gesture has ended), so tabbing walks the stack the way the eye
  * does and Shift+Tab is its exact mirror.
@@ -155,7 +157,8 @@ export declare class VfDesktop extends VfDesktop_base {
      * the whole screen, 1-bit at every density and zoom. A
      * `--vf-desktop-pattern` token override still wins and renders the
      * consumer's tile as a placed grid; an unrecognized value warns once and
-     * keeps the dither.
+     * keeps the dither. Reflects, so a change can be observed on the
+     * attribute.
      */
     pattern: string | null | undefined;
     /**

package/dist/components/vf-desktop.js

@@ -14,7 +14,7 @@ import { SCREEN_CORNER as C, steppedCornerClip as w } from "../pixel-frame.js";
 import { LitElement as T, css as E, html as D, unsafeCSS as O } from "lit";
 import { property as k, query as A, queryAssignedElements as j } from "lit/decorators.js";
 //#region src/components/vf-desktop.ts
-var M = 1e6, N = 2 * M, P = 2000001, F = 512, I = 342, L = "gray-50", R = v(g[L], "#000000", "#ffffff"), z = u(R.width, R.height, d(R.rects)), B = f(R.width), V = (e) => Number(e.style.zIndex) || 0, H = class extends s(T) {
+var M = 1e6, N = 2 * M, P = 2000001, F = 512, I = 342, L = "gray-50", R = v(g[L], "#000000", "#ffffff"), z = u(R.width, R.height, d(R.rects)), B = f(R.width), V = (e) => Number(e.style.zIndex) || 0, H = (e) => e.composedPath().some((e) => e instanceof Element && e.classList.contains("vf-title-bar")), U = class extends s(T) {
 	constructor(...e) {
 		super(...e), this.width = F, this.height = I, this.bezel = 0, this.pattern = L, this.scale = new n(this), this.gridSnap = new x(this), this._token = "", this._desktopPattern = g[L], this.#e = !1, this.patternFill = new y(this, {
 			getBox: () => this.screen,
@@ -32,7 +32,7 @@ var M = 1e6, N = 2 * M, P = 2000001, F = 512, I = 342, L = "gray-50", R = v(g[L]
 		]]), this._onPointerDown = (e) => {
 			this._pointerGesture || (this._pointerGesture = !0, this._gestureEnd.attach());
 			let t = this._windowFromEvent(e);
-			t && this._raise(t);
+			t && e.metaKey && H(e) || t && this._raise(t);
 		}, this._onGestureEnd = () => {
 			this._gestureEnd.detach(), this._pointerGesture = !1, this._requestDomSync();
 		}, this._onDragSurfaceRequest = (e) => {
@@ -388,9 +388,9 @@ var M = 1e6, N = 2 * M, P = 2000001, F = 512, I = 342, L = "gray-50", R = v(g[L]
     `;
 	}
 };
-o([k({ type: Number })], H.prototype, "width", void 0), o([k({ type: Number })], H.prototype, "height", void 0), o([k({ type: Number })], H.prototype, "bezel", void 0), o([k()], H.prototype, "pattern", void 0), o([k({
+o([k({ type: Number })], U.prototype, "width", void 0), o([k({ type: Number })], U.prototype, "height", void 0), o([k({ type: Number })], U.prototype, "bezel", void 0), o([k({ reflect: !0 })], U.prototype, "pattern", void 0), o([k({
 	type: Number,
 	attribute: "window-top"
-})], H.prototype, "windowTop", void 0), o([j({ selector: "vf-window" })], H.prototype, "_windows", void 0), o([A(".screen")], H.prototype, "screen", void 0), o([A(".drag-surface")], H.prototype, "dragSurface", void 0), H = o([t("vf-desktop")], H);
+})], U.prototype, "windowTop", void 0), o([j({ selector: "vf-window" })], U.prototype, "_windows", void 0), o([A(".screen")], U.prototype, "screen", void 0), o([A(".drag-surface")], U.prototype, "dragSurface", void 0), U = o([t("vf-desktop")], U);
 //#endregion
-export { H as VfDesktop };
+export { U as VfDesktop };

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

@@ -25,6 +25,11 @@ import { VfModalDialog } from '../modal-dialog.js';
  * closes it too, with `{ reason: 'outside' }` — for the About box; off by
  * default, since the classic modal ignored an outside click.
  *
+ * Answers: a `<form method="dialog">` inside it closes it with the
+ * submitting button's `value` as `returnValue`, and `close(value)` does the
+ * same. `vf-close` carries it as `detail.returnValue`, null when the close
+ * carried none (Escape, a click outside, the close box).
+ *
  * Keyboard, the classic Dialog Manager's two rules ({@link VfModalDialog}):
  * on open, focus goes to the first text-entry control — a slotted control
  * with `autofocus` first — or, with none, to the default button
@@ -48,8 +53,13 @@ import { VfModalDialog } from '../modal-dialog.js';
  * @csspart content - The scrolling region inside the body (the slotted
  *   content). Inert while the content fits; over-stuffed, it scrolls under a
  *   System 7 rail and becomes a keyboard stop.
+ * @fires vf-show - Dialog opened, placed and given its initial focus. Detail
+ *   `{ focus }`, the element focused: the moment to select a field's default
+ *   text (`select()`) or measure copy that varies.
  * @fires vf-close - Dialog closed. Detail `{ reason: 'escape' | 'close' |
- *   'outside' }` — `'outside'` only under `light-dismiss`.
+ *   'outside', returnValue: string | null }` — `'outside'` only under
+ *   `light-dismiss` — plus `altKey`, `shiftKey`, `metaKey` and `ctrlKey`
+ *   when the close box closed it.
  * @cssprop --vf-dots-pattern - the windoid bar's dot-grid dither — a 2×2 tile,
  *   one black pixel at the origin (`vfDots`; override the whole pattern like
  *   `--vf-desktop-pattern`)
@@ -87,7 +97,8 @@ export declare class VfDialog extends VfModalDialog {
     /**
      * Show the close box (left side of the title bar). Off by default — the
      * bare movable-modal bar. Ignored with `frame="plain"` (no bar). Clicking
-     * it closes the dialog and fires `vf-close` with `{ reason: 'close' }`.
+     * it closes the dialog and fires `vf-close` with `{ reason: 'close' }` and
+     * the modifier keys held on the click, as `vf-window`'s close box does.
      */
     closable: boolean;
     /**

package/dist/components/vf-dialog.js

@@ -8,15 +8,15 @@ import { vfTitleBar as s, vfWindowWidgets as c } from "../styles/recipes/title-b
 import { vfFocus as l, vfFocusRing as u } from "../styles/recipes/focus.js";
 import { vfScrollRail as d } from "../styles/recipes/scroll-rail.js";
 import { DragController as f } from "../drag.js";
-import { TitleCenterController as p, chromeTitleBar as m, closeBox as h, widgetLabel as g } from "../chrome.js";
-import { ScrollStateController as _ } from "../scroll-state.js";
-import { ScrollRailController as v, renderScrollRail as y } from "../scroll-rail.js";
-import { VfModalDialog as b, modalDialogStyles as x } from "../modal-dialog.js";
-import { css as S, html as C, nothing as w } from "lit";
-import { property as T, query as E, state as D } from "lit/decorators.js";
-import { styleMap as O } from "lit/directives/style-map.js";
+import { TitleCenterController as p, chromeTitleBar as m, closeBox as h, closeKeys as g, widgetLabel as _ } from "../chrome.js";
+import { ScrollStateController as v } from "../scroll-state.js";
+import { ScrollRailController as y, renderScrollRail as b } from "../scroll-rail.js";
+import { VfModalDialog as x, modalDialogStyles as S } from "../modal-dialog.js";
+import { css as C, html as w, nothing as T } from "lit";
+import { property as E, query as D, state as O } from "lit/decorators.js";
+import { styleMap as k } from "lit/directives/style-map.js";
 //#region src/components/vf-dialog.ts
-var k = class extends b {
+var A = class extends x {
 	constructor(...e) {
 		super(...e), this._drag = new f(this, {
 			onDragStart: (e) => {
@@ -34,9 +34,9 @@ var k = class extends b {
 				};
 			},
 			onDrag: (e, t) => this.placeAt(e, t)
-		}), this._titleCenter = new p(this), this.heading = "", this.label = "", this.closable = !1, this._scrollable = !1, this._scrollState = new _(this, () => this._content, void 0, (e) => {
+		}), this._titleCenter = new p(this), this.heading = "", this.label = "", this.closable = !1, this._scrollable = !1, this._scrollState = new v(this, () => this._content, void 0, (e) => {
 			this._scrollable = e.y;
-		}), this._rail = new v(this, { getScroll: () => this._content });
+		}), this._rail = new y(this, { getScroll: () => this._content });
 	}
 	static {
 		this.styles = [
@@ -47,8 +47,8 @@ var k = class extends b {
 			s,
 			c,
 			d,
-			x,
-			S`
+			S,
+			C`
       :host {
         display: contents;
       }
@@ -164,34 +164,34 @@ var k = class extends b {
 	_onBodySlotChange() {
 		this._scrollState.measure(), this._rail.sync();
 	}
-	_onCloseClick() {
-		this.close();
+	_onCloseClick(e) {
+		this.closeFromBox(g(e));
 	}
 	render() {
-		let e = this.frame === "plain", t = !e && !this.label && this.heading !== "", n = C`
+		let e = this.frame === "plain", t = !e && !this.label && this.heading !== "", n = w`
       <div class="body" part="body">
         <div
           class="content vf-scroll"
           part="content"
-          tabindex=${this._scrollable ? "0" : w}
-          role=${this._scrollable ? "group" : w}
+          tabindex=${this._scrollable ? "0" : T}
+          role=${this._scrollable ? "group" : T}
         >
           <slot @slotchange=${this._onBodySlotChange}></slot>
         </div>
-        ${y(this._rail, "vertical")}
+        ${b(this._rail, "vertical")}
       </div>
     `;
-		return C`
+		return w`
       <dialog
-        style=${O(this.dialogSize)}
-        aria-labelledby=${t ? "title" : w}
-        aria-label=${t ? w : this.label || this.heading || "Dialog"}
+        style=${k(this.dialogSize)}
+        aria-labelledby=${t ? "title" : T}
+        aria-label=${t ? T : this.label || this.heading || "Dialog"}
         @cancel=${this._onNativeCancel}
         @close=${this._onNativeClose}
       >
         <div class="vf-modal-frame" part="frame">
-          ${e ? w : m(this._drag, C`
-                  ${this.closable ? h(g("Close", this.heading), this._onCloseClick) : w}
+          ${e ? T : m(this._drag, w`
+                  ${this.closable ? h(_("Close", this.heading), this._onCloseClick) : T}
                   <span class="vf-title" part="title" id="title"
                     >${this.heading}</span
                   >
@@ -202,9 +202,9 @@ var k = class extends b {
     `;
 	}
 };
-r([T()], k.prototype, "heading", void 0), r([T()], k.prototype, "label", void 0), r([T({
+r([E()], A.prototype, "heading", void 0), r([E()], A.prototype, "label", void 0), r([E({
 	type: Boolean,
 	reflect: !0
-})], k.prototype, "closable", void 0), r([T({ reflect: !0 })], k.prototype, "frame", void 0), r([E(".content")], k.prototype, "_content", void 0), r([D()], k.prototype, "_scrollable", void 0), k = r([e("vf-dialog")], k);
+})], A.prototype, "closable", void 0), r([E({ reflect: !0 })], A.prototype, "frame", void 0), r([D(".content")], A.prototype, "_content", void 0), r([O()], A.prototype, "_scrollable", void 0), A = r([e("vf-dialog")], A);
 //#endregion
-export { k as VfDialog };
+export { A as VfDialog };

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

@@ -127,19 +127,18 @@ var y = class extends r(f) {
         display: flex;
         align-items: stretch;
         height: 100%;
-        /* 9px of bar before the first title's plate (System 7 put the Apple
-           plate 9 system px from the screen edge, clear of the 5px corner
-           mask), plus 5px cancelling the first title's share of the overlap
+        /* 9px of bar before the first title's plate, clear of the 5px corner
+           mask, plus 4px cancelling the first title's share of the overlap
            below. */
-        padding-inline-start: calc(var(--vf-scale, 1) * 14px);
+        padding-inline-start: calc(var(--vf-scale, 1) * 13px);
       }
-      /* Adjacent title plates OVERLAP by 5 system px: Menus.png spaces title
-         ink 14px apart while each plate runs 10px left / 9px right of its own
-         ink, so neighboring plates share a 5px band. A title's plate is its
-         label box (padding in vf-menu), so the overlap is layout: every menu
-         pulled 5px into its left neighbor. */
+      /* Adjacent title plates OVERLAP by 4 system px: title ink sits 15px
+         apart while each plate runs 10px left / 9px right of its own ink, so
+         neighboring plates share a 4px band. A title's plate is its label box
+         (padding in vf-menu), so the overlap is layout: every menu pulled 4px
+         into its left neighbor. */
       ::slotted(vf-menu) {
-        margin-inline-start: calc(var(--vf-scale, 1) * -5px);
+        margin-inline-start: calc(var(--vf-scale, 1) * -4px);
       }
       /* 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

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

@@ -17,14 +17,19 @@ var y = /* @__PURE__ */ new Map([
 	["⌥", "Alt"],
 	["⇧", "Shift"],
 	["⌘", "Meta"]
-]);
-function b(e) {
+]), b = /* @__PURE__ */ new Map([
+	["←", "ArrowLeft"],
+	["↑", "ArrowUp"],
+	["→", "ArrowRight"],
+	["↓", "ArrowDown"]
+]), x = (e) => b.get(e) ?? e;
+function S(e) {
 	let t = [...e.trim()], n = [];
 	for (; t.length > 0 && y.has(t[0]);) n.push(y.get(t.shift()));
 	let r = t.join("");
-	return r ? [...n, r].join("+") : "";
+	return r ? [...n, x(r)].join("+") : "";
 }
-function x(e, t) {
+function C(e, t) {
 	let n = [...t.trim()], r = {
 		Meta: !1,
 		Control: !1,
@@ -35,9 +40,9 @@ function x(e, t) {
 	let i = n.join("");
 	if (!i || !r.Meta && !r.Control && !r.Alt && [...i].length === 1) return !1;
 	let a = r.Meta ? e.metaKey || e.ctrlKey : !e.metaKey, o = r.Control ? e.ctrlKey : r.Meta || !e.ctrlKey;
-	return a && o && e.altKey === r.Alt && e.shiftKey === r.Shift && e.key.toLowerCase() === i.toLowerCase();
+	return a && o && e.altKey === r.Alt && e.shiftKey === r.Shift && e.key.toLowerCase() === x(i).toLowerCase();
 }
-var S = class extends a(f) {
+var w = class extends a(f) {
 	static {
 		this.styles = [
 			s,
@@ -175,7 +180,7 @@ var S = class extends a(f) {
 	#i;
 	constructor() {
 		super(), this.scale = new r(this), this.disabled = !1, this.checked = !1, this.active = !1, this.checkable = !1, this.shortcut = "", this._blinkPhase = null, this.#t = !1, this.#n = !1, this.#r = this.attachInternals(), this.#i = !1, this.#d = (e) => {
-			e.defaultPrevented || e.isComposing || this.disabled || !this.shortcut || this.closest("vf-menu[shortcuts], vf-menu-bar[shortcuts]") && x(e, this.shortcut) && (e.preventDefault(), !(e.repeat || this.#t) && (t(this, "vf-menu-flash-request", { item: this }, { composed: !1 }), this.activate()));
+			e.defaultPrevented || e.isComposing || this.disabled || !this.shortcut || this.closest("vf-menu[shortcuts], vf-menu-bar[shortcuts]") && C(e, this.shortcut) && (e.preventDefault(), !(e.repeat || this.#t) && (t(this, "vf-menu-flash-request", { item: this }, { composed: !1 }), this.activate()));
 		}, this.addEventListener("keydown", this.#u), this.addEventListener("pointerdown", this.#c), this.addEventListener("click", this.#l);
 	}
 	get #a() {
@@ -191,7 +196,7 @@ var S = class extends a(f) {
 		e.has("disabled") && (this.#r.ariaDisabled = this.disabled ? "true" : null, this.disabled && this.#f()), e.has("checked") && this.checked && (this.#n = !0), (e.has("checked") || e.has("checkable")) && this.#s(), e.has("shortcut") && this.#o();
 	}
 	#o() {
-		this.#r.ariaKeyShortcuts = b(this.shortcut) || null;
+		this.#r.ariaKeyShortcuts = S(this.shortcut) || null;
 	}
 	#s() {
 		this.#a ? (this.#r.role = "menuitemcheckbox", this.#r.ariaChecked = this.checked ? "true" : "false") : (this.#r.role = "menuitem", this.#r.ariaChecked = null);
@@ -257,15 +262,15 @@ var S = class extends a(f) {
 i([g({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "disabled", void 0), i([g({
+})], w.prototype, "disabled", void 0), i([g({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "checked", void 0), i([g({
+})], w.prototype, "checked", void 0), i([g({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "active", void 0), i([g({
+})], w.prototype, "active", void 0), i([g({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "checkable", void 0), i([g()], S.prototype, "shortcut", void 0), i([g()], S.prototype, "value", void 0), i([_()], S.prototype, "_blinkPhase", void 0), S = i([n("vf-menu-item")], S);
+})], w.prototype, "checkable", void 0), i([g()], w.prototype, "shortcut", void 0), i([g()], w.prototype, "value", void 0), i([_()], w.prototype, "_blinkPhase", void 0), w = i([n("vf-menu-item")], w);
 //#endregion
-export { S as VfMenuItem };
+export { w as VfMenuItem };

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

@@ -28,9 +28,12 @@ declare const VfMenu_base: (new (...args: any[]) => import("../position.js").VfP
  *
  * @slot - Menu contents: `vf-menu-item` and `vf-separator` elements.
  * @slot label - Replaces the `label` text in the bar — e.g. a `vf-img` apple
- *   icon for the Apple menu. Keep the `label` attribute set too: it stays the
- *   menu's accessible name (the bar item's `aria-label` and the panel's) when
- *   the visible title is an image.
+ *   icon for the Apple menu. An icon (`vf-img`, `img`, `svg`, `picture` or
+ *   `canvas`) is drawn in a 16×16 cell and placed for one: 6 system px into
+ *   its plate, 6 short of the plate's end, on the plate's top row. Text
+ *   keeps the text title's place. Keep the `label` attribute set too: it stays
+ *   the menu's accessible name (the bar item's `aria-label` and the panel's)
+ *   when the visible title is an image.
  * @csspart label - The menu title in the bar (inverts while open; flashes
  *   when a closed menu's item is activated by its key equivalent).
  * @csspart panel - The dropped `.vf-panel` containing the items.
@@ -74,6 +77,8 @@ export declare class VfMenu extends VfMenu_base {
      */
     barTabIndex: number;
     private _labelEl;
+    /** Whether the title is art — only images in the `label` slot — rather than text. */
+    private _artTitle;
     private _assignedItems;
     /** The enabled `vf-menu-item` children, in document order. */
     get items(): VfMenuItem[];