vintage-frames 0.13.0 → 0.14.1

package/dist/shell/windows.js

@@ -0,0 +1,343 @@
+import { snapSys as e, systemPxQuantum as t } from "../scale.js";
+import { VfWindow as n } from "../components/vf-window.js";
+import "../index.js";
+import { cascadeFrom as r, cascadedBox as i, frameOf as a, nearBox as o, pinOf as s, pinTo as c, windowOrigin as l } from "./geometry.js";
+//#region src/shell/windows.ts
+var u = (e, t) => e.set(t, (e.get(t) ?? 0) + 1), d = (e, t) => {
+	let n = e.get(t) ?? 1;
+	n > 1 ? e.set(t, n - 1) : e.delete(t);
+}, f = (e, t, n) => Math.min(Math.max(e, t), n), p = (e) => ({
+	left: e.left ?? 0,
+	top: e.top ?? 0,
+	width: e.width ?? 0,
+	height: e.height ?? 0
+});
+function m() {
+	let e = document.activeElement;
+	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
+	return e;
+}
+var h = (e) => {
+	let t = document.activeElement;
+	return !!t && (t === e || e.contains(t));
+};
+async function g(e, { when: t } = {}) {
+	let n = [...e.querySelectorAll("*")];
+	if (await Promise.all([e, ...n].map((e) => e.updateComplete)), !e.isConnected || t && !t()) return !1;
+	for (let t of n) if (!(t.closest("[hidden]") || !t.checkVisibility()) && !(t.tabIndex < 0 && !t.localName.startsWith("vf-")) && (t.focus({ preventScroll: !0 }), h(e))) return !0;
+	return !1;
+}
+function _(m, _) {
+	let { defaultApp: v, savedPin: ee = () => null } = _, y = [], b = (e, t, n) => {
+		e.addEventListener(t, n), y.push(() => e.removeEventListener(t, n));
+	}, x = () => ({
+		width: m.width,
+		height: m.height
+	}), S = () => m.windowArea, C = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Map(), D = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new WeakMap(), k = {}, A = () => a(S().top, k), j = /* @__PURE__ */ new Set(), M = !1, N = () => {
+		if (!M) for (let e of [...j]) e();
+	}, P = /* @__PURE__ */ new Set(), F = () => {
+		for (let e of [...P]) e();
+	}, I = /* @__PURE__ */ new Set(), L = /* @__PURE__ */ new Set(), R = /* @__PURE__ */ new Set(), z = () => null, B = () => !1;
+	function V(n, r) {
+		let i = S(), a = t(n), o = (e) => Math.floor(e / a) * a, s = Math.ceil(i.top / a) * a, c = i.left + i.width, l = i.top + i.height, { width: u, height: d } = r;
+		n.resizable && (u != null && Number.isFinite(u) && (u = Math.min(u, o(i.width))), d != null && Number.isFinite(d) && (d = Math.min(d, o(Math.max(0, l - s)))));
+		let p = u ?? n.width ?? 0, m = d ?? n.height ?? 0;
+		return {
+			left: f(e(r.left ?? i.left, n), i.left, Math.max(i.left, o(c - p))),
+			top: f(e(r.top ?? s, n), s, Math.max(s, o(l - m))),
+			width: u,
+			height: d
+		};
+	}
+	let H = (t, n) => {
+		t.left = e(n.left, t), t.top = e(n.top, t), n.width != null && Number.isFinite(n.width) && (t.width = n.width), n.height != null && Number.isFinite(n.height) && (t.height = n.height), O.delete(t);
+	}, U = (e) => {
+		let t = C.get(e)?.place;
+		return t ? V(e, t(S())) : null;
+	}, W = (e, t) => {
+		let n = C.get(e)?.policy;
+		if (n) return n(t);
+		if (!e.resizable) return { size: {
+			width: t.width,
+			height: t.height
+		} };
+		let { minWidth: r, minHeight: i } = e.sizeLimits;
+		return { min: {
+			width: r,
+			height: i
+		} };
+	}, G = (e, t, n = W(e, p(e))) => V(e, c(t, x(), A(), n)), te = (e, t) => {
+		let n = p(e);
+		return [
+			"left",
+			"top",
+			"width",
+			"height"
+		].every((e) => {
+			let r = t[e];
+			return r == null || !Number.isFinite(r) || n[e] === r;
+		});
+	}, ne = (e) => {
+		let t = [...C].filter(([t, n]) => t !== e && !t.hidden && !n.palette).map(([e]) => p(e));
+		return r(l(S()), t).slot;
+	}, K = v, q = (e) => e instanceof n && C.get(e)?.app || v;
+	function J() {
+		let e = !1;
+		for (let [t, n] of C) {
+			if (!n.palette) continue;
+			let r = n.app === K && n.palette();
+			t.hidden !== !r && (t.hidden = !r, r && m.bringToFront(t), e = !0);
+		}
+		e && N();
+	}
+	let re = (e) => {
+		let t = document.activeElement?.closest("vf-window");
+		!(t instanceof n) || t === e || !C.has(t) || C.get(t).palette || (e ? Y(e) : B(null, null));
+	}, Y = (e) => void g(e, { when: () => m.activeWindow === e }), X = (e) => {
+		re(e);
+		for (let t of [...L]) t(e);
+		let t = q(e);
+		if (t !== K) {
+			K = t, J();
+			for (let e of [...R]) e(K);
+		}
+	};
+	b(m, "vf-activate", (e) => X(e.detail.window)), b(m, "vf-close", (e) => {
+		let t = e.target;
+		t instanceof n && C.has(t) && $.requestClose(t);
+	});
+	let Z = 0, Q = (e) => {
+		!(e.target instanceof n) || !C.has(e.target) || Z || (Z = window.setTimeout(() => {
+			Z = 0, N();
+		}, 0));
+	};
+	m.addEventListener("vf-placement-change", Q), y.push(() => m.removeEventListener("vf-placement-change", Q)), b(m, "vf-resize", (e) => {
+		e.detail?.commit && N();
+	});
+	let ie = (e) => {
+		let t = C.get(e);
+		t && (C.delete(e), O.delete(e), t.palette || F(), N());
+	}, ae = (n, r, i, a) => {
+		let l = p(n), u = C.get(n);
+		if (u?.keep && o(l, u.keep(a))) {
+			H(n, V(n, u.keep(S())));
+			return;
+		}
+		let d = O.get(n), f = !!d && n.resizable && (d.width !== l.width || d.height !== l.height), m = !d || d.left !== l.left || d.top !== l.top || f || !d ? s(l, r, A()) : d.pin, h = c(m, i, A(), W(n, l));
+		if (n.left = e(h.left, n), n.top = e(h.top, n), n.resizable) {
+			let r = t(n), i = S(), a = Math.ceil(i.top / r) * r, o = Math.floor(i.width / r) * r, s = Math.floor(Math.max(0, i.top + i.height - a) / r) * r;
+			n.width = Math.min(e(h.width, n), o), n.height = Math.min(e(h.height, n), s);
+		}
+		O.set(n, {
+			pin: m,
+			...p(n)
+		});
+	}, $ = {
+		get area() {
+			return S();
+		},
+		get front() {
+			return K;
+		},
+		adopt(e, t) {
+			let n = t.palette;
+			if (C.set(e, {
+				app: t.app,
+				item: t.item ?? null,
+				place: t.place ?? null,
+				policy: t.policy ?? null,
+				keep: t.keep ?? null,
+				palette: n ? n === !0 ? () => !0 : n : null,
+				close: t.close ?? null
+			}), t.pin) H(e, G(e, t.pin));
+			else {
+				let t = U(e);
+				t && H(e, t);
+			}
+			if (n) {
+				let t = C.get(e);
+				e.hidden = !(t.app === K && t.palette());
+			}
+			m.activeWindow === e && X(e), n || F(), N();
+		},
+		open(e) {
+			let t = e.item == null ? null : $.windowFor(e.item);
+			if (t) return m.bringToFront(t), Y(t), t;
+			let n = e.create(), r = {
+				width: n.width ?? 0,
+				height: n.height ?? 0
+			}, a = ne();
+			m.append(n);
+			let o = e.item ?? null;
+			return $.adopt(n, {
+				app: e.app,
+				item: o,
+				place: e.place ?? ((e) => i(e, r, l(e), a)),
+				pin: o == null ? null : T.get(o)?.pin ?? ee(o),
+				policy: e.policy ?? null,
+				keep: e.keep ?? null,
+				close: e.close ?? null
+			}), o != null && T.delete(o), m.bringToFront(n), e.from && n.show({ from: e.from }), Y(n), n;
+		},
+		close(e, { to: t } = {}) {
+			let n = C.get(e), r = n?.item ?? null, i = n?.app ?? null, a = t === void 0 ? i == null ? null : z(r, i) : t, o = m.activeWindow === e || h(e);
+			r != null && i != null && T.set(r, {
+				app: i,
+				pin: s(p(e), x(), A())
+			});
+			let c = e.hide({ to: a });
+			r != null && u(E, r), i != null && !n?.palette && u(D, i);
+			let l = () => {
+				r != null && d(E, r), i != null && !n?.palette && d(D, i), F();
+			};
+			return c.then(l, l), ie(e), e.remove(), o && queueMicrotask(() => {
+				let e = m.activeWindow;
+				e ? Y(e) : B(r, i) || B(null, null);
+			}), c;
+		},
+		requestClose(e) {
+			let t = C.get(e)?.close;
+			t ? t(e) : $.close(e);
+		},
+		windowFor(e) {
+			for (let [t, n] of C) if (n.item === e) return t;
+			return null;
+		},
+		windowsOf(e) {
+			return m.stackingOrder.filter((t) => t instanceof n && C.get(t)?.app === e);
+		},
+		itemOf(e) {
+			return e instanceof n ? C.get(e)?.item ?? null : null;
+		},
+		appOf(e) {
+			return e instanceof n ? C.get(e)?.app ?? null : null;
+		},
+		isPalette(e) {
+			return e instanceof n && !!C.get(e)?.palette;
+		},
+		setItem(e, t) {
+			let n = C.get(e);
+			!n || n.item === t || (n.item = t, F());
+		},
+		isOpen(e) {
+			return E.has(e) || $.windowFor(e) !== null;
+		},
+		hasWindows(e) {
+			if (D.has(e)) return !0;
+			for (let [, t] of C) if (t.app === e && !t.palette) return !0;
+			return !1;
+		},
+		palettesChanged() {
+			J();
+		},
+		write(e, t) {
+			H(e, t), N();
+		},
+		clamped(e, t) {
+			return V(e, t);
+		},
+		placed(e) {
+			return U(e);
+		},
+		pinOf(e) {
+			return s(p(e), x(), A());
+		},
+		fromPin(e, t, n) {
+			return G(e, t, n);
+		},
+		setFrameBands(e) {
+			k = { ...e }, O = /* @__PURE__ */ new WeakMap();
+		},
+		arrangeWith(e, t) {
+			return w.set(e, t), N(), () => {
+				w.get(e) === t && w.delete(e), N();
+			};
+		},
+		arrange() {
+			M = !0;
+			try {
+				for (let e of w.values()) e.arrange();
+				for (let e of C.keys()) {
+					let t = U(e);
+					t && H(e, t);
+				}
+			} finally {
+				M = !1;
+			}
+			N();
+		},
+		arranged() {
+			for (let e of w.values()) if (!e.arranged()) return !1;
+			for (let e of C.keys()) {
+				let t = U(e);
+				if (t && !e.hidden && !te(e, t)) return !1;
+			}
+			return !0;
+		},
+		resized(e) {
+			let t = x();
+			if (e.width === t.width && e.height === t.height) return;
+			let n = S(), r = {
+				left: n.left,
+				top: n.top,
+				width: e.width - n.left,
+				height: Math.max(0, e.height - n.top)
+			};
+			for (let n of C.keys()) ae(n, e, t, r);
+			for (let n of [...I]) n(e, t);
+			N();
+		},
+		snapshot() {
+			let e = {};
+			for (let [t, n] of T) e[t] = { ...n };
+			let t = m.stackingOrder;
+			for (let [n, r] of C) {
+				if (r.item == null) continue;
+				let i = s(p(n), x(), A());
+				e[r.item] = r.palette ? {
+					app: r.app,
+					pin: i
+				} : {
+					app: r.app,
+					pin: i,
+					z: t.indexOf(n)
+				};
+			}
+			return e;
+		},
+		rememberedPin(e) {
+			return T.get(e)?.pin ?? null;
+		},
+		layoutChanged() {
+			N();
+		},
+		setHome(e, t) {
+			return z = e, B = t, () => {
+				z = () => null, B = () => !1;
+			};
+		},
+		onLayout(e) {
+			return j.add(e), () => void j.delete(e);
+		},
+		onWindows(e) {
+			return P.add(e), () => void P.delete(e);
+		},
+		onRaster(e) {
+			return I.add(e), () => void I.delete(e);
+		},
+		beforeFront(e) {
+			return L.add(e), () => void L.delete(e);
+		},
+		onFront(e) {
+			return R.add(e), () => void R.delete(e);
+		},
+		dispose() {
+			clearTimeout(Z);
+			for (let e of y) e();
+			j.clear(), P.clear(), I.clear(), L.clear(), R.clear(), w.clear(), C.clear();
+		}
+	};
+	return K = q(m.activeWindow), $;
+}
+//#endregion
+export { _ as createWindowManager, m as deepActiveElement, g as focusInto };

package/dist/styles/base.d.ts

@@ -27,7 +27,9 @@ export { vfDisplay, vfDisplayDecls } from './recipes/display-face.js';
 export { vfBase } from './recipes/host.js';
 export { vfStaticText } from './recipes/static-text.js';
 export { vfDots, vfStripes } from './recipes/pattern.js';
-export { vfHardShadowDecls } from './recipes/shadow.js';
+export { vfHardShadow, vfHardShadowDecls } from './recipes/shadow.js';
+export { vfStrokeDecls, vfStrokeInset, vfStrokeShadow } from './recipes/stroke.js';
+export type { VfStrokeOptions } from './recipes/stroke.js';
 export { vfChromeFrame, vfModalFrame, vfPanel } from './recipes/surface.js';
 export { RULE_EDGES, parseRule, ruleClasses, vfRule } from './recipes/rule.js';
 export type { RuleEdge } from './recipes/rule.js';

package/dist/styles/recipes/field.d.ts

@@ -1,13 +1,17 @@
 /**
  * The System 7 editable-field skin (SPEC §1/§5): a white well with a 1px black
- * border, no corner radius, Chicago-style display type, and the kit's dashed
+ * frame, no corner radius, Chicago-style display type, and the kit's dashed
  * keyboard-focus rule under the well (no dotted ring). Add the `vf-field`
  * class to the inner native `<input>`/`<textarea>` and wrap it in a
- * `.vf-field-well` element; the host supplies layout (width, height, padding)
- * around it, and `VfTextControlBase` supplies the `.vf-focus-rule` class that
- * turns the rule on. Shared by vf-text-field, vf-text-area and
- * vf-number-field so the well, focus and disabled treatment stay identical
- * across all three.
+ * `.vf-field-well` element; the host supplies layout (width, height) around
+ * it, and `VfTextControlBase` supplies the `.vf-focus-rule` class that turns
+ * the rule on. Shared by vf-text-field, vf-text-area and vf-number-field so
+ * the well, focus and disabled treatment stay identical across all three.
+ *
+ * The frame is a stroke ({@link vfStrokeDecls}), so the recipe owns the
+ * input's padding and box-shadow: a host that insets the text restates the
+ * padding with `vfStrokeInset` (`padding: ${vfStrokeInset(0)}
+ * ${vfStrokeInset(6)}`) in a rule that outranks `.vf-field`.
  *
  * Why the wrapper: the rule is a pseudo-element, and a replaced element
  * generates none — neither `<input>` nor `<textarea>` can draw its own

package/dist/styles/recipes/field.js

@@ -1,11 +1,12 @@
 import { vfDisplayDecls as e } from "./display-face.js";
-import { vfFocusUnderline as t } from "./focus.js";
-import { css as n } from "lit";
+import { vfStrokeDecls as t } from "./stroke.js";
+import { vfFocusUnderline as n } from "./focus.js";
+import { css as r } from "lit";
 //#region src/styles/recipes/field.ts
-var r = n`
+var i = r`
   .vf-field {
     background: var(--vf-white, #fff);
-    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${t()}
     border-radius: 0;
     /* Editable text is set in the Chicago-style display face. */
     ${e}
@@ -36,7 +37,7 @@ var r = n`
      VfTextControlBase adds .vf-focus-rule for a keyboard focus only. */
   .vf-field-well.vf-focus-rule::after {
     --vf-focus-underline-offset: -2px;
-    ${t}
+    ${n}
   }
   /* Its own token, deliberately not --vf-disabled: the disabled rule below is
      an inactive control and exempt from contrast requirements, but a
@@ -50,7 +51,7 @@ var r = n`
     font-weight: inherit;
     opacity: 1;
   }
-  /* Disabled: the text dims to gray; the solid black box border stays. The
+  /* Disabled: the text dims to gray; the solid black frame stays. The
      cursor returns to the arrow — a well that can't take input isn't text. */
   .vf-field:disabled {
     color: var(--vf-disabled, #c0c0c0);
@@ -65,4 +66,4 @@ var r = n`
   }
 `;
 //#endregion
-export { r as vfField };
+export { i as vfField };

package/dist/styles/recipes/focus.d.ts

@@ -64,13 +64,17 @@ export declare const vfFocus: import("lit").CSSResult;
  *   the box continues 6px past it (2px half-leading from vfBase's 1.25 line box
  *   over the 16px em, plus the face's 4px descent): 6 − 2 = 4.
  * - `-2px` is a well whose ink runs to its own bottom edge — the radio's circle,
- *   a field's wrapper — putting the rule in the second row below it.
- * - `-3px` adds a 1px border the pseudo-element sits inside of (vf-checkbox).
+ *   a field's wrapper, a box framed by a stroke (vf-checkbox), whose line is
+ *   inside the padding box — putting the rule in the second row below it.
  * - past that, the rule also clears a hard shadow, which is ink no box the
- *   pseudo-element can size to contains: `-4px` for vf-select's 1px one, and
+ *   pseudo-element can size to contains: `-3px` for vf-select's 1px one, and
  *   for vf-swatch an offset that composes `--vf-shadow-offset` rather than
  *   hard-coding a depth its consumer can retheme.
  *
+ * Under forced colors a stroke is a border again and the padding box sits
+ * inside it, so a stroked carrier states its offset and sides with
+ * `vfStrokeInset`, which adds the stroke back there.
+ *
  * Drawn in `currentColor`, so it inverts with the label on a pressed face.
  */
 export declare const vfFocusUnderline: import("lit").CSSResult;

package/dist/styles/recipes/rule.d.ts

@@ -9,15 +9,18 @@ export type RuleEdge = (typeof RULE_EDGES)[number];
  * floor is `.vf-rule-bottom`, a window's status strip's ceiling is
  * `.vf-rule-top`, and `vf-container rule="…"` takes the edges by name.
  *
- * A border, not a pseudo-element or a painted line, so it lives inside the
- * box's own `border-box` size (vfBase) and insets the padding box the way
- * FrameRect insets a rectangle's interior: content, percentage fills and
- * children placed against the box all begin inside the rule. Scales with
- * `--vf-scale`, so it is one system px at every density, and paints in
- * `--vf-black`, so it remaps under forced colors with the rest of the ink.
+ * A stroke (see {@link vfStrokeDecls}), inside the box's own `border-box`
+ * size (vfBase): the rule's row is padding and an inset shadow paints it
+ * black, so it is one system px at every density and zoom, and in-flow
+ * content begins inside it. Children placed against the box, and percentage
+ * fills, measure from the box's outer edge; a component whose contract puts
+ * them inside the rule gives them an inner box to lay out in (vf-container
+ * uses its slot). Paints in `--vf-black`, and under forced colors turns back
+ * into a border, so it remaps with the rest of the ink.
  *
- * One declaration per edge, so the kit cannot grow two rules — the
- * {@link vfHardShadowDecls} principle, applied to the line.
+ * The classes compose on one element: each edge's shadow goes through its
+ * own private property and one rule paints all four, so the classes own the
+ * element's `box-shadow`, and its padding on their edges.
  *
  * `npm run verify:rule` asserts a container's rule against the menu bar's.
  */

package/dist/styles/recipes/rule.js

@@ -1,32 +1,50 @@
-import { css as e, unsafeCSS as t } from "lit";
+import { STROKE_FORCED_COLORS as e, strokeBorder as t, strokeEdgeShadow as n, strokePadding as r } from "./stroke.js";
+import { css as i, unsafeCSS as a } from "lit";
 //#region src/styles/recipes/rule.ts
-var n = [
+var o = [
 	"top",
 	"right",
 	"bottom",
 	"left"
-], r = t("calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000)"), i = e`
+], s = (e) => a(`
+    --_vf-rule-${e}: ${n(e, 1)};
+    padding-${e}: ${r(0, 1)};
+    border-${e}: ${t(1)};
+  `), c = i`
+  .vf-rule-top,
+  .vf-rule-right,
+  .vf-rule-bottom,
+  .vf-rule-left {
+    --_vf-stroke-ink: var(--vf-black, #000);
+    --_vf-rule-top: 0 0 transparent;
+    --_vf-rule-right: 0 0 transparent;
+    --_vf-rule-bottom: 0 0 transparent;
+    --_vf-rule-left: 0 0 transparent;
+    box-shadow: var(--_vf-rule-top), var(--_vf-rule-right), var(--_vf-rule-bottom),
+      var(--_vf-rule-left);
+    ${a(e)}
+  }
   .vf-rule-top {
-    border-top: ${r};
+    ${s("top")}
   }
   .vf-rule-right {
-    border-right: ${r};
+    ${s("right")}
   }
   .vf-rule-bottom {
-    border-bottom: ${r};
+    ${s("bottom")}
   }
   .vf-rule-left {
-    border-left: ${r};
+    ${s("left")}
   }
 `;
-function a(e) {
+function l(e) {
 	if (e == null) return [];
-	let t = e.trim().split(/\s+/).filter(Boolean), r = new Set(t);
-	for (let e of r) if (!n.includes(e)) return null;
-	return n.filter((e) => r.has(e));
+	let t = e.trim().split(/\s+/).filter(Boolean), n = new Set(t);
+	for (let e of n) if (!o.includes(e)) return null;
+	return o.filter((e) => n.has(e));
 }
-function o(e) {
+function u(e) {
 	return e.map((e) => `vf-rule-${e}`).join(" ");
 }
 //#endregion
-export { n as RULE_EDGES, a as parseRule, o as ruleClasses, i as vfRule };
+export { o as RULE_EDGES, l as parseRule, u as ruleClasses, c as vfRule };

package/dist/styles/recipes/scroll-rail.d.ts

@@ -28,16 +28,17 @@ export declare const TROUGH: import("../../patterns.js").PatternMotif;
  *
  * Geometry (system px) — the classic 16px cell, of which the outermost line
  * is the component's own 1px frame: the rail element is the 15 inside it —
- * a 1px divider on the content side (the rail's own border) plus the 14px
+ * a 1px divider on the content side (the rail's own stroke) plus the 14px
  * channel. Arrow cells are 15 long (14 interior + the 1px divider facing the
  * track); their glyphs are the 16-unit sprites windowed to the 14×14
  * interior (`viewBox="1 1 14 14"`), since the sprite's outer ring is exactly
- * the frame/divider lines the borders draw. The thumb is a fixed 16px white
- * box spanning the channel, its border reading as inset 1px from each
+ * the frame/divider lines the strokes draw. The thumb is a fixed 16px white
+ * box spanning the channel, its stroke reading as inset 1px from each
  * channel rail over its extent. The component supplies the outer frame as a
- * real border and lays the rail out as a sibling of the scroller — AFTER it,
- * so the state selectors below can reach the rail from the scroller's
- * attributes.
+ * stroke of its own and lays the rail out as a sibling of the scroller —
+ * AFTER it, so the state selectors below can reach the rail from the
+ * scroller's attributes. Every line here is a stroke (vfStrokeDecls):
+ * padding holds it and an inset shadow paints it.
  *
  * States, keyed off the attributes `ScrollStateController` writes on the
  * scroller (now styling real elements, so there is no scrollbar-pseudo

package/dist/styles/recipes/scroll-rail.js

@@ -1,9 +1,10 @@
 import { tileImage as e, tileRects as t, vfTileMaskSize as n } from "./tile.js";
 import { vfRepeatTileSize as r } from "../../tile-grid.js";
 import { PATTERNS as i, patternMotif as a } from "../../patterns.js";
-import { css as o, unsafeCSS as s } from "lit";
+import { vfStrokeDecls as o } from "./stroke.js";
+import { css as s, unsafeCSS as c } from "lit";
 //#region src/styles/recipes/scroll-rail.ts
-var c = a(i["gray-25"]), l = e(c.width, c.height, t(c.rects)), u = o`
+var l = a(i["gray-25"]), u = e(l.width, l.height, t(l.rects)), d = s`
   /* Hide the native bar, keep the native scrolling. Both lines ship:
      scrollbar-width reaches Chromium 121+/Firefox/Safari 18.2+, the pseudo
      covers older WebKit — the last scrollbar pseudo left in the kit.
@@ -37,7 +38,7 @@ var c = a(i["gray-25"]), l = e(c.width, c.height, t(c.rects)), u = o`
       calc(var(--vf-scale, 1) * 15px)
       1fr
       calc(var(--vf-scale, 1) * 15px);
-    border-left: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${o({ edges: ["left"] })}
   }
   .vf-rail--horizontal {
     height: calc(var(--vf-scale, 1) * 15px);
@@ -45,7 +46,7 @@ var c = a(i["gray-25"]), l = e(c.width, c.height, t(c.rects)), u = o`
       calc(var(--vf-scale, 1) * 15px)
       1fr
       calc(var(--vf-scale, 1) * 15px);
-    border-top: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${o({ edges: ["top"] })}
   }
   /* Explicit placement, so hiding the arrows (inactive-window/degenerate
      states) never reflows the track into an arrow cell — its box holds still
@@ -70,11 +71,11 @@ var c = a(i["gray-25"]), l = e(c.width, c.height, t(c.rects)), u = o`
   }
 
   /* Arrow cells: white boxes carrying only the 1px divider that faces the
-     track — the frame edges are the component's border, the content edge the
-     rail's own divider — so no line ever doubles to 2px. Each cell's padding
+     track — the frame edges are the component's stroke, the content edge the
+     rail's own divider — so no line ever doubles to 2px. Each cell's content
      box is by construction the sprite's 14×14 interior, wherever the cell
      sits (flush to the frame, or against the corner cell), so the glyph
-     lands at the padding origin with no per-variant offsets. */
+     lands at the content origin with no per-variant offsets. */
   .vf-rail-button {
     display: grid;
     place-items: start;
@@ -82,16 +83,16 @@ var c = a(i["gray-25"]), l = e(c.width, c.height, t(c.rects)), u = o`
     overflow: hidden;
   }
   .vf-rail--vertical .vf-rail-button--decrement {
-    border-bottom: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${o({ edges: ["bottom"] })}
   }
   .vf-rail--vertical .vf-rail-button--increment {
-    border-top: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${o({ edges: ["top"] })}
   }
   .vf-rail--horizontal .vf-rail-button--decrement {
-    border-right: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${o({ edges: ["right"] })}
   }
   .vf-rail--horizontal .vf-rail-button--increment {
-    border-left: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${o({ edges: ["left"] })}
   }
   .vf-rail-arrow {
     display: block;
@@ -130,7 +131,7 @@ var c = a(i["gray-25"]), l = e(c.width, c.height, t(c.rects)), u = o`
     pointer-events: none;
   }
   /* The fixed System 7 thumb (never proportional): a white 16px box spanning
-     the channel. Its border reads as inset 1px from each channel rail — the
+     the channel. Its stroke reads as inset 1px from each channel rail — the
      divider and the frame — over its extent; the controller writes its
      travel as a whole-system-px translate. */
   .vf-rail-thumb {
@@ -138,7 +139,7 @@ var c = a(i["gray-25"]), l = e(c.width, c.height, t(c.rects)), u = o`
     top: 0;
     left: 0;
     background: var(--vf-scrollbar-thumb, #ffffff);
-    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${o()}
   }
   .vf-rail--vertical .vf-rail-thumb {
     width: 100%;
@@ -161,8 +162,7 @@ var c = a(i["gray-25"]), l = e(c.width, c.height, t(c.rects)), u = o`
     width: calc(var(--vf-scale, 1) * 15px);
     height: calc(var(--vf-scale, 1) * 15px);
     background: var(--vf-white, #fff);
-    border-top: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
-    border-left: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${o({ edges: ["top", "left"] })}
   }
 
   /* ── Always-a-rail (driven by ScrollStateController) ─────────────────────
@@ -208,10 +208,10 @@ var c = a(i["gray-25"]), l = e(c.width, c.height, t(c.rects)), u = o`
     .vf-rail-trough {
       background-image: none;
       background-color: var(--vf-black, #000);
-      mask-image: ${s(l)};
-      ${n(c.width, c.height)}
+      mask-image: ${c(u)};
+      ${n(l.width, l.height)}
     }
   }
 `;
 //#endregion
-export { c as TROUGH, u as vfScrollRail };
+export { l as TROUGH, d as vfScrollRail };