vintage-frames 0.3.0 → 0.4.0

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 };

package/dist/components/vf-slider.js

@@ -1,11 +1,11 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t, sys as n, toSys 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 { vfFocusUnderline as s } from "../styles/recipes/focus.js";
-import { GridSnapController as c } from "../grid-snap.js";
-import { emit as l, emitNative as u } 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, toSys as a } from "../scale.js";
+import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as s } from "../position.js";
+import { vfBase as c } from "../styles/recipes/host.js";
+import { vfFocusUnderline as l } from "../styles/recipes/focus.js";
+import { GridSnapController as u } from "../grid-snap.js";
 import { SLIDER_THUMB as d, SLIDER_THUMB_FACE as f } from "../glyphs.js";
 import { VfFormControl as p } from "../form-control.js";
 import { FocusRuleController as m } from "../focus-modality.js";
@@ -21,9 +21,9 @@ function D(e, t) {
 	};
 	return r(1, 0, e - 2, 1), r(1, 3, e - 2, 1), r(0, 1, 1, 2), r(e - 1, 1, 1, 2), r(1, 1, Math.min(Math.max(t, 0), e - 1) - 1, 2), n.join("");
 }
-var O = class extends a(p) {
+var O = class extends s(p) {
 	static {
-		this.styles = [o, _`
+		this.styles = [c, _`
       :host {
         /* Padding just leaves room for the thumb's focus ring; the thumb itself
            stays within the rail (its travel is inset by half its width). */
@@ -102,7 +102,7 @@ var O = class extends a(p) {
       }
       .track.vf-focus-rule::after {
         --vf-focus-underline-offset: ${3}px;
-        ${s}
+        ${l}
       }
     `];
 	}
@@ -110,7 +110,7 @@ var O = class extends a(p) {
 	#t;
 	#n;
 	constructor() {
-		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new g(this, () => this.track), this.scale = new t(this), this.gridSnap = new c(this), this.selfManagedTabIndex = !1, this.#e = new m(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
+		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new g(this, () => this.track), this.scale = new r(this), this.gridSnap = new u(this), this.selfManagedTabIndex = !1, this.#e = new m(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
 			if (!(this.isDisabled || e.button !== 0)) {
 				e.preventDefault(), this.#e.suppress(), this.focus(), this.#n = !0, this.#t = this.value;
 				try {
@@ -193,16 +193,16 @@ var O = class extends a(p) {
 	#l(e) {
 		e !== this.value && (this.value = e, this.#u("vf-input"));
 	}
-	#u(e) {
-		l(this, e, { value: this.value }), u(this, e === "vf-input" ? "input" : "change");
+	#u(n) {
+		e(this, n, { value: this.value }), t(this, n === "vf-input" ? "input" : "change");
 	}
 	#d(e) {
 		let t = this.track?.getBoundingClientRect();
 		if (!t) return this.value;
-		let r = t.width - n(x, this);
-		if (r <= 0) return this.value;
-		let i = Math.min(Math.max((e - t.left - n(w, this)) / r, 0), 1);
-		return this.#o(this.min + i * this.#r);
+		let n = t.width - i(x, this);
+		if (n <= 0) return this.value;
+		let r = Math.min(Math.max((e - t.left - i(w, this)) / n, 0), 1);
+		return this.#o(this.min + r * this.#r);
 	}
 	#f;
 	#p;
@@ -213,7 +213,7 @@ var O = class extends a(p) {
 		(n || t) && this.syncFormValue(String(this.#s)), e.has("min") && (this.internals.ariaValueMin = String(this.min)), e.has("max") && (this.internals.ariaValueMax = String(this.max)), n && (this.internals.ariaValueNow = String(this.#s)), e.has("label") && (this.internals.ariaLabel = this.label || null), t && (this.internals.ariaDisabled = this.isDisabled ? "true" : "false", this.selfManagedTabIndex && (this.tabIndex = this.isDisabled ? -1 : 0));
 	}
 	render() {
-		let e = r(this.trackSize.width, this), t = Math.round(this.#c * Math.max(0, e - x)), i = n(t, this), a = t + C;
+		let e = a(this.trackSize.width, this), t = Math.round(this.#c * Math.max(0, e - x)), n = i(t, this), r = t + C;
 		return v`
       <div
         class="track vf-snap ${this.#e.marked ? "vf-focus-rule" : ""} ${this.isDisabled ? "disabled" : ""}"
@@ -227,15 +227,15 @@ var O = class extends a(p) {
         ${e >= 2 ? v`<svg
               class="rail"
               part="rail"
-              width=${n(e, this)}
-              height=${n(T, this)}
+              width=${i(e, this)}
+              height=${i(T, this)}
               viewBox="0 0 ${e} ${T}"
               shape-rendering="crispEdges"
               aria-hidden="true"
             >
-              <path d=${D(e, a)}></path>
+              <path d=${D(e, r)}></path>
             </svg>` : null}
-        <span class="thumb" part="thumb" style="left: ${i}px">
+        <span class="thumb" part="thumb" style="left: ${n}px">
           <svg
             class="thumb-glyph"
             viewBox="0 0 ${x} ${S}"
@@ -250,6 +250,6 @@ var O = class extends a(p) {
     `;
 	}
 };
-i([y({ type: Number })], O.prototype, "value", void 0), i([y({ type: Number })], O.prototype, "min", void 0), i([y({ type: Number })], O.prototype, "max", void 0), i([y({ type: Number })], O.prototype, "step", void 0), i([y({ reflect: !0 })], O.prototype, "name", void 0), i([y()], O.prototype, "label", void 0), i([b(".track")], O.prototype, "track", void 0), O = i([e("vf-slider")], O);
+o([y({ type: Number })], O.prototype, "value", void 0), o([y({ type: Number })], O.prototype, "min", void 0), o([y({ type: Number })], O.prototype, "max", void 0), o([y({ type: Number })], O.prototype, "step", void 0), o([y({ reflect: !0 })], O.prototype, "name", void 0), o([y()], O.prototype, "label", void 0), o([b(".track")], O.prototype, "track", void 0), O = o([n("vf-slider")], O);
 //#endregion
 export { O as VfSlider };

package/dist/components/vf-window.js

@@ -1,45 +1,45 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t, snapSys as n, sysLength as r, toSysExact as i } from "../scale.js";
-import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { PlacementController as o, VfPositioned as s, warnMovableContract as c } from "../position.js";
-import { vfBase as l } from "../styles/recipes/host.js";
-import { DOT_RECTS as u, DOT_SPAN as d, vfDots as f, vfStripes as p } from "../styles/recipes/pattern.js";
-import { vfChromeFrame as m } from "../styles/recipes/surface.js";
-import { vfTitleBar as h, vfWindowWidgets as g } from "../styles/recipes/title-bar.js";
-import { vfFocus as _ } from "../styles/recipes/focus.js";
-import { TileRasterCache as v, patternOverride as y, tileGrid as b, vfTileGrid as x } from "../tile-grid.js";
-import { GridSnapController as S } from "../grid-snap.js";
-import { VfSized as C } from "../size.js";
-import { DragController as w } from "../drag.js";
-import { TitleCenterController as T, chromeTitleBar as E, closeBox as D, widgetLabel as O, zoomBox as k } from "../chrome.js";
-import { emit as A } from "../events.js";
+import { emit as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import { ScaleController as n, snapSys as r, sysLength as i, toSysExact as a } from "../scale.js";
+import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { PlacementController as s, VfPositioned as c, warnMovableContract as l } from "../position.js";
+import { vfBase as u } from "../styles/recipes/host.js";
+import { DOT_RECTS as d, DOT_SPAN as f, vfDots as p, vfStripes as m } from "../styles/recipes/pattern.js";
+import { vfChromeFrame as h } from "../styles/recipes/surface.js";
+import { vfTitleBar as g, vfWindowWidgets as _ } from "../styles/recipes/title-bar.js";
+import { vfFocus as v } from "../styles/recipes/focus.js";
+import { TileRasterCache as y, patternOverride as b, tileGrid as x, vfTileGrid as S } from "../tile-grid.js";
+import { GridSnapController as C } from "../grid-snap.js";
+import { VfSized as w } from "../size.js";
+import { DragController as T } from "../drag.js";
+import { TitleCenterController as E, chromeTitleBar as D, closeBox as O, widgetLabel as k, zoomBox as A } from "../chrome.js";
 import "./vf-scroll-area.js";
 import { LitElement as j, css as M, html as N, nothing as P } from "lit";
 import { property as F, state as I } from "lit/decorators.js";
 //#region src/components/vf-window.ts
-var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
+var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
 	constructor(...e) {
-		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this.flush = !1, this._hasStatus = !1, this.scale = new t(this), this.gridSnap = new S(this), this.titleCenter = new T(this), this._dotsPattern = "", this.#e = new v(), this.#t = (e, t, n) => {
-			let r = i(this.offsetWidth, this);
+		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this.flush = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new C(this), this.titleCenter = new E(this), this._dotsPattern = "", this.#e = new y(), this.#t = (e, t, n) => {
+			let r = a(this.offsetWidth, this);
 			return {
 				x: Math.min(Math.max(e, z - r), n.width - z),
 				y: Math.min(Math.max(t, 0), Math.max(0, n.height - z))
 			};
-		}, this._placement = new o(this, (e, t, n) => this.#t(e, t, n)), this._drag = new w(this, {
+		}, this._placement = new s(this, (e, t, n) => this.#t(e, t, n)), this._drag = new T(this, {
 			onDragStart: (e) => !this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box")) ? null : (this.#i(), this._placement.seed()),
 			onDrag: (e, t) => this._placement.moveTo(e, t)
 		}), this._resizeState = null, this.#n = !1, this.#r = !1;
 	}
 	static {
 		this.styles = [
-			l,
-			p,
-			f,
-			x,
-			_,
+			u,
 			m,
+			p,
+			S,
+			v,
 			h,
 			g,
+			_,
 			M`
       :host {
         display: block;
@@ -281,27 +281,27 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
 	}
 	#e;
 	willUpdate(e) {
-		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = y(this, "--vf-dots-pattern"));
+		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = b(this, "--vf-dots-pattern"));
 	}
 	_dotsTexture() {
 		if (this.width == null) return;
 		let e = Math.max(1, this.width - 2);
-		if (this._dotsPattern) return b({
-			cols: Math.ceil(e / d),
+		if (this._dotsPattern) return x({
+			cols: Math.ceil(e / f),
 			rows: 1,
-			tile: d
+			tile: f
 		});
-		let t = Math.ceil((e + 2) / d) * d, n = B + 2;
+		let t = Math.ceil((e + 2) / f) * f, n = B + 2;
 		return N`<div
       class="vf-tile-raster"
-      style="width:${r(t)};height:${r(n)};background-image:${this.#e.for(2, 2, u, t, n)}"
+      style="width:${i(t)};height:${i(n)};background-image:${this.#e.for(2, 2, d, t, n)}"
     ></div>`;
 	}
 	#t;
 	updated() {
 		this.#a();
-		let e = this._resizeState;
-		e?.emitPending && (e.emitPending = !1, A(this, "vf-resize", {
+		let t = this._resizeState;
+		t?.emitPending && (t.emitPending = !1, e(this, "vf-resize", {
 			width: this.width,
 			height: this.height,
 			commit: !1
@@ -310,7 +310,7 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
 	#n;
 	#r;
 	#i() {
-		this.#r ||= c(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
+		this.#r ||= l(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
 	}
 	#a() {
 		if (this.#n) return;
@@ -325,10 +325,10 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
 		this._hasStatus = t.assignedElements().length > 0;
 	}
 	_onCloseClick() {
-		A(this, "vf-close", { reason: "close" });
+		e(this, "vf-close", { reason: "close" });
 	}
 	_onZoomClick() {
-		A(this, "vf-zoom", {});
+		e(this, "vf-zoom", {});
 	}
 	_onGrowPointerDown(e) {
 		if (!this.resizable || e.button !== 0) return;
@@ -337,8 +337,8 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
 			pointerId: e.pointerId,
 			startX: e.clientX,
 			startY: e.clientY,
-			baseWidth: i(t.width, this),
-			baseHeight: i(t.height, this),
+			baseWidth: a(t.width, this),
+			baseHeight: a(t.height, this),
 			emitPending: !1,
 			resized: !1
 		}, e.currentTarget.setPointerCapture(e.pointerId), e.preventDefault();
@@ -346,15 +346,15 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
 	_onGrowPointerMove(e) {
 		let t = this._resizeState;
 		if (!t || e.pointerId !== t.pointerId) return;
-		let r = n(Math.max(L, t.baseWidth + i(e.clientX - t.startX, this)), this), a = n(Math.max(R, t.baseHeight + i(e.clientY - t.startY, this)), this);
-		(r !== this.width || a !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = r, this.height = a;
+		let n = r(Math.max(L, t.baseWidth + a(e.clientX - t.startX, this)), this), i = r(Math.max(R, t.baseHeight + a(e.clientY - t.startY, this)), this);
+		(n !== this.width || i !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = n, this.height = i;
 	}
-	_onGrowPointerEnd(e) {
-		let t = this._resizeState;
-		if (!t || e.pointerId !== t.pointerId) return;
+	_onGrowPointerEnd(t) {
+		let n = this._resizeState;
+		if (!n || t.pointerId !== n.pointerId) return;
 		this._resizeState = null;
-		let n = e.currentTarget;
-		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), t.resized && A(this, "vf-resize", {
+		let r = t.currentTarget;
+		r.hasPointerCapture(t.pointerId) && r.releasePointerCapture(t.pointerId), n.resized && e(this, "vf-resize", {
 			width: this.width,
 			height: this.height,
 			commit: !0
@@ -368,10 +368,10 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
         role="group"
         aria-labelledby=${this.heading ? "title" : P}
       >
-        ${E(this._drag, N`
-            ${this.closable ? D(O("Close", this.heading), this._onCloseClick) : P}
+        ${D(this._drag, N`
+            ${this.closable ? O(k("Close", this.heading), this._onCloseClick) : P}
             <span class="vf-title" part="title" id="title">${this.heading}</span>
-            ${this.zoomable ? k(O("Zoom", this.heading), this._onZoomClick) : P}
+            ${this.zoomable ? A(k("Zoom", this.heading), this._onZoomClick) : P}
           `, this.variant === "utility" ? "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
         <div class="body" part="body">
           ${this.scrollbars ? N`
@@ -403,24 +403,24 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
     `;
 	}
 };
-a([F({ reflect: !0 })], V.prototype, "variant", void 0), a([F()], V.prototype, "heading", void 0), a([F({
+o([F({ reflect: !0 })], V.prototype, "variant", void 0), o([F()], V.prototype, "heading", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "active", void 0), a([F({
+})], V.prototype, "active", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "closable", void 0), a([F({
+})], V.prototype, "closable", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "zoomable", void 0), a([F({
+})], V.prototype, "zoomable", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "movable", void 0), a([F({
+})], V.prototype, "movable", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "resizable", void 0), a([F({
+})], V.prototype, "resizable", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "flush", void 0), a([F({ reflect: !0 })], V.prototype, "scrollbars", void 0), a([I()], V.prototype, "_hasStatus", void 0), V = a([e("vf-window")], V);
+})], V.prototype, "flush", void 0), o([F({ reflect: !0 })], V.prototype, "scrollbars", void 0), o([I()], V.prototype, "_hasStatus", void 0), V = o([t("vf-window")], V);
 //#endregion
 export { V as VfWindow };