vintage-frames 0.6.1 → 0.7.0

package/dist/modal-dialog.d.ts

@@ -32,6 +32,12 @@ export declare const modalDialogStyles: import("lit").CSSResult;
  * event, an Escape-close no longer leaves a stale origin behind, so the next
  * open re-derives it.
  *
+ * It also owns the two keyboard rules every classic dialog followed (see
+ * {@link defaultButton} and {@link initialFocusTarget}): Return or Enter
+ * activates the default button from anywhere in the dialog, and the box opens
+ * with the insertion point in its first text field — or, with none, focus on
+ * the default button.
+ *
  * Removing an open modal from the DOM is a close path too. HTML's dialog
  * *removing steps* take the element out of the top layer **without** running
  * the close algorithm — no `close` event, no focus restoration — which is
@@ -124,6 +130,33 @@ export declare class VfModalDialog extends LitElement {
      * drag from squeezing the box.
      */
     protected get dialogSize(): Record<string, string | null>;
+    /**
+     * The dialog's default button — the one wearing the bold ring
+     * (`vf-button[variant="default"]`) — or null with none, or none enabled.
+     * Looked for among the slotted content first, then in the shadow tree, so a
+     * consumer's own modal that renders its buttons itself is covered too.
+     * Override to name it some other way.
+     */
+    protected get defaultButton(): HTMLElement | null;
+    /**
+     * Where focus lands on open. The classic Dialog Manager put the insertion
+     * point in the first editable text item and gave nothing else focus at all;
+     * the web needs a focused control for the keyboard to have anywhere to be,
+     * so with no text field the default button takes it (which is also what
+     * makes Return and Space work there without a Tab). In order:
+     *
+     * 1. a slotted control carrying `autofocus` — the author's say;
+     * 2. the first enabled text-entry control (`vf-text-field`,
+     *    `vf-number-field`, `vf-text-area`, or a native text input/textarea);
+     * 3. the {@link defaultButton};
+     * 4. null — leave the browser's own choice alone.
+     *
+     * Left to itself, `showModal()` focuses the first focusable thing in flat
+     * tree order, which for a Cancel/OK row is Cancel, and for a body with a
+     * link in it is the link — so Return did the one thing a classic dialog's
+     * Return never did. Override to choose differently.
+     */
+    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' }`. */

package/dist/modal-dialog.js

@@ -4,7 +4,15 @@ 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 = l`
+var f = 24, p = /* @__PURE__ */ new Set([
+	"text",
+	"search",
+	"url",
+	"tel",
+	"email",
+	"password",
+	"number"
+]), m = (e) => e instanceof HTMLInputElement ? p.has(e.type) : !0, h = l`
   dialog {
     padding: 0;
     margin: auto;
@@ -43,32 +51,43 @@ var f = 24, p = l`
        the fallback is the arrow it always showed. */
     cursor: var(--vf-cursor, default);
   }
-`, m = class extends c {
+`, 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, () => [
 			[
 				this._dialog,
 				"pointerdown",
-				this.#a
+				this.#s
 			],
 			[
 				this._dialog,
 				"pointerup",
-				this.#o
+				this.#c
 			],
 			[
 				this._dialog,
 				"pointercancel",
-				this.#s
+				this.#l
+			],
+			[
+				this._dialog,
+				"keydown",
+				this.#o
 			]
-		]), this.#a = (e) => {
+		]), this.#o = (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.#o = (e) => {
+		}, 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.#s = () => {
+		}, this.#l = () => {
 			this.#r = null;
-		}, this.#c = null, this.#m = () => this.settle();
+		}, this.#u = null, this.#g = () => this.settle();
 	}
 	get dialogSize() {
 		return {
@@ -88,42 +107,53 @@ var f = 24, p = l`
 	#n;
 	#r;
 	#i;
-	#a;
+	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);
+	}
+	#a() {
+		this.initialFocusTarget?.focus();
+	}
 	#o;
 	#s;
 	#c;
+	#l;
+	#u;
 	show() {
-		this.open = !0, this.hasUpdated && this.#p();
+		this.open = !0, this.hasUpdated && this.#h();
 	}
 	close() {
-		this.open = !1, this.hasUpdated && this.#p();
+		this.open = !1, this.hasUpdated && this.#h();
 	}
 	updated(e) {
-		e.has("open") && this.#p(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
+		e.has("open") && this.#h(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
 	}
-	#l() {
+	#d() {
 		let e = document.documentElement;
 		return {
 			width: a(e.clientWidth || window.innerWidth, this),
 			height: a(e.clientHeight || window.innerHeight, this)
 		};
 	}
-	#u(e, t) {
-		let n = this.#l(), r = a(this._dialog?.offsetWidth ?? 0, this);
+	#f(e, t) {
+		let n = this.#d(), r = a(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))
 		};
 	}
-	#d() {
-		let e = this.#l(), t = this._dialog?.getBoundingClientRect();
+	#p() {
+		let e = this.#d(), t = this._dialog?.getBoundingClientRect();
 		return {
 			x: (e.width - a(t?.width ?? 0, this)) / 2,
 			y: (e.height - a(t?.height ?? 0, this)) / 2
 		};
 	}
 	placeAt(e, t) {
-		let n = this.#u(e, t);
+		let n = this.#f(e, t);
 		this.left = r(n.x, this), this.top = r(n.y, this);
 	}
 	settle() {
@@ -132,10 +162,10 @@ var f = 24, p = l`
 		let t = this.left != null || this.top != null ? {
 			x: this.left ?? 0,
 			y: this.top ?? 0
-		} : this.#d(), n = this.#u(t.x, t.y);
+		} : 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";
 	}
-	#f() {
+	#m() {
 		let e = this._dialog?.style;
 		if (e) for (let t of [
 			"left",
@@ -145,44 +175,44 @@ var f = 24, p = l`
 			"margin"
 		]) e.removeProperty(t);
 	}
-	#p() {
+	#h() {
 		let e = this._dialog;
-		e && (this.open && !e.open ? (this.#c = document.activeElement, e.showModal(), this.settle(), this.#_(e), this.#i.attach()) : !this.open && e.open && e.close());
+		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());
 	}
-	#m;
-	#h;
 	#g;
-	#_(e) {
-		typeof ResizeObserver < "u" && !this.#h && (this.#h = new ResizeObserver(this.#m), this.#h.observe(e)), window.addEventListener("resize", this.#m), this.#g ??= n(this.#m);
+	#_;
+	#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);
 	}
-	#v() {
-		this.#h?.disconnect(), this.#h = void 0, window.removeEventListener("resize", this.#m), this.#g?.(), this.#g = void 0;
+	#b() {
+		this.#_?.disconnect(), this.#_ = void 0, window.removeEventListener("resize", this.#g), this.#v?.(), this.#v = void 0;
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#v();
+		super.disconnectedCallback(), this.#b();
 		let e = this._dialog;
 		if (e?.open) {
 			e.close();
-			let t = this.#c, n = document.activeElement;
+			let t = this.#u, n = document.activeElement;
 			t instanceof HTMLElement && t.isConnected && (n === null || n === document.body) && t.focus();
 		}
-		this.#c = null;
+		this.#u = null;
 	}
 	_onNativeCancel() {
 		this.#n = "escape";
 	}
 	_onNativeClose() {
 		let t = this.#n ?? "close";
-		this.#n = null, this.#c = null, this.#r = null, this.#i.detach(), this.#v(), this.open = !1, this.#f(), e(this, "vf-close", { reason: t });
+		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 });
 	}
 };
 o([u({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "open", void 0), o([u({ type: Number })], m.prototype, "width", void 0), o([u({ type: Number })], m.prototype, "height", void 0), o([u({ type: Number })], m.prototype, "top", void 0), o([u({ type: Number })], m.prototype, "left", void 0), o([u({
+})], 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({
 	type: Boolean,
 	reflect: !0,
 	attribute: "light-dismiss"
-})], m.prototype, "lightDismiss", void 0), o([d("dialog")], m.prototype, "_dialog", void 0);
+})], g.prototype, "lightDismiss", void 0), o([d("dialog")], g.prototype, "_dialog", void 0);
 //#endregion
-export { m as VfModalDialog, p as modalDialogStyles };
+export { g as VfModalDialog, h as modalDialogStyles };

package/dist/open-art.d.ts

@@ -1,6 +1,7 @@
 /**
  * The Finder "open" ghost — an icon's art redrawn as outline plus dither,
- * derived from the art itself in the client.
+ * derived from the art itself in the client — and, on the same terms, the
+ * dotted outline an icon drags as ({@link deriveDragOutline}).
  *
  * When a folder or application is open, the Finder redraws its icon as a
  * ghost: the outline stays, and everything inside it becomes pattern. The kit
@@ -38,3 +39,61 @@
  * an environment refusing a 2d context.
  */
 export declare function deriveOpenArt(art: HTMLImageElement | HTMLCanvasElement): HTMLCanvasElement | null;
+/** A box inside an icon's frame, in system px. */
+export interface DragOutlineBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Where an icon's parts sit inside its frame, in system px — measured by the
+ * icon, so the outline lands on the same pixels the frame paints.
+ */
+export interface DragOutlineGeometry {
+    /** The frame. */
+    width: number;
+    height: number;
+    /**
+     * The art's own box, where it paints. Null when the pipeline has nothing
+     * to draw — nothing slotted, a failed load, an inline `<svg>` — and the
+     * cell's rectangle stands in.
+     */
+    art: DragOutlineBox | null;
+    /** The reserved art cell. */
+    cell: DragOutlineBox;
+    /** The name plate, or null with no name. */
+    plate: DragOutlineBox | null;
+}
+/**
+ * Derive the outline an icon drags as: the mask's boundary — the same
+ * one-pixel ring the open ghost finds, by the same erosion — and the name
+ * plate's rectangle, solid black on transparent, one canvas the size of the
+ * icon's frame at one image px per system px. Not yet dotted: the ring is
+ * derived once per drag, and {@link dotOutline} re-applies the checker at
+ * each step's phase.
+ *
+ * Art the pipeline cannot draw falls back to the cell's rectangle — the
+ * ghost's rule: never a blank where a state cannot show. Compositing only,
+ * never a readback, so cross-origin art derives too.
+ *
+ * Returns null for a frame with no size, or an environment refusing a 2d
+ * context.
+ */
+export declare function deriveDragOutline(art: HTMLImageElement | HTMLCanvasElement | null, geometry: DragOutlineGeometry): HTMLCanvasElement | null;
+/**
+ * Paint a selection rectangle — the rubber band `vf-icon-field` drags on its
+ * background — into `into`: a one-pixel outline `width` × `height` system px,
+ * dotted at `phase` the way the drag outline is. A degenerate axis paints as
+ * a one-pixel line rather than nothing.
+ */
+export declare function paintSelectionRect(into: HTMLCanvasElement, width: number, height: number, phase: number): void;
+/**
+ * Paint `ring` into `into` dotted with the checker at `phase` — 0 keeps the
+ * dots where `x + y` is even in the canvas's own coordinates, 1 where it is
+ * odd. The caller picks the phase from where the outline lands on screen,
+ * so the dots share the desktop dither's phase wherever the outline goes,
+ * as QuickDraw's screen-anchored pattern pen did. Sizing `into` to the ring
+ * clears it, so each step is a fresh paint.
+ */
+export declare function dotOutline(ring: HTMLCanvasElement, into: HTMLCanvasElement, phase: number): void;

package/dist/open-art.js

@@ -31,5 +31,51 @@ function r(t) {
 	let c = o.ctx.createPattern(s, "repeat");
 	return c && (o.ctx.globalCompositeOperation = "source-atop", o.ctx.fillStyle = c, o.ctx.fillRect(0, 0, r, i)), a.ctx.globalCompositeOperation = "source-over", a.ctx.drawImage(o.canvas, 0, 0), a.canvas;
 }
+var i = null, a = () => {
+	if (!i) {
+		let t = e(2, 2);
+		if (!t) return null;
+		t.ctx.fillStyle = "#000", t.ctx.fillRect(0, 0, 1, 1), t.ctx.fillRect(1, 1, 1, 1), i = t.canvas;
+	}
+	return i;
+}, o = (e, t) => {
+	t.width <= 0 || t.height <= 0 || (e.fillStyle = "#000", e.fillRect(t.x, t.y, t.width, t.height), t.width > 2 && t.height > 2 && e.clearRect(t.x + 1, t.y + 1, t.width - 2, t.height - 2));
+};
+function s(t, n) {
+	let { width: r, height: i } = n;
+	if (!r || !i) return null;
+	let a = e(r, i);
+	if (!a) return null;
+	let s = t ? n.art : null;
+	if (t && s && s.width > 0 && s.height > 0) {
+		let n = e(r, i), o = e(r, i);
+		if (!n || !o) return null;
+		n.ctx.drawImage(t, s.x, s.y, s.width, s.height), n.ctx.globalCompositeOperation = "source-in", n.ctx.fillStyle = "#000", n.ctx.fillRect(0, 0, r, i), o.ctx.drawImage(n.canvas, 0, 0), o.ctx.globalCompositeOperation = "destination-in";
+		for (let [e, t] of [
+			[1, 0],
+			[-1, 0],
+			[0, 1],
+			[0, -1]
+		]) o.ctx.drawImage(n.canvas, e, t);
+		a.ctx.drawImage(n.canvas, 0, 0), a.ctx.globalCompositeOperation = "destination-out", a.ctx.drawImage(o.canvas, 0, 0), a.ctx.globalCompositeOperation = "source-over";
+	} else o(a.ctx, n.cell);
+	return n.plate && o(a.ctx, n.plate), a.canvas;
+}
+function c(t, n, r, i) {
+	let a = Math.max(1, Math.round(n)), s = Math.max(1, Math.round(r)), c = e(a, s);
+	c && (o(c.ctx, {
+		x: 0,
+		y: 0,
+		width: a,
+		height: s
+	}), l(c.canvas, t, i));
+}
+function l(e, t, n) {
+	let r = a(), i = t.getContext("2d");
+	if (!r || !i) return;
+	t.width = e.width, t.height = e.height, i.imageSmoothingEnabled = !1, i.drawImage(e, 0, 0);
+	let o = i.createPattern(r, "repeat");
+	o && (i.globalCompositeOperation = "destination-in", i.fillStyle = o, i.translate(n & 1, 0), i.fillRect(-2, 0, e.width + 2, e.height), i.setTransform(1, 0, 0, 1, 0, 0), i.globalCompositeOperation = "source-over");
+}
 //#endregion
-export { r as deriveOpenArt };
+export { s as deriveDragOutline, r as deriveOpenArt, l as dotOutline, c as paintSelectionRect };

package/dist/position.d.ts

@@ -84,6 +84,16 @@ type PositionedHost = HTMLElement & {
  * unrelated update — a heading change, a desktop toggling `active` — never
  * 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
+ * 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.
+ *
  * **`fixed`** holds the placement against the *visible* region of the nearest
  * scrolling ancestor instead of its scrolled plane — a tool strip over a
  * document, a column header over rows — and the flag alone places at (0,0).
@@ -103,6 +113,25 @@ type PositionedHost = HTMLElement & {
  * `overflow: hidden`) holds it exactly where placement would.
  */
 export declare const VfPositioned: <T extends Constructor<LitElement>>(Base: T) => Constructor<VfPositionedInterface> & T;
+/**
+ * A viewport point as a placement in `anchor`'s coordinates: `{ left, top }`
+ * in whole system px on the placement lattice, measured from the anchor's
+ * box the way a placed child's `top`/`left` are — the unit and lattice a
+ * drag lands on, so the result can be written straight to a child's pair.
+ *
+ * The three containers whose anchor sits in shadow DOM (`vf-window`'s
+ * content region, `vf-desktop`'s screen, `vf-scroll-area`'s plane) expose it
+ * as `placementAt(clientX, clientY)`; everywhere else the anchor is the
+ * element's own padding box, and `toSysExact` against
+ * `getBoundingClientRect()` is the documented conversion. The anchor is
+ * expected to carry no border of its own (the three do not), so its border
+ * box is its padding box; `scaleAt` is the element whose `--vf-scale` the
+ * conversion reads — the component's host.
+ */
+export declare function placementIn(anchor: Element, clientX: number, clientY: number, scaleAt?: Element): {
+    left: number;
+    top: number;
+};
 /** The box a gesture is clamped into, in system px — see {@link PlacementClamp}. */
 export type PlacementBounds = {
     width: number;
@@ -155,6 +184,12 @@ export declare class PlacementController {
     constructor(host: PositionedHost, clamp: PlacementClamp);
     /** Whether a gesture has placed this host (as opposed to markup or CSS). */
     get placed(): boolean;
+    /**
+     * The box the gesture is clamped into, in system px: the one {@link seed}
+     * measured, or a fresh measurement before any gesture. A group drag reads
+     * it to clamp a whole selection's delta at once.
+     */
+    get bounds(): PlacementBounds;
     /**
      * The origin a move adds its delta to, in system px.
      *

package/dist/position.js

@@ -1,24 +1,25 @@
-import { snapSys as e, sysLength as t, toSysExact as n } from "./scale.js";
-import r from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { property as i } from "lit/decorators.js";
+import { emit as e } from "./events.js";
+import { snapSys as t, sysLength as n, toSysExact as r } from "./scale.js";
+import i from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { property as a } from "lit/decorators.js";
 //#region src/position.ts
-var a = {
+var o = {
 	inline: "block",
 	"inline-block": "block",
 	"inline-flex": "flex",
 	"inline-grid": "grid",
 	"inline-table": "table"
-}, o = (e) => {
+}, s = (e) => {
 	class t extends e {
 		constructor(...e) {
-			super(...e), this.fixed = !1, new s(this);
+			super(...e), this.fixed = !1, new c(this);
 		}
 	}
-	return r([i({ type: Number })], t.prototype, "top", void 0), r([i({ type: Number })], t.prototype, "left", void 0), r([i({
+	return i([a({ type: Number })], t.prototype, "top", void 0), i([a({ type: Number })], t.prototype, "left", void 0), i([a({
 		type: Boolean,
 		reflect: !0
 	})], t.prototype, "fixed", void 0), t;
-}, s = class {
+}, c = class {
 	#e;
 	#t = null;
 	#n = null;
@@ -29,56 +30,70 @@ var a = {
 		this.#e = e, e.addController(this);
 	}
 	hostConnected() {
-		this.#i && this.#r && this.#c();
+		this.#i && this.#r && this.#l();
 	}
 	hostDisconnected() {
 		this.#a?.disconnect(), this.#a = null;
 	}
 	hostUpdated() {
-		let e = this.#e.top ?? null, n = this.#e.left ?? null, r = this.#e.fixed === !0, i = this.#e.style;
-		if (e === null && n === null && !r) {
+		let e = this.#e.top ?? null, t = this.#e.left ?? null, r = this.#e.fixed === !0, i = this.#e.style;
+		if (e === null && t === null && !r) {
 			if (!this.#i) return;
-			this.#r && this.#s(), this.#i = !1, this.#r = !1, i.removeProperty("position"), i.removeProperty("top"), i.removeProperty("left"), i.removeProperty("right"), i.removeProperty("bottom"), i.removeProperty("margin");
+			this.#r && this.#c(), this.#i = !1, this.#r = !1, i.removeProperty("position"), i.removeProperty("top"), i.removeProperty("left"), i.removeProperty("right"), i.removeProperty("bottom"), i.removeProperty("margin"), this.#o(null, null);
 			return;
 		}
-		if (this.#i && e === this.#t && n === this.#n && r === this.#r) return;
+		if (this.#i && e === this.#t && t === this.#n && r === this.#r) return;
 		let a = this.#i && this.#r;
-		this.#i = !0, this.#t = e, this.#n = n, this.#r = r, i.position = r ? "sticky" : "absolute", i.top = t(e ?? 0), i.left = t(n ?? 0), i.right = "auto", i.bottom = "auto", r ? a || this.#o() : (a && this.#s(), i.margin = "0");
+		this.#i = !0, this.#t = e, this.#n = t, this.#r = r, i.position = r ? "sticky" : "absolute", i.top = n(e ?? 0), i.left = n(t ?? 0), i.right = "auto", i.bottom = "auto", r ? a || this.#s() : (a && this.#c(), i.margin = "0"), this.#o(t ?? 0, e ?? 0);
+	}
+	#o(t, n) {
+		e(this.#e, "vf-placement-change", {
+			left: t,
+			top: n
+		}, { composed: !1 });
 	}
-	#o() {
+	#s() {
 		let e = this.#e.style;
-		e.maxWidth = "fit-content", e.zIndex = "1", this.#l = !1;
+		e.maxWidth = "fit-content", e.zIndex = "1", this.#u = !1;
 		let t = this.#e.getBoundingClientRect();
-		(t.width > 0 || t.height > 0) && this.#u(t.width, t.height), this.#c();
+		(t.width > 0 || t.height > 0) && this.#d(t.width, t.height), this.#l();
 	}
-	#s() {
-		this.#a?.disconnect(), this.#a = null, this.#l = !1;
+	#c() {
+		this.#a?.disconnect(), this.#a = null, this.#u = !1;
 		let e = this.#e.style;
 		e.removeProperty("display"), e.removeProperty("max-width"), e.removeProperty("z-index");
 	}
-	#c() {
+	#l() {
 		this.#a ??= new ResizeObserver((e) => {
 			let t = e[e.length - 1]?.borderBoxSize?.[0];
-			if (t) this.#u(t.inlineSize, t.blockSize);
+			if (t) this.#d(t.inlineSize, t.blockSize);
 			else {
 				let e = this.#e.getBoundingClientRect();
-				this.#u(e.width, e.height);
+				this.#d(e.width, e.height);
 			}
 		}), this.#a.observe(this.#e);
 	}
-	#l = !1;
-	#u(e, t) {
+	#u = !1;
+	#d(e, t) {
 		let n = this.#e.style;
-		if (!this.#l) {
+		if (!this.#u) {
 			let e = getComputedStyle(this.#e).display;
 			if (e) {
-				let t = a[e];
-				t && (n.display = t), this.#l = !0;
+				let t = o[e];
+				t && (n.display = t), this.#u = !0;
 			}
 		}
 		n.margin = `0 ${-e}px ${-t}px 0`;
 	}
-}, c = class {
+};
+function l(e, n, i, a = e) {
+	let o = e.getBoundingClientRect();
+	return {
+		left: t(r(n - o.left, a), a),
+		top: t(r(i - o.top, a), a)
+	};
+}
+var u = class {
 	#e;
 	#t;
 	#n = !1;
@@ -89,36 +104,39 @@ var a = {
 	get placed() {
 		return this.#n;
 	}
+	get bounds() {
+		return this.#r ?? this.#i();
+	}
 	seed() {
-		let t = this.#e;
-		if (this.#r = this.#i(), t.left != null || t.top != null) return {
-			x: t.left ?? 0,
-			y: t.top ?? 0
+		let e = this.#e;
+		if (this.#r = this.#i(), e.left != null || e.top != null) return {
+			x: e.left ?? 0,
+			y: e.top ?? 0
 		};
-		let r = getComputedStyle(t), i = l.has(r.position), a = i ? parseFloat(r.left) || 0 : t.offsetLeft, o = i ? parseFloat(r.top) || 0 : t.offsetTop;
+		let n = getComputedStyle(e), i = d.has(n.position), a = i ? parseFloat(n.left) || 0 : e.offsetLeft, o = i ? parseFloat(n.top) || 0 : e.offsetTop;
 		return {
-			x: e(n(a, t), t),
-			y: e(n(o, t), t)
+			x: t(r(a, e), e),
+			y: t(r(o, e), e)
 		};
 	}
-	moveTo(t, n) {
-		let r = this.#e, i = this.#t(t, n, this.#r ?? this.#i());
-		r.left = e(i.x, r), r.top = e(i.y, r), this.#n = !0;
+	moveTo(e, n) {
+		let r = this.#e, i = this.#t(e, n, this.#r ?? this.#i());
+		r.left = t(i.x, r), r.top = t(i.y, r), this.#n = !0;
 	}
 	#i() {
-		let e = this.#e, t = e.offsetParent, r = t && t.clientWidth > 0 && t.clientHeight > 0 ? t : null;
+		let e = this.#e, t = e.offsetParent, n = t && t.clientWidth > 0 && t.clientHeight > 0 ? t : null;
 		return {
-			width: n(r?.clientWidth ?? window.innerWidth, e),
-			height: n(r?.clientHeight ?? window.innerHeight, e)
+			width: r(n?.clientWidth ?? window.innerWidth, e),
+			height: r(n?.clientHeight ?? window.innerHeight, e)
 		};
 	}
-}, l = /* @__PURE__ */ new Set([
+}, d = /* @__PURE__ */ new Set([
 	"absolute",
 	"fixed",
 	"sticky"
 ]);
-function u(e, t, n) {
-	let r = e.top != null || e.left != null || e.fixed === !0, i = l.has(getComputedStyle(e).position), a = null;
+function f(e, t, n) {
+	let r = e.top != null || e.left != null || e.fixed === !0, i = d.has(getComputedStyle(e).position), a = null;
 	if (!r && !i) a = "unplaced";
 	else {
 		let t = e.offsetParent;
@@ -127,4 +145,4 @@ function u(e, t, n) {
 	return a !== null && (console.warn(a === "unplaced" ? `${t}: movable, but in normal flow — so the first drag has to pull it out, reflowing everything after it on the page. State the origin in system px and it never was in flow: ${n}` : `${t}: the positioning parent has no box, so there is nowhere to drag to. Give it a size (and \`position: relative\`, if it is not a kit container) — the clamp is falling back to the viewport meanwhile.`), !0);
 }
 //#endregion
-export { c as PlacementController, o as VfPositioned, u as warnMovableContract };
+export { u as PlacementController, s as VfPositioned, l as placementIn, f as warnMovableContract };

package/dist/text-control.d.ts

@@ -116,8 +116,15 @@ export declare class VfTextControlBase extends VfShadowRoleControl {
      * inner button, which runs the same transient-proxy path a pointer does. A
      * disabled default button means no submission at all, as in HTML; a form
      * with no submit button falls back to the bare call, also as in HTML.
+     *
+     * Returns whether a form owner took the press — true even when a disabled
+     * default button meant no submission, since HTML gave the press to the form
+     * either way. The callers cancel the keydown on true, so a modal shell
+     * (`VfModalDialog`) sees the press as spoken for and does not also route it
+     * to the dialog's default button; with no form the press goes on to the
+     * dialog untouched.
      */
-    protected requestImplicitSubmit(): void;
+    protected requestImplicitSubmit(): boolean;
     /**
      * Dispatch a bubbling, composed value event (SPEC §4). Text fields use the
      * default `{ value }` detail; `vf-number-field` passes an enriched detail that

package/dist/text-control.js

@@ -56,14 +56,9 @@ var l = class extends a {
 	}
 	requestImplicitSubmit() {
 		let e = this.internals.form;
-		if (!e) return;
+		if (!e) return !1;
 		let t = [...e.elements].find((e) => e instanceof HTMLButtonElement && e.type === "submit" || e instanceof HTMLInputElement && (e.type === "submit" || e.type === "image") || e.localName === "vf-button" && e.type?.toLowerCase() === "submit");
-		if (t) {
-			if (t.matches(":disabled")) return;
-			t.click();
-			return;
-		}
-		e.requestSubmit();
+		return t ? (t.matches(":disabled") || t.click(), !0) : (e.requestSubmit(), !0);
 	}
 	emitValue(t, n = { value: this.value }) {
 		e(this, t, n);