vintage-frames 0.2.1 → 0.4.0

package/dist/components/vf-menu.js

@@ -1,23 +1,24 @@
-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 { 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";
+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";
+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 C = class extends r(g) {
+var T = class extends a(_) {
 	constructor(...e) {
-		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, {
+		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;
@@ -25,11 +26,17 @@ var C = class extends r(g) {
 			close: () => {
 				this.open = !1;
 			}
-		}), this.#r = this.attachInternals(), this.#i = new m(), this.#a = !1, this.#o = () => {
+		}), this.#r = this.attachInternals(), this.#i = new h(), this.#a = !1, this.#o = () => {
 			this.#n || this.focus(), this.open = !1;
-		}, this.#s = (e) => {
+		}, this._flashOn = !1, this.#c = () => {
+			this.open || (this.#l(), this.#s = p((e) => {
+				this._flashOn = e;
+			}, () => {
+				this._flashOn = !1, this.#s = void 0;
+			}));
+		}, this.#u = (e) => {
 			e.composedPath().includes(this) || (this.open = !1);
-		}, this.#c = (e) => {
+		}, this.#d = (e) => {
 			if (!e.defaultPrevented) switch (e.key) {
 				case "Escape":
 					e.preventDefault(), this.open = !1, this.focus();
@@ -39,7 +46,7 @@ var C = class extends r(g) {
 					break;
 				case "ArrowDown":
 				case "ArrowUp":
-					e.preventDefault(), this.#l(e.key === "ArrowDown" ? 1 : -1);
+					e.preventDefault(), this.#f(e.key === "ArrowDown" ? 1 : -1);
 					break;
 				case "Home":
 				case "End": {
@@ -59,30 +66,30 @@ var C = class extends r(g) {
 					break;
 				}
 			}
-		}, this.#u = new l(this, () => [[
+		}, this.#p = new d(this, () => [[
 			document,
 			"pointerdown",
-			this.#s,
+			this.#u,
 			!0
 		], [
 			document,
 			"keydown",
-			this.#c,
+			this.#d,
 			!0
-		]]), this.#f = (e) => {
+		]]), this.#h = (e) => {
 			if (!this.open || this.#n) return;
 			let t = e.relatedTarget;
 			t instanceof Node && (this.contains(t) || this.renderRoot.contains(t)) || (this.open = !1);
-		}, this.#p = (e) => {
+		}, this.#g = (e) => {
 			this.#e.suppress(), !this.#n && this.#t.onPointerDown(e);
 		};
 	}
 	static {
 		this.styles = [
-			a,
-			i,
+			s,
 			o,
-			_`
+			c,
+			v`
       :host {
         display: inline-block;
         position: relative;
@@ -105,7 +112,12 @@ var C = class extends r(g) {
         touch-action: none;
         cursor: var(--vf-cursor, default);
       }
-      :host([open]) .label {
+      /* .flash-on: the key-equivalent acknowledgment — a closed menu whose
+         item was activated by its shortcut flashes the title on the item
+         blink's own cadence, the way MenuKey() flashed the bar. Shares the
+         open inversion so the two can't drift apart. */
+      :host([open]) .label,
+      .label.flash-on {
         /* Forced colors: exempt the inverted title from the mode's text
            backplate, which would land a Canvas slab on the highlight bar —
            see vf-list-item's forced-colors note. The pair is already the
@@ -169,7 +181,7 @@ var C = class extends r(g) {
       }
       :host(:not([open])) .label.vf-focus-rule .title::after {
         --vf-focus-underline-offset: -2px;
-        ${s}
+        ${l}
       }
       .panel {
         position: absolute;
@@ -240,30 +252,35 @@ var C = class extends r(g) {
 	#o;
 	#s;
 	#c;
-	#l(e) {
+	#l() {
+		this.#s?.cancel(), this.#s = void 0, this._flashOn = !1;
+	}
+	#u;
+	#d;
+	#f(e) {
 		let t = this.items;
 		if (t.length === 0) return;
 		let n = t.indexOf(document.activeElement), r;
 		r = n < 0 ? e === 1 ? 0 : t.length - 1 : (n + e + t.length) % t.length, t[r]?.focus();
 	}
-	#u;
+	#p;
 	connectedCallback() {
-		super.connectedCallback(), this.#d(), this.requestUpdate(), this.addEventListener("vf-menu-close-request", this.#o), this.addEventListener("pointerdown", this.#p), this.addEventListener("focusout", this.#f);
+		super.connectedCallback(), this.#m(), this.requestUpdate(), this.addEventListener("vf-menu-close-request", this.#o), this.addEventListener("vf-menu-flash-request", this.#c), this.addEventListener("pointerdown", this.#g), this.addEventListener("focusout", this.#h);
 	}
-	#d() {
+	#m() {
 		this.#r.role = this.#n ? "none" : null;
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("vf-menu-close-request", this.#o), this.removeEventListener("pointerdown", this.#p), this.removeEventListener("focusout", this.#f);
+		super.disconnectedCallback(), this.removeEventListener("vf-menu-close-request", this.#o), this.removeEventListener("vf-menu-flash-request", this.#c), this.removeEventListener("pointerdown", this.#g), this.removeEventListener("focusout", this.#h), this.#l();
 	}
-	#f;
+	#h;
 	updated(e) {
 		if (e.has("open")) {
-			if (this.open && !this.#n ? this.#u.attach() : this.#u.detach(), !this.open) for (let e of this.allItems) e.active = !1;
+			if (this.open && this.#l(), this.open && !this.#n ? this.#p.attach() : this.#p.detach(), !this.open) for (let e of this.allItems) e.active = !1;
 			this.open || this.#i.reset();
 		}
 	}
-	#p;
+	#g;
 	focus(e) {
 		this._labelEl?.focus(e);
 	}
@@ -271,19 +288,19 @@ var C = class extends r(g) {
 		this.focus();
 	}
 	render() {
-		return v`
+		return y`
       <div
-        class="label vf-snap ${this.#e.marked ? "vf-focus-rule" : ""}"
+        class="label vf-snap ${this.#e.marked ? "vf-focus-rule" : ""} ${this._flashOn ? "flash-on" : ""}"
         part="label"
         role=${this.#n ? "menuitem" : "button"}
         tabindex=${this.barTabIndex}
         aria-haspopup="menu"
         aria-expanded=${this.open ? "true" : "false"}
-        aria-label=${this.label || y}
-        @pointerdown=${this.#h}
-        @click=${this.#g}
-        @pointerenter=${this.#_}
-        @keydown=${this.#v}
+        aria-label=${this.label || b}
+        @pointerdown=${this.#v}
+        @click=${this.#y}
+        @pointerenter=${this.#b}
+        @keydown=${this.#x}
       >
         <span class="title"><slot name="label">${this.label}</slot></span>
       </div>
@@ -291,57 +308,60 @@ var C = class extends r(g) {
         class="panel vf-panel"
         part="panel"
         role="menu"
-        aria-label=${this.label || y}
+        aria-label=${this.label || b}
       >
         <slot></slot>
       </div>
     `;
 	}
-	#m() {
+	#_() {
 		if (!this.#n) {
 			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);
 	}
-	#h() {
-		this.#a = !0, u(() => {
+	#v() {
+		this.#a = !0, f(() => {
 			this.#a = !1;
 		});
 	}
-	#g(e) {
+	#y(t) {
 		if (this.#a) {
 			this.#a = !1;
 			return;
 		}
-		d(this, e, () => this.#m());
+		e(this, t, () => this.#_());
 	}
-	#_() {
-		f(this, "vf-menu-hover", { menu: this }, { composed: !1 });
+	#b() {
+		t(this, "vf-menu-hover", { menu: this }, { composed: !1 });
 	}
-	#v(e) {
+	#x(e) {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
 			let t = this.open;
-			this.#m(), !t && this.open && this.#y();
-		} else e.key === "ArrowDown" && !this.open && (e.preventDefault(), this.#m(), this.open && this.#y());
+			this.#_(), !t && this.open && this.#S();
+		} else e.key === "ArrowDown" && !this.open && (e.preventDefault(), this.#_(), this.open && this.#S());
 	}
-	async #y() {
+	async #S() {
 		await this.updateComplete, this.items[0]?.focus();
 	}
 };
-n([b()], C.prototype, "label", void 0), n([b({
+i([x()], T.prototype, "label", void 0), i([x({
+	type: Boolean,
+	reflect: !0
+})], T.prototype, "open", void 0), i([x({
 	type: Boolean,
 	reflect: !0
-})], C.prototype, "open", void 0), n([b({
+})], T.prototype, "shortcuts", void 0), i([x({
 	type: Number,
 	attribute: !1
-})], C.prototype, "barTabIndex", void 0), n([x(".label")], C.prototype, "_labelEl", void 0), n([S({
+})], T.prototype, "barTabIndex", void 0), i([S(".label")], T.prototype, "_labelEl", void 0), i([C({
 	selector: "vf-menu-item",
 	flatten: !0
-})], C.prototype, "_assignedItems", void 0), C = n([e("vf-menu")], C);
+})], T.prototype, "_assignedItems", void 0), i([w()], T.prototype, "_flashOn", void 0), T = i([n("vf-menu")], T);
 //#endregion
-export { C as VfMenu };
+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-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 };