vintage-frames 0.1.1 → 0.2.0

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

@@ -93,7 +93,7 @@ export declare class VfButton extends VfButton_base {
     formTarget: string;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     private buttonEl;
     /**

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

@@ -48,7 +48,7 @@ declare const VfContainer_base: (new (...args: any[]) => import("../size.js").Vf
  * A container's box is itself the consumer's coordinate system, including for
  * non-`vf` content that cannot correct itself, so the box is the thing to
  * hold on the grid. The shadow box below owns the `position: relative` anchor
- * and the `vf-snap` class together, so under `applyGridSnap()` the correction
+ * and the `vf-snap` class together, so the correction
  * moves the whole coordinate system — everything placed against it rides
  * along instead of being re-corrected child by child. (`vf-stack` shipped
  * without a controller on the theory that slotted `vf-*` children correct
@@ -80,7 +80,7 @@ export declare class VfContainer extends VfContainer_base {
      */
     private readonly scale;
     /**
-     * Hold the box on the device-pixel grid under `applyGridSnap()` — see the
+     * Hold the box on the device-pixel grid — see the
      * class doc. The host is what gets measured; `.box` (vf-snap) is where the
      * correction lands.
      */

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

@@ -97,7 +97,7 @@ export declare class VfDesktop extends VfDesktop_base {
     private _windows;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * The consumer's `--vf-desktop-pattern` override, or `''` for the kit

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

@@ -18,7 +18,7 @@ export declare class VfFieldset extends VfFieldset_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /** Legend text shown on the top border. */
     legend: string;

package/dist/components/vf-fieldset.js

@@ -29,7 +29,12 @@ var m = class extends r(s) {
         /* Chicago-style legend (chrome); grouped content keeps the body face. */
         ${i}
         position: absolute;
-        top: -0.7em;
+        /* Whole system px like every other length here. Authored as -0.7em
+           this was 11.2px against the 16px display face — off the device grid
+           at every scale, and it took a slotted legend with it (verify:grid).
+           11 keeps the legend straddling the border, a fifth of a system px
+           lower. */
+        top: calc(var(--vf-scale, 1) * -11px);
         left: calc(var(--vf-scale, 1) * 8px);
         padding: 0 calc(var(--vf-scale, 1) * 5px);
         /* Punches through the border, matching the surface behind it. */

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

@@ -112,7 +112,7 @@ export declare class VfGrid extends VfGrid_base {
     collapse: boolean;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     protected render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -314,7 +314,7 @@ export declare class VfIcon extends VfIcon_base {
     maxlength: number;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /** Whether to wear the dashed focus rule; see src/focus-modality.ts. */
     private readonly focusRule;

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

@@ -37,7 +37,7 @@ export declare class VfImg extends VfImg_base {
     static styles: import("lit").CSSResult[];
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * The displayed width in system px — a whole number. Defaults to the slotted

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

@@ -54,7 +54,7 @@ export declare class VfLabel extends VfLabel_base {
     static styles: import("lit").CSSResult[];
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * The id of the control this caption names, resolved in the label's own tree

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+declare const VfListItem_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
 /**
  * `<vf-list-item>` — a row inside a `<vf-list>` list box.
  *
@@ -16,8 +17,14 @@ import { LitElement } from 'lit';
  *   the row's words. On a selected row the graphic rides the inverted bar
  *   as-is — System 7 left color icons unfiltered on the highlight.
  * @csspart text - The text span beside the icon gutter (ellipsizes).
+ *
+ * Takes `top`/`left` like every other element ({@link VfPositioned}), for the
+ * consumer who wants a row somewhere other than a list. Inside its parent
+ * `<vf-list>` the rows stack in flow, so stating an origin lifts that row out
+ * of the stack and the ones below it close the gap — the placement doing what
+ * it says, but not how a list box is laid out.
  */
-export declare class VfListItem extends LitElement {
+export declare class VfListItem extends VfListItem_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
@@ -46,3 +53,4 @@ declare global {
         'vf-list-item': VfListItem;
     }
 }
+export {};

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

@@ -1,15 +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 { vfBase as r } from "../styles/recipes/host.js";
-import { vfFocusRing as i } from "../styles/recipes/focus.js";
-import { emit as a } from "../events.js";
-import { LitElement as o, css as s, html as c } from "lit";
-import { property as l } from "lit/decorators.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 { 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 u = class extends o {
+var d = class extends r(s) {
 	static {
-		this.styles = [r, s`
+		this.styles = [i, c`
       :host {
         display: flex;
         align-items: center;
@@ -47,7 +48,7 @@ var u = class extends o {
          across selected rows while Space still acts on it. */
       :host(:focus) {
         --vf-focus-offset: -1px;
-        ${i}
+        ${a}
       }
       :host([selected]) {
         background: var(--vf-highlight, #000);
@@ -80,19 +81,19 @@ var u = class extends o {
 		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 && a(this, "vf-list-item-disabled-change", { item: this }, { composed: !1 });
+		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 });
 	}
 	render() {
-		return c`<slot name="icon"></slot
+		return l`<slot name="icon"></slot
       ><span class="text" part="text"><slot></slot></span>`;
 	}
 };
-n([l()], u.prototype, "value", void 0), n([l({
+n([u()], d.prototype, "value", void 0), n([u({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "selected", void 0), n([l({
+})], d.prototype, "selected", void 0), n([u({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "disabled", void 0), n([l({ attribute: !1 })], u.prototype, "listDisabled", void 0), u = n([e("vf-list-item")], u);
+})], d.prototype, "disabled", void 0), n([u({ attribute: !1 })], d.prototype, "listDisabled", void 0), d = n([e("vf-list-item")], d);
 //#endregion
-export { u as VfListItem };
+export { d as VfListItem };

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

@@ -29,7 +29,7 @@ export declare class VfList extends VfList_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     private viewport;
     private content;

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

@@ -25,7 +25,7 @@ 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. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * Accessible name for the bar, applied as `aria-label` on the host (which

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+declare const VfMenuItem_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
 /**
  * `<vf-menu-item>` — a single command inside a `<vf-menu>` panel.
  *
@@ -9,6 +10,13 @@ import { LitElement } from 'lit';
  * 3-blink inversion (~250ms), then dispatches `vf-menu-select` and asks its
  * ancestors to close the menu.
  *
+ * Takes `top`/`left` like every other element ({@link VfPositioned}), for the
+ * consumer who wants a row somewhere other than a pulldown. Inside its parent
+ * `<vf-menu>` the panel is as wide as its widest row and stacks them in flow,
+ * so stating an origin takes that row out of both: it no longer contributes to
+ * the panel's width and the rows below close the gap. The placement doing what
+ * it says — but not how a pulldown is laid out.
+ *
  * @slot - The item label.
  * @csspart item - The row container.
  * @csspart check - The ✓ checkmark glyph (rendered when `checked`).
@@ -29,7 +37,7 @@ import { LitElement } from 'lit';
  *   / `vf-option` + `vf-menu-item` ✓ column (shared so the value doesn't shift
  *   on open)
  */
-export declare class VfMenuItem extends LitElement {
+export declare class VfMenuItem extends VfMenuItem_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
@@ -89,3 +97,4 @@ declare global {
         'vf-menu-item': VfMenuItem;
     }
 }
+export {};

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

@@ -1,34 +1,35 @@
 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";
+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 { 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";
+import { property as g, state as _ } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
 //#region src/components/vf-menu-item.ts
-var v = /* @__PURE__ */ new Map([
+var y = /* @__PURE__ */ new Map([
 	["⌃", "Control"],
 	["⌥", "Alt"],
 	["⇧", "Shift"],
 	["⌘", "Meta"]
 ]);
-function y(e) {
+function b(e) {
 	let t = [...e.trim()], n = [];
-	for (; t.length > 0 && v.has(t[0]);) n.push(v.get(t.shift()));
+	for (; t.length > 0 && y.has(t[0]);) n.push(y.get(t.shift()));
 	let r = t.join("");
 	return r ? [...n, r].join("+") : "";
 }
-var b = class extends d {
+var x = class extends r(f) {
 	static {
 		this.styles = [
+			a,
 			i,
-			r,
-			f`
+			p`
       :host {
         display: block;
         cursor: var(--vf-cursor, default);
@@ -175,7 +176,7 @@ var b = class extends d {
 		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;
+		this.#r.ariaKeyShortcuts = b(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);
@@ -187,20 +188,20 @@ var b = class extends d {
 			"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}
+		return m`
+      <div class=${v(e)} part="item">
+        ${this.checked ? m`<span class="check" part="check" aria-hidden="true"
+              >${d(u, "checkmark")}</span
+            >` : h}
         <span class="label" part="label"><slot></slot></span>
-        ${this.shortcut ? p`<span class="shortcut" part="shortcut" aria-hidden="true"
+        ${this.shortcut ? m`<span class="shortcut" part="shortcut" aria-hidden="true"
               >${this.shortcut}</span
-            >` : m}
+            >` : h}
       </div>
     `;
 	}
 	#c() {
-		this.#i = this.closest("vf-menu") !== null, this.#i && a(() => {
+		this.#i = this.closest("vf-menu") !== null, this.#i && o(() => {
 			this.#i = !1;
 		});
 	}
@@ -209,7 +210,7 @@ var b = class extends d {
 			this.#i = !1;
 			return;
 		}
-		o(this, e, () => this.activate());
+		s(this, e, () => this.activate());
 	}
 	#u(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), this.activate());
@@ -217,7 +218,7 @@ var b = class extends d {
 	activate() {
 		if (this.disabled || this.#t) return;
 		this.#t = !0;
-		let e = c((e) => {
+		let e = l((e) => {
 			this._blinkPhase = e ? "on" : "off";
 		}, () => {
 			this._blinkPhase = null, this.#t = !1, this.#e = void 0, this.#f();
@@ -229,24 +230,24 @@ var b = class extends d {
 	}
 	#f() {
 		let e = this.value ?? (this.textContent ?? "").trim();
-		s(this, "vf-menu-select", {
+		c(this, "vf-menu-select", {
 			value: e,
 			item: this
-		}), s(this, "vf-menu-close-request", { item: this }, { composed: !1 });
+		}), c(this, "vf-menu-close-request", { item: this }, { composed: !1 });
 	}
 };
-n([h({
+n([g({
 	type: Boolean,
 	reflect: !0
-})], b.prototype, "disabled", void 0), n([h({
+})], x.prototype, "disabled", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], b.prototype, "checked", void 0), n([h({
+})], x.prototype, "checked", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], b.prototype, "active", void 0), n([h({
+})], x.prototype, "active", void 0), n([g({
 	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);
+})], 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);
 //#endregion
-export { b as VfMenuItem };
+export { x as VfMenuItem };

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

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import type { VfMenuItem } from './vf-menu-item.js';
+declare const VfMenu_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
 /**
  * `<vf-menu>` — a pull-down menu: a bar label plus a dropped panel of
  * `<vf-menu-item>` / `<vf-separator>` children.
@@ -16,6 +17,13 @@ import type { VfMenuItem } from './vf-menu-item.js';
  * onto a command, release over it) and a modern quick tap that leaves the menu
  * dropped for a second click.
  *
+ * Takes `top`/`left` like every other element ({@link VfPositioned}) — the
+ * natural fit being a standalone menu, which is a free-standing menu button and
+ * places like any other control. The panel is anchored to the host's own box
+ * (`top: 100%`), so it follows a placed menu down without any further work.
+ * Inside a `<vf-menu-bar>`, the bar lays its titles out in flow — placing one
+ * lifts it off the bar and the titles beside it close the gap.
+ *
  * @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
@@ -28,11 +36,11 @@ import type { VfMenuItem } from './vf-menu-item.js';
  *   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 {
+export declare class VfMenu extends VfMenu_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * The menu title shown in the bar, and the menu's accessible name. Slotted
@@ -93,3 +101,4 @@ declare global {
         'vf-menu': VfMenu;
     }
 }
+export {};

package/dist/components/vf-menu.js

@@ -1,22 +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 { 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";
+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 { vfPanel as o } from "../styles/recipes/surface.js";
+import { vfFocusUnderline as s } from "../styles/recipes/focus.js";
+import { GridSnapController as c } from "../grid-snap.js";
+import { DocumentListenersController as l, releaseAfterGesture as u } from "../document-listeners.js";
+import { deferActivation as d, emit as f } from "../events.js";
+import { FocusRuleController as p } from "../focus-modality.js";
+import { TypeAheadBuffer as m } from "../type-ahead.js";
+import { MenuPressController as h } from "../menu-press.js";
+import { LitElement as g, css as _, html as v, nothing as y } from "lit";
+import { property as b, query as x, queryAssignedElements as S } from "lit/decorators.js";
 //#region src/components/vf-menu.ts
-var S = class extends h {
+var C = class extends r(g) {
 	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, {
+		super(...e), this.scale = new t(this), this.gridSnap = new c(this), this.#e = new p(this), this.label = "", this.open = !1, this.barTabIndex = 0, this.#t = new h(this, {
 			menus: () => [this],
 			open: (e) => {
 				e.open = !0;
@@ -24,7 +25,7 @@ var S = class extends h {
 			close: () => {
 				this.open = !1;
 			}
-		}), this.#r = this.attachInternals(), this.#i = new p(), this.#a = !1, this.#o = () => {
+		}), this.#r = this.attachInternals(), this.#i = new m(), this.#a = !1, this.#o = () => {
 			this.#n || this.focus(), this.open = !1;
 		}, this.#s = (e) => {
 			e.composedPath().includes(this) || (this.open = !1);
@@ -58,7 +59,7 @@ var S = class extends h {
 					break;
 				}
 			}
-		}, this.#u = new c(this, () => [[
+		}, this.#u = new l(this, () => [[
 			document,
 			"pointerdown",
 			this.#s,
@@ -78,10 +79,10 @@ var S = class extends h {
 	}
 	static {
 		this.styles = [
-			i,
-			r,
 			a,
-			g`
+			i,
+			o,
+			_`
       :host {
         display: inline-block;
         position: relative;
@@ -168,7 +169,7 @@ var S = class extends h {
       }
       :host(:not([open])) .label.vf-focus-rule .title::after {
         --vf-focus-underline-offset: -2px;
-        ${o}
+        ${s}
       }
       .panel {
         position: absolute;
@@ -270,7 +271,7 @@ var S = class extends h {
 		this.focus();
 	}
 	render() {
-		return _`
+		return v`
       <div
         class="label vf-snap ${this.#e.marked ? "vf-focus-rule" : ""}"
         part="label"
@@ -278,7 +279,7 @@ var S = class extends h {
         tabindex=${this.barTabIndex}
         aria-haspopup="menu"
         aria-expanded=${this.open ? "true" : "false"}
-        aria-label=${this.label || v}
+        aria-label=${this.label || y}
         @pointerdown=${this.#h}
         @click=${this.#g}
         @pointerenter=${this.#_}
@@ -290,7 +291,7 @@ var S = class extends h {
         class="panel vf-panel"
         part="panel"
         role="menu"
-        aria-label=${this.label || v}
+        aria-label=${this.label || y}
       >
         <slot></slot>
       </div>
@@ -301,13 +302,13 @@ var S = class extends h {
 			this.open = !this.open;
 			return;
 		}
-		d(this, "vf-menu-toggle-request", { menu: this }, {
+		f(this, "vf-menu-toggle-request", { menu: this }, {
 			cancelable: !0,
 			composed: !1
 		}) && (this.open = !this.open);
 	}
 	#h() {
-		this.#a = !0, l(() => {
+		this.#a = !0, u(() => {
 			this.#a = !1;
 		});
 	}
@@ -316,10 +317,10 @@ var S = class extends h {
 			this.#a = !1;
 			return;
 		}
-		u(this, e, () => this.#m());
+		d(this, e, () => this.#m());
 	}
 	#_() {
-		d(this, "vf-menu-hover", { menu: this }, { composed: !1 });
+		f(this, "vf-menu-hover", { menu: this }, { composed: !1 });
 	}
 	#v(e) {
 		if (e.key === "Enter" || e.key === " ") {
@@ -332,15 +333,15 @@ var S = class extends h {
 		await this.updateComplete, this.items[0]?.focus();
 	}
 };
-n([y()], S.prototype, "label", void 0), n([y({
+n([b()], C.prototype, "label", void 0), n([b({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "open", void 0), n([y({
+})], C.prototype, "open", void 0), n([b({
 	type: Number,
 	attribute: !1
-})], S.prototype, "barTabIndex", void 0), n([b(".label")], S.prototype, "_labelEl", void 0), n([x({
+})], C.prototype, "barTabIndex", void 0), n([x(".label")], C.prototype, "_labelEl", void 0), n([S({
 	selector: "vf-menu-item",
 	flatten: !0
-})], S.prototype, "_assignedItems", void 0), S = n([e("vf-menu")], S);
+})], C.prototype, "_assignedItems", void 0), C = n([e("vf-menu")], C);
 //#endregion
-export { S as VfMenu };
+export { C as VfMenu };

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

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
+declare const VfOption_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
 /**
  * `<vf-option>` — a single choice inside a `<vf-select>` popup menu.
  *
@@ -12,6 +13,14 @@ import type { PropertyValues } from 'lit';
  *
  * The host carries `role="option"` with `aria-selected`/`aria-disabled`.
  *
+ * Takes `top`/`left` like every other element ({@link VfPositioned}), for the
+ * consumer who wants one somewhere other than a popup row. Inside its parent
+ * `<vf-select>` it is a row the panel measures and scrolls in flow, so stating
+ * an origin there takes it out of that measurement: the panel stops counting it
+ * toward its own width and its scroll clamp, and the rows below close the gap.
+ * That is the placement doing exactly what it says — not a bug — but it is not
+ * how a popup is laid out.
+ *
  * @csspart check - The ✓ checkmark shown in the left gutter when selected.
  * @cssprop [--vf-popup-height=18px] - `vf-select` pill (border box; its 1px
  *   hard shadow makes the sheet's 157×19 ink box)
@@ -19,7 +28,7 @@ import type { PropertyValues } from 'lit';
  *   / `vf-option` + `vf-menu-item` ✓ column (shared so the value doesn't shift
  *   on open)
  */
-export declare class VfOption extends LitElement {
+export declare class VfOption extends VfOption_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
@@ -47,3 +56,4 @@ declare global {
         'vf-option': VfOption;
     }
 }
+export {};