vintage-frames 0.13.0 → 0.14.0

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 };

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/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;