vintage-frames 0.1.0

package/dist/styles/recipes/field.js

@@ -0,0 +1,68 @@
+import { vfDisplayDecls as e } from "./display-face.js";
+import { vfFocusUnderline as t } from "./focus.js";
+import { css as n } from "lit";
+//#region src/styles/recipes/field.ts
+var r = n`
+  .vf-field {
+    background: var(--vf-white, #fff);
+    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    border-radius: 0;
+    /* Editable text is set in the Chicago-style display face. */
+    ${e}
+    font-weight: var(--vf-font-weight, 700);
+    line-height: inherit;
+    color: var(--vf-black, #000);
+    user-select: text;
+    -webkit-user-select: text;
+    outline: none;
+    /* Stated, not inherited: Firefox's UA sheet puts \`cursor: text\` on
+       \`<input>\`, so the kit-wide cursor token (SPEC §3) has to be read here
+       to reach the well at all. The fallback is the I-beam it always was. */
+    cursor: var(--vf-cursor, text);
+  }
+  /* The wrapper boxing the well: the positioned anchor the focus rule hangs
+     from, and the element grid snapping moves (see the note above). */
+  .vf-field-well {
+    position: relative;
+  }
+  /* Keyboard focus is the kit's dashed rule one blank row under the well — not
+     a ring around it, and not a thickened border (see vfFocusUnderline). The
+     offset counts that blank row and the rule itself down from the well's
+     bottom edge: −(1 + 1).
+
+     Gated on a class rather than :focus-visible, which cannot express this for
+     a field: the selector matches any focus of an element that takes keyboard
+     input, so it is already true for a mouse click (see focus-modality.ts).
+     VfTextControlBase adds .vf-focus-rule for a keyboard focus only. */
+  .vf-field-well.vf-focus-rule::after {
+    --vf-focus-underline-offset: -2px;
+    ${t}
+  }
+  /* Its own token, deliberately not --vf-disabled: the disabled rule below is
+     an inactive control and exempt from contrast requirements, but a
+     placeholder sits in an ENABLED, operable field and isn't — and the dim
+     gray is 1.82:1 on the white well. #767676 is 4.54:1 (AA). System 7 had no
+     placeholder text at all, so like the focus rule this is a modern
+     affordance the kit adds, and it gets a color the modern requirement can
+     accept rather than a traced gray it must match. */
+  .vf-field::placeholder {
+    color: var(--vf-field-placeholder, #767676);
+    font-weight: inherit;
+    opacity: 1;
+  }
+  /* Disabled: the text dims to gray; the solid black box border 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);
+    cursor: var(--vf-cursor, default);
+  }
+  /* Selected text inverts to solid black-on-white — the 1-bit System 7
+     selection, not the browser's translucent blue. Reuses the list's highlight
+     tokens so every selection in the kit shares one color. */
+  .vf-field::selection {
+    background-color: var(--vf-highlight, #000);
+    color: var(--vf-highlight-text, #fff);
+  }
+`;
+//#endregion
+export { r as vfField };

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

@@ -0,0 +1,76 @@
+/**
+ * The dotted focus outline's two declarations, for composing inside any focus
+ * selector whose shape (`:host(:focus-visible) .box`, `.viewport:focus-visible`,
+ * a JS-toggled `.focus-ring`, …) is too varied to share a whole rule. Interpolate
+ * it into the component's own selector: `.box { ${vfFocusRing} }`.
+ *
+ * The offset defaults to +2px (ring sits just outside the box); set
+ * `--vf-focus-offset` in the same rule to inset it (negative, to stay in-box) or
+ * widen it. Keeps the outline default (`--vf-focus-outline`) authoritative in one
+ * place so a ring-style change is a single edit.
+ *
+ * Drawn in `currentColor` — the same mechanism as {@link vfFocusUnderline} —
+ * so the ring inverts with the ink it sits on. This is load-bearing for
+ * `vf-list-item` in a `multiple` list: Ctrl+Arrow deliberately walks the
+ * cursor across already-selected rows, and a hard-coded black ring on the
+ * inverted black selection bar left that cursor genuinely invisible while
+ * Space still acted on it. On the highlight bar `currentColor` is
+ * `--vf-highlight-text`, so the ring reads white there and black everywhere
+ * else — no unselected artwork changes.
+ */
+export declare const vfFocusRing: import("lit").CSSResult;
+/**
+ * Focus ring for non-text controls where focus and ring share one element.
+ * Apply to the focusable element:
+ *   .control:focus-visible { ... }
+ * or compose this class name onto it.
+ */
+export declare const vfFocus: import("lit").CSSResult;
+/**
+ * The kit's focus indicator for a control that can carry the mark on its own
+ * face: a 1px dashed rule beneath it — 1 system px on, 1 off — instead of a
+ * ring around it. It has two placements, both out of this one recipe:
+ *
+ * - *Inside* the control, under the ink it marks: the button underlines its
+ *   label, the two toggles their box and circle.
+ * - *Below* the control, under its whole box and clear of its hard shadow, for
+ *   a control with no interior to give: vf-select's one line is shared by the
+ *   label and the ▼, and a vf-swatch is nothing but fill.
+ *
+ * It is why none of those compose {@link vfFocus}.
+ *
+ * Keyboard focus is one of the modern requirements the kit adds rather than
+ * emulates (SPEC §1): System 7 predates full keyboard access and drew no such
+ * indicator at all. So the job is to render an affordance it never had in a
+ * 1-bit vocabulary it would recognize — a hairline dashed rule on the pixel
+ * grid, which reads on a white face and inside a control's tight silhouette
+ * where an offset ring has nowhere to go.
+ *
+ * Interpolate into an `::after` rule on the element being underlined (which
+ * needs `position: relative`), gated on whatever focus selector the component
+ * uses — and suppress the UA outline in the same rule set:
+ *
+ *   button:focus-visible { outline: none; }
+ *   button:focus-visible .label::after { ${vfFocusUnderline} }
+ *
+ * The rule spans that element's own box and leaves ONE blank system px row
+ * between itself and the ink above, which is what `--vf-focus-underline-offset`
+ * places — measured from the element's bottom edge up to the rule's, so
+ * positive insets it and negative drops it below. A negative one counts every
+ * row of ink between the two, since an absolutely positioned pseudo-element
+ * sizes to the PADDING box and the ink can carry on past it:
+ *
+ * - `4px` (the default) is a text box, where the ink stops at the baseline and
+ *   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).
+ * - 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
+ *   for vf-swatch an offset that composes `--vf-shadow-offset` rather than
+ *   hard-coding a depth its consumer can retheme.
+ *
+ * Drawn in `currentColor`, so it inverts with the label on a pressed face.
+ */
+export declare const vfFocusUnderline: import("lit").CSSResult;

package/dist/styles/recipes/focus.js

@@ -0,0 +1,39 @@
+import { css as e } from "lit";
+//#region src/styles/recipes/focus.ts
+var t = e`
+  outline: var(--vf-focus-outline, 1px dotted currentColor);
+  outline-offset: calc(var(--vf-scale, 1) * var(--vf-focus-offset, 2px));
+`, n = e`
+  .vf-focus:focus-visible {
+    ${t}
+  }
+`, r = e`
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(var(--vf-scale, 1) * var(--vf-focus-underline-offset, 4px));
+  height: calc(var(--vf-scale, 1) * 1px);
+  background: repeating-linear-gradient(
+    to right,
+    currentColor 0 calc(var(--vf-scale, 1) * 1px),
+    transparent calc(var(--vf-scale, 1) * 1px) calc(var(--vf-scale, 1) * 2px)
+  );
+  pointer-events: none;
+  /* Forced colors deletes every non-url() background-image, this gradient
+     included — and each carrier suppresses the UA outline in the same rule
+     set, so without this branch a keyboard user in high-contrast mode has no
+     focus mark anywhere the underline serves (ACCESSIBILITY-REVIEW §2.1).
+     forced-color-adjust: none turns the same 1-on/1-off gradient back on. It
+     stays currentColor, and the ::after's color inherits from an ancestor the
+     override DID reach — so the mark lands in the user's own palette
+     (CanvasText on a face, HighlightText on a highlight bar) and still
+     inverts with the ink it marks. Bare declarations in a nested @media apply
+     to the composing rule's own selector (CSSNestedDeclarations), which every
+     forced-colors engine supports. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+  }
+`;
+//#endregion
+export { n as vfFocus, t as vfFocusRing, r as vfFocusUnderline };

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

@@ -0,0 +1,5 @@
+/**
+ * Shared base styles for every Vintage Frames component.
+ * See SPEC.md §3 (tokens) and §4 (recipes).
+ */
+export declare const vfBase: import("lit").CSSResult;

package/dist/styles/recipes/host.js

@@ -0,0 +1,62 @@
+import { vfBodyDecls as e } from "./body-face.js";
+import { css as t } from "lit";
+//#region src/styles/recipes/host.ts
+var n = t`
+  :host {
+    box-sizing: border-box;
+    ${e}
+    font-weight: var(--vf-font-weight, 700);
+    line-height: 1.25;
+    color: var(--vf-black, #000);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+  :host([hidden]) {
+    display: none !important;
+  }
+  /* Forced-colors mode (Windows High Contrast) — a modern adaptation the kit
+     ADDS, in what is arguably the most 1-bit-native form the platform offers:
+     the user chose their own two colors, and a two-color design honors them by
+     re-declaring its palette in the system pair rather than fighting the
+     override. The mechanism: forced colors rewrites color-valued properties at
+     used-value time, but a property whose computed value is a <system-color>
+     keyword is preserved — and var() substitution happens before the override
+     judges it. So remapping the tokens here repairs, in one place, every paint
+     site that routes through them: borders, faces, glyphs, the selection
+     inversion, the button's silhouette pseudos, vf-grid's masked rules.
+     What it cannot reach is filed per site: non-url()
+     background-images are deleted regardless of color (the focus underline and
+     title-bar stripe gradients — see vfFocusUnderline/vfStripes), url() tiles
+     are preserved with their literal ink (the dot/sprite tiles — masks over
+     these tokens instead), and box-shadows are never painted. */
+  @media (forced-colors: active) {
+    :host {
+      --vf-black: CanvasText;
+      --vf-white: Canvas;
+      --vf-surface: Canvas;
+      --vf-disabled: GrayText;
+      --vf-field-placeholder: GrayText;
+      --vf-highlight: Highlight;
+      --vf-highlight-text: HighlightText;
+    }
+  }
+  /* Device-pixel grid snapping (src/grid-snap.ts). The controller writes the
+     sub-half-pixel correction as two reserved custom properties on the host
+     (--vf-snap-dx/-dy); this class applies it to a component's top-level
+     painted element(s). Absolutely positioned satellites that anchor to the
+     host (vf-menu's panel, the default button's ring) compose the same
+     variables into their own insets instead. Controller-owned — never set the
+     variables by hand. */
+  .vf-snap {
+    position: relative;
+    left: var(--vf-snap-dx, 0px);
+    top: var(--vf-snap-dy, 0px);
+  }
+`;
+//#endregion
+export { n as vfBase };

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

@@ -0,0 +1,80 @@
+import { type TileRect } from './tile.js';
+/**
+ * The windoid bar's dither: a 2-system-px motif with a single black pixel at
+ * its origin, stated once as rect data. Transparent ground, because the layer
+ * floats over the bar and the same art doubles as the forced-colors mask,
+ * where the ground would be opacity rather than paint. The SVG tile below is
+ * the CSS-repeated form (the no-declared-width fallback and the forced-colors
+ * mask); `vf-window` renders the exact fill — the whole-surface raster or a
+ * consumer token's placed tile grid — from the same data (src/tile-grid.ts).
+ */
+export declare const DOT_MOTIF = 2;
+export declare const DOT_RECTS: readonly TileRect[];
+/** The dots' tile size in system px (30) — the consumer token's documented box. */
+export declare const DOT_SPAN: number;
+/**
+ * Racing stripes for title bars. Apply the class to an absolutely-positioned
+ * layer inset 3px (top/bottom) and 1px (left/right) within the title bar. At
+ * the 18px bar height this yields exactly six 1px stripes spanning the close
+ * box's top and bottom edges (title-bar interior 17px, band 11px tall); the
+ * side inset leaves the stripes one system px clear of the frame border,
+ * matching the widgets' 1px patch ring in the reference art.
+ *
+ * TWO renderings by engine, each the measured best (2026-08-09/10: all
+ * three engines at eight densities, then a four-geometry Blink
+ * registration sweep; the numbers live in scripts/verify-tile.mjs):
+ *
+ * - **Gecko and WebKit show the six placed solid rows** (`chromeTitleBar`
+ *   renders the spans). Both engines device-snap solid boxes — the rows
+ *   measured pixel-perfect at all eight densities in each — and each
+ *   misrendered the gradient this layer once used: Gecko's GPU WebRender
+ *   pipeline renders a gradient through a cached texture whose sampling
+ *   softens a hard stop at default zoom (the originally reported bug), and
+ *   WebKit landed the sixth stripe one device row thin at dpr 3 and the
+ *   zoom-minted scales.
+ *
+ * - **Blink — and any engine failing both gate properties — shows the
+ *   12-unit SVG**: the band's 11 rows plus one empty pad row, viewBox
+ *   stretched onto a 12px-tall box, crispEdges. Blink pixel-snaps a
+ *   painted BOX to whole CSS px, which killed every mechanism whose
+ *   geometry rides an 11-system-px box — no legal CSS height exists at
+ *   scale 3/2 (16.5px), so placed rows fuse, rasters and an 11-tall SVG
+ *   drop or wobble a row, and a clip-path comb (origin-anchored, so the
+ *   even-height trick can't reach it) AAs at every fractional density.
+ *   Twelve divides by 2 and 3, so 12·scale is a whole CSS length at every
+ *   scale an integer display derives (18px at 3/2, 16px at 4/3): the box
+ *   never rounds. Measured: registered Δ0 with the close box, whole-rhythm
+ *   and zero-gray at dpr 1/1.5/2/3 across all four sweep geometries, and
+ *   never worse than the retired gradient at the unholdable scales
+ *   (1.25/1.7/2.3/2.5), where its residual is a hard one-row-thin first
+ *   stripe with no gray — the gradient produced the same thin stripe PLUS
+ *   a smeared row, so it is strictly dominated and gone.
+ *
+ * The gate is two engine-exclusive properties: `-moz-appearance` parses
+ * only in Gecko, `-webkit-backdrop-filter` only in WebKit (Blink's
+ * backdrop-filter is unprefixed, never aliased).
+ *
+ * Forced colors: every paint is token-routed — the rows' background-color
+ * and the rects' fill both resolve var(--vf-black), remapped to CanvasText
+ * — and the layer keeps forced-color-adjust: none (inherited, so it covers
+ * the SVG) so no forced palette repaints the active window's whole signal
+ * out from under it.
+ */
+export declare const vfStripes: import("lit").CSSResult;
+/**
+ * Dot-grid dither for the utility ("windoid") title bar — the slim bar's
+ * counterpart to {@link vfStripes}. Apply the class to an absolutely-positioned
+ * layer inset 2px top/bottom and FLUSH left/right: the close-up reference art
+ * runs the dots all the way into the side borders (the Windows/ sheet hand-
+ * insets them 2px, which the close-up shows is not the bar's own geometry).
+ *
+ * The layer's own CSS-repeated tile (a crisp 1-bit SVG on the 30-system-px
+ * span, overridable via `--vf-dots-pattern`) is the fallback for a window
+ * with no declared width. A `vf-window` that knows its width renders the
+ * exact fill INTO the layer instead — the whole-surface raster, or a consumer
+ * token's placed tile grid (src/tile-grid.ts) — and marks the layer
+ * `vf-tile-grid`, which switches the repeat off: the dot art is transparent-
+ * grounded, so a drifting CSS-repeated copy underneath would show through
+ * between the exactly-placed dots.
+ */
+export declare const vfDots: import("lit").CSSResult;

package/dist/styles/recipes/pattern.js

@@ -0,0 +1,82 @@
+import { tileImage as e, tileRects as t, tileSpan as n, vfTileMaskSize as r, vfTileSize as i } from "./tile.js";
+import { css as a, unsafeCSS as o } from "lit";
+var s = [[
+	0,
+	0,
+	1,
+	1,
+	"#000000"
+]], c = e(2, 2, t(s)), l = n(2), u = a`
+  .vf-stripes {
+    position: absolute;
+    inset: calc(var(--vf-scale, 1) * 3px) calc(var(--vf-scale, 1) * 1px);
+    pointer-events: none;
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+    }
+  }
+  .vf-stripes svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(var(--vf-scale, 1) * 12px);
+  }
+  .vf-stripes rect {
+    fill: var(--vf-black, #000000);
+  }
+  .vf-stripes span {
+    display: none;
+  }
+  /* Gecko (-moz-appearance) and WebKit (-webkit-backdrop-filter): each
+     parses nowhere else — Blink's backdrop-filter is unprefixed. */
+  @supports (-moz-appearance: none) or (-webkit-backdrop-filter: blur(1px)) {
+    .vf-stripes svg {
+      display: none;
+    }
+    .vf-stripes span {
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: calc(var(--vf-scale, 1) * 1px);
+      background: var(--vf-black, #000000);
+    }
+  }
+`, d = a`
+  .vf-dots {
+    position: absolute;
+    inset: calc(var(--vf-scale, 1) * 2px) 0;
+    background-image: var(--vf-dots-pattern, ${o(c)});
+    ${i(2)}
+    pointer-events: none;
+    /* The consumer-token art channel for the placed tile grid. */
+    --_vf-tile-image: var(--vf-dots-pattern, ${o(c)});
+  }
+  .vf-dots.vf-tile-grid {
+    background-image: none;
+  }
+  /* Forced colors preserves url() tiles verbatim, so the dots would stay
+     literal black — invisible on a dark high-contrast theme. Repainted as the
+     ink token through the same tile as a mask (the vf-grid rules idiom), so
+     the windoid bar's signature follows the user's palette. The exact-fill
+     children hide here and the span mask takes over — no mask pipeline
+     rasterizes exactly at a zoom-minted scale anyway (image-rendering does
+     not reach masks), so forced-colors keeps the span approach and its zoom
+     caveat, unchanged. */
+  @media (forced-colors: active) {
+    .vf-dots {
+      background-image: none;
+      background-color: var(--vf-black, #000);
+      mask-image: var(--vf-dots-pattern, ${o(c)});
+      ${r(2)}
+    }
+    .vf-dots .vf-tile,
+    .vf-dots .vf-tile-raster {
+      display: none;
+    }
+  }
+`;
+//#endregion
+export { s as DOT_RECTS, l as DOT_SPAN, d as vfDots, u as vfStripes };

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

@@ -0,0 +1,69 @@
+import { type TileRect } from './tile.js';
+/**
+ * The trough's 25% lattice — a 4×2-system-px motif with a dot at (0,0) and
+ * (2,1), traced from the UI kit's "Scroll bg" sprite — stated once as rect
+ * data. The DOM trough renders it as a whole-surface raster
+ * (`tileRaster`, 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_MOTIF_X = 4;
+export declare const TROUGH_MOTIF_Y = 2;
+export declare const TROUGH_RECTS: readonly TileRect[];
+/**
+ * System 7 scroll rails, drawn by the kit as ordinary shadow DOM — the skin
+ * for the subtree `renderScrollRail()` (src/scroll-rail.ts) produces. The
+ * native scrollbar is hidden, never the native scrolling: the scroller keeps
+ * real `overflow` scrolling (wheel, trackpad momentum, keyboard, touch and
+ * AT scrolling all stay the platform's), and the rail is synced to it by
+ * `ScrollRailController`.
+ *
+ * Why DOM and not the `::-webkit-scrollbar` skin this replaces: the engine
+ * owns themed-scrollbar geometry and quantizes it to whole CSS px — WebKit
+ * painted the rail one device pixel adrift (or a CSS px short) whenever the
+ * scroller's box edges or width left the whole-CSS-px lattice, which the
+ * kit's own odd-system-px insets produce constantly at scale 1.5. A DOM rail
+ * 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.
+ *
+ * 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
+ * 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
+ * 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.
+ *
+ * States, keyed off the attributes `ScrollStateController` writes on the
+ * scroller (now styling real elements, so there is no scrollbar-pseudo
+ * re-resolution caveat in any engine):
+ * - `data-overflow-{x,y}="false"` — idle rail: arrows stay drawn on a white
+ *   channel, divider stays, no dither, no thumb — System 7 drew an active
+ *   window's no-overflow bar as arrows on an empty channel, and a scroller
+ *   outside a window always counts as active;
+ * - `data-window-inactive` — both axes blanked to the bare rail, arrows
+ *   included, regardless of overflow (the HIG's inactive-window treatment);
+ * - `data-degenerate` (written by `ScrollRailController` when the track is
+ *   too short) — `"thumb"` drops the thumb, `"rail"` drops the trough and
+ *   arrows too, as the classic Control Manager did.
+ * A rail used without the controllers carries no such attributes, so none of
+ * these rules match and the full skin renders — the managed behavior stays
+ * strictly opt-in.
+ *
+ * FORCED COLORS: the rails, thumb, channel and frame land on the user's pair
+ * 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
+ * surface has, an accepted residual).
+ */
+export declare const vfScrollRail: import("lit").CSSResult;