vintage-frames 0.18.0 → 0.19.1

package/dist/components/vf-menu.js

@@ -1,33 +1,48 @@
 import { deferActivation as e, emit as t } from "../events.js";
 import { vfElement as n } from "../define.js";
-import { ScaleController as r } from "../scale.js";
-import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as a } from "../position.js";
-import { vfDisplay as o } from "../styles/recipes/display-face.js";
-import { vfBase as s } from "../styles/recipes/host.js";
-import { vfPanel as c } from "../styles/recipes/surface.js";
-import { vfFocusUnderline as l } from "../styles/recipes/focus.js";
-import { GridSnapController as u } from "../grid-snap.js";
-import { DocumentListenersController as d, releaseAfterGesture as f } from "../document-listeners.js";
-import { runSelectionBlink as p } from "../motion.js";
-import { FocusRuleController as m } from "../focus-modality.js";
-import { TypeAheadBuffer as h } from "../type-ahead.js";
-import { MenuPressController as g } from "../menu-press.js";
-import { LitElement as _, css as v, html as y, nothing as b } from "lit";
-import { property as x, query as S, queryAssignedElements as C, state as w } from "lit/decorators.js";
+import { ScaleController as r, sys as i } from "../scale.js";
+import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as o } from "../position.js";
+import { vfDisplay as s } from "../styles/recipes/display-face.js";
+import { vfBase as c } from "../styles/recipes/host.js";
+import { vfPanel as l } from "../styles/recipes/surface.js";
+import { vfFocusUnderline as u } from "../styles/recipes/focus.js";
+import { GridSnapController as d } from "../grid-snap.js";
+import { DocumentListenersController as f, releaseAfterGesture as p } from "../document-listeners.js";
+import { runSelectionBlink as m } from "../motion.js";
+import { FocusRuleController as h } from "../focus-modality.js";
+import { TypeAheadBuffer as g } from "../type-ahead.js";
+import { navigateMenus as _ } from "../menu-navigation.js";
+import { MenuPressController as v } from "../menu-press.js";
+import { LitElement as y, css as b, html as x, nothing as S } from "lit";
+import { property as C, query as w, queryAssignedElements as T, state as E } from "lit/decorators.js";
 //#region src/components/vf-menu.ts
-var T = /* @__PURE__ */ new Set([
+var D = /* @__PURE__ */ new Set([
 	"vf-img",
 	"img",
 	"svg",
 	"picture",
 	"canvas"
-]), E = class extends a(_) {
+]);
+function O(e) {
+	let t = document.documentElement, n = 0, r = 0, a = t.clientWidth, o = t.clientHeight, s = e.closest("vf-desktop");
+	if (s) {
+		let t = (s.shadowRoot?.querySelector(".screen") ?? s).getBoundingClientRect();
+		n = Math.max(n, t.left), r = Math.max(r, t.top + i(s.workArea.top, e)), a = Math.min(a, t.right), o = Math.min(o, t.bottom);
+	}
+	return {
+		left: n,
+		top: r,
+		right: a,
+		bottom: o
+	};
+}
+var k = class extends o(y) {
 	constructor(...e) {
-		super(...e), this.scale = new r(this), this.gridSnap = new u(this), this.#e = new m(this), this.label = "", this.open = !1, this.shortcuts = !1, this.barTabIndex = 0, this._artTitle = !1, this.#t = (e) => {
+		super(...e), this.scale = new r(this), this.gridSnap = new d(this), this.#e = new h(this), this.label = "", this.open = !1, this.shortcuts = !1, this.barTabIndex = 0, this._artTitle = !1, this.#t = (e) => {
 			let t = e.target.assignedElements();
-			this._artTitle = t.length > 0 && t.every((e) => T.has(e.localName));
-		}, this.#n = new g(this, {
+			this._artTitle = t.length > 0 && t.every((e) => D.has(e.localName));
+		}, this.#n = new v(this, {
 			menus: () => [this],
 			open: (e) => {
 				e.open = !0;
@@ -35,70 +50,48 @@ var T = /* @__PURE__ */ new Set([
 			close: () => {
 				this.open = !1;
 			}
-		}), this.#i = this.attachInternals(), this.#a = new h(), this.#o = !1, this.#s = () => {
-			this.#r || this.focus(), this.open = !1;
-		}, this._flashOn = !1, this.#l = () => {
-			this.open || (this.#u(), this.#c = p((e) => {
+		}), this.#a = null, this.#o = void 0, this.#s = "right", this.#u = this.attachInternals(), this.#d = new g(), this.#f = !1, this.#p = () => {
+			this.#i || (this.#r || this.focus(), this.open = !1);
+		}, this._flashOn = !1, this.#h = () => {
+			this.open || this.#i || (this.#g(), this.#m = m((e) => {
 				this._flashOn = e;
 			}, () => {
-				this._flashOn = !1, this.#c = void 0;
+				this._flashOn = !1, this.#m = void 0;
 			}));
-		}, this.#d = (e) => {
+		}, this.#_ = (e) => {
 			e.composedPath().includes(this) || (this.open = !1);
-		}, this.#f = (e) => {
-			if (!e.defaultPrevented) switch (e.key) {
-				case "Escape":
-					e.preventDefault(), this.open = !1, this.focus();
-					break;
-				case "Tab":
-					this.open = !1;
-					break;
-				case "ArrowDown":
-				case "ArrowUp":
-					e.preventDefault(), this.#p(e.key === "ArrowDown" ? 1 : -1);
-					break;
-				case "Home":
-				case "End": {
-					e.preventDefault();
-					let t = this.items;
-					t[e.key === "Home" ? 0 : t.length - 1]?.focus();
-					break;
-				}
-				default: {
-					if (e.key.length !== 1 || e.key === " " || e.metaKey || e.ctrlKey || e.altKey) break;
-					e.preventDefault();
-					let t = this.items, n = t.indexOf(document.activeElement);
-					t[this.#a.feed(e.key, n, t.map((e) => ({
-						text: e.textContent ?? "",
-						disabled: !1
-					})))]?.focus();
-					break;
+		}, this.#v = (e) => {
+			_(e, {
+				menu: this,
+				typeAhead: this.#d,
+				close: (e) => {
+					e && this.focus(), this.open = !1;
 				}
-			}
-		}, this.#m = new d(this, () => [[
+			});
+		}, this.#y = new f(this, () => [[
 			document,
 			"pointerdown",
-			this.#d,
+			this.#_,
 			!0
 		], [
 			document,
 			"keydown",
-			this.#f,
+			this.#v,
 			!0
-		]]), this.#g = (e) => {
-			if (!this.open || this.#r) return;
+		]]), this.#x = (e) => {
+			if (!this.open || this.#r || this.#i) return;
 			let t = e.relatedTarget;
 			t instanceof Node && (this.contains(t) || this.renderRoot.contains(t)) || (this.open = !1);
-		}, this.#_ = (e) => {
-			this.#e.suppress(), !this.#r && this.#n.onPointerDown(e);
+		}, this.#S = (e) => {
+			this.#e.suppress(), !(this.#r || this.#i) && this.#n.onPointerDown(e);
 		};
 	}
 	static {
 		this.styles = [
-			s,
-			o,
 			c,
-			v`
+			s,
+			l,
+			b`
       :host {
         display: inline-block;
         position: relative;
@@ -203,7 +196,7 @@ var T = /* @__PURE__ */ new Set([
       }
       :host(:not([open])) .label.vf-focus-rule .title::after {
         --vf-focus-underline-offset: -2px;
-        ${l}
+        ${u}
       }
       .panel {
         position: absolute;
@@ -239,6 +232,29 @@ var T = /* @__PURE__ */ new Set([
       :host(:not([open])) .panel {
         display: none;
       }
+      /* A submenu: the host is a box as wide as its item's row at the row's
+         top (vf-menu-item's .submenu), and the panel hangs from it the way
+         System 7.5's did (traced from a 3× Infinite Mac capture): its top
+         frame the row above the item's, so its first row is level with the
+         item, and its left frame 5px left of the parent's right frame, which
+         is the row's right edge. It covers the parent's last 4px, its frame
+         and its shadow. Flipped (.left), the same in mirror: its right frame
+         5px right of the parent's left frame, a px left of the row. --_lift
+         is the whole system px #place() raises it by to fit the screen. */
+      :host([slot='submenu']) {
+        display: block;
+      }
+      :host([slot='submenu']) .panel {
+        min-width: 0;
+        top: calc(
+          var(--vf-scale, 1) * (-1px - var(--_lift, 0) * 1px) + var(--vf-snap-dy, 0px)
+        );
+        left: calc(100% - var(--vf-scale, 1) * 5px + var(--vf-snap-dx, 0px));
+      }
+      :host([slot='submenu']) .panel.left {
+        left: auto;
+        right: calc(100% - var(--vf-scale, 1) * 5px - var(--vf-snap-dx, 0px));
+      }
       /* A divider is an ITEM: the MDEF gave "-" a full row, so a separator
          spends one whole --vf-menu-row-height, not a thin rule with token
          margins — Menus.png's File pulldown runs a 32px ink pitch across
@@ -270,41 +286,76 @@ var T = /* @__PURE__ */ new Set([
 	get #r() {
 		return this.closest("vf-menu-bar") !== null;
 	}
-	#i;
+	get #i() {
+		return this.slot === "submenu" && this.parentElement?.localName === "vf-menu-item";
+	}
+	get panelRect() {
+		return this.open ? this._panelEl?.getBoundingClientRect() ?? null : null;
+	}
 	#a;
 	#o;
 	#s;
-	#c;
-	#l;
-	#u() {
-		this.#c?.cancel(), this.#c = void 0, this._flashOn = !1;
+	get expandedItem() {
+		return this.#a;
 	}
+	expand(e, t = {}) {
+		if (!(e && (!this.open || e.disabled || !e.submenu || !this.allItems.includes(e)))) {
+			if (e !== this.#a) {
+				let t = this.#a;
+				if (this.#a = e, t) {
+					let e = t.submenu, n = this.getRootNode();
+					e && n.activeElement && e.contains(n.activeElement) && t.focus(), t.expanded = !1, e && (e.open = !1);
+				}
+				e && (e.expanded = !0, e.submenu.open = !0), this.#c();
+			}
+			e && t.focus && e.submenu.#O();
+		}
+	}
+	pointerOver(e) {
+		e !== this.#o && (this.#o = e, this.#c());
+	}
+	#c() {
+		let e = this.#o === void 0 ? this.#a : this.#o;
+		for (let t of this.allItems) t.active = t === e && !t.disabled;
+	}
+	#l() {
+		let e = this.parentElement, t = this._panelEl;
+		if (!e || !t) return;
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), a = O(this), o = i(1, this), s = n.right - 5 * o + r.width + o <= a.right + .5, c = n.left + 5 * o - r.width >= a.left - .5, l = e.closest("vf-menu"), u = l ? l.#s : "right";
+		u === "right" && !s && c ? u = "left" : u === "left" && !c && s && (u = "right");
+		let d = n.top - o, f = d + r.height + o - a.bottom, p = Math.floor((d - a.top) / o + .01), m = Math.max(0, Math.min(Math.ceil(f / o - .01), p));
+		this.#s = u, t.classList.toggle("left", u === "left"), m > 0 ? t.style.setProperty("--_lift", String(m)) : t.style.removeProperty("--_lift");
+	}
+	#u;
 	#d;
 	#f;
-	#p(e) {
-		let t = this.items;
-		if (t.length === 0) return;
-		let n = t.indexOf(document.activeElement), r;
-		r = n < 0 ? e === 1 ? 0 : t.length - 1 : (n + e + t.length) % t.length, t[r]?.focus();
-	}
+	#p;
 	#m;
+	#h;
+	#g() {
+		this.#m?.cancel(), this.#m = void 0, this._flashOn = !1;
+	}
+	#_;
+	#v;
+	#y;
 	connectedCallback() {
-		super.connectedCallback(), this.#h(), this.requestUpdate(), this.addEventListener("vf-menu-close-request", this.#s), this.addEventListener("vf-menu-flash-request", this.#l), this.addEventListener("pointerdown", this.#_), this.addEventListener("focusout", this.#g);
+		super.connectedCallback(), this.#b(), this.requestUpdate(), this.addEventListener("vf-menu-close-request", this.#p), this.addEventListener("vf-menu-flash-request", this.#h), this.addEventListener("pointerdown", this.#S), this.addEventListener("focusout", this.#x);
 	}
-	#h() {
-		this.#i.role = this.#r ? "none" : null;
+	#b() {
+		this.#u.role = this.#r || this.#i ? "none" : null;
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("vf-menu-close-request", this.#s), this.removeEventListener("vf-menu-flash-request", this.#l), this.removeEventListener("pointerdown", this.#_), this.removeEventListener("focusout", this.#g), this.#u();
+		super.disconnectedCallback(), this.removeEventListener("vf-menu-close-request", this.#p), this.removeEventListener("vf-menu-flash-request", this.#h), this.removeEventListener("pointerdown", this.#S), this.removeEventListener("focusout", this.#x), this.#g();
 	}
-	#g;
+	#x;
 	updated(e) {
 		if (e.has("open")) {
-			if (this.open && this.#u(), this.open && !this.#r ? this.#m.attach() : this.#m.detach(), !this.open) for (let e of this.allItems) e.active = !1;
-			this.open || this.#a.reset();
+			this.open && this.#g();
+			let e = !this.#r && !this.#i;
+			this.open && e ? this.#y.attach() : this.#y.detach(), e && this.#n.track(this.open), this.open ? this.#i && this.#l() : (this.expand(null), this.#o = void 0, this.#c(), this.#d.reset());
 		}
 	}
-	#_;
+	#S;
 	focus(e) {
 		this._labelEl?.focus(e);
 	}
@@ -312,7 +363,16 @@ var T = /* @__PURE__ */ new Set([
 		this.focus();
 	}
 	render() {
-		return y`
+		return this.#i ? x`
+        <div
+          class="panel vf-panel"
+          part="panel"
+          role="menu"
+          aria-label=${this.label || this.parentElement?.labelText || S}
+        >
+          <slot></slot>
+        </div>
+      ` : x`
       <div
         class="label vf-snap ${this.#e.marked ? "vf-focus-rule" : ""} ${this._flashOn ? "flash-on" : ""} ${this._artTitle ? "art" : ""}"
         part="label"
@@ -320,11 +380,11 @@ var T = /* @__PURE__ */ new Set([
         tabindex=${this.barTabIndex}
         aria-haspopup="menu"
         aria-expanded=${this.open ? "true" : "false"}
-        aria-label=${this.label || b}
-        @pointerdown=${this.#y}
-        @click=${this.#b}
-        @pointerenter=${this.#x}
-        @keydown=${this.#S}
+        aria-label=${this.label || S}
+        @pointerdown=${this.#w}
+        @click=${this.#T}
+        @pointerenter=${this.#E}
+        @keydown=${this.#D}
       >
         <span class="title"
           ><slot name="label" @slotchange=${this.#t}>${this.label}</slot></span
@@ -334,13 +394,13 @@ var T = /* @__PURE__ */ new Set([
         class="panel vf-panel"
         part="panel"
         role="menu"
-        aria-label=${this.label || b}
+        aria-label=${this.label || S}
       >
         <slot></slot>
       </div>
     `;
 	}
-	#v() {
+	#C() {
 		if (!this.#r) {
 			this.open = !this.open;
 			return;
@@ -350,44 +410,44 @@ var T = /* @__PURE__ */ new Set([
 			composed: !1
 		}) && (this.open = !this.open);
 	}
-	#y() {
-		this.#o = !0, f(() => {
-			this.#o = !1;
+	#w() {
+		this.#f = !0, p(() => {
+			this.#f = !1;
 		});
 	}
-	#b(t) {
-		if (this.#o) {
-			this.#o = !1;
+	#T(t) {
+		if (this.#f) {
+			this.#f = !1;
 			return;
 		}
-		e(this, t, () => this.#v());
+		e(this, t, () => this.#C());
 	}
-	#x() {
+	#E() {
 		t(this, "vf-menu-hover", { menu: this }, { composed: !1 });
 	}
-	#S(e) {
+	#D(e) {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
 			let t = this.open;
-			this.#v(), !t && this.open && this.#C();
-		} else e.key === "ArrowDown" && !this.open && (e.preventDefault(), this.#v(), this.open && this.#C());
+			this.#C(), !t && this.open && this.#O();
+		} else e.key === "ArrowDown" && !this.open && (e.preventDefault(), this.#C(), this.open && this.#O());
 	}
-	async #C() {
+	async #O() {
 		await this.updateComplete, this.items[0]?.focus();
 	}
 };
-i([x()], E.prototype, "label", void 0), i([x({
+a([C()], k.prototype, "label", void 0), a([C({
 	type: Boolean,
 	reflect: !0
-})], E.prototype, "open", void 0), i([x({
+})], k.prototype, "open", void 0), a([C({
 	type: Boolean,
 	reflect: !0
-})], E.prototype, "shortcuts", void 0), i([x({
+})], k.prototype, "shortcuts", void 0), a([C({
 	type: Number,
 	attribute: !1
-})], E.prototype, "barTabIndex", void 0), i([S(".label")], E.prototype, "_labelEl", void 0), i([w()], E.prototype, "_artTitle", void 0), i([C({
+})], k.prototype, "barTabIndex", void 0), a([w(".label")], k.prototype, "_labelEl", void 0), a([E()], k.prototype, "_artTitle", void 0), a([T({
 	selector: "vf-menu-item",
 	flatten: !0
-})], E.prototype, "_assignedItems", void 0), i([w()], E.prototype, "_flashOn", void 0), E = i([n("vf-menu")], E);
+})], k.prototype, "_assignedItems", void 0), a([w(".panel")], k.prototype, "_panelEl", void 0), a([E()], k.prototype, "_flashOn", void 0), k = a([n("vf-menu")], k);
 //#endregion
-export { E as VfMenu };
+export { k as VfMenu };

package/dist/glyphs.d.ts

@@ -62,6 +62,12 @@ export declare const CARET_UP: Glyph;
 export declare const CARET_DOWN_SMALL: Glyph;
 /** {@link CARET_DOWN_SMALL} mirrored vertically: the small panel's top scroll arrow. */
 export declare const CARET_UP_SMALL: Glyph;
+/**
+ * The ▶ at the end of a menu item that opens a submenu: {@link CARET_DOWN}
+ * turned on its side, 6×11. Traced from the submenu rows of `Menus.png`, and
+ * the same shape in a capture of a System 7.5 Apple menu (Infinite Mac, 3×).
+ */
+export declare const CARET_RIGHT: Glyph;
 /**
  * The "little arrows" stepper at rest — a rounded 1-bit frame enclosing hollow
  * up/down arrows (`Little arrows.png`), used by `vf-number-field`.

package/dist/glyphs.js

@@ -41,59 +41,63 @@ var t = {
 	h: 5,
 	d: "M4 0h1v1h-1zM3 1h3v1h-3zM2 2h5v1h-5zM1 3h7v1h-7zM0 4h9v1h-9z"
 }, d = {
+	w: 6,
+	h: 11,
+	d: "M0 0h1v1h-1zM0 1h2v1h-2zM0 2h3v1h-3zM0 3h4v1h-4zM0 4h5v1h-5zM0 5h6v1h-6zM0 6h5v1h-5zM0 7h4v1h-4zM0 8h3v1h-3zM0 9h2v1h-2zM0 10h1v1h-1z"
+}, f = {
 	w: 15,
 	h: 25,
 	d: "M2 0h11v1h-11zM1 1h1v1h-1zM13 1h1v1h-1zM0 2h1v1h-1zM14 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM14 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM8 4h1v1h-1zM14 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM9 5h1v1h-1zM14 5h1v1h-1zM0 6h1v1h-1zM4 6h1v1h-1zM10 6h1v1h-1zM14 6h1v1h-1zM0 7h1v1h-1zM3 7h3v1h-3zM9 7h3v1h-3zM14 7h1v1h-1zM0 8h1v1h-1zM5 8h1v1h-1zM9 8h1v1h-1zM14 8h1v1h-1zM0 9h1v1h-1zM5 9h1v1h-1zM9 9h1v1h-1zM14 9h1v1h-1zM0 10h1v1h-1zM5 10h5v1h-5zM14 10h1v1h-1zM0 11h1v1h-1zM14 11h1v1h-1zM0 12h1v1h-1zM14 12h1v1h-1zM0 13h1v1h-1zM14 13h1v1h-1zM0 14h1v1h-1zM5 14h5v1h-5zM14 14h1v1h-1zM0 15h1v1h-1zM5 15h1v1h-1zM9 15h1v1h-1zM14 15h1v1h-1zM0 16h1v1h-1zM5 16h1v1h-1zM9 16h1v1h-1zM14 16h1v1h-1zM0 17h1v1h-1zM3 17h3v1h-3zM9 17h3v1h-3zM14 17h1v1h-1zM0 18h1v1h-1zM4 18h1v1h-1zM10 18h1v1h-1zM14 18h1v1h-1zM0 19h1v1h-1zM5 19h1v1h-1zM9 19h1v1h-1zM14 19h1v1h-1zM0 20h1v1h-1zM6 20h1v1h-1zM8 20h1v1h-1zM14 20h1v1h-1zM0 21h1v1h-1zM7 21h1v1h-1zM14 21h1v1h-1zM0 22h1v1h-1zM14 22h1v1h-1zM1 23h1v1h-1zM13 23h1v1h-1zM2 24h11v1h-11z"
-}, f = {
+}, p = {
 	w: 11,
 	h: 12,
 	d: "M1 0h9v1h-9zM0 1h1v1h-1zM10 1h1v1h-1zM0 2h1v1h-1zM10 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM2 9h1v1h-1zM8 9h1v1h-1zM3 10h1v1h-1zM7 10h1v1h-1zM4 11h3v1h-3z"
-}, p = {
+}, m = {
 	w: 11,
 	h: 12,
 	d: "M1 0h9v1h-9zM0 1h11v1h-11zM0 2h11v1h-11zM0 3h11v1h-11zM0 4h11v1h-11zM0 5h11v1h-11zM0 6h11v1h-11zM0 7h11v1h-11zM1 8h9v1h-9zM2 9h7v1h-7zM3 10h5v1h-5zM4 11h3v1h-3z"
-}, m = {
+}, h = {
 	w: 15,
 	h: 25,
 	d: "M7 3h1v1h-1zM6 4h3v1h-3zM5 5h5v1h-5zM4 6h7v1h-7zM3 7h9v1h-9zM5 8h5v1h-5zM5 9h5v1h-5zM5 10h5v1h-5z"
-}, h = {
+}, g = {
 	w: 15,
 	h: 25,
 	d: "M5 14h5v1h-5zM5 15h5v1h-5zM5 16h5v1h-5zM3 17h9v1h-9zM4 18h7v1h-7zM5 19h5v1h-5zM6 20h3v1h-3zM7 21h1v1h-1z"
-}, g = {
+}, _ = {
 	w: 16,
 	h: 16,
 	d: "M7 3h2v1h-2zM6 4h1v1h-1zM9 4h1v1h-1zM5 5h1v1h-1zM10 5h1v1h-1zM4 6h1v1h-1zM11 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM2 8h4v1h-4zM10 8h4v1h-4zM5 9h1v1h-1zM10 9h1v1h-1zM5 10h1v1h-1zM10 10h1v1h-1zM5 11h1v1h-1zM10 11h1v1h-1zM5 12h6v1h-6z"
-}, _ = {
+}, v = {
 	w: 16,
 	h: 16,
 	d: "M7 3h2v1h-2zM6 4h4v1h-4zM5 5h6v1h-6zM4 6h8v1h-8zM3 7h10v1h-10zM2 8h12v1h-12zM5 9h6v1h-6zM5 10h6v1h-6zM5 11h6v1h-6zM5 12h6v1h-6z"
-}, v = {
+}, y = {
 	w: 16,
 	h: 16,
 	d: "M5 3h6v1h-6zM5 4h1v1h-1zM10 4h1v1h-1zM5 5h1v1h-1zM10 5h1v1h-1zM5 6h1v1h-1zM10 6h1v1h-1zM2 7h4v1h-4zM10 7h4v1h-4zM3 8h1v1h-1zM12 8h1v1h-1zM4 9h1v1h-1zM11 9h1v1h-1zM5 10h1v1h-1zM10 10h1v1h-1zM6 11h1v1h-1zM9 11h1v1h-1zM7 12h2v1h-2z"
-}, y = {
+}, b = {
 	w: 16,
 	h: 16,
 	d: "M5 3h6v1h-6zM5 4h6v1h-6zM5 5h6v1h-6zM5 6h6v1h-6zM2 7h12v1h-12zM3 8h10v1h-10zM4 9h8v1h-8zM5 10h6v1h-6zM6 11h4v1h-4zM7 12h2v1h-2z"
-}, b = {
+}, x = {
 	w: 16,
 	h: 16,
 	d: "M8 2h1v1h-1zM7 3h2v1h-2zM6 4h1v1h-1zM8 4h1v1h-1zM5 5h1v1h-1zM8 5h5v1h-5zM4 6h1v1h-1zM12 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM3 8h1v1h-1zM12 8h1v1h-1zM4 9h1v1h-1zM12 9h1v1h-1zM5 10h1v1h-1zM8 10h5v1h-5zM6 11h1v1h-1zM8 11h1v1h-1zM7 12h2v1h-2zM8 13h1v1h-1z"
-}, x = {
+}, S = {
 	w: 16,
 	h: 16,
 	d: "M8 2h1v1h-1zM7 3h2v1h-2zM6 4h3v1h-3zM5 5h8v1h-8zM4 6h9v1h-9zM3 7h10v1h-10zM3 8h10v1h-10zM4 9h9v1h-9zM5 10h8v1h-8zM6 11h3v1h-3zM7 12h2v1h-2zM8 13h1v1h-1z"
-}, S = {
+}, C = {
 	w: 16,
 	h: 16,
 	d: "M7 2h1v1h-1zM7 3h2v1h-2zM7 4h1v1h-1zM9 4h1v1h-1zM3 5h5v1h-5zM10 5h1v1h-1zM3 6h1v1h-1zM11 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM3 8h1v1h-1zM12 8h1v1h-1zM3 9h1v1h-1zM11 9h1v1h-1zM3 10h5v1h-5zM10 10h1v1h-1zM7 11h1v1h-1zM9 11h1v1h-1zM7 12h2v1h-2zM7 13h1v1h-1z"
-}, C = {
+}, w = {
 	w: 16,
 	h: 16,
 	d: "M7 2h1v1h-1zM7 3h2v1h-2zM7 4h3v1h-3zM3 5h8v1h-8zM3 6h9v1h-9zM3 7h10v1h-10zM3 8h10v1h-10zM3 9h9v1h-9zM3 10h8v1h-8zM7 11h3v1h-3zM7 12h2v1h-2zM7 13h1v1h-1z"
 };
-function w(t, n) {
+function T(t, n) {
 	return e`<svg
     class=${n}
     viewBox="0 0 ${t.w} ${t.h}"
@@ -105,4 +109,4 @@ function w(t, n) {
   </svg>`;
 }
 //#endregion
-export { s as CARET_DOWN, l as CARET_DOWN_SMALL, c as CARET_UP, u as CARET_UP_SMALL, t as CHECKBOX_X, o as CHECKMARK, a as RADIO_DOT, n as RADIO_FACE, r as RADIO_RING, i as RADIO_RING_PRESSED, v as SCROLL_ARROW_DOWN, y as SCROLL_ARROW_DOWN_FILL, b as SCROLL_ARROW_LEFT, x as SCROLL_ARROW_LEFT_FILL, S as SCROLL_ARROW_RIGHT, C as SCROLL_ARROW_RIGHT_FILL, g as SCROLL_ARROW_UP, _ as SCROLL_ARROW_UP_FILL, f as SLIDER_THUMB, p as SLIDER_THUMB_FACE, d as STEPPER, h as STEPPER_DOWN_FILL, m as STEPPER_UP_FILL, w as glyphSvg };
+export { s as CARET_DOWN, l as CARET_DOWN_SMALL, d as CARET_RIGHT, c as CARET_UP, u as CARET_UP_SMALL, t as CHECKBOX_X, o as CHECKMARK, a as RADIO_DOT, n as RADIO_FACE, r as RADIO_RING, i as RADIO_RING_PRESSED, y as SCROLL_ARROW_DOWN, b as SCROLL_ARROW_DOWN_FILL, x as SCROLL_ARROW_LEFT, S as SCROLL_ARROW_LEFT_FILL, C as SCROLL_ARROW_RIGHT, w as SCROLL_ARROW_RIGHT_FILL, _ as SCROLL_ARROW_UP, v as SCROLL_ARROW_UP_FILL, p as SLIDER_THUMB, m as SLIDER_THUMB_FACE, f as STEPPER, g as STEPPER_DOWN_FILL, h as STEPPER_UP_FILL, T as glyphSvg };

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/menu-navigation.d.ts

@@ -0,0 +1,34 @@
+import type { VfMenu } from './components/vf-menu.js';
+import type { TypeAheadBuffer } from './type-ahead.js';
+/**
+ * The keyboard of an open menu and its submenus, shared by the two hosts that
+ * own one: `vf-menu-bar` for its open menu, and a `vf-menu` standing alone.
+ * Each listens on the document while a menu is open and hands the keydown to
+ * {@link navigateMenus}, which acts on the deepest open menu holding focus,
+ * after the APG menubar and menu patterns:
+ *
+ * - ↓/↑ walk that menu's enabled items, wrapping; Home/End jump to its first
+ *   and last; printable keys run the shared first-letter type-ahead
+ *   (src/type-ahead.ts), Space and modified keys aside.
+ * - → on an item that opens a submenu opens it and moves focus to its first
+ *   enabled item, as Enter and Space do from the item itself. On any other
+ *   item in a bar, → opens the next menu.
+ * - ← in a submenu closes it and puts focus back on its item; at the top of a
+ *   bar, ← opens the previous menu.
+ * - Escape closes one level: a submenu back to its item, the top menu back to
+ *   its title. Tab closes every menu and lets focus move on.
+ */
+export interface MenuKeyboard {
+    /** The open top-level menu. */
+    readonly menu: VfMenu;
+    /** The host's own first-letter type-ahead buffer. */
+    readonly typeAhead: TypeAheadBuffer;
+    /** Close every menu, putting focus back on the title when `refocus`. */
+    close(refocus: boolean): void;
+    /** In a bar: open the next (1) or previous (-1) menu. */
+    switchMenu?(direction: 1 | -1): void;
+}
+/** The open menus from `menu` down: each the submenu of an item in the one before. */
+export declare function openPath(menu: VfMenu): VfMenu[];
+/** Handles one keydown for an open menu and the submenus open under it. */
+export declare function navigateMenus(event: KeyboardEvent, keys: MenuKeyboard): void;

package/dist/menu-navigation.js

@@ -0,0 +1,53 @@
+//#region src/menu-navigation.ts
+function e(e) {
+	let t = [e];
+	for (let n = e.expandedItem?.submenu; n?.open; n = n.expandedItem?.submenu) t.push(n);
+	return t;
+}
+function t(t, n) {
+	if (t.defaultPrevented) return;
+	let r = e(n.menu), i = n.menu.getRootNode().activeElement, a = 0;
+	for (let e = r.length - 1; e > 0; e--) if (r[e].allItems.includes(i)) {
+		a = e;
+		break;
+	}
+	let o = r[a], s = o.items, c = s.indexOf(i), l = (e) => {
+		let t = e.parentElement;
+		n.typeAhead.reset(), t.focus(), t.closest("vf-menu")?.expand(null);
+	};
+	switch (t.key) {
+		case "Escape":
+			t.preventDefault(), a > 0 ? l(o) : n.close(!0);
+			break;
+		case "Tab":
+			n.close(!1);
+			break;
+		case "ArrowDown":
+		case "ArrowUp": {
+			if (t.preventDefault(), s.length === 0) break;
+			let e = t.key === "ArrowDown" ? 1 : -1;
+			s[c < 0 ? e === 1 ? 0 : s.length - 1 : (c + e + s.length) % s.length]?.focus();
+			break;
+		}
+		case "Home":
+		case "End":
+			t.preventDefault(), s[t.key === "Home" ? 0 : s.length - 1]?.focus();
+			break;
+		case "ArrowRight": {
+			let e = s[c];
+			e?.submenu ? (t.preventDefault(), n.typeAhead.reset(), o.expand(e, { focus: !0 })) : n.switchMenu && (t.preventDefault(), n.switchMenu(1));
+			break;
+		}
+		case "ArrowLeft":
+			a > 0 ? (t.preventDefault(), l(o)) : n.switchMenu && (t.preventDefault(), n.switchMenu(-1));
+			break;
+		default:
+			if (t.key.length !== 1 || t.key === " " || t.metaKey || t.ctrlKey || t.altKey) break;
+			t.preventDefault(), s[n.typeAhead.feed(t.key, c, s.map((e) => ({
+				text: e.labelText,
+				disabled: !1
+			})))]?.focus();
+	}
+}
+//#endregion
+export { t as navigateMenus, e as openPath };