vintage-frames 0.6.2 → 0.7.0

package/dist/components/vf-scroll-area.d.ts

@@ -29,8 +29,15 @@ declare const VfScrollArea_base: (new (...args: any[]) => import("../position.js
  * The scrolled plane sizes to its content — never narrower than the
  * viewport, as wide as content that cannot wrap — so the rails follow a row
  * that grows sideways the way they follow copy that grows down, and a
- * `slotchange` re-measures. {@link measure} covers a scroll range that
- * changes with no box changing (a placed child moved through `top`/`left`).
+ * `slotchange` re-measures. A placed child moved through `top`/`left` is
+ * heard too: every such write is announced as `vf-placement-change`
+ * (src/position.ts), and the area re-measures on it — a drop, an arrow
+ * nudge, a page's own `icon.left = …`, with no code on the page. {@link
+ * measure} covers a scroll range that changes with no box and no placement
+ * changing (a transform).
+ *
+ * {@link placementAt} converts a viewport point into the plane's own
+ * placement coordinates, for a drop that lands in this area from elsewhere.
  *
  * @slot - Scrollable content.
  * @csspart viewport - The inner scrolling container.
@@ -39,6 +46,7 @@ declare const VfScrollArea_base: (new (...args: any[]) => import("../position.js
  *   dot-dither (white)
  */
 export declare class VfScrollArea extends VfScrollArea_base {
+    #private;
     private readonly scale;
     /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
@@ -75,6 +83,18 @@ export declare class VfScrollArea extends VfScrollArea_base {
     private readonly rail;
     /** Whether the content actually overflows the viewport (either axis). */
     private _scrollable;
+    constructor();
+    /**
+     * A viewport point (CSS px) as a placement on the scrolled plane —
+     * `{ left, top }` in whole system px on the placement lattice, the pair a
+     * child dropped here is written with. The plane travels with the scroll,
+     * so its box already carries the scroll offset and the border-floor
+     * padding; nothing is left for the caller to add.
+     */
+    placementAt(clientX: number, clientY: number): {
+        left: number;
+        top: number;
+    };
     /**
      * Moves keyboard focus to the scrolling viewport — the focusable element
      * lives inside the shadow root, where the platform's `focus()` can't reach
@@ -84,10 +104,9 @@ export declare class VfScrollArea extends VfScrollArea_base {
     focus(options?: FocusOptions): void;
     /**
      * Re-measure overflow and re-sync the rails. The area tracks its content's
-     * box and its slot by itself; call this for a scroll range that changes
-     * with no box changing anywhere — a placed child moved through
-     * `top`/`left`, a transform — the way the kit's own fields re-measure on
-     * input.
+     * box, its slot and every placement write by itself; call this for a
+     * scroll range that changes with none of those — a transform — the way the
+     * kit's own fields re-measure on input.
      */
     measure(): void;
     /** Content added or removed under the fixed box — re-measure. */

package/dist/components/vf-scroll-area.js

@@ -1,24 +1,30 @@
 import { vfElement as e } from "../define.js";
 import { ScaleController as t } from "../scale.js";
 import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as r } from "../position.js";
-import { vfBase as i } from "../styles/recipes/host.js";
-import { vfFocusRing as a } from "../styles/recipes/focus.js";
-import { vfScrollRail as o } from "../styles/recipes/scroll-rail.js";
-import { GridSnapController as s } from "../grid-snap.js";
-import { ScrollStateController as c } from "../scroll-state.js";
-import { ScrollRailController as l, renderScrollRail as u } from "../scroll-rail.js";
-import { LitElement as d, css as f, html as p, nothing as m } from "lit";
-import { property as h, query as g, state as _ } from "lit/decorators.js";
+import { VfPositioned as r, placementIn as i } from "../position.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { vfFocusRing as o } from "../styles/recipes/focus.js";
+import { vfScrollRail as s } from "../styles/recipes/scroll-rail.js";
+import { GridSnapController as c } from "../grid-snap.js";
+import { ScrollStateController as l } from "../scroll-state.js";
+import { ScrollRailController as u, renderScrollRail as d } from "../scroll-rail.js";
+import { LitElement as f, css as p, html as m, nothing as h } from "lit";
+import { property as g, query as _, state as v } from "lit/decorators.js";
 //#region src/components/vf-scroll-area.ts
-var v = class extends r(d) {
-	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new s(this), this.axis = "vertical", this.corner = !1, this.label = "", this.scrollState = new c(this, () => this.viewport, () => this.content, (e) => {
+var y = class extends r(f) {
+	constructor() {
+		super(), this.scale = new t(this), this.gridSnap = new c(this), this.axis = "vertical", this.corner = !1, this.label = "", this.scrollState = new l(this, () => this.viewport, () => this.content, (e) => {
 			this._scrollable = e.x || e.y;
-		}), this.rail = new l(this, {
+		}), this.rail = new u(this, {
 			getScroll: () => this.viewport,
 			getContent: () => this.content
-		}), this._scrollable = !1;
+		}), this._scrollable = !1, this.#e = () => {
+			this.measure();
+		}, this.addEventListener("vf-placement-change", this.#e);
+	}
+	#e;
+	placementAt(e, t) {
+		return i(this.content ?? this, e, t, this);
 	}
 	focus(e) {
 		this.viewport?.focus(e);
@@ -31,9 +37,9 @@ var v = class extends r(d) {
 	}
 	static {
 		this.styles = [
-			i,
-			o,
-			f`
+			a,
+			s,
+			p`
       :host {
         display: block;
       }
@@ -132,36 +138,36 @@ var v = class extends r(d) {
       /* Focusable so keyboard users can scroll; inset ring to stay in-box. */
       .viewport:focus-visible {
         --vf-focus-offset: -2px;
-        ${a}
+        ${o}
       }
     `
 		];
 	}
 	render() {
 		let e = this.axis !== "horizontal", t = this.axis === "horizontal" || this.axis === "both", n = e && t || this.corner;
-		return p`
+		return m`
       <div class="box vf-snap">
         <div
           class="viewport vf-scroll"
           part="viewport"
-          tabindex=${this._scrollable ? "0" : m}
-          role=${this.label ? "region" : this._scrollable ? "group" : m}
-          aria-label=${this.label || m}
+          tabindex=${this._scrollable ? "0" : h}
+          role=${this.label ? "region" : this._scrollable ? "group" : h}
+          aria-label=${this.label || h}
         >
           <div class="content">
             <slot @slotchange=${this._onSlotChange}></slot>
           </div>
         </div>
-        ${e ? u(this.rail, "vertical") : m}
-        ${t ? u(this.rail, "horizontal") : m}
-        ${n ? p`<div class="vf-rail-corner" aria-hidden="true"></div>` : m}
+        ${e ? d(this.rail, "vertical") : h}
+        ${t ? d(this.rail, "horizontal") : h}
+        ${n ? m`<div class="vf-rail-corner" aria-hidden="true"></div>` : h}
       </div>
     `;
 	}
 };
-n([h({ reflect: !0 })], v.prototype, "axis", void 0), n([h({
+n([g({ reflect: !0 })], y.prototype, "axis", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "corner", void 0), n([h()], v.prototype, "label", void 0), n([g(".viewport")], v.prototype, "viewport", void 0), n([g(".content")], v.prototype, "content", void 0), n([_()], v.prototype, "_scrollable", void 0), v = n([e("vf-scroll-area")], v);
+})], y.prototype, "corner", void 0), n([g()], y.prototype, "label", void 0), n([_(".viewport")], y.prototype, "viewport", void 0), n([_(".content")], y.prototype, "content", void 0), n([v()], y.prototype, "_scrollable", void 0), y = n([e("vf-scroll-area")], y);
 //#endregion
-export { v as VfScrollArea };
+export { y as VfScrollArea };

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

@@ -154,6 +154,10 @@ export declare class VfWindow extends VfWindow_base {
     private _hasHeader;
     /** Whether the `status` slot has assigned content (drives the strip). */
     private _hasStatus;
+    /** The content region — the placed-child anchor; exists from the first render. */
+    private readonly body;
+    /** The built-in edge scroll area, while `scrollbars` is set. */
+    private readonly scrollArea;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
     /** Device-pixel grid snapping; see src/grid-snap.ts. */
@@ -191,6 +195,26 @@ export declare class VfWindow extends VfWindow_base {
      */
     private readonly _drag;
     private _resizeState;
+    /**
+     * A viewport point (CSS px) as a placement in the window's content region
+     * — `{ left, top }` in whole system px on the placement lattice, the pair a
+     * child dropped into this window is written with: the body's corner, or
+     * under `scrollbars` the scrolled plane, scroll offset included. The anchor
+     * sits in the shadow tree, which is why the conversion is a method here
+     * rather than the page's own `toSysExact` against a rect.
+     */
+    placementAt(clientX: number, clientY: number): {
+        left: number;
+        top: number;
+    };
+    /**
+     * Re-measure the built-in scroll area's overflow and re-sync its rails —
+     * a no-op without `scrollbars`. The area re-measures by itself on its
+     * content's box, its slot and every placement write; this is the escape
+     * hatch for a scroll range that changes with none of those, the way
+     * `vf-scroll-area.measure()` is.
+     */
+    measure(): void;
     /**
      * Say something the first time a window is opened without a width. The size
      * itself is written by VfSized's controller, from `width`/`height` — which

package/dist/components/vf-window.js

@@ -2,52 +2,52 @@ import { emit as e } from "../events.js";
 import { vfElement as t } from "../define.js";
 import { ScaleController as n, snapSys as r, sysLength as i, toSysExact as a } from "../scale.js";
 import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { PlacementController as s, VfPositioned as c, warnMovableContract as l } from "../position.js";
-import { vfBase as u } from "../styles/recipes/host.js";
-import { DOT_MOTIF as d, DOT_RECTS as f, DOT_SPAN as p, vfDots as m, vfStripes as h } from "../styles/recipes/pattern.js";
-import { vfChromeFrame as g } from "../styles/recipes/surface.js";
-import { vfRule as _ } from "../styles/recipes/rule.js";
-import { vfTitleBar as v, vfWindowWidgets as y } from "../styles/recipes/title-bar.js";
-import { vfFocus as b } from "../styles/recipes/focus.js";
-import { TileRasterCache as x, patternOverride as S, tileGrid as C, vfTileGrid as w } from "../tile-grid.js";
-import { GridSnapController as T } from "../grid-snap.js";
-import { VfSized as E } from "../size.js";
-import { DragController as D } from "../drag.js";
-import { TitleCenterController as O, chromeTitleBar as k, closeBox as A, widgetLabel as j, zoomBox as M } from "../chrome.js";
+import { PlacementController as s, VfPositioned as c, placementIn as l, warnMovableContract as u } from "../position.js";
+import { vfBase as d } from "../styles/recipes/host.js";
+import { DOT_MOTIF as f, DOT_RECTS as p, DOT_SPAN as m, vfDots as h, vfStripes as g } from "../styles/recipes/pattern.js";
+import { vfChromeFrame as _ } from "../styles/recipes/surface.js";
+import { vfRule as v } from "../styles/recipes/rule.js";
+import { vfTitleBar as y, vfWindowWidgets as b } from "../styles/recipes/title-bar.js";
+import { vfFocus as x } from "../styles/recipes/focus.js";
+import { TileRasterCache as S, patternOverride as C, tileGrid as w, vfTileGrid as T } from "../tile-grid.js";
+import { GridSnapController as E } from "../grid-snap.js";
+import { VfSized as D } from "../size.js";
+import { DragController as O } from "../drag.js";
+import { TitleCenterController as k, chromeTitleBar as A, closeBox as j, widgetLabel as M, zoomBox as N } from "../chrome.js";
 import "./vf-scroll-area.js";
-import { LitElement as N, css as P, html as F, nothing as I } from "lit";
-import { property as L, state as R } from "lit/decorators.js";
+import { LitElement as P, css as F, html as I, nothing as L } from "lit";
+import { property as R, query as z, state as B } from "lit/decorators.js";
 //#region src/components/vf-window.ts
-var z = 80, B = 54;
-function V(e, t, n) {
+var V = 80, H = 54;
+function U(e, t, n) {
 	let r = Math.max(t, e);
 	return n == null ? r : Math.min(n, r);
 }
-var H = 24, U = 8, W = class extends E(c(N)) {
+var W = 24, G = 8, K = class extends D(c(P)) {
 	constructor(...e) {
-		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this._hasHeader = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new T(this), this.titleCenter = new O(this), this._dotsPattern = "", this.#e = new x(), this.#t = (e, t, n) => {
+		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this._hasHeader = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new E(this), this.titleCenter = new k(this), this._dotsPattern = "", this.#e = new S(), this.#t = (e, t, n) => {
 			let r = a(this.offsetWidth, this);
 			return {
-				x: Math.min(Math.max(e, H - r), n.width - H),
-				y: Math.min(Math.max(t, 0), Math.max(0, n.height - H))
+				x: Math.min(Math.max(e, W - r), n.width - W),
+				y: Math.min(Math.max(t, 0), Math.max(0, n.height - W))
 			};
-		}, this._placement = new s(this, (e, t, n) => this.#t(e, t, n)), this._drag = new D(this, {
+		}, this._placement = new s(this, (e, t, n) => this.#t(e, t, n)), this._drag = new O(this, {
 			onDragStart: (e) => !this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box")) ? null : (this.#i(), this._placement.seed()),
 			onDrag: (e, t) => this._placement.moveTo(e, t)
 		}), this._resizeState = null, this.#n = !1, this.#r = !1;
 	}
 	static {
 		this.styles = [
-			u,
-			h,
-			m,
-			w,
-			b,
+			d,
 			g,
+			h,
+			T,
+			x,
 			_,
 			v,
 			y,
-			P`
+			b,
+			F`
       :host {
         display: block;
         position: relative;
@@ -312,23 +312,30 @@ var H = 24, U = 8, W = class extends E(c(N)) {
 	}
 	#e;
 	willUpdate(e) {
-		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = S(this, "--vf-dots-pattern"));
+		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = C(this, "--vf-dots-pattern"));
 	}
 	_dotsTexture() {
 		if (this.width == null) return;
 		let e = Math.max(1, this.width - 2);
-		if (this._dotsPattern) return C({
-			cols: Math.ceil(e / p),
+		if (this._dotsPattern) return w({
+			cols: Math.ceil(e / m),
 			rows: 1,
-			tile: p
+			tile: m
 		});
-		let t = Math.ceil((e + d) / p) * p, n = U + d;
-		return F`<div
+		let t = Math.ceil((e + f) / m) * m, n = G + f;
+		return I`<div
       class="vf-tile-raster"
-      style="width:${i(t)};height:${i(n)};background-image:${this.#e.for(d, d, f, t, n)}"
+      style="width:${i(t)};height:${i(n)};background-image:${this.#e.for(f, f, p, t, n)}"
     ></div>`;
 	}
 	#t;
+	placementAt(e, t) {
+		let n = this.scrollArea;
+		return n ? n.placementAt(e, t) : l(this.body ?? this, e, t, this);
+	}
+	measure() {
+		this.scrollArea?.measure();
+	}
 	updated() {
 		this.#a();
 		let t = this._resizeState;
@@ -341,7 +348,7 @@ var H = 24, U = 8, W = class extends E(c(N)) {
 	#n;
 	#r;
 	#i() {
-		this.#r ||= l(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
+		this.#r ||= u(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
 	}
 	#a() {
 		if (this.#n) return;
@@ -381,7 +388,7 @@ var H = 24, U = 8, W = class extends E(c(N)) {
 	_onGrowPointerMove(e) {
 		let t = this._resizeState;
 		if (!t || e.pointerId !== t.pointerId) return;
-		let n = V(r(t.baseWidth + a(e.clientX - t.startX, this), this), this.minWidth ?? z, this.maxWidth), i = V(r(t.baseHeight + a(e.clientY - t.startY, this), this), this.minHeight ?? B, this.maxHeight);
+		let n = U(r(t.baseWidth + a(e.clientX - t.startX, this), this), this.minWidth ?? V, this.maxWidth), i = U(r(t.baseHeight + a(e.clientY - t.startY, this), this), this.minHeight ?? H, this.maxHeight);
 		(n !== this.width || i !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = n, this.height = i;
 	}
 	_onGrowPointerEnd(t) {
@@ -396,42 +403,42 @@ var H = 24, U = 8, W = class extends E(c(N)) {
 		});
 	}
 	render() {
-		return F`
+		return I`
       <div
         class="vf-frame vf-snap"
         part="frame"
         role="group"
-        aria-labelledby=${this.heading ? "title" : I}
+        aria-labelledby=${this.heading ? "title" : L}
       >
-        ${k(this._drag, F`
-            ${this.closable ? A(j("Close", this.heading), this._onCloseClick) : I}
+        ${A(this._drag, I`
+            ${this.closable ? j(M("Close", this.heading), this._onCloseClick) : L}
             <span class="vf-title" part="title" id="title">${this.heading}</span>
-            ${this.zoomable ? M(j("Zoom", this.heading), this._onZoomClick) : I}
+            ${this.zoomable ? N(M("Zoom", this.heading), this._onZoomClick) : L}
           `, this.variant === "utility" ? "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
         <div
           class="header vf-rule-bottom ${this._hasHeader ? "" : "empty"}"
           part="header"
-          style=${this.headerHeight == null ? I : `height:${i(this.headerHeight)}`}
+          style=${this.headerHeight == null ? L : `height:${i(this.headerHeight)}`}
         >
           <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
         </div>
         <div class="body" part="body">
-          ${this.scrollbars ? F`
+          ${this.scrollbars ? I`
                 <vf-scroll-area
                   class="edge-scroll"
                   axis=${this.scrollbars}
                   ?corner=${this.resizable && !this._hasStatus}
-                  label=${this.heading || I}
+                  label=${this.heading || L}
                   exportparts="viewport"
                 >
                   <slot></slot>
                 </vf-scroll-area>
-              ` : F`<slot></slot>`}
+              ` : I`<slot></slot>`}
         </div>
         <div class="status vf-rule-top ${this._hasStatus ? "" : "empty"}" part="status-bar">
           <slot name="status" @slotchange=${this._onStatusSlotChange}></slot>
         </div>
-        ${this.resizable ? F`
+        ${this.resizable ? I`
               <div
                 class="grow"
                 part="grow-box"
@@ -441,41 +448,41 @@ var H = 24, U = 8, W = class extends E(c(N)) {
                 @pointercancel=${this._onGrowPointerEnd}
                 @lostpointercapture=${this._onGrowPointerEnd}
               ></div>
-            ` : I}
+            ` : L}
       </div>
     `;
 	}
 };
-o([L({ reflect: !0 })], W.prototype, "variant", void 0), o([L()], W.prototype, "heading", void 0), o([L({
+o([R({ reflect: !0 })], K.prototype, "variant", void 0), o([R()], K.prototype, "heading", void 0), o([R({
 	type: Boolean,
 	reflect: !0
-})], W.prototype, "active", void 0), o([L({
+})], K.prototype, "active", void 0), o([R({
 	type: Boolean,
 	reflect: !0
-})], W.prototype, "closable", void 0), o([L({
+})], K.prototype, "closable", void 0), o([R({
 	type: Boolean,
 	reflect: !0
-})], W.prototype, "zoomable", void 0), o([L({
+})], K.prototype, "zoomable", void 0), o([R({
 	type: Boolean,
 	reflect: !0
-})], W.prototype, "movable", void 0), o([L({
+})], K.prototype, "movable", void 0), o([R({
 	type: Boolean,
 	reflect: !0
-})], W.prototype, "resizable", void 0), o([L({
+})], K.prototype, "resizable", void 0), o([R({
 	type: Number,
 	attribute: "min-width"
-})], W.prototype, "minWidth", void 0), o([L({
+})], K.prototype, "minWidth", void 0), o([R({
 	type: Number,
 	attribute: "min-height"
-})], W.prototype, "minHeight", void 0), o([L({
+})], K.prototype, "minHeight", void 0), o([R({
 	type: Number,
 	attribute: "max-width"
-})], W.prototype, "maxWidth", void 0), o([L({
+})], K.prototype, "maxWidth", void 0), o([R({
 	type: Number,
 	attribute: "max-height"
-})], W.prototype, "maxHeight", void 0), o([L({ reflect: !0 })], W.prototype, "scrollbars", void 0), o([L({
+})], K.prototype, "maxHeight", void 0), o([R({ reflect: !0 })], K.prototype, "scrollbars", void 0), o([R({
 	type: Number,
 	attribute: "header-height"
-})], W.prototype, "headerHeight", void 0), o([R()], W.prototype, "_hasHeader", void 0), o([R()], W.prototype, "_hasStatus", void 0), W = o([t("vf-window")], W);
+})], K.prototype, "headerHeight", void 0), o([B()], K.prototype, "_hasHeader", void 0), o([B()], K.prototype, "_hasStatus", void 0), o([z(".body")], K.prototype, "body", void 0), o([z("vf-scroll-area")], K.prototype, "scrollArea", void 0), K = o([t("vf-window")], K);
 //#endregion
-export { W as VfWindow };
+export { K as VfWindow };

package/dist/drag.d.ts

@@ -9,6 +9,10 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
  * a placement is stored in, so that a dropped host is still where it was
  * dropped after a zoom. The controller does the one conversion: pointer events
  * arrive in CSS px, and only the *delta* is converted.
+ *
+ * The trailing parameters on {@link onDrag} and {@link onDragEnd} are
+ * additive: a target that declares fewer (`vf-window`, `vf-dialog`) still
+ * conforms and simply ignores them.
  */
 export interface DragTarget {
     /**
@@ -21,10 +25,19 @@ export interface DragTarget {
         x: number;
         y: number;
     } | null;
-    /** Apply a moved origin, in system px, already snapped onto the lattice. */
-    onDrag(x: number, y: number): void;
-    /** Optional: the drag ended (pointer released or cancelled). */
-    onDragEnd?(): void;
+    /**
+     * Apply a moved origin, in system px, already snapped onto the lattice.
+     * `event` is the pointer move that produced it, for a target that reports
+     * the pointer itself (`vf-icon`'s drag events carry `clientX`/`clientY`).
+     */
+    onDrag(x: number, y: number, event: PointerEvent): void;
+    /**
+     * Optional: the drag ended. `cancelled` tells an abandoned gesture — a
+     * `pointercancel`, or {@link DragController.cancel} — from a release;
+     * `event` is the pointer event that ended it, `undefined` for a
+     * programmatic cancel.
+     */
+    onDragEnd?(event: PointerEvent | undefined, cancelled: boolean): void;
 }
 /**
  * Drag-to-move for 1-bit chrome. Bind {@link onPointerDown} / {@link onPointerMove}
@@ -45,5 +58,16 @@ export declare class DragController implements ReactiveController {
     hostDisconnected(): void;
     onPointerDown: (event: PointerEvent) => void;
     onPointerMove: (event: PointerEvent) => void;
+    /**
+     * The release — or, bound to `pointercancel` as every handle binds it, the
+     * platform abandoning the gesture (a touch the browser took for a scroll),
+     * which the target hears as a cancel.
+     */
     onPointerUp: (event: PointerEvent) => void;
+    /**
+     * Abandon the in-flight drag from code — an Escape mid-gesture. The capture
+     * is released and the target hears a cancel with no pointer event; the
+     * pointer's eventual release then belongs to nobody.
+     */
+    cancel(): void;
 }

package/dist/drag.js

@@ -6,24 +6,33 @@ var n = class {
 	#n;
 	#r;
 	#i;
+	#a;
 	constructor(n, r) {
-		this.host = n, this.target = r, this.#e = null, this.#t = 0, this.#n = 0, this.#r = 0, this.#i = 0, this.onPointerDown = (e) => {
+		this.host = n, this.target = r, this.#e = null, this.#t = null, this.#n = 0, this.#r = 0, this.#i = 0, this.#a = 0, this.onPointerDown = (e) => {
 			if (this.#e !== null) return;
 			let t = this.target.onDragStart(e);
-			t && (this.#e = e.pointerId, this.#t = e.clientX, this.#n = e.clientY, this.#r = t.x, this.#i = t.y, e.currentTarget.setPointerCapture(e.pointerId), e.preventDefault());
+			if (!t) return;
+			this.#e = e.pointerId, this.#n = e.clientX, this.#r = e.clientY, this.#i = t.x, this.#a = t.y;
+			let n = e.currentTarget;
+			this.#t = n, n.setPointerCapture(e.pointerId), e.preventDefault();
 		}, this.onPointerMove = (n) => {
 			if (n.pointerId !== this.#e) return;
 			let r = e(this.host);
-			this.target.onDrag(t(this.#r + (n.clientX - this.#t) / r, this.host), t(this.#i + (n.clientY - this.#n) / r, this.host));
+			this.target.onDrag(t(this.#i + (n.clientX - this.#n) / r, this.host), t(this.#a + (n.clientY - this.#r) / r, this.host), n);
 		}, this.onPointerUp = (e) => {
 			if (e.pointerId !== this.#e) return;
-			this.#e = null;
+			this.#e = null, this.#t = null;
 			let t = e.currentTarget;
-			t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId), this.target.onDragEnd?.();
+			t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId), this.target.onDragEnd?.(e, e.type === "pointercancel");
 		}, n.addController(this);
 	}
 	hostDisconnected() {
-		this.#e = null;
+		this.#e = null, this.#t = null;
+	}
+	cancel() {
+		if (this.#e === null) return;
+		let e = this.#e, t = this.#t;
+		this.#e = null, this.#t = null, t?.hasPointerCapture(e) && t.releasePointerCapture(e), this.target.onDragEnd?.(void 0, !0);
 	}
 };
 //#endregion

package/dist/index.d.ts

@@ -31,7 +31,8 @@ export { VfLabel } from './components/vf-label.js';
 export { VfParagraph } from './components/vf-paragraph.js';
 export { VfImg } from './components/vf-img.js';
 export { VfIcon } from './components/vf-icon.js';
-export type { VfIconSize } from './components/vf-icon.js';
+export type { VfIconSize, VfIconDragDetail, VfIconDragFollower, } from './components/vf-icon.js';
+export { VfIconField } from './components/vf-icon-field.js';
 export { VfMenuBar } from './components/vf-menu-bar.js';
 export { VfMenu } from './components/vf-menu.js';
 export { VfMenuItem } from './components/vf-menu-item.js';

package/dist/index.js

@@ -60,15 +60,16 @@ import { VfLabel as jt } from "./components/vf-label.js";
 import { VfParagraph as Mt } from "./components/vf-paragraph.js";
 import { VfImg as Nt } from "./components/vf-img.js";
 import { VfIcon as Pt } from "./components/vf-icon.js";
-import { VfMenuBar as Ft } from "./components/vf-menu-bar.js";
-import { VfMenu as It } from "./components/vf-menu.js";
-import { VfMenuItem as Lt } from "./components/vf-menu-item.js";
-import { VfList as Rt } from "./components/vf-list.js";
-import { VfListItem as zt } from "./components/vf-list-item.js";
-import { VfFieldset as Bt } from "./components/vf-fieldset.js";
-import { VfGrid as Vt } from "./components/vf-grid.js";
-import { VfStack as Ht } from "./components/vf-stack.js";
-import { VfContainer as Ut } from "./components/vf-container.js";
-import { CURSOR_ARROW as Wt, CURSOR_CROSSHAIR as Gt, CURSOR_I_BEAM as Kt, CURSOR_WAIT as qt } from "./cursor-art.js";
-import { applyCursor as Jt } from "./cursor.js";
-export { ze as BLINK_FLIPS, Be as BLINK_INTERVAL_MS, Ee as BUTTON_FACE, De as BUTTON_FRAME, Ge as CARET_DOWN, Ke as CHECKBOX_X, qe as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, Wt as CURSOR_ARROW, Gt as CURSOR_CROSSHAIR, Kt as CURSOR_I_BEAM, qt as CURSOR_WAIT, Te as DocumentListenersController, Le as DragController, bt as FocusRuleController, Ce as GridSnapController, G as PATTERNS, K as PATTERN_NAMES, q as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ve as PRESS_HOLD_MS, xe as PatternFillController, T as PlacementController, Je as RADIO_DOT, Ye as RADIO_FACE, Xe as RADIO_RING, Ze as RADIO_RING_PRESSED, He as RENAME_DELAY_MS, Oe as RING_FRAME, ke as RING_HOLE, Ae as RING_INSET, ie as RULE_EDGES, je as SCREEN_CORNER, Qe as SLIDER_THUMB, $e as SLIDER_THUMB_FACE, et as STEPPER, tt as STEPPER_DOWN_FILL, nt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, it as ScrollRailController, Re as ScrollStateController, R as TILE_LATTICE, ge as TileRasterCache, be as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, mt as VfButton, ut as VfButtonGroup, _t as VfCheckbox, Ut as VfContainer, Fe as VfDesktop, dt as VfDialog, Bt as VfFieldset, pt as VfFormControl, Vt as VfGrid, Pt as VfIcon, Nt as VfImg, jt as VfLabel, Rt as VfList, zt as VfListItem, It as VfMenu, Ft as VfMenuBar, Lt as VfMenuItem, ct as VfModalDialog, Et as VfNumberField, Dt as VfOption, Mt as VfParagraph, E as VfPositioned, kt as VfProgressBar, vt as VfRadio, yt as VfRadioGroup, ot as VfScrollArea, Ot as VfSelect, ft as VfSeparator, Ie as VfSized, At as VfSlider, Ht as VfStack, ht as VfSwatch, Tt as VfTextArea, Ct as VfTextControlBase, wt as VfTextField, gt as VfToggleControl, st as VfWindow, Jt as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, xt as focusModality, m as getScale, s as getZoom, rt as glyphSvg, lt as modalDialogStyles, h as onScaleChange, c as onZoomChange, J as parsePattern, ae as parseRule, Y as patternHex, X as patternMotif, _e as patternOverride, Z as patternRects, Ue as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, at as renderScrollRail, we as requestGridSnap, l as resetZoomBaseline, oe as ruleClasses, We as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, Me as steppedCornerClip, Ne as steppedRectClip, Pe as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, ve as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, St as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, te as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, Q as vfDots, n as vfElement, me as vfField, ue as vfFocus, de as vfFocusRing, fe as vfFocusUnderline, ee as vfHardShadowDecls, ne as vfModalFrame, re as vfPanel, Se as vfPatternFill, se as vfRule, he as vfScrollRail, L as vfStaticText, $ as vfStripes, ye as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, ce as vfTitleBar, pe as vfToggle, le as vfWindowWidgets };
+import { VfIconField as Ft } from "./components/vf-icon-field.js";
+import { VfMenuBar as It } from "./components/vf-menu-bar.js";
+import { VfMenu as Lt } from "./components/vf-menu.js";
+import { VfMenuItem as Rt } from "./components/vf-menu-item.js";
+import { VfList as zt } from "./components/vf-list.js";
+import { VfListItem as Bt } from "./components/vf-list-item.js";
+import { VfFieldset as Vt } from "./components/vf-fieldset.js";
+import { VfGrid as Ht } from "./components/vf-grid.js";
+import { VfStack as Ut } from "./components/vf-stack.js";
+import { VfContainer as Wt } from "./components/vf-container.js";
+import { CURSOR_ARROW as Gt, CURSOR_CROSSHAIR as Kt, CURSOR_I_BEAM as qt, CURSOR_WAIT as Jt } from "./cursor-art.js";
+import { applyCursor as Yt } from "./cursor.js";
+export { ze as BLINK_FLIPS, Be as BLINK_INTERVAL_MS, Ee as BUTTON_FACE, De as BUTTON_FRAME, Ge as CARET_DOWN, Ke as CHECKBOX_X, qe as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, Gt as CURSOR_ARROW, Kt as CURSOR_CROSSHAIR, qt as CURSOR_I_BEAM, Jt as CURSOR_WAIT, Te as DocumentListenersController, Le as DragController, bt as FocusRuleController, Ce as GridSnapController, G as PATTERNS, K as PATTERN_NAMES, q as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ve as PRESS_HOLD_MS, xe as PatternFillController, T as PlacementController, Je as RADIO_DOT, Ye as RADIO_FACE, Xe as RADIO_RING, Ze as RADIO_RING_PRESSED, He as RENAME_DELAY_MS, Oe as RING_FRAME, ke as RING_HOLE, Ae as RING_INSET, ie as RULE_EDGES, je as SCREEN_CORNER, Qe as SLIDER_THUMB, $e as SLIDER_THUMB_FACE, et as STEPPER, tt as STEPPER_DOWN_FILL, nt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, it as ScrollRailController, Re as ScrollStateController, R as TILE_LATTICE, ge as TileRasterCache, be as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, mt as VfButton, ut as VfButtonGroup, _t as VfCheckbox, Wt as VfContainer, Fe as VfDesktop, dt as VfDialog, Vt as VfFieldset, pt as VfFormControl, Ht as VfGrid, Pt as VfIcon, Ft as VfIconField, Nt as VfImg, jt as VfLabel, zt as VfList, Bt as VfListItem, Lt as VfMenu, It as VfMenuBar, Rt as VfMenuItem, ct as VfModalDialog, Et as VfNumberField, Dt as VfOption, Mt as VfParagraph, E as VfPositioned, kt as VfProgressBar, vt as VfRadio, yt as VfRadioGroup, ot as VfScrollArea, Ot as VfSelect, ft as VfSeparator, Ie as VfSized, At as VfSlider, Ut as VfStack, ht as VfSwatch, Tt as VfTextArea, Ct as VfTextControlBase, wt as VfTextField, gt as VfToggleControl, st as VfWindow, Yt as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, xt as focusModality, m as getScale, s as getZoom, rt as glyphSvg, lt as modalDialogStyles, h as onScaleChange, c as onZoomChange, J as parsePattern, ae as parseRule, Y as patternHex, X as patternMotif, _e as patternOverride, Z as patternRects, Ue as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, at as renderScrollRail, we as requestGridSnap, l as resetZoomBaseline, oe as ruleClasses, We as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, Me as steppedCornerClip, Ne as steppedRectClip, Pe as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, ve as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, St as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, te as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, Q as vfDots, n as vfElement, me as vfField, ue as vfFocus, de as vfFocusRing, fe as vfFocusUnderline, ee as vfHardShadowDecls, ne as vfModalFrame, re as vfPanel, Se as vfPatternFill, se as vfRule, he as vfScrollRail, L as vfStaticText, $ as vfStripes, ye as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, ce as vfTitleBar, pe as vfToggle, le as vfWindowWidgets };