vintage-frames 0.6.2 → 0.7.0

package/dist/components/vf-icon.js

@@ -1,69 +1,108 @@
 import { emit as e } from "../events.js";
 import { vfElement as t } from "../define.js";
-import { ScaleController as n, effectiveScale as r, toSysExact as i } from "../scale.js";
-import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { PlacementController as o, VfPositioned as s, warnMovableContract as c } from "../position.js";
-import { vfBodyDecls as l } from "../styles/recipes/body-face.js";
-import { vfBase as u } from "../styles/recipes/host.js";
-import { vfFocusUnderline as d } from "../styles/recipes/focus.js";
-import { GridSnapController as f } from "../grid-snap.js";
-import { DocumentListenersController as p } from "../document-listeners.js";
-import { DragController as m } from "../drag.js";
+import { ScaleController as n, effectiveScale 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 { vfBodyDecls as u } from "../styles/recipes/body-face.js";
+import { vfBase as d } from "../styles/recipes/host.js";
+import { vfFocusUnderline as f } from "../styles/recipes/focus.js";
+import { GridSnapController as p } from "../grid-snap.js";
+import { DocumentListenersController as m } from "../document-listeners.js";
+import { DragController as h } from "../drag.js";
 import "../motion.js";
-import { FocusRuleController as h } from "../focus-modality.js";
-import { deriveOpenArt as g } from "../open-art.js";
-import { LitElement as _, css as v, html as y, nothing as b } from "lit";
-import { property as x, state as S } from "lit/decorators.js";
+import { FocusRuleController as g } from "../focus-modality.js";
+import { deriveDragOutline as _, deriveOpenArt as v, dotOutline as y } from "../open-art.js";
+import { LitElement as b, css as x, html as S, nothing as C } from "lit";
+import { property as w, state as T } from "lit/decorators.js";
 //#region src/components/vf-icon.ts
-var C = {
+var E, D = {
 	large: 32,
 	small: 16
-}, w = 1, T = 8, E = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), D = class extends s(_) {
+}, O = 1, k = 8, A = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), j = class extends c(b) {
+	static {
+		E = this;
+	}
 	constructor(...t) {
-		super(...t), this.label = "", this.size = "large", this.selectable = !1, this.selected = !1, this.color = !1, this.open = !1, this.movable = !1, this.editable = !1, this.maxlength = 31, this.scale = new n(this), this.gridSnap = new f(this), this.focusRule = new h(this), this._editing = !1, this._draft = "", this.#e = 0, this._ghost = null, this.#t = null, this.#n = this.attachInternals(), this.#i = "", this.#a = "", this.#o = 0, this.#s = -Infinity, this.#c = new p(this, () => [[
+		super(...t), this.label = "", this.size = "large", this.selectable = !1, this.selected = !1, this.target = !1, this.color = !1, this.open = !1, this.movable = !1, this.editable = !1, this.maxlength = 31, this.scale = new n(this), this.gridSnap = new p(this), this.focusRule = new g(this), this._editing = !1, this._draft = "", this.#e = 0, this._ghost = null, this.#t = null, this.#n = this.attachInternals(), this.#a = !1, this.#o = "", this.#s = "", this.#c = 0, this.#l = -Infinity, this.#u = new m(this, () => [[
 			document,
 			"pointerdown",
-			this.#A,
+			this.#K,
 			!0
-		]]), this.#l = (e, t, n) => ({
-			x: E(e, n.width - i(this.offsetWidth, this)),
-			y: E(t, n.height - i(this.offsetHeight, this))
-		}), this.#u = new o(this, (e, t, n) => this.#l(e, t, n)), this.#d = {
-			x: 0,
-			y: 0
-		}, this.#f = new m(this, {
-			onDragStart: (e) => !this.movable || e.button !== 0 || this._editing ? null : (this.#m(), this.#d = this.#u.seed()),
-			onDrag: (e, t) => {
-				(e !== this.#d.x || t !== this.#d.y) && this.#S(), this.#u.moveTo(e, t);
+		]]), this.#d = (e, t, n) => ({
+			x: A(e, n.width - a(this.offsetWidth, this)),
+			y: A(t, n.height - a(this.offsetHeight, this))
+		}), this.#f = new s(this, (e, t, n) => this.#d(e, t, n)), this.#p = null, this.#m = new h(this, {
+			onDragStart: (e) => {
+				if (!this.movable || e.button !== 0 || this._editing) return null;
+				this.#k();
+				let t = this.#f.seed();
+				return this.#p = {
+					origin: t,
+					frame: this.#_(),
+					pointer: {
+						clientX: e.clientX,
+						clientY: e.clientY
+					},
+					proposal: null,
+					outline: null,
+					followers: [],
+					size: this.#v()
+				}, t;
+			},
+			onDrag: (e, t, n) => {
+				this.#x(e, t, n);
+			},
+			onDragEnd: (e, t) => {
+				this.#S(e, t);
 			}
-		}), this.#p = !1, this.#_ = () => {
-			this.#y(), this.#C();
-		}, this.#v = () => {
-			this.#b();
-		}, this.#O = (e) => {
+		}), this.#h = new m(this, () => [[
+			document,
+			"keydown",
+			this.#g,
+			!0
+		]]), this.#g = (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.#m.cancel());
+		}, this.#O = !1, this.#M = () => {
+			this.#P(), this.#R();
+		}, this.#N = () => {
+			this.#F();
+		}, this.#U = (e) => {
 			if (e.button !== 0 || this._editing) return;
-			let t = e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("label")), n = this.selected, r = e.timeStamp - this.#s < 800;
-			this.#s = e.timeStamp, this.#S(), this.selectable && (e.shiftKey || e.metaKey ? this.#D(!this.selected) : this.#D(!0)), this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#x(), this.#T && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#f.onPointerDown(e);
-		}, this.#k = () => {
+			let t = e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("label")), n = this.selected, r = e.timeStamp - this.#l < 800;
+			this.#l = e.timeStamp, this.#L();
+			let i = !e.shiftKey && !e.metaKey;
+			this.selectable && (i ? this.#H(!0) : this.#H(!this.selected)), this.#a = i && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#I(), this.#B && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#m.onPointerDown(e);
+		}, this.#W = () => {
 			this._editing || e(this, "vf-open", {});
-		}, this.#A = (e) => {
-			e.composedPath().includes(this) || (this.#S(), !(e.shiftKey || e.metaKey) && this.#D(!1));
-		}, this.#j = (e) => {
+		}, this.#G = (e) => {
+			if (this.#m.onPointerUp(e), !this.#a || (this.#a = !1, e.type !== "pointerup")) return;
+			let t = this.#i;
+			if (t) for (let e of t.querySelectorAll("vf-icon")) e !== this && e.selected && e.setSelected(!1);
+		}, this.#K = (e) => {
+			let t = e.composedPath();
+			if (t.includes(this) || (this.#L(), e.shiftKey || e.metaKey)) return;
+			let n = this.#i;
+			if (n !== null) {
+				let e = t.find((e) => e instanceof E);
+				if (e?.selected && e.#i === n) return;
+			}
+			this.#H(!1);
+		}, this.#q = (e) => {
 			let t = e.target, n = e.data ?? e.dataTransfer?.getData("text") ?? "";
 			if (n === "") return;
 			let r = t.selectionStart ?? t.value.length, i = t.selectionEnd ?? r, a = t.value.slice(0, r) + n + t.value.slice(i);
-			a.length > this.maxlength && this.#N(a);
-		}, this.#M = (e) => {
+			a.length > this.maxlength && this.#Y(a);
+		}, this.#J = (e) => {
 			let t = e.target;
 			if (t.value.length > this.maxlength) {
 				let e = t.value, n = Math.min(t.selectionStart ?? this.maxlength, this.maxlength);
-				t.value = e.slice(0, this.maxlength), t.setSelectionRange(n, n), this.#N(e);
+				t.value = e.slice(0, this.maxlength), t.setSelectionRange(n, n), this.#Y(e);
 			}
 			this._draft = t.value;
-		}, this.#P = (e) => {
+		}, this.#X = (e) => {
 			e.key === "Enter" ? (e.preventDefault(), this.commitEditing(), this.focus()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.cancelEditing(), this.focus());
-		}, this.#F = (t) => {
-			if (this.#S(), !(this._editing || t.defaultPrevented)) {
+		}, this.#Z = (t) => {
+			if (this.#L(), !(this._editing || t.defaultPrevented)) {
 				if ((t.metaKey || t.ctrlKey) && !t.altKey && (t.key.toLowerCase() === "o" || t.key === "ArrowDown")) {
 					t.preventDefault(), e(this, "vf-open", {});
 					return;
@@ -75,7 +114,7 @@ var C = {
 						return;
 					case " ":
 						if (!this.selectable) return;
-						t.preventDefault(), this.focusRule.reveal(), this.#D(!this.selected);
+						t.preventDefault(), this.focusRule.reveal(), this.#H(!this.selected);
 						return;
 					case "ArrowLeft":
 					case "ArrowRight":
@@ -83,17 +122,17 @@ var C = {
 					case "ArrowDown": {
 						if (!this.movable) return;
 						t.preventDefault(), this.focusRule.reveal();
-						let e = t.shiftKey ? T : w, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
-						this.#m();
-						let i = this.#u.seed();
-						this.#u.moveTo(i.x + n, i.y + r);
+						let e = t.shiftKey ? k : O, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
+						this.#k();
+						let i = this.#f.seed();
+						this.#f.moveTo(i.x + n, i.y + r);
 					}
 				}
 			}
 		};
 	}
 	static {
-		this.styles = [u, v`
+		this.styles = [d, x`
       :host {
         display: inline-block;
         cursor: var(--vf-cursor, default);
@@ -110,6 +149,13 @@ var C = {
         flex-direction: column;
         align-items: center;
       }
+      /* The frame is the drag handle, so a touch on a movable icon is the
+         drag and never the page's pan — the window and dialog title bars
+         set the same. Only when movable: suppressing scrolling over an icon
+         that cannot be dragged would be a behavior change for nothing. */
+      :host([movable]) .frame {
+        touch-action: none;
+      }
       .art {
         position: relative;
         display: flex;
@@ -135,6 +181,15 @@ var C = {
       :host([selected][color]) .art {
         filter: brightness(0.5);
       }
+      /* The destination highlight under a drag: the selected treatment of
+         the art alone — the Finder inverted the folder an icon was dragged
+         over — with none of selected's semantics, and the plate untouched. */
+      :host([target]) .art {
+        filter: invert(1);
+      }
+      :host([target][color]) .art {
+        filter: brightness(0.5);
+      }
       /* The open ghost replaces the slotted art while there is one — the
          slot stays in the tree (it is where the art loads and re-loads
          from) but paints nothing. Gated on the class, not :host([open]):
@@ -161,7 +216,7 @@ var C = {
         margin-top: calc(var(--vf-scale, 1) * var(--vf-icon-gap, 2px));
       }
       .label {
-        ${l}
+        ${u}
         font-weight: var(--vf-font-weight, 700);
         /* Whole system px, never a ratio — layout contract rule 2. 12, not
            the face's 16px em: the Finder's plate is 12 system px tall, and
@@ -249,7 +304,7 @@ var C = {
            selection paint at this edge, which is the whole reason it has no
            border of its own (see .rename-box). */
         height: calc(var(--vf-scale, 1) * var(--vf-icon-label-height, 12px));
-        ${l}
+        ${u}
         font-weight: var(--vf-font-weight, 700);
         line-height: calc(
           var(--vf-scale, 1) * var(--vf-icon-label-height, 12px)
@@ -292,12 +347,12 @@ var C = {
          as a visible focus (see focus-modality.ts). */
       .caption.focus-rule .label::after {
         --vf-focus-underline-offset: -2px;
-        ${d}
+        ${f}
       }
       /* No name, no plate — the rule falls back to the art cell. */
       .art.focus-rule::after {
         --vf-focus-underline-offset: -2px;
-        ${d}
+        ${f}
       }
       :host(:focus) {
         outline: none;
@@ -308,9 +363,11 @@ var C = {
 	#t;
 	#n;
 	get #r() {
-		return this.closest("[role=\"listbox\"]") !== null;
+		return this.#i !== null;
+	}
+	get #i() {
+		return this.closest("vf-icon-field, [role=\"listbox\"]");
 	}
-	#i;
 	#a;
 	#o;
 	#s;
@@ -319,27 +376,204 @@ var C = {
 	#u;
 	#d;
 	#f;
+	#p;
+	#m;
+	#h;
+	#g;
+	#_() {
+		return this.renderRoot?.querySelector(".frame")?.getBoundingClientRect() ?? this.getBoundingClientRect();
+	}
+	#v() {
+		return {
+			width: a(this.offsetWidth, this),
+			height: a(this.offsetHeight, this)
+		};
+	}
+	followDrag(e) {
+		if (!this.movable || this._editing) return null;
+		let t = this.#f.seed(), n = this.#T(this.#_(), e);
+		return {
+			icon: this,
+			origin: t,
+			size: this.#v(),
+			move: (e, t) => {
+				n && this.#E(n, e, t);
+			},
+			drop: (e, n) => {
+				this.#f.moveTo(t.x + e, t.y + n);
+			},
+			end: () => n?.canvas.remove()
+		};
+	}
+	#y(e) {
+		if (!this.selected) return [];
+		let t = this.#i;
+		if (!t) return [];
+		let n = [];
+		for (let r of t.querySelectorAll("vf-icon")) {
+			if (r === this || !r.selected) continue;
+			let t = r.followDrag(e);
+			t && n.push(t);
+		}
+		return n;
+	}
+	#b(e) {
+		return [this, ...e.followers.map((e) => e.icon)];
+	}
+	#x(t, n, r) {
+		let i = this.#p;
+		if (!i) return;
+		if (i.pointer = {
+			clientX: r.clientX,
+			clientY: r.clientY
+		}, !i.proposal) {
+			if (t === i.origin.x && n === i.origin.y) return;
+			this.#L(), this.#a = !1, i.proposal = {
+				left: i.origin.x,
+				top: i.origin.y
+			}, this.#h.attach();
+			let r = this.#w();
+			i.outline = this.#T(i.frame, r), i.followers = this.#y(r), e(this, "vf-drag-start", {
+				left: i.origin.x,
+				top: i.origin.y,
+				icons: this.#b(i)
+			});
+		}
+		if (t === i.proposal.left && n === i.proposal.top) return;
+		i.proposal = {
+			left: t,
+			top: n
+		};
+		let a = t - i.origin.x, o = n - i.origin.y;
+		i.outline && this.#E(i.outline, a, o);
+		for (let e of i.followers) e.move(a, o);
+		e(this, "vf-drag", this.#D(i));
+	}
+	#S(t, n) {
+		let r = this.#p;
+		if (this.#p = null, !r?.proposal) return;
+		this.#h.detach(), r.outline?.canvas.remove();
+		for (let e of r.followers) e.end();
+		if (t && (r.pointer = {
+			clientX: t.clientX,
+			clientY: t.clientY
+		}), n) {
+			e(this, "vf-drag-cancel", {});
+			return;
+		}
+		let i = this.#D(r);
+		e(this, "vf-drop", i, { cancelable: !0 }) && this.#C(r, i);
+	}
+	#C(e, t) {
+		if (e.followers.length === 0) {
+			this.#f.moveTo(t.left, t.top);
+			return;
+		}
+		let n = this.#f.bounds, r = [{
+			origin: e.origin,
+			size: e.size
+		}, ...e.followers.map((e) => ({
+			origin: e.origin,
+			size: e.size
+		}))], i = (e, t, n, i) => {
+			let a = -Infinity, o = Infinity;
+			for (let e of r) a = Math.max(a, -t(e)), o = Math.min(o, i - n(e) - t(e));
+			return o < a && (o = Infinity), Math.min(Math.max(e, a), o);
+		}, a = i(t.left - e.origin.x, (e) => e.origin.x, (e) => e.size.width, n.width), o = i(t.top - e.origin.y, (e) => e.origin.y, (e) => e.size.height, n.height);
+		this.#f.moveTo(e.origin.x + a, e.origin.y + o);
+		for (let t of e.followers) t.drop(a, o);
+	}
+	#w() {
+		let t = { surface: null };
+		return e(this, "vf-drag-surface-request", t, { composed: !1 }), t.surface;
+	}
+	#T(e, t) {
+		let n = this.renderRoot, a = n?.querySelector(".frame");
+		if (!a) return null;
+		let o = r(this), s = (t) => ({
+			x: Math.round((t.left - e.left) / o),
+			y: Math.round((t.top - e.top) / o),
+			width: Math.round(t.width / o),
+			height: Math.round(t.height / o)
+		}), c = Math.round(e.width / o), l = Math.round(e.height / o), u = n.querySelector(".art"), d = n.querySelector(".name"), f = this.open && this._ghost ? this._ghost : this.#t, p = f != null && (f instanceof HTMLCanvasElement ? f.width > 0 : f.complete && f.naturalWidth > 0), m = p ? f.getBoundingClientRect() : null, h = _(p ? f : null, {
+			width: c,
+			height: l,
+			art: m && m.width > 0 ? s(m) : null,
+			cell: u ? s(u.getBoundingClientRect()) : {
+				x: 0,
+				y: 0,
+				width: c,
+				height: l
+			},
+			plate: d ? s(d.getBoundingClientRect()) : null
+		});
+		if (!h) return null;
+		let g = document.createElement("canvas");
+		g.className = "drag-outline";
+		let v = g.style;
+		v.position = "absolute", v.display = "block", v.pointerEvents = "none", v.filter = "invert(1)", v.mixBlendMode = "difference", v.imageRendering = "pixelated", v.width = i(h.width), v.height = i(h.height);
+		let y = {
+			x: 0,
+			y: 0
+		};
+		if (t) {
+			let n = t.getBoundingClientRect();
+			y = {
+				x: Math.round((e.left - n.left) / o),
+				y: Math.round((e.top - n.top) / o)
+			}, t.append(g);
+		} else a.append(g);
+		return {
+			ring: h,
+			canvas: g,
+			base: y,
+			phase: -1
+		};
+	}
+	#E(e, t, n) {
+		let r = e.base.x + t, a = e.base.y + n;
+		e.canvas.style.left = i(r), e.canvas.style.top = i(a);
+		let o = ((r + a) % 2 + 2) % 2;
+		o !== e.phase && (e.phase = o, y(e.ring, e.canvas, o));
+	}
+	#D(e) {
+		let { left: t, top: n } = e.proposal ?? {
+			left: e.origin.x,
+			top: e.origin.y
+		}, i = r(this);
+		return {
+			clientX: e.pointer.clientX,
+			clientY: e.pointer.clientY,
+			left: t,
+			top: n,
+			x: e.frame.left + (t - e.origin.x) * i,
+			y: e.frame.top + (n - e.origin.y) * i,
+			icons: this.#b(e)
+		};
+	}
 	connectedCallback() {
-		super.connectedCallback(), this.#E(), this.#C(), this.addEventListener("keydown", this.#F);
+		super.connectedCallback(), this.#V(), this.#R(), this.selectable && this.selected && this.#u.attach(), this.addEventListener("keydown", this.#Z);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("keydown", this.#F), this.#S();
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.#Z), this.#L(), this.#p?.outline?.canvas.remove();
+		for (let e of this.#p?.followers ?? []) e.end();
+		this.#p = null;
 	}
 	updated(e) {
-		if (e.has("selectable") && this.#E(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#C(), (e.has("selected") || e.has("selectable")) && (this.selectable && this.selected ? this.#c.attach() : this.#c.detach()), e.has("_editing") && this._editing) {
+		if (e.has("selectable") && this.#V(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#R(), (e.has("selected") || e.has("selectable")) && (this.selectable && this.selected ? this.#u.attach() : this.#u.detach()), e.has("_editing") && this._editing) {
 			let e = this.renderRoot.querySelector("input");
 			e?.focus(), e?.select();
 		}
-		(e.has("label") || e.has("_draft") || e.has("_editing")) && this.#h(), (e.has("open") || e.has("size")) && this.#y();
+		(e.has("label") || e.has("_draft") || e.has("_editing")) && this.#A(), (e.has("open") || e.has("size")) && this.#P();
 	}
-	#p;
-	#m() {
-		this.#p ||= c(this, `vf-icon${this.label ? ` ("${this.label}")` : ""}`, "<vf-icon movable label=\"Read Me\" width=\"64\" top=\"16\" left=\"16\">");
+	#O;
+	#k() {
+		this.#O ||= l(this, `vf-icon${this.label ? ` ("${this.label}")` : ""}`, "<vf-icon movable label=\"Read Me\" width=\"64\" top=\"16\" left=\"16\">");
 	}
 	firstUpdated() {
-		document.fonts.ready.then(() => this.#h());
+		document.fonts.ready.then(() => this.#A());
 	}
-	#h() {
+	#A() {
 		let e = this.renderRoot?.querySelector(".name");
 		if (!e) {
 			this.#e = 0;
@@ -351,14 +585,14 @@ var C = {
 			n.selectNodeContents(e), t = n.getBoundingClientRect().width, n.detach();
 		}
 		let n = t / r(this) + 2, i = Math.max(2, Math.ceil(n / 2) * 2);
-		this.#e = this._editing && t === 0 ? Math.max(i, C[this.size]) : i, e.style.width = this.#g;
+		this.#e = this._editing && t === 0 ? Math.max(i, D[this.size]) : i, e.style.width = this.#j;
 	}
-	get #g() {
+	get #j() {
 		return this.#e ? `calc(var(--vf-scale, 1) * ${this.#e}px)` : "";
 	}
-	#_;
-	#v;
-	#y() {
+	#M;
+	#N;
+	#P() {
 		let e = this.renderRoot?.querySelector(`slot[name='${this.size}']`), t = null;
 		for (let n of e?.assignedElements({ flatten: !0 }) ?? []) {
 			let e = n instanceof HTMLImageElement || n instanceof HTMLCanvasElement ? n : n.querySelector("img, canvas");
@@ -367,39 +601,39 @@ var C = {
 				break;
 			}
 		}
-		t !== this.#t && (this.#t?.removeEventListener("load", this.#v), this.#t?.removeEventListener("error", this.#v), this.#t = t, t?.addEventListener("load", this.#v), t?.addEventListener("error", this.#v)), this.#b();
+		t !== this.#t && (this.#t?.removeEventListener("load", this.#N), this.#t?.removeEventListener("error", this.#N), this.#t = t, t?.addEventListener("load", this.#N), t?.addEventListener("error", this.#N)), this.#F();
 	}
-	#b() {
+	#F() {
 		let e = this.#t, t = e instanceof HTMLImageElement ? e.complete && e.naturalWidth > 0 : e != null && e.width > 0;
 		if (!this.open || e == null || !t) {
-			this._ghost = null, this.#i = "";
+			this._ghost = null, this.#o = "";
 			return;
 		}
 		let n = e instanceof HTMLImageElement ? `${this.size} ${e.currentSrc}` : "";
-		if (n !== "" && n === this.#i && this._ghost) return;
-		let r = g(e);
+		if (n !== "" && n === this.#o && this._ghost) return;
+		let r = v(e);
 		if (r) {
 			r.className = "ghost", r.style.width = `calc(var(--vf-scale, 1) * ${r.width}px)`, r.style.height = `calc(var(--vf-scale, 1) * ${r.height}px)`;
 			let t = e instanceof HTMLImageElement ? e.alt : "";
 			t && (r.setAttribute("role", "img"), r.setAttribute("aria-label", t));
 		}
-		this._ghost = r, this.#i = r ? n : "";
+		this._ghost = r, this.#o = r ? n : "";
 	}
-	#x() {
-		this.#S(), this.#o = window.setTimeout(() => {
-			this.#o = 0, this.startEditing();
+	#I() {
+		this.#L(), this.#c = window.setTimeout(() => {
+			this.#c = 0, this.startEditing();
 		}, 800);
 	}
-	#S() {
-		this.#o &&= (clearTimeout(this.#o), 0);
+	#L() {
+		this.#c &&= (clearTimeout(this.#c), 0);
 	}
 	startEditing() {
-		this.#S(), !(!this.editable || this._editing) && (this.#a = this.label, this._draft = this.label, this._editing = !0);
+		this.#L(), !(!this.editable || this._editing) && (this.#s = this.label, this._draft = this.label, this._editing = !0);
 	}
 	commitEditing() {
 		if (!this._editing) return;
 		this._editing = !1;
-		let t = this.#a, n = this._draft;
+		let t = this.#s, n = this._draft;
 		if (n.trim() === "") {
 			this._draft = t, n !== t && e(this, "vf-name-rejected", {
 				attempted: n,
@@ -414,49 +648,49 @@ var C = {
 		}));
 	}
 	cancelEditing() {
-		this._editing && (this._editing = !1, this._draft = this.#a);
+		this._editing && (this._editing = !1, this._draft = this.#s);
 	}
 	render() {
 		let e = this._editing, t = e ? this._draft : this.label, n = this.focusRule.marked && !e, r = t !== "" || e, i = `caption${e ? " editing" : ""}${n && t ? " focus-rule" : ""}`, a = `art${this.open && this._ghost ? " open" : ""}${n && !t ? " focus-rule" : ""}`, o = this.width ? `width: calc(var(--vf-scale, 1) * ${this.width}px)` : "";
-		return y`<div
+		return S`<div
       class="frame vf-snap"
       part="frame"
       style=${o}
-      @pointerdown=${this.#O}
-      @pointermove=${this.#f.onPointerMove}
-      @pointerup=${this.#f.onPointerUp}
-      @pointercancel=${this.#f.onPointerUp}
-      @dblclick=${this.#k}
+      @pointerdown=${this.#U}
+      @pointermove=${this.#m.onPointerMove}
+      @pointerup=${this.#G}
+      @pointercancel=${this.#G}
+      @dblclick=${this.#W}
     >
       <div class=${a} part="icon">
-        ${this.size === "small" ? y`<slot name="small" @slotchange=${this.#_}></slot>` : y`<slot name="large" @slotchange=${this.#_}></slot>`}${this._ghost ?? b}
+        ${this.size === "small" ? S`<slot name="small" @slotchange=${this.#M}></slot>` : S`<slot name="large" @slotchange=${this.#M}></slot>`}${this._ghost ?? C}
       </div>
-      ${r ? y`<div class=${i}>
+      ${r ? S`<div class=${i}>
             <!-- No whitespace around the span: it is the measured run, and a
                  stray space would widen it. -->
             <div class="label" part="label"><span
               class="name"
               part="plate"
-              style=${this.#e ? `width: ${this.#g}` : ""}
+              style=${this.#e ? `width: ${this.#j}` : ""}
               >${t}</span
             ></div>
-            ${e ? y`<div class="rename-box">
+            ${e ? S`<div class="rename-box">
                   <input
                     class="rename"
                     part="input"
                     type="text"
                     maxlength=${this.maxlength}
                     .value=${this._draft}
-                    @beforeinput=${this.#j}
-                    @input=${this.#M}
-                    @keydown=${this.#P}
+                    @beforeinput=${this.#q}
+                    @input=${this.#J}
+                    @keydown=${this.#X}
                     @blur=${this.commitEditing}
                   />
-                </div>` : b}
-          </div>` : b}
+                </div>` : C}
+          </div>` : C}
     </div>`;
 	}
-	#C() {
+	#R() {
 		if (!this.selectable) {
 			this.#n.role = null, this.#n.ariaSelected = null, this.#n.ariaLabel = null;
 			return;
@@ -465,53 +699,71 @@ var C = {
 			this.#n.role = "option", this.#n.ariaSelected = this.selected ? "true" : "false", this.#n.ariaLabel = null;
 			return;
 		}
-		this.#n.role = "img", this.#n.ariaSelected = null, this.#n.ariaLabel = this.label || this.#w || null;
+		this.#n.role = "img", this.#n.ariaSelected = null, this.#n.ariaLabel = this.label || this.#z || null;
 	}
-	get #w() {
+	get #z() {
 		return this.#t instanceof HTMLImageElement ? this.#t.alt : "";
 	}
-	get #T() {
+	get #B() {
 		return this.selectable;
 	}
-	#E() {
-		this.hasAttribute("tabindex") || (this.#T ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
+	#V() {
+		this.hasAttribute("tabindex") || (this.#B ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
 	}
-	#D(t) {
+	#H(t) {
 		t !== this.selected && (this.selected = t, e(this, "vf-select", { selected: t }));
 	}
-	#O;
-	#k;
-	#A;
-	#j;
-	#M;
-	#N(t) {
+	setSelected(e) {
+		this.#H(e);
+	}
+	touches(e) {
+		let t = this.renderRoot;
+		if (!t) return !1;
+		for (let n of [".art", ".name"]) {
+			let r = t.querySelector(n);
+			if (!r) continue;
+			let i = r.getBoundingClientRect();
+			if (i.left < e.right && i.right > e.left && i.top < e.bottom && i.bottom > e.top) return !0;
+		}
+		return !1;
+	}
+	#U;
+	#W;
+	#G;
+	#K;
+	#q;
+	#J;
+	#Y(t) {
 		e(this, "vf-name-too-long", {
 			attempted: t,
 			accepted: t.slice(0, this.maxlength),
 			limit: this.maxlength
 		});
 	}
-	#P;
-	#F;
+	#X;
+	#Z;
 };
-a([x()], D.prototype, "label", void 0), a([x({ reflect: !0 })], D.prototype, "size", void 0), a([x({
+o([w()], j.prototype, "label", void 0), o([w({ reflect: !0 })], j.prototype, "size", void 0), o([w({
+	type: Boolean,
+	reflect: !0
+})], j.prototype, "selectable", void 0), o([w({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "selectable", void 0), a([x({
+})], j.prototype, "selected", void 0), o([w({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "selected", void 0), a([x({
+})], j.prototype, "target", void 0), o([w({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "color", void 0), a([x({
+})], j.prototype, "color", void 0), o([w({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "open", void 0), a([x({
+})], j.prototype, "open", void 0), o([w({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "movable", void 0), a([x({
+})], j.prototype, "movable", void 0), o([w({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "editable", void 0), a([x({ type: Number })], D.prototype, "width", void 0), a([x({ type: Number })], D.prototype, "maxlength", void 0), a([S()], D.prototype, "_editing", void 0), a([S()], D.prototype, "_draft", void 0), a([S()], D.prototype, "_ghost", void 0), D = a([t("vf-icon")], D);
+})], j.prototype, "editable", void 0), o([w({ type: Number })], j.prototype, "width", void 0), o([w({ type: Number })], j.prototype, "maxlength", void 0), o([T()], j.prototype, "_editing", void 0), o([T()], j.prototype, "_draft", void 0), o([T()], j.prototype, "_ghost", void 0), j = E = o([t("vf-icon")], j);
 //#endregion
-export { D as VfIcon };
+export { j as VfIcon };