vintage-frames 0.1.0

package/dist/components/vf-number-field.d.ts

@@ -0,0 +1,60 @@
+import { VfTextControlBase } from '../text-control.js';
+declare const VfNumberField_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof VfTextControlBase;
+/**
+ * `<vf-number-field>` — a System 7 numeric entry field paired with the classic
+ * "little arrows" stepper.
+ *
+ * A form-associated wrapper around a native `<input>` (white well, 1px black
+ * border) plus the pixel-exact little-arrows control from the Classic Macintosh
+ * UI Kit sprite. Clicking (or press-and-holding, with autorepeat) an arrow
+ * steps the value by `step`, clamped to `min`/`max`; the held arrow fills solid
+ * black, matching the kit's hollow→filled press convention. Keyboard focus
+ * draws the kit's dashed rule under the well alone — the stepper is beside the
+ * text, not part of it. The field is a `spinbutton`: ArrowUp/ArrowDown step, Home/End
+ * jump to min/max. The shared field skin lives in `vfField`; the value/form
+ * scaffolding in {@link VfTextControlBase}.
+ *
+ * @fires vf-input - On every keystroke. `detail: { value, valueAsNumber }`.
+ * @fires vf-change - On commit or step. `detail: { value, valueAsNumber }`.
+ * @fires input - The native event: the inner input's own on a keystroke
+ *   (composed, crosses the boundary itself), dispatched from the host on a
+ *   step — a native number input's spinner fires it per click too.
+ * @fires change - The native commit event, dispatched from the host on a
+ *   typed commit and on every step, as a native spinner does.
+ *
+ * The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`,
+ * `maxlength`, `spellcheck`, `autocapitalize` — are forwarded from the host
+ * onto the inner input; unset, `inputmode` stays the numeric keypad's
+ * `decimal` and `autocomplete` stays `off`.
+ *
+ * @csspart input - The inner native `<input>`.
+ * @csspart stepper - The little-arrows control.
+ * @cssprop [--vf-control-height=22px] - text fields — `vf-text-field`,
+ *   `vf-text-area`, the `vf-number-field` well
+ * @cssprop [--vf-number-field-width=4em] - width of `vf-number-field`'s input,
+ *   in its own text (an em, not a system px length — it sizes to the digits)
+ * @cssprop [--vf-field-placeholder=#767676] - placeholder text in the editable
+ *   fields — kept off `--vf-disabled`: a placeholder sits in an *enabled* well
+ *   and holds AA contrast, where the disabled gray is exempt
+ */
+export declare class VfNumberField extends VfNumberField_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Minimum allowed value (inclusive). Omit for no lower bound. */
+    min?: number;
+    /** Maximum allowed value (inclusive). Omit for no upper bound. */
+    max?: number;
+    /** Increment applied per step / arrow press. Also sets the value's precision. */
+    step: number;
+    /** Which arrow is currently held (drives the solid pressed glyph). */
+    private pressed;
+    private input;
+    disconnectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-number-field': VfNumberField;
+    }
+}
+export {};

package/dist/components/vf-number-field.js

@@ -0,0 +1,248 @@
+import { vfElement as e } from "../define.js";
+import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as n } from "../position.js";
+import { vfBase as r } from "../styles/recipes/host.js";
+import { vfField as i } from "../styles/recipes/field.js";
+import { emitNative as a } from "../events.js";
+import { STEPPER as o, STEPPER_DOWN_FILL as s, STEPPER_UP_FILL as c } from "../glyphs.js";
+import { VfTextControlBase as l } from "../text-control.js";
+import { decimalsOf as u } from "../number.js";
+import { css as d, html as f, nothing as p } from "lit";
+import { property as m, query as h, state as g } from "lit/decorators.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+import { live as v } from "lit/directives/live.js";
+//#region src/components/vf-number-field.ts
+var y = class extends n(l) {
+	constructor(...e) {
+		super(...e), this.step = 1, this.pressed = null, this.#l = (e) => {
+			if (this.isDisabled || this.readonly) return;
+			let t = e.currentTarget.classList.contains("up") ? 1 : -1;
+			e.preventDefault();
+			try {
+				e.currentTarget.setPointerCapture(e.pointerId);
+			} catch {}
+			this.input?.focus(), this.pressed = t > 0 ? "up" : "down", this.#a(t), this.#s(t);
+		}, this.#u = () => {
+			this.#c(), this.pressed = null;
+		}, this.#d = (e) => {
+			if (this.isSubmitEnter(e)) {
+				this.requestImplicitSubmit();
+				return;
+			}
+			if (!(this.isDisabled || this.readonly) && !(e.isComposing || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) switch (e.key) {
+				case "ArrowUp":
+					e.preventDefault(), this.#a(1);
+					break;
+				case "ArrowDown":
+					e.preventDefault(), this.#a(-1);
+					break;
+				case "Home":
+					this.min != null && (e.preventDefault(), this.#i(this.min));
+					break;
+				case "End":
+					this.max != null && (e.preventDefault(), this.#i(this.max));
+					break;
+				case " ": e.preventDefault();
+			}
+		}, this.#f = (e) => {
+			this.value = e.target.value, this.#o("vf-input");
+		}, this.#p = (e) => {
+			let t = e.target.value, n = parseFloat(t);
+			this.value = Number.isNaN(n) ? t : String(Number(this.#r(n).toFixed(u(this.step)))), this.#o("vf-change"), a(this, "change");
+		};
+	}
+	static {
+		this.styles = [
+			r,
+			i,
+			d`
+      :host {
+        display: inline-flex;
+        /* NOT stretch: that sized the well to the stepper's 25px, making this
+           the one field that ignored --vf-control-height (see the input rule). */
+        align-items: flex-start;
+        gap: calc(var(--vf-scale, 1) * 3px);
+      }
+      /* The flex item is the wrapper, not the input: it boxes the well exactly,
+         so the focus rule spans the well and stops short of the stepper beside
+         it. Kept a flex container of its own so the input's own em width still
+         sets the base size — and the input still grows with it when a consumer
+         widens the host. */
+      .vf-field-well {
+        display: flex;
+        flex: 1 1 auto;
+        /* Shrinkable, or the stepper leaves the host box: min-width's auto
+           floor here is the input's definite 4em width, so a host narrowed to
+           4em or less pushed gap + stepper past its own border box (under
+           whatever sits beside it) instead of narrowing the well. 0 hands the
+           floor to the input's own min-width. */
+        min-width: 0;
+        /* The 3px difference is odd, so centering the well would land it on a
+           half pixel and fringe at every scale. Bias it one whole pixel down
+           (1 above / 2 below) — optically centered, still on the device grid. */
+        margin-top: calc(var(--vf-scale, 1) * 1px);
+      }
+      input {
+        flex: 1 1 auto;
+        width: var(--vf-number-field-width, 4em);
+        min-width: 2em;
+        /* The reference sheets measure text fields at 22px and the little-arrows
+           sprite at 15×25 — the well and the stepper are authentically different
+           heights, so the well sits on the shared control token and the
+           sprite keeps its native 1:1 size (the host ends up stepper-tall).
+           min-, not height, as in vf-text-field: the default line box exactly
+           fills it, and a user stylesheet raising line-height grows the well
+           instead of clipping the digits. */
+        min-height: calc(var(--vf-scale, 1) * var(--vf-control-height, 22px));
+        padding: 0 calc(var(--vf-scale, 1) * 6px);
+        text-align: right;
+      }
+
+      /* The little-arrows stepper, drawn at its native 15×25 (1:1, crisp). */
+      .stepper {
+        position: relative;
+        flex: none;
+        width: calc(var(--vf-scale, 1) * 15px);
+        height: calc(var(--vf-scale, 1) * 25px);
+        /* Stays solid black even when the field is disabled. */
+        color: var(--vf-black, #000);
+        cursor: var(--vf-cursor, default);
+      }
+      .stepper svg {
+        display: block;
+        width: calc(var(--vf-scale, 1) * 15px);
+        height: calc(var(--vf-scale, 1) * 25px);
+      }
+      .fill {
+        display: none;
+      }
+      .fill.on {
+        display: inline;
+      }
+      /* Transparent hit targets over the top/bottom halves. */
+      .hit {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 50%;
+        touch-action: none;
+      }
+      .hit.up {
+        top: 0;
+      }
+      .hit.down {
+        bottom: 0;
+      }
+      :host([disabled]) .hit,
+      :host([readonly]) .hit {
+        pointer-events: none;
+      }
+    `
+		];
+	}
+	#e;
+	#t;
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#c();
+	}
+	#n() {
+		return parseFloat(this.value);
+	}
+	#r(e) {
+		return this.min != null && e < this.min ? this.min : this.max != null && e > this.max ? this.max : e;
+	}
+	#i(e) {
+		let t = String(Number(this.#r(e).toFixed(u(this.step))));
+		t !== this.value && (this.value = t, this.#o("vf-change"), a(this, "input"), a(this, "change"));
+	}
+	#a(e) {
+		if (this.isDisabled || this.readonly) return;
+		let t = this.#n(), n = Number.isNaN(t) ? this.min ?? 0 : t + e * this.step;
+		this.#i(n);
+	}
+	#o(e) {
+		this.emitValue(e, {
+			value: this.value,
+			valueAsNumber: this.#n()
+		});
+	}
+	#s(e) {
+		this.#c(), this.#e = window.setTimeout(() => {
+			this.#t = window.setInterval(() => this.#a(e), 60);
+		}, 300);
+	}
+	#c() {
+		this.#e !== void 0 && window.clearTimeout(this.#e), this.#t !== void 0 && window.clearInterval(this.#t), this.#e = this.#t = void 0;
+	}
+	#l;
+	#u;
+	#d;
+	#f;
+	#p;
+	render() {
+		let e = this.isDisabled, t = this.#n();
+		return f`
+      <div class=${this.wellClass}>
+        <input
+          part="input"
+          class="vf-field"
+          type="text"
+          inputmode=${this.getAttribute("inputmode") ?? "decimal"}
+          role="spinbutton"
+          autocomplete=${this.getAttribute("autocomplete") ?? "off"}
+          enterkeyhint=${this.forwardedAttr("enterkeyhint")}
+          maxlength=${this.forwardedAttr("maxlength")}
+          spellcheck=${this.forwardedAttr("spellcheck")}
+          autocapitalize=${this.forwardedAttr("autocapitalize")}
+          aria-label=${this.label || this.hostLabel || p}
+          aria-describedby=${this.describedBy}
+          aria-required=${this.required ? "true" : p}
+          aria-invalid=${this.validity.valid ? p : "true"}
+          aria-valuenow=${Number.isNaN(t) ? p : t}
+          aria-valuemin=${this.min ?? p}
+          aria-valuemax=${this.max ?? p}
+          .value=${v(this.value)}
+          placeholder=${this.placeholder}
+          ?disabled=${e}
+          ?readonly=${this.readonly}
+          @input=${this.#f}
+          @change=${this.#p}
+          @keydown=${this.#d}
+        />
+      </div>
+      <span class="stepper vf-snap" part="stepper">
+        <svg viewBox="0 0 15 25" shape-rendering="crispEdges" fill="currentColor" aria-hidden="true">
+          <path d=${o.d}></path>
+          <path class=${_({
+			fill: !0,
+			on: this.pressed === "up"
+		})} d=${c.d}></path>
+          <path class=${_({
+			fill: !0,
+			on: this.pressed === "down"
+		})} d=${s.d}></path>
+        </svg>
+        <span
+          class="hit up"
+          aria-hidden="true"
+          @pointerdown=${this.#l}
+          @pointerup=${this.#u}
+          @pointercancel=${this.#u}
+          @lostpointercapture=${this.#u}
+        ></span>
+        <span
+          class="hit down"
+          aria-hidden="true"
+          @pointerdown=${this.#l}
+          @pointerup=${this.#u}
+          @pointercancel=${this.#u}
+          @lostpointercapture=${this.#u}
+        ></span>
+      </span>
+      ${this.renderDescription()}
+    `;
+	}
+};
+t([m({ type: Number })], y.prototype, "min", void 0), t([m({ type: Number })], y.prototype, "max", void 0), t([m({ type: Number })], y.prototype, "step", void 0), t([g()], y.prototype, "pressed", void 0), t([h("input")], y.prototype, "input", void 0), y = t([e("vf-number-field")], y);
+//#endregion
+export { y as VfNumberField };

package/dist/components/vf-option.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+/**
+ * `<vf-option>` — a single choice inside a `<vf-select>` popup menu.
+ *
+ * A light-DOM child of `<vf-select>` (slotted into the popup panel). Renders
+ * its slotted label at menu-item metrics (16px row — the pill's content height,
+ * so a selected option overlays the closed pill exactly; the left checkmark gutter is
+ * `--vf-select-gutter`, shared with the closed control's left inset so the value
+ * doesn't shift on open). The parent select manages `selected` and the transient
+ * `active` highlight, and slots this element into its popup panel.
+ *
+ * The host carries `role="option"` with `aria-selected`/`aria-disabled`.
+ *
+ * @csspart check - The ✓ checkmark shown in the left gutter when selected.
+ * @cssprop [--vf-popup-height=18px] - `vf-select` pill (border box; its 1px
+ *   hard shadow makes the sheet's 157×19 ink box)
+ * @cssprop [--vf-select-gutter=16px] - checkmark column: `vf-select` left inset
+ *   / `vf-option` + `vf-menu-item` ✓ column (shared so the value doesn't shift
+ *   on open)
+ */
+export declare class VfOption extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    private readonly scale;
+    /**
+     * Submitted/compared value of this option. Falls back to the trimmed text
+     * content when empty (like a native `<option>`).
+     */
+    value: string;
+    /** Disables the option: gray text, not selectable. */
+    disabled: boolean;
+    /** Whether this option is the select's current value. Managed by the parent. */
+    selected: boolean;
+    /**
+     * Transient highlight (hover / keyboard cursor) — full-row inversion.
+     * Managed by the parent `<vf-select>`; not part of the authoring API.
+     */
+    active: boolean;
+    constructor();
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-option': VfOption;
+    }
+}

package/dist/components/vf-option.js

@@ -0,0 +1,119 @@
+import { vfElement as e } from "../define.js";
+import { ScaleController as t } from "../scale.js";
+import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { vfDisplay as r } from "../styles/recipes/display-face.js";
+import { vfBase as i } from "../styles/recipes/host.js";
+import { CHECKMARK as a, glyphSvg as o } from "../glyphs.js";
+import { LitElement as s, css as c, html as l } from "lit";
+import { property as u } from "lit/decorators.js";
+//#region src/components/vf-option.ts
+var d = class extends s {
+	static {
+		this.styles = [
+			i,
+			r,
+			c`
+      :host {
+        position: relative;
+        display: flex;
+        align-items: center;
+        /* Row height = the pill's CONTENT height (--vf-popup-height 18px minus
+           its two 1px borders), so the selected row's text and whitespace match
+           the closed pill exactly when the open list overlays it. Derived, not
+           a literal, so re-theming the pill height moves the rows with it. */
+        height: calc(var(--vf-scale, 1) * (var(--vf-popup-height, 18px) - 2px));
+        /* Lock the line box to the row box. vfDisplay's 1.25 line-height is
+           taller than a 16px row (20px), and align-items:center splits the
+           excess above AND below — so every row's text spilled 2px past its
+           own box and the LAST row's spill pushed the panel into overflow,
+           putting a scrollbar on every popup that should never have one. The
+           ink doesn't move: a 16px line box centred in a 16px row has the same
+           centre as a 20px one. Derived from the same expression as the height
+           above so a re-themed pill can't reintroduce the mismatch. */
+        line-height: calc(var(--vf-scale, 1) * (var(--vf-popup-height, 18px) - 2px));
+        /* Left gutter (--vf-select-gutter) holds the ✓ and matches the closed
+           vf-select control's left inset, so a selected option's text lands at
+           the same x whether the popup is closed or open. */
+        padding: 0 calc(var(--vf-scale, 1) * 20px) 0
+          calc(var(--vf-scale, 1) * var(--vf-select-gutter, 16px));
+        background: var(--vf-white, #fff);
+        color: var(--vf-black, #000);
+        white-space: nowrap;
+        cursor: var(--vf-cursor, default);
+        outline: none;
+      }
+      /* Hover/keyboard highlight — classic full-row inversion. The parent
+         vf-select drives [active] for both pointer and keyboard so only one
+         row is ever highlighted at a time. */
+      :host([active]) {
+        /* Forced colors: exempt the inverted row from the mode's text
+           backplate, which would land a Canvas slab on the highlight bar —
+           see vf-list-item's forced-colors note. The pair is already the
+           user's own via the vfBase token remap. */
+        @media (forced-colors: active) {
+          forced-color-adjust: none;
+        }
+        background: var(--vf-highlight, #000);
+        color: var(--vf-highlight-text, #fff);
+      }
+      :host([disabled]) {
+        background: var(--vf-white, #fff);
+        color: var(--vf-disabled, #c0c0c0);
+      }
+      /* The ✓ is pinned a whole 3px in from the row's left and top rather than
+         centred in the gutter. Centring a 9px glyph in the 16px column (and in
+         the 16px row) lands it on a half pixel — 3.5 authored px, i.e. 10.5
+         device px at the default 3× — which fringes at every scale. Menus.png
+         biases it up-left exactly this way: ink 3px inside the row on both
+         axes, leaving the wider gap on the right/bottom. */
+      .check {
+        position: absolute;
+        left: calc(var(--vf-scale, 1) * 3px);
+        top: calc(var(--vf-scale, 1) * 3px);
+        display: block;
+        visibility: hidden;
+        color: inherit;
+      }
+      /* Native 9×9 (1:1, crisp). */
+      .check svg {
+        display: block;
+        width: calc(var(--vf-scale, 1) * 9px);
+        height: calc(var(--vf-scale, 1) * 9px);
+      }
+      :host([selected]) .check {
+        visibility: visible;
+      }
+    `
+		];
+	}
+	#e;
+	constructor() {
+		super(), this.scale = new t(this), this.value = "", this.disabled = !1, this.selected = !1, this.active = !1, this.#e = this.attachInternals(), this.#e.role = "option";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
+	}
+	updated(e) {
+		e.has("selected") && (this.#e.ariaSelected = this.selected ? "true" : "false"), e.has("disabled") && (this.#e.ariaDisabled = this.disabled ? "true" : null);
+	}
+	render() {
+		return l`
+      <span class="check" part="check" aria-hidden="true"
+        >${o(a, "checkmark")}</span
+      >
+      <slot></slot>
+    `;
+	}
+};
+n([u()], d.prototype, "value", void 0), n([u({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), n([u({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "selected", void 0), n([u({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "active", void 0), d = n([e("vf-option")], d);
+//#endregion
+export { d as VfOption };

package/dist/components/vf-paragraph.d.ts

@@ -0,0 +1,73 @@
+import { LitElement } from 'lit';
+declare const VfParagraph_base: (new (...args: any[]) => import("../size.js").VfSizedInterface) & (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-paragraph>` — a paragraph of copy on the kit's body face and grid.
+ *
+ * The installer's welcome text, a dialog's explanation, an article's prose:
+ * anything a page would otherwise set with a `<p>` and hope the leading landed
+ * somewhere sensible. What it adds over that `<p>`:
+ *
+ * - the **Geneva body face** by default (`face="display"` switches to
+ *   the Chicago-style chrome face);
+ * - a **whole-system-pixel line box at the face's native pitch** —
+ *   `--vf-paragraph-line-height`: 12px for the body face (Geneva 9's own
+ *   strike line) and 16px under `face="display"` (Chicago 12's — ascent 12 +
+ *   descent 3 + leading 1, the pitch a real dialog wrapped its copy on).
+ *   Whole pixels are the point of the component: line boxes are the single
+ *   biggest source of off-grid layout, because a ratio resolves to whatever
+ *   it resolves to (`1.65 × 17px = 28.05px`) and every line of prose nudges
+ *   everything after it further off the device-pixel grid, smearing 1-bit
+ *   borders and bitmap glyph stems (docs/SIZING.md rule 2). A
+ *   whole-pixel line box accumulates whole offsets;
+ * - its own {@link GridSnapController}, so it holds its own origin once the
+ *   page opts in with `applyGridSnap()`;
+ * - a **declared box** when the layout wants one — `width`/`height` in whole
+ *   system px ({@link VfSized}). In flow a paragraph takes its container's
+ *   width, which is usually right; a *placed* one (`top`/`left`) shrink-wraps
+ *   its longest line instead — a fractional glyph-run width, wrapped wherever
+ *   the parent's edge happens to fall — so a DITL-style layout states the
+ *   measure the copy wraps to, whole and on the grid.
+ *
+ * The shadow root renders a real `<p>`, so the copy keeps paragraph semantics
+ * for assistive tech, and — unlike the kit's chrome — the text is selectable.
+ * There is no margin: per SPEC §2 a component adds nothing outside its own box,
+ * so paragraph spacing is the page's (a `gap` on the column, or a margin on the
+ * host — kept a whole number of pixels, like everything else in the contract).
+ *
+ * @slot - The paragraph copy.
+ * @csspart paragraph - The inner `<p>`.
+ * @cssprop --vf-paragraph-line-height - This paragraph kind's own line box,
+ *   in system px. Unset (the default) the box follows the face tokens below;
+ *   set, it overrides both faces for paragraphs alone. Keep any override a
+ *   whole *even* number — a ratio is what puts a page off the grid in the
+ *   first place, and half the difference to the 16px em is half-leading, so
+ *   an odd value lands the baseline on a half pixel.
+ * @cssprop --vf-line-height - The body face's native line (default `12px`,
+ *   Geneva 9's) — the face-level knob: retheming the body face to another
+ *   strike states this alongside `--vf-font-family` / `--vf-font-size`.
+ * @cssprop --vf-line-height-display - The display face's native line
+ *   (default `16px`, Chicago 12's) — the display retheme's third number.
+ */
+export declare class VfParagraph extends VfParagraph_base {
+    static styles: import("lit").CSSResult[];
+    /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
+    private readonly scale;
+    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    private readonly gridSnap;
+    /**
+     * Which embedded face to set the copy in — `'body'` (Geneva, the
+     * default) or `'display'` (the Chicago-style chrome face, for copy that is
+     * really dialog chrome). Applied by `vfStaticText`; declared here so it types
+     * and reflects.
+     */
+    face?: 'display' | 'body';
+    /** Greys the copy to `--vf-disabled` — System 7's dimmed static text. */
+    dim: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-paragraph': VfParagraph;
+    }
+}
+export {};

package/dist/components/vf-paragraph.js

@@ -0,0 +1,66 @@
+import { vfElement as e } from "../define.js";
+import { ScaleController as t } from "../scale.js";
+import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as r } from "../position.js";
+import { vfBase as i } from "../styles/recipes/host.js";
+import { vfStaticText as a } from "../styles/recipes/static-text.js";
+import { GridSnapController as o } from "../grid-snap.js";
+import { VfSized as s } from "../size.js";
+import { LitElement as c, css as l, html as u } from "lit";
+import { property as d } from "lit/decorators.js";
+//#region src/components/vf-paragraph.ts
+var f = class extends s(r(c)) {
+	constructor(...e) {
+		super(...e), this.scale = new t(this), this.gridSnap = new o(this), this.dim = !1;
+	}
+	static {
+		this.styles = [
+			i,
+			a,
+			l`
+      :host {
+        display: block;
+        /* The body face is already vfBase's host default (vfStaticText's
+           face="display" overrides it); what this component fixes is the line
+           box — whole system px, never a ratio, at the face's native pitch.
+           The pitch is the face's, so it reads the face token
+           (--vf-line-height, the retheme knob that travels with
+           --vf-font-family/--vf-font-size), under a per-component override.
+           12px is Geneva 9's strike line: the 16px em centers into it with
+           −2px half-leading (baseline at 10), exactly as vf-icon's name plate
+           does, and the strike's 10+2 ink fills the box edge to edge. */
+        line-height: calc(
+          var(--vf-scale, 1) *
+            var(--vf-paragraph-line-height, var(--vf-line-height, 12px))
+        );
+        /* Prose, not chrome: put back the text selection vfBase suppresses. */
+        user-select: text;
+        -webkit-user-select: text;
+      }
+      /* Chrome copy wraps on Chicago 12's native line: ascent 12 + descent 3
+         + leading 1 = 16 — zero half-leading on the 16px em, 7 blank rows
+         between a baseline and the caps under it, as a real alert set it.
+         Same specificity as vfStaticText's face rule; this sheet is later,
+         so the pitch follows the face. */
+      :host([face='display']) {
+        line-height: calc(
+          var(--vf-scale, 1) *
+            var(--vf-paragraph-line-height, var(--vf-line-height-display, 16px))
+        );
+      }
+      p {
+        margin: 0;
+      }
+    `
+		];
+	}
+	render() {
+		return u`<p class="vf-snap" part="paragraph"><slot></slot></p>`;
+	}
+};
+n([d({ reflect: !0 })], f.prototype, "face", void 0), n([d({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "dim", void 0), f = n([e("vf-paragraph")], f);
+//#endregion
+export { f as VfParagraph };