vintage-frames 0.3.0 → 0.5.0

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

@@ -1,11 +1,11 @@
-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 { 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 { deferActivation as e, emit as t } from "../events.js";
+import { vfElement as n } from "../define.js";
+import { ScaleController as r } from "../scale.js";
+import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as a } from "../position.js";
+import { vfDisplay as o } from "../styles/recipes/display-face.js";
+import { vfBase as s } from "../styles/recipes/host.js";
+import { releaseAfterGesture as c } from "../document-listeners.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";
@@ -37,11 +37,11 @@ function x(e, t) {
 	let a = r.Meta ? e.metaKey || e.ctrlKey : !e.metaKey, o = r.Control ? e.ctrlKey : r.Meta || !e.ctrlKey;
 	return a && o && e.altKey === r.Alt && e.shiftKey === r.Shift && e.key.toLowerCase() === i.toLowerCase();
 }
-var S = class extends r(f) {
+var S = class extends a(f) {
 	static {
 		this.styles = [
-			a,
-			i,
+			s,
+			o,
 			p`
       :host {
         display: block;
@@ -174,8 +174,8 @@ var S = class extends r(f) {
 	#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.#d = (e) => {
-			e.defaultPrevented || e.isComposing || this.disabled || !this.shortcut || this.closest("vf-menu[shortcuts], vf-menu-bar[shortcuts]") && x(e, this.shortcut) && (e.preventDefault(), !(e.repeat || this.#t) && (c(this, "vf-menu-flash-request", { item: this }, { composed: !1 }), this.activate()));
+		super(), this.scale = new r(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.#d = (e) => {
+			e.defaultPrevented || e.isComposing || this.disabled || !this.shortcut || this.closest("vf-menu[shortcuts], vf-menu-bar[shortcuts]") && x(e, this.shortcut) && (e.preventDefault(), !(e.repeat || this.#t) && (t(this, "vf-menu-flash-request", { item: this }, { composed: !1 }), this.activate()));
 		}, this.addEventListener("keydown", this.#u), this.addEventListener("pointerdown", this.#c), this.addEventListener("click", this.#l);
 	}
 	get #a() {
@@ -216,16 +216,16 @@ var S = class extends r(f) {
     `;
 	}
 	#c() {
-		this.#i = this.closest("vf-menu") !== null, this.#i && o(() => {
+		this.#i = this.closest("vf-menu") !== null, this.#i && c(() => {
 			this.#i = !1;
 		});
 	}
-	#l(e) {
+	#l(t) {
 		if (this.#i) {
 			this.#i = !1;
 			return;
 		}
-		s(this, e, () => this.activate());
+		e(this, t, () => this.activate());
 	}
 	#u(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), this.activate());
@@ -246,26 +246,26 @@ var S = class extends r(f) {
 	}
 	#p() {
 		let e = this.value ?? (this.textContent ?? "").trim();
-		c(this, "vf-menu-select", {
+		t(this, "vf-menu-select", {
 			value: e,
 			item: this
 		});
-		let t = this.closest("vf-menu");
-		(!t || t.hasAttribute("open")) && c(this, "vf-menu-close-request", { item: this }, { composed: !1 });
+		let n = this.closest("vf-menu");
+		(!n || n.hasAttribute("open")) && t(this, "vf-menu-close-request", { item: this }, { composed: !1 });
 	}
 };
-n([g({
+i([g({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "disabled", void 0), n([g({
+})], S.prototype, "disabled", void 0), i([g({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "checked", void 0), n([g({
+})], S.prototype, "checked", void 0), i([g({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "active", void 0), n([g({
+})], S.prototype, "active", void 0), i([g({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "checkable", void 0), n([g()], S.prototype, "shortcut", void 0), n([g()], S.prototype, "value", void 0), n([_()], S.prototype, "_blinkPhase", void 0), S = n([e("vf-menu-item")], S);
+})], S.prototype, "checkable", void 0), i([g()], S.prototype, "shortcut", void 0), i([g()], S.prototype, "value", void 0), i([_()], S.prototype, "_blinkPhase", void 0), S = i([n("vf-menu-item")], S);
 //#endregion
 export { S as VfMenuItem };

package/dist/components/vf-menu.js

@@ -1,14 +1,14 @@
-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 { 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 { deferActivation as e, emit as t } from "../events.js";
+import { vfElement as n } from "../define.js";
+import { ScaleController as r } from "../scale.js";
+import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as a } from "../position.js";
+import { vfDisplay as o } from "../styles/recipes/display-face.js";
+import { vfBase as s } from "../styles/recipes/host.js";
+import { vfPanel as c } from "../styles/recipes/surface.js";
+import { vfFocusUnderline as l } from "../styles/recipes/focus.js";
+import { GridSnapController as u } from "../grid-snap.js";
+import { DocumentListenersController as d, releaseAfterGesture as f } from "../document-listeners.js";
 import { runSelectionBlink as p } from "../motion.js";
 import { FocusRuleController as m } from "../focus-modality.js";
 import { TypeAheadBuffer as h } from "../type-ahead.js";
@@ -16,9 +16,9 @@ import { MenuPressController as g } from "../menu-press.js";
 import { LitElement as _, css as v, html as y, nothing as b } from "lit";
 import { property as x, query as S, queryAssignedElements as C, state as w } from "lit/decorators.js";
 //#region src/components/vf-menu.ts
-var T = class extends r(_) {
+var T = class extends a(_) {
 	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new c(this), this.#e = new m(this), this.label = "", this.open = !1, this.shortcuts = !1, this.barTabIndex = 0, this.#t = new g(this, {
+		super(...e), this.scale = new r(this), this.gridSnap = new u(this), this.#e = new m(this), this.label = "", this.open = !1, this.shortcuts = !1, this.barTabIndex = 0, this.#t = new g(this, {
 			menus: () => [this],
 			open: (e) => {
 				e.open = !0;
@@ -66,7 +66,7 @@ var T = class extends r(_) {
 					break;
 				}
 			}
-		}, this.#p = new l(this, () => [[
+		}, this.#p = new d(this, () => [[
 			document,
 			"pointerdown",
 			this.#u,
@@ -86,9 +86,9 @@ var T = class extends r(_) {
 	}
 	static {
 		this.styles = [
-			a,
-			i,
+			s,
 			o,
+			c,
 			v`
       :host {
         display: inline-block;
@@ -181,7 +181,7 @@ var T = class extends r(_) {
       }
       :host(:not([open])) .label.vf-focus-rule .title::after {
         --vf-focus-underline-offset: -2px;
-        ${s}
+        ${l}
       }
       .panel {
         position: absolute;
@@ -319,25 +319,25 @@ var T = class extends r(_) {
 			this.open = !this.open;
 			return;
 		}
-		f(this, "vf-menu-toggle-request", { menu: this }, {
+		t(this, "vf-menu-toggle-request", { menu: this }, {
 			cancelable: !0,
 			composed: !1
 		}) && (this.open = !this.open);
 	}
 	#v() {
-		this.#a = !0, u(() => {
+		this.#a = !0, f(() => {
 			this.#a = !1;
 		});
 	}
-	#y(e) {
+	#y(t) {
 		if (this.#a) {
 			this.#a = !1;
 			return;
 		}
-		d(this, e, () => this.#_());
+		e(this, t, () => this.#_());
 	}
 	#b() {
-		f(this, "vf-menu-hover", { menu: this }, { composed: !1 });
+		t(this, "vf-menu-hover", { menu: this }, { composed: !1 });
 	}
 	#x(e) {
 		if (e.key === "Enter" || e.key === " ") {
@@ -350,18 +350,18 @@ var T = class extends r(_) {
 		await this.updateComplete, this.items[0]?.focus();
 	}
 };
-n([x()], T.prototype, "label", void 0), n([x({
+i([x()], T.prototype, "label", void 0), i([x({
 	type: Boolean,
 	reflect: !0
-})], T.prototype, "open", void 0), n([x({
+})], T.prototype, "open", void 0), i([x({
 	type: Boolean,
 	reflect: !0
-})], T.prototype, "shortcuts", void 0), n([x({
+})], T.prototype, "shortcuts", void 0), i([x({
 	type: Number,
 	attribute: !1
-})], T.prototype, "barTabIndex", void 0), n([S(".label")], T.prototype, "_labelEl", void 0), n([C({
+})], T.prototype, "barTabIndex", void 0), i([S(".label")], T.prototype, "_labelEl", void 0), i([C({
 	selector: "vf-menu-item",
 	flatten: !0
-})], T.prototype, "_assignedItems", void 0), n([w()], T.prototype, "_flashOn", void 0), T = n([e("vf-menu")], T);
+})], T.prototype, "_assignedItems", void 0), i([w()], T.prototype, "_flashOn", void 0), T = i([n("vf-menu")], T);
 //#endregion
 export { T as VfMenu };

package/dist/components/vf-number-field.js

@@ -1,9 +1,9 @@
-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 { vfBase as r } from "../styles/recipes/host.js";
-import { vfField as i } from "../styles/recipes/field.js";
-import { emitNative as a } from "../events.js";
+import { emitNative as e } from "../events.js";
+import { vfElement as t } from "../define.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 { vfField as a } from "../styles/recipes/field.js";
 import { STEPPER as o, STEPPER_DOWN_FILL as s, STEPPER_UP_FILL as c } from "../glyphs.js";
 import { VfTextControlBase as l } from "../text-control.js";
 import { decimalsOf as u } from "../number.js";
@@ -12,9 +12,9 @@ import { property as m, query as h, state as g } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 import { live as v } from "lit/directives/live.js";
 //#region src/components/vf-number-field.ts
-var y = class extends n(l) {
-	constructor(...e) {
-		super(...e), this.step = 1, this.pressed = null, this.#l = (e) => {
+var y = class extends r(l) {
+	constructor(...t) {
+		super(...t), this.step = 1, this.pressed = null, this.#l = (e) => {
 			if (this.isDisabled || this.readonly) return;
 			let t = e.currentTarget.classList.contains("up") ? 1 : -1;
 			e.preventDefault();
@@ -46,15 +46,15 @@ var y = class extends n(l) {
 			}
 		}, this.#f = (e) => {
 			this.value = e.target.value, this.#o("vf-input");
-		}, this.#p = (e) => {
-			let t = e.target.value, n = parseFloat(t);
-			this.value = Number.isNaN(n) ? t : String(Number(this.#r(n).toFixed(u(this.step)))), this.#o("vf-change"), a(this, "change");
+		}, this.#p = (t) => {
+			let n = t.target.value, r = parseFloat(n);
+			this.value = Number.isNaN(r) ? n : String(Number(this.#r(r).toFixed(u(this.step)))), this.#o("vf-change"), e(this, "change");
 		};
 	}
 	static {
 		this.styles = [
-			r,
 			i,
+			a,
 			d`
       :host {
         display: inline-flex;
@@ -151,9 +151,9 @@ var y = class extends n(l) {
 	#r(e) {
 		return this.min != null && e < this.min ? this.min : this.max != null && e > this.max ? this.max : e;
 	}
-	#i(e) {
-		let t = String(Number(this.#r(e).toFixed(u(this.step))));
-		t !== this.value && (this.value = t, this.#o("vf-change"), a(this, "input"), a(this, "change"));
+	#i(t) {
+		let n = String(Number(this.#r(t).toFixed(u(this.step))));
+		n !== this.value && (this.value = n, this.#o("vf-change"), e(this, "input"), e(this, "change"));
 	}
 	#a(e) {
 		if (this.isDisabled || this.readonly) return;
@@ -243,6 +243,6 @@ var y = class extends n(l) {
     `;
 	}
 };
-t([m({ type: Number })], y.prototype, "min", void 0), t([m({ type: Number })], y.prototype, "max", void 0), t([m({ type: Number })], y.prototype, "step", void 0), t([g()], y.prototype, "pressed", void 0), t([h("input")], y.prototype, "input", void 0), y = t([e("vf-number-field")], y);
+n([m({ type: Number })], y.prototype, "min", void 0), n([m({ type: Number })], y.prototype, "max", void 0), n([m({ type: Number })], y.prototype, "step", void 0), n([g()], y.prototype, "pressed", void 0), n([h("input")], y.prototype, "input", void 0), y = n([t("vf-number-field")], y);
 //#endregion
 export { y as VfNumberField };

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

@@ -5,8 +5,8 @@ import { VfPositioned as o } from "../position.js";
 import { vfBase as s } from "../styles/recipes/host.js";
 import { tileImage as c, tileRects as l, tileSpan as u, vfTileMaskSize as d } from "../styles/recipes/tile.js";
 import { TileRasterCache as f, patternOverride as p, tileGrid as m, vfTileGrid as h } from "../tile-grid.js";
-import { GridSnapController as g } from "../grid-snap.js";
-import { TrackWidthController as _ } from "../track-width.js";
+import { TrackWidthController as g } from "../track-width.js";
+import { GridSnapController as _ } from "../grid-snap.js";
 import { LitElement as v, css as y, html as b, unsafeCSS as x } from "lit";
 import { property as S, query as C } from "lit/decorators.js";
 //#region src/components/vf-progress-bar.ts
@@ -220,7 +220,7 @@ var w = 12, T = [
 	#e;
 	#t;
 	constructor() {
-		super(), this.scale = new t(this), this.gridSnap = new g(this), this.value = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.trackSize = new _(this, () => this.track), this._pattern = "", this.#e = new f(), this.#t = this.attachInternals(), this.#t.role = "progressbar", this.#t.ariaValueMin = "0";
+		super(), this.scale = new t(this), this.gridSnap = new _(this), this.value = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.trackSize = new g(this, () => this.track), this._pattern = "", this.#e = new f(), this.#t = this.attachInternals(), this.#t.role = "progressbar", this.#t.ariaValueMin = "0";
 	}
 	get effectiveMax() {
 		return this.max > 0 ? this.max : 100;

package/dist/components/vf-radio-group.js

@@ -1,17 +1,17 @@
-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 { emit as a, emitNative as o } from "../events.js";
+import { emit as e, emitNative as t } from "../events.js";
+import { vfElement as n } from "../define.js";
+import { ScaleController as r } from "../scale.js";
+import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as a } from "../position.js";
+import { vfBase as o } from "../styles/recipes/host.js";
 import { VfFormControl as s } from "../form-control.js";
 import { VfRadio as c } from "./vf-radio.js";
 import { css as l, html as u } from "lit";
 import { property as d } from "lit/decorators.js";
 //#region src/components/vf-radio-group.ts
-var f = class extends r(s) {
+var f = class extends a(s) {
 	static {
-		this.styles = [i, l`
+		this.styles = [o, l`
       :host {
         display: block;
       }
@@ -30,7 +30,7 @@ var f = class extends r(s) {
 		return "Please select one of these options.";
 	}
 	constructor() {
-		super(), this.value = "", this.name = "", this.label = "", this.scale = new t(this), this.mutationObserver = null, this.syncedKey = null, this.handleRadioChange = (e) => {
+		super(), this.value = "", this.name = "", this.label = "", this.scale = new r(this), this.mutationObserver = null, this.syncedKey = null, this.handleRadioChange = (e) => {
 			let t = e.target;
 			t === this || !(t instanceof c) || t.closest("vf-radio-group") === this && (this.isDisabled || t.disabled || this.selectRadio(t, !1));
 		}, this.handleKeydown = (e) => {
@@ -90,9 +90,9 @@ var f = class extends r(s) {
 	focus(e) {
 		this.radios.find((e) => e.tabIndex === 0)?.focus(e);
 	}
-	selectRadio(e, t) {
-		let n = this.value !== e.value;
-		this.value = e.value, this.syncRadios(), t && e.focus(), n && (a(this, "vf-change", { value: this.value }), o(this, "input"), o(this, "change"));
+	selectRadio(n, r) {
+		let i = this.value !== n.value;
+		this.value = n.value, this.syncRadios(), r && n.focus(), i && (e(this, "vf-change", { value: this.value }), t(this, "input"), t(this, "change"));
 	}
 	adoptPreChecked() {
 		if (this.value !== "") return;
@@ -100,6 +100,6 @@ var f = class extends r(s) {
 		e && e.value !== "" && (this.value = e.value, this.latchFormDefault(this.value));
 	}
 };
-n([d()], f.prototype, "value", void 0), n([d({ reflect: !0 })], f.prototype, "name", void 0), n([d()], f.prototype, "label", void 0), f = n([e("vf-radio-group")], f);
+i([d()], f.prototype, "value", void 0), i([d({ reflect: !0 })], f.prototype, "name", void 0), i([d()], f.prototype, "label", void 0), f = i([n("vf-radio-group")], f);
 //#endregion
 export { f as VfRadioGroup };

package/dist/components/vf-radio.js

@@ -1,23 +1,23 @@
-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 { emit as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.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 { vfFocusUnderline as o } from "../styles/recipes/focus.js";
+import { vfToggle as s } from "../styles/recipes/toggle.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, state as _ } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
 //#region src/components/vf-radio.ts
-var y = class extends n(f(p)) {
+var y = class extends r(f(p)) {
 	static {
 		this.styles = [
+			a,
 			i,
-			r,
-			o,
+			s,
 			m`
       /* Keyboard focus underlines the circle itself — not the label, and not a
          ring around either (see vfFocusUnderline). One blank row below the
@@ -29,7 +29,7 @@ var y = class extends n(f(p)) {
          sprite. */
       :host(:focus-visible) .circle::after {
         --vf-focus-underline-offset: -2px;
-        ${a}
+        ${o}
         /* …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
@@ -126,15 +126,15 @@ var y = class extends n(f(p)) {
 		this._hasLabel = t.assignedNodes({ flatten: !0 }).some((e) => e.nodeType === Node.ELEMENT_NODE || !!e.textContent?.trim());
 	}
 	activate() {
-		this.checked || (this.externallyCoordinated || (this.checked = !0), this.focus(), s(this, "vf-change", { value: this.value }));
+		this.checked || (this.externallyCoordinated || (this.checked = !0), this.focus(), e(this, "vf-change", { value: this.value }));
 	}
 };
-t([g({
+n([g({
 	type: Boolean,
 	reflect: !0
-})], y.prototype, "checked", void 0), t([g({
+})], y.prototype, "checked", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], y.prototype, "disabled", void 0), t([g()], y.prototype, "value", void 0), t([g({ attribute: !1 })], y.prototype, "groupDisabled", void 0), t([_()], y.prototype, "_hasLabel", void 0), y = t([e("vf-radio")], y);
+})], y.prototype, "disabled", void 0), n([g()], y.prototype, "value", void 0), n([g({ attribute: !1 })], y.prototype, "groupDisabled", void 0), n([_()], y.prototype, "_hasLabel", void 0), y = n([t("vf-radio")], y);
 //#endregion
 export { y as VfRadio };

package/dist/components/vf-select.js

@@ -1,14 +1,14 @@
-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 { emit as e, emitNative as t } from "../events.js";
+import { vfElement as n } from "../define.js";
+import { ScaleController as r, sys as i } from "../scale.js";
+import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as o } from "../position.js";
+import { vfDisplay as s } from "../styles/recipes/display-face.js";
+import { vfBase as c } from "../styles/recipes/host.js";
+import { vfPanel as l } from "../styles/recipes/surface.js";
+import { vfFocusUnderline as u } from "../styles/recipes/focus.js";
+import { GridSnapController as d } from "../grid-snap.js";
+import { DocumentListenersController as f } from "../document-listeners.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";
@@ -20,7 +20,7 @@ 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(_) {
+var P, F = class extends o(_) {
 	static {
 		P = this;
 	}
@@ -29,9 +29,9 @@ var P, F = class extends i(_) {
 	}
 	static {
 		this.styles = [
-			o,
-			a,
+			c,
 			s,
+			l,
 			E`
       :host {
         /* A popup menu is sized to its widest option — never stretched to fill
@@ -96,7 +96,7 @@ var P, F = class extends i(_) {
       }
       .control.vf-focus-rule::after {
         --vf-focus-underline-offset: -4px;
-        ${c}
+        ${u}
         left: calc(var(--vf-scale, 1) * -1px);
         right: calc(var(--vf-scale, 1) * -1px);
       }
@@ -242,7 +242,7 @@ var P, F = class extends i(_) {
 		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, () => [
+		super(), this.value = "", this.name = "", this.label = "", this.open = !1, this.cachedOptions = [], this.scale = new r(this), this.gridSnap = new d(this), this.focusRule = new v(this), this.panelListeners = new f(this, () => [
 			[
 				document,
 				"pointerdown",
@@ -260,7 +260,7 @@ var P, F = class extends i(_) {
 				"resize",
 				this.handleWindowResize
 			]
-		]), this.pressListeners = new u(this, () => [
+		]), this.pressListeners = new f(this, () => [
 			[
 				document,
 				"pointermove",
@@ -431,17 +431,17 @@ var P, F = class extends i(_) {
 		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,
+		let t = this.controlEl, n = this.panelEl;
+		if (!t || !n) return;
+		let r = t.getBoundingClientRect(), a = this.optionItems[0]?.getBoundingClientRect()?.height || i(P.ITEM_HEIGHT, this), o = getComputedStyle(n), s = parseFloat(o.borderTopWidth) || 0, c = (e) => i(parseFloat(o.getPropertyValue(e)) || 0, this), l = w({
+			idealTop: r.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();
+		}), u = r.left;
+		n.style.minWidth = `${r.width}px`, n.style.top = `${l.panelTop}px`, n.style.left = `${u}px`, n.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());
@@ -541,10 +541,10 @@ var P, F = class extends i(_) {
 	cancelBlink() {
 		this.blinkHandle?.cancel(), this.blinkHandle = void 0, this.blinking = !1;
 	}
-	commit(e) {
+	commit(n) {
 		this.closePanel(!0);
-		let t = this.optionValue(e);
-		this.value = t, d(this, "vf-change", { value: t }), f(this, "input"), f(this, "change");
+		let r = this.optionValue(n);
+		this.value = r, e(this, "vf-change", { value: r }), t(this, "input"), t(this, "change");
 	}
 	optionFromEvent(e) {
 		return e.composedPath().find((e) => e instanceof y);
@@ -653,6 +653,6 @@ var P, F = class extends i(_) {
     `;
 	}
 };
-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);
+a([k()], F.prototype, "value", void 0), a([k({ reflect: !0 })], F.prototype, "name", void 0), a([k()], F.prototype, "label", void 0), a([M()], F.prototype, "open", void 0), a([A(".control")], F.prototype, "controlEl", void 0), a([A(".panel")], F.prototype, "panelEl", void 0), a([A(".rows")], F.prototype, "rowsEl", void 0), a([A(".arrow-slot.up")], F.prototype, "upArrowEl", void 0), a([A(".arrow-slot.down")], F.prototype, "downArrowEl", void 0), a([j({ selector: "vf-option" })], F.prototype, "assignedOptions", void 0), a([M()], F.prototype, "cachedOptions", void 0), F = P = a([n("vf-select")], F);
 //#endregion
 export { F as VfSelect };