vintage-frames 0.1.0

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

@@ -0,0 +1,252 @@
+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 { vfDisplay as r } from "../styles/recipes/display-face.js";
+import { vfBase as i } from "../styles/recipes/host.js";
+import { releaseAfterGesture as a } from "../document-listeners.js";
+import { deferActivation as o, emit as s } from "../events.js";
+import { runSelectionBlink as c } from "../motion.js";
+import { CHECKMARK as l, glyphSvg as u } from "../glyphs.js";
+import { LitElement as d, css as f, html as p, nothing as m } from "lit";
+import { property as h, state as g } from "lit/decorators.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+//#region src/components/vf-menu-item.ts
+var v = /* @__PURE__ */ new Map([
+	["⌃", "Control"],
+	["⌥", "Alt"],
+	["⇧", "Shift"],
+	["⌘", "Meta"]
+]);
+function y(e) {
+	let t = [...e.trim()], n = [];
+	for (; t.length > 0 && v.has(t[0]);) n.push(v.get(t.shift()));
+	let r = t.join("");
+	return r ? [...n, r].join("+") : "";
+}
+var b = class extends d {
+	static {
+		this.styles = [
+			i,
+			r,
+			f`
+      :host {
+        display: block;
+        cursor: var(--vf-cursor, default);
+        outline: none;
+      }
+      .item {
+        display: flex;
+        align-items: center;
+        /* Menus.png puts every menu row on a 16px pitch: the New Folder / Open
+           / Print pulldown's nine inter-band gaps are all exact multiples of 16
+           (48, 32, 16, 16, 16, 48, 16, 32, 16 — the 32s and 48s are separator
+           groups). A row is 3px above + the 9px glyph + 4px below.
+
+           Its own token rather than a share of --vf-popup-height: the art has
+           pulldown and popup rows identical, but tying them would make
+           re-theming the popup *pill* move every pulldown row, which is
+           semantically wrong. --vf-control-height is scoped to fields (22). */
+        height: calc(var(--vf-scale, 1) * var(--vf-menu-row-height, 16px));
+        /* Lock the line box to the row box, as vf-option does. vfDisplay's 1.25
+           line-height resolves taller than a 16px row, and with align-items:
+           center the excess spills equally above and below — invisible per row,
+           but it overflowed the panel and summoned a scrollbar the last time a
+           row shrank under an inherited line-height. Derived from the same
+           expression as the height so a re-theme can't reintroduce the gap. */
+        line-height: calc(var(--vf-scale, 1) * var(--vf-menu-row-height, 16px));
+        /* Shares --vf-select-gutter with vf-select/vf-option: Menus.png puts a
+           pulldown's label ink at the same inset as a popup's, and both hold
+           the same 9px ✓. (The token name says "select" for historical
+           reasons; it is the checkmark column for every menu surface.) */
+        padding: 0 calc(var(--vf-scale, 1) * 12px) 0
+          calc(var(--vf-scale, 1) * var(--vf-select-gutter, 16px));
+        position: relative;
+        white-space: nowrap;
+      }
+      /* The inherited color deliberately lets a disabled row dim its ✓ along
+         with the label. Brief §1 says dimming greys the label only while chrome
+         glyphs stay black, but authentic System 7 greyed the whole disabled
+         row, check included — and reference behavior wins over the rule of
+         thumb. Documented deviation, not an oversight. */
+      /* 3px in from the row's left edge on both axes, matching Menus.png (✓ ink
+         at +4 from the panel border, i.e. 3 inside it) and vf-option's
+         identical rule. The 16px row less the 9px glyph leaves 7 — an odd
+         remainder, so it is biased 3 above / 4 below exactly as the art has it
+         rather than centred on 3.5 authored px (10.5 device px at the default
+         3×), which would fringe at every scale. */
+      .check {
+        position: absolute;
+        left: calc(var(--vf-scale, 1) * 3px);
+        top: calc(var(--vf-scale, 1) * 3px);
+        display: block;
+        color: inherit;
+      }
+      /* Native 9×9 (1:1, crisp). */
+      .check svg {
+        display: block;
+        width: calc(var(--vf-scale, 1) * 9px);
+        height: calc(var(--vf-scale, 1) * 9px);
+      }
+      .label {
+        flex: 1;
+      }
+      /* The shortcut is LEFT-aligned ink in a right-anchored slot, the way the
+         MDEF drew it: in Menus.png's File pulldown every ⌘ starts at the same
+         x — 23px left of the right border — whatever the letter, with ⌘W
+         running to within 3px of the border. Flexing the label and letting the
+         span hug the right edge instead right-aligned the pairs, so the ⌘
+         column jagged with each letter's width. The slot is the classic
+         reserve: ⌘'s 11px advance + the face's widest letter (M/W, 12px) —
+         sized so ⌘W exactly fills it and no pair moves the anchor.
+         min-width, not width, so a longer shortcut ("⌘⇧S") widens its own
+         slot rather than painting past the row. The 8px margin is the
+         label↔shortcut minimum ("Close Window"'s label box ends at +108, the
+         slot starts at +116); it only binds in the row that sets the panel's
+         intrinsic width. */
+      .shortcut {
+        flex: none;
+        margin-left: calc(var(--vf-scale, 1) * 8px);
+        min-width: calc(
+          var(--vf-scale, 1) * var(--vf-menu-shortcut-column, 23px)
+        );
+        text-align: left;
+      }
+      /* A shortcut row trades the label's 12px right clearance for the art's
+         1px — the slot itself is the clearance there (1 + 23 puts the slot
+         edge at −24, and ⌘'s 1px bearing lands its ink at −23, as traced).
+         Label-only rows keep the 12. */
+      .item.has-shortcut {
+        padding-right: calc(var(--vf-scale, 1) * 1px);
+      }
+      :host([disabled]) .item {
+        color: var(--vf-disabled, #c0c0c0);
+      }
+      /* Highlight = full-width inversion (hover, the press-drag's [active],
+         keyboard focus, blink "on"). blink-on is scoped to the enabled host
+         like its siblings: an item disabled mid-blink has its timer cancelled
+         (see updated()), and this keeps it from flashing even for the frame
+         before that lands. */
+      :host(:not([disabled])) .item:hover,
+      :host(:not([disabled])[active]) .item,
+      :host(:not([disabled]):focus) .item,
+      :host(:not([disabled])) .item.blink-on {
+        /* Forced colors: exempt the inverted row from the mode's text
+           backplate, which would land a Canvas slab on the highlight bar —
+           see vf-list-item's forced-colors note. The pair is already the
+           user's own via the vfBase token remap. */
+        @media (forced-colors: active) {
+          forced-color-adjust: none;
+        }
+        background: var(--vf-highlight, #000);
+        color: var(--vf-highlight-text, #fff);
+      }
+      /* While blinking, the timer — not the pointer — owns the inversion. Each
+         highlight source needs its own override at matching specificity; the
+         [active] one is what lets a drag-picked row keep its flag through the
+         blink, so the release reads as the highlight flashing off. */
+      :host(:not([disabled])) .item.blink-off:hover,
+      :host(:not([disabled])[active]) .item.blink-off,
+      :host(:not([disabled]):focus) .item.blink-off,
+      .item.blink-off {
+        background: transparent;
+        color: inherit;
+      }
+    `
+		];
+	}
+	#e;
+	#t;
+	#n;
+	#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);
+	}
+	get #a() {
+		return this.checkable || this.#n;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#s(), this.#o(), this.hasAttribute("tabindex") || (this.tabIndex = -1);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#d();
+	}
+	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();
+	}
+	#o() {
+		this.#r.ariaKeyShortcuts = y(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);
+	}
+	render() {
+		let e = {
+			item: !0,
+			"has-shortcut": this.shortcut !== "",
+			"blink-on": this._blinkPhase === "on",
+			"blink-off": this._blinkPhase === "off"
+		};
+		return p`
+      <div class=${_(e)} part="item">
+        ${this.checked ? p`<span class="check" part="check" aria-hidden="true"
+              >${u(l, "checkmark")}</span
+            >` : m}
+        <span class="label" part="label"><slot></slot></span>
+        ${this.shortcut ? p`<span class="shortcut" part="shortcut" aria-hidden="true"
+              >${this.shortcut}</span
+            >` : m}
+      </div>
+    `;
+	}
+	#c() {
+		this.#i = this.closest("vf-menu") !== null, this.#i && a(() => {
+			this.#i = !1;
+		});
+	}
+	#l(e) {
+		if (this.#i) {
+			this.#i = !1;
+			return;
+		}
+		o(this, e, () => this.activate());
+	}
+	#u(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), this.activate());
+	}
+	activate() {
+		if (this.disabled || this.#t) return;
+		this.#t = !0;
+		let e = c((e) => {
+			this._blinkPhase = e ? "on" : "off";
+		}, () => {
+			this._blinkPhase = null, this.#t = !1, this.#e = void 0, this.#f();
+		});
+		this.#t && (this.#e = e);
+	}
+	#d() {
+		this.#t && (this.#e?.cancel(), this.#e = void 0, this.#t = !1, this._blinkPhase = null);
+	}
+	#f() {
+		let e = this.value ?? (this.textContent ?? "").trim();
+		s(this, "vf-menu-select", {
+			value: e,
+			item: this
+		}), s(this, "vf-menu-close-request", { item: this }, { composed: !1 });
+	}
+};
+n([h({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "disabled", void 0), n([h({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "checked", void 0), n([h({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "active", void 0), n([h({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "checkable", void 0), n([h()], b.prototype, "shortcut", void 0), n([h()], b.prototype, "value", void 0), n([g()], b.prototype, "_blinkPhase", void 0), b = n([e("vf-menu-item")], b);
+//#endregion
+export { b as VfMenuItem };

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

@@ -0,0 +1,95 @@
+import { LitElement } from 'lit';
+import type { VfMenuItem } from './vf-menu-item.js';
+/**
+ * `<vf-menu>` — a pull-down menu: a bar label plus a dropped panel of
+ * `<vf-menu-item>` / `<vf-separator>` children.
+ *
+ * Inside a `<vf-menu-bar>` the bar coordinates open state (only one menu open,
+ * hover-switching, outside-click/Escape dismissal) and owns the pointer
+ * gesture, which may travel between its menus. Used standalone, the menu
+ * toggles itself on label click and manages its own dismissal, its own press
+ * gesture and item keyboard navigation (ArrowUp/ArrowDown, Home/End, and the
+ * shared first-letter type-ahead — src/type-ahead.ts) while open.
+ *
+ * Pointer — the two styles `vf-select` supports, on the same terms (see
+ * src/menu-press.ts): the System 7 press-drag-release (press the title, slide
+ * onto a command, release over it) and a modern quick tap that leaves the menu
+ * dropped for a second click.
+ *
+ * @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.
+ * @csspart label - The menu title in the bar (inverts while open).
+ * @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
+ *   also spends one of these on every slotted `vf-separator`, the full row the
+ *   MDEF gave a divider (rule 8px into it — see the panel CSS)
+ */
+export declare class VfMenu extends LitElement {
+    #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;
+    /**
+     * The menu title shown in the bar, and the menu's accessible name. Slotted
+     * `label` content replaces it visually (see the `label` slot) but this text
+     * keeps naming the menu for AT.
+     */
+    label: string;
+    /**
+     * Whether the panel is dropped. Reflected. Managed by the parent
+     * `vf-menu-bar` when present, otherwise by the menu itself.
+     */
+    open: 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,
+     * so the whole bar is a single Tab stop. Defaults to 0 so a standalone
+     * menu is Tab-focusable on its own.
+     */
+    barTabIndex: number;
+    private _labelEl;
+    private _assignedItems;
+    /** The enabled `vf-menu-item` children, in document order. */
+    get items(): VfMenuItem[];
+    /**
+     * Every slotted `vf-menu-item`, in document order — **disabled rows
+     * included**, unlike {@link items}. The press gesture hit-tests against
+     * these: releasing over a disabled row has to cancel, not fall through to
+     * whatever the panel covers.
+     */
+    get allItems(): VfMenuItem[];
+    /**
+     * Viewport rect of the bar title, or `null` before the first render. The
+     * press gesture hit-tests by coordinates rather than by event target (see
+     * src/menu-press.ts), so it wants the box, not the element.
+     */
+    get labelRect(): DOMRect | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
+    /**
+     * Moves keyboard focus to the menu's bar label — the host's one focusable
+     * point. Overridden because the platform's `focus()` is a silent no-op here:
+     * no `delegatesFocus`, no host tabindex, so the standard method did nothing
+     * and `vf-label for` (which calls `target.focus()`) couldn't reach the menu.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * @deprecated Use `focus()` — the standard method now does this. (Spelled
+     *   without a link: a `{@link}` inside a deprecated tag makes the cem
+     *   analyzer attach the parsed AST node to the manifest, which then fails
+     *   to serialize — "Converting circular structure to JSON".)
+     */
+    focusLabel(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-menu': VfMenu;
+    }
+}

package/dist/components/vf-menu.js

@@ -0,0 +1,346 @@
+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 { vfDisplay as r } from "../styles/recipes/display-face.js";
+import { vfBase as i } from "../styles/recipes/host.js";
+import { vfPanel as a } from "../styles/recipes/surface.js";
+import { vfFocusUnderline as o } from "../styles/recipes/focus.js";
+import { GridSnapController as s } from "../grid-snap.js";
+import { DocumentListenersController as c, releaseAfterGesture as l } from "../document-listeners.js";
+import { deferActivation as u, emit as d } from "../events.js";
+import { FocusRuleController as f } from "../focus-modality.js";
+import { TypeAheadBuffer as p } from "../type-ahead.js";
+import { MenuPressController as m } from "../menu-press.js";
+import { LitElement as h, css as g, html as _, nothing as v } from "lit";
+import { property as y, query as b, queryAssignedElements as x } from "lit/decorators.js";
+//#region src/components/vf-menu.ts
+var S = class extends h {
+	constructor(...e) {
+		super(...e), this.scale = new t(this), this.gridSnap = new s(this), this.#e = new f(this), this.label = "", this.open = !1, this.barTabIndex = 0, this.#t = new m(this, {
+			menus: () => [this],
+			open: (e) => {
+				e.open = !0;
+			},
+			close: () => {
+				this.open = !1;
+			}
+		}), this.#r = this.attachInternals(), this.#i = new p(), this.#a = !1, this.#o = () => {
+			this.#n || this.focus(), this.open = !1;
+		}, this.#s = (e) => {
+			e.composedPath().includes(this) || (this.open = !1);
+		}, this.#c = (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.#l(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.#i.feed(e.key, n, t.map((e) => ({
+						text: e.textContent ?? "",
+						disabled: !1
+					})))]?.focus();
+					break;
+				}
+			}
+		}, this.#u = new c(this, () => [[
+			document,
+			"pointerdown",
+			this.#s,
+			!0
+		], [
+			document,
+			"keydown",
+			this.#c,
+			!0
+		]]), this.#f = (e) => {
+			if (!this.open || this.#n) return;
+			let t = e.relatedTarget;
+			t instanceof Node && (this.contains(t) || this.renderRoot.contains(t)) || (this.open = !1);
+		}, this.#p = (e) => {
+			this.#e.suppress(), !this.#n && this.#t.onPointerDown(e);
+		};
+	}
+	static {
+		this.styles = [
+			i,
+			r,
+			a,
+			g`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      .label {
+        display: flex;
+        align-items: center;
+        height: calc(var(--vf-scale, 1) * var(--vf-menubar-height, 20px));
+        /* The label box IS the title's black plate (and its hit rect), and
+           Menus.png puts the plate 10px left / 9px right of the title ink.
+           Chicago carries a 1px bearing on each side inside the text box, so
+           9/8 in layout lands the plate at ink −10/+9. In a bar, vf-menu-bar
+           overlaps adjacent boxes 5px on top of this — the plates share a
+           band, as the originals did. */
+        padding-inline: calc(var(--vf-scale, 1) * 9px) calc(var(--vf-scale, 1) * 8px);
+        white-space: nowrap;
+        /* The press-drag gesture owns pointer moves while the title is held;
+           suppress the browser's own touch panning/scrolling so a touch drag
+           walks the menu instead of scrolling the page. */
+        touch-action: none;
+        cursor: var(--vf-cursor, default);
+      }
+      :host([open]) .label {
+        /* Forced colors: exempt the inverted title from the mode's text
+           backplate, which would land a Canvas slab on the highlight bar —
+           see vf-list-item's forced-colors note. The pair is already the
+           user's own via the vfBase token remap. */
+        @media (forced-colors: active) {
+          forced-color-adjust: none;
+        }
+        background: var(--vf-highlight, #000);
+        color: var(--vf-highlight-text, #fff);
+        /* The hilite leaves the bar's top row white: System 7's plate is rows
+           1..18 of the 20px bar (the Label specimen in Menus.png is 18px of
+           plate, and InfiniteMac shows the white row above it). Transparent
+           borders + padding-box clip inset the paint without moving the box:
+           the top row shows the bar's white through, the bottom row the bar's
+           own black rule, and the hit rect stays the full bar height so a
+           click slammed against the screen top still opens the menu. The
+           18px content box centers the 16px em on the same rows as the
+           closed state, so the title never shifts. Declared only while open
+           because forced-colors mode repaints transparent borders CanvasText
+           on closed labels; here forced-color-adjust above already exempts
+           them. */
+        border-block: calc(var(--vf-scale, 1) * 1px) solid transparent;
+        background-clip: padding-box;
+      }
+      /* The title rides in its own box so the focus rule spans the title and
+         not the bar cell's 10px padding — the same reason vf-button wraps its
+         label. A line-height of 1 shrinks that box to the face's own em, whose
+         bottom edge IS the descender line (the Chicago 12/4 metrics — see
+         register-embedded-font.ts), so the rule below it clears every glyph
+         instead of being crossed by a 'g' the way the button's is. A slotted
+         icon — the Apple menu's vf-img — sizes the box instead, and the same
+         rule lands one blank row under the artwork. The title doesn't move
+         either way: symmetric half-leading and align-items:center put the
+         baseline in the same place at any line height. */
+      .title {
+        position: relative;
+        display: flex;
+        align-items: center;
+        line-height: 1;
+      }
+      /* Keyboard focus is the kit's dashed rule under the title, not a ring
+         around the bar cell (see vfFocusUnderline) — one blank row under the
+         box, so −(1 + 1).
+
+         Gated on a class, not :focus-visible, exactly as vf-select is: the
+         press-drag gesture suppresses the browser's own mouse focus and
+         MenuPressController calls focus() instead, and Blink reads a
+         scripted focus as a visible one. So :focus-visible is true after a
+         plain mouse press on a title. FocusRuleController consults the page's
+         last input modality instead (see src/focus-modality.ts).
+
+         Only while CLOSED: a dropped menu already says where focus is, in the
+         louder of the two languages — the whole cell inverts. Drawing the rule
+         under an inverted title as well just adds a second, quieter mark
+         saying the same thing (in white, since it is currentColor). The mark
+         is for the state the inversion can't express: focused, not yet open.
+         The class stays on through the open state, so the rule comes back by
+         itself when the menu closes and hands focus back to the title. */
+      .label:focus {
+        outline: none;
+      }
+      :host(:not([open])) .label.vf-focus-rule .title::after {
+        --vf-focus-underline-offset: -2px;
+        ${o}
+      }
+      .panel {
+        position: absolute;
+        /* The panel anchors to the host, not the corrected label, so it
+           composes the snap offset (see grid-snap.ts) to ride along. */
+        top: calc(100% + var(--vf-snap-dy, 0px));
+        left: var(--vf-snap-dx, 0px);
+        /* A menu is as wide as its widest row, the way the MDEF sized it —
+           Menus.png's File pulldown is 141px, its cm/inches popup 94. The old
+           180px floor held every smaller panel apart from its own rows, which
+           the right-anchored shortcut column would turn into a visible gulf
+           between label and ⌘. The floor that remains is the host's own
+           width, so a panel is never narrower than the bar title it hangs
+           from. (The nowrap rows make min-content the widest row, so the
+           shrink-to-fit abspos width IS the MDEF width.) */
+        min-width: 100%;
+        /* No vertical inset: every panel in Menus.png — both pulldowns, the
+           open popup and the closed pill — puts its first row's ink at +4 from
+           the border box, which is the 1px border plus the row's own 3px ✓
+           bias. The bottom border likewise sits immediately after the last row.
+           A 2px inset here displaced every row by 2px against the art; it was
+           invisible while the rows themselves were 6px too tall. */
+        padding: 0;
+        z-index: 1000;
+        /* As on the title: the held press, not the browser, owns touch moves
+           over the dropped panel. */
+        touch-action: none;
+        /* Slotted vf-separators render as the classic dimmed dotted menu rule. */
+        --vf-separator-color: var(--vf-disabled, #c0c0c0);
+        --vf-separator-style: dotted;
+      }
+      :host(:not([open])) .panel {
+        display: none;
+      }
+      /* 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
+         every divider group (vs 16 within one), and InfiniteMac's System 7.5
+         Edit menu puts the rule 12px under the ⌘ band above and 10px over
+         the one below: the neighbor rows' own 4/3px insets plus 8 over /
+         7 under the 1px rule. Derived from the row token (8 = H/2,
+         7 = H/2 − 1) so a re-themed pitch keeps dividers on it. */
+      .panel ::slotted(vf-separator) {
+        margin: calc(var(--vf-scale, 1) * var(--vf-menu-row-height, 16px) / 2)
+          0
+          calc(var(--vf-scale, 1) * (var(--vf-menu-row-height, 16px) / 2 - 1px));
+      }
+    `
+		];
+	}
+	#e;
+	#t;
+	get items() {
+		return this.allItems.filter((e) => !e.disabled);
+	}
+	get allItems() {
+		return this._assignedItems;
+	}
+	get labelRect() {
+		return this._labelEl?.getBoundingClientRect() ?? null;
+	}
+	get #n() {
+		return this.closest("vf-menu-bar") !== null;
+	}
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l(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();
+	}
+	#u;
+	connectedCallback() {
+		super.connectedCallback(), this.#d(), this.requestUpdate(), this.addEventListener("vf-menu-close-request", this.#o), this.addEventListener("pointerdown", this.#p), this.addEventListener("focusout", this.#f);
+	}
+	#d() {
+		this.#r.role = this.#n ? "none" : null;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("vf-menu-close-request", this.#o), this.removeEventListener("pointerdown", this.#p), this.removeEventListener("focusout", this.#f);
+	}
+	#f;
+	updated(e) {
+		if (e.has("open")) {
+			if (this.open && !this.#n ? this.#u.attach() : this.#u.detach(), !this.open) for (let e of this.allItems) e.active = !1;
+			this.open || this.#i.reset();
+		}
+	}
+	#p;
+	focus(e) {
+		this._labelEl?.focus(e);
+	}
+	focusLabel() {
+		this.focus();
+	}
+	render() {
+		return _`
+      <div
+        class="label vf-snap ${this.#e.marked ? "vf-focus-rule" : ""}"
+        part="label"
+        role=${this.#n ? "menuitem" : "button"}
+        tabindex=${this.barTabIndex}
+        aria-haspopup="menu"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-label=${this.label || v}
+        @pointerdown=${this.#h}
+        @click=${this.#g}
+        @pointerenter=${this.#_}
+        @keydown=${this.#v}
+      >
+        <span class="title"><slot name="label">${this.label}</slot></span>
+      </div>
+      <div
+        class="panel vf-panel"
+        part="panel"
+        role="menu"
+        aria-label=${this.label || v}
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+	#m() {
+		if (!this.#n) {
+			this.open = !this.open;
+			return;
+		}
+		d(this, "vf-menu-toggle-request", { menu: this }, {
+			cancelable: !0,
+			composed: !1
+		}) && (this.open = !this.open);
+	}
+	#h() {
+		this.#a = !0, l(() => {
+			this.#a = !1;
+		});
+	}
+	#g(e) {
+		if (this.#a) {
+			this.#a = !1;
+			return;
+		}
+		u(this, e, () => this.#m());
+	}
+	#_() {
+		d(this, "vf-menu-hover", { menu: this }, { composed: !1 });
+	}
+	#v(e) {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			let t = this.open;
+			this.#m(), !t && this.open && this.#y();
+		} else e.key === "ArrowDown" && !this.open && (e.preventDefault(), this.#m(), this.open && this.#y());
+	}
+	async #y() {
+		await this.updateComplete, this.items[0]?.focus();
+	}
+};
+n([y()], S.prototype, "label", void 0), n([y({
+	type: Boolean,
+	reflect: !0
+})], S.prototype, "open", void 0), n([y({
+	type: Number,
+	attribute: !1
+})], S.prototype, "barTabIndex", void 0), n([b(".label")], S.prototype, "_labelEl", void 0), n([x({
+	selector: "vf-menu-item",
+	flatten: !0
+})], S.prototype, "_assignedItems", void 0), S = n([e("vf-menu")], S);
+//#endregion
+export { S as VfMenu };