vintage-frames 0.2.0 → 0.3.0

package/dist/components/vf-menu-item.d.ts

@@ -62,12 +62,18 @@ export declare class VfMenuItem extends VfMenuItem_base {
      */
     checkable: boolean;
     /**
-     * Keyboard shortcut text, e.g. `"⌘H"`, drawn left-aligned in the panel's
-     * shared shortcut column. Display only in the
-     * visual sense — the span is `aria-hidden` so the glyphs never concatenate
-     * into the item's accessible name ("Print… place of interest sign P") —
-     * while the host mirrors it as `aria-keyshortcuts` ("Meta+H"), so AT
-     * announces it *as* a shortcut. A consumer's own `aria-keyshortcuts` wins.
+     * Keyboard shortcut, e.g. `"⌘H"`, drawn left-aligned in the panel's
+     * shared shortcut column. The span is `aria-hidden` so the glyphs never
+     * concatenate into the item's accessible name ("Print… place of interest
+     * sign P") — the host mirrors it as `aria-keyshortcuts` ("Meta+H") instead,
+     * so AT announces it *as* a shortcut. A consumer's own `aria-keyshortcuts`
+     * wins.
+     *
+     * Inside a `vf-menu`/`vf-menu-bar` that declares `shortcuts`, this is a
+     * LIVE key equivalent, not a legend: a matching keydown anywhere on the
+     * page activates the item — menu open or not — claiming the stroke with
+     * `preventDefault()` (see the document keydown handler below for the full
+     * contract).
      */
     shortcut: string;
     /**

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

@@ -24,7 +24,20 @@ function b(e) {
 	let r = t.join("");
 	return r ? [...n, r].join("+") : "";
 }
-var x = class extends r(f) {
+function x(e, t) {
+	let n = [...t.trim()], r = {
+		Meta: !1,
+		Control: !1,
+		Alt: !1,
+		Shift: !1
+	};
+	for (; n.length > 0 && y.has(n[0]);) r[y.get(n.shift())] = !0;
+	let i = n.join("");
+	if (!i || !r.Meta && !r.Control && !r.Alt && [...i].length === 1) return !1;
+	let a = r.Meta ? e.metaKey || e.ctrlKey : !e.metaKey, o = r.Control ? e.ctrlKey : r.Meta || !e.ctrlKey;
+	return a && o && e.altKey === r.Alt && e.shiftKey === r.Shift && e.key.toLowerCase() === i.toLowerCase();
+}
+var S = class extends r(f) {
 	static {
 		this.styles = [
 			a,
@@ -161,19 +174,21 @@ var x = class extends r(f) {
 	#r;
 	#i;
 	constructor() {
-		super(), this.scale = new t(this), this.disabled = !1, this.checked = !1, this.active = !1, this.checkable = !1, this.shortcut = "", this._blinkPhase = null, this.#t = !1, this.#n = !1, this.#r = this.attachInternals(), this.#i = !1, this.addEventListener("keydown", this.#u), this.addEventListener("pointerdown", this.#c), this.addEventListener("click", this.#l);
+		super(), this.scale = new t(this), this.disabled = !1, this.checked = !1, this.active = !1, this.checkable = !1, this.shortcut = "", this._blinkPhase = null, this.#t = !1, this.#n = !1, this.#r = this.attachInternals(), this.#i = !1, this.#d = (e) => {
+			e.defaultPrevented || e.isComposing || this.disabled || !this.shortcut || this.closest("vf-menu[shortcuts], vf-menu-bar[shortcuts]") && x(e, this.shortcut) && (e.preventDefault(), !(e.repeat || this.#t) && (c(this, "vf-menu-flash-request", { item: this }, { composed: !1 }), this.activate()));
+		}, this.addEventListener("keydown", this.#u), this.addEventListener("pointerdown", this.#c), this.addEventListener("click", this.#l);
 	}
 	get #a() {
 		return this.checkable || this.#n;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#s(), this.#o(), this.hasAttribute("tabindex") || (this.tabIndex = -1);
+		super.connectedCallback(), this.#s(), this.#o(), this.hasAttribute("tabindex") || (this.tabIndex = -1), document.addEventListener("keydown", this.#d);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#d();
+		super.disconnectedCallback(), document.removeEventListener("keydown", this.#d), this.#f();
 	}
 	updated(e) {
-		e.has("disabled") && (this.#r.ariaDisabled = this.disabled ? "true" : null, this.disabled && this.#d()), e.has("checked") && this.checked && (this.#n = !0), (e.has("checked") || e.has("checkable")) && this.#s(), e.has("shortcut") && this.#o();
+		e.has("disabled") && (this.#r.ariaDisabled = this.disabled ? "true" : null, this.disabled && this.#f()), e.has("checked") && this.checked && (this.#n = !0), (e.has("checked") || e.has("checkable")) && this.#s(), e.has("shortcut") && this.#o();
 	}
 	#o() {
 		this.#r.ariaKeyShortcuts = b(this.shortcut) || null;
@@ -215,39 +230,42 @@ var x = class extends r(f) {
 	#u(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), this.activate());
 	}
+	#d;
 	activate() {
 		if (this.disabled || this.#t) return;
 		this.#t = !0;
 		let e = l((e) => {
 			this._blinkPhase = e ? "on" : "off";
 		}, () => {
-			this._blinkPhase = null, this.#t = !1, this.#e = void 0, this.#f();
+			this._blinkPhase = null, this.#t = !1, this.#e = void 0, this.#p();
 		});
 		this.#t && (this.#e = e);
 	}
-	#d() {
+	#f() {
 		this.#t && (this.#e?.cancel(), this.#e = void 0, this.#t = !1, this._blinkPhase = null);
 	}
-	#f() {
+	#p() {
 		let e = this.value ?? (this.textContent ?? "").trim();
 		c(this, "vf-menu-select", {
 			value: e,
 			item: this
-		}), c(this, "vf-menu-close-request", { item: this }, { composed: !1 });
+		});
+		let t = this.closest("vf-menu");
+		(!t || t.hasAttribute("open")) && c(this, "vf-menu-close-request", { item: this }, { composed: !1 });
 	}
 };
 n([g({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "disabled", void 0), n([g({
+})], S.prototype, "disabled", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "checked", void 0), n([g({
+})], S.prototype, "checked", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "active", void 0), n([g({
+})], S.prototype, "active", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "checkable", void 0), n([g()], x.prototype, "shortcut", void 0), n([g()], x.prototype, "value", void 0), n([_()], x.prototype, "_blinkPhase", void 0), x = n([e("vf-menu-item")], x);
+})], S.prototype, "checkable", void 0), n([g()], S.prototype, "shortcut", void 0), n([g()], S.prototype, "value", void 0), n([_()], S.prototype, "_blinkPhase", void 0), S = n([e("vf-menu-item")], S);
 //#endregion
-export { x as VfMenuItem };
+export { S as VfMenuItem };

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

@@ -29,7 +29,8 @@ declare const VfMenu_base: (new (...args: any[]) => import("../position.js").VfP
  *   icon for the Apple menu. Keep the `label` attribute set too: it stays the
  *   menu's accessible name (the bar item's `aria-label` and the panel's) when
  *   the visible title is an image.
- * @csspart label - The menu title in the bar (inverts while open).
+ * @csspart label - The menu title in the bar (inverts while open; flashes
+ *   when a closed menu's item is activated by its key equivalent).
  * @csspart panel - The dropped `.vf-panel` containing the items.
  * @cssprop [--vf-menubar-height=20px] - `vf-menu-bar`
  * @cssprop [--vf-menu-row-height=16px] - `vf-menu-item` row pitch; the panel
@@ -53,6 +54,16 @@ export declare class VfMenu extends VfMenu_base {
      * `vf-menu-bar` when present, otherwise by the menu itself.
      */
     open: boolean;
+    /**
+     * Makes the items' `shortcut`s live key equivalents: a matching keydown
+     * anywhere on the page activates the item — menu open or not — and a
+     * closed menu answers by flashing its bar title, MenuKey's acknowledgment.
+     * Off by default because key equivalents are page-global and a page may
+     * hold several menus of which only one is *the* menu bar; on a bar, declare
+     * it there once for every menu in it. The full claim contract lives on
+     * `vf-menu-item.shortcut`.
+     */
+    shortcuts: boolean;
     /**
      * The bar label's tabindex. A parent `vf-menu-bar` owns a roving tabindex
      * across its menus and sets this to 0 on the active menu, -1 on the rest,
@@ -77,6 +88,8 @@ export declare class VfMenu extends VfMenu_base {
      * src/menu-press.ts), so it wants the box, not the element.
      */
     get labelRect(): DOMRect | null;
+    /** `true` while the key-equivalent flash paints the title inverted. */
+    private _flashOn;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: Map<PropertyKey, unknown>): void;

package/dist/components/vf-menu.js

@@ -9,15 +9,16 @@ 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 { 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 r(_) {
 	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 t(this), this.gridSnap = new c(this), this.#e = new m(this), this.label = "", this.open = !1, this.shortcuts = !1, this.barTabIndex = 0, this.#t = new g(this, {
 			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,21 +66,21 @@ var C = class extends r(g) {
 					break;
 				}
 			}
-		}, this.#u = new l(this, () => [[
+		}, this.#p = new l(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);
 		};
 	}
@@ -82,7 +89,7 @@ var C = class extends r(g) {
 			a,
 			i,
 			o,
-			_`
+			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
@@ -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,13 +308,13 @@ 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;
@@ -307,41 +324,44 @@ var C = class extends r(g) {
 			composed: !1
 		}) && (this.open = !this.open);
 	}
-	#h() {
+	#v() {
 		this.#a = !0, u(() => {
 			this.#a = !1;
 		});
 	}
-	#g(e) {
+	#y(e) {
 		if (this.#a) {
 			this.#a = !1;
 			return;
 		}
-		d(this, e, () => this.#m());
+		d(this, e, () => this.#_());
 	}
-	#_() {
+	#b() {
 		f(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({
+n([x()], T.prototype, "label", void 0), n([x({
+	type: Boolean,
+	reflect: !0
+})], T.prototype, "open", void 0), n([x({
 	type: Boolean,
 	reflect: !0
-})], C.prototype, "open", void 0), n([b({
+})], T.prototype, "shortcuts", void 0), n([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), n([S(".label")], T.prototype, "_labelEl", void 0), n([C({
 	selector: "vf-menu-item",
 	flatten: !0
-})], C.prototype, "_assignedItems", void 0), C = n([e("vf-menu")], C);
+})], T.prototype, "_assignedItems", void 0), n([w()], T.prototype, "_flashOn", void 0), T = n([e("vf-menu")], T);
 //#endregion
-export { C as VfMenu };
+export { T as VfMenu };

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

@@ -13,11 +13,14 @@ declare const VfRadio_base: (new (...args: any[]) => import("../position.js").Vf
  * unselects its siblings.
  *
  * @slot - The label, rendered to the right of the circle with a 6px gap.
+ *   Left empty, the label and its gap collapse: the control is the bare
+ *   13×13 circle.
  * @csspart circle - The 13×13 radio circle.
  * @csspart label - The label wrapper around the slot.
  * @fires vf-change - When selected by user interaction. `detail: { value: string }`.
  */
 export declare class VfRadio extends VfRadio_base {
+    #private;
     static styles: import("lit").CSSResult[];
     /** Whether this radio is selected. Managed by the containing group. */
     checked: boolean;
@@ -30,6 +33,8 @@ export declare class VfRadio extends VfRadio_base {
      * group — not intended to be set by consumers.
      */
     groupDisabled: boolean;
+    /** Whether the slot holds non-whitespace content; gates the label row. */
+    private _hasLabel;
     private readonly internals;
     constructor();
     /**

package/dist/components/vf-radio.js

@@ -9,10 +9,10 @@ import { emit as s } from "../events.js";
 import { RADIO_DOT as c, RADIO_FACE as l, RADIO_RING as u, RADIO_RING_PRESSED as d } from "../glyphs.js";
 import { VfToggleControl as f } from "../toggle-control.js";
 import { LitElement as p, css as m, html as h } from "lit";
-import { property as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
+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 v = class extends n(f(p)) {
+var y = class extends n(f(p)) {
 	static {
 		this.styles = [
 			i,
@@ -82,7 +82,7 @@ var v = class extends n(f(p)) {
 		];
 	}
 	constructor() {
-		super(), this.checked = !1, this.disabled = !1, this.value = "", this.groupDisabled = !1, this.internals = this.attachInternals(), this.internals.role = "radio";
+		super(), this.checked = !1, this.disabled = !1, this.value = "", this.groupDisabled = !1, this._hasLabel = !1, this.internals = this.attachInternals(), this.internals.role = "radio";
 	}
 	get toggleInternals() {
 		return this.internals;
@@ -97,7 +97,7 @@ var v = class extends n(f(p)) {
 		let e = this.toggleDisabled;
 		return h`
       <span
-        class=${_({
+        class=${v({
 			circle: !0,
 			dim: e,
 			"vf-snap": !0
@@ -112,14 +112,19 @@ var v = class extends n(f(p)) {
           <path class="dot" d=${c.d}></path>
         </svg>
       </span>
-      <span class=${_({
+      <span class=${v({
 			label: !0,
-			dim: e
+			dim: e,
+			empty: !this._hasLabel
 		})} part="label">
-        <slot></slot>
+        <slot @slotchange=${this.#e}></slot>
       </span>
     `;
 	}
+	#e(e) {
+		let t = e.target;
+		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 }));
 	}
@@ -127,9 +132,9 @@ var v = class extends n(f(p)) {
 t([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "checked", void 0), t([g({
+})], y.prototype, "checked", void 0), t([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "disabled", void 0), t([g()], v.prototype, "value", void 0), t([g({ attribute: !1 })], v.prototype, "groupDisabled", void 0), v = t([e("vf-radio")], v);
+})], 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);
 //#endregion
-export { v as VfRadio };
+export { y as VfRadio };

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;