vintage-frames 0.1.0

package/dist/components/vf-select.js

@@ -0,0 +1,658 @@
+import { vfElement as e } from "../define.js";
+import { ScaleController as t, sys 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 { vfDisplay as a } from "../styles/recipes/display-face.js";
+import { vfBase as o } from "../styles/recipes/host.js";
+import { vfPanel as s } from "../styles/recipes/surface.js";
+import { vfFocusUnderline as c } from "../styles/recipes/focus.js";
+import { GridSnapController as l } from "../grid-snap.js";
+import { DocumentListenersController as u } from "../document-listeners.js";
+import { emit as d, emitNative as f } from "../events.js";
+import { runSelectionBlink as p } from "../motion.js";
+import { CARET_DOWN as m, CARET_UP as h, glyphSvg as g } from "../glyphs.js";
+import { VfShadowRoleControl as _ } from "../form-control.js";
+import { FocusRuleController as v } from "../focus-modality.js";
+import { VfOption as y } from "./vf-option.js";
+import { clampScroll as b, ensureVisibleScroll as x, firstPickableRow as S, lastPickableRow as C, layoutClampedPopup as w } from "../popup-overflow.js";
+import { TypeAheadBuffer as T } from "../type-ahead.js";
+import { css as E, html as D, nothing as O } from "lit";
+import { property as k, query as A, queryAssignedElements as j, state as M } from "lit/decorators.js";
+import { classMap as N } from "lit/directives/class-map.js";
+//#region src/components/vf-select.ts
+var P, F = class extends i(_) {
+	static {
+		P = this;
+	}
+	static {
+		this.ITEM_HEIGHT = 16;
+	}
+	static {
+		this.styles = [
+			o,
+			a,
+			s,
+			E`
+      :host {
+        /* A popup menu is sized to its widest option — never stretched to fill
+           its container. fit-content holds that intrinsic width even inside a
+           stretching flex/grid parent (align-items / justify-items: stretch act
+           only on auto sizes), while still shrinking if the container is genuinely
+           too narrow. Authors opt into filling via flex:1 / width / align-self. */
+        display: inline-block;
+        width: fit-content;
+      }
+      .control {
+        /* Also the anchor the focus rule below hangs from. */
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: calc(var(--vf-scale, 1) * 8px);
+        /* No intrinsic min-width: the control hugs the WIDEST option (via the
+           label sizer below). Authors wanting a floor set min-width on the host,
+           or grow it in their own layout (e.g. flex: 1). */
+        width: 100%;
+        /* 18px, not the 22px fields: the reference pill measures 156×18 plus
+           its 1px hard shadow (the 157×19 ink box on the sheet). */
+        height: calc(var(--vf-scale, 1) * var(--vf-popup-height, 18px));
+        /* Left inset = the checkmark gutter (--vf-select-gutter), so the selected
+           label sits at the SAME x it will occupy in the open list (where the ✓
+           fills that gutter). The right inset stays the small 8px. */
+        padding: 0 calc(var(--vf-scale, 1) * 8px) 0
+          calc(var(--vf-scale, 1) * var(--vf-select-gutter, 16px));
+        background: var(--vf-white, #fff);
+        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+        border-radius: 0;
+        box-shadow: calc(var(--vf-scale, 1) * 1px) calc(var(--vf-scale, 1) * 1px)
+          0 0 var(--vf-black, #000);
+        /* The press-drag gesture owns pointer moves while the button is held;
+           suppress the browser's own touch panning/scrolling so a touch drag
+           tracks the list instead of scrolling the page. */
+        touch-action: none;
+        cursor: var(--vf-cursor, default);
+      }
+      /* Keyboard focus is the kit's dashed rule under the pill, not a ring
+         around it (see vfFocusUnderline). It goes BELOW the whole box rather
+         than inside the face the way vf-button underlines its label: the pill
+         has one line and the label already shares it with the ▼.
+
+         The offset counts every row of ink below the pseudo-element's padding
+         box before the blank row and the rule itself — the 1px border, then
+         the 1px hard shadow: −(1 + 1 + 1 + 1). The ±1px sides widen it from
+         that same padding box to the border box, which is the shape the pill
+         reads as (the shadow is a depth cue, not part of the silhouette).
+
+         Gated on a class, not :focus-visible — the same problem the editable
+         fields have, arrived at from the other direction. The pill suppresses
+         the browser's own mouse focus (the press-drag gesture owns it) and
+         calls focus() itself: on pointerdown to open, and again when a release
+         closes the list. Blink reads a scripted focus as a visible one, so
+         :focus-visible is TRUE after a pure mouse round-trip through the menu,
+         where on a button it is false. FocusRuleController consults the page's
+         last input modality instead (see src/focus-modality.ts), and render()
+         holds the class off while the list is open — see there. */
+      .control:focus-visible {
+        outline: none;
+      }
+      .control.vf-focus-rule::after {
+        --vf-focus-underline-offset: -4px;
+        ${c}
+        left: calc(var(--vf-scale, 1) * -1px);
+        right: calc(var(--vf-scale, 1) * -1px);
+      }
+      /* The label is a 1×1 grid: the visible value and an invisible stack of
+         every option's text share the one cell, so the cell — and thus the
+         control and the open panel — is sized to the WIDEST option. The closed
+         pill and the open list are therefore always exactly the same width, and
+         the value never shifts as the selection changes. */
+      .label {
+        flex: 1 1 auto;
+        display: grid;
+        min-width: 0;
+        text-align: left;
+      }
+      .label > .value,
+      .label > .sizer {
+        grid-area: 1 / 1;
+        min-width: 0;
+        white-space: nowrap;
+      }
+      .value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      /* Sizer contributes width only: collapsed to zero height and clipped so it
+         never adds a row, but its widest line still drives the grid cell width. */
+      .sizer {
+        display: flex;
+        flex-direction: column;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+        pointer-events: none;
+      }
+      .arrow {
+        flex: none;
+        display: flex;
+        align-items: center;
+        /* Stays solid black even when disabled — only the label dims. */
+        color: var(--vf-black, #000);
+      }
+      .arrow svg {
+        display: block;
+        width: calc(var(--vf-scale, 1) * 11px);
+        height: calc(var(--vf-scale, 1) * 6px);
+      }
+      /* Disabled: only the value label dims; the box, hard shadow and ▼ arrow
+         stay solid black (System 7 dims the label, not the control). */
+      :host([disabled]) .label,
+      .control.disabled .label {
+        color: var(--vf-disabled, #c0c0c0);
+      }
+      .panel {
+        display: none;
+        position: fixed;
+        z-index: 10000;
+        margin: 0;
+        padding: 0;
+        /* Match the closed pill's 1px hard shadow — the shared .vf-panel recipe
+           defaults to the 2px menu shadow, which would overhang the pill's shadow
+           by 1px on the right and bottom. */
+        --vf-shadow-offset: 1px;
+        /* A CLIP, never a scroll surface: positionPanel gives the panel a whole
+           number of row slots and the rows are rolled by transform inside it.
+           System 7 put no scrollbar on a menu, and an un-quantized native scroll
+           would break the row lattice the pill overlay is built on. */
+        overflow: hidden;
+        /* The screen-edge reserve, resolved here and read back by
+           positionPanel: the clamp is JS geometry, so the tokens can't be spent
+           in a declaration, but their defaults and the cascade still belong in
+           the stylesheet with every other token. Authored (unscaled) system px,
+           like --vf-popup-height. Internal names — the knobs are
+           --vf-popup-inset-top / --vf-popup-inset-bottom. */
+        --vf-popup-clamp-top: var(--vf-popup-inset-top, 4px);
+        --vf-popup-clamp-bottom: var(--vf-popup-inset-bottom, 4px);
+      }
+      .panel.open {
+        display: block;
+      }
+      /* The rolling strip — a box for the options to ride, whose translateY
+         positionPanel and the arrow timer write. Transform rather than
+         scrollTop: both keep
+         getBoundingClientRect() truthful for hit-testing, but a transform can't
+         be hijacked — the browser will scroll an overflow:hidden box on its own
+         initiative (focus without preventScroll, find-in-page, an outside
+         scrollIntoView), and any un-quantized scroll lands the rows off the
+         lattice. The offset is a whole count of rows, and a row is a whole count
+         of device px by the layout contract, so rolled rows stay on the grid. */
+      .rows {
+        display: block;
+      }
+      /* An arrow OVERLAYS the edge slot — an opaque white row covering the item
+         beneath, which is the mechanism rather than a side effect: the row is
+         still there, still in the accessibility tree, just not pickable while
+         the arrow is on it. */
+      .arrow-slot {
+        display: none;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: calc(var(--vf-scale, 1) * (var(--vf-popup-height, 18px) - 2px));
+        background: var(--vf-white, #fff);
+        color: var(--vf-black, #000);
+        cursor: var(--vf-cursor, default);
+      }
+      .arrow-slot.shown {
+        display: block;
+      }
+      .arrow-slot.up {
+        top: 0;
+      }
+      .arrow-slot.down {
+        bottom: 0;
+      }
+      /* Pinned at whole offsets rather than centred, the way vf-option pins its
+         ✓ at 3,3. Traced from a real System 7 popup clipped at the screen edge
+         (Find File's criteria menu under Infinite Mac, 2×): the 11×6 triangle's
+         ink sits 13px in from the panel's content edge and 5px down its 16px row
+         — which is the row's exact vertical centre, and 5 is whole, so the
+         centring costs nothing. Whole px at every scale is the point; a glyph
+         centred in an odd-width panel would land on a half pixel and fringe. */
+      .arrow-slot svg {
+        position: absolute;
+        left: calc(var(--vf-scale, 1) * 13px);
+        top: calc(var(--vf-scale, 1) * 5px);
+        display: block;
+        width: calc(var(--vf-scale, 1) * 11px);
+        height: calc(var(--vf-scale, 1) * 6px);
+      }
+    `
+		];
+	}
+	get valueMissing() {
+		return this.value === "";
+	}
+	get valueMissingMessage() {
+		return "Please select an item in the list.";
+	}
+	get showUpArrow() {
+		return this.rowScroll > 0;
+	}
+	get showDownArrow() {
+		return this.rowScroll < this.optionItems.length - this.visibleSlots;
+	}
+	constructor() {
+		super(), this.value = "", this.name = "", this.label = "", this.open = !1, this.cachedOptions = [], this.scale = new t(this), this.gridSnap = new l(this), this.focusRule = new v(this), this.panelListeners = new u(this, () => [
+			[
+				document,
+				"pointerdown",
+				this.handleDocumentPointerDown,
+				!0
+			],
+			[
+				window,
+				"scroll",
+				this.handleWindowScroll,
+				!0
+			],
+			[
+				window,
+				"resize",
+				this.handleWindowResize
+			]
+		]), this.pressListeners = new u(this, () => [
+			[
+				document,
+				"pointermove",
+				this.handlePressPointerMove,
+				!0
+			],
+			[
+				document,
+				"pointerup",
+				this.handlePressPointerUp,
+				!0
+			],
+			[
+				document,
+				"pointercancel",
+				this.handlePressCancel,
+				!0
+			]
+		]), this.activeIndex = -1, this.rowScroll = 0, this.visibleSlots = 0, this.rowHeight = 0, this.arrowScroll = null, this.pressStartArrow = null, this.pressing = !1, this.pressOpenedPanel = !1, this.pressMoved = !1, this.pressStartOption = null, this.pressDownTime = 0, this.pressDownX = 0, this.pressDownY = 0, this.swallowClick = !1, this.blinking = !1, this.typeAhead = new T(), this.handleSlotChange = () => {
+			if (this.cachedOptions = this.assignedOptions ?? [], this.value === "") {
+				let e = this.optionItems.find((e) => !e.disabled);
+				e && (this.value = this.optionValue(e));
+			}
+			this.optionItems.length && this.latchFormDefault(this.value), this.applySelection();
+		}, this.handleArrowEnter = (e) => {
+			!this.open || this.blinking || this.pressing || this.hoverArrowAt(e.clientX, e.clientY);
+		}, this.handleArrowLeave = () => {
+			this.pressing || this.stopArrowScroll();
+		}, this.handleHostClick = (e) => {
+			if (this.isDisabled) return;
+			if (this.swallowClick) {
+				this.swallowClick = !1;
+				return;
+			}
+			if (this.blinking) return;
+			let t = this.optionFromEvent(e);
+			if (t) {
+				this.open && this.selectOption(t);
+				return;
+			}
+			this.open ? this.closePanel(!0) : (this.controlEl?.focus(), this.openPanel());
+		}, this.handleHostPointerDown = (e) => {
+			this.isDisabled || this.blinking || e.button > 0 || !e.isPrimary || (this.swallowClick = !0, this.pressing = !0, this.pressMoved = !1, this.pressStartOption = null, this.pressStartArrow = null, this.pressDownTime = e.timeStamp, this.pressDownX = e.clientX, this.pressDownY = e.clientY, this.pressOpenedPanel = !this.open, e.preventDefault(), this.pressListeners.attach(), this.pressOpenedPanel ? (this.controlEl?.focus(), this.openPanel().then(() => {
+				this.pressing && this.pressStartOption === null && (this.pressStartArrow = this.arrowZoneAtPoint(this.pressDownX, this.pressDownY), this.pressStartOption = this.optionAtPoint(this.pressDownX, this.pressDownY));
+			})) : (this.pressStartArrow = this.arrowZoneAtPoint(e.clientX, e.clientY), this.pressStartOption = this.optionAtPoint(e.clientX, e.clientY)));
+		}, this.handlePressPointerMove = (e) => {
+			if (!this.pressing) return;
+			e.preventDefault();
+			let t = this.arrowZoneAtPoint(e.clientX, e.clientY);
+			if (t) {
+				this.startArrowScroll(t === "up" ? -1 : 1), this.activeIndex !== -1 && this.clearActive();
+				return;
+			}
+			this.stopArrowScroll();
+			let n = this.optionAtPoint(e.clientX, e.clientY);
+			this.pressStartOption === null ? this.pressStartOption = n : !this.pressMoved && n !== this.pressStartOption && (this.pressMoved = !0), this.trackHighlight(n);
+		}, this.handlePressPointerUp = (e) => {
+			if (!this.pressing) return;
+			let t = this.arrowZoneAtPoint(e.clientX, e.clientY) ? null : this.optionAtPoint(e.clientX, e.clientY), n = this.pressStartArrow !== null, r = this.pressOpenedPanel, i = !this.pressMoved, a = e.timeStamp - this.pressDownTime < 200;
+			if (this.endPress(), n || r && i && a) {
+				this.hoverArrowAt(e.clientX, e.clientY);
+				return;
+			}
+			this.stopArrowScroll(), this.resolveRelease(t);
+		}, this.handlePressCancel = () => {
+			this.stopArrowScroll(), this.endPress();
+		}, this.handleHostKeyDown = (e) => {
+			if (!this.isDisabled) {
+				if (this.blinking) {
+					e.preventDefault();
+					return;
+				}
+				if (!this.open) {
+					(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), this.openPanel());
+					return;
+				}
+				switch (e.key) {
+					case "ArrowDown":
+						e.preventDefault(), this.moveActive(1);
+						break;
+					case "ArrowUp":
+						e.preventDefault(), this.moveActive(-1);
+						break;
+					case "Home": {
+						e.preventDefault();
+						let t = this.firstEnabledIndex();
+						t !== -1 && this.setActive(t);
+						break;
+					}
+					case "End": {
+						e.preventDefault();
+						let t = this.lastEnabledIndex();
+						t !== -1 && this.setActive(t);
+						break;
+					}
+					case "Enter":
+					case " ": {
+						e.preventDefault();
+						let t = this.optionItems[this.activeIndex];
+						t && this.selectOption(t);
+						break;
+					}
+					case "Escape":
+						e.preventDefault(), this.closePanel(!0);
+						break;
+					case "Tab":
+						this.closePanel(!1);
+						break;
+					default: {
+						if (e.key.length !== 1 || e.metaKey || e.ctrlKey || e.altKey) break;
+						e.preventDefault();
+						let t = this.typeAhead.feed(e.key, this.activeIndex, this.optionItems.map((e) => ({
+							text: e.textContent ?? "",
+							disabled: e.disabled
+						})));
+						t !== -1 && this.setActive(t);
+						break;
+					}
+				}
+			}
+		}, this.handleHostPointerOver = (e) => {
+			if (!this.open || this.blinking || this.pressing) return;
+			let t = this.optionFromEvent(e);
+			if (t && !t.disabled) {
+				let e = this.optionItems.indexOf(t);
+				e !== -1 && e !== this.activeIndex && this.setActive(e);
+			}
+		}, this.handleHostFocusOut = (e) => {
+			if (!this.open || this.blinking) return;
+			let t = e.relatedTarget;
+			t instanceof Node && (this.contains(t) || this.renderRoot.contains(t)) || this.closePanel(!1);
+		}, this.handleDocumentPointerDown = (e) => {
+			this.blinking || e.composedPath().includes(this) || this.closePanel(!1);
+		}, this.handleWindowScroll = () => {
+			this.blinking || this.closePanel(!1);
+		}, this.handleWindowResize = () => {
+			this.blinking || this.closePanel(!1);
+		}, this.addEventListener("pointerdown", this.handleHostPointerDown), this.addEventListener("click", this.handleHostClick), this.addEventListener("keydown", this.handleHostKeyDown), this.addEventListener("pointerover", this.handleHostPointerOver), this.addEventListener("focusout", this.handleHostFocusOut);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.cancelBlink(), this.stopArrowScroll(), this.clearActive(), this.endPress(), this.open = !1;
+	}
+	focus(e) {
+		this.controlEl?.focus(e);
+	}
+	updated(e) {
+		e.has("value") && this.applySelection(), (e.has("value") || e.has("disabled")) && this.syncFormValue(this.value), e.has("disabled") && this.disabled && this.open && this.closePanel(!1);
+	}
+	formDisabledCallback(e) {
+		super.formDisabledCallback(e), this.syncFormValue(this.value), e && this.open && this.closePanel(!1);
+	}
+	formResetCallback() {
+		this.value = this.formDefault("");
+	}
+	get optionItems() {
+		return this.cachedOptions;
+	}
+	optionValue(e) {
+		return e.value === "" ? (e.textContent ?? "").trim() : e.value;
+	}
+	applySelection() {
+		for (let e of this.optionItems) e.selected = this.optionValue(e) === this.value;
+	}
+	async openPanel() {
+		if (this.open || this.isDisabled) return;
+		this.open = !0, this.panelListeners.attach(), await this.updateComplete;
+		let e = this.optionItems.findIndex((e) => e.selected && !e.disabled);
+		e === -1 && (e = this.firstEnabledIndex()), this.positionPanel(Math.max(e, 0)), e !== -1 && this.setActive(e);
+	}
+	positionPanel(e) {
+		let t = this.controlEl, r = this.panelEl;
+		if (!t || !r) return;
+		let i = t.getBoundingClientRect(), a = this.optionItems[0]?.getBoundingClientRect()?.height || n(P.ITEM_HEIGHT, this), o = getComputedStyle(r), s = parseFloat(o.borderTopWidth) || 0, c = (e) => n(parseFloat(o.getPropertyValue(e)) || 0, this), l = w({
+			idealTop: i.top - e * a,
+			rowHeight: a,
+			border: s,
+			rowCount: this.optionItems.length,
+			viewTop: c("--vf-popup-clamp-top"),
+			viewBottom: window.innerHeight - c("--vf-popup-clamp-bottom")
+		}), u = i.left;
+		r.style.minWidth = `${i.width}px`, r.style.top = `${l.panelTop}px`, r.style.left = `${u}px`, r.style.height = `${l.panelHeight}px`, this.rowHeight = a, this.visibleSlots = l.visibleSlots, this.rowScroll = l.initialScroll, this.applyScroll();
+	}
+	closePanel(e) {
+		this.open && (this.open = !1, this.cancelBlink(), this.stopArrowScroll(), this.endPress(), this.clearActive(), this.typeAhead.reset(), this.panelListeners.detach(), e && this.controlEl?.focus());
+	}
+	applyScroll() {
+		let e = this.rowScroll * this.rowHeight;
+		this.rowsEl && (this.rowsEl.style.transform = e ? `translateY(${-e}px)` : ""), this.upArrowEl?.classList.toggle("shown", this.showUpArrow), this.downArrowEl?.classList.toggle("shown", this.showDownArrow);
+	}
+	revealRow(e) {
+		let t = x(e, this.rowScroll, this.optionItems.length, this.visibleSlots);
+		t !== this.rowScroll && (this.rowScroll = t, this.applyScroll());
+	}
+	stepArrowScroll(e) {
+		let t = b(this.rowScroll + e, this.rowScroll, this.optionItems.length, this.visibleSlots);
+		return t !== this.rowScroll && (this.rowScroll = t, this.applyScroll(), !0);
+	}
+	startArrowScroll(e) {
+		if (this.arrowScroll?.dir === e || (this.stopArrowScroll(), !this.stepArrowScroll(e))) return;
+		let t = window.setInterval(() => {
+			this.stepArrowScroll(e) || this.stopArrowScroll();
+		}, 66);
+		this.arrowScroll = {
+			dir: e,
+			timer: t
+		};
+	}
+	stopArrowScroll() {
+		this.arrowScroll &&= (window.clearInterval(this.arrowScroll.timer), null);
+	}
+	arrowZoneAtPoint(e, t) {
+		let n = this.panelEl;
+		if (!this.open || !n) return null;
+		let r = n.getBoundingClientRect();
+		if (e < r.left || e >= r.right) return null;
+		let i = (r.height - this.visibleSlots * this.rowHeight) / 2;
+		return this.showUpArrow && t < r.top + i + this.rowHeight ? "up" : this.showDownArrow && t >= r.bottom - i - this.rowHeight ? "down" : null;
+	}
+	arrowSlotAtPoint(e, t) {
+		let n = [["up", this.upArrowEl], ["down", this.downArrowEl]];
+		for (let [r, i] of n) {
+			if (!i || !i.classList.contains("shown")) continue;
+			let n = i.getBoundingClientRect();
+			if (e >= n.left && e < n.right && t >= n.top && t < n.bottom) return r;
+		}
+		return null;
+	}
+	hoverArrowAt(e, t) {
+		let n = this.arrowSlotAtPoint(e, t);
+		if (!n) {
+			this.stopArrowScroll();
+			return;
+		}
+		this.startArrowScroll(n === "up" ? -1 : 1), this.activeIndex !== -1 && this.clearActive();
+	}
+	setActive(e, t = !0) {
+		this.activeIndex = e, this.optionItems.forEach((t, n) => {
+			t.active = n === e;
+		}), this.revealRow(e), t && this.optionItems[e]?.focus({ preventScroll: !0 });
+	}
+	clearActive() {
+		this.activeIndex = -1;
+		for (let e of this.optionItems) e.active = !1;
+	}
+	moveActive(e) {
+		let t = this.optionItems, n = this.activeIndex;
+		for (let r = 0; r < t.length; r += 1) {
+			if (n += e, n < 0 || n >= t.length) return;
+			let r = t[n];
+			if (r && !r.disabled) {
+				this.setActive(n);
+				return;
+			}
+		}
+	}
+	firstEnabledIndex() {
+		return this.optionItems.findIndex((e) => !e.disabled);
+	}
+	lastEnabledIndex() {
+		let e = this.optionItems;
+		for (let t = e.length - 1; t >= 0; --t) {
+			let n = e[t];
+			if (n && !n.disabled) return t;
+		}
+		return -1;
+	}
+	selectOption(e) {
+		if (e.disabled || this.blinking) return;
+		let t = this.optionItems.indexOf(e);
+		this.setActive(t, !1), this.blinking = !0;
+		let n = p((t) => {
+			e.active = t;
+		}, () => {
+			this.commit(e);
+		});
+		this.blinking && (this.blinkHandle = n);
+	}
+	cancelBlink() {
+		this.blinkHandle?.cancel(), this.blinkHandle = void 0, this.blinking = !1;
+	}
+	commit(e) {
+		this.closePanel(!0);
+		let t = this.optionValue(e);
+		this.value = t, d(this, "vf-change", { value: t }), f(this, "input"), f(this, "change");
+	}
+	optionFromEvent(e) {
+		return e.composedPath().find((e) => e instanceof y);
+	}
+	endPress() {
+		this.pressing && (this.pressing = !1, this.pressStartOption = null, this.pressStartArrow = null, this.pressListeners.detach());
+	}
+	optionAtPoint(e, t) {
+		let n = this.panelEl;
+		if (!this.open || !n) return null;
+		let r = n.getBoundingClientRect();
+		if (e < r.left || e >= r.right || t < r.top || t >= r.bottom) return null;
+		let i = S(this.rowScroll), a = C(this.rowScroll, this.optionItems.length, this.visibleSlots);
+		for (let n = i; n <= a; n += 1) {
+			let r = this.optionItems[n];
+			if (!r) continue;
+			let i = r.getBoundingClientRect();
+			if (e >= i.left && e < i.right && t >= i.top && t < i.bottom) return r;
+		}
+		return null;
+	}
+	trackHighlight(e) {
+		if (e && !e.disabled) {
+			let t = this.optionItems.indexOf(e);
+			t !== -1 && t !== this.activeIndex && this.setActive(t, !1);
+		} else this.activeIndex !== -1 && this.clearActive();
+	}
+	resolveRelease(e) {
+		if (!e || e.disabled || this.optionValue(e) === this.value) {
+			this.closePanel(!0);
+			return;
+		}
+		this.selectOption(e);
+	}
+	render() {
+		let e = this.optionItems.find((e) => this.optionValue(e) === this.value), t = e ? (e.textContent ?? "").trim() : "", n = this.isDisabled;
+		return D`
+      <div
+        class=${N({
+			control: !0,
+			"vf-snap": !0,
+			"vf-focus-rule": this.focusRule.marked && !this.open,
+			disabled: n
+		})}
+        part="control"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-disabled=${n ? "true" : "false"}
+        aria-controls="listbox"
+        aria-label=${this.label || this.hostLabel || O}
+        aria-describedby=${this.describedBy}
+        aria-required=${this.required ? "true" : O}
+        aria-invalid=${this.validity.valid ? O : "true"}
+        tabindex=${n ? "-1" : "0"}
+      >
+        <span class="label" part="label">
+          <span class="value">${t}</span>
+          <span class="sizer" aria-hidden="true">
+            ${this.optionItems.map((e) => D`<span>${(e.textContent ?? "").trim()}</span>`)}
+          </span>
+        </span>
+        <span class="arrow" part="arrow" aria-hidden="true"
+          >${g(m, "caret")}</span
+        >
+      </div>
+      <div
+        id="listbox"
+        class="panel vf-panel ${this.open ? "open" : ""}"
+        part="panel"
+        role="listbox"
+        aria-label=${this.label || this.hostLabel || O}
+        aria-hidden=${this.open ? "false" : "true"}
+      >
+        <!-- role="presentation" so the strip that carries the roll doesn't
+             stand between the listbox and the options it owns. -->
+        <div class="rows" role="presentation">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <!-- Pointer affordances only, hence aria-hidden: the clipped options
+             stay in the accessibility tree un-hidden (clipping is presentation,
+             and a native <select> exposes its whole list too), and keyboard and
+             AT users reach every row with the arrows, Home/End and type-ahead. -->
+        <div
+          class="arrow-slot up"
+          part="scroll-arrow"
+          aria-hidden="true"
+          @pointerenter=${this.handleArrowEnter}
+          @pointermove=${this.handleArrowEnter}
+          @pointerleave=${this.handleArrowLeave}
+        >
+          ${g(h, "caret")}
+        </div>
+        <div
+          class="arrow-slot down"
+          part="scroll-arrow"
+          aria-hidden="true"
+          @pointerenter=${this.handleArrowEnter}
+          @pointermove=${this.handleArrowEnter}
+          @pointerleave=${this.handleArrowLeave}
+        >
+          ${g(m, "caret")}
+        </div>
+      </div>
+      ${this.renderDescription()}
+    `;
+	}
+};
+r([k()], F.prototype, "value", void 0), r([k({ reflect: !0 })], F.prototype, "name", void 0), r([k()], F.prototype, "label", void 0), r([M()], F.prototype, "open", void 0), r([A(".control")], F.prototype, "controlEl", void 0), r([A(".panel")], F.prototype, "panelEl", void 0), r([A(".rows")], F.prototype, "rowsEl", void 0), r([A(".arrow-slot.up")], F.prototype, "upArrowEl", void 0), r([A(".arrow-slot.down")], F.prototype, "downArrowEl", void 0), r([j({ selector: "vf-option" })], F.prototype, "assignedOptions", void 0), r([M()], F.prototype, "cachedOptions", void 0), F = P = r([e("vf-select")], F);
+//#endregion
+export { F as VfSelect };

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

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+declare const VfSeparator_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-separator>` — a 1px System 7 rule.
+ *
+ * Horizontal by default (1px tall, full width); set the `vertical` attribute
+ * for a 1px-wide vertical rule (give it a height, or let a flex parent
+ * stretch it).
+ *
+ * Containers may restyle it via custom properties:
+ * - `--vf-separator-color` — line color (default `var(--vf-black, #000)`).
+ * - `--vf-separator-style` — line style, e.g. `dotted` (default `solid`).
+ *   `vf-menu` sets these so slotted separators render as the classic dimmed
+ *   dotted menu rule (see Menus.png).
+ * @cssprop --vf-separator-color - `vf-separator` rule color — `vf-menu` sets it
+ *   to `--vf-disabled` for the dimmed menu rule
+ * @cssprop [--vf-separator-style=solid] - `vf-separator` rule style — `vf-menu`
+ *   sets `dotted` (see `Menus.png`)
+ */
+export declare class VfSeparator extends VfSeparator_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;
+    /** Render as a vertical rule (1px wide) instead of horizontal. */
+    vertical: boolean;
+    constructor();
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-separator': VfSeparator;
+    }
+}
+export {};