vintage-frames 0.2.1 → 0.4.0

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

@@ -1,16 +1,16 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t } from "../scale.js";
-import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as r } from "../position.js";
-import { vfBase as i } from "../styles/recipes/host.js";
-import { vfFocusRing as a } from "../styles/recipes/focus.js";
-import { emit as o } from "../events.js";
+import { emit as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import { ScaleController as n } from "../scale.js";
+import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as i } from "../position.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { vfFocusRing as o } from "../styles/recipes/focus.js";
 import { LitElement as s, css as c, html as l } from "lit";
 import { property as u } from "lit/decorators.js";
 //#region src/components/vf-list-item.ts
-var d = class extends r(s) {
+var d = class extends i(s) {
 	static {
-		this.styles = [i, c`
+		this.styles = [a, c`
       :host {
         display: flex;
         align-items: center;
@@ -48,7 +48,7 @@ var d = class extends r(s) {
          across selected rows while Space still acts on it. */
       :host(:focus) {
         --vf-focus-offset: -1px;
-        ${a}
+        ${o}
       }
       :host([selected]) {
         background: var(--vf-highlight, #000);
@@ -75,25 +75,25 @@ var d = class extends r(s) {
 	}
 	#e;
 	constructor() {
-		super(), this.scale = new t(this), this.value = "", this.selected = !1, this.disabled = !1, this.listDisabled = !1, this.#e = this.attachInternals(), this.#e.role = "option";
+		super(), this.scale = new n(this), this.value = "", this.selected = !1, this.disabled = !1, this.listDisabled = !1, this.#e = this.attachInternals(), this.#e.role = "option";
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.hasAttribute("tabindex") || (this.tabIndex = -1);
 	}
-	updated(e) {
-		e.has("selected") && (this.#e.ariaSelected = this.selected ? "true" : "false"), (e.has("disabled") || e.has("listDisabled")) && (this.#e.ariaDisabled = this.disabled || this.listDisabled ? "true" : null), e.has("disabled") && e.get("disabled") !== void 0 && o(this, "vf-list-item-disabled-change", { item: this }, { composed: !1 });
+	updated(t) {
+		t.has("selected") && (this.#e.ariaSelected = this.selected ? "true" : "false"), (t.has("disabled") || t.has("listDisabled")) && (this.#e.ariaDisabled = this.disabled || this.listDisabled ? "true" : null), t.has("disabled") && t.get("disabled") !== void 0 && e(this, "vf-list-item-disabled-change", { item: this }, { composed: !1 });
 	}
 	render() {
 		return l`<slot name="icon"></slot
       ><span class="text" part="text"><slot></slot></span>`;
 	}
 };
-n([u()], d.prototype, "value", void 0), n([u({
+r([u()], d.prototype, "value", void 0), r([u({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "selected", void 0), n([u({
+})], d.prototype, "selected", void 0), r([u({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "disabled", void 0), n([u({ attribute: !1 })], d.prototype, "listDisabled", void 0), d = n([e("vf-list-item")], d);
+})], d.prototype, "disabled", void 0), r([u({ attribute: !1 })], d.prototype, "listDisabled", void 0), d = r([t("vf-list-item")], d);
 //#endregion
 export { d as VfListItem };

package/dist/components/vf-list.js

@@ -1,23 +1,23 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t } from "../scale.js";
-import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as r } from "../position.js";
-import { vfBase as i } from "../styles/recipes/host.js";
-import { vfFocusRing as a } from "../styles/recipes/focus.js";
-import { vfScrollRail as o } from "../styles/recipes/scroll-rail.js";
-import { GridSnapController as s } from "../grid-snap.js";
-import { emit as c } from "../events.js";
+import { emit as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import { ScaleController as n } from "../scale.js";
+import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as i } from "../position.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { vfFocusRing as o } from "../styles/recipes/focus.js";
+import { vfScrollRail as s } from "../styles/recipes/scroll-rail.js";
+import { GridSnapController as c } from "../grid-snap.js";
 import { ScrollStateController as l } from "../scroll-state.js";
 import { ScrollRailController as u, renderScrollRail as d } from "../scroll-rail.js";
 import { TypeAheadBuffer as f } from "../type-ahead.js";
 import { LitElement as p, css as m, html as h, nothing as g } from "lit";
 import { property as _, query as v, queryAssignedElements as y, state as b } from "lit/decorators.js";
 //#region src/components/vf-list.ts
-var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = class extends r(p) {
+var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = class extends i(p) {
 	static {
 		this.styles = [
-			i,
-			o,
+			a,
+			s,
 			m`
       :host {
         display: block;
@@ -66,7 +66,7 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
          render()); the ring keeps that stop visible, inset to stay in-box. */
       .list:focus-visible {
         --vf-focus-offset: -2px;
-        ${a}
+        ${o}
       }
     `
 		];
@@ -77,7 +77,7 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
 	#r;
 	#i;
 	constructor() {
-		super(), this.scale = new t(this), this.gridSnap = new s(this), this.scrollState = new l(this, () => this.viewport, () => this.content, (e) => {
+		super(), this.scale = new n(this), this.gridSnap = new c(this), this.scrollState = new l(this, () => this.viewport, () => this.content, (e) => {
 			this._scrollable = e.x || e.y;
 		}), this.rail = new u(this, {
 			getScroll: () => this.viewport,
@@ -192,15 +192,15 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
 			this.#s(e, !1);
 		}
 	}
-	#s(e, t) {
-		let n = this._items, r = this.multiple ? e : e.slice(0, 1), i = n.filter((e) => e.selected).map((e) => e.value);
-		for (let e of n) e.selected = r.includes(e.value) && !e.disabled;
-		let a = n.filter((e) => e.selected).map((e) => e.value);
-		this.#r = [...a];
-		let o = a[0] ?? "";
-		this.value !== o && (this.value = o), x(this.values, a) || (this.values = a), this.#c(), t && !x(i, a) && c(this, "vf-change", {
+	#s(t, n) {
+		let r = this._items, i = this.multiple ? t : t.slice(0, 1), a = r.filter((e) => e.selected).map((e) => e.value);
+		for (let e of r) e.selected = i.includes(e.value) && !e.disabled;
+		let o = r.filter((e) => e.selected).map((e) => e.value);
+		this.#r = [...o];
+		let s = o[0] ?? "";
+		this.value !== s && (this.value = s), x(this.values, o) || (this.values = o), this.#c(), n && !x(a, o) && e(this, "vf-change", {
 			value: this.value,
-			values: [...a]
+			values: [...o]
 		});
 	}
 	#c() {
@@ -242,15 +242,15 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
 		!t || t.disabled || (t.focus(), t.scrollIntoView({ block: "nearest" }));
 	}
 };
-n([v(".list")], S.prototype, "viewport", void 0), n([v(".list-content")], S.prototype, "content", void 0), n([b()], S.prototype, "_scrollable", void 0), n([_({
+r([v(".list")], S.prototype, "viewport", void 0), r([v(".list-content")], S.prototype, "content", void 0), r([b()], S.prototype, "_scrollable", void 0), r([_({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "multiple", void 0), n([_()], S.prototype, "value", void 0), n([_({ attribute: !1 })], S.prototype, "values", void 0), n([_({
+})], S.prototype, "multiple", void 0), r([_()], S.prototype, "value", void 0), r([_({ attribute: !1 })], S.prototype, "values", void 0), r([_({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "disabled", void 0), n([_()], S.prototype, "label", void 0), n([y({
+})], S.prototype, "disabled", void 0), r([_()], S.prototype, "label", void 0), r([y({
 	selector: "vf-list-item",
 	flatten: !0
-})], S.prototype, "_items", void 0), S = n([e("vf-list")], S);
+})], S.prototype, "_items", void 0), S = r([t("vf-list")], S);
 //#endregion
 export { S as VfList };

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

@@ -43,6 +43,14 @@ export declare class VfMenuBar extends VfMenuBar_base {
      * mask was.
      */
     rounded: boolean;
+    /**
+     * Makes every slotted menu's item `shortcut`s live key equivalents — one
+     * declaration for the whole bar, the way MenuKey() answered for every menu
+     * at once. See `vf-menu.shortcuts` (the per-menu grant) and
+     * `vf-menu-item.shortcut` for the claim contract. Off by default: key
+     * equivalents are page-global, and only *the* menu bar should own them.
+     */
+    shortcuts: boolean;
     private _menus;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -13,7 +13,7 @@ import { property as h, queryAssignedElements as g } from "lit/decorators.js";
 //#region src/components/vf-menu-bar.ts
 var _ = class extends r(d) {
 	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new a(this), this.label = "", this.rounded = !1, this.#e = null, this.#t = this.attachInternals(), this.#n = new l(), this.#r = null, this.#i = new o(this, () => [[
+		super(...e), this.scale = new t(this), this.gridSnap = new a(this), this.label = "", this.rounded = !1, this.shortcuts = !1, this.#e = null, this.#t = this.attachInternals(), this.#n = new l(), this.#r = null, this.#i = new o(this, () => [[
 			document,
 			"pointerdown",
 			this.#h,
@@ -228,7 +228,10 @@ var _ = class extends r(d) {
 n([h()], _.prototype, "label", void 0), n([h({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "rounded", void 0), n([g({
+})], _.prototype, "rounded", void 0), n([h({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "shortcuts", void 0), n([g({
 	selector: "vf-menu",
 	flatten: !0
 })], _.prototype, "_menus", void 0), _ = n([e("vf-menu-bar")], _);

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

@@ -62,12 +62,18 @@ export declare class VfMenuItem extends VfMenuItem_base {
      */
     checkable: boolean;
     /**
-     * Keyboard shortcut text, e.g. `"⌘H"`, drawn left-aligned in the panel's
-     * shared shortcut column. Display only in the
-     * visual sense — the span is `aria-hidden` so the glyphs never concatenate
-     * into the item's accessible name ("Print… place of interest sign P") —
-     * while the host mirrors it as `aria-keyshortcuts` ("Meta+H"), so AT
-     * announces it *as* a shortcut. A consumer's own `aria-keyshortcuts` wins.
+     * Keyboard shortcut, e.g. `"⌘H"`, drawn left-aligned in the panel's
+     * shared shortcut column. The span is `aria-hidden` so the glyphs never
+     * concatenate into the item's accessible name ("Print… place of interest
+     * sign P") — the host mirrors it as `aria-keyshortcuts` ("Meta+H") instead,
+     * so AT announces it *as* a shortcut. A consumer's own `aria-keyshortcuts`
+     * wins.
+     *
+     * Inside a `vf-menu`/`vf-menu-bar` that declares `shortcuts`, this is a
+     * LIVE key equivalent, not a legend: a matching keydown anywhere on the
+     * page activates the item — menu open or not — claiming the stroke with
+     * `preventDefault()` (see the document keydown handler below for the full
+     * contract).
      */
     shortcut: string;
     /**

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

@@ -1,11 +1,11 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t } from "../scale.js";
-import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as r } from "../position.js";
-import { vfDisplay as i } from "../styles/recipes/display-face.js";
-import { vfBase as a } from "../styles/recipes/host.js";
-import { releaseAfterGesture as o } from "../document-listeners.js";
-import { deferActivation as s, emit as c } from "../events.js";
+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 { releaseAfterGesture as c } from "../document-listeners.js";
 import { runSelectionBlink as l } from "../motion.js";
 import { CHECKMARK as u, glyphSvg as d } from "../glyphs.js";
 import { LitElement as f, css as p, html as m, nothing as h } from "lit";
@@ -24,11 +24,24 @@ function b(e) {
 	let r = t.join("");
 	return r ? [...n, r].join("+") : "";
 }
-var x = class extends r(f) {
+function x(e, t) {
+	let n = [...t.trim()], r = {
+		Meta: !1,
+		Control: !1,
+		Alt: !1,
+		Shift: !1
+	};
+	for (; n.length > 0 && y.has(n[0]);) r[y.get(n.shift())] = !0;
+	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();
+}
+var S = class extends a(f) {
 	static {
 		this.styles = [
-			a,
-			i,
+			s,
+			o,
 			p`
       :host {
         display: block;
@@ -161,19 +174,21 @@ var x = class extends r(f) {
 	#r;
 	#i;
 	constructor() {
-		super(), this.scale = new t(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.addEventListener("keydown", this.#u), this.addEventListener("pointerdown", this.#c), this.addEventListener("click", this.#l);
+		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()));
+		}, this.addEventListener("keydown", this.#u), this.addEventListener("pointerdown", this.#c), this.addEventListener("click", this.#l);
 	}
 	get #a() {
 		return this.checkable || this.#n;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#s(), this.#o(), this.hasAttribute("tabindex") || (this.tabIndex = -1);
+		super.connectedCallback(), this.#s(), this.#o(), this.hasAttribute("tabindex") || (this.tabIndex = -1), document.addEventListener("keydown", this.#d);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#d();
+		super.disconnectedCallback(), document.removeEventListener("keydown", this.#d), this.#f();
 	}
 	updated(e) {
-		e.has("disabled") && (this.#r.ariaDisabled = this.disabled ? "true" : null, this.disabled && this.#d()), e.has("checked") && this.checked && (this.#n = !0), (e.has("checked") || e.has("checkable")) && this.#s(), e.has("shortcut") && this.#o();
+		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;
@@ -201,53 +216,56 @@ var x = class extends r(f) {
     `;
 	}
 	#c() {
-		this.#i = this.closest("vf-menu") !== null, this.#i && o(() => {
+		this.#i = this.closest("vf-menu") !== null, this.#i && c(() => {
 			this.#i = !1;
 		});
 	}
-	#l(e) {
+	#l(t) {
 		if (this.#i) {
 			this.#i = !1;
 			return;
 		}
-		s(this, e, () => this.activate());
+		e(this, t, () => this.activate());
 	}
 	#u(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), this.activate());
 	}
+	#d;
 	activate() {
 		if (this.disabled || this.#t) return;
 		this.#t = !0;
 		let e = l((e) => {
 			this._blinkPhase = e ? "on" : "off";
 		}, () => {
-			this._blinkPhase = null, this.#t = !1, this.#e = void 0, this.#f();
+			this._blinkPhase = null, this.#t = !1, this.#e = void 0, this.#p();
 		});
 		this.#t && (this.#e = e);
 	}
-	#d() {
+	#f() {
 		this.#t && (this.#e?.cancel(), this.#e = void 0, this.#t = !1, this._blinkPhase = null);
 	}
-	#f() {
+	#p() {
 		let e = this.value ?? (this.textContent ?? "").trim();
-		c(this, "vf-menu-select", {
+		t(this, "vf-menu-select", {
 			value: e,
 			item: this
-		}), c(this, "vf-menu-close-request", { item: this }, { composed: !1 });
+		});
+		let n = this.closest("vf-menu");
+		(!n || n.hasAttribute("open")) && t(this, "vf-menu-close-request", { item: this }, { composed: !1 });
 	}
 };
-n([g({
+i([g({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "disabled", void 0), n([g({
+})], S.prototype, "disabled", void 0), i([g({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "checked", void 0), n([g({
+})], S.prototype, "checked", void 0), i([g({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "active", void 0), n([g({
+})], S.prototype, "active", void 0), i([g({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "checkable", void 0), n([g()], x.prototype, "shortcut", void 0), n([g()], x.prototype, "value", void 0), n([_()], x.prototype, "_blinkPhase", void 0), x = n([e("vf-menu-item")], x);
+})], 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);
 //#endregion
-export { x as VfMenuItem };
+export { S as VfMenuItem };

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

@@ -29,7 +29,8 @@ declare const VfMenu_base: (new (...args: any[]) => import("../position.js").VfP
  *   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.
- * @csspart label - The menu title in the bar (inverts while open).
+ * @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.
  * @cssprop [--vf-menubar-height=20px] - `vf-menu-bar`
  * @cssprop [--vf-menu-row-height=16px] - `vf-menu-item` row pitch; the panel
@@ -53,6 +54,16 @@ export declare class VfMenu extends VfMenu_base {
      * `vf-menu-bar` when present, otherwise by the menu itself.
      */
     open: boolean;
+    /**
+     * Makes the items' `shortcut`s live key equivalents: a matching keydown
+     * anywhere on the page activates the item — menu open or not — and a
+     * closed menu answers by flashing its bar title, MenuKey's acknowledgment.
+     * Off by default because key equivalents are page-global and a page may
+     * hold several menus of which only one is *the* menu bar; on a bar, declare
+     * it there once for every menu in it. The full claim contract lives on
+     * `vf-menu-item.shortcut`.
+     */
+    shortcuts: boolean;
     /**
      * The bar label's tabindex. A parent `vf-menu-bar` owns a roving tabindex
      * across its menus and sets this to 0 on the active menu, -1 on the rest,
@@ -77,6 +88,8 @@ export declare class VfMenu extends VfMenu_base {
      * src/menu-press.ts), so it wants the box, not the element.
      */
     get labelRect(): DOMRect | null;
+    /** `true` while the key-equivalent flash paints the title inverted. */
+    private _flashOn;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: Map<PropertyKey, unknown>): void;