vintage-frames 0.2.1 → 0.4.0

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.d.ts

@@ -30,12 +30,18 @@ declare const VfWindow_base: (new (...args: any[]) => import("../size.js").VfSiz
  * says so once in the console.
  *
  * @slot - Default slot: window body content.
+ * @slot status - Optional status-bar content — the classic bottom readout
+ *   strip ("40px x 40px"): a 1px rule over a 15px white band under the body,
+ *   body-face text on its native line. Takes no space until populated; a
+ *   `resizable` window's grow box sits flush in its right end.
  * @csspart frame - The outer chrome frame.
  * @csspart title-bar - The striped (or dithered) title bar.
  * @csspart title - The centered title patch (hidden on the utility bar).
  * @csspart close-box - The close widget (left).
  * @csspart zoom-box - The zoom widget (right).
  * @csspart body - The content area.
+ * @csspart status-bar - The bottom status strip (when the `status` slot is
+ *   populated).
  * @csspart grow-box - The resize widget (bottom-right, when `resizable`).
  * @csspart viewport - The built-in scroll area's viewport (when `scrollbars`;
  *   re-exported from vf-scroll-area).
@@ -43,6 +49,13 @@ declare const VfWindow_base: (new (...args: any[]) => import("../size.js").VfSiz
  *   compatible with vf-dialog's `vf-close`). The window does NOT
  *   remove itself; the consumer decides what closing means.
  * @fires vf-zoom - Zoom box clicked. Detail `{}`.
+ * @fires vf-resize - The grow box resized the window. Detail `{ width,
+ *   height, commit }`, sizes in whole system px: one event per size the drag
+ *   writes (`commit: false`), fired after the new box is applied so a handler
+ *   that measures reads the resized layout, then a final `commit: true` as
+ *   the gesture settles — only when it changed the size. Fired by the gesture
+ *   alone: a programmatic `width`/`height` write fires nothing, the way a
+ *   value set fires no `vf-change`.
  * @cssprop --vf-dots-pattern - the windoid bar's dot-grid dither — a 2×2 motif,
  *   one black pixel at its origin, on a 30-system-px tile (`vfDots`; override
  *   the whole tile like `--vf-desktop-pattern` — consumer art renders as a
@@ -51,6 +64,10 @@ declare const VfWindow_base: (new (...args: any[]) => import("../size.js").VfSiz
  * @cssprop [--vf-titlebar-height-utility=12px] - the slim
  *   `vf-window[variant="utility"]` (windoid) bar — 11px interior + 1px bottom
  *   rule, traced from `Windows/utility-window.png`
+ * @cssprop [--vf-status-bar-height=15px] - the status strip: 1px rule + 14px
+ *   interior — the grow box's own height, so the two compose flush
+ * @cssprop [--vf-line-height=12px] - the body face's native line, which the
+ *   status strip's text rides (whole-pixel centered in the 14px interior)
  */
 export declare class VfWindow extends VfWindow_base {
     #private;
@@ -90,6 +107,8 @@ export declare class VfWindow extends VfWindow_base {
      * vf-scroll-area) still works for windows that want an inset well instead.
      */
     scrollbars?: 'vertical' | 'horizontal' | 'both';
+    /** Whether the `status` slot has assigned content (drives the strip). */
+    private _hasStatus;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
     /** Device-pixel grid snapping; see src/grid-snap.ts. */
@@ -134,9 +153,16 @@ export declare class VfWindow extends VfWindow_base {
      * are the same declaration and neither can be re-asserted over the other.
      * Controllers run before this hook, so the inline style the warning reads is
      * already written.
+     *
+     * The stream half of `vf-resize` also fires here, not from the pointermove
+     * that wrote the size: by this hook the controller has applied the box, so
+     * a handler that measures reads the resized layout — the contract that lets
+     * window content follow the grow box without a ResizeObserver.
      */
     protected updated(): void;
     disconnectedCallback(): void;
+    /** The `.empty` gate: the strip renders only while the slot is populated. */
+    private _onStatusSlotChange;
     private _onCloseClick;
     private _onZoomClick;
     private _onGrowPointerDown;

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 } from "lit/decorators.js";
+import { property as F, state as I } from "lit/decorators.js";
 //#region src/components/vf-window.ts
-var I = 80, L = 54, R = 24, z = 8, B = 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.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, R - r), n.width - R),
-				y: Math.min(Math.max(t, 0), Math.max(0, n.height - R))
+				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;
@@ -206,6 +206,36 @@ var I = 80, L = 54, R = 24, z = 8, B = class extends C(s(j)) {
         margin: calc(var(--vf-scale, 1) * -1px);
       }
 
+      /* --- Status bar (slot="status") ---------------------------------- */
+      /* The classic bottom readout strip: a 1px rule over a white interior,
+         15px in all — the grow box's own height, so a resizable window's
+         grow box sits flush in the strip's right end the way it sits in the
+         scroll rails' corner cell (its top and left borders take over the
+         rule there). Body-face text rides its native 12px line, whole-pixel
+         centered in the 14px interior. Under the scrollbars parameter, the
+         edge rails' bottom frame line lands exactly on the strip's rule (the
+         1px overhang), so the two never double up. Takes no space until the
+         slot is populated. */
+      .status {
+        flex: none;
+        display: flex;
+        align-items: center;
+        height: calc(var(--vf-scale, 1) * var(--vf-status-bar-height, 15px));
+        border-top: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+        background: var(--vf-white, #ffffff);
+        padding-inline: calc(var(--vf-scale, 1) * 6px);
+        line-height: calc(var(--vf-scale, 1) * var(--vf-line-height, 12px));
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      /* Clear the grow box: its 15px cell plus the strip's own 6px inset. */
+      :host([resizable]) .status {
+        padding-inline-end: calc(var(--vf-scale, 1) * 21px);
+      }
+      .status.empty {
+        display: none;
+      }
+
       /* --- Grow box --------------------------------------------------- */
       .grow {
         position: absolute;
@@ -251,30 +281,36 @@ var I = 80, L = 54, R = 24, z = 8, B = 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 = z + 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 t = this._resizeState;
+		t?.emitPending && (t.emitPending = !1, e(this, "vf-resize", {
+			width: this.width,
+			height: this.height,
+			commit: !1
+		}));
 	}
 	#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;
@@ -284,11 +320,15 @@ var I = 80, L = 54, R = 24, z = 8, B = class extends C(s(j)) {
 	disconnectedCallback() {
 		super.disconnectedCallback(), this._resizeState = null;
 	}
+	_onStatusSlotChange(e) {
+		let t = e.target;
+		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;
@@ -297,22 +337,28 @@ var I = 80, L = 54, R = 24, z = 8, B = 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();
 	}
 	_onGrowPointerMove(e) {
 		let t = this._resizeState;
 		if (!t || e.pointerId !== t.pointerId) return;
-		let r = Math.max(I, t.baseWidth + i(e.clientX - t.startX, this)), a = Math.max(L, t.baseHeight + i(e.clientY - t.startY, this));
-		this.width = n(r, this), this.height = n(a, this);
+		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);
+		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
+		});
 	}
 	render() {
 		return N`
@@ -322,10 +368,10 @@ var I = 80, L = 54, R = 24, z = 8, B = 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`
@@ -339,6 +385,9 @@ var I = 80, L = 54, R = 24, z = 8, B = class extends C(s(j)) {
                 </vf-scroll-area>
               ` : N`<slot></slot>`}
         </div>
+        <div class="status ${this._hasStatus ? "" : "empty"}" part="status-bar">
+          <slot name="status" @slotchange=${this._onStatusSlotChange}></slot>
+        </div>
         ${this.resizable ? N`
               <div
                 class="grow"
@@ -354,24 +403,24 @@ var I = 80, L = 54, R = 24, z = 8, B = class extends C(s(j)) {
     `;
 	}
 };
-a([F({ reflect: !0 })], B.prototype, "variant", void 0), a([F()], B.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
-})], B.prototype, "active", void 0), a([F({
+})], V.prototype, "active", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], B.prototype, "closable", void 0), a([F({
+})], V.prototype, "closable", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], B.prototype, "zoomable", void 0), a([F({
+})], V.prototype, "zoomable", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], B.prototype, "movable", void 0), a([F({
+})], V.prototype, "movable", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], B.prototype, "resizable", void 0), a([F({
+})], V.prototype, "resizable", void 0), o([F({
 	type: Boolean,
 	reflect: !0
-})], B.prototype, "flush", void 0), a([F({ reflect: !0 })], B.prototype, "scrollbars", void 0), B = a([e("vf-window")], B);
+})], 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 { B as VfWindow };
+export { V as VfWindow };

package/dist/index.js

@@ -1,31 +1,31 @@
-import { defineElement as e, vfElement as t } from "./define.js";
-import { CLASSIC_DPI as n, CSS_REFERENCE_DPI as r, SYSTEM_PX_IN_CSS_PX as i, devicePxPerSystemPx as a, getZoom as o, onZoomChange as s, resetZoomBaseline as c, truePixelRatio as l } from "./zoom.js";
-import { ScaleController as u, applyScale as d, effectiveScale as f, getScale as p, onScaleChange as m, snapSys as h, snapToDevicePx as g, snapToSystemPx as _, sys as v, sysLength as y, sysLengths as b, systemPxQuantum as x, toSys as S, toSysExact as C } from "./scale.js";
-import { PlacementController as w, VfPositioned as T } from "./position.js";
-import { PIXEL_GRID_METRICS as E, registerEmbeddedFont as D } from "./styles/register-embedded-font.js";
-import { VF_BODY_FAMILY as O, registerBodyFace as k } from "./styles/body-font.js";
-import { vfBodyDecls as A } from "./styles/recipes/body-face.js";
-import { VF_DISPLAY_FAMILY as j, registerDisplayFace as M } from "./styles/display-font.js";
-import { vfDisplay as N, vfDisplayDecls as P } from "./styles/recipes/display-face.js";
-import { vfBase as F } from "./styles/recipes/host.js";
-import { vfStaticText as I } from "./styles/recipes/static-text.js";
-import { TILE_LATTICE as L, tileImage as R, tileRaster as z, tileRects as B, tileSpan as V, vfTileMaskSize as H, vfTileSize as U } from "./styles/recipes/tile.js";
-import { vfDots as W, vfStripes as G } from "./styles/recipes/pattern.js";
-import { vfHardShadowDecls as K } from "./styles/recipes/shadow.js";
-import { vfChromeFrame as q, vfModalFrame as J, vfPanel as Y } from "./styles/recipes/surface.js";
-import { vfTitleBar as X, vfWindowWidgets as Z } from "./styles/recipes/title-bar.js";
-import { vfFocus as Q, vfFocusRing as $, vfFocusUnderline as ee } from "./styles/recipes/focus.js";
-import { vfToggle as te } from "./styles/recipes/toggle.js";
-import { vfField as ne } from "./styles/recipes/field.js";
-import { vfScrollRail as re } from "./styles/recipes/scroll-rail.js";
-import { TileRasterCache as ie, patternOverride as ae, tileGrid as oe, vfTileGrid as se } from "./tile-grid.js";
-import { GridSnapController as ce, requestGridSnap as le } from "./grid-snap.js";
-import { DocumentListenersController as ue } from "./document-listeners.js";
-import { BUTTON_FACE as de, BUTTON_FRAME as fe, RING_FRAME as pe, RING_HOLE as me, RING_INSET as he, SCREEN_CORNER as ge, steppedCornerClip as _e, steppedRectClip as ve, steppedRingClip as ye } from "./pixel-frame.js";
-import { VfDesktop as be } from "./components/vf-desktop.js";
-import { VfSized as xe } from "./size.js";
-import { DragController as Se } from "./drag.js";
-import { emit as Ce } from "./events.js";
+import { emit as e } from "./events.js";
+import { defineElement as t, vfElement as n } from "./define.js";
+import { CLASSIC_DPI as r, CSS_REFERENCE_DPI as i, SYSTEM_PX_IN_CSS_PX as a, devicePxPerSystemPx as o, getZoom as s, onZoomChange as c, resetZoomBaseline as l, truePixelRatio as u } from "./zoom.js";
+import { ScaleController as d, applyScale as f, effectiveScale as p, getScale as m, onScaleChange as h, snapSys as g, snapToDevicePx as _, snapToSystemPx as v, sys as y, sysLength as b, sysLengths as x, systemPxQuantum as S, toSys as C, toSysExact as w } from "./scale.js";
+import { PlacementController as T, VfPositioned as E } from "./position.js";
+import { PIXEL_GRID_METRICS as D, registerEmbeddedFont as O } from "./styles/register-embedded-font.js";
+import { VF_BODY_FAMILY as k, registerBodyFace as A } from "./styles/body-font.js";
+import { vfBodyDecls as j } from "./styles/recipes/body-face.js";
+import { VF_DISPLAY_FAMILY as M, registerDisplayFace as N } from "./styles/display-font.js";
+import { vfDisplay as P, vfDisplayDecls as F } from "./styles/recipes/display-face.js";
+import { vfBase as I } from "./styles/recipes/host.js";
+import { vfStaticText as L } from "./styles/recipes/static-text.js";
+import { TILE_LATTICE as R, tileImage as z, tileRaster as B, tileRects as V, tileSpan as H, vfTileMaskSize as U, vfTileSize as W } from "./styles/recipes/tile.js";
+import { vfDots as G, vfStripes as K } from "./styles/recipes/pattern.js";
+import { vfHardShadowDecls as q } from "./styles/recipes/shadow.js";
+import { vfChromeFrame as J, vfModalFrame as Y, vfPanel as X } from "./styles/recipes/surface.js";
+import { vfTitleBar as Z, vfWindowWidgets as Q } from "./styles/recipes/title-bar.js";
+import { vfFocus as $, vfFocusRing as ee, vfFocusUnderline as te } from "./styles/recipes/focus.js";
+import { vfToggle as ne } from "./styles/recipes/toggle.js";
+import { vfField as re } from "./styles/recipes/field.js";
+import { vfScrollRail as ie } from "./styles/recipes/scroll-rail.js";
+import { TileRasterCache as ae, patternOverride as oe, tileGrid as se, vfTileGrid as ce } from "./tile-grid.js";
+import { GridSnapController as le, requestGridSnap as ue } from "./grid-snap.js";
+import { DocumentListenersController as de } from "./document-listeners.js";
+import { BUTTON_FACE as fe, BUTTON_FRAME as pe, RING_FRAME as me, RING_HOLE as he, RING_INSET as ge, SCREEN_CORNER as _e, steppedCornerClip as ve, steppedRectClip as ye, steppedRingClip as be } from "./pixel-frame.js";
+import { VfDesktop as xe } from "./components/vf-desktop.js";
+import { VfSized as Se } from "./size.js";
+import { DragController as Ce } from "./drag.js";
 import { ScrollStateController as we } from "./scroll-state.js";
 import { BLINK_FLIPS as Te, BLINK_INTERVAL_MS as Ee, PRESS_HOLD_MS as De, RENAME_DELAY_MS as Oe, prefersReducedMotion as ke, runSelectionBlink as Ae } from "./motion.js";
 import { CARET_DOWN as je, CHECKBOX_X as Me, CHECKMARK as Ne, RADIO_DOT as Pe, RADIO_FACE as Fe, RADIO_RING as Ie, RADIO_RING_PRESSED as Le, SLIDER_THUMB as Re, SLIDER_THUMB_FACE as ze, STEPPER as Be, STEPPER_DOWN_FILL as Ve, STEPPER_UP_FILL as He, glyphSvg as Ue } from "./glyphs.js";
@@ -68,4 +68,4 @@ import { VfStack as kt } from "./components/vf-stack.js";
 import { VfContainer as At } from "./components/vf-container.js";
 import { CURSOR_ARROW as jt, CURSOR_CROSSHAIR as Mt, CURSOR_I_BEAM as Nt, CURSOR_WAIT as Pt } from "./cursor-art.js";
 import { applyCursor as Ft } from "./cursor.js";
-export { Te as BLINK_FLIPS, Ee as BLINK_INTERVAL_MS, de as BUTTON_FACE, fe as BUTTON_FRAME, je as CARET_DOWN, Me as CHECKBOX_X, Ne as CHECKMARK, n as CLASSIC_DPI, r as CSS_REFERENCE_DPI, jt as CURSOR_ARROW, Mt as CURSOR_CROSSHAIR, Nt as CURSOR_I_BEAM, Pt as CURSOR_WAIT, ue as DocumentListenersController, Se as DragController, ot as FocusRuleController, ce as GridSnapController, E as PIXEL_GRID_METRICS, De as PRESS_HOLD_MS, w as PlacementController, Pe as RADIO_DOT, Fe as RADIO_FACE, Ie as RADIO_RING, Le as RADIO_RING_PRESSED, Oe as RENAME_DELAY_MS, pe as RING_FRAME, me as RING_HOLE, he as RING_INSET, ge as SCREEN_CORNER, Re as SLIDER_THUMB, ze as SLIDER_THUMB_FACE, Be as STEPPER, Ve as STEPPER_DOWN_FILL, He as STEPPER_UP_FILL, i as SYSTEM_PX_IN_CSS_PX, u as ScaleController, We as ScrollRailController, we as ScrollStateController, L as TILE_LATTICE, ie as TileRasterCache, ht as TrackWidthController, O as VF_BODY_FAMILY, j as VF_DISPLAY_FAMILY, et as VfButton, Xe as VfButtonGroup, rt as VfCheckbox, At as VfContainer, be as VfDesktop, Ze as VfDialog, Dt as VfFieldset, $e as VfFormControl, Ot as VfGrid, xt as VfIcon, bt as VfImg, vt as VfLabel, Tt as VfList, Et as VfListItem, Ct as VfMenu, St as VfMenuBar, wt as VfMenuItem, Je as VfModalDialog, ft as VfNumberField, pt as VfOption, yt as VfParagraph, T as VfPositioned, gt as VfProgressBar, it as VfRadio, at as VfRadioGroup, Ke as VfScrollArea, mt as VfSelect, Qe as VfSeparator, xe as VfSized, _t as VfSlider, kt as VfStack, tt as VfSwatch, dt as VfTextArea, lt as VfTextControlBase, ut as VfTextField, nt as VfToggleControl, qe as VfWindow, Ft as applyCursor, d as applyScale, e as defineElement, a as devicePxPerSystemPx, f as effectiveScale, Ce as emit, st as focusModality, p as getScale, o as getZoom, Ue as glyphSvg, Ye as modalDialogStyles, m as onScaleChange, s as onZoomChange, ae as patternOverride, ke as prefersReducedMotion, k as registerBodyFace, M as registerDisplayFace, D as registerEmbeddedFont, Ge as renderScrollRail, le as requestGridSnap, c as resetZoomBaseline, Ae as runSelectionBlink, h as snapSys, g as snapToDevicePx, _ as snapToSystemPx, _e as steppedCornerClip, ve as steppedRectClip, ye as steppedRingClip, v as sys, y as sysLength, b as sysLengths, x as systemPxQuantum, oe as tileGrid, R as tileImage, z as tileRaster, B as tileRects, V as tileSpan, S as toSys, C as toSysExact, ct as trackFocusModality, l as truePixelRatio, F as vfBase, A as vfBodyDecls, q as vfChromeFrame, N as vfDisplay, P as vfDisplayDecls, W as vfDots, t as vfElement, ne as vfField, Q as vfFocus, $ as vfFocusRing, ee as vfFocusUnderline, K as vfHardShadowDecls, J as vfModalFrame, Y as vfPanel, re as vfScrollRail, I as vfStaticText, G as vfStripes, se as vfTileGrid, H as vfTileMaskSize, U as vfTileSize, X as vfTitleBar, te as vfToggle, Z as vfWindowWidgets };
+export { Te as BLINK_FLIPS, Ee as BLINK_INTERVAL_MS, fe as BUTTON_FACE, pe as BUTTON_FRAME, je as CARET_DOWN, Me as CHECKBOX_X, Ne as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, jt as CURSOR_ARROW, Mt as CURSOR_CROSSHAIR, Nt as CURSOR_I_BEAM, Pt as CURSOR_WAIT, de as DocumentListenersController, Ce as DragController, ot as FocusRuleController, le as GridSnapController, D as PIXEL_GRID_METRICS, De as PRESS_HOLD_MS, T as PlacementController, Pe as RADIO_DOT, Fe as RADIO_FACE, Ie as RADIO_RING, Le as RADIO_RING_PRESSED, Oe as RENAME_DELAY_MS, me as RING_FRAME, he as RING_HOLE, ge as RING_INSET, _e as SCREEN_CORNER, Re as SLIDER_THUMB, ze as SLIDER_THUMB_FACE, Be as STEPPER, Ve as STEPPER_DOWN_FILL, He as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, We as ScrollRailController, we as ScrollStateController, R as TILE_LATTICE, ae as TileRasterCache, ht as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, et as VfButton, Xe as VfButtonGroup, rt as VfCheckbox, At as VfContainer, xe as VfDesktop, Ze as VfDialog, Dt as VfFieldset, $e as VfFormControl, Ot as VfGrid, xt as VfIcon, bt as VfImg, vt as VfLabel, Tt as VfList, Et as VfListItem, Ct as VfMenu, St as VfMenuBar, wt as VfMenuItem, Je as VfModalDialog, ft as VfNumberField, pt as VfOption, yt as VfParagraph, E as VfPositioned, gt as VfProgressBar, it as VfRadio, at as VfRadioGroup, Ke as VfScrollArea, mt as VfSelect, Qe as VfSeparator, Se as VfSized, _t as VfSlider, kt as VfStack, tt as VfSwatch, dt as VfTextArea, lt as VfTextControlBase, ut as VfTextField, nt as VfToggleControl, qe as VfWindow, Ft as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, st as focusModality, m as getScale, s as getZoom, Ue as glyphSvg, Ye as modalDialogStyles, h as onScaleChange, c as onZoomChange, oe as patternOverride, ke as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, Ge as renderScrollRail, ue as requestGridSnap, l as resetZoomBaseline, Ae as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, ve as steppedCornerClip, ye as steppedRectClip, be as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, se as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, ct as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, J as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, G as vfDots, n as vfElement, re as vfField, $ as vfFocus, ee as vfFocusRing, te as vfFocusUnderline, q as vfHardShadowDecls, Y as vfModalFrame, X as vfPanel, ie as vfScrollRail, L as vfStaticText, K as vfStripes, ce as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, Z as vfTitleBar, ne as vfToggle, Q as vfWindowWidgets };

package/dist/modal-dialog.js

@@ -1,6 +1,6 @@
-import { ScaleController as e, onScaleChange 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 { emit as o } from "./events.js";
+import { emit as e } from "./events.js";
+import { ScaleController as t, onScaleChange 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 { LitElement as s, css as c } from "lit";
 import { property as l, query as u } from "lit/decorators.js";
 var d = 24, f = c`
@@ -43,13 +43,13 @@ var d = 24, f = c`
     cursor: var(--vf-cursor, default);
   }
 `, p = class extends s {
-	constructor(...t) {
-		super(...t), this.scale = new e(this), this.open = !1, this.#e = !1, this.#n = null, this.#r = null, this.#l = () => this.settle();
+	constructor(...e) {
+		super(...e), this.scale = new t(this), this.open = !1, this.#e = !1, this.#n = null, this.#r = null, this.#l = () => this.settle();
 	}
 	get dialogSize() {
 		return {
-			width: r(this.width ?? 260),
-			height: this.height === void 0 ? null : r(this.height)
+			width: i(this.width ?? 260),
+			height: this.height === void 0 ? null : i(this.height)
 		};
 	}
 	#e;
@@ -75,12 +75,12 @@ var d = 24, f = c`
 	#i() {
 		let e = document.documentElement;
 		return {
-			width: i(e.clientWidth || window.innerWidth, this),
-			height: i(e.clientHeight || window.innerHeight, this)
+			width: a(e.clientWidth || window.innerWidth, this),
+			height: a(e.clientHeight || window.innerHeight, this)
 		};
 	}
 	#a(e, t) {
-		let n = this.#i(), r = i(this._dialog?.offsetWidth ?? 0, this);
+		let n = this.#i(), r = a(this._dialog?.offsetWidth ?? 0, this);
 		return {
 			x: Math.min(Math.max(e, d - r), n.width - d),
 			y: Math.min(Math.max(t, 0), Math.max(0, n.height - d))
@@ -89,13 +89,13 @@ var d = 24, f = c`
 	#o() {
 		let e = this.#i(), t = this._dialog?.getBoundingClientRect();
 		return {
-			x: (e.width - i(t?.width ?? 0, this)) / 2,
-			y: (e.height - i(t?.height ?? 0, this)) / 2
+			x: (e.width - a(t?.width ?? 0, this)) / 2,
+			y: (e.height - a(t?.height ?? 0, this)) / 2
 		};
 	}
 	placeAt(e, t) {
-		let r = this.#a(e, t);
-		this.left = n(r.x, this), this.top = n(r.y, this);
+		let n = this.#a(e, t);
+		this.left = r(n.x, this), this.top = r(n.y, this);
 	}
 	settle() {
 		let e = this._dialog;
@@ -103,8 +103,8 @@ var d = 24, f = c`
 		let t = this.left != null || this.top != null ? {
 			x: this.left ?? 0,
 			y: this.top ?? 0
-		} : this.#o(), i = this.#a(t.x, t.y);
-		e.style.left = r(n(i.x, this)), e.style.top = r(n(i.y, this)), e.style.right = "auto", e.style.bottom = "auto", e.style.margin = "0";
+		} : this.#o(), n = this.#a(t.x, t.y);
+		e.style.left = i(r(n.x, this)), e.style.top = i(r(n.y, this)), e.style.right = "auto", e.style.bottom = "auto", e.style.margin = "0";
 	}
 	#s() {
 		let e = this._dialog?.style;
@@ -124,7 +124,7 @@ var d = 24, f = c`
 	#u;
 	#d;
 	#f(e) {
-		typeof ResizeObserver < "u" && !this.#u && (this.#u = new ResizeObserver(this.#l), this.#u.observe(e)), window.addEventListener("resize", this.#l), this.#d ??= t(this.#l);
+		typeof ResizeObserver < "u" && !this.#u && (this.#u = new ResizeObserver(this.#l), this.#u.observe(e)), window.addEventListener("resize", this.#l), this.#d ??= n(this.#l);
 	}
 	#p() {
 		this.#u?.disconnect(), this.#u = void 0, window.removeEventListener("resize", this.#l), this.#d?.(), this.#d = void 0;
@@ -143,13 +143,13 @@ var d = 24, f = c`
 		this.#n = "escape";
 	}
 	_onNativeClose() {
-		let e = this.#n ?? "close";
-		this.#n = null, this.#r = null, this.#p(), this.open = !1, this.#s(), o(this, "vf-close", { reason: e });
+		let t = this.#n ?? "close";
+		this.#n = null, this.#r = null, this.#p(), this.open = !1, this.#s(), e(this, "vf-close", { reason: t });
 	}
 };
-a([l({
+o([l({
 	type: Boolean,
 	reflect: !0
-})], p.prototype, "open", void 0), a([l({ type: Number })], p.prototype, "width", void 0), a([l({ type: Number })], p.prototype, "height", void 0), a([l({ type: Number })], p.prototype, "top", void 0), a([l({ type: Number })], p.prototype, "left", void 0), a([u("dialog")], p.prototype, "_dialog", void 0);
+})], p.prototype, "open", void 0), o([l({ type: Number })], p.prototype, "width", void 0), o([l({ type: Number })], p.prototype, "height", void 0), o([l({ type: Number })], p.prototype, "top", void 0), o([l({ type: Number })], p.prototype, "left", void 0), o([u("dialog")], p.prototype, "_dialog", void 0);
 //#endregion
 export { p as VfModalDialog, f as modalDialogStyles };