vintage-frames 0.13.0 → 0.14.1

package/dist/components/vf-icon.js

@@ -5,36 +5,37 @@ 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 { dragSlop as g, prefersReducedMotion as _, runOutlineTravel as v } from "../motion.js";
-import { deriveDragOutline as y, deriveOpenArt as b, dotOutline as x, penPhase as S, xorPenCanvas as C } from "../open-art.js";
-import { FocusRuleController as w } from "../focus-modality.js";
-import { LitElement as T, css as E, html as D, nothing as O } from "lit";
-import { property as k, state as A } from "lit/decorators.js";
+import { vfStrokeDecls as f } from "../styles/recipes/stroke.js";
+import { vfFocusUnderline as p } from "../styles/recipes/focus.js";
+import { GridSnapController as m } from "../grid-snap.js";
+import { DocumentListenersController as h } from "../document-listeners.js";
+import { DragController as g } from "../drag.js";
+import { dragSlop as _, prefersReducedMotion as v, runOutlineTravel as y } from "../motion.js";
+import { deriveDragOutline as b, deriveOpenArt as x, dotOutline as S, penPhase as C, xorPenCanvas as w } from "../open-art.js";
+import { FocusRuleController as T } from "../focus-modality.js";
+import { LitElement as E, css as D, html as O, nothing as k } from "lit";
+import { property as A, state as j } from "lit/decorators.js";
 //#region src/components/vf-icon.ts
-var j, M = {
+var M, N = {
 	large: 32,
 	small: 16
-}, N = 1, P = 8, F = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), I = class extends c(T) {
+}, P = 1, F = 8, I = (e, t, n) => n <= t ? Math.max(e, t) : Math.min(Math.max(e, t), n), L = "vf-icon-field, [role=\"listbox\"]", R = (e) => e instanceof Element && e.matches(L), z = class extends c(E) {
 	static {
-		j = this;
+		M = this;
 	}
 	constructor(...t) {
-		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 w(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 = !1, this.#d = null, this.#f = null, this.#p = new m(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 m(this), this.focusRule = new T(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 = !1, this.#d = null, this.#f = null, this.#p = new h(this, () => [[
 			document,
 			"pointerdown",
-			this.#te,
+			this.#ne,
 			!0
 		]]), this.#m = (e, t, n) => this.#h() ? {
 			x: Math.max(e, 0),
-			y: Math.max(t, 0)
+			y: Math.max(t, n.top)
 		} : {
-			x: F(e, n.width - a(this.offsetWidth, this)),
-			y: F(t, n.height - a(this.offsetHeight, this))
-		}, this.#g = new s(this, (e, t, n) => this.#m(e, t, n)), this.#_ = null, this.#v = new h(this, {
+			x: I(e, 0, n.width - a(this.offsetWidth, this)),
+			y: I(t, n.top, n.height - a(this.offsetHeight, this))
+		}, this.#g = new s(this, (e, t, n) => this.#m(e, t, n)), this.#_ = null, this.#v = new g(this, {
 			onDragStart: (e) => {
 				if (!this.movable || e.button !== 0 || this._editing) return null;
 				this.#L();
@@ -50,7 +51,7 @@ var j, M = {
 						clientX: e.clientX,
 						clientY: e.clientY
 					},
-					slop: g(e),
+					slop: _(e),
 					proposal: null,
 					outline: null,
 					followers: [],
@@ -63,14 +64,14 @@ var j, M = {
 			onDragEnd: (e, t) => {
 				this.#A(e, t);
 			}
-		}), this.#y = new m(this, () => [[
+		}), this.#y = new h(this, () => [[
 			document,
 			"keydown",
 			this.#b,
 			!0
 		]]), this.#b = (e) => {
 			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.#v.cancel());
-		}, this.#x = null, this.#S = new m(this, () => [[
+		}, this.#x = null, this.#S = new h(this, () => [[
 			document,
 			"pointerdown",
 			this.#C,
@@ -85,10 +86,16 @@ var j, M = {
 		}, this.#w = (e) => {
 			e.key !== "Escape" || !this.#x || (e.preventDefault(), e.stopPropagation(), this.#x.finish());
 		}, this.#I = !1, this.#B = () => {
-			this.#H(), this.#K();
+			this.#H(), this.#q();
 		}, this.#V = () => {
 			this.#U();
-		}, this.#Z = (e) => {
+		}, this.#K = () => {
+			queueMicrotask(() => {
+				if (!this._editing) return;
+				let e = this.renderRoot.querySelector("input");
+				e && this.renderRoot.activeElement === e || this.commitEditing();
+			});
+		}, this.#Q = (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.#l < 800;
 			this.#l = e.timeStamp, this.#G();
@@ -101,43 +108,43 @@ var j, M = {
 				second: i !== null && e.timeStamp - i.time <= 500 && Math.hypot(e.clientX - i.x, e.clientY - i.y) <= 24
 			} : null;
 			let a = !e.shiftKey && !e.metaKey;
-			this.selectable && (a ? this.#X(!0) : this.#X(!this.selected)), this.#a = a && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#W(), this.#J && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#v.onPointerDown(e);
-		}, this.#Q = () => {
+			this.selectable && (a ? this.#Z(!0) : this.#Z(!this.selected)), this.#a = a && n && this.#i !== null, this.editable && t && n && !r && !e.shiftKey && !e.metaKey && this.#W(), this.#Y && (this.focus({ preventScroll: !0 }), this.focusRule.suppress()), this.#v.onPointerDown(e);
+		}, this.#$ = () => {
 			this._editing || this.#u || e(this, "vf-open", {});
-		}, this.#$ = (t) => {
+		}, this.#ee = (t) => {
 			let n = this.#_?.proposal != null;
 			this.#v.onPointerUp(t);
-			let r = this.#ee(t, n);
+			let r = this.#te(t, n);
 			if (this.#a) {
 				this.#a = !1;
 				let e = t.type === "pointercancel" ? null : this.#i;
 				for (let t of e?.querySelectorAll("vf-icon") ?? []) t !== this && t.selected && t.setSelected(!1);
 			}
 			r && e(this, "vf-open", {});
-		}, this.#te = (e) => {
+		}, this.#ne = (e) => {
 			let t = e.composedPath();
 			if (t.includes(this) || (this.#G(), this.#f = null, e.shiftKey || e.metaKey)) return;
 			let n = this.#i;
 			if (n !== null) {
-				let e = t.find((e) => e instanceof j);
-				if (e?.selected && e.#i === n) return;
+				let e = t.find((e) => e instanceof M);
+				if (!e && !t.some(R) || e?.selected && e.#i === n) return;
 			}
-			this.#X(!1);
-		}, this.#ne = (e) => {
+			this.#Z(!1);
+		}, this.#re = (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.#ie(a);
-		}, this.#re = (e) => {
+			a.length > this.maxlength && this.#ae(a);
+		}, this.#ie = (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.#ie(e);
+				t.value = e.slice(0, this.maxlength), t.setSelectionRange(n, n), this.#ae(e);
 			}
 			this._draft = t.value;
-		}, this.#ae = (e) => {
+		}, this.#oe = (e) => {
 			e.key === "Enter" ? (e.preventDefault(), this.commitEditing(), this.focus()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.cancelEditing(), this.focus());
-		}, this.#oe = (t) => {
+		}, this.#se = (t) => {
 			if (this.#G(), !(this._editing || t.defaultPrevented)) {
 				if ((t.metaKey || t.ctrlKey) && !t.altKey && (t.key.toLowerCase() === "o" || t.key === "ArrowDown")) {
 					t.preventDefault(), e(this, "vf-open", {});
@@ -150,7 +157,7 @@ var j, M = {
 						return;
 					case " ":
 						if (!this.selectable) return;
-						t.preventDefault(), this.focusRule.reveal(), this.#X(!this.selected);
+						t.preventDefault(), this.focusRule.reveal(), this.#Z(!this.selected);
 						return;
 					case "ArrowLeft":
 					case "ArrowRight":
@@ -158,7 +165,7 @@ var j, M = {
 					case "ArrowDown": {
 						if (!this.movable) return;
 						t.preventDefault(), this.focusRule.reveal();
-						let e = t.shiftKey ? P : N, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
+						let e = t.shiftKey ? F : P, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
 						this.#L();
 						let i = this.#g.seed();
 						this.#g.moveTo(i.x + n, i.y + r);
@@ -168,7 +175,7 @@ var j, M = {
 		};
 	}
 	static {
-		this.styles = [d, E`
+		this.styles = [d, D`
       :host {
         display: inline-block;
         cursor: var(--vf-cursor, default);
@@ -333,8 +340,7 @@ var j, M = {
         position: absolute;
         inset: calc(var(--vf-scale, 1) * -2px) calc(var(--vf-scale, 1) * -1px);
         background: var(--vf-white, #fff);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
-        padding: calc(var(--vf-scale, 1) * 1px);
+        ${f({ padding: 1 })}
       }
       .rename {
         display: block;
@@ -386,12 +392,12 @@ var j, M = {
          as a visible focus (see focus-modality.ts). */
       .caption.focus-rule .label::after {
         --vf-focus-underline-offset: -2px;
-        ${f}
+        ${p}
       }
       /* No name, no plate — the rule falls back to the art cell. */
       .art.focus-rule::after {
         --vf-focus-underline-offset: -2px;
-        ${f}
+        ${p}
       }
       :host(:focus) {
         outline: none;
@@ -405,7 +411,7 @@ var j, M = {
 		return this.#i !== null;
 	}
 	get #i() {
-		return this.closest("vf-icon-field, [role=\"listbox\"]");
+		return this.closest(L);
 	}
 	#a;
 	#o;
@@ -533,11 +539,11 @@ var j, M = {
 		}, ...e.followers.map((e) => ({
 			corner: r(e.origin, e.offset),
 			size: e.size
-		}))], a = this.#h(), o = (e, t, n, r) => {
-			let o = -Infinity, s = Infinity;
-			for (let e of i) o = Math.max(o, -t(e)), a || (s = Math.min(s, r - n(e) - t(e)));
-			return s < o && (s = Infinity), Math.min(Math.max(e, o), s);
-		}, s = o(t.left - e.origin.x, (e) => e.corner.x, (e) => e.size.width, n.width), c = o(t.top - e.origin.y, (e) => e.corner.y, (e) => e.size.height, n.height);
+		}))], a = this.#h(), o = (e, t, n, r, o) => {
+			let s = -Infinity, c = Infinity;
+			for (let e of i) s = Math.max(s, r - t(e)), a || (c = Math.min(c, o - n(e) - t(e)));
+			return c < s && (c = Infinity), Math.min(Math.max(e, s), c);
+		}, s = o(t.left - e.origin.x, (e) => e.corner.x, (e) => e.size.width, 0, n.width), c = o(t.top - e.origin.y, (e) => e.corner.y, (e) => e.size.height, n.top, n.height);
 		this.#g.moveTo(e.origin.x + s, e.origin.y + c);
 		for (let t of e.followers) t.drop(s, c);
 	}
@@ -553,7 +559,7 @@ var j, M = {
 			y: Math.round((e.top - u) / o),
 			width: Math.round(e.width / o),
 			height: Math.round(e.height / o)
-		}), m = Math.round((d - l) / o), h = Math.round((f - u) / o), g = this.open && this._ghost ? this._ghost : this.#t, _ = g != null && (g instanceof HTMLCanvasElement ? g.width > 0 : g.complete && g.naturalWidth > 0), v = _ ? g.getBoundingClientRect() : null, b = y(_ ? g : null, {
+		}), m = Math.round((d - l) / o), h = Math.round((f - u) / o), g = this.open && this._ghost ? this._ghost : this.#t, _ = g != null && (g instanceof HTMLCanvasElement ? g.width > 0 : g.complete && g.naturalWidth > 0), v = _ ? g.getBoundingClientRect() : null, y = b(_ ? g : null, {
 			width: m,
 			height: h,
 			art: v && v.width > 0 ? p(v) : null,
@@ -565,15 +571,15 @@ var j, M = {
 			},
 			plate: c ? p(c) : null
 		});
-		if (!b) return null;
-		let x = C("drag-outline"), S = x.style;
-		S.position = "absolute", S.width = i(b.width), S.height = i(b.height);
-		let w = t ?? a, T = t ? t.getBoundingClientRect() : e, E = {
+		if (!y) return null;
+		let x = w("drag-outline"), S = x.style;
+		S.position = "absolute", S.width = i(y.width), S.height = i(y.height);
+		let C = t ?? a, T = t ? t.getBoundingClientRect() : e, E = {
 			x: Math.round((l - T.left) / o),
 			y: Math.round((u - T.top) / o)
 		};
-		return w.append(x), {
-			ring: b,
+		return C.append(x), {
+			ring: y,
 			canvas: x,
 			base: E,
 			phase: -1
@@ -582,8 +588,8 @@ var j, M = {
 	#P(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 = S(r, a);
-		o !== e.phase && (e.phase = o, x(e.ring, e.canvas, o));
+		let o = C(r, a);
+		o !== e.phase && (e.phase = o, S(e.ring, e.canvas, o));
 	}
 	#F(e) {
 		let { left: t, top: n } = e.proposal ?? {
@@ -601,15 +607,15 @@ var j, M = {
 		};
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#Y(), this.#K(), this.selectable && this.selected && this.#p.attach(), this.addEventListener("keydown", this.#oe);
+		super.connectedCallback(), this.#X(), this.#q(), this.selectable && this.selected && this.#p.attach(), this.addEventListener("keydown", this.#se);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("keydown", this.#oe), this.#G(), this.#_?.outline?.canvas.remove();
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.#se), this.#G(), this.#_?.outline?.canvas.remove();
 		for (let e of this.#_?.followers ?? []) e.end();
 		this.#_ = null, this.#x?.finish();
 	}
 	updated(e) {
-		if (e.has("selectable") && this.#Y(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#K(), (e.has("selected") || e.has("selectable")) && (this.selectable && this.selected ? this.#p.attach() : this.#p.detach()), e.has("_editing") && this._editing) {
+		if (e.has("selectable") && this.#X(), (e.has("selectable") || e.has("selected") || e.has("label")) && this.#q(), (e.has("selected") || e.has("selectable")) && (this.selectable && this.selected ? this.#p.attach() : this.#p.detach()), e.has("_editing") && this._editing) {
 			let e = this.renderRoot.querySelector("input");
 			e?.focus(), e?.select();
 		}
@@ -634,7 +640,7 @@ var j, M = {
 			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, M[this.size]) : i, e.style.width = this.#z;
+		this.#e = this._editing && t === 0 ? Math.max(i, N[this.size]) : i, e.style.width = this.#z;
 	}
 	get #z() {
 		return this.#e ? `calc(var(--vf-scale, 1) * ${this.#e}px)` : "";
@@ -660,7 +666,7 @@ var j, M = {
 		}
 		let n = e instanceof HTMLImageElement ? `${this.size} ${e.currentSrc}` : "";
 		if (n !== "" && n === this.#o && this._ghost) return;
-		let r = b(e);
+		let r = x(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 : "";
@@ -696,26 +702,27 @@ var j, M = {
 			previous: t
 		}));
 	}
+	#K;
 	cancelEditing() {
 		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 D`<div
+		return O`<div
       class="frame vf-snap"
       part="frame"
       style=${o}
-      @pointerdown=${this.#Z}
+      @pointerdown=${this.#Q}
       @pointermove=${this.#v.onPointerMove}
-      @pointerup=${this.#$}
-      @pointercancel=${this.#$}
-      @lostpointercapture=${this.#$}
-      @dblclick=${this.#Q}
+      @pointerup=${this.#ee}
+      @pointercancel=${this.#ee}
+      @lostpointercapture=${this.#ee}
+      @dblclick=${this.#$}
     >
       <div class=${a} part="icon">
-        ${this.size === "small" ? D`<slot name="small" @slotchange=${this.#B}></slot>` : D`<slot name="large" @slotchange=${this.#B}></slot>`}${this._ghost ?? O}
+        ${this.size === "small" ? O`<slot name="small" @slotchange=${this.#B}></slot>` : O`<slot name="large" @slotchange=${this.#B}></slot>`}${this._ghost ?? k}
       </div>
-      ${r ? D`<div class=${i}>
+      ${r ? O`<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
@@ -724,23 +731,23 @@ var j, M = {
               style=${this.#e ? `width: ${this.#z}` : ""}
               >${t}</span
             ></div>
-            ${e ? D`<div class="rename-box">
+            ${e ? O`<div class="rename-box">
                   <input
                     class="rename"
                     part="input"
                     type="text"
                     maxlength=${this.maxlength}
                     .value=${this._draft}
-                    @beforeinput=${this.#ne}
-                    @input=${this.#re}
-                    @keydown=${this.#ae}
-                    @blur=${this.commitEditing}
+                    @beforeinput=${this.#re}
+                    @input=${this.#ie}
+                    @keydown=${this.#oe}
+                    @blur=${this.#K}
                   />
-                </div>` : O}
-          </div>` : O}
+                </div>` : k}
+          </div>` : k}
     </div>`;
 	}
-	#K() {
+	#q() {
 		if (!this.selectable) {
 			this.#n.role = null, this.#n.ariaSelected = null, this.#n.ariaLabel = null;
 			return;
@@ -749,22 +756,22 @@ var j, M = {
 			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.#q || null;
+		this.#n.role = "img", this.#n.ariaSelected = null, this.#n.ariaLabel = this.label || this.#J || null;
 	}
-	get #q() {
+	get #J() {
 		return this.#t instanceof HTMLImageElement ? this.#t.alt : "";
 	}
-	get #J() {
+	get #Y() {
 		return this.selectable;
 	}
-	#Y() {
-		this.hasAttribute("tabindex") || (this.#J ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
+	#X() {
+		this.hasAttribute("tabindex") || (this.#Y ? this.tabIndex = 0 : this.removeAttribute("tabindex"));
 	}
-	#X(t) {
+	#Z(t) {
 		t !== this.selected && (this.selected = t, e(this, "vf-select", { selected: t }));
 	}
 	setSelected(e) {
-		this.#X(e);
+		this.#Z(e);
 	}
 	touches(e) {
 		let t = this.renderRoot;
@@ -786,59 +793,59 @@ var j, M = {
 	async dragTo(e, t) {
 		if (this.#x?.finish(), await this.updateComplete, this.#x?.finish(), !this.isConnected) return !1;
 		this.#L();
-		let n = this.#g.seed(), r = this.#g.resolve(e, t), i = r.x - n.x, a = r.y - n.y, o = i === 0 && a === 0 || _() || this._editing || this.#_ !== null ? null : this.#N(this.#T(), this.#M());
+		let n = this.#g.seed(), r = this.#g.resolve(e, t), i = r.x - n.x, a = r.y - n.y, o = i === 0 && a === 0 || v() || this._editing || this.#_ !== null ? null : this.#N(this.#T(), this.#M());
 		return o ? (this.#P(o, 0, 0), new Promise((e) => {
 			let t = null;
-			t = v(Math.hypot(i, a), (e) => this.#P(o, Math.round(i * e), Math.round(a * e)), () => {
+			t = y(Math.hypot(i, a), (e) => this.#P(o, Math.round(i * e), Math.round(a * e)), () => {
 				this.#x === t && (this.#x = null, this.#S.detach()), o.canvas.remove(), this.isConnected && this.#g.moveTo(r.x, r.y), e(!0);
 			}), this.#x = t, this.#S.attach();
 		})) : (this.#g.moveTo(r.x, r.y), !1);
 	}
-	#Z;
 	#Q;
 	#$;
-	#ee(e, t) {
+	#ee;
+	#te(e, t) {
 		let n = this.#d;
-		return !n || n.pointerId !== e.pointerId || (this.#d = null, !(e.type !== "pointercancel" && !t && !this._editing && Math.hypot(e.clientX - n.x, e.clientY - n.y) < g(e))) ? !1 : n.second ? !0 : (this.#f = {
+		return !n || n.pointerId !== e.pointerId || (this.#d = null, !(e.type !== "pointercancel" && !t && !this._editing && Math.hypot(e.clientX - n.x, e.clientY - n.y) < _(e))) ? !1 : n.second ? !0 : (this.#f = {
 			time: n.time,
 			x: n.x,
 			y: n.y
 		}, !1);
 	}
-	#te;
 	#ne;
 	#re;
-	#ie(t) {
+	#ie;
+	#ae(t) {
 		e(this, "vf-name-too-long", {
 			attempted: t,
 			accepted: t.slice(0, this.maxlength),
 			limit: this.maxlength
 		});
 	}
-	#ae;
 	#oe;
+	#se;
 };
-o([k()], I.prototype, "label", void 0), o([k({ reflect: !0 })], I.prototype, "size", void 0), o([k({
+o([A()], z.prototype, "label", void 0), o([A({ reflect: !0 })], z.prototype, "size", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "selectable", void 0), o([k({
+})], z.prototype, "selectable", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "selected", void 0), o([k({
+})], z.prototype, "selected", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "target", void 0), o([k({
+})], z.prototype, "target", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "color", void 0), o([k({
+})], z.prototype, "color", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "open", void 0), o([k({
+})], z.prototype, "open", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "movable", void 0), o([k({
+})], z.prototype, "movable", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "editable", void 0), o([k({ type: Number })], I.prototype, "width", void 0), o([k({ type: Number })], I.prototype, "maxlength", void 0), o([A()], I.prototype, "_editing", void 0), o([A()], I.prototype, "_draft", void 0), o([A()], I.prototype, "_ghost", void 0), I = j = o([t("vf-icon")], I);
+})], z.prototype, "editable", void 0), o([A({ type: Number })], z.prototype, "width", void 0), o([A({ type: Number })], z.prototype, "maxlength", void 0), o([j()], z.prototype, "_editing", void 0), o([j()], z.prototype, "_draft", void 0), o([j()], z.prototype, "_ghost", void 0), z = M = o([t("vf-icon")], z);
 //#endregion
-export { I as VfIcon };
+export { z as VfIcon };

package/dist/components/vf-list.js

@@ -4,21 +4,22 @@ import { ScaleController as n } from "../scale.js";
 import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { VfPositioned 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 { TypeAheadBuffer as f } from "../type-ahead.js";
-import { LitElement as p, css as m, html as h, nothing as g } from "lit";
-import { property as _, query as v, queryAssignedElements as y, state as b } from "lit/decorators.js";
+import { vfStrokeDecls as o } from "../styles/recipes/stroke.js";
+import { vfFocusRing as s } from "../styles/recipes/focus.js";
+import { vfScrollRail as c } from "../styles/recipes/scroll-rail.js";
+import { GridSnapController as l } from "../grid-snap.js";
+import { ScrollStateController as u } from "../scroll-state.js";
+import { ScrollRailController as d, renderScrollRail as f } from "../scroll-rail.js";
+import { TypeAheadBuffer as p } from "../type-ahead.js";
+import { LitElement as m, css as h, html as g, nothing as _ } from "lit";
+import { property as v, query as y, queryAssignedElements as b, state as x } from "lit/decorators.js";
 //#region src/components/vf-list.ts
-var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = class extends i(p) {
+var S = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), C = class extends i(m) {
 	static {
 		this.styles = [
 			a,
-			s,
-			m`
+			c,
+			h`
       :host {
         display: block;
       }
@@ -26,21 +27,21 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
       :host([disabled]) {
         color: var(--vf-disabled, #c0c0c0);
       }
-      /* The snapped wrapper: a real 1px frame (the rail's outer line), the
+      /* The snapped wrapper: the 1px frame (the rail's outer line), the
          [rows | rail] grid — the rail sizes itself to the 15px inside the
          frame — and everything riding the grid-snap offset as one. */
       .box {
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         background: var(--vf-white, #fff);
         display: grid;
         grid-template-columns: 1fr auto;
+        ${o()}
       }
       .list {
         grid-area: 1 / 1;
         min-width: 0;
         background: var(--vf-white, #fff);
-        /* The clamp is the content box's — the .box border adds the 2px frame
-           on top, keeping the clamped total where it always was. */
+        /* The clamp is the content box's — the .box frame adds its 2px on
+           top, keeping the clamped total where it always was. */
         max-height: calc(var(--vf-scale, 1) * var(--vf-list-max-height, 200px));
         /* Native scrolling; the bar itself is hidden by the recipe
            (.vf-scroll) and the reservation is the rail element, not a native
@@ -55,7 +56,7 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
          render()); the ring keeps that stop visible, inset to stay in-box. */
       .list:focus-visible {
         --vf-focus-offset: -2px;
-        ${o}
+        ${s}
       }
     `
 		];
@@ -66,12 +67,12 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
 	#r;
 	#i;
 	constructor() {
-		super(), this.scale = new n(this), this.gridSnap = new c(this), this.scrollState = new l(this, () => this.viewport, () => this.content, (e) => {
+		super(), this.scale = new n(this), this.gridSnap = new l(this), this.scrollState = new u(this, () => this.viewport, () => this.content, (e) => {
 			this._scrollable = e.x || e.y;
-		}), this.rail = new u(this, {
+		}), this.rail = new d(this, {
 			getScroll: () => this.viewport,
 			getContent: () => this.content
-		}), this._scrollable = !1, this.multiple = !1, this.value = "", this.values = [], this.disabled = !1, this.label = "", this.#e = -1, this.#t = -1, this.#n = new f(), this.#r = [], this.#i = this.attachInternals(), this.#l = (e) => {
+		}), this._scrollable = !1, this.multiple = !1, this.value = "", this.values = [], this.disabled = !1, this.label = "", this.#e = -1, this.#t = -1, this.#n = new p(), this.#r = [], this.#i = this.attachInternals(), this.#l = (e) => {
 			if (this.disabled) return;
 			let t = e.target?.closest("vf-list-item") ?? null;
 			if (!t || t.disabled) return;
@@ -156,21 +157,21 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
 		e.has("multiple") && (this.#i.ariaMultiSelectable = this.multiple ? "true" : null), e.has("disabled") && (this.#i.ariaDisabled = this.disabled ? "true" : null, this.#c()), e.has("label") && (this.#i.ariaLabel = this.label || null), e.has("values") ? (e.get("values") !== void 0 || this.values.length > 0) && this.#a(this.values) : e.has("value") && (e.get("value") !== void 0 || this.value !== "") && this.#a(this.value ? [this.value] : []);
 	}
 	#a(e) {
-		x(e, this.#r) || this.#s(e, !1);
+		S(e, this.#r) || this.#s(e, !1);
 	}
 	render() {
-		return h`
+		return g`
       <div class="box vf-snap">
         <div
           class="list vf-scroll"
           part="list"
-          tabindex=${this.disabled && this._scrollable ? "0" : g}
+          tabindex=${this.disabled && this._scrollable ? "0" : _}
         >
           <div class="list-content">
             <slot @slotchange=${this.#o}></slot>
           </div>
         </div>
-        ${d(this.rail, "vertical")}
+        ${f(this.rail, "vertical")}
       </div>
     `;
 	}
@@ -187,7 +188,7 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
 		let o = r.filter((e) => e.selected).map((e) => e.value);
 		this.#r = [...o];
 		let s = o[0] ?? "";
-		this.value !== s && (this.value = s), x(this.values, o) || (this.values = o), this.#c(), n && !x(a, o) && e(this, "vf-change", {
+		this.value !== s && (this.value = s), S(this.values, o) || (this.values = o), this.#c(), n && !S(a, o) && e(this, "vf-change", {
 			value: this.value,
 			values: [...o]
 		});
@@ -231,15 +232,15 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
 		!t || t.disabled || (t.focus(), t.scrollIntoView({ block: "nearest" }));
 	}
 };
-r([v(".list")], S.prototype, "viewport", void 0), r([v(".list-content")], S.prototype, "content", void 0), r([b()], S.prototype, "_scrollable", void 0), r([_({
+r([y(".list")], C.prototype, "viewport", void 0), r([y(".list-content")], C.prototype, "content", void 0), r([x()], C.prototype, "_scrollable", void 0), r([v({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "multiple", void 0), r([_()], S.prototype, "value", void 0), r([_({ attribute: !1 })], S.prototype, "values", void 0), r([_({
+})], C.prototype, "multiple", void 0), r([v()], C.prototype, "value", void 0), r([v({ attribute: !1 })], C.prototype, "values", void 0), r([v({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "disabled", void 0), r([_()], S.prototype, "label", void 0), r([y({
+})], C.prototype, "disabled", void 0), r([v()], C.prototype, "label", void 0), r([b({
 	selector: "vf-list-item",
 	flatten: !0
-})], S.prototype, "_items", void 0), S = r([t("vf-list")], S);
+})], C.prototype, "_items", void 0), C = r([t("vf-list")], C);
 //#endregion
-export { S as VfList };
+export { C as VfList };

package/dist/components/vf-menu-bar.d.ts

@@ -18,6 +18,9 @@ declare const VfMenuBar_base: (new (...args: any[]) => import("../position.js").
  * same mechanic.
  *
  * @slot - `vf-menu` elements.
+ * @slot end - The bar's right end: a clock, say. Held 9px in from the end,
+ *   and a `vf-label` there rides the bar's line, so its baseline is the
+ *   menu titles'.
  * @csspart bar - The horizontal layout container.
  * @cssprop [--vf-menubar-height=20px] - `vf-menu-bar`
  */
@@ -52,6 +55,8 @@ export declare class VfMenuBar extends VfMenuBar_base {
      */
     shortcuts: boolean;
     private _menus;
+    /** Whether the `end` slot has assigned content (drives its `.empty` gate). */
+    private _hasEnd;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**