vintage-frames 0.12.8 → 0.14.0

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

@@ -1,6 +1,13 @@
-export declare const TROUGH_MOTIF_X: number;
-export declare const TROUGH_MOTIF_Y: number;
-export declare const TROUGH_RECTS: readonly import("./tile.js").TileRect[];
+/**
+ * The trough's 25% lattice is the library's `gray-25` — QuickDraw's
+ * `ltGray`, and the UI kit's "Scroll bg" sprite — on its minimal cell: a
+ * 4×2-system-px motif with a dot at (0,0) and (2,1). The DOM trough repeats
+ * it as a tile drawn at the display's resolution (`--_vf-trough-tile`,
+ * written by `ScrollRailController` — 1-bit at every scale, zoom-minted ones
+ * included); the SVG span tile below is the forced-colors mask, which
+ * repaints the same art in the remapped ink token.
+ */
+export declare const TROUGH: import("../../patterns.js").PatternMotif;
 /**
  * System 7 scroll rails, drawn by the kit as ordinary shadow DOM — the skin
  * for the subtree `renderScrollRail()` (src/scroll-rail.ts) produces. The
@@ -17,20 +24,21 @@ export declare const TROUGH_RECTS: readonly import("./tile.js").TileRect[];
  * is kit art: subpixel layout device-snaps at paint like every other element,
  * and the whole defect class is unrepresentable. It also renders identically
  * in every engine (Firefox included), is assertable headless, and lets the
- * trough adopt the exact tile raster the other dithers use.
+ * trough adopt the repeating tile the other dithers use.
  *
  * 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
@@ -52,9 +60,9 @@ export declare const TROUGH_RECTS: readonly import("./tile.js").TileRect[];
  * through the vfBase token remap like every other element. The arrows are
  * inline `currentColor` SVG now, so they re-ink with the palette (the old
  * `::-webkit-scrollbar` skin's one genuine residual — mask-image is ignored
- * on scrollbar pseudos — dies here). The trough raster keeps literal ink, so
- * it is hidden and the trough repaints as the ink token masked by the same
- * art (the vfDots idiom; the span mask keeps the zoom caveat every masked
+ * on scrollbar pseudos — dies here). The trough's tile keeps literal ink, so
+ * it goes and the trough repaints as the ink token masked by the same art
+ * (the vfDots idiom; the span mask keeps the zoom caveat every masked
  * surface has, an accepted residual).
  */
 export declare const vfScrollRail: import("lit").CSSResult;

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

@@ -1,8 +1,10 @@
 import { tileImage as e, tileRects as t, vfTileMaskSize as n } from "./tile.js";
-import { PATTERNS as r, patternMotif as i } from "../../patterns.js";
-import { css as a, unsafeCSS as o } from "lit";
+import { vfRepeatTileSize as r } from "../../tile-grid.js";
+import { PATTERNS as i, patternMotif as a } from "../../patterns.js";
+import { vfStrokeDecls as o } from "./stroke.js";
+import { css as s, unsafeCSS as c } from "lit";
 //#region src/styles/recipes/scroll-rail.ts
-var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u)), f = a`
+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.
@@ -36,7 +38,7 @@ var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u
       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);
@@ -44,7 +46,7 @@ var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u
       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
@@ -69,11 +71,11 @@ var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u
   }
 
   /* 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;
@@ -81,16 +83,16 @@ var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u
     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;
@@ -117,28 +119,19 @@ var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u
     min-width: 0;
     min-height: 0;
   }
-  /* The trough: the token base color under the dither, clipping the raster's
-     overdraw (the art is ceiled up to whole motifs of the measured track). */
+  /* The trough: the dither over the token base color — the repeating tile
+     ScrollRailController writes (src/tile-grid.ts), 1-bit at every scale. */
   .vf-rail-trough {
     position: absolute;
     inset: 0;
-    overflow: hidden;
     background-color: var(--vf-scrollbar-track, var(--vf-white, #fff));
-    pointer-events: none;
-  }
-  /* The dither raster ScrollRailController sizes and writes — one image px
-     per system px, magnified nearest-neighbor (the vf-img idiom), so the
-     lattice is 1-bit at every scale. */
-  .vf-rail-trough-art {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
+    background-image: var(--_vf-trough-tile, none);
+    ${r}
     image-rendering: pixelated;
+    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 {
@@ -146,7 +139,7 @@ var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u
     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%;
@@ -169,8 +162,7 @@ var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u
     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) ─────────────────────
@@ -207,21 +199,19 @@ var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u
     display: none;
   }
 
-  /* Forced colors: the raster keeps literal ink, so it hides and the trough
+  /* Forced colors: the tile keeps literal ink, so it goes and the trough
      repaints as the remapped ink token masked by the same art (the vfDots
      idiom — and like every masked tile, the span mask keeps the zoom
      caveat). Everything else re-inks through the vfBase token remap; the
      arrows are currentColor SVG and follow the palette by themselves. */
   @media (forced-colors: active) {
     .vf-rail-trough {
+      background-image: none;
       background-color: var(--vf-black, #000);
-      mask-image: ${o(d)};
-      ${n(c, l)}
-    }
-    .vf-rail-trough-art {
-      display: none;
+      mask-image: ${c(u)};
+      ${n(l.width, l.height)}
     }
   }
 `;
 //#endregion
-export { c as TROUGH_MOTIF_X, l as TROUGH_MOTIF_Y, u as TROUGH_RECTS, f as vfScrollRail };
+export { l as TROUGH, d as vfScrollRail };

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

@@ -3,11 +3,15 @@
  * with no blur and no spread, System 7's only depth cue. The offset is
  * tokenized via `--vf-shadow-offset` and scales with `--vf-scale`.
  *
- * Compose it into any raised surface. Every raised surface in the kit does:
- * {@link vfPanel} (menus, popups) and {@link vfChromeFrame} (window and dialog
- * frames). One declaration, so the kit can't grow two shadows.
- *
- * Kept in its own module because it is the one recipe consumed on its own:
- * vf-swatch composes the shadow without either surface class.
+ * The shadow value, for a list: a stroked surface passes it to
+ * `vfStrokeDecls({ shadows: vfHardShadow })`, which paints it after the
+ * stroke. Every raised surface in the kit does — {@link vfPanel} (menus,
+ * popups) and {@link vfChromeFrame} (window frames). One value, so the kit
+ * can't grow two shadows.
+ */
+export declare const vfHardShadow: import("lit").CSSResult;
+/**
+ * {@link vfHardShadow} as the whole `box-shadow` declaration, for a box that
+ * casts the shadow and draws no stroke.
  */
 export declare const vfHardShadowDecls: import("lit").CSSResult;

package/dist/styles/recipes/shadow.js

@@ -1,5 +1,7 @@
 import { unsafeCSS as e } from "lit";
 //#region src/styles/recipes/shadow.ts
-var t = e("\n  box-shadow: calc(var(--vf-scale, 1) * var(--vf-shadow-offset, 2px))\n    calc(var(--vf-scale, 1) * var(--vf-shadow-offset, 2px)) 0 0\n    var(--vf-black, #000);\n");
+var t = e("calc(var(--vf-scale, 1) * var(--vf-shadow-offset, 2px))\n    calc(var(--vf-scale, 1) * var(--vf-shadow-offset, 2px)) 0 0\n    var(--vf-black, #000)"), n = e(`
+  box-shadow: ${t};
+`);
 //#endregion
-export { t as vfHardShadowDecls };
+export { t as vfHardShadow, n as vfHardShadowDecls };

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

@@ -0,0 +1,85 @@
+import { type CSSResult } from 'lit';
+import type { RuleEdge } from './rule.js';
+/** One to four values in shorthand order, as top/right/bottom/left. */
+type Sides<T> = T | readonly T[];
+/** The padding under a stroked edge: the element's own plus the stroke's. */
+export declare function strokePadding(own: number | string, width: number): string;
+/** The border a stroked edge becomes under forced colors; 0 wide otherwise. */
+export declare function strokeBorder(width: number): string;
+/** The inset shadow that paints one edge's stroke. */
+export declare function strokeEdgeShadow(edge: RuleEdge, width: number): string;
+/** The forced-colors switch every stroked element carries. */
+export declare const STROKE_FORCED_COLORS = "@media (forced-colors: active) {\n    --_vf-stroke-pad: 0;\n  }";
+/**
+ * The inset shadow of a stroke `width` system px wide on all four edges — the
+ * value to restate when only the painted width changes, as vf-checkbox's
+ * press does. Reads the ink and forced-colors switch the element's
+ * {@link vfStrokeDecls} declares.
+ */
+export declare function vfStrokeShadow(width?: number): CSSResult;
+/** The options of {@link vfStrokeDecls}. */
+export interface VfStrokeOptions {
+    /** The stroked edges. Default all four. */
+    edges?: readonly RuleEdge[];
+    /**
+     * The stroke's width in whole system px, one to four values in shorthand
+     * order. Default 1.
+     */
+    width?: Sides<number>;
+    /**
+     * The element's own padding, in system px, one to four values in shorthand
+     * order; each stroked edge adds its stroke. A value is a number or a
+     * system-px CSS length (`'var(--vf-select-gutter, 16px)'`). Omitted, the
+     * declarations set padding on the stroked edges alone, to the stroke.
+     */
+    padding?: Sides<number | string>;
+    /**
+     * More shadows, painted with the stroke: the hard drop shadow
+     * ({@link vfHardShadow}), a white ring. The stroke comes first in the list.
+     */
+    shadows?: string | CSSResult;
+    /** The stroke's color. Default `var(--vf-black, #000)`. */
+    ink?: string;
+}
+/**
+ * A 1-bit stroke that isn't a line width. The declarations for a box whose
+ * edges carry a black line of whole system px — every frame, well, rule and
+ * box in the kit — for interpolating into the box's rule:
+ * `.card { ${vfStrokeDecls({ padding: [4, 8] })} }`.
+ *
+ * Safari rounds a border width to device px before it applies page zoom, so a
+ * `border` of `calc(var(--vf-scale, 1) * 1px)` draws thinner than the art
+ * around it at most zoom levels, and moves everything inside the box off the
+ * device grid. Padding and box-shadow lengths are not rounded that way. So the
+ * stroke's space is padding on each stroked edge, added to the element's own,
+ * and the black is an inset `box-shadow`, with `shadows` after it in the same
+ * list. Both land on whole device px at every zoom.
+ *
+ * What changes from a border:
+ * - The declarations own `padding` on the stroked edges (on all four, when
+ *   `padding` is passed) and `box-shadow`. Pass the element's own padding and
+ *   shadows here; a later `padding` or `box-shadow` on the element replaces
+ *   the stroke's.
+ * - A child placed against the box measures from its outer edge. Offset it by
+ *   the stroke with {@link vfStrokeInset}.
+ * - An `overflow: hidden` box clips at its outer edge, so its content can
+ *   paint over the stroke. Clip on an inner element instead.
+ * - Forced colors paints no `box-shadow`, so there each stroke is a border
+ *   again and the padding is the element's own: the same box a border draws.
+ *
+ * The color goes through a private property the declarations set, so pass a
+ * `var()` as `ink` to change it from a state rule without restating the
+ * shadow list.
+ */
+export declare function vfStrokeDecls(options?: VfStrokeOptions): CSSResult;
+/**
+ * A length `base` system px in from a stroke's inner edge, measured from the
+ * box's outer edge, on an edge carrying `stroke` system px of it (see
+ * {@link vfStrokeDecls}): the inset for a child placed against a stroked box
+ * (`right: ${vfStrokeInset(0)}` is flush inside a 1px frame), or a padding
+ * that restates the stroke's (`padding: ${vfStrokeInset(0)} ${vfStrokeInset(6)}`).
+ * `base` is a number or a system-px CSS length. Under forced colors, where
+ * the stroke is a border, it is `base`.
+ */
+export declare function vfStrokeInset(base: number | string, stroke?: number): CSSResult;
+export {};

package/dist/styles/recipes/stroke.js

@@ -0,0 +1,53 @@
+import { unsafeCSS as e } from "lit";
+//#region src/styles/recipes/stroke.ts
+var t = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+], n = "var(--_vf-stroke-pad, 1)", r = "var(--_vf-stroke-ink)";
+function i(e) {
+	let t = Array.isArray(e) ? e : [e], n = t[0], r = t[1] ?? n;
+	return [
+		n,
+		r,
+		t[2] ?? n,
+		t[3] ?? r
+	];
+}
+var a = (e) => typeof e == "number" ? `${e}px` : e, o = (e) => `calc(var(--vf-scale, 1) * ${e}px * ${n})`;
+function s(e, t) {
+	return e === 0 ? o(t) : `calc(var(--vf-scale, 1) * (${a(e)} + ${t}px * ${n}))`;
+}
+function c(e) {
+	return `calc(var(--vf-scale, 1) * ${e}px * (1 - ${n})) solid ${r}`;
+}
+function l(e, t) {
+	let i = (e) => `calc(var(--vf-scale, 1) * ${e * t}px * ${n})`;
+	switch (e) {
+		case "top": return `inset 0 ${i(1)} 0 0 ${r}`;
+		case "right": return `inset ${i(-1)} 0 0 0 ${r}`;
+		case "bottom": return `inset 0 ${i(-1)} 0 0 ${r}`;
+		case "left": return `inset ${i(1)} 0 0 0 ${r}`;
+	}
+}
+var u = "@media (forced-colors: active) {\n    --_vf-stroke-pad: 0;\n  }";
+function d(t = 1) {
+	return e(`inset 0 0 0 ${o(t)} ${r}`);
+}
+function f(n = {}) {
+	let r = new Set(n.edges ?? t), o = i(n.width ?? 1), f = i(n.padding ?? 0), p = t.map((e, t) => r.has(e) ? o[t] : 0), m = p.every((e) => e > 0 && e === p[0]), h = [`--_vf-stroke-ink: ${n.ink ?? "var(--vf-black, #000)"};`], g = [];
+	return t.forEach((e, t) => {
+		let r = p[t];
+		if (!r) {
+			n.padding !== void 0 && h.push(`padding-${e}: calc(var(--vf-scale, 1) * ${a(f[t])});`);
+			return;
+		}
+		h.push(`padding-${e}: ${s(f[t], r)};`), h.push(`border-${e}: ${c(r)};`), m || g.push(l(e, r));
+	}), m && g.push(String(d(p[0]))), n.shadows && g.push(String(n.shadows)), h.push(`box-shadow: ${g.length ? g.join(", ") : "none"};`), h.push(u), e(h.join("\n  "));
+}
+function p(t, n = 1) {
+	return e(s(t, n));
+}
+//#endregion
+export { u as STROKE_FORCED_COLORS, c as strokeBorder, l as strokeEdgeShadow, s as strokePadding, f as vfStrokeDecls, p as vfStrokeInset, d as vfStrokeShadow };

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

@@ -1,11 +1,11 @@
 /**
- * Panel recipe for menus and popups: white face, 1px black border, hard
+ * Panel recipe for menus and popups: white face, 1px black frame, hard
  * offset shadow.
  */
 export declare const vfPanel: import("lit").CSSResult;
 /**
  * Chrome-frame recipe for the desktop window (vf-window): the same white
- * face, 1px black border and hard offset shadow as {@link vfPanel}. Apply
+ * face, 1px black frame and hard offset shadow as {@link vfPanel}. Apply
  * `.vf-frame` to the outer frame element.
  *
  * Skin only — the component adds its own layout (a full-size flex column: the
@@ -14,7 +14,7 @@ export declare const vfPanel: import("lit").CSSResult;
  */
 export declare const vfChromeFrame: import("lit").CSSResult;
 /**
- * The classic modal-dialog (dBoxProc) frame: 1px outer border, 2px white gap,
+ * The classic modal-dialog (dBoxProc) frame: 1px outer rule, 2px white gap,
  * 2px inner band — and NO drop shadow, per the `Windows/modal dialog.png`
  * reference. System 7's alert box drew the
  * *mirror* trace (2px outer, 2px gap, 1px inner rule, with the hard shadow) —
@@ -30,10 +30,14 @@ export declare const vfChromeFrame: import("lit").CSSResult;
  * six stripes / 3 white rows, the title patch's 7px margins) sits directly
  * under the outer rule, inset 2px at either end so its stripes keep the same
  * 2px of white from the outer rule that the inner band keeps; the bar's own
- * 1px rule plus the inner box's 1px top border make the 2px band its floor,
+ * 1px rule plus the inner box's 1px top stroke make the 2px band its floor,
  * which then continues down both sides and along the bottom as the band
  * around the body. No shadow anywhere. Put the `.vf-title-bar` between the
  * two elements, as the first child of `.vf-modal-frame`, and the three rules
  * below do the rest.
+ *
+ * Both lines are strokes ({@link vfStrokeDecls}): padding holds their space
+ * and an inset shadow paints them, so the recipe owns both elements' padding
+ * and box-shadow.
  */
 export declare const vfModalFrame: import("lit").CSSResult;

package/dist/styles/recipes/surface.js

@@ -1,42 +1,48 @@
-import { vfHardShadowDecls as e } from "./shadow.js";
-import { css as t, unsafeCSS as n } from "lit";
+import { vfHardShadow as e } from "./shadow.js";
+import { vfStrokeDecls as t, vfStrokeInset as n } from "./stroke.js";
+import { css as r, unsafeCSS as i } from "lit";
 //#region src/styles/recipes/surface.ts
-var r = n(`
+var a = i(`
   background: var(--vf-white, #fff);
-  border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
-  ${e}
-`), i = t`
+  ${t({ shadows: e })}
+`), o = r`
   .vf-panel {
-    ${r}
+    ${a}
   }
-`, a = t`
+`, s = r`
   .vf-frame {
-    ${r}
+    ${a}
   }
-`, o = t`
+`, c = r`
   .vf-modal-frame {
     background: var(--vf-white, #fff);
-    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${t()}
   }
   .vf-modal-frame-inner {
     margin: calc(var(--vf-scale, 1) * 2px);
-    border: calc(var(--vf-scale, 1) * 2px) solid var(--vf-black, #000);
+    ${t({ width: 2 })}
   }
   /* The bar set into the frame: 2px in from the outer rule at either end, its
      stripes flush to the bar's own edge (vfStripes' 1px side inset is the
-     window frame's buffer — here the frame's gap is that buffer). */
+     window frame's buffer — here the frame's gap is that buffer). The bottom
+     inset counts the bar's rule, which is padding (vfTitleBar). */
   .vf-modal-frame > .vf-title-bar {
     margin: 0 calc(var(--vf-scale, 1) * 2px);
   }
   .vf-modal-frame > .vf-title-bar .vf-stripes {
-    inset: calc(var(--vf-scale, 1) * 3px) 0;
+    inset: calc(var(--vf-scale, 1) * 3px) 0 ${n(3)};
   }
-  /* Under a bar, the inner box's top border is the second row of the band —
+  /* Under a bar, the inner box's top stroke is the second row of the band —
      the bar's 1px rule is the first — and there is no gap row between. */
   .vf-modal-frame > .vf-title-bar + .vf-modal-frame-inner {
     margin-top: 0;
-    border-top-width: calc(var(--vf-scale, 1) * 1px);
+    ${t({ width: [
+	1,
+	2,
+	2,
+	2
+] })}
   }
 `;
 //#endregion
-export { a as vfChromeFrame, o as vfModalFrame, i as vfPanel };
+export { s as vfChromeFrame, c as vfModalFrame, o as vfPanel };

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

@@ -61,8 +61,9 @@ export type TileRect = readonly [x: number, y: number, w: number, h: number, fil
 export declare function tileRects(rects: readonly TileRect[]): string;
 /**
  * The motif tiled over `spanWidth × spanHeight` system px as a RASTER image —
- * a PNG data URI at one image px per system px — for the whole-surface fill a
- * converted tiled surface paints (src/tile-grid.ts).
+ * a PNG data URI at `density` image px per system px (one by default) — the
+ * encoder behind the tile every kit surface repeats (`repeatTile`,
+ * src/tile-grid.ts).
  *
  * A raster because of how engines rasterize a fill's art, not how they place
  * its box. Chromium rasterizes an SVG image at the box's *stored* (layout)
@@ -79,8 +80,15 @@ export declare function tileRects(rects: readonly TileRect[]): string;
  * out as a data URI and released — kit art only, so there is nothing
  * cross-origin to taint). Where canvas is unavailable the SVG tile is
  * returned instead, so the declaration still paints.
+ *
+ * `density` draws each system px as a `density × density` block of whole
+ * image px. An image drawn at the device px per system px it will be shown
+ * at is copied 1:1 onto the device grid, so no engine's image filter has
+ * anything to decide — Safari smooths a magnified image on its repeating
+ * path whatever `image-rendering` says. It is still one pattern bit per
+ * system px; only who scales it changes.
  */
-export declare function tileRaster(motifWidth: number, motifHeight: number, rects: readonly TileRect[], spanWidth?: number, spanHeight?: number): string;
+export declare function tileRaster(motifWidth: number, motifHeight: number, rects: readonly TileRect[], spanWidth?: number, spanHeight?: number, density?: number): string;
 /**
  * `background-size` for a REPEATING tile — stated as the motif, sized as the
  * span that motif tiles at ({@link tileSpan}).

package/dist/styles/recipes/tile.js

@@ -11,18 +11,18 @@ function i(e, t, n, i = r(e), a = r(t)) {
 function a(e) {
 	return e.map(([e, t, n, r, i]) => `%3Crect ${(e ? `x='${e}' ` : "") + (t ? `y='${t}' ` : "")}width='${n}' height='${r}'${i ? ` fill='${encodeURIComponent(i)}'` : ""}/%3E`).join("");
 }
-function o(e, t, n, o = r(e), s = r(t)) {
-	let c = () => i(e, t, a(n), o, s);
-	if (typeof document > "u") return c();
-	let l = document.createElement("canvas");
-	l.width = e, l.height = t;
-	let u = l.getContext("2d");
-	if (!u) return c();
-	for (let [e, t, r, i, a] of n) u.fillStyle = a ?? "#000000", u.fillRect(e, t, r, i);
-	let d = document.createElement("canvas");
-	d.width = o, d.height = s;
-	let f = d.getContext("2d"), p = f?.createPattern(l, "repeat");
-	return !f || !p ? c() : (f.fillStyle = p, f.fillRect(0, 0, o, s), `url("${d.toDataURL("image/png")}")`);
+function o(e, t, n, o = r(e), s = r(t), c = 1) {
+	let l = () => i(e, t, a(n), o, s);
+	if (typeof document > "u") return l();
+	let u = document.createElement("canvas");
+	u.width = e * c, u.height = t * c;
+	let d = u.getContext("2d");
+	if (!d) return l();
+	for (let [e, t, r, i, a] of n) d.fillStyle = a ?? "#000000", d.fillRect(e * c, t * c, r * c, i * c);
+	let f = document.createElement("canvas");
+	f.width = o * c, f.height = s * c;
+	let p = f.getContext("2d"), m = p?.createPattern(u, "repeat");
+	return !p || !m ? l() : (p.fillStyle = m, p.fillRect(0, 0, f.width, f.height), `url("${f.toDataURL("image/png")}")`);
 }
 function s(t, n = t) {
 	return e`

package/dist/styles/recipes/title-bar.d.ts

@@ -32,6 +32,9 @@
  * drag handle, vf-window's only when `[movable]` — suppressing touch scrolling
  * on a bar that can't be dragged would be a real behavior change, so each
  * component keeps that one declaration under its own selector.
+ *
+ * The rule is a stroke ({@link vfStrokeDecls}): the bottom row is padding, so
+ * the texture layers placed inside the bar count it in their bottom insets.
  */
 export declare const vfTitleBar: import("lit").CSSResult;
 /**
@@ -45,5 +48,9 @@ export declare const vfTitleBar: import("lit").CSSResult;
  * Geometry is the standard 18px bar's; vf-window's utility variant overrides
  * the sizes under its own selector. Host-state rules (hiding widgets on an
  * inactive window) stay with the component — a dialog has no inactive state.
+ *
+ * Each box's line is a stroke ({@link vfStrokeDecls}), its white patch ring
+ * the next shadow in the same list. State rules recolor the line through
+ * `--_vf-stroke-ink`.
  */
 export declare const vfWindowWidgets: import("lit").CSSResult;