vintage-frames 0.13.0 → 0.14.0

package/dist/components/vf-icon.js

@@ -5,25 +5,26 @@ 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) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), L = 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,
@@ -32,9 +33,9 @@ var j, M = {
 			x: Math.max(e, 0),
 			y: Math.max(t, 0)
 		} : {
-			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, n.width - a(this.offsetWidth, this)),
+			y: I(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 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,
@@ -119,7 +120,7 @@ var j, M = {
 			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);
+				let e = t.find((e) => e instanceof M);
 				if (e?.selected && e.#i === n) return;
 			}
 			this.#X(!1);
@@ -158,7 +159,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 +169,7 @@ var j, M = {
 		};
 	}
 	static {
-		this.styles = [d, E`
+		this.styles = [d, D`
       :host {
         display: inline-block;
         cursor: var(--vf-cursor, default);
@@ -333,8 +334,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 +386,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;
@@ -553,7 +553,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 +565,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 +582,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 ?? {
@@ -634,7 +634,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 +660,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 : "";
@@ -701,7 +701,7 @@ var j, M = {
 	}
 	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}
@@ -713,9 +713,9 @@ var j, M = {
       @dblclick=${this.#Q}
     >
       <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,7 +724,7 @@ 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"
@@ -736,8 +736,8 @@ var j, M = {
                     @keydown=${this.#ae}
                     @blur=${this.commitEditing}
                   />
-                </div>` : O}
-          </div>` : O}
+                </div>` : k}
+          </div>` : k}
     </div>`;
 	}
 	#K() {
@@ -786,10 +786,10 @@ 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);
@@ -799,7 +799,7 @@ var j, M = {
 	#$;
 	#ee(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
@@ -818,27 +818,27 @@ var j, M = {
 	#ae;
 	#oe;
 };
-o([k()], I.prototype, "label", void 0), o([k({ reflect: !0 })], I.prototype, "size", void 0), o([k({
+o([A()], L.prototype, "label", void 0), o([A({ reflect: !0 })], L.prototype, "size", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "selectable", void 0), o([k({
+})], L.prototype, "selectable", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "selected", void 0), o([k({
+})], L.prototype, "selected", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "target", void 0), o([k({
+})], L.prototype, "target", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "color", void 0), o([k({
+})], L.prototype, "color", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "open", void 0), o([k({
+})], L.prototype, "open", void 0), o([A({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "movable", void 0), o([k({
+})], L.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);
+})], L.prototype, "editable", void 0), o([A({ type: Number })], L.prototype, "width", void 0), o([A({ type: Number })], L.prototype, "maxlength", void 0), o([j()], L.prototype, "_editing", void 0), o([j()], L.prototype, "_draft", void 0), o([j()], L.prototype, "_ghost", void 0), L = M = o([t("vf-icon")], L);
 //#endregion
-export { I as VfIcon };
+export { L 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.js

@@ -125,22 +125,23 @@ var T = class extends a(_) {
         @media (forced-colors: active) {
           forced-color-adjust: none;
         }
-        background: var(--vf-highlight, #000);
         color: var(--vf-highlight-text, #fff);
-        /* The hilite leaves the bar's top row white: System 7's plate is rows
-           1..18 of the 20px bar (the Label specimen in Menus.png is 18px of
-           plate, and InfiniteMac shows the white row above it). Transparent
-           borders + padding-box clip inset the paint without moving the box:
-           the top row shows the bar's white through, the bottom row the bar's
-           own black rule, and the hit rect stays the full bar height so a
-           click slammed against the screen top still opens the menu. The
-           18px content box centers the 16px em on the same rows as the
-           closed state, so the title never shifts. Declared only while open
-           because forced-colors mode repaints transparent borders CanvasText
-           on closed labels; here forced-color-adjust above already exempts
-           them. */
-        border-block: calc(var(--vf-scale, 1) * 1px) solid transparent;
-        background-clip: padding-box;
+      }
+      /* The hilite leaves the bar's top row white: System 7's plate is rows
+         1..18 of the 20px bar (the Label specimen in Menus.png is 18px of
+         plate, and InfiniteMac shows the white row above it). So the plate is
+         a layer inset a row top and bottom rather than the label's own
+         background: the top row shows the bar's white through, the bottom row
+         the bar's own black rule, and the hit rect stays the full bar height
+         so a click slammed against the screen top still opens the menu. The
+         title doesn't move. The label is positioned (vf-snap), and the title
+         is too, so the plate paints under it in tree order. */
+      :host([open]) .label::before,
+      .label.flash-on::before {
+        content: '';
+        position: absolute;
+        inset: calc(var(--vf-scale, 1) * 1px) 0;
+        background: var(--vf-highlight, #000);
       }
       /* The title rides in its own box so the focus rule spans the title and
          not the bar cell's 10px padding — the same reason vf-button wraps its
@@ -198,13 +199,14 @@ var T = class extends a(_) {
            from. (The nowrap rows make min-content the widest row, so the
            shrink-to-fit abspos width IS the MDEF width.) */
         min-width: 100%;
-        /* No vertical inset: every panel in Menus.png — both pulldowns, the
-           open popup and the closed pill — puts its first row's ink at +4 from
-           the border box, which is the 1px border plus the row's own 3px ✓
-           bias. The bottom border likewise sits immediately after the last row.
-           A 2px inset here displaced every row by 2px against the art; it was
-           invisible while the rows themselves were 6px too tall. */
-        padding: 0;
+        /* No inset of its own beyond the frame, whose 1px stroke is the
+           panel's padding (vfPanel): every panel in Menus.png — both
+           pulldowns, the open popup and the closed pill — puts its first
+           row's ink at +4 from the border box, which is the 1px frame plus
+           the row's own 3px ✓ bias. The bottom line likewise sits
+           immediately after the last row. A 2px inset here displaced every
+           row by 2px against the art; it was invisible while the rows
+           themselves were 6px too tall. */
         z-index: 1000;
         /* As on the title: the held press, not the browser, owns touch moves
            over the dropped panel. */

package/dist/components/vf-number-field.js

@@ -3,16 +3,17 @@ import { vfElement as t } from "../define.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 { vfField as a } from "../styles/recipes/field.js";
-import { STEPPER as o, STEPPER_DOWN_FILL as s, STEPPER_UP_FILL as c } from "../glyphs.js";
-import { VfTextControlBase as l } from "../text-control.js";
-import { decimalsOf as u } from "../number.js";
-import { css as d, html as f, nothing as p } from "lit";
-import { property as m, query as h, state as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-import { live as v } from "lit/directives/live.js";
+import { vfStrokeInset as a } from "../styles/recipes/stroke.js";
+import { vfField as o } from "../styles/recipes/field.js";
+import { STEPPER as s, STEPPER_DOWN_FILL as c, STEPPER_UP_FILL as l } from "../glyphs.js";
+import { VfTextControlBase as u } from "../text-control.js";
+import { decimalsOf as d } from "../number.js";
+import { 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 { classMap as v } from "lit/directives/class-map.js";
+import { live as y } from "lit/directives/live.js";
 //#region src/components/vf-number-field.ts
-var y = class extends r(l) {
+var b = class extends r(u) {
 	constructor(...t) {
 		super(...t), this.step = 1, this.pressed = null, this.#l = (e) => {
 			if (this.isDisabled || this.readonly) return;
@@ -48,14 +49,14 @@ var y = class extends r(l) {
 			this.value = e.target.value, this.#o("vf-input");
 		}, this.#p = (t) => {
 			let n = t.target.value, r = parseFloat(n);
-			this.value = Number.isNaN(r) ? n : String(Number(this.#r(r).toFixed(u(this.step)))), this.#o("vf-change"), e(this, "change");
+			this.value = Number.isNaN(r) ? n : String(Number(this.#r(r).toFixed(d(this.step)))), this.#o("vf-change"), e(this, "change");
 		};
 	}
 	static {
 		this.styles = [
 			i,
-			a,
-			d`
+			o,
+			f`
       :host {
         display: inline-flex;
         /* NOT stretch: that sized the well to the stepper's 25px, making this
@@ -82,7 +83,7 @@ var y = class extends r(l) {
            (1 above / 2 below) — optically centered, still on the device grid. */
         margin-top: calc(var(--vf-scale, 1) * 1px);
       }
-      input {
+      input.vf-field {
         flex: 1 1 auto;
         width: var(--vf-number-field-width, 4em);
         min-width: 2em;
@@ -94,7 +95,8 @@ var y = class extends r(l) {
            fills it, and a user stylesheet raising line-height grows the well
            instead of clipping the digits. */
         min-height: calc(var(--vf-scale, 1) * var(--vf-control-height, 22px));
-        padding: 0 calc(var(--vf-scale, 1) * 6px);
+        /* The 6px text inset, inside the well's stroke (vfField). */
+        padding: ${a(0)} ${a(6)};
         text-align: right;
       }
 
@@ -152,7 +154,7 @@ var y = class extends r(l) {
 		return this.min != null && e < this.min ? this.min : this.max != null && e > this.max ? this.max : e;
 	}
 	#i(t) {
-		let n = String(Number(this.#r(t).toFixed(u(this.step))));
+		let n = String(Number(this.#r(t).toFixed(d(this.step))));
 		n !== this.value && (this.value = n, this.#o("vf-change"), e(this, "input"), e(this, "change"));
 	}
 	#a(e) {
@@ -181,7 +183,7 @@ var y = class extends r(l) {
 	#p;
 	render() {
 		let e = this.isDisabled, t = this.#n();
-		return f`
+		return p`
       <div class=${this.wellClass}>
         <input
           part="input"
@@ -194,14 +196,14 @@ var y = class extends r(l) {
           maxlength=${this.forwardedAttr("maxlength")}
           spellcheck=${this.forwardedAttr("spellcheck")}
           autocapitalize=${this.forwardedAttr("autocapitalize")}
-          aria-label=${this.label || this.hostLabel || p}
+          aria-label=${this.label || this.hostLabel || m}
           aria-describedby=${this.describedBy}
-          aria-required=${this.required ? "true" : p}
-          aria-invalid=${this.validity.valid ? p : "true"}
-          aria-valuenow=${Number.isNaN(t) ? p : t}
-          aria-valuemin=${this.min ?? p}
-          aria-valuemax=${this.max ?? p}
-          .value=${v(this.value)}
+          aria-required=${this.required ? "true" : m}
+          aria-invalid=${this.validity.valid ? m : "true"}
+          aria-valuenow=${Number.isNaN(t) ? m : t}
+          aria-valuemin=${this.min ?? m}
+          aria-valuemax=${this.max ?? m}
+          .value=${y(this.value)}
           placeholder=${this.placeholder}
           ?disabled=${e}
           ?readonly=${this.readonly}
@@ -212,15 +214,15 @@ var y = class extends r(l) {
       </div>
       <span class="stepper vf-snap" part="stepper">
         <svg viewBox="0 0 15 25" shape-rendering="crispEdges" fill="currentColor" aria-hidden="true">
-          <path d=${o.d}></path>
-          <path class=${_({
+          <path d=${s.d}></path>
+          <path class=${v({
 			fill: !0,
 			on: this.pressed === "up"
-		})} d=${c.d}></path>
-          <path class=${_({
+		})} d=${l.d}></path>
+          <path class=${v({
 			fill: !0,
 			on: this.pressed === "down"
-		})} d=${s.d}></path>
+		})} d=${c.d}></path>
         </svg>
         <span
           class="hit up"
@@ -243,6 +245,6 @@ var y = class extends r(l) {
     `;
 	}
 };
-n([m({ type: Number })], y.prototype, "min", void 0), n([m({ type: Number })], y.prototype, "max", void 0), n([m({ type: Number })], y.prototype, "step", void 0), n([g()], y.prototype, "pressed", void 0), n([h("input")], y.prototype, "input", void 0), y = n([t("vf-number-field")], y);
+n([h({ type: Number })], b.prototype, "min", void 0), n([h({ type: Number })], b.prototype, "max", void 0), n([h({ type: Number })], b.prototype, "step", void 0), n([_()], b.prototype, "pressed", void 0), n([g("input")], b.prototype, "input", void 0), b = n([t("vf-number-field")], b);
 //#endregion
-export { y as VfNumberField };
+export { b as VfNumberField };