vintage-frames 0.1.0

package/dist/components/vf-list.js

@@ -0,0 +1,256 @@
+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 { 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) {
+	static {
+		this.styles = [
+			i,
+			o,
+			m`
+      :host {
+        display: block;
+      }
+      /* Disabled: the item text dims to gray; the black box border stays. */
+      :host([disabled]) {
+        color: var(--vf-disabled, #c0c0c0);
+      }
+      /* The snapped wrapper: a real 1px frame (the rail's outer line), the
+         [rows | rail] grid — the rail sizes itself to the 15px inside the
+         frame — and everything riding the grid-snap offset as one. */
+      .box {
+        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+        background: var(--vf-white, #fff);
+        display: grid;
+        grid-template-columns: 1fr auto;
+      }
+      .list {
+        grid-area: 1 / 1;
+        min-width: 0;
+        background: var(--vf-white, #fff);
+        /* The clamp is the content box's — the .box border adds the 2px frame
+           on top, keeping the clamped total where it always was. */
+        max-height: calc(var(--vf-scale, 1) * var(--vf-list-max-height, 200px));
+        /* Native scrolling; the bar itself is hidden by the recipe
+           (.vf-scroll) and the reservation is the rail element, not a native
+           gutter. The rows run to the rail on the right.
+
+           The mod() padding is border-floor compensation: engines floor a
+           fractional border-width to whole CSS px (1.5px renders 1px), which
+           would put the rows a fraction of a system px inside the frame at
+           scale 1.5 or 4/3 — and the rows are LIGHT-DOM components, so their
+           origins are the page's device-pixel-grid contract, not just ours.
+           Padding is stored exactly, so border + mod(border's fraction)
+           restores the exact 1-system-px inset the borderless-scroller
+           construction used to give them, at every scale (mod is 0 at whole
+           ones). */
+        padding: mod(calc(var(--vf-scale, 1) * 1px), 1px);
+        padding-right: 0;
+        overflow-y: auto;
+      }
+      .vf-rail--vertical {
+        grid-area: 1 / 2;
+      }
+      /* The viewport is itself the Tab stop while the list is disabled (see
+         render()); the ring keeps that stop visible, inset to stay in-box. */
+      .list:focus-visible {
+        --vf-focus-offset: -2px;
+        ${a}
+      }
+    `
+		];
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	constructor() {
+		super(), this.scale = new t(this), this.gridSnap = new s(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,
+			getContent: () => this.content
+		}), this._scrollable = !1, this.multiple = !1, this.value = "", this.values = [], this.disabled = !1, this.label = "", this.#e = -1, this.#t = -1, this.#n = new f(), this.#r = [], this.#i = this.attachInternals(), this.#l = (e) => {
+			if (this.disabled) return;
+			let t = e.target?.closest("vf-list-item") ?? null;
+			if (!t || t.disabled) return;
+			let n = this._items, r = n.indexOf(t);
+			if (r < 0) return;
+			let i;
+			if (this.multiple && e.shiftKey && this.#t >= 0 && this.#t < n.length) {
+				let e = Math.min(this.#t, r), t = Math.max(this.#t, r);
+				i = n.slice(e, t + 1).filter((e) => !e.disabled).map((e) => e.value);
+			} else if (this.multiple && (e.metaKey || e.ctrlKey)) {
+				let e = new Set(n.filter((e) => e.selected).map((e) => e.value));
+				e.has(t.value) ? e.delete(t.value) : e.add(t.value), i = [...e], this.#t = r;
+			} else i = [t.value], this.#t = r;
+			this.#e = r, this.#s(i, !0), t.focus();
+		}, this.#u = (e) => {
+			if (this.disabled) return;
+			let t = this._items, n = t.filter((e) => !e.disabled);
+			if (n.length === 0) return;
+			let r = this.#e;
+			if ((r < 0 || r >= t.length || t[r]?.disabled) && (r = t.findIndex((e) => e.selected && !e.disabled), r < 0 && (r = t.indexOf(n[0]))), this.multiple && (e.key === "a" || e.key === "A") && (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
+				e.preventDefault(), this.#s(n.map((e) => e.value), !0);
+				return;
+			}
+			switch (e.key) {
+				case "ArrowDown":
+				case "ArrowUp": {
+					e.preventDefault();
+					let n = e.key === "ArrowDown" ? 1 : -1;
+					if (this.multiple && e.shiftKey) this.#f(this.#p(r, n), r);
+					else if (this.multiple && (e.metaKey || e.ctrlKey)) this.#d(this.#p(r, n));
+					else {
+						let e = t.some((e) => e.selected) ? this.#p(r, n) : r;
+						this.#m(e);
+					}
+					break;
+				}
+				case "Home":
+				case "End": {
+					e.preventDefault();
+					let i = t.indexOf(e.key === "Home" ? n[0] : n[n.length - 1]);
+					this.multiple && e.shiftKey ? this.#f(i, r) : this.multiple ? this.#d(i) : this.#m(i);
+					break;
+				}
+				case " ": {
+					e.preventDefault();
+					let n = t[r];
+					if (!n) return;
+					if (this.multiple && e.shiftKey) this.#f(r, r);
+					else if (this.multiple) {
+						let e = new Set(t.filter((e) => e.selected).map((e) => e.value));
+						e.has(n.value) ? e.delete(n.value) : e.add(n.value), this.#e = r, this.#t = r, this.#s([...e], !0);
+					} else this.#m(r);
+					break;
+				}
+				default: {
+					if (e.key.length !== 1 || e.metaKey || e.ctrlKey || e.altKey) break;
+					e.preventDefault();
+					let n = this.#n.feed(e.key, r, t.map((e) => ({
+						text: e.textContent ?? "",
+						disabled: e.disabled
+					})));
+					if (n < 0) break;
+					this.multiple ? this.#d(n) : this.#m(n);
+					break;
+				}
+			}
+		}, this.#i.role = "listbox", this.addEventListener("click", this.#l), this.addEventListener("keydown", this.#u), this.addEventListener("vf-list-item-disabled-change", () => {
+			this.#c();
+		});
+	}
+	focus(e) {
+		if (this.disabled) {
+			this.viewport?.focus(e);
+			return;
+		}
+		this._items?.find((e) => e.tabIndex === 0)?.focus(e);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#n.reset();
+	}
+	updated(e) {
+		e.has("multiple") && (this.#i.ariaMultiSelectable = this.multiple ? "true" : null), e.has("disabled") && (this.#i.ariaDisabled = this.disabled ? "true" : null, this.#c()), e.has("label") && (this.#i.ariaLabel = this.label || null), e.has("values") ? (e.get("values") !== void 0 || this.values.length > 0) && this.#a(this.values) : e.has("value") && (e.get("value") !== void 0 || this.value !== "") && this.#a(this.value ? [this.value] : []);
+	}
+	#a(e) {
+		x(e, this.#r) || this.#s(e, !1);
+	}
+	render() {
+		return h`
+      <div class="box vf-snap">
+        <div
+          class="list vf-scroll"
+          part="list"
+          tabindex=${this.disabled && this._scrollable ? "0" : g}
+        >
+          <div class="list-content">
+            <slot @slotchange=${this.#o}></slot>
+          </div>
+        </div>
+        ${d(this.rail, "vertical")}
+      </div>
+    `;
+	}
+	#o() {
+		if (this.value || this.values.length > 0) this.#s(this.multiple ? this.values : this.value ? [this.value] : [], !1);
+		else {
+			let e = this._items.filter((e) => e.selected).map((e) => e.value);
+			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", {
+			value: this.value,
+			values: [...a]
+		});
+	}
+	#c() {
+		let e = this._items;
+		if (!e) return;
+		let t;
+		if (!this.disabled) {
+			let n = this.#e >= 0 ? e[this.#e] : void 0;
+			t = (n && !n.disabled ? n : void 0) ?? e.find((e) => e.selected && !e.disabled) ?? e.find((e) => !e.disabled), this.#e = t ? e.indexOf(t) : -1;
+		}
+		for (let n of e) n.listDisabled = this.disabled, n.tabIndex = n === t ? 0 : -1;
+	}
+	#l;
+	#u;
+	#d(e) {
+		e < 0 || (this.#e = e, this.#c(), this.#h(e));
+	}
+	#f(e, t) {
+		let n = this._items;
+		if (e < 0) return;
+		(this.#t < 0 || this.#t >= n.length) && (this.#t = t);
+		let r = Math.min(this.#t, e), i = Math.max(this.#t, e), a = n.slice(r, i + 1).filter((e) => !e.disabled).map((e) => e.value);
+		this.#e = e, this.#s(a, !0), this.#h(e);
+	}
+	#p(e, t) {
+		let n = this._items;
+		for (let r = e + t; r >= 0 && r < n.length; r += t) {
+			let e = n[r];
+			if (e && !e.disabled) return r;
+		}
+		return e;
+	}
+	#m(e) {
+		let t = this._items[e];
+		!t || t.disabled || (this.#e = e, this.#t = e, this.#s([t.value], !0), this.#h(e));
+	}
+	#h(e) {
+		let t = this._items[e];
+		!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([_({
+	type: Boolean,
+	reflect: !0
+})], S.prototype, "multiple", void 0), n([_()], S.prototype, "value", void 0), n([_({ attribute: !1 })], S.prototype, "values", void 0), n([_({
+	type: Boolean,
+	reflect: !0
+})], S.prototype, "disabled", void 0), n([_()], S.prototype, "label", void 0), n([y({
+	selector: "vf-list-item",
+	flatten: !0
+})], S.prototype, "_items", void 0), S = n([e("vf-list")], S);
+//#endregion
+export { S as VfList };

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

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+declare const VfMenuBar_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-menu-bar>` — the System 7 menu bar: white strip, 1px black bottom
+ * rule, slotted `<vf-menu>` children laid out from the left. `rounded` adds
+ * the classic screen-corner mask to the top corners.
+ *
+ * Coordinates its menus: pressing a label opens that menu (and inverts the
+ * label); while any menu is open, hovering another label switches to it;
+ * Escape, an outside click, or item selection closes. ArrowLeft/ArrowRight
+ * move between menus while one is open; ArrowDown/ArrowUp move focus through
+ * the open menu's items, Home/End jump to its first/last, and typed letters
+ * run the shared Finder first-letter type-ahead (src/type-ahead.ts).
+ *
+ * The bar also owns the **press-drag-release** gesture (see src/menu-press.ts)
+ * — press a title, slide onto a command, release over it — because one press
+ * may travel across several of its menus. `vf-select` drives its popup by the
+ * same mechanic.
+ *
+ * @slot - `vf-menu` elements.
+ * @csspart bar - The horizontal layout container.
+ * @cssprop [--vf-menubar-height=20px] - `vf-menu-bar`
+ */
+export declare class VfMenuBar extends VfMenuBar_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    private readonly scale;
+    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    private readonly gridSnap;
+    /**
+     * Accessible name for the bar, applied as `aria-label` on the host (which
+     * carries `role="menubar"`). Without it the menubar computes with an empty
+     * name. A consumer-supplied `aria-label`/`aria-labelledby` attribute is
+     * left alone.
+     */
+    label: string;
+    /**
+     * Rounds the bar's top corners the way System 7's were: not a curve of the
+     * bar itself but the black stair-step mask the compact Mac's ROM painted
+     * over the CRT's rounded corners, which the menu bar wore by sitting flush
+     * with the screen top. Drawn as the traced 5-px staircase in `--vf-black`
+     * ink over the bar's own corners — over any backdrop, as the hardware
+     * mask was.
+     */
+    rounded: boolean;
+    private _menus;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Moves keyboard focus to the bar's single Tab stop — the open menu's label,
+     * else the roving one's, else the first. Overridden because the platform's
+     * `focus()` was a silent no-op on this host (no `delegatesFocus`, no
+     * tabindex), so `vf-label for` and consumer scripts couldn't reach the bar.
+     */
+    focus(options?: FocusOptions): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-menu-bar': VfMenuBar;
+    }
+}
+export {};

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

@@ -0,0 +1,236 @@
+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 { GridSnapController as a } from "../grid-snap.js";
+import { DocumentListenersController as o } from "../document-listeners.js";
+import { SCREEN_CORNER as s, steppedCornerClip as c } from "../pixel-frame.js";
+import { TypeAheadBuffer as l } from "../type-ahead.js";
+import { MenuPressController as u } from "../menu-press.js";
+import { LitElement as d, css as f, html as p, unsafeCSS as m } from "lit";
+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, () => [[
+			document,
+			"pointerdown",
+			this.#h,
+			!0
+		], [
+			document,
+			"keydown",
+			this.#g,
+			!0
+		]]), this.#a = new u(this, {
+			menus: () => this._menus,
+			open: (e) => this.#p(e),
+			close: () => this.#m()
+		}), 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);
+		}, 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();
+		}, this.#g = (e) => {
+			if (!(e.defaultPrevented || !this.#e)) switch (e.key) {
+				case "Escape":
+					e.preventDefault(), this.#e.focus(), this.#m();
+					break;
+				case "Tab":
+					this.#m();
+					break;
+				case "ArrowLeft":
+				case "ArrowRight":
+					e.preventDefault(), this.#v(e.key === "ArrowRight" ? 1 : -1);
+					break;
+				case "ArrowDown":
+				case "ArrowUp":
+					e.preventDefault(), this.#y(e.key === "ArrowDown" ? 1 : -1);
+					break;
+				case "Home":
+				case "End": {
+					e.preventDefault();
+					let t = this.#e.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.#e.items, n = t.indexOf(document.activeElement);
+					t[this.#n.feed(e.key, n, t.map((e) => ({
+						text: e.textContent ?? "",
+						disabled: !1
+					})))]?.focus();
+					break;
+				}
+			}
+		}, this.#_ = (e) => {
+			if (this.#e) return;
+			let t = this._menus;
+			if (t.length === 0) return;
+			let n = e.target;
+			if (!(n instanceof HTMLElement)) return;
+			let r = t.find((e) => e.contains(n));
+			if (!r) return;
+			let i;
+			switch (e.key) {
+				case "ArrowLeft":
+				case "ArrowRight":
+					i = t[(t.indexOf(r) + (e.key === "ArrowRight" ? 1 : -1) + t.length) % t.length];
+					break;
+				case "Home":
+					i = t[0];
+					break;
+				case "End":
+					i = t[t.length - 1];
+					break;
+				default: return;
+			}
+			e.preventDefault(), i && (this.#l(i), i.focus());
+		};
+	}
+	static {
+		this.styles = [i, f`
+      :host {
+        display: block;
+        /* 19 white system px over the 1px black rule — Menus.png's bar strip
+           exactly (white rows y 69..87 of the sheet). */
+        height: calc(var(--vf-scale, 1) * var(--vf-menubar-height, 20px));
+        position: relative;
+        z-index: 1000;
+      }
+      .bar {
+        /* Paint lives here rather than on the host so it rides the snap offset
+           (see .vf-snap in base.ts); border-box sizing keeps the geometry. */
+        background: var(--vf-white, #fff);
+        border-bottom: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+        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
+           below. */
+        padding-inline-start: calc(var(--vf-scale, 1) * 14px);
+      }
+      /* 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. */
+      ::slotted(vf-menu) {
+        margin-inline-start: calc(var(--vf-scale, 1) * -5px);
+      }
+      /* 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
+         the screen top. So they paint as ink *over* the bar (above slotted
+         content, like the hardware mask over anything), not as a cutout that
+         would show the backdrop. Stepped per the SCREEN_CORNER trace; the
+         --vf-black token keeps it themeable and forced-colors-safe. Absolute
+         position anchors to .bar (positioned via .vf-snap), riding the snap
+         offset with the paint it masks. */
+      :host([rounded]) .bar::before,
+      :host([rounded]) .bar::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        width: calc(var(--vf-scale, 1) * ${s[0]}px);
+        height: calc(var(--vf-scale, 1) * ${s.length}px);
+        background: var(--vf-black, #000);
+        pointer-events: none;
+      }
+      :host([rounded]) .bar::before {
+        left: 0;
+        clip-path: ${m(c(s, "left"))};
+      }
+      :host([rounded]) .bar::after {
+        right: 0;
+        clip-path: ${m(c(s, "right"))};
+      }
+    `];
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#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);
+	}
+	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;
+	}
+	focus(e) {
+		(this.#e ?? this.#r ?? this._menus[0])?.focus(e);
+	}
+	#o;
+	updated(e) {
+		e.has("label") && (this.#t.ariaLabel = this.label || null);
+	}
+	render() {
+		return p`
+      <div class="bar vf-snap" part="bar" role="presentation">
+        <slot @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();
+	}
+	#c() {
+		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;
+	#d;
+	#f;
+	#p(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();
+	}
+	#m() {
+		for (let e of this._menus) e.open = !1;
+		this.#e = null, this.#n.reset(), this.#i.detach(), this.#c();
+	}
+	#h;
+	#g;
+	#_;
+	#v(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());
+	}
+	#y(e) {
+		if (!this.#e) return;
+		let t = this.#e.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();
+	}
+};
+n([h()], _.prototype, "label", void 0), n([h({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "rounded", void 0), n([g({
+	selector: "vf-menu",
+	flatten: !0
+})], _.prototype, "_menus", void 0), _ = n([e("vf-menu-bar")], _);
+//#endregion
+export { _ as VfMenuBar };

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

@@ -0,0 +1,91 @@
+import { LitElement } from 'lit';
+/**
+ * `<vf-menu-item>` — a single command inside a `<vf-menu>` panel.
+ *
+ * Renders the classic System 7 menu row: optional ✓ check in the
+ * `--vf-select-gutter` left column (16px, shared with vf-select/vf-option),
+ * label, and the keyboard shortcut left-aligned in a right-anchored column,
+ * so every ⌘ lands at the same x. On activation the item performs the classic
+ * 3-blink inversion (~250ms), then dispatches `vf-menu-select` and asks its
+ * ancestors to close the menu.
+ *
+ * @slot - The item label.
+ * @csspart item - The row container.
+ * @csspart check - The ✓ checkmark glyph (rendered when `checked`).
+ * @csspart label - The label wrapper around the default slot.
+ * @csspart shortcut - The shortcut text, left-aligned in the shared column.
+ * @fires vf-menu-select - After the blink completes. `detail: { value, item }`.
+ *   Named for the menu rather than plain `vf-select`, which would collide with
+ *   the `<vf-select>` popup on any delegated ancestor listener (that component
+ *   commits with `vf-change`).
+ * @cssprop [--vf-menu-row-height=16px] - `vf-menu-item` row pitch (`Menus.png`;
+ *   kept separate from `--vf-popup-height` so re-theming the popup pill doesn't
+ *   move pulldown rows)
+ * @cssprop [--vf-menu-shortcut-column=23px] - `vf-menu-item` shortcut slot,
+ *   right-anchored with the text left-aligned in it so every ⌘ lands at the
+ *   same x (`Menus.png`) — the MDEF reserve, ⌘'s 11px advance + the face's
+ *   widest letter (M/W, 12px); widen it to line up longer shortcuts ("⌘⇧S")
+ * @cssprop [--vf-select-gutter=16px] - checkmark column: `vf-select` left inset
+ *   / `vf-option` + `vf-menu-item` ✓ column (shared so the value doesn't shift
+ *   on open)
+ */
+export declare class VfMenuItem extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    private readonly scale;
+    /** Disables the item: dimmed text, no highlight, no activation. */
+    disabled: boolean;
+    /** Shows the classic ✓ checkmark in the left gutter. */
+    checked: boolean;
+    /**
+     * Transient highlight — the full-row inversion the press-drag gesture paints
+     * on the row under the pointer (`:hover` can't: under touch the pointer is
+     * captured by the title the press started on). Managed by the menu, mirroring
+     * `vf-option[active]`; not part of the authoring API.
+     */
+    active: boolean;
+    /**
+     * Declares the item a *checkable* toggle up front, so it carries
+     * `role="menuitemcheckbox"` and `aria-checked="false"` from the first render
+     * rather than only once it has been checked. Set this on a toggle that starts
+     * **off** — otherwise it announces as a plain command until the first flip
+     * (the `checked` attribute can't express "checkable but off": for a boolean
+     * attribute, presence *is* true).
+     */
+    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.
+     */
+    shortcut: string;
+    /**
+     * Value reported in the `vf-menu-select` event detail. Defaults to the item's
+     * trimmed text content when unset.
+     */
+    value?: string;
+    /** `'on' | 'off'` while the selection blink runs, otherwise `null`. */
+    private _blinkPhase;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Runs the classic 3-blink inversion, then dispatches `vf-menu-select` and an
+     * internal `vf-menu-close-request` so ancestor menu/menu-bar close. Public
+     * because the menu's press gesture activates the row a drag was released
+     * over, which the row's own `click` never sees (a press that started on the
+     * title dispatches its click above both of them). No-op while disabled or
+     * already blinking.
+     */
+    activate(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-menu-item': VfMenuItem;
+    }
+}