vintage-frames 0.14.0 → 0.15.0

package/dist/index.js

@@ -31,46 +31,47 @@ import { VfDesktop as He } from "./components/vf-desktop.js";
 import { VfSized as Ue } from "./size.js";
 import { DragController as We } from "./drag.js";
 import { BLINK_FLIPS as Ge, BLINK_INTERVAL_MS as Ke, DRAG_SLOP_COARSE_PX as qe, DRAG_SLOP_PX as Je, PRESS_HOLD_MS as Ye, RENAME_DELAY_MS as Xe, TAP_PAIR_MS as Ze, TAP_PAIR_SLOP_PX as Qe, WALK_BEAT_MS as $e, WALK_STEP_MS as et, WALK_STEP_PX as tt, WINDOW_RECTS_VISIBLE as nt, WINDOW_RECT_RATIO as rt, WINDOW_RECT_STEPS as it, WINDOW_RECT_STEP_MS as at, dragSlop as ot, prefersReducedMotion as st, runOutlineTravel as ct, runSelectionBlink as lt, windowRectFraction as ut } from "./motion.js";
-import { ScrollStateController as dt } from "./scroll-state.js";
-import { CARET_DOWN as ft, CARET_DOWN_SMALL as pt, CHECKBOX_X as mt, CHECKMARK as ht, RADIO_DOT as gt, RADIO_FACE as _t, RADIO_RING as vt, RADIO_RING_PRESSED as yt, SLIDER_THUMB as bt, SLIDER_THUMB_FACE as xt, STEPPER as St, STEPPER_DOWN_FILL as Ct, STEPPER_UP_FILL as wt, glyphSvg as Tt } from "./glyphs.js";
-import { ScrollRailController as Et, renderScrollRail as Dt } from "./scroll-rail.js";
-import { VfScrollArea as Ot } from "./components/vf-scroll-area.js";
-import { VfWindow as kt } from "./components/vf-window.js";
-import { VfModalDialog as At, modalDialogStyles as jt } from "./modal-dialog.js";
-import { VfDialog as Mt } from "./components/vf-dialog.js";
-import { VfSeparator as Nt } from "./components/vf-separator.js";
-import { VfFormControl as Pt } from "./form-control.js";
-import { VfButton as Ft } from "./components/vf-button.js";
-import { VfButtonGroup as It } from "./components/vf-button-group.js";
-import { VfSwatch as Lt } from "./components/vf-swatch.js";
-import { VfToggleControl as Rt } from "./toggle-control.js";
-import { VfCheckbox as zt } from "./components/vf-checkbox.js";
-import { VfRadio as Bt } from "./components/vf-radio.js";
-import { VfRadioGroup as Vt } from "./components/vf-radio-group.js";
-import { FocusRuleController as Ht, focusModality as Ut, trackFocusModality as Wt } from "./focus-modality.js";
-import { VfTextControlBase as Gt } from "./text-control.js";
-import { VfTextField as Kt } from "./components/vf-text-field.js";
-import { VfTextArea as qt } from "./components/vf-text-area.js";
-import { VfNumberField as Jt } from "./components/vf-number-field.js";
-import { VfOption as Yt } from "./components/vf-option.js";
-import { VfSelect as Xt } from "./components/vf-select.js";
-import { TrackWidthController as Zt } from "./track-width.js";
-import { VfProgressBar as Qt } from "./components/vf-progress-bar.js";
-import { VfSlider as $t } from "./components/vf-slider.js";
-import { VfLabel as en } from "./components/vf-label.js";
-import { VfParagraph as tn } from "./components/vf-paragraph.js";
-import { VfImg as nn } from "./components/vf-img.js";
-import { VfIcon as rn } from "./components/vf-icon.js";
-import { VfIconField as an } from "./components/vf-icon-field.js";
-import { VfMenuBar as on } from "./components/vf-menu-bar.js";
-import { VfMenu as sn } from "./components/vf-menu.js";
-import { VfMenuItem as cn } from "./components/vf-menu-item.js";
-import { VfList as ln } from "./components/vf-list.js";
-import { VfListItem as un } from "./components/vf-list-item.js";
-import { VfFieldset as dn } from "./components/vf-fieldset.js";
-import { VfGrid as fn } from "./components/vf-grid.js";
-import { VfStack as pn } from "./components/vf-stack.js";
-import { VfContainer as mn } from "./components/vf-container.js";
-import { CURSOR_ARROW as hn, CURSOR_CROSSHAIR as gn, CURSOR_I_BEAM as _n, CURSOR_WAIT as vn } from "./cursor-art.js";
-import { applyCursor as yn } from "./cursor.js";
-export { Ge as BLINK_FLIPS, Ke as BLINK_INTERVAL_MS, Ne as BUTTON_FACE, Pe as BUTTON_FRAME, ft as CARET_DOWN, pt as CARET_DOWN_SMALL, mt as CHECKBOX_X, ht as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, hn as CURSOR_ARROW, gn as CURSOR_CROSSHAIR, _n as CURSOR_I_BEAM, vn as CURSOR_WAIT, qe as DRAG_SLOP_COARSE_PX, Je as DRAG_SLOP_PX, Me as DocumentListenersController, We as DragController, Ht as FocusRuleController, Ae as GridSnapController, $ as PATTERNS, ee as PATTERN_NAMES, te as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ye as PRESS_HOLD_MS, Oe as PatternFillController, T as PlacementController, gt as RADIO_DOT, _t as RADIO_FACE, vt as RADIO_RING, yt as RADIO_RING_PRESSED, Xe as RENAME_DELAY_MS, G as REPEAT_TILE, Fe as RING_FRAME, Ie as RING_HOLE, Le as RING_INSET, ge as RULE_EDGES, K as RepeatTileController, Re as SCREEN_CORNER, bt as SLIDER_THUMB, xt as SLIDER_THUMB_FACE, St as STEPPER, Ct as STEPPER_DOWN_FILL, wt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, Et as ScrollRailController, dt as ScrollStateController, Ze as TAP_PAIR_MS, Qe as TAP_PAIR_SLOP_PX, R as TILE_LATTICE, Zt as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, Ft as VfButton, It as VfButtonGroup, zt as VfCheckbox, mn as VfContainer, He as VfDesktop, Mt as VfDialog, dn as VfFieldset, Pt as VfFormControl, fn as VfGrid, rn as VfIcon, an as VfIconField, nn as VfImg, en as VfLabel, ln as VfList, un as VfListItem, sn as VfMenu, on as VfMenuBar, cn as VfMenuItem, At as VfModalDialog, Jt as VfNumberField, Yt as VfOption, tn as VfParagraph, E as VfPositioned, Qt as VfProgressBar, Bt as VfRadio, Vt as VfRadioGroup, Ot as VfScrollArea, Xt as VfSelect, Nt as VfSeparator, Ue as VfSized, $t as VfSlider, pn as VfStack, Lt as VfSwatch, qt as VfTextArea, Gt as VfTextControlBase, Kt as VfTextField, Rt as VfToggleControl, kt as VfWindow, $e as WALK_BEAT_MS, et as WALK_STEP_MS, tt as WALK_STEP_PX, nt as WINDOW_RECTS_VISIBLE, rt as WINDOW_RECT_RATIO, it as WINDOW_RECT_STEPS, at as WINDOW_RECT_STEP_MS, yn as applyCursor, f as applyScale, t as defineElement, q as devicePxAt, o as devicePxPerSystemPx, ot as dragSlop, p as effectiveScale, e as emit, Ut as focusModality, m as getScale, s as getZoom, Tt as glyphSvg, jt as modalDialogStyles, h as onScaleChange, c as onZoomChange, ne as parsePattern, _e as parseRule, re as patternHex, ie as patternMotif, J as patternOverride, ae as patternRects, st as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, Dt as renderScrollRail, Y as repeatTile, je as requestGridSnap, l as resetZoomBaseline, ve as ruleClasses, ct as runOutlineTravel, lt as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, ze as steppedCornerClip, Be as steppedRectClip, Ve as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, X as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, Wt as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, pe as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, oe as vfDots, n as vfElement, Ee as vfField, Se as vfFocus, Ce as vfFocusRing, we as vfFocusUnderline, ce as vfHardShadow, le as vfHardShadowDecls, me as vfModalFrame, he as vfPanel, ke as vfPatternFill, Z as vfRepeatTileSize, ye as vfRule, De as vfScrollRail, L as vfStaticText, se as vfStripes, ue as vfStrokeDecls, de as vfStrokeInset, fe as vfStrokeShadow, Q as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, be as vfTitleBar, Te as vfToggle, xe as vfWindowWidgets, ut as windowRectFraction };
+import { WINDOW_MIN_HEIGHT as dt, WINDOW_MIN_WIDTH as ft, windowChrome as pt } from "./window-chrome.js";
+import { ScrollStateController as mt } from "./scroll-state.js";
+import { CARET_DOWN as ht, CARET_DOWN_SMALL as gt, CHECKBOX_X as _t, CHECKMARK as vt, RADIO_DOT as yt, RADIO_FACE as bt, RADIO_RING as xt, RADIO_RING_PRESSED as St, SLIDER_THUMB as Ct, SLIDER_THUMB_FACE as wt, STEPPER as Tt, STEPPER_DOWN_FILL as Et, STEPPER_UP_FILL as Dt, glyphSvg as Ot } from "./glyphs.js";
+import { ScrollRailController as kt, renderScrollRail as At } from "./scroll-rail.js";
+import { VfScrollArea as jt } from "./components/vf-scroll-area.js";
+import { VfWindow as Mt } from "./components/vf-window.js";
+import { VfModalDialog as Nt, modalDialogStyles as Pt } from "./modal-dialog.js";
+import { VfDialog as Ft } from "./components/vf-dialog.js";
+import { VfSeparator as It } from "./components/vf-separator.js";
+import { VfFormControl as Lt } from "./form-control.js";
+import { VfButton as Rt } from "./components/vf-button.js";
+import { VfButtonGroup as zt } from "./components/vf-button-group.js";
+import { VfSwatch as Bt } from "./components/vf-swatch.js";
+import { VfToggleControl as Vt } from "./toggle-control.js";
+import { VfCheckbox as Ht } from "./components/vf-checkbox.js";
+import { VfRadio as Ut } from "./components/vf-radio.js";
+import { VfRadioGroup as Wt } from "./components/vf-radio-group.js";
+import { FocusRuleController as Gt, focusModality as Kt, trackFocusModality as qt } from "./focus-modality.js";
+import { VfTextControlBase as Jt } from "./text-control.js";
+import { VfTextField as Yt } from "./components/vf-text-field.js";
+import { VfTextArea as Xt } from "./components/vf-text-area.js";
+import { VfNumberField as Zt } from "./components/vf-number-field.js";
+import { VfOption as Qt } from "./components/vf-option.js";
+import { VfSelect as $t } from "./components/vf-select.js";
+import { TrackWidthController as en } from "./track-width.js";
+import { VfProgressBar as tn } from "./components/vf-progress-bar.js";
+import { VfSlider as nn } from "./components/vf-slider.js";
+import { VfLabel as rn } from "./components/vf-label.js";
+import { VfParagraph as an } from "./components/vf-paragraph.js";
+import { VfImg as on } from "./components/vf-img.js";
+import { VfIcon as sn } from "./components/vf-icon.js";
+import { VfIconField as cn } from "./components/vf-icon-field.js";
+import { VfMenuBar as ln } from "./components/vf-menu-bar.js";
+import { VfMenu as un } from "./components/vf-menu.js";
+import { VfMenuItem as dn } from "./components/vf-menu-item.js";
+import { VfList as fn } from "./components/vf-list.js";
+import { VfListItem as pn } from "./components/vf-list-item.js";
+import { VfFieldset as mn } from "./components/vf-fieldset.js";
+import { VfGrid as hn } from "./components/vf-grid.js";
+import { VfStack as gn } from "./components/vf-stack.js";
+import { VfContainer as _n } from "./components/vf-container.js";
+import { CURSOR_ARROW as vn, CURSOR_CROSSHAIR as yn, CURSOR_I_BEAM as bn, CURSOR_WAIT as xn } from "./cursor-art.js";
+import { applyCursor as Sn } from "./cursor.js";
+export { Ge as BLINK_FLIPS, Ke as BLINK_INTERVAL_MS, Ne as BUTTON_FACE, Pe as BUTTON_FRAME, ht as CARET_DOWN, gt as CARET_DOWN_SMALL, _t as CHECKBOX_X, vt as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, vn as CURSOR_ARROW, yn as CURSOR_CROSSHAIR, bn as CURSOR_I_BEAM, xn as CURSOR_WAIT, qe as DRAG_SLOP_COARSE_PX, Je as DRAG_SLOP_PX, Me as DocumentListenersController, We as DragController, Gt as FocusRuleController, Ae as GridSnapController, $ as PATTERNS, ee as PATTERN_NAMES, te as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ye as PRESS_HOLD_MS, Oe as PatternFillController, T as PlacementController, yt as RADIO_DOT, bt as RADIO_FACE, xt as RADIO_RING, St as RADIO_RING_PRESSED, Xe as RENAME_DELAY_MS, G as REPEAT_TILE, Fe as RING_FRAME, Ie as RING_HOLE, Le as RING_INSET, ge as RULE_EDGES, K as RepeatTileController, Re as SCREEN_CORNER, Ct as SLIDER_THUMB, wt as SLIDER_THUMB_FACE, Tt as STEPPER, Et as STEPPER_DOWN_FILL, Dt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, kt as ScrollRailController, mt as ScrollStateController, Ze as TAP_PAIR_MS, Qe as TAP_PAIR_SLOP_PX, R as TILE_LATTICE, en as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, Rt as VfButton, zt as VfButtonGroup, Ht as VfCheckbox, _n as VfContainer, He as VfDesktop, Ft as VfDialog, mn as VfFieldset, Lt as VfFormControl, hn as VfGrid, sn as VfIcon, cn as VfIconField, on as VfImg, rn as VfLabel, fn as VfList, pn as VfListItem, un as VfMenu, ln as VfMenuBar, dn as VfMenuItem, Nt as VfModalDialog, Zt as VfNumberField, Qt as VfOption, an as VfParagraph, E as VfPositioned, tn as VfProgressBar, Ut as VfRadio, Wt as VfRadioGroup, jt as VfScrollArea, $t as VfSelect, It as VfSeparator, Ue as VfSized, nn as VfSlider, gn as VfStack, Bt as VfSwatch, Xt as VfTextArea, Jt as VfTextControlBase, Yt as VfTextField, Vt as VfToggleControl, Mt as VfWindow, $e as WALK_BEAT_MS, et as WALK_STEP_MS, tt as WALK_STEP_PX, dt as WINDOW_MIN_HEIGHT, ft as WINDOW_MIN_WIDTH, nt as WINDOW_RECTS_VISIBLE, rt as WINDOW_RECT_RATIO, it as WINDOW_RECT_STEPS, at as WINDOW_RECT_STEP_MS, Sn as applyCursor, f as applyScale, t as defineElement, q as devicePxAt, o as devicePxPerSystemPx, ot as dragSlop, p as effectiveScale, e as emit, Kt as focusModality, m as getScale, s as getZoom, Ot as glyphSvg, Pt as modalDialogStyles, h as onScaleChange, c as onZoomChange, ne as parsePattern, _e as parseRule, re as patternHex, ie as patternMotif, J as patternOverride, ae as patternRects, st as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, At as renderScrollRail, Y as repeatTile, je as requestGridSnap, l as resetZoomBaseline, ve as ruleClasses, ct as runOutlineTravel, lt as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, ze as steppedCornerClip, Be as steppedRectClip, Ve as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, X as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, qt as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, pe as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, oe as vfDots, n as vfElement, Ee as vfField, Se as vfFocus, Ce as vfFocusRing, we as vfFocusUnderline, ce as vfHardShadow, le as vfHardShadowDecls, me as vfModalFrame, he as vfPanel, ke as vfPatternFill, Z as vfRepeatTileSize, ye as vfRule, De as vfScrollRail, L as vfStaticText, se as vfStripes, ue as vfStrokeDecls, de as vfStrokeInset, fe as vfStrokeShadow, Q as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, be as vfTitleBar, Te as vfToggle, xe as vfWindowWidgets, pt as windowChrome, ut as windowRectFraction };

package/dist/modal-dialog.d.ts

@@ -7,6 +7,16 @@ import { ScaleController } from './scale.js';
  * — a click outside the frame.
  */
 export type VfCloseReason = 'escape' | 'close' | 'outside';
+/** The `vf-close` event's detail. */
+export interface VfCloseDetail {
+    reason: VfCloseReason;
+    /**
+     * The value this close carried — the submitting button's `value`, or
+     * `close(value)`'s — or null when it carried none: Escape, a click
+     * outside, `close()` alone, or removal from the DOM.
+     */
+    returnValue: string | null;
+}
 /**
  * The width an undeclared modal falls back to, in system px — a classic
  * dialog's own measure, wide enough for a line of chrome text and a button row.
@@ -49,12 +59,18 @@ export declare const modalDialogStyles: import("lit").CSSResult;
  * closed and re-centered, and focus returns to the element that was focused
  * when the modal opened.
  *
+ * A `<form method="dialog">` inside the modal closes it with the submitting
+ * button's `value` as {@link returnValue}, as a form inside a native
+ * `<dialog>` does. The platform's own rule looks for a `<dialog>` around the
+ * form, and this one is in the shadow root, so the modal listens for the
+ * submit itself.
+ *
  * Subclasses supply only the frame chrome: a `render()` returning
  * `<dialog @cancel=${this._onNativeCancel} @close=${this._onNativeClose}>` with
  * their role/ARIA and body, and {@link modalDialogStyles} in `static styles`.
  *
  * @fires vf-close - The modal closed. `detail: { reason: 'escape' | 'close' |
- *   'outside' }`.
+ *   'outside', returnValue: string | null }`.
  */
 export declare class VfModalDialog extends LitElement {
     #private;
@@ -62,6 +78,13 @@ export declare class VfModalDialog extends LitElement {
     protected readonly scale: ScaleController;
     /** Whether the modal is open. Kept in sync with the native `<dialog>`. */
     open: boolean;
+    /**
+     * The modal's answer, as on `<dialog>`: set by `close(value)` and by a
+     * submit from a `<form method="dialog">` inside it (the submitting
+     * button's `value`). Cleared on each open, so a dialog asked again doesn't
+     * start with its last answer.
+     */
+    returnValue: string;
     /**
      * Modal width in whole system px — the art's own unit, so the box holds its
      * proportion to the chrome inside it at every display density.
@@ -130,6 +153,7 @@ export declare class VfModalDialog extends LitElement {
      * drag from squeezing the box.
      */
     protected get dialogSize(): Record<string, string | null>;
+    constructor();
     /**
      * The dialog's default button — the one wearing the bold ring
      * (`vf-button[variant="default"]`) — or null with none, or none enabled.
@@ -159,8 +183,11 @@ export declare class VfModalDialog extends LitElement {
     protected get initialFocusTarget(): HTMLElement | null;
     /** Open the modal (native `showModal()`), pinned onto the device grid. */
     show(): void;
-    /** Close the modal. Fires `vf-close` with `{ reason: 'close' }`. */
-    close(): void;
+    /**
+     * Close the modal, with `returnValue` as its answer when one is given.
+     * Fires `vf-close` with `{ reason: 'close', returnValue }`.
+     */
+    close(returnValue?: string): void;
     protected updated(changed: PropertyValues<this>): void;
     /**
      * State the origin, in system px — clamped on screen and snapped onto the
@@ -197,7 +224,7 @@ export declare class VfModalDialog extends LitElement {
      * the written origin so the next open re-derives it from the box it will
      * actually have (a stated `top`/`left` is the author's or the user's and
      * survives, and is re-applied by that open), syncs `open`, and fires
-     * `vf-close` with the reason.
+     * `vf-close` with the reason and the value the close carried.
      */
     protected _onNativeClose(): void;
 }

package/dist/modal-dialog.js

@@ -1,10 +1,10 @@
-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 { DocumentListenersController as s } from "./document-listeners.js";
-import { LitElement as c, css as l } from "lit";
-import { property as u, query as d } from "lit/decorators.js";
-var f = 24, p = /* @__PURE__ */ new Set([
+import { deferActivation as e, emit as t } from "./events.js";
+import { ScaleController as n, onScaleChange as r, snapSys as i, sysLength as a, toSysExact as o } from "./scale.js";
+import s from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { DocumentListenersController as c } from "./document-listeners.js";
+import { LitElement as l, css as u } from "lit";
+import { property as d, query as f } from "lit/decorators.js";
+var p = 24, m = /* @__PURE__ */ new Set([
 	"text",
 	"search",
 	"url",
@@ -12,7 +12,7 @@ var f = 24, p = /* @__PURE__ */ new Set([
 	"email",
 	"password",
 	"number"
-]), m = (e) => e instanceof HTMLInputElement ? p.has(e.type) : !0, h = l`
+]), h = (e) => e instanceof HTMLInputElement ? m.has(e.type) : !0, g = u`
   dialog {
     padding: 0;
     margin: auto;
@@ -51,110 +51,119 @@ var f = 24, p = /* @__PURE__ */ new Set([
        the fallback is the arrow it always showed. */
     cursor: var(--vf-cursor, default);
   }
-`, g = class extends c {
-	constructor(...e) {
-		super(...e), this.scale = new t(this), this.open = !1, this.lightDismiss = !1, this.#e = !1, this.#n = null, this.#r = null, this.#i = new s(this, () => [
+`, _ = class extends l {
+	get dialogSize() {
+		return {
+			width: a(this.width ?? 260),
+			height: this.height === void 0 ? null : a(this.height)
+		};
+	}
+	#e;
+	#t() {
+		if (this.#e || !this.open) return;
+		let e = [];
+		if (this.width === void 0 && e.push("width (falling back to 260 system px)"), this.height === void 0 && e.push("height (falling back to the content)"), e.length === 0) return;
+		this.#e = !0;
+		let t = this.getAttribute("heading") ?? this.getAttribute("label") ?? "";
+		console.warn(`${this.localName}${t ? ` ("${t}")` : ""}: no ${e.join(", no ")}. A modal owns its whole box — declare both in system px: <${this.localName} width="320" height="140">.`);
+	}
+	#n;
+	#r;
+	constructor() {
+		super(), this.scale = new n(this), this.open = !1, this.returnValue = "", this.lightDismiss = !1, this.#e = !1, this.#n = null, this.#r = null, this.#i = (t) => {
+			let n = t.target;
+			if (!(n instanceof HTMLFormElement) || v(n) !== this) return;
+			let r = t.submitter;
+			if ((r?.hasAttribute("formmethod") ? r.getAttribute("formmethod") : n.getAttribute("method"))?.toLowerCase() !== "dialog") return;
+			let i = r instanceof HTMLButtonElement || r instanceof HTMLInputElement ? r.value : void 0;
+			e(this, t, () => this.close(i));
+		}, this.#a = null, this.#o = new c(this, () => [
 			[
 				this._dialog,
 				"pointerdown",
-				this.#s
+				this.#l
 			],
 			[
 				this._dialog,
 				"pointerup",
-				this.#c
+				this.#u
 			],
 			[
 				this._dialog,
 				"pointercancel",
-				this.#l
+				this.#d
 			],
 			[
 				this._dialog,
 				"keydown",
-				this.#o
+				this.#c
 			]
-		]), this.#o = (e) => {
+		]), this.#c = (e) => {
 			if (e.key !== "Enter" || e.defaultPrevented || e.isComposing || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
 			let t = e.composedPath();
 			if (t.some((e) => e instanceof HTMLAnchorElement && e.hasAttribute("href")) || t.some((e) => e instanceof HTMLTextAreaElement || e instanceof HTMLElement && e.isContentEditable) && e.code !== "NumpadEnter") return;
 			let n = this.defaultButton;
 			n && (e.preventDefault(), n.click());
-		}, this.#s = (e) => {
-			this.#r = e.target === this._dialog ? e.pointerId : null;
-		}, this.#c = (e) => {
-			let t = this.#r === e.pointerId;
-			this.#r = null, !(!t || e.target !== this._dialog || !this.lightDismiss) && (this.#n = "outside", this.close());
-		}, this.#l = () => {
-			this.#r = null;
-		}, this.#u = null, this.#g = () => this.settle();
-	}
-	get dialogSize() {
-		return {
-			width: i(this.width ?? 260),
-			height: this.height === void 0 ? null : i(this.height)
-		};
-	}
-	#e;
-	#t() {
-		if (this.#e || !this.open) return;
-		let e = [];
-		if (this.width === void 0 && e.push("width (falling back to 260 system px)"), this.height === void 0 && e.push("height (falling back to the content)"), e.length === 0) return;
-		this.#e = !0;
-		let t = this.getAttribute("heading") ?? this.getAttribute("label") ?? "";
-		console.warn(`${this.localName}${t ? ` ("${t}")` : ""}: no ${e.join(", no ")}. A modal owns its whole box — declare both in system px: <${this.localName} width="320" height="140">.`);
+		}, this.#l = (e) => {
+			this.#a = e.target === this._dialog ? e.pointerId : null;
+		}, this.#u = (e) => {
+			let t = this.#a === e.pointerId;
+			this.#a = null, !(!t || e.target !== this._dialog || !this.lightDismiss) && (this.#n = "outside", this.close());
+		}, this.#d = () => {
+			this.#a = null;
+		}, this.#f = null, this.#v = () => this.settle(), this.addEventListener("submit", this.#i);
 	}
-	#n;
-	#r;
 	#i;
+	#a;
+	#o;
 	get defaultButton() {
 		let e = "vf-button[variant=\"default\"]";
 		return [...this.querySelectorAll(e), ...this.renderRoot.querySelectorAll(e)].find((e) => !e.matches(":disabled")) ?? null;
 	}
 	get initialFocusTarget() {
-		return this.querySelector("[autofocus]") || ([...this.querySelectorAll("vf-text-field, vf-number-field, vf-text-area, textarea, input")].find((e) => m(e) && !e.matches(":disabled")) ?? this.defaultButton);
+		return this.querySelector("[autofocus]") || ([...this.querySelectorAll("vf-text-field, vf-number-field, vf-text-area, textarea, input")].find((e) => h(e) && !e.matches(":disabled")) ?? this.defaultButton);
 	}
-	#a() {
+	#s() {
 		this.initialFocusTarget?.focus();
 	}
-	#o;
-	#s;
 	#c;
 	#l;
 	#u;
+	#d;
+	#f;
 	show() {
-		this.open = !0, this.hasUpdated && this.#h();
+		this.open = !0, this.hasUpdated && this.#_();
 	}
-	close() {
-		this.open = !1, this.hasUpdated && this.#h();
+	close(e) {
+		this.open && e !== void 0 && (this.#r = e), this.open = !1, this.hasUpdated && this.#_();
 	}
 	updated(e) {
-		e.has("open") && this.#h(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
+		e.has("open") && this.#_(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
 	}
-	#d() {
+	#p() {
 		let e = document.documentElement;
 		return {
-			width: a(e.clientWidth || window.innerWidth, this),
-			height: a(e.clientHeight || window.innerHeight, this)
+			width: o(e.clientWidth || window.innerWidth, this),
+			height: o(e.clientHeight || window.innerHeight, this)
 		};
 	}
-	#f(e, t) {
-		let n = this.#d(), r = a(this._dialog?.offsetWidth ?? 0, this);
+	#m(e, t) {
+		let n = this.#p(), r = o(this._dialog?.offsetWidth ?? 0, this);
 		return {
-			x: Math.min(Math.max(e, f - r), n.width - f),
-			y: Math.min(Math.max(t, 0), Math.max(0, n.height - f))
+			x: Math.min(Math.max(e, p - r), n.width - p),
+			y: Math.min(Math.max(t, 0), Math.max(0, n.height - p))
 		};
 	}
-	#p() {
-		let e = this.#d(), t = this._dialog?.getBoundingClientRect();
+	#h() {
+		let e = this.#p(), t = this._dialog?.getBoundingClientRect();
 		return {
-			x: (e.width - a(t?.width ?? 0, this)) / 2,
-			y: (e.height - a(t?.height ?? 0, this)) / 2
+			x: (e.width - o(t?.width ?? 0, this)) / 2,
+			y: (e.height - o(t?.height ?? 0, this)) / 2
 		};
 	}
 	placeAt(e, t) {
-		let n = this.#f(e, t);
-		this.left = r(n.x, this), this.top = r(n.y, this);
+		let n = this.#m(e, t);
+		this.left = i(n.x, this), this.top = i(n.y, this);
 	}
 	settle() {
 		let e = this._dialog;
@@ -162,10 +171,10 @@ var f = 24, p = /* @__PURE__ */ new Set([
 		let t = this.left != null || this.top != null ? {
 			x: this.left ?? 0,
 			y: this.top ?? 0
-		} : this.#p(), n = this.#f(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";
+		} : this.#h(), n = this.#m(t.x, t.y);
+		e.style.left = a(i(n.x, this)), e.style.top = a(i(n.y, this)), e.style.right = "auto", e.style.bottom = "auto", e.style.margin = "0";
 	}
-	#m() {
+	#g() {
 		let e = this._dialog?.style;
 		if (e) for (let t of [
 			"left",
@@ -175,44 +184,51 @@ var f = 24, p = /* @__PURE__ */ new Set([
 			"margin"
 		]) e.removeProperty(t);
 	}
-	#h() {
+	#_() {
 		let e = this._dialog;
-		e && (this.open && !e.open ? (this.#u = document.activeElement, e.showModal(), this.#a(), this.settle(), this.#y(e), this.#i.attach()) : !this.open && e.open && e.close());
+		e && (this.open && !e.open ? (this.#f = document.activeElement, this.returnValue = "", e.showModal(), this.#s(), this.settle(), this.#x(e), this.#o.attach()) : !this.open && e.open && e.close());
 	}
-	#g;
-	#_;
 	#v;
-	#y(e) {
-		typeof ResizeObserver < "u" && !this.#_ && (this.#_ = new ResizeObserver(this.#g), this.#_.observe(e)), window.addEventListener("resize", this.#g), this.#v ??= n(this.#g);
+	#y;
+	#b;
+	#x(e) {
+		typeof ResizeObserver < "u" && !this.#y && (this.#y = new ResizeObserver(this.#v), this.#y.observe(e)), window.addEventListener("resize", this.#v), this.#b ??= r(this.#v);
 	}
-	#b() {
-		this.#_?.disconnect(), this.#_ = void 0, window.removeEventListener("resize", this.#g), this.#v?.(), this.#v = void 0;
+	#S() {
+		this.#y?.disconnect(), this.#y = void 0, window.removeEventListener("resize", this.#v), this.#b?.(), this.#b = void 0;
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#b();
+		super.disconnectedCallback(), this.#S();
 		let e = this._dialog;
 		if (e?.open) {
 			e.close();
-			let t = this.#u, n = document.activeElement;
+			let t = this.#f, n = document.activeElement;
 			t instanceof HTMLElement && t.isConnected && (n === null || n === document.body) && t.focus();
 		}
-		this.#u = null;
+		this.#f = null;
 	}
 	_onNativeCancel() {
 		this.#n = "escape";
 	}
 	_onNativeClose() {
-		let t = this.#n ?? "close";
-		this.#n = null, this.#u = null, this.#r = null, this.#i.detach(), this.#b(), this.open = !1, this.#m(), e(this, "vf-close", { reason: t });
+		let e = this.#n ?? "close", n = this.#r;
+		this.#n = null, this.#r = null, n !== null && (this.returnValue = n), this.#f = null, this.#a = null, this.#o.detach(), this.#S(), this.open = !1, this.#g(), t(this, "vf-close", {
+			reason: e,
+			returnValue: n
+		});
 	}
 };
-o([u({
+s([d({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "open", void 0), o([u({ type: Number })], g.prototype, "width", void 0), o([u({ type: Number })], g.prototype, "height", void 0), o([u({ type: Number })], g.prototype, "top", void 0), o([u({ type: Number })], g.prototype, "left", void 0), o([u({
+})], _.prototype, "open", void 0), s([d({ type: Number })], _.prototype, "width", void 0), s([d({ type: Number })], _.prototype, "height", void 0), s([d({ type: Number })], _.prototype, "top", void 0), s([d({ type: Number })], _.prototype, "left", void 0), s([d({
 	type: Boolean,
 	reflect: !0,
 	attribute: "light-dismiss"
-})], g.prototype, "lightDismiss", void 0), o([d("dialog")], g.prototype, "_dialog", void 0);
+})], _.prototype, "lightDismiss", void 0), s([f("dialog")], _.prototype, "_dialog", void 0);
+function v(e) {
+	for (let t = e.parentElement; t; t = t.parentElement) if (t instanceof _) return t;
+	return null;
+}
 //#endregion
-export { g as VfModalDialog, h as modalDialogStyles };
+export { _ as VfModalDialog, g as modalDialogStyles };

package/dist/pattern-fill.d.ts

@@ -47,14 +47,17 @@ export declare class PatternFillController extends RepeatTileController {
  * a pattern is resolved (the component's template knows).
  *
  * Painting: the tile the controller wrote, repeated from the padding box's
- * corner at {@link vfRepeatTileSize}, nearest-neighbor. The paper and the
- * pixelation ride the `vf-patterned` state so an unpatterned box paints
- * exactly nothing and inherits nothing new. `image-rendering` inherits, so
- * the slot hands `auto` back to slotted content: a consumer's own `<img>`
- * renders as it would anywhere else, and a kit element that wants
- * nearest-neighbor (`vf-img`, a `vf-icon`) says so itself. A page that set
- * `pixelated` on an ancestor gets `auto` inside a patterned box — its own
- * declaration on the child still wins, as everywhere.
+ * corner at {@link vfRepeatTileSize}, nearest-neighbor. All of it rides the
+ * `vf-patterned` state, the image included, so an unpatterned box paints
+ * exactly nothing. The tile's custom property inherits like any other: a
+ * box that read it unpatterned would paint the tile of the nearest
+ * patterned box around it — a desktop's dither inside a window.
+ * `image-rendering` inherits too, so the slot hands `auto` back to slotted
+ * content: a consumer's own `<img>` renders as it would anywhere else, and a
+ * kit element that wants nearest-neighbor (`vf-img`, a `vf-icon`) says so
+ * itself. A page that set `pixelated` on an ancestor gets `auto` inside a
+ * patterned box — its own declaration on the child still wins, as
+ * everywhere.
  *
  * Forced colors: the image goes, the paper is the remapped Canvas — the
  * desktop's posture, a backdrop being decoration.

package/dist/pattern-fill.js

@@ -17,12 +17,10 @@ var i = /* @__PURE__ */ new WeakMap(), a = (e) => {
 		});
 	}
 }, s = r`
-  .vf-pattern-fill {
+  .vf-pattern-fill.vf-patterned {
     background-image: var(--_vf-pattern-image, none);
     ${t}
     background-repeat: repeat;
-  }
-  .vf-pattern-fill.vf-patterned {
     background-color: var(--vf-white, #fff);
     image-rendering: pixelated;
   }
@@ -30,7 +28,7 @@ var i = /* @__PURE__ */ new WeakMap(), a = (e) => {
     image-rendering: auto;
   }
   @media (forced-colors: active) {
-    .vf-pattern-fill {
+    .vf-pattern-fill.vf-patterned {
       background-image: none;
     }
   }

package/dist/position.d.ts

@@ -97,14 +97,17 @@ type PositionedHost = HTMLElement & {
  * re-asserts a coordinate and costs nothing.
  *
  * **Every write it makes is announced** as `vf-placement-change` (bubbles,
- * `composed: false`, detail `{ left, top }` — nulls on a return to flow). It
- * is an internal coordination event on the terms of the menu handshakes:
- * parent and child share one light tree, and a kit protocol must not leak out
- * of a consumer's shadow boundary. `vf-scroll-area` listens for it and
+ * `composed: false`, detail `{ left, top }` — nulls on a return to flow), so
+ * a page hears every move the one way: a title-bar drag's steps and its
+ * release (an outline drag's single write), an arrow nudge, a drop, a walk's
+ * landing, an `origin` re-measure, and its own property writes. Non-composed,
+ * because parent and child share one light tree and the event has no reason
+ * to leave a consumer's shadow root. It is dispatched from the host's update,
+ * with the new pair already on its style: a handler that writes the pair
+ * again takes effect on the next update. `vf-scroll-area` listens for it and
  * re-measures, because a placed child moved through `top`/`left` changes the
  * scroll range with no box changing anywhere a ResizeObserver can see — the
- * plane's box is never grown by an absolutely positioned child. One funnel
- * covers a drop, an arrow nudge and a page's own `icon.left = …` alike.
+ * plane's box is never grown by an absolutely positioned child.
  *
  * **`origin`** names which point of the host's own box the pair places —
  * nine keywords, vertical then horizontal (`top center`, `bottom right`,
@@ -169,11 +172,26 @@ export declare function placementIn(anchor: Element, clientX: number, clientY: n
     left: number;
     top: number;
 };
-/** The box a gesture is clamped into, in system px — see {@link PlacementClamp}. */
+/**
+ * The box a gesture is clamped into, in system px — see {@link PlacementClamp}.
+ * `width` and `height` are the positioning parent's box; `top` is the least
+ * `top` a placement may take there: 0, or on a desktop's screen the bottom of
+ * its menu bar (`vf-desktop.workArea`).
+ */
 export type PlacementBounds = {
     width: number;
     height: number;
+    top: number;
 };
+/**
+ * The detail of `vf-placement-bounds-request`: the handshake a moved host
+ * makes when its gesture measures the box it is clamped into. A
+ * `vf-desktop` on its light-DOM path fills `bounds` for a host placed on its
+ * screen. Internal to the kit's placement.
+ */
+export interface PlacementBoundsRequest {
+    bounds: PlacementBounds | null;
+}
 /**
  * A moved host's own containment rule, in system px, against the box measured
  * once at the start of the gesture.