vintage-frames 0.1.0

package/dist/components/vf-radio.js

@@ -0,0 +1,135 @@
+import { vfElement as e } from "../define.js";
+import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as n } from "../position.js";
+import { vfDisplay as r } from "../styles/recipes/display-face.js";
+import { vfBase as i } from "../styles/recipes/host.js";
+import { vfFocusUnderline as a } from "../styles/recipes/focus.js";
+import { vfToggle as o } from "../styles/recipes/toggle.js";
+import { emit as s } from "../events.js";
+import { RADIO_DOT as c, RADIO_FACE as l, RADIO_RING as u, RADIO_RING_PRESSED as d } from "../glyphs.js";
+import { VfToggleControl as f } from "../toggle-control.js";
+import { LitElement as p, css as m, html as h } from "lit";
+import { property as g } from "lit/decorators.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+//#region src/components/vf-radio.ts
+var v = class extends n(f(p)) {
+	static {
+		this.styles = [
+			i,
+			r,
+			o,
+			m`
+      /* Keyboard focus underlines the circle itself — not the label, and not a
+         ring around either (see vfFocusUnderline). One blank row below the
+         well, which is where vf-checkbox puts its own: −2 rather than that
+         control's −3 only because this well is unbordered, so the two rules
+         land on the same row of a mixed list. The 12px sprite sits half a
+         pixel proud of the 13px well, so the gap reads as one row or two
+         depending on which way that rounds — the well is the anchor, not the
+         sprite. */
+      :host(:focus-visible) .circle::after {
+        --vf-focus-underline-offset: -2px;
+        ${a}
+        /* …and narrower than the well, because the shape above it is round:
+           a full-width rule reads as wider than the circle it marks. 9 of the
+           13px (5 dashes) is the closest to two thirds that still insets by a
+           whole 2px each side and keeps ink at both ends. */
+        left: calc(var(--vf-scale, 1) * 2px);
+        right: calc(var(--vf-scale, 1) * 2px);
+      }
+      .circle {
+        position: relative;
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(var(--vf-scale, 1) * 13px);
+        height: calc(var(--vf-scale, 1) * 13px);
+        color: var(--vf-black, #000);
+      }
+      /* Native 12×12 sprite centered in the 13×13 focus box; scales with the
+         circle, crispEdges keeps it whole-device-pixel at any dpr. */
+      .circle svg {
+        display: block;
+        width: calc(var(--vf-scale, 1) * 12px);
+        height: calc(var(--vf-scale, 1) * 12px);
+      }
+      /* White control face, black ring + dot — the ring path covers the
+         face's outer edge so no anti-aliasing shows. */
+      .face {
+        fill: var(--vf-white, #fff);
+      }
+      .ring,
+      .ring-pressed,
+      .dot {
+        fill: currentColor;
+      }
+      .ring-pressed,
+      .dot {
+        display: none;
+      }
+      :host([checked]) .dot {
+        display: inline;
+      }
+      /* Pressed: swap to the 2px-thick ring (classic press feedback). */
+      :host(:active) .circle:not(.dim) .ring {
+        display: none;
+      }
+      :host(:active) .circle:not(.dim) .ring-pressed {
+        display: inline;
+      }
+    `
+		];
+	}
+	constructor() {
+		super(), this.checked = !1, this.disabled = !1, this.value = "", this.groupDisabled = !1, this.internals = this.attachInternals(), this.internals.role = "radio";
+	}
+	get toggleInternals() {
+		return this.internals;
+	}
+	get toggleDisabled() {
+		return this.disabled || this.groupDisabled;
+	}
+	get externallyCoordinated() {
+		return !!this.closest("vf-radio-group");
+	}
+	render() {
+		let e = this.toggleDisabled;
+		return h`
+      <span
+        class=${_({
+			circle: !0,
+			dim: e,
+			"vf-snap": !0
+		})}
+        part="circle"
+        aria-hidden="true"
+      >
+        <svg viewBox="0 0 12 12" shape-rendering="crispEdges">
+          <path class="face" d=${l.d}></path>
+          <path class="ring" d=${u.d}></path>
+          <path class="ring-pressed" d=${d.d}></path>
+          <path class="dot" d=${c.d}></path>
+        </svg>
+      </span>
+      <span class=${_({
+			label: !0,
+			dim: e
+		})} part="label">
+        <slot></slot>
+      </span>
+    `;
+	}
+	activate() {
+		this.checked || (this.externallyCoordinated || (this.checked = !0), this.focus(), s(this, "vf-change", { value: this.value }));
+	}
+};
+t([g({
+	type: Boolean,
+	reflect: !0
+})], v.prototype, "checked", void 0), t([g({
+	type: Boolean,
+	reflect: !0
+})], v.prototype, "disabled", void 0), t([g()], v.prototype, "value", void 0), t([g({ attribute: !1 })], v.prototype, "groupDisabled", void 0), v = t([e("vf-radio")], v);
+//#endregion
+export { v as VfRadio };

package/dist/components/vf-scroll-area.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from 'lit';
+declare const VfScrollArea_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-scroll-area>` — a container whose scrollbars look like System 7.
+ *
+ * White box with a 1px black frame, an inner scrolling viewport, and scroll
+ * rails the kit draws itself as shadow DOM (the shared `vfScrollRail` recipe):
+ * boxed arrow buttons at each end, a loose 1-bit dot-dither trough, and the
+ * classic fixed 16px thumb. The native scrollbar is hidden, never the native
+ * scrolling — wheel, trackpad momentum, keyboard, touch and assistive-tech
+ * scrolling stay the platform's, and {@link ScrollRailController} keeps the
+ * rail in sync while driving the classic interactions (thumb drag, trough
+ * paging, arrow stepping with auto-repeat). Every engine renders the same
+ * rail — there is no Firefox fallback skin anymore.
+ *
+ * Each reserved scroll rail is a permanent placeholder: arrow buttons on an
+ * empty white channel sit in the gutter even when the content fits, the
+ * dither and thumb filling in only once that axis overflows (System 7 drew
+ * an active window's no-overflow bar as arrows on a bare channel; driven
+ * by {@link ScrollStateController}). Which rails are reserved is set by
+ * {@link axis}; when both are reserved the bottom-right corner joins them.
+ *
+ * Size the host (width/height) from the outside; the viewport fills it.
+ *
+ * @slot - Scrollable content.
+ * @csspart viewport - The inner scrolling container.
+ * @cssprop --vf-scrollbar-thumb - scrollbar thumb/elevator (white)
+ * @cssprop --vf-scrollbar-track - the scroll trough's base color under the
+ *   dot-dither (white)
+ */
+export declare class VfScrollArea extends VfScrollArea_base {
+    private readonly scale;
+    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    private readonly gridSnap;
+    /**
+     * Which scroll rails to reserve as permanent placeholders: `vertical`
+     * (default), `horizontal`, or `both`. Each reserved rail shows an empty white
+     * channel until its axis overflows; the unreserved axis still scrolls
+     * natively (wheel, keyboard) but draws no rail.
+     */
+    axis: 'vertical' | 'horizontal' | 'both';
+    /**
+     * Accessible name for the scrolling viewport, applied as its `aria-label`
+     * (an `aria-label` on the host would not reach into the shadow DOM). The
+     * viewport is keyboard-focusable while its content overflows, so without a
+     * name it is announced only as an anonymous scrollable group; setting
+     * `label` also promotes it to a named `role="region"` landmark. While
+     * `label` is empty the viewport is a plain `group` when scrollable (an
+     * unnamed region is inert) and role-less when not.
+     */
+    label: string;
+    private viewport;
+    private content;
+    /** Reports overflow per axis so the reserved rail(s) activate on overflow. */
+    private readonly scrollState;
+    /** Syncs the drawn rails to the viewport and drives their interactions. */
+    private readonly rail;
+    /** Whether the content actually overflows the viewport (either axis). */
+    private _scrollable;
+    /**
+     * Moves keyboard focus to the scrolling viewport — the focusable element
+     * lives inside the shadow root, where the platform's `focus()` can't reach
+     * (no `delegatesFocus`, no host tabindex), so `vf-label for` and consumer
+     * scripts silently no-opped on the host.
+     */
+    focus(options?: FocusOptions): void;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-scroll-area': VfScrollArea;
+    }
+}
+export {};

package/dist/components/vf-scroll-area.js

@@ -0,0 +1,124 @@
+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 { ScrollStateController as c } from "../scroll-state.js";
+import { ScrollRailController as l, renderScrollRail as u } from "../scroll-rail.js";
+import { LitElement as d, css as f, html as p, nothing as m } from "lit";
+import { property as h, query as g, state as _ } from "lit/decorators.js";
+//#region src/components/vf-scroll-area.ts
+var v = class extends r(d) {
+	constructor(...e) {
+		super(...e), this.scale = new t(this), this.gridSnap = new s(this), this.axis = "vertical", this.label = "", this.scrollState = new c(this, () => this.viewport, () => this.content, (e) => {
+			this._scrollable = e.x || e.y;
+		}), this.rail = new l(this, {
+			getScroll: () => this.viewport,
+			getContent: () => this.content
+		}), this._scrollable = !1;
+	}
+	focus(e) {
+		this.viewport?.focus(e);
+	}
+	static {
+		this.styles = [
+			i,
+			o,
+			f`
+      :host {
+        display: block;
+      }
+      /* The snapped wrapper: a real 1px frame (the rails' outer line is this
+         border), a grid that reserves each rail as its own edge column/row —
+         the rails size themselves to the 15px inside the frame — and the
+         scroller and rails riding the grid-snap offset as one. */
+      .box {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+        background: var(--vf-white, #fff);
+      }
+      :host(:not([axis])) .box,
+      :host([axis='vertical']) .box,
+      :host([axis='both']) .box {
+        grid-template-columns: 1fr auto;
+      }
+      :host([axis='horizontal']) .box,
+      :host([axis='both']) .box {
+        grid-template-rows: 1fr auto;
+      }
+      .viewport {
+        grid-area: 1 / 1;
+        background: var(--vf-white, #fff);
+        /* Native scrolling on every axis; the bar itself is hidden by the
+           recipe (.vf-scroll) and the reservation is the rail element, not a
+           native gutter. The unreserved axis still scrolls, railless.
+
+           8px inset plus border-floor compensation: engines floor the
+           fractional frame border to whole CSS px, and the mod() term is
+           exactly what they floored away — so slotted content (and the (0,0)
+           of placed children) sits exactly 9 system px from the frame box at
+           every scale, as it did under the borderless-scroller construction.
+           (mod is 0 at whole scales.) */
+        overflow: auto;
+        min-width: 0;
+        min-height: 0;
+        padding: calc(
+          var(--vf-scale, 1) * 8px + mod(var(--vf-scale, 1) * 1px, 1px)
+        );
+      }
+      .vf-rail--vertical {
+        grid-area: 1 / 2;
+      }
+      .vf-rail--horizontal {
+        grid-area: 2 / 1;
+      }
+      .vf-rail-corner {
+        grid-area: 2 / 2;
+      }
+      /* The positioning anchor for slotted children placed with top/left
+         (src/position.ts). It must be THIS wrapper and not .box: .content
+         rides the scroll, so positioned children travel with the content —
+         anchored to .box they would hang fixed over the rail while the plane
+         moved beneath them. Inside the viewport's 8px padding, so (0,0) is
+         where flow content starts. */
+      .content {
+        position: relative;
+      }
+      /* Focusable so keyboard users can scroll; inset ring to stay in-box. */
+      .viewport:focus-visible {
+        --vf-focus-offset: -2px;
+        ${a}
+      }
+    `
+		];
+	}
+	render() {
+		let e = this.axis !== "horizontal", t = this.axis === "horizontal" || this.axis === "both";
+		return p`
+      <div class="box vf-snap">
+        <div
+          class="viewport vf-scroll"
+          part="viewport"
+          tabindex=${this._scrollable ? "0" : m}
+          role=${this.label ? "region" : this._scrollable ? "group" : m}
+          aria-label=${this.label || m}
+        >
+          <div class="content"><slot></slot></div>
+        </div>
+        ${e ? u(this.rail, "vertical") : m}
+        ${t ? u(this.rail, "horizontal") : m}
+        ${e && t ? p`<div class="vf-rail-corner" aria-hidden="true"></div>` : m}
+      </div>
+    `;
+	}
+};
+n([h({ reflect: !0 })], v.prototype, "axis", void 0), n([h()], v.prototype, "label", void 0), n([g(".viewport")], v.prototype, "viewport", void 0), n([g(".content")], v.prototype, "content", void 0), n([_()], v.prototype, "_scrollable", void 0), v = n([e("vf-scroll-area")], v);
+//#endregion
+export { v as VfScrollArea };

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

@@ -0,0 +1,334 @@
+import type { PropertyValues } from 'lit';
+import { VfShadowRoleControl } from '../form-control.js';
+declare const VfSelect_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof VfShadowRoleControl;
+/**
+ * `<vf-select>` — the classic System 7 popup menu control ("Macintosh HD ▼").
+ *
+ * Children are `<vf-option>` elements in the default slot. The closed control
+ * is a white box with a 1px black border, the small 1px hard shadow, the
+ * selected option's label on the left and a solid black ▼ triangle on the
+ * right. The open panel uses the shared `.vf-panel` recipe and is positioned
+ * `position: fixed` (computed from `getBoundingClientRect()`) so it escapes
+ * clipping containers; when possible the currently-selected item opens
+ * directly over the control, like the real popup menu.
+ *
+ * Pointer — two interaction styles are supported and disambiguated by the
+ * gesture itself, resolved at the first pointer release:
+ *   - System 7 press-drag-release: press the pill (the list appears under the
+ *     pointer), drag onto an item, release over it to pick — one continuous
+ *     press. Releasing over the current item or off the list closes with no
+ *     change.
+ *   - Modern click-to-open: a quick in-place click (no drag, released within
+ *     {@link PRESS_HOLD_MS}) leaves the list open; a second, independent click
+ *     then picks an item.
+ * The two share one opening trigger (pointerdown) and diverge only on how the
+ * press ends — whether the pointer travelled to another item, and (for an
+ * in-place release) whether it was a quick tap or a held press. The pull-down
+ * menus drive themselves the same way, on the same threshold; that half lives
+ * in src/menu-press.ts, because one menu press may travel across a whole bar.
+ *
+ * A list too tall for the screen is **clipped**, never scrolled: the edge slot
+ * with items beyond it shows a solid arrow instead of a row, which rolls the
+ * list one row at a time while the pointer rests on it. The clamp is quantized
+ * to the pill lattice, so a clipped popup still opens with its selected row
+ * over the closed pill — and the panel keeps every slot the list asked for, so
+ * a box that had to slide to fit the screen opens with *blank rows* at whichever
+ * end the list no longer reaches: the exact travel it will roll through, in
+ * either direction. See src/popup-overflow.ts.
+ *
+ * Keyboard: Space/Enter/ArrowDown open; while open ArrowUp/ArrowDown move the
+ * highlight, Home/End jump, Enter/Space select, Escape cancels. Selecting an
+ * item plays the classic inversion blink (~250 ms) before closing. Keyboard
+ * focus is marked with the kit's 1px dashed rule under the closed pill
+ * (`vfFocusUnderline`) rather than a ring around it — keyboard only, which
+ * here means the page's input modality rather than `:focus-visible` (the pill
+ * drives its own focus, and Blink reads that as visible either way).
+ *
+ * Form-associated: submits `value` under `name`.
+ *
+ * @fires vf-change - After a selection commits. `detail: { value: string }`.
+ * @fires input - Native event, dispatched from the host per committed pick
+ *   (with `change`, the pair a native `<select>` fires). A programmatic
+ *   `value` set fires nothing.
+ * @fires change - Native event, dispatched from the host per committed pick
+ *   so form delegation and framework bindings hear it.
+ *
+ * @slot - `<vf-option>` elements.
+ *
+ * @csspart control - The closed popup control box.
+ * @csspart label - The selected-option label inside the control.
+ * @csspart arrow - The black ▼ triangle.
+ * @csspart panel - The popup panel (listbox).
+ * @csspart scroll-arrow - Either of the two scroll arrows a clipped panel shows
+ *   in its edge row slots.
+ * @cssprop [--vf-popup-height=18px] - `vf-select` pill (border box; its 1px
+ *   hard shadow makes the sheet's 157×19 ink box)
+ * @cssprop [--vf-popup-inset-top=4px] - room a clipped popup panel keeps clear
+ *   at the TOP screen edge — set it once on `:root` (or the `vf-desktop`) to
+ *   clear a `vf-menu-bar`: `24px` is the 20px bar plus the default 4
+ * @cssprop [--vf-popup-inset-bottom=4px] - room a clipped popup panel keeps
+ *   clear at the BOTTOM screen edge
+ * @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 VfSelect extends VfSelect_base {
+    /**
+     * Fallback height of one option row — the pill's *content* height
+     * (`--vf-popup-height` 18px minus its two 1px borders). Used to overlay the
+     * selected row's white cell exactly on the closed pill. `positionPanel`
+     * prefers the row's *rendered* height so a re-themed `--vf-popup-height`
+     * keeps the overlay aligned; this is the no-options fallback and must match
+     * `vf-option`'s default row height.
+     */
+    private static readonly ITEM_HEIGHT;
+    static styles: import("lit").CSSResult[];
+    /** Value of the selected option. Adopts the first enabled option if unset. */
+    value: string;
+    /** Form field name used when submitting the associated form. */
+    name: string;
+    /**
+     * Accessible name for the combobox control (`aria-label`). Left empty, the
+     * name falls back to whatever the host carries — `aria-labelledby`,
+     * `aria-label` or an associated `<label for>` — via
+     * {@link VfShadowRoleControl.hostLabel}; with neither, the control is announced by
+     * its contents, i.e. the selected value.
+     */
+    label: string;
+    /** No option committed — the state `required` calls a missing value. */
+    protected get valueMissing(): boolean;
+    /** The message a native `<select required>` reports. */
+    protected get valueMissingMessage(): string;
+    /** Whether the popup panel is open. */
+    private open;
+    private controlEl;
+    private panelEl;
+    private rowsEl;
+    private upArrowEl;
+    private downArrowEl;
+    private assignedOptions;
+    /**
+     * Assigned options, cached from the last slotchange. `render()` reads this
+     * reactive state (via {@link optionItems}) instead of the live query above,
+     * which is empty on the first paint — the source of the empty-label /
+     * zero-width-sizer flash.
+     */
+    private cachedOptions;
+    /** 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. */
+    private readonly gridSnap;
+    /**
+     * Whether the closed pill wears the kit's dashed focus rule — keyboard focus
+     * only, which this control can't read off `:focus-visible` (see the CSS).
+     */
+    private readonly focusRule;
+    /** While the panel is open: outside dismissal, and closing when a scroll or
+     *  resize would strand the fixed-position panel away from the pill. */
+    private readonly panelListeners;
+    /** While a press gesture is in flight: track it to its release anywhere. */
+    private readonly pressListeners;
+    /** Index of the highlighted option while the panel is open. */
+    private activeIndex;
+    /**
+     * Overflow state for the open panel, all three settled by
+     * {@link positionPanel} and only the scroll moving afterwards. `rowScroll` is
+     * how many rows the strip is rolled up past the panel's top edge, so slot `i`
+     * shows option `rowScroll + i` — and it deliberately leaves the range that
+     * would fill every slot, which is the reserved blank the list rolls through:
+     * negative for blank above, past `rowCount − visibleSlots` for blank below.
+     * See src/popup-overflow.ts. (Named for the rows and not just `scroll`
+     * because `HTMLElement.scroll()` already owns that word.)
+     */
+    private rowScroll;
+    /** Row slots the open panel was drawn with (`R`). */
+    private visibleSlots;
+    /** Measured height of one option row, CSS px — the roll's own step. */
+    private rowHeight;
+    /** Whether rows are hidden above / below what the panel shows. */
+    private get showUpArrow();
+    private get showDownArrow();
+    /**
+     * The one arrow-scroll timer, with the direction it is rolling. A single
+     * owner for both entry paths (a resting pointer, and a press-drag into the
+     * arrow's zone) so the two can't stack two intervals on one arrow.
+     */
+    private arrowScroll;
+    /** Set when a press *began* in an arrow zone — that press is not a pick. */
+    private pressStartArrow;
+    /**
+     * Pointer press-gesture state. A press starts on `pointerdown` and is
+     * resolved on the matching `pointerup`/`pointercancel`; see the class doc.
+     */
+    private pressing;
+    /** True when *this* press is the one that opened the panel. */
+    private pressOpenedPanel;
+    /** Set once the pointer leaves the option it pressed on (a drag-pick). */
+    private pressMoved;
+    /** The option the press started over — origin for {@link pressMoved}. */
+    private pressStartOption;
+    /** `event.timeStamp` of the opening pointerdown (for the hold threshold). */
+    private pressDownTime;
+    private pressDownX;
+    private pressDownY;
+    /**
+     * Swallows the one `click` the browser synthesises after a pointer press
+     * (pointerdown+pointerup), so the pointer handlers — not
+     * {@link handleHostClick} — own mouse/touch input. A `click` with no
+     * preceding pointerdown (keyboard / assistive-tech activation) still reaches
+     * the click handler.
+     */
+    private swallowClick;
+    /** True while the classic selection blink is playing (input is ignored). */
+    private blinking;
+    private blinkHandle;
+    /** First-letter type-ahead over the open list; see src/type-ahead.ts. */
+    private readonly typeAhead;
+    constructor();
+    disconnectedCallback(): void;
+    /** Focuses the popup control. */
+    focus(options?: FocusOptions): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /**
+     * Form-associated lifecycle: also re-syncs the form value immediately (the
+     * gated `updated()` doesn't run on a `formDisabled` change) and closes an open
+     * panel when an ancestor `<fieldset disabled>` disables us.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /** Restores the initial value when the associated form resets. */
+    formResetCallback(): void;
+    private get optionItems();
+    /** Resolved value of an option (falls back to its text, like `<option>`). */
+    private optionValue;
+    /** Marks the option matching `value` as selected. */
+    private applySelection;
+    private handleSlotChange;
+    private openPanel;
+    /**
+     * Positions the fixed-position panel so the selected item sits directly over
+     * the closed control (classic popup behavior), clipped to the usable screen
+     * band at a whole number of row slots.
+     */
+    private positionPanel;
+    private closePanel;
+    /**
+     * Writes the current scroll state to the panel: the strip's offset, and which
+     * arrows are showing. Both are imperative rather than rendered — an arrow
+     * step has to be visible to the very next hit-test in a drag, and nothing
+     * else re-renders this component while the panel is open.
+     */
+    private applyScroll;
+    /** Rolls the list so row `index` sits in a pickable slot (no-op if it does). */
+    private revealRow;
+    /** One row toward `dir`; returns false at the bound (nothing left to roll). */
+    private stepArrowScroll;
+    /**
+     * Starts rolling the list while the pointer holds an arrow. Steps once
+     * immediately — a brief touch of the arrow must do *something* — then once
+     * per {@link MENU_SCROLL_INTERVAL_MS} until the bound or {@link
+     * stopArrowScroll}. Idempotent per direction, so the hover path and the
+     * press-drag path can both claim the same arrow without stacking timers.
+     */
+    private startArrowScroll;
+    private stopArrowScroll;
+    /**
+     * Which arrow's zone the viewport point falls in, for the press-drag path.
+     *
+     * The zone is the arrow's row **extended past the panel edge** in its own
+     * direction — the classic ergonomics of slamming the pointer to the screen
+     * edge to keep a menu scrolling. Hover entry doesn't use this (it rides
+     * `pointerenter` on the slot itself); a pointer that has left the panel
+     * entirely is only scrolling because a press is dragging it there.
+     */
+    private arrowZoneAtPoint;
+    /**
+     * Which arrow *slot* the point is inside — the drawn row itself, with none of
+     * {@link arrowZoneAtPoint}'s reach past the panel edge. This is the plain
+     * "is the pointer on the arrow" question the hover contract asks.
+     */
+    private arrowSlotAtPoint;
+    /** Apply the hover contract at a point: on an arrow it rolls, off one it stops. */
+    private hoverArrowAt;
+    /**
+     * `pointerenter` **and** `pointermove` on the slots: a pointer that was
+     * already still where the arrow appeared never gets an enter event, and it
+     * is exactly the pointer most likely to be there — an arrow shows up under
+     * the very click that opened the panel whenever the pill sits near a screen
+     * edge. `pointerup` covers the wholly motionless case (see
+     * {@link handlePressPointerUp}); this covers the first twitch after it.
+     */
+    private handleArrowEnter;
+    private handleArrowLeave;
+    private setActive;
+    private clearActive;
+    /** Moves the highlight by `delta`, skipping disabled options. No wrap. */
+    private moveActive;
+    private firstEnabledIndex;
+    private lastEnabledIndex;
+    /** Plays the classic selection blink, then commits and closes. */
+    private selectOption;
+    private cancelBlink;
+    private commit;
+    private optionFromEvent;
+    /**
+     * `click` handler for *synthesised* activation — keyboard/assistive-tech
+     * clicks that arrive with no preceding pointerdown. Real mouse/touch clicks
+     * are swallowed here (their {@link swallowClick} flag was set on pointerdown)
+     * because the pointer handlers already resolved the gesture.
+     */
+    private handleHostClick;
+    /**
+     * Starts a press: opens the list if closed, then tracks the press to its
+     * release. Both interaction styles begin here; the gesture is classified in
+     * {@link handlePressPointerUp}.
+     */
+    private handleHostPointerDown;
+    private handlePressPointerMove;
+    private handlePressPointerUp;
+    private handlePressCancel;
+    private endPress;
+    /**
+     * The option whose row currently contains the viewport point, if any.
+     *
+     * Two guards keep a clipped panel honest. The point must be inside the
+     * panel's own box — rows rolled out of view keep truthful rects *outside* the
+     * clip, so without this a drag above the panel would highlight a hidden row.
+     * And only the pickable range is searched: a row lying under a shown arrow is
+     * covered, and covered is not clickable.
+     */
+    private optionAtPoint;
+    /** Live highlight during a press-drag; never moves DOM focus off the control. */
+    private trackHighlight;
+    /**
+     * Resolves a press that ended as a pick/dismiss (not a click-to-open): commit
+     * a different, enabled option (with the blink); otherwise close with no change
+     * — released on the current item, a disabled item, or off the list (the
+     * classic "release outside" cancel).
+     */
+    private resolveRelease;
+    private handleHostKeyDown;
+    private handleHostPointerOver;
+    private handleHostFocusOut;
+    private handleDocumentPointerDown;
+    /**
+     * Any scroll strands a `position: fixed` panel away from the pill it was
+     * placed against, so the popup closes. That now includes a scroll of the
+     * panel itself: it is a clip, not a scroll surface, and nothing in the
+     * component ever scrolls it — but an `overflow: hidden` box is still
+     * programmatically scrollable, and a browser that decides to scroll one
+     * (find-in-page, an outside `scrollIntoView`) would slide the rows off the
+     * lattice. Closing is the safe read of a scroll that can't legitimately
+     * happen.
+     */
+    private handleWindowScroll;
+    /** Close on viewport resize: the fixed panel was placed from the control's
+     *  rect when it opened and would otherwise drift out of alignment. */
+    private handleWindowResize;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-select': VfSelect;
+    }
+}
+export {};