vintage-frames 0.14.1 → 0.16.0

package/dist/components/vf-select.js

@@ -18,17 +18,18 @@ import { FocusRuleController as C } from "../focus-modality.js";
 import { VfOption as w } from "./vf-option.js";
 import { clampScroll as T, ensureVisibleScroll as E, firstPickableRow as D, lastPickableRow as O, layoutClampedPopup as k } from "../popup-overflow.js";
 import { TypeAheadBuffer as A } from "../type-ahead.js";
-import { css as j, html as M, nothing as N } from "lit";
-import { property as P, query as F, queryAssignedElements as I, state as L } from "lit/decorators.js";
-import { classMap as R } from "lit/directives/class-map.js";
+import { hideFromTopLayer as j, showInTopLayer as M } from "../top-layer.js";
+import { css as N, html as P, nothing as F } from "lit";
+import { property as I, query as L, queryAssignedElements as R, state as z } from "lit/decorators.js";
+import { classMap as B } from "lit/directives/class-map.js";
 //#region src/components/vf-select.ts
-var z = class extends o(S) {
+var V = class extends o(S) {
 	static {
 		this.styles = [
 			l,
 			c,
 			f,
-			j`
+			N`
       :host {
         /* A popup menu is sized to its widest option — never stretched to fill
            its container. fit-content holds that intrinsic width even inside a
@@ -201,7 +202,14 @@ var z = class extends o(S) {
         display: none;
         position: fixed;
         z-index: 10000;
+        /* A manual popover, shown in the top layer while open: the UA's
+           popover box (inset 0, auto margins, overflow, system colors) is
+           reset to the fixed panel positionPanel places. The recipe states
+           the border, padding and background. */
+        inset: auto;
         margin: 0;
+        overflow: visible;
+        color: inherit;
         /* Match the closed pill's 1px hard shadow — the shared .vf-panel recipe
            defaults to the 2px menu shadow, which would overhang the pill's shadow
            by 1px on the right and bottom. */
@@ -492,7 +500,7 @@ var z = class extends o(S) {
 	}
 	async openPanel() {
 		if (this.open || this.isDisabled) return;
-		this.open = !0, this.panelListeners.attach(), await this.updateComplete;
+		this.open = !0, this.panelListeners.attach(), await this.updateComplete, this.open && this.panelEl && M(this.panelEl);
 		let e = this.optionItems.findIndex((e) => e.selected && !e.disabled);
 		e === -1 && (e = this.firstEnabledIndex()), this.positionPanel(Math.max(e, 0)), e !== -1 && this.setActive(e);
 	}
@@ -510,7 +518,7 @@ var z = class extends o(S) {
 		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 = s, 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());
+		this.open && (this.open = !1, this.panelEl && j(this.panelEl), this.cancelBlink(), this.stopArrowScroll(), this.endPress(), this.clearActive(), this.typeAhead.reset(), this.panelListeners.detach(), e && this.controlEl?.focus());
 	}
 	applyScroll() {
 		let e = this.rowScroll * this.rowHeight;
@@ -647,9 +655,9 @@ var z = class extends o(S) {
 	}
 	render() {
 		let e = this.optionItems.find((e) => this.optionValue(e) === this.value), t = e ? (e.textContent ?? "").trim() : "", n = this.isDisabled, r = this.size === "small", i = r ? v : _, a = r ? b : y;
-		return M`
+		return P`
       <div
-        class=${R({
+        class=${B({
 			control: !0,
 			"vf-snap": !0,
 			"vf-focus-rule": this.focusRule.marked && !this.open,
@@ -661,16 +669,16 @@ var z = class extends o(S) {
         aria-expanded=${this.open ? "true" : "false"}
         aria-disabled=${n ? "true" : "false"}
         aria-controls="listbox"
-        aria-label=${this.label || this.hostLabel || N}
+        aria-label=${this.label || this.hostLabel || F}
         aria-describedby=${this.describedBy}
-        aria-required=${this.required ? "true" : N}
-        aria-invalid=${this.validity.valid ? N : "true"}
+        aria-required=${this.required ? "true" : F}
+        aria-invalid=${this.validity.valid ? F : "true"}
         tabindex=${n ? "-1" : "0"}
       >
         <span class="label" part="label">
           <span class="value">${t}</span>
           <span class="sizer" aria-hidden="true">
-            ${this.optionItems.map((e) => M`<span>${(e.textContent ?? "").trim()}</span>`)}
+            ${this.optionItems.map((e) => P`<span>${(e.textContent ?? "").trim()}</span>`)}
           </span>
         </span>
         <span class="arrow" part="arrow" aria-hidden="true"
@@ -681,8 +689,9 @@ var z = class extends o(S) {
         id="listbox"
         class="panel vf-panel ${this.open ? "open" : ""}"
         part="panel"
+        popover="manual"
         role="listbox"
-        aria-label=${this.label || this.hostLabel || N}
+        aria-label=${this.label || this.hostLabel || F}
         aria-hidden=${this.open ? "false" : "true"}
       >
         <!-- role="presentation" on the clip and the strip that carries the
@@ -723,10 +732,10 @@ var z = class extends o(S) {
     `;
 	}
 };
-a([P()], z.prototype, "value", void 0), a([P({ reflect: !0 })], z.prototype, "name", void 0), a([P({ reflect: !0 })], z.prototype, "size", void 0), a([P({
+a([I()], V.prototype, "value", void 0), a([I({ reflect: !0 })], V.prototype, "name", void 0), a([I({ reflect: !0 })], V.prototype, "size", void 0), a([I({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-shadow"
-})], z.prototype, "noShadow", void 0), a([P()], z.prototype, "label", void 0), a([L()], z.prototype, "open", void 0), a([F(".control")], z.prototype, "controlEl", void 0), a([F(".panel")], z.prototype, "panelEl", void 0), a([F(".rows")], z.prototype, "rowsEl", void 0), a([F(".arrow-slot.up")], z.prototype, "upArrowEl", void 0), a([F(".arrow-slot.down")], z.prototype, "downArrowEl", void 0), a([I({ selector: "vf-option" })], z.prototype, "assignedOptions", void 0), a([L()], z.prototype, "cachedOptions", void 0), z = a([n("vf-select")], z);
+})], V.prototype, "noShadow", void 0), a([I()], V.prototype, "label", void 0), a([z()], V.prototype, "open", void 0), a([L(".control")], V.prototype, "controlEl", void 0), a([L(".panel")], V.prototype, "panelEl", void 0), a([L(".rows")], V.prototype, "rowsEl", void 0), a([L(".arrow-slot.up")], V.prototype, "upArrowEl", void 0), a([L(".arrow-slot.down")], V.prototype, "downArrowEl", void 0), a([R({ selector: "vf-option" })], V.prototype, "assignedOptions", void 0), a([z()], V.prototype, "cachedOptions", void 0), V = a([n("vf-select")], V);
 //#endregion
-export { z as VfSelect };
+export { V as VfSelect };

package/dist/components/vf-text-field.d.ts

@@ -11,7 +11,8 @@ declare const VfTextField_base: (new (...args: any[]) => import("../position.js"
  * {@link VfTextControlBase}.
  *
  * @fires vf-input - On every keystroke. `detail: { value: string }`.
- * @fires vf-change - On commit (native `change`). `detail: { value: string }`.
+ * @fires vf-change - On commit: the native `change`, leaving the field, or
+ *   Return in a form, before its submission. `detail: { value: string }`.
  * @fires input - The native keystroke event: the inner input's own, composed,
  *   so it crosses the shadow boundary and retargets to the host by itself.
  * @fires change - The native commit event, re-dispatched from the host (the
@@ -38,10 +39,9 @@ export declare class VfTextField extends VfTextField_base {
     /** The shared forwarded set plus `pattern`, which only an `<input>` takes. */
     protected static readonly forwardedAttributes: readonly string[];
     /**
-     * Enter in a single-line field triggers the associated form's implicit
-     * submission. The native `<input>` is shadow-encapsulated, so its form owner
-     * is null and the browser won't do this itself. A press the form took is
-     * cancelled, so an enclosing modal does not route it again.
+     * Enter in a single-line field commits, then triggers the associated
+     * form's implicit submission. The native `<input>` is shadow-encapsulated,
+     * so its form owner is null and the browser won't do this itself.
      */
     private handleKeydown;
     protected render(): import("lit-html").TemplateResult<1>;

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

@@ -43,7 +43,7 @@ var f = class extends n(o) {
 		this.forwardedAttributes = [...o.forwardedAttributes, "pattern"];
 	}
 	handleKeydown(e) {
-		this.isSubmitEnter(e) && this.requestImplicitSubmit() && e.preventDefault();
+		this.submitOnEnter(e);
 	}
 	render() {
 		return c`

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

@@ -37,7 +37,7 @@ declare const VfWindow_base: (new (...args: any[]) => import("../size.js").VfSiz
  * HIG compliance, it doesn't enforce it (see docs/LAYOUT.md "Window archetypes"):
  * the full document window is `closable zoomable movable resizable
  * scrollbars="both"`, a modeless dialog box is `closable movable`, a utility
- * window is `variant="utility" movable`. Place inside `<vf-desktop>` to get
+ * window is `variant="utility" closable movable`. Place inside `<vf-desktop>` to get
  * click-to-front stacking and automatic `active` management (utility windows
  * float above the document tier).
  *
@@ -105,9 +105,11 @@ declare const VfWindow_base: (new (...args: any[]) => import("../size.js").VfSiz
  * @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).
- * @fires vf-close - Close box clicked. Detail `{ reason: 'close' }` (shape-
- *   compatible with vf-dialog's `vf-close`). The window does NOT
- *   remove itself; the consumer decides what closing means.
+ * @fires vf-close - Close box clicked. Detail `{ reason: 'close', altKey,
+ *   shiftKey, metaKey, ctrlKey }`, the modifier keys held on the click
+ *   (shape-compatible with vf-dialog's `vf-close`), so an Option-click can
+ *   mean more than a click. 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
@@ -146,7 +148,11 @@ export declare class VfWindow extends VfWindow_base {
      * Managed automatically by an enclosing `vf-desktop`.
      */
     active: boolean;
-    /** Show the close box (left side of the title bar). */
+    /**
+     * Show the close box (left side of the title bar). Off by default, like
+     * every other boolean attribute, so markup can leave it out; the document
+     * window and the modeless dialog box recipes say `closable`.
+     */
     closable: boolean;
     /** Show the zoom box (right side of the title bar). */
     zoomable: boolean;
@@ -224,6 +230,17 @@ export declare class VfWindow extends VfWindow_base {
      * the `header` slot is populated.
      */
     headerHeight?: number | null;
+    /**
+     * A 1-bit fill for the body, as on `vf-container`: a library pattern by
+     * name (docs/PATTERNS.md) or sixteen hex digits, under the content and
+     * anchored at the content region's corner. Under `scrollbars` it fills the
+     * scrolled plane and scrolls with it (`vf-scroll-area`'s `pattern`). Unset,
+     * the body stays white; an unrecognized value paints nothing and warns
+     * once.
+     */
+    pattern?: string | null;
+    /** `pattern`, resolved — what the body's fill paints; null paints nothing. */
+    private _pattern;
     /** Whether the `header` slot has assigned content (drives the header). */
     private _hasHeader;
     /** Whether the `status` slot has assigned content (drives the strip). */

package/dist/components/vf-window.js

@@ -5,17 +5,19 @@ import s from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { PlacementController as c, VfPositioned as l, placementIn as u, warnMovableContract as d } from "../position.js";
 import { vfBase as f } from "../styles/recipes/host.js";
 import { RepeatTileController as p, patternOverride as m, tileGrid as h, vfTileGrid as g } from "../tile-grid.js";
-import { DOTS as _, DOT_SPAN as v, vfDots as y, vfStripes as b } from "../styles/recipes/pattern.js";
-import { vfStrokeDecls as x, vfStrokeInset as S } from "../styles/recipes/stroke.js";
-import { vfChromeFrame as C } from "../styles/recipes/surface.js";
-import { vfRule as w } from "../styles/recipes/rule.js";
-import { vfTitleBar as T, vfWindowWidgets as E } from "../styles/recipes/title-bar.js";
-import { vfFocus as D } from "../styles/recipes/focus.js";
-import { GridSnapController as O } from "../grid-snap.js";
-import { DocumentListenersController as k } from "../document-listeners.js";
-import { VfSized as A } from "../size.js";
-import { DragController as j } from "../drag.js";
-import { TitleCenterController as M, chromeTitleBar as N, closeBox as P, widgetLabel as F, zoomBox as I } from "../chrome.js";
+import { parsePattern as ee } from "../patterns.js";
+import { DOTS as _, DOT_SPAN as v, vfDots as te, vfStripes as y } from "../styles/recipes/pattern.js";
+import { vfStrokeDecls as b, vfStrokeInset as x } from "../styles/recipes/stroke.js";
+import { vfChromeFrame as S } from "../styles/recipes/surface.js";
+import { vfRule as C } from "../styles/recipes/rule.js";
+import { vfTitleBar as w, vfWindowWidgets as T } from "../styles/recipes/title-bar.js";
+import { vfFocus as E } from "../styles/recipes/focus.js";
+import { PatternFillController as D, vfPatternFill as O } from "../pattern-fill.js";
+import { GridSnapController as k } from "../grid-snap.js";
+import { DocumentListenersController as A } from "../document-listeners.js";
+import { VfSized as j } from "../size.js";
+import { DragController as ne } from "../drag.js";
+import { TitleCenterController as re, chromeTitleBar as M, closeBox as N, closeKeys as P, widgetLabel as F, zoomBox as I } from "../chrome.js";
 import { prefersReducedMotion as L, windowRectFraction as R } from "../motion.js";
 import { paintSelectionRect as z, penPhase as B, xorPenCanvas as V } from "../open-art.js";
 import "../window-chrome.js";
@@ -28,65 +30,69 @@ function Z(e, t, n) {
 	let r = Math.max(t, e);
 	return n == null ? r : Math.min(n, r);
 }
-var Q = 24, $ = class extends A(l(H)) {
+var Q = 24, $ = class extends j(l(H)) {
 	constructor(...e) {
-		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.outlineDrag = !1, this.resizable = !1, this._hasHeader = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new O(this), this.titleCenter = new M(this), this._dotsPattern = "", this.#e = new p(this, {
+		super(...e), this.heading = "", this.active = !0, this.closable = !1, this.zoomable = !1, this.movable = !1, this.outlineDrag = !1, this.resizable = !1, this._pattern = null, this.#e = !1, this._hasHeader = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new k(this), this.titleCenter = new re(this), this._dotsPattern = "", this.#t = new p(this, {
 			getBox: () => this.renderRoot?.querySelector(".vf-dots"),
 			getArt: () => this.variant === "utility" && !this._dotsPattern ? _ : null,
 			property: "--_vf-dots-tile"
-		}), this.#t = (e, t, n) => {
+		}), this.#n = new D(this, {
+			getBox: () => this.body,
+			getPattern: () => this.scrollbars ? null : this._pattern
+		}), this.#r = (e, t, n) => {
 			let r = o(this.offsetWidth, this);
 			return {
 				x: Math.min(Math.max(e, Q - r), n.width - Q),
 				y: Math.min(Math.max(t, n.top), Math.max(n.top, n.height - Q))
 			};
-		}, this._placement = new c(this, (e, t, n) => this.#t(e, t, n)), this._drag = new j(this, {
+		}, this._placement = new c(this, (e, t, n) => this.#r(e, t, n)), this._drag = new ne(this, {
 			onDragStart: (e) => {
 				if (!this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box"))) return null;
-				this.#S();
+				this.#w();
 				let t = this._placement.seed();
-				return this.#h(t), t;
+				return this.#_(t), t;
 			},
 			onDrag: (e, t) => {
-				this.#f ? this.#g(e, t) : this._placement.moveTo(e, t);
+				this.#m ? this.#v(e, t) : this._placement.moveTo(e, t);
 			},
 			onDragEnd: (e, t) => {
-				this.#y(t);
+				this.#x(t);
 			}
-		}), this._resizeState = null, this.#n = this.attachInternals(), this.#r = null, this.#i = new k(this, () => [[
+		}), this._resizeState = null, this.#i = this.attachInternals(), this.#a = null, this.#o = new A(this, () => [[
 			document,
 			"pointerdown",
-			this.#a,
+			this.#s,
 			!0
 		], [
 			document,
 			"keydown",
-			this.#o,
+			this.#c,
 			!0
-		]]), this.#a = () => {
-			this.#s("finish");
-		}, this.#o = (e) => {
-			e.key !== "Escape" || !this.#r || (e.preventDefault(), e.stopPropagation(), this.#s("finish"));
-		}, this.#f = null, this.#p = new k(this, () => [[
+		]]), this.#s = () => {
+			this.#l("finish");
+		}, this.#c = (e) => {
+			e.key !== "Escape" || !this.#a || (e.preventDefault(), e.stopPropagation(), this.#l("finish"));
+		}, this.#m = null, this.#h = new A(this, () => [[
 			document,
 			"keydown",
-			this.#m,
+			this.#g,
 			!0
-		]]), this.#m = (e) => {
-			e.key !== "Escape" || !this.#f || (e.preventDefault(), e.stopPropagation(), this._drag.cancel());
-		}, this.#b = !1, this.#x = !1;
+		]]), this.#g = (e) => {
+			e.key !== "Escape" || !this.#m || (e.preventDefault(), e.stopPropagation(), this._drag.cancel());
+		}, this.#S = !1, this.#C = !1;
 	}
 	static {
 		this.styles = [
 			f,
-			b,
 			y,
+			te,
 			g,
-			D,
+			E,
+			S,
 			C,
 			w,
 			T,
-			E,
+			O,
 			U`
       :host {
         display: block;
@@ -338,15 +344,15 @@ var Q = 24, $ = class extends A(l(H)) {
          lower-right one clear of its top/left stroke. */
       .grow {
         position: absolute;
-        right: ${S(0)};
-        bottom: ${S(0)};
+        right: ${x(0)};
+        bottom: ${x(0)};
         z-index: 1;
         width: calc(var(--vf-scale, 1) * 15px);
         height: calc(var(--vf-scale, 1) * 15px);
         background: var(--vf-white, #ffffff);
         touch-action: none;
         cursor: var(--vf-cursor, default);
-        ${x({ edges: ["top", "left"] })}
+        ${b({ edges: ["top", "left"] })}
       }
       .grow::before {
         content: '';
@@ -355,17 +361,17 @@ var Q = 24, $ = class extends A(l(H)) {
         bottom: calc(var(--vf-scale, 1) * 1px);
         width: calc(var(--vf-scale, 1) * 9px);
         height: calc(var(--vf-scale, 1) * 9px);
-        ${x()}
+        ${b()}
       }
       .grow::after {
         content: '';
         position: absolute;
-        top: ${S(2)};
-        left: ${S(2)};
+        top: ${x(2)};
+        left: ${x(2)};
         width: calc(var(--vf-scale, 1) * 7px);
         height: calc(var(--vf-scale, 1) * 7px);
         background: var(--vf-white, #ffffff);
-        ${x()}
+        ${b()}
       }
       /* Inactive window: the size box empties with the scroll rails (the same
          HIG no-interactive-UX treatment ScrollStateController drives for the
@@ -386,8 +392,10 @@ var Q = 24, $ = class extends A(l(H)) {
 		};
 	}
 	#e;
+	#t;
+	#n;
 	willUpdate(e) {
-		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = m(this, "--vf-dots-pattern"));
+		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = m(this, "--vf-dots-pattern")), e.has("pattern") && (this._pattern = ee(this.pattern), this._pattern === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-window: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Painting nothing.`)));
 	}
 	_dotsTexture() {
 		if (!this._dotsPattern || this.width == null) return;
@@ -398,7 +406,7 @@ var Q = 24, $ = class extends A(l(H)) {
 			tile: v
 		});
 	}
-	#t;
+	#r;
 	placementAt(e, t, n) {
 		let r = this.scrollArea;
 		return r ? r.placementAt(e, t, n) : u(this.body ?? this, e, t, this, n);
@@ -407,54 +415,54 @@ var Q = 24, $ = class extends A(l(H)) {
 		this.scrollArea?.measure();
 	}
 	async show(e = {}) {
-		this.#s("finish"), this.hidden = !1;
+		this.#l("finish"), this.hidden = !1;
 		let t = e.from;
 		if (!t || L()) return !1;
 		let n = {
 			closing: !1,
 			animations: []
 		};
-		this.#r = n, this.#n.states?.add("opening"), this.#i.attach();
+		this.#a = n, this.#i.states?.add("opening"), this.#o.attach();
 		do
 			await this.updateComplete;
-		while (this.isUpdatePending && this.#r === n);
-		if (this.#r !== n) return !1;
-		let r = this.isConnected ? this.#u(t, this.getBoundingClientRect(), !1) : null;
-		return r ? (n.animations = r.animations, this.#l(n, r)) : (this.#c(), !1);
+		while (this.isUpdatePending && this.#a === n);
+		if (this.#a !== n) return !1;
+		let r = this.isConnected ? this.#f(t, this.getBoundingClientRect(), !1) : null;
+		return r ? (n.animations = r.animations, this.#d(n, r)) : (this.#u(), !1);
 	}
 	async hide(e = {}) {
-		let t = this.#r?.closing === !1, n = !this.hidden && !t;
-		this.#s(t ? "cancel" : "finish");
-		let r = e.to, i = r && n && this.isConnected && !L() ? this.#u(r, this.getBoundingClientRect(), !0) : null;
+		let t = this.#a?.closing === !1, n = !this.hidden && !t;
+		this.#l(t ? "cancel" : "finish");
+		let r = e.to, i = r && n && this.isConnected && !L() ? this.#f(r, this.getBoundingClientRect(), !0) : null;
 		if (this.hidden = !0, !i) return !1;
 		let a = {
 			closing: !0,
 			animations: i.animations
 		};
-		return this.#r = a, this.#i.attach(), this.#l(a, i);
+		return this.#a = a, this.#o.attach(), this.#d(a, i);
 	}
-	#n;
-	#r;
 	#i;
 	#a;
 	#o;
-	#s(e) {
-		let t = this.#r;
+	#s;
+	#c;
+	#l(e) {
+		let t = this.#a;
 		if (t) {
-			this.#c();
+			this.#u();
 			for (let n of t.animations) n[e]();
 		}
 	}
-	#c() {
-		this.#r = null, this.#n.states?.delete("opening"), this.#i.detach();
+	#u() {
+		this.#a = null, this.#i.states?.delete("opening"), this.#o.detach();
 	}
-	async #l(e, t) {
+	async #d(e, t) {
 		let n = await Promise.all(t.animations.map((e) => e.finished)).then(() => !0, () => !1);
 		for (let e of t.canvases) e.remove();
-		return this.#r === e && this.#c(), n;
+		return this.#a === e && this.#u(), n;
 	}
-	#u(e, t, n) {
-		let i = this.#d();
+	#f(e, t, n) {
+		let i = this.#p();
 		if (!i) return null;
 		let o = r(this), s = i.getBoundingClientRect(), c = (e) => ({
 			left: Math.round((e.left - s.left) / o),
@@ -479,36 +487,36 @@ var Q = 24, $ = class extends A(l(H)) {
 		let f = new Animation(new KeyframeEffect(null, null, 306));
 		return f.play(), d.animations.push(f), d;
 	}
-	#d() {
+	#p() {
 		let t = { surface: null };
 		return e(this, "vf-drag-surface-request", t, { composed: !1 }), t.surface;
 	}
-	#f;
-	#p;
 	#m;
-	#h(e) {
-		if (this.#y(!0), !this.outlineDrag) return;
-		let t = this.#v(this.getBoundingClientRect());
-		t && (this.#f = {
+	#h;
+	#g;
+	#_(e) {
+		if (this.#x(!0), !this.outlineDrag) return;
+		let t = this.#b(this.getBoundingClientRect());
+		t && (this.#m = {
 			origin: e,
 			outline: t,
 			landing: null
-		}, this.#_(t, 0, 0), this.#p.attach());
+		}, this.#y(t, 0, 0), this.#h.attach());
 	}
-	#g(e, t) {
-		let n = this.#f;
+	#v(e, t) {
+		let n = this.#m;
 		if (!n) return;
 		let r = this._placement.resolve(e, t);
-		n.landing = r, this.#_(n.outline, r.x - n.origin.x, r.y - n.origin.y);
+		n.landing = r, this.#y(n.outline, r.x - n.origin.x, r.y - n.origin.y);
 	}
-	#_(e, t, n) {
+	#y(e, t, n) {
 		let r = e.base.x + t, i = e.base.y + n;
 		e.canvas.style.left = a(r), e.canvas.style.top = a(i);
 		let o = B(r, i);
 		o !== e.phase && (e.phase = o, z(e.canvas, e.width, e.height, o));
 	}
-	#v(e) {
-		let t = this.#d();
+	#b(e) {
+		let t = this.#p();
 		if (!t) return null;
 		let n = r(this), i = t.getBoundingClientRect(), o = Math.max(1, Math.round(e.width / n)), s = Math.max(1, Math.round(e.height / n)), c = V("drag-outline"), l = c.style;
 		return l.position = "absolute", l.width = a(o), l.height = a(s), t.append(c), {
@@ -522,12 +530,12 @@ var Q = 24, $ = class extends A(l(H)) {
 			phase: -1
 		};
 	}
-	#y(e) {
-		let t = this.#f;
-		this.#f = null, t && (this.#p.detach(), t.outline.canvas.remove(), !e && t.landing && this._placement.moveTo(t.landing.x, t.landing.y));
+	#x(e) {
+		let t = this.#m;
+		this.#m = null, t && (this.#h.detach(), t.outline.canvas.remove(), !e && t.landing && this._placement.moveTo(t.landing.x, t.landing.y));
 	}
 	updated() {
-		this.#C();
+		this.#T();
 		let t = this._resizeState;
 		t?.emitPending && (t.emitPending = !1, e(this, "vf-resize", {
 			width: this.width,
@@ -535,22 +543,22 @@ var Q = 24, $ = class extends A(l(H)) {
 			commit: !1
 		}));
 	}
-	#b;
-	#x;
-	#S() {
-		this.#x ||= d(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
+	#S;
+	#C;
+	#w() {
+		this.#C ||= d(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
 	}
-	#C() {
-		if (this.#b) return;
+	#T() {
+		if (this.#S) return;
 		let e = [];
-		this.width == null && this.style.width === "" && e.push("width (falling back to block layout)"), this.height == null && this.style.height === "" && e.push("height (falling back to the content)"), e.length !== 0 && (this.#b = !0, console.warn(`vf-window${this.heading ? ` ("${this.heading}")` : ""}: no ${e.join(", no ")}. A window owns its whole box — declare both in system px: <vf-window width="240" height="176">.`));
+		this.width == null && this.style.width === "" && e.push("width (falling back to block layout)"), this.height == null && this.style.height === "" && e.push("height (falling back to the content)"), e.length !== 0 && (this.#S = !0, console.warn(`vf-window${this.heading ? ` ("${this.heading}")` : ""}: no ${e.join(", no ")}. A window owns its whole box — declare both in system px: <vf-window width="240" height="176">.`));
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#r && this.#i.attach();
+		super.connectedCallback(), this.#a && this.#o.attach();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._resizeState = null, this.#f?.outline.canvas.remove(), this.#f = null, this.#r && !this.#r.closing && queueMicrotask(() => {
-			!this.isConnected && this.#r?.closing === !1 && this.#s("cancel");
+		super.disconnectedCallback(), this._resizeState = null, this.#m?.outline.canvas.remove(), this.#m = null, this.#a && !this.#a.closing && queueMicrotask(() => {
+			!this.isConnected && this.#a?.closing === !1 && this.#l("cancel");
 		});
 	}
 	_onStatusSlotChange(e) {
@@ -561,8 +569,11 @@ var Q = 24, $ = class extends A(l(H)) {
 		let t = e.target;
 		this._hasHeader = t.assignedElements().length > 0;
 	}
-	_onCloseClick() {
-		e(this, "vf-close", { reason: "close" });
+	_onCloseClick(t) {
+		e(this, "vf-close", {
+			reason: "close",
+			...P(t)
+		});
 	}
 	_onZoomClick() {
 		e(this, "vf-zoom", {});
@@ -605,8 +616,8 @@ var Q = 24, $ = class extends A(l(H)) {
         role="group"
         aria-labelledby=${this.heading ? "title" : G}
       >
-        ${N(this._drag, W`
-            ${this.closable ? P(F("Close", this.heading), this._onCloseClick) : G}
+        ${M(this._drag, W`
+            ${this.closable ? N(F("Close", this.heading), this._onCloseClick) : G}
             <span class="vf-title" part="title" id="title">${this.heading}</span>
             ${this.zoomable ? I(F("Zoom", this.heading), this._onZoomClick) : G}
           `, this.variant === "utility" ? this._dotsPattern ? "vf-dots vf-dots-token" : "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
@@ -617,13 +628,17 @@ var Q = 24, $ = class extends A(l(H)) {
         >
           <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
         </div>
-        <div class="body" part="body">
+        <div
+          class="body vf-pattern-fill${this._pattern && !this.scrollbars ? " vf-patterned" : ""}"
+          part="body"
+        >
           ${this.scrollbars ? W`
                 <vf-scroll-area
                   class="edge-scroll"
                   axis=${this.scrollbars}
                   ?corner=${this.resizable && !this._hasStatus}
                   label=${this.heading || G}
+                  pattern=${this._pattern ? this.pattern : G}
                   exportparts="viewport"
                 >
                   <slot></slot>
@@ -682,6 +697,6 @@ s([K({ reflect: !0 })], $.prototype, "variant", void 0), s([K()], $.prototype, "
 })], $.prototype, "maxHeight", void 0), s([K({ reflect: !0 })], $.prototype, "scrollbars", void 0), s([K({
 	type: Number,
 	attribute: "header-height"
-})], $.prototype, "headerHeight", void 0), s([J()], $.prototype, "_hasHeader", void 0), s([J()], $.prototype, "_hasStatus", void 0), s([q(".body")], $.prototype, "body", void 0), s([q("vf-scroll-area")], $.prototype, "scrollArea", void 0), $ = s([t("vf-window")], $);
+})], $.prototype, "headerHeight", void 0), s([K()], $.prototype, "pattern", void 0), s([J()], $.prototype, "_hasHeader", void 0), s([J()], $.prototype, "_hasStatus", void 0), s([q(".body")], $.prototype, "body", void 0), s([q("vf-scroll-area")], $.prototype, "scrollArea", void 0), $ = s([t("vf-window")], $);
 //#endregion
 export { $ as VfWindow };

package/dist/cursor.d.ts

@@ -18,6 +18,7 @@ export interface VfCursorArt {
      */
     staticSrc?: string | string[];
 }
+/** The four built-in kinds. A page adds its own by name (`kinds`). */
 export type VfCursorKind = 'arrow' | 'text' | 'crosshair' | 'wait';
 export interface VfCursorOptions {
     /** The default pointer. Defaults to the embedded System 7 arrow. */
@@ -30,6 +31,13 @@ export interface VfCursorOptions {
     /** While `aria-busy`. Defaults to the embedded wristwatch; `null`
      *  disables. */
     wait?: VfCursorArt | null;
+    /**
+     * The page's own cursors by name — an eyedropper, a paint bucket —
+     * claimed with `data-vf-cursor="name"` like the built-ins. The arrow
+     * shows while one's art loads, or if it fails to. A built-in's name is
+     * ignored: its own option sets its art.
+     */
+    kinds?: Record<string, VfCursorArt>;
     /**
      * Element whose top-left corner anchors the system-pixel lattice the
      * cursor snaps to. Defaults to the page's `vf-desktop` (else the document