vintage-frames 0.1.0

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

@@ -0,0 +1,222 @@
+import { tileImage as e, tileRects as t, vfTileMaskSize as n } from "./tile.js";
+import { css as r, unsafeCSS as i } from "lit";
+var a = [[
+	0,
+	0,
+	1,
+	1
+], [
+	2,
+	1,
+	1,
+	1
+]], o = e(4, 2, t(a)), s = r`
+  /* 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. */
+  .vf-scroll {
+    scrollbar-width: none;
+  }
+  .vf-scroll::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* The rail: a grid of [arrow | track | arrow] along its axis, sized to the
+     15px inside the component frame (1px divider + 14px channel). The rail
+     always uses the default arrow pointer, never the host's cursor —
+     otherwise a textarea's text I-beam bleeds over the reserved rail. */
+  .vf-rail {
+    display: grid;
+    background: var(--vf-white, #fff);
+    cursor: var(--vf-cursor, default);
+    touch-action: none;
+  }
+  .vf-rail--vertical {
+    width: calc(var(--vf-scale, 1) * 15px);
+    grid-template-rows:
+      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);
+  }
+  .vf-rail--horizontal {
+    height: calc(var(--vf-scale, 1) * 15px);
+    grid-template-columns:
+      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);
+  }
+  /* Explicit placement, so hiding the arrows (inactive-window/degenerate
+     states) never reflows the track into an arrow cell — its box holds still
+     through every state flip. */
+  .vf-rail--vertical .vf-rail-button--decrement {
+    grid-row: 1;
+  }
+  .vf-rail--vertical .vf-rail-track {
+    grid-row: 2;
+  }
+  .vf-rail--vertical .vf-rail-button--increment {
+    grid-row: 3;
+  }
+  .vf-rail--horizontal .vf-rail-button--decrement {
+    grid-column: 1;
+  }
+  .vf-rail--horizontal .vf-rail-track {
+    grid-column: 2;
+  }
+  .vf-rail--horizontal .vf-rail-button--increment {
+    grid-column: 3;
+  }
+
+  /* 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
+     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. */
+  .vf-rail-button {
+    display: grid;
+    place-items: start;
+    background: var(--vf-white, #fff);
+    overflow: hidden;
+  }
+  .vf-rail--vertical .vf-rail-button--decrement {
+    border-bottom: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+  }
+  .vf-rail--vertical .vf-rail-button--increment {
+    border-top: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+  }
+  .vf-rail--horizontal .vf-rail-button--decrement {
+    border-right: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+  }
+  .vf-rail--horizontal .vf-rail-button--increment {
+    border-left: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+  }
+  .vf-rail-arrow {
+    display: block;
+    grid-area: 1 / 1;
+    width: calc(var(--vf-scale, 1) * 14px);
+    height: calc(var(--vf-scale, 1) * 14px);
+  }
+  /* Hollow at rest, solid while pressed (ScrollRailController holds
+     data-pressed on the button for the press's whole extent, auto-repeat
+     included). */
+  .vf-rail-arrow--fill,
+  .vf-rail-button[data-pressed] .vf-rail-arrow--rest {
+    display: none;
+  }
+  .vf-rail-button[data-pressed] .vf-rail-arrow--fill {
+    display: block;
+  }
+
+  /* The track between the arrows: the trough (dither) fills it, the thumb
+     travels it. */
+  .vf-rail-track {
+    position: relative;
+    overflow: hidden;
+    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). */
+  .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;
+    image-rendering: pixelated;
+  }
+  /* 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
+     divider and the frame — over its extent; the controller writes its
+     travel as a whole-system-px translate. */
+  .vf-rail-thumb {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: var(--vf-scrollbar-thumb, #ffffff);
+    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+  }
+  .vf-rail--vertical .vf-rail-thumb {
+    width: 100%;
+    height: calc(var(--vf-scale, 1) * 16px);
+  }
+  .vf-rail--horizontal .vf-rail-thumb {
+    height: 100%;
+    width: calc(var(--vf-scale, 1) * 16px);
+  }
+
+  /* The both-axes corner cell. It supplies the two interior dividers
+     (against the vertical increment arrow above and the horizontal one
+     beside it) that those buttons leave to it; a resizable window's grow box
+     lands exactly over it. */
+  .vf-rail-corner {
+    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);
+  }
+
+  /* ── Always-a-rail (driven by ScrollStateController) ─────────────────────
+     Idle axis: the reserved rail keeps its arrow buttons — System 7 drew
+     them on any bar in an active window — while the dither and thumb appear
+     only once that axis actually overflows, leaving arrows on a bare white
+     channel. The drawn arrows are inert (ScrollRailController's press guard):
+     there is nothing to scroll. */
+  .vf-scroll[data-overflow-y='false'] ~ .vf-rail--vertical .vf-rail-trough,
+  .vf-scroll[data-overflow-y='false'] ~ .vf-rail--vertical .vf-rail-thumb,
+  .vf-scroll[data-overflow-x='false'] ~ .vf-rail--horizontal .vf-rail-trough,
+  .vf-scroll[data-overflow-x='false'] ~ .vf-rail--horizontal .vf-rail-thumb {
+    display: none;
+  }
+  /* Inactive window: both axes blanked to the bare rail — arrows included,
+     unlike the idle state — regardless of overflow: a window that isn't
+     frontmost must not display interactive scroll UX (HIG; System 7 blanked
+     deactivated scrollbars to the empty rail). */
+  .vf-scroll[data-window-inactive] ~ .vf-rail .vf-rail-trough,
+  .vf-scroll[data-window-inactive] ~ .vf-rail .vf-rail-thumb,
+  .vf-scroll[data-window-inactive] ~ .vf-rail .vf-rail-button {
+    display: none;
+  }
+
+  /* ── Degenerate tracks (written by ScrollRailController) ─────────────────
+     A track shorter than the 16px thumb drops the thumb; a rail too short
+     for its arrow cells drops the trough and arrows too and reads as the
+     bare white rail — the classic Control Manager's decision table. */
+  .vf-rail[data-degenerate] .vf-rail-thumb {
+    display: none;
+  }
+  .vf-rail[data-degenerate='rail'] .vf-rail-trough,
+  .vf-rail[data-degenerate='rail'] .vf-rail-button {
+    display: none;
+  }
+
+  /* Forced colors: the raster keeps literal ink, so it hides 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-color: var(--vf-black, #000);
+      mask-image: ${i(o)};
+      ${n(4, 2)}
+    }
+    .vf-rail-trough-art {
+      display: none;
+    }
+  }
+`;
+//#endregion
+export { a as TROUGH_RECTS, s as vfScrollRail };

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

@@ -0,0 +1,13 @@
+/**
+ * The hard 1-bit drop shadow — a solid black copy of the box offset down-right
+ * 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.
+ */
+export declare const vfHardShadowDecls: import("lit").CSSResult;

package/dist/styles/recipes/shadow.js

@@ -0,0 +1,5 @@
+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");
+//#endregion
+export { t as vfHardShadowDecls };

package/dist/styles/recipes/static-text.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The two host switches shared by the kit's static-text components
+ * (`vf-label`, `vf-paragraph`) — the only things those two do identically:
+ *
+ * - `face="display" | "body"` picks the face explicitly, so a caption can be
+ *   set in body copy or a paragraph in chrome type. Each component keeps its
+ *   own *default* face in its own stylesheet (a label is chrome, a paragraph is
+ *   body); this is the override.
+ * - `dim` greys the text to `--vf-disabled` — the System 7 dimmed-text
+ *   treatment (SPEC §1), for static text beside a disabled control.
+ *
+ * Each face renders at its native strike size — one design px = one system
+ * px. The body face doubles as the kit's fine print, exactly as System 7's
+ * did: a dialog's small captions are Geneva 9 at its own size (SPEC §3,
+ * "One size, honestly").
+ *
+ * Every rule is `:host([attr])`, one specificity step above the plain `:host`
+ * rule a component sets its own defaults in, so they win wherever they are
+ * composed.
+ *
+ * Offering both faces is the point of the recipe, so this is the one module
+ * that pulls both font files whatever the component does with it.
+ */
+export declare const vfStaticText: import("lit").CSSResult;

package/dist/styles/recipes/static-text.js

@@ -0,0 +1,17 @@
+import { vfBodyDecls as e } from "./body-face.js";
+import { vfDisplayDecls as t } from "./display-face.js";
+import { css as n } from "lit";
+//#region src/styles/recipes/static-text.ts
+var r = n`
+  :host([face='display']) {
+    ${t}
+  }
+  :host([face='body']) {
+    ${e}
+  }
+  :host([dim]) {
+    color: var(--vf-disabled, #c0c0c0);
+  }
+`;
+//#endregion
+export { r as vfStaticText };

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

@@ -0,0 +1,28 @@
+/**
+ * Panel recipe for menus and popups: white face, 1px black border, hard
+ * offset shadow.
+ */
+export declare const vfPanel: import("lit").CSSResult;
+/**
+ * Chrome-frame recipe for the two framed containers (vf-window, vf-dialog):
+ * the same white face, 1px black border and hard offset shadow as
+ * {@link vfPanel}. Apply `.vf-frame` to the outer frame element.
+ *
+ * Skin only — each component adds its own layout, because they size very
+ * differently: vf-window's frame is a full-size flex column (the body flexes,
+ * the title bar and grow box don't), while vf-dialog's is a plain block that
+ * the native `<dialog>` shrink-wraps.
+ */
+export declare const vfChromeFrame: import("lit").CSSResult;
+/**
+ * The classic modal-dialog (dBoxProc) frame: 1px outer border, 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) —
+ * a different chrome the kit does not ship: an alert is a composition over
+ * this frame, not a component.
+ *
+ * Apply `.vf-modal-frame` to the outer element and `.vf-modal-frame-inner` to
+ * a wrapper inside it; content goes in the wrapper.
+ */
+export declare const vfModalFrame: import("lit").CSSResult;

package/dist/styles/recipes/surface.js

@@ -0,0 +1,27 @@
+import { vfHardShadowDecls as e } from "./shadow.js";
+import { css as t, unsafeCSS as n } from "lit";
+//#region src/styles/recipes/surface.ts
+var r = n(`
+  background: var(--vf-white, #fff);
+  border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+  ${e}
+`), i = t`
+  .vf-panel {
+    ${r}
+  }
+`, a = t`
+  .vf-frame {
+    ${r}
+  }
+`, o = t`
+  .vf-modal-frame {
+    background: var(--vf-white, #fff);
+    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+  }
+  .vf-modal-frame-inner {
+    margin: calc(var(--vf-scale, 1) * 2px);
+    border: calc(var(--vf-scale, 1) * 2px) solid var(--vf-black, #000);
+  }
+`;
+//#endregion
+export { a as vfChromeFrame, o as vfModalFrame, i as vfPanel };

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

@@ -0,0 +1,122 @@
+import { type CSSResult } from 'lit';
+/**
+ * The lattice a repeating tile's span has to land on, in system px.
+ *
+ * `--vf-scale` is `target / trueDpr` in lowest terms — 1, 3/2, 4/3, 8/5, 6/5,
+ * 5/4 — and a span of `N` system px is `N × scale` CSS px, which the engine can
+ * hold only when its layout grid can express it (Chromium's `LayoutUnit` is
+ * 1/64 CSS px, Gecko's app unit 1/60). For a scale `p/q` that needs `q` to
+ * divide `64 × N`, and the 64 already absorbs every power of two — so what is
+ * left is the ODD part of `q`, and every density the ladder derives has an odd
+ * part of 1, 3 or 5:
+ *
+ *   dpr 1 → 1     dpr 1.25 → 8/5   dpr 1.5 → 4/3
+ *   dpr 2 → 3/2   dpr 2.5  → 6/5   dpr 3   → 4/3   dpr 4 → 5/4
+ *
+ * 15 covers all of them at once, which is why a tile is measured in multiples
+ * of it rather than per-display: the span is a constant of the art, not of the
+ * screen, so the CSS stays a plain `calc()` with nothing to recompute when the
+ * density changes.
+ */
+export declare const TILE_LATTICE = 15;
+/**
+ * The span a motif of `motif` system px tiles at: the smallest multiple of
+ * {@link TILE_LATTICE} that is also a whole number of motifs, so the tile is
+ * both seamless and holdable.
+ *
+ *   1 → 15    2 → 30    3 → 15    4 → 60    12 → 60
+ */
+export declare function tileSpan(motif: number): number;
+/**
+ * A repeating fill's art, as a data URI: the `motif` markup laid into a tile of
+ * {@link tileSpan} system px by an SVG `<pattern>`, so the image carries the
+ * whole span while the source stays the two or three rects that are actually
+ * the artwork.
+ *
+ * The subdivision inside the tile costs nothing: the span is a whole number of
+ * device pixels (below), the SVG divides its box into that many whole units,
+ * and `shape-rendering: crispEdges` keeps every rect on them.
+ *
+ * @param motifWidth  the motif's width in system px
+ * @param motifHeight the motif's height in system px
+ * @param motif       the motif's markup, URL-encoded as the rest of the kit's
+ *                    inline SVG is (`%3Crect …/%3E`)
+ * @param spanWidth   explicit tile width in system px (default
+ *                    `tileSpan(motifWidth)`) — a placed tile grid
+ *                    (src/tile-grid.ts) may size its tile independently of the
+ *                    lattice, since each placed box paint-snaps on its own
+ * @param spanHeight  explicit tile height in system px, likewise
+ */
+export declare function tileImage(motifWidth: number, motifHeight: number, motif: string, spanWidth?: number, spanHeight?: number): string;
+/**
+ * One rect of a 1-bit motif, stated as data: `[x, y, w, h, fill]` in system px
+ * over the motif cell, painted in order. `fill` is a CSS hex color; omitted
+ * means black, the SVG default. The motif stated once as data is what lets a
+ * surface derive BOTH of its artifacts — the SVG tile ({@link tileImage} via
+ * {@link tileRects}) and the raster tile ({@link tileRaster}) — from the same
+ * two or three rects that are actually the artwork.
+ */
+export type TileRect = readonly [x: number, y: number, w: number, h: number, fill?: string];
+/** {@link TileRect} data as the URL-encoded rect markup {@link tileImage} takes. */
+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 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)
+ * size — fractional at every scale the layout grid can't hold — and ignores
+ * `image-rendering` for SVG entirely, so the 1-bit rects antialias to gray no
+ * matter how exactly the box paint-snapped (measured; inline `crispEdges`
+ * patterns smear the same way). A raster source under
+ * `image-rendering: pixelated` is sampled nearest-neighbor, which can only
+ * ever produce source colors: the art is 1-bit by construction at every
+ * scale, holdable or not.
+ *
+ * Encoded through an offscreen canvas (a PNG encoder, not a render surface:
+ * the motif is drawn once into a cell, pattern-filled across the span, read
+ * 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.
+ */
+export declare function tileRaster(motifWidth: number, motifHeight: number, rects: readonly TileRect[], spanWidth?: number, spanHeight?: number): string;
+/**
+ * `background-size` for a REPEATING tile — stated as the motif, sized as the
+ * span that motif tiles at ({@link tileSpan}).
+ *
+ * A tile is the one place where "one system pixel is a whole number of device
+ * pixels" is not enough on its own. That contract holds (`src/zoom.ts`), but
+ * the CSS *length* expressing it need not be one the engine can hold: at
+ * `--vf-scale` 4/3 a 2-system-px tile is 2.6667 CSS px and Chromium stores
+ * 2.65625. A single edge survives that — paint snaps each box to the device
+ * grid independently, which is why every border, stepped corner and magnified
+ * icon rasterizes exactly at 4/3 — but a tiled fill is ONE snapped box holding
+ * N unsnapped repeats, each placed at `k × tileSize`. The error compounds until
+ * the boundary has walked a whole device pixel, and 43% of the desktop dither
+ * rasterizes to mid-gray.
+ *
+ * Enlarging the tile removes the accumulation instead of trading it away: the
+ * span is holdable by construction, so every repeat lands exactly, and because
+ * the span is a whole number of motifs the pattern is unchanged — one system
+ * pixel of texture is still one system pixel, the same count of device pixels
+ * as every other edge on the screen. What is left over at an unholdable scale
+ * is a single seam per span rather than per motif, and the spans the kit uses
+ * (30 and 60 system px) are holdable at every density the ladder derives, so
+ * there is no seam at all.
+ *
+ * The cost is a bigger tile texture — 60 CSS px square at most, for art that
+ * repeats forever — and nothing else. There is no rounding, no display-derived
+ * custom property to keep in sync, and no `round()`, so it behaves the same in
+ * every engine.
+ *
+ * @param motifWidth  the motif's width in system px
+ * @param motifHeight the motif's height in system px (defaults to the width)
+ */
+export declare function vfTileSize(motifWidth: number, motifHeight?: number): CSSResult;
+/**
+ * {@link vfTileSize} as `mask-size`, for the forced-colors branches that repaint
+ * a `url()` tile in the ink token by masking with the same art (the windoid
+ * dots, the barber stripes). Same span, so the mask lands on the fill.
+ */
+export declare function vfTileMaskSize(motifWidth: number, motifHeight?: number): CSSResult;

package/dist/styles/recipes/tile.js

@@ -0,0 +1,40 @@
+import { css as e } from "lit";
+//#region src/styles/recipes/tile.ts
+var t = 15, n = (e, t) => t === 0 ? e : n(t, e % t);
+function r(e) {
+	return e * 15 / n(e, 15);
+}
+function i(e, t, n, i = r(e), a = r(t)) {
+	let o = i, s = a;
+	return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${o}' height='${s}' shape-rendering='crispEdges'%3E%3Cdefs%3E%3Cpattern id='m' width='${e}' height='${t}' patternUnits='userSpaceOnUse'%3E${n}%3C/pattern%3E%3C/defs%3E%3Crect width='${o}' height='${s}' fill='url(%23m)'/%3E%3C/svg%3E")`;
+}
+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 s(t, n = t) {
+	return e`
+    background-size: calc(var(--vf-scale, 1) * ${r(t)}px)
+      calc(var(--vf-scale, 1) * ${r(n)}px);
+  `;
+}
+function c(t, n = t) {
+	return e`
+    mask-size: calc(var(--vf-scale, 1) * ${r(t)}px)
+      calc(var(--vf-scale, 1) * ${r(n)}px);
+  `;
+}
+//#endregion
+export { t as TILE_LATTICE, i as tileImage, o as tileRaster, a as tileRects, r as tileSpan, c as vfTileMaskSize, s as vfTileSize };

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

@@ -0,0 +1,49 @@
+/**
+ * The striped title bar shared by vf-window and vf-dialog: a fixed-height row
+ * with a 1px bottom rule, and a centered white title patch that interrupts the
+ * racing stripes running behind it.
+ *
+ * Apply `.vf-title-bar` to the bar and `.vf-title` to the title element, and
+ * place a `.vf-stripes` layer (see {@link vfStripes}) as the bar's first child.
+ *
+ * Title geometry is stated in whole system px, traced from the InfiniteMac
+ * reference: in the 17px interior (18px bar minus the rule) the cap band sits
+ * on rows 4..12 — 4px of white above and below the 9px caps — with 7px of
+ * white between the ink and the stripes on either side. The face puts the cap
+ * band at rows 3..11 of its 16px line box (ascent 12, caps 9 on the
+ * baseline), so the line box rides 1px below the interior top and lands the
+ * caps exactly; letters carry a 1px side bearing, so 6px of padding makes the
+ * traced 7. Flex-CENTERING either axis is what this recipe deliberately does
+ * not do: 16 into 17 halves to a fraction, and (bar − patch)/2 is fractional
+ * whenever the two widths' parities differ — half a system px off, which a
+ * 3:1 display renders as ink one device px off the grid.
+ *
+ * The horizontal remainder can't be quantized statically (the patch width
+ * follows the heading's text run), so the patch stays flex-centered and
+ * `TitleCenterController` (src/chrome.ts) cancels the fraction through
+ * `--vf-title-dx` — controller-owned, like the grid-snap offsets.
+ *
+ * The title's clearance for whatever else shares the bar is set per component
+ * with `--vf-title-inset`: vf-dialog takes the 16px default (nothing but the
+ * title is in there), vf-window sets 60px so an ellipsized title can't run
+ * under its close/zoom widgets.
+ *
+ * `touch-action` is deliberately NOT declared here. vf-dialog's bar is always a
+ * 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.
+ */
+export declare const vfTitleBar: import("lit").CSSResult;
+/**
+ * The title-bar window widgets (close box left, zoom box right) shared by
+ * `vf-window` and a `closable` `vf-dialog` — one recipe so the two components'
+ * widgets are identical by construction, like the bar itself (the
+ * `Windows/moveable modal dialog.png` reference draws the dialog's close box
+ * exactly as the document window's: 11×11 at left:8px). Pair with the
+ * templates in src/chrome.ts, which carry the matching class/part contract.
+ *
+ * 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.
+ */
+export declare const vfWindowWidgets: import("lit").CSSResult;