vintage-frames 0.1.0

package/dist/scroll-rail.js

@@ -0,0 +1,194 @@
+import { effectiveScale as e, sysLength as t } from "./scale.js";
+import { TROUGH_RECTS as n } from "./styles/recipes/scroll-rail.js";
+import { TileRasterCache as r } from "./tile-grid.js";
+import "./motion.js";
+import { SCROLL_ARROW_DOWN as i, SCROLL_ARROW_DOWN_FILL as a, SCROLL_ARROW_LEFT as o, SCROLL_ARROW_LEFT_FILL as s, SCROLL_ARROW_RIGHT as c, SCROLL_ARROW_RIGHT_FILL as l, SCROLL_ARROW_UP as u, SCROLL_ARROW_UP_FILL as d } from "./glyphs.js";
+import { html as f } from "lit";
+//#region src/scroll-rail.ts
+var p = 16, m = 16, h = 14, g = 66, _ = class {
+	constructor(t, n) {
+		this.host = t, this.opts = n, this.scroller = null, this.press = null, this.troughCache = {
+			vertical: new r(),
+			horizontal: new r()
+		}, this.onScroll = () => this.sync(), this.onPointerDown = (t) => {
+			if (t.button !== 0 || this.press !== null) return;
+			let n = t.currentTarget, r = this.opts.getScroll();
+			if (!r) return;
+			let i = v(n), a = i === "vertical" ? "data-overflow-y" : "data-overflow-x";
+			if (r.getAttribute(a) === "false" || r.hasAttribute("data-window-inactive") || n.getAttribute("data-degenerate") === "rail") return;
+			let o = t.target, s = i === "vertical" ? t.clientY : t.clientX, c = e(this.host) || 1, l = o.closest(".vf-rail-thumb"), u = o.closest(".vf-rail-button--decrement"), d = o.closest(".vf-rail-button--increment");
+			if (l) {
+				let e = n.querySelector(".vf-rail-track");
+				if (!e) return;
+				let a = e.getBoundingClientRect(), o = i === "vertical" ? a.height : a.width;
+				this.press = {
+					pointerId: t.pointerId,
+					kind: "thumb",
+					axis: i,
+					rail: n,
+					dir: 1,
+					button: null,
+					startCoord: s,
+					startScroll: i === "vertical" ? r.scrollTop : r.scrollLeft,
+					travelCss: o - m * c,
+					lastCoord: s
+				};
+			} else if (u || d) {
+				let e = u ?? d, r = u ? -1 : 1;
+				e.setAttribute("data-pressed", ""), this.press = {
+					pointerId: t.pointerId,
+					kind: "step",
+					axis: i,
+					rail: n,
+					dir: r,
+					button: e,
+					startCoord: s,
+					startScroll: 0,
+					travelCss: 0,
+					lastCoord: s
+				}, this.stepBy(r, i), this.armRepeat(() => this.stepBy(r, i));
+			} else if (o.closest(".vf-rail-track")) {
+				let e = n.querySelector(".vf-rail-thumb")?.getBoundingClientRect(), r = s < ((e && (i === "vertical" ? e.top : e.left)) ?? s) ? -1 : 1;
+				this.press = {
+					pointerId: t.pointerId,
+					kind: "page",
+					axis: i,
+					rail: n,
+					dir: r,
+					button: null,
+					startCoord: s,
+					startScroll: 0,
+					travelCss: 0,
+					lastCoord: s
+				}, this.pageBy(r, i), this.armRepeat(() => this.pageTowardPointer());
+			} else return;
+			n.setPointerCapture(t.pointerId), t.preventDefault();
+		}, this.onPointerMove = (e) => {
+			let t = this.press;
+			if (!t || e.pointerId !== t.pointerId || (t.lastCoord = t.axis === "vertical" ? e.clientY : e.clientX, t.kind !== "thumb")) return;
+			let n = this.opts.getScroll();
+			if (!n || t.travelCss <= 0) return;
+			let r = this.scrollRange(n, t.axis);
+			if (r <= 0) return;
+			let i = t.startScroll + (t.lastCoord - t.startCoord) / t.travelCss * r;
+			t.axis === "vertical" ? n.scrollTop = i : n.scrollLeft = i;
+		}, this.onPointerUp = (e) => {
+			let t = this.press;
+			!t || e.pointerId !== t.pointerId || (this.press = null, this.clearRepeat(), t.button?.removeAttribute("data-pressed"), t.rail.hasPointerCapture(e.pointerId) && t.rail.releasePointerCapture(e.pointerId));
+		}, t.addController(this);
+	}
+	hostUpdated() {
+		this.wire(), this.sync();
+	}
+	hostDisconnected() {
+		this.clearRepeat(), this.press = null, this.unwire();
+	}
+	wire() {
+		let e = this.opts.getScroll() ?? null;
+		if (e !== this.scroller && (this.unwire(), this.scroller = e, e && (e.addEventListener("scroll", this.onScroll, { passive: !0 }), typeof ResizeObserver < "u"))) {
+			this.resizeObserver = new ResizeObserver(() => this.sync()), this.resizeObserver.observe(e);
+			let t = this.opts.getContent?.();
+			t && this.resizeObserver.observe(t);
+		}
+	}
+	unwire() {
+		this.scroller?.removeEventListener("scroll", this.onScroll), this.scroller = null, this.resizeObserver?.disconnect(), this.resizeObserver = void 0;
+	}
+	sync() {
+		let e = this.scroller ?? this.opts.getScroll(), t = this.host.renderRoot;
+		if (!(!e || !t)) for (let n of t.querySelectorAll(".vf-rail")) this.syncRail(n, e);
+	}
+	syncRail(r, i) {
+		let a = v(r), o = r.querySelector(".vf-rail-track"), s = r.querySelector(".vf-rail-thumb");
+		if (!o || !s) return;
+		let c = e(this.host) || 1, l = o.getBoundingClientRect(), u = (a === "vertical" ? l.height : l.width) / c, d = u < 1 ? "rail" : u < m ? "thumb" : null;
+		if (d ? r.setAttribute("data-degenerate", d) : r.removeAttribute("data-degenerate"), d === "rail") return;
+		let f = this.scrollRange(i, a), p = a === "vertical" ? i.scrollTop : i.scrollLeft, g = u - m, _ = f > 0 && g > 0 ? Math.max(0, Math.min(Math.floor(g), Math.round(p / f * g))) : 0;
+		s.style.translate = a === "vertical" ? `0 ${t(_)}` : `${t(_)} 0`;
+		let y = r.querySelector(".vf-rail-trough-art");
+		if (y) {
+			let e = Math.ceil((u + (a === "vertical" ? 2 : 4)) / (a === "vertical" ? 2 : 4)) * (a === "vertical" ? 2 : 4), r = a === "vertical" ? h : e, i = a === "vertical" ? e : h;
+			y.style.width = t(r), y.style.height = t(i), y.style.backgroundImage = this.troughCache[a].for(4, 2, n, r, i);
+		}
+	}
+	scrollRange(e, t) {
+		return t === "vertical" ? e.scrollHeight - e.clientHeight : e.scrollWidth - e.clientWidth;
+	}
+	stepBy(t, n) {
+		let r = this.opts.getScroll();
+		if (!r) return;
+		let i = t * p * (e(this.host) || 1);
+		n === "vertical" ? r.scrollTop += i : r.scrollLeft += i;
+	}
+	pageBy(t, n) {
+		let r = this.opts.getScroll();
+		if (!r) return;
+		let i = p * (e(this.host) || 1), a = n === "vertical" ? r.clientHeight : r.clientWidth, o = Math.max(i, a - i);
+		n === "vertical" ? r.scrollTop += t * o : r.scrollLeft += t * o;
+	}
+	pageTowardPointer() {
+		let e = this.press;
+		if (!e || e.kind !== "page") return;
+		let t = e.rail.querySelector(".vf-rail-thumb");
+		if (t) {
+			let n = t.getBoundingClientRect(), r = e.axis === "vertical" ? n.top : n.left, i = e.axis === "vertical" ? n.bottom : n.right;
+			if (e.dir > 0 ? i > e.lastCoord : r < e.lastCoord) return;
+		}
+		this.pageBy(e.dir, e.axis);
+	}
+	armRepeat(e) {
+		this.clearRepeat(), this.holdTimer = window.setTimeout(() => {
+			this.repeatTimer = window.setInterval(e, g);
+		}, 200);
+	}
+	clearRepeat() {
+		this.holdTimer !== void 0 && window.clearTimeout(this.holdTimer), this.repeatTimer !== void 0 && window.clearInterval(this.repeatTimer), this.holdTimer = void 0, this.repeatTimer = void 0;
+	}
+}, v = (e) => e.classList.contains("vf-rail--horizontal") ? "horizontal" : "vertical", y = (e, t) => f`<svg
+    class="vf-rail-arrow vf-rail-arrow--${t}"
+    viewBox="1 1 14 14"
+    fill="currentColor"
+    shape-rendering="crispEdges"
+    aria-hidden="true"
+  >
+    <path d=${e.d}></path>
+  </svg>`;
+function b(e, t) {
+	let [n, r, p, m] = t === "vertical" ? [
+		u,
+		d,
+		i,
+		a
+	] : [
+		o,
+		s,
+		c,
+		l
+	];
+	return f`
+    <div
+      class="vf-rail vf-rail--${t}"
+      aria-hidden="true"
+      @pointerdown=${e.onPointerDown}
+      @pointermove=${e.onPointerMove}
+      @pointerup=${e.onPointerUp}
+      @pointercancel=${e.onPointerUp}
+      @lostpointercapture=${e.onPointerUp}
+    >
+      <div class="vf-rail-button vf-rail-button--decrement">
+        ${y(n, "rest")}${y(r, "fill")}
+      </div>
+      <div class="vf-rail-track">
+        <div class="vf-rail-trough">
+          <div class="vf-rail-trough-art"></div>
+        </div>
+        <div class="vf-rail-thumb"></div>
+      </div>
+      <div class="vf-rail-button vf-rail-button--increment">
+        ${y(p, "rest")}${y(m, "fill")}
+      </div>
+    </div>
+  `;
+}
+//#endregion
+export { _ as ScrollRailController, b as renderScrollRail };

package/dist/scroll-state.d.ts

@@ -0,0 +1,113 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Rail-state tracking for System 7 "always-a-rail" scrollbars.
+ *
+ * System 7 draws a scrollable frame's scroll bar as a permanent part of its
+ * chrome: an empty white rail sits in the reserved channel even when there is
+ * nothing to scroll, and it only fills in — dither track, draggable thumb,
+ * arrow buttons — once the content actually overflows. Native `overflow` can't
+ * express that: `auto` is all-or-nothing (no rail when it fits) and `scroll`
+ * shows the whole bar always (arrows + a full-height thumb even when it fits),
+ * and there is no CSS selector for "is this element overflowing".
+ *
+ * This controller supplies the missing signal. It measures scroll vs. client
+ * size on both axes and writes `data-overflow-x` / `data-overflow-y`
+ * (`"true"` | `"false"`) onto the scroll element. The shared `vfScrollRail`
+ * recipe keys the drawn rail's dither, thumb and arrows off those attributes,
+ * so a rail is a bare white channel at `"false"` and the full System 7
+ * scrollbar at `"true"`.
+ *
+ * It also supplies the HIG's inactive-window treatment: a window that isn't
+ * frontmost must not display interactive scroll UX, so System 7 blanked a
+ * deactivated window's scrollbars back to the empty rail (and its List
+ * Manager/TextEdit did the same for scrollbars *inside* the window). The
+ * controller finds the nearest `vf-window` up the composed tree, watches its
+ * reflected `active` attribute, and toggles `data-window-inactive`
+ * (presence-only) on the scroll element; the recipe empties the
+ * dither/thumb/arrows while it is present, regardless of overflow. A scroller
+ * with no `vf-window` ancestor never carries the attribute — `vf-dialog` has
+ * no inactive state, and a bare scroll component on a page always draws live.
+ *
+ * The controller reports BOTH axes always; each component decides which rails
+ * it *reserves* by which rail elements it renders (`renderScrollRail`,
+ * src/scroll-rail.ts). An unreserved axis still scrolls natively but draws no
+ * rail, so the idle rules never touch it. The attributes exist only on
+ * managed elements, so a plain `.vf-scroll` used without a controller is
+ * untouched.
+ *
+ * Re-measures on every signal that can change overflow: the viewport resizing
+ * (host size, `--vf-scale`), the content resizing (a passed content element —
+ * slotted rows growing, media or late bitmap-font load), the host re-rendering,
+ * and an imperative {@link measure} (a `<textarea>`'s own scrollHeight changes
+ * on input without any box resizing).
+ *
+ * FUTURE: once `@container scroll-state(scrollable)` container queries reach
+ * baseline support, slotted-content components could drop this JS and gate the
+ * same recipe rules with a pure-CSS `@container` query instead (a native
+ * `<textarea>` changing scrollHeight on input would still need the imperative
+ * path). The window-activity half has the same trajectory via `@container
+ * style()` queries: vf-window cascades a custom property under
+ * `:host(:not([active]))` and the recipe gates on
+ * `style(--vf-window-active: false)`, retiring {@link observeWindow}'s
+ * MutationObserver and composed-tree walk. The rails being ordinary DOM,
+ * either migration is a plain selector swap — the old scrollbar-pseudo
+ * re-resolution caveat retired with `::-webkit-scrollbar`.
+ */
+export declare class ScrollStateController implements ReactiveController {
+    private readonly host;
+    private readonly getScroll;
+    private readonly getContent?;
+    /**
+     * Invoked whenever the measured overflow state changes (including the
+     * first measurement), with the per-axis result. Components that gate
+     * *rendered* state on scrollability — vf-scroll-area's conditional tab
+     * stop — hang a reactive property off this; the data attributes alone
+     * are written outside Lit's render and would never re-render the host.
+     */
+    private readonly onOverflowChange?;
+    private resizeObserver?;
+    private windowObserver?;
+    private vfWindow;
+    private wired;
+    constructor(host: ReactiveControllerHost & HTMLElement, getScroll: () => HTMLElement | null | undefined, getContent?: (() => Element | null | undefined) | undefined, 
+    /**
+     * Invoked whenever the measured overflow state changes (including the
+     * first measurement), with the per-axis result. Components that gate
+     * *rendered* state on scrollability — vf-scroll-area's conditional tab
+     * stop — hang a reactive property off this; the data attributes alone
+     * are written outside Lit's render and would never re-render the host.
+     */
+    onOverflowChange?: ((overflow: {
+        x: boolean;
+        y: boolean;
+    }) => void) | undefined);
+    hostConnected(): void;
+    hostUpdated(): void;
+    hostDisconnected(): void;
+    /** (Re-)attach the ResizeObserver to the viewport and content boxes. */
+    private wire;
+    /**
+     * Find the containing `vf-window` (checked by tag name, not instanceof — an
+     * import here would pull the whole window component into every scroller's
+     * graph) and watch its `active` attribute. The walk crosses shadow
+     * boundaries, so it reaches the window whether the scroller is slotted into
+     * its body (light-DOM ancestor) or is the window's own edge scroll area
+     * (shadow-DOM ancestor). Reconnect re-runs it, so a reparented scroller
+     * re-resolves its window.
+     */
+    private observeWindow;
+    /**
+     * Reflect the containing window's `active` state as a presence-only
+     * `data-window-inactive` on the scroll element. A window that hasn't
+     * upgraded yet has no `active` attribute (its default reflects on first
+     * update, which precedes any scroller rendering inside it); the observer
+     * catches the reflection either way.
+     */
+    private reflectWindowState;
+    /**
+     * Measure overflow and reflect it as `data-overflow-{x,y}` on the scroll
+     * element. Safe to call any time; components hit it imperatively when content
+     * changes without a box resize (e.g. a `<textarea>` on input).
+     */
+    measure(): void;
+}

package/dist/scroll-state.js

@@ -0,0 +1,55 @@
+import { sys as e } from "./scale.js";
+//#region src/scroll-state.ts
+var t = 1, n = 2, r = class {
+	constructor(e, t, n, r) {
+		this.host = e, this.getScroll = t, this.getContent = n, this.onOverflowChange = r, this.vfWindow = null, this.wired = !1, e.addController(this);
+	}
+	hostConnected() {
+		this.wired = !1, this.wire(), this.observeWindow(), typeof document < "u" && document.fonts && document.fonts.ready.then(() => this.measure());
+	}
+	hostUpdated() {
+		this.wire(), this.measure(), this.reflectWindowState();
+	}
+	hostDisconnected() {
+		this.resizeObserver?.disconnect(), this.resizeObserver = void 0, this.windowObserver?.disconnect(), this.windowObserver = void 0, this.vfWindow = null, this.wired = !1;
+	}
+	wire() {
+		if (this.wired || typeof ResizeObserver > "u") return;
+		let e = this.getScroll();
+		if (!e) return;
+		this.resizeObserver ||= new ResizeObserver(() => this.measure()), this.resizeObserver.observe(e);
+		let t = this.getContent?.();
+		t && this.resizeObserver.observe(t), this.wired = !0;
+	}
+	observeWindow() {
+		let e = this.host;
+		for (this.vfWindow = null; e;) {
+			if (e instanceof HTMLElement && e.localName === "vf-window") {
+				this.vfWindow = e;
+				break;
+			}
+			e = e.parentNode ?? (e instanceof ShadowRoot ? e.host : null);
+		}
+		!this.vfWindow || typeof MutationObserver > "u" || (this.windowObserver ??= new MutationObserver(() => this.reflectWindowState()), this.windowObserver.observe(this.vfWindow, {
+			attributes: !0,
+			attributeFilter: ["active"]
+		}));
+	}
+	reflectWindowState() {
+		let e = this.getScroll();
+		if (!e) return;
+		let t = this.vfWindow !== null && !this.vfWindow.hasAttribute("active");
+		e.hasAttribute("data-window-inactive") !== t && e.toggleAttribute("data-window-inactive", t);
+	}
+	measure() {
+		let r = this.getScroll();
+		if (!r) return;
+		let i = r.scrollHeight - r.clientHeight > e(n, r) + t, a = r.scrollWidth - r.clientWidth > t, o = r.getAttribute("data-overflow-y") !== String(i) || r.getAttribute("data-overflow-x") !== String(a);
+		r.setAttribute("data-overflow-y", String(i)), r.setAttribute("data-overflow-x", String(a)), o && this.onOverflowChange?.({
+			x: a,
+			y: i
+		});
+	}
+};
+//#endregion
+export { r as ScrollStateController };

package/dist/size.d.ts

@@ -0,0 +1,47 @@
+import type { LitElement } from 'lit';
+type Constructor<T = object> = new (...args: any[]) => T;
+/**
+ * The mixin's surface, as a `declare class` for the same TS4094 reason
+ * {@link VfPositionedInterface} states: TypeScript cannot name the
+ * anonymous class a mixin returns when emitting declarations. Keep it in sync
+ * with the implementation below.
+ */
+export declare abstract class VfSizedInterface extends LitElement {
+    width?: number | null;
+    height?: number | null;
+}
+/**
+ * A declared box — `width`/`height` in whole system px, the size half of
+ * {@link VfPositioned}'s DITL story: a resource stated each item's rectangle,
+ * position *and* extent, in the window's own coordinates.
+ *
+ * It goes only on the components whose box is *stated* rather than governed
+ * by content: the two static-text elements (`vf-paragraph`, where width is
+ * the measure the copy wraps to; `vf-label`, a caption column's shared
+ * width), `vf-stack` (a panel's declared box) and `vf-window` (the WIND
+ * rect). The rest of the kit is content-governed on purpose — a push button
+ * is as wide as its label, a popup hugs its widest option (docs/LAYOUT.md, "the
+ * content governs the box") — and the components that *transform* a declared
+ * size keep their own properties: `vf-desktop` adds the bezel around it,
+ * `vf-dialog` sizes the top-layer box, `vf-img` negotiates with the art's
+ * natural size.
+ *
+ * Mechanics, mirroring the position mixin: each declared dimension goes on
+ * the host's own inline style as `calc(var(--vf-scale, 1) * Npx)` — live
+ * against the display, resolved at paint time — and a whole number keeps the
+ * box on the device-pixel grid by construction (the size half of layout
+ * contract rule 3, the one grid snapping deliberately doesn't cover).
+ * Unsetting a dimension removes the declaration and that axis returns to
+ * layout.
+ *
+ * The writing rides a {@link ReactiveController} for the lifecycle reason
+ * position.ts records (components override `updated()` without calling
+ * `super.updated()`, which would shadow a mixin-level override), and it
+ * re-applies **only when the property values changed** — the `vf-window`
+ * grow-box rule: a resize writes resolved px into the same inline
+ * `width`/`height` without touching these properties, and re-asserting the
+ * authored size on an unrelated render would snap a resized window back.
+ * Setting the property again is the deliberate way to re-size it.
+ */
+export declare const VfSized: <T extends Constructor<LitElement>>(Base: T) => Constructor<VfSizedInterface> & T;
+export {};

package/dist/size.js

@@ -0,0 +1,30 @@
+import { sysLength as e } from "./scale.js";
+import t from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { property as n } from "lit/decorators.js";
+//#region src/size.ts
+var r = (e) => {
+	class r extends e {
+		constructor(...e) {
+			super(...e), new i(this);
+		}
+	}
+	return t([n({ type: Number })], r.prototype, "width", void 0), t([n({ type: Number })], r.prototype, "height", void 0), r;
+}, i = class {
+	#e;
+	#t = {
+		width: null,
+		height: null
+	};
+	constructor(e) {
+		this.#e = e, e.addController(this);
+	}
+	hostUpdated() {
+		this.#n("width"), this.#n("height");
+	}
+	#n(t) {
+		let n = this.#e[t] ?? null;
+		n !== this.#t[t] && (this.#t[t] = n, n === null ? this.#e.style.removeProperty(t) : this.#e.style[t] = e(n));
+	}
+};
+//#endregion
+export { r as VfSized };

package/dist/styles/base.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The 1-bit style recipes — the barrel every component and the package root
+ * import from. Each recipe lives in its own module under `./recipes/`; this
+ * file re-exports them so `import { vfBase, vfField } from '../styles/base.js'`
+ * keeps working and the public API is one name list.
+ *
+ * Why the recipes are split across modules rather than declared here: a bundler
+ * cannot drop an unused `export const x = css\`…\`` from within a module. The
+ * `/* @__PURE__ *\/` annotation that would let it is honored on *call*
+ * expressions only — Lit's `css` is a *tagged template*, and esbuild (like
+ * Rollup) ignores the annotation there. Whole-module elimination is the one
+ * granularity every bundler handles, so a module boundary is the only place a
+ * recipe can be dropped at. Before the split, importing a single recipe pulled
+ * all 24 KB of them plus both font files; a `vf-button` now carries the four it
+ * composes.
+ *
+ * That is also why the two `@font-face` registrations sit beside the two face
+ * recipes (`./recipes/body-face.ts`, `./recipes/display-face.ts`) instead of at
+ * the top of this file — a component that sets no chrome type should not ship
+ * the Chicago face.
+ *
+ * Adding a recipe: give it a module here (or add it to the one whose recipes it
+ * is always composed with), then re-export it below and from `src/index.ts`.
+ */
+export { vfBodyDecls } from './recipes/body-face.js';
+export { vfDisplay, vfDisplayDecls } from './recipes/display-face.js';
+export { vfBase } from './recipes/host.js';
+export { vfStaticText } from './recipes/static-text.js';
+export { vfDots, vfStripes } from './recipes/pattern.js';
+export { vfHardShadowDecls } from './recipes/shadow.js';
+export { vfChromeFrame, vfModalFrame, vfPanel } from './recipes/surface.js';
+export { vfTitleBar, vfWindowWidgets } from './recipes/title-bar.js';
+export { vfFocus, vfFocusRing, vfFocusUnderline } from './recipes/focus.js';
+export { vfToggle } from './recipes/toggle.js';
+export { vfField } from './recipes/field.js';
+export { vfScrollRail } from './recipes/scroll-rail.js';
+export { TILE_LATTICE, tileImage, tileRaster, tileRects, tileSpan, vfTileMaskSize, vfTileSize, } from './recipes/tile.js';
+export type { TileRect } from './recipes/tile.js';

package/dist/styles/body-font.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The CSS `font-family` name the face is registered under — the default of
+ * `--vf-font-family`, and the `familyName` inside the woff2 itself.
+ */
+export declare const VF_BODY_FAMILY = "VF Body";
+/** Register the body face on the document once (idempotent). */
+export declare function registerBodyFace(): void;

package/dist/styles/body-font.js

@@ -0,0 +1,9 @@
+import { PIXEL_GRID_METRICS as e, registerEmbeddedFont as t } from "./register-embedded-font.js";
+//#region src/styles/body-font.ts
+var n = "VF Body", r = "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";
+function i() {
+	t(n, r, e);
+}
+i();
+//#endregion
+export { n as VF_BODY_FAMILY, i as registerBodyFace };

package/dist/styles/display-font.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The CSS `font-family` name the face is registered under — the default of
+ * `--vf-font-family-display`, and the `familyName` inside the woff2 itself.
+ */
+export declare const VF_DISPLAY_FAMILY = "VF Display";
+/** Register the display face on the document once (idempotent). */
+export declare function registerDisplayFace(): void;

package/dist/styles/display-font.js

@@ -0,0 +1,9 @@
+import { PIXEL_GRID_METRICS as e, registerEmbeddedFont as t } from "./register-embedded-font.js";
+//#region src/styles/display-font.ts
+var n = "VF Display", r = "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";
+function i() {
+	t(n, r, e);
+}
+i();
+//#endregion
+export { n as VF_DISPLAY_FAMILY, i as registerDisplayFace };

package/dist/styles/recipes/body-face.d.ts

@@ -0,0 +1,14 @@
+import '../body-font.js';
+/**
+ * The three declarations that put text on the *body* face — the family via
+ * --vf-font-family, 16px so its 1024-upm pixel grid lands exactly, and the
+ * body smoothing token. The mirror image of {@link vfDisplayDecls}, and the
+ * body face's single definition: {@link vfBase} applies it to every host, and
+ * the places that switch *back* to it from the display face
+ * (vf-label/vf-paragraph's `face="body"`) compose this rather than repeating
+ * the family stack.
+ *
+ * 'VF Body' is the embedded face (../body-font.ts); 'Geneva' after it is the
+ * installed one a real Mac already has. See {@link vfDisplayDecls}.
+ */
+export declare const vfBodyDecls: import("lit").CSSResult;

package/dist/styles/recipes/body-face.js

@@ -0,0 +1,6 @@
+import "../body-font.js";
+import { unsafeCSS as e } from "lit";
+//#region src/styles/recipes/body-face.ts
+var t = e("\n  font-family: var(\n    --vf-font-family,\n    'VF Body',\n    'Geneva',\n    'Helvetica Neue',\n    Helvetica,\n    Arial,\n    sans-serif\n  );\n  font-size: calc(var(--vf-scale, 1) * var(--vf-font-size, 16px));\n  -webkit-font-smoothing: var(--vf-font-smoothing, antialiased);\n");
+//#endregion
+export { t as vfBodyDecls };

package/dist/styles/recipes/display-face.d.ts

@@ -0,0 +1,23 @@
+import '../display-font.js';
+/**
+ * The three declarations that switch text to the display face — the family via
+ * --vf-font-family-display, 16px so the 1024-upm pixel grid lands exactly, and
+ * grayscale smoothing off for crisp 1-bit edges. Each is tokenized for
+ * retheming. Compose onto a rule for one chrome element, or use
+ * {@link vfDisplay} to apply to the whole host.
+ *
+ * 'VF Display' is the embedded face (../display-font.ts). Everything after it
+ * is an *installed* face the reader might have — a real Mac has Chicago and
+ * Charcoal — so the stack degrades toward the same shapes on a machine that
+ * already owns them, and toward the platform sans on one that doesn't.
+ */
+export declare const vfDisplayDecls: import("lit").CSSResult;
+/**
+ * Display type applied to the whole host. Compose into any
+ * component whose text is entirely "chrome": buttons, menus, menu items,
+ * checkbox/radio labels, popup menus. Components that mix a chrome title with
+ * body content (windows, dialogs, fieldsets) instead apply {@link vfDisplayDecls}
+ * to just their title/legend element, leaving slotted body copy on the vfBase
+ * body face.
+ */
+export declare const vfDisplay: import("lit").CSSResult;

package/dist/styles/recipes/display-face.js

@@ -0,0 +1,10 @@
+import "../display-font.js";
+import { css as e, unsafeCSS as t } from "lit";
+//#region src/styles/recipes/display-face.ts
+var n = t("\n  font-family: var(\n    --vf-font-family-display,\n    'VF Display',\n    'Chicago',\n    'ChicagoFLF',\n    'Charcoal',\n    'Geneva',\n    'Helvetica Neue',\n    Helvetica,\n    Arial,\n    sans-serif\n  );\n  font-size: calc(var(--vf-scale, 1) * var(--vf-font-size-display, 16px));\n  -webkit-font-smoothing: var(--vf-font-smoothing-display, none);\n"), r = e`
+  :host {
+    ${n}
+  }
+`;
+//#endregion
+export { r as vfDisplay, n as vfDisplayDecls };

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

@@ -0,0 +1,20 @@
+/**
+ * The System 7 editable-field skin (SPEC §1/§5): a white well with a 1px black
+ * border, no corner radius, Chicago-style display type, and the kit's dashed
+ * keyboard-focus rule under the well (no dotted ring). Add the `vf-field`
+ * class to the inner native `<input>`/`<textarea>` and wrap it in a
+ * `.vf-field-well` element; the host supplies layout (width, height, padding)
+ * around it, and `VfTextControlBase` supplies the `.vf-focus-rule` class that
+ * turns the rule on. Shared by vf-text-field, vf-text-area and
+ * vf-number-field so the well, focus and disabled treatment stay identical
+ * across all three.
+ *
+ * Why the wrapper: the rule is a pseudo-element, and a replaced element
+ * generates none — neither `<input>` nor `<textarea>` can draw its own
+ * `::after`. Hanging it off the host instead would leave it behind when grid
+ * snapping moves the field, since the correction lands on `.vf-snap` inside the
+ * shadow root and never on the host. The wrapper is both anchors at once: it
+ * carries `vf-snap`, and it boxes the well exactly, so the rule spans the well
+ * and measures its offset from the well's own bottom edge.
+ */
+export declare const vfField: import("lit").CSSResult;