vintage-frames 0.1.0

package/dist/components/vf-separator.js

@@ -0,0 +1,55 @@
+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 { GridSnapController as a } from "../grid-snap.js";
+import { LitElement as o, css as s, html as c } from "lit";
+import { property as l } from "lit/decorators.js";
+//#region src/components/vf-separator.ts
+var u = class extends r(o) {
+	static {
+		this.styles = [i, s`
+      :host {
+        display: block;
+        height: calc(var(--vf-scale, 1) * 1px);
+      }
+      :host([vertical]) {
+        width: calc(var(--vf-scale, 1) * 1px);
+        height: auto;
+        align-self: stretch;
+      }
+      /* The rule ink lives on an inner element rather than a host border so it
+         can ride the snap offset (see .vf-snap in base.ts). */
+      .rule {
+        width: 100%;
+        height: 100%;
+        border-top: calc(var(--vf-scale, 1) * 1px)
+          var(--vf-separator-style, solid)
+          var(--vf-separator-color, var(--vf-black, #000));
+      }
+      :host([vertical]) .rule {
+        border-top: none;
+        border-left: calc(var(--vf-scale, 1) * 1px)
+          var(--vf-separator-style, solid)
+          var(--vf-separator-color, var(--vf-black, #000));
+      }
+    `];
+	}
+	#e;
+	constructor() {
+		super(), this.scale = new t(this), this.gridSnap = new a(this), this.vertical = !1, this.#e = this.attachInternals(), this.#e.role = "separator";
+	}
+	updated(e) {
+		e.has("vertical") && (this.#e.ariaOrientation = this.vertical ? "vertical" : null);
+	}
+	render() {
+		return c`<div class="rule vf-snap"></div>`;
+	}
+};
+n([l({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "vertical", void 0), u = n([e("vf-separator")], u);
+//#endregion
+export { u as VfSeparator };

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

@@ -0,0 +1,80 @@
+import type { PropertyValues } from 'lit';
+import { VfFormControl } from '../form-control.js';
+declare const VfSlider_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof VfFormControl;
+/**
+ * `<vf-slider>` — a horizontal 1-bit slider.
+ *
+ * Not a historically shipped System 7 control: it reverse-adapts the later
+ * Mac OS slider into the library's solid-black, pixel-crisp 1-bit style. A
+ * rounded capsule rail fills solid black from the left up to a shield-shaped
+ * drag handle (the {@link SLIDER_THUMB} sprite) and runs hollow after it. The
+ * rail is regenerated as a whole-pixel SVG on every resize so it stays crisp at
+ * any width, and the thumb snaps to integer pixels so the sprite never blurs.
+ *
+ * Form-associated: submits `value` under `name` and restores it on form reset.
+ * Drag or click the track to set the value; focus it and use the arrow keys
+ * (Home/End jump to min/max, PageUp/PageDown move in bigger steps).
+ *
+ * @fires vf-input - On every drag move or key change. `detail: { value: number }`.
+ * @fires vf-change - On commit (pointer release, or key change). `detail: { value: number }`.
+ * @fires input - Native event, dispatched from the host on every user value
+ *   move — a native range input's cadence. A programmatic `value` set fires
+ *   nothing.
+ * @fires change - Native event, dispatched from the host on commit (release,
+ *   or a key change) so form delegation and framework bindings hear it.
+ *
+ * @csspart track - The full-width rail row (the pointer target).
+ * @csspart rail - The `<svg>` capsule (fill + hollow).
+ * @csspart thumb - The shield-shaped drag handle.
+ */
+export declare class VfSlider extends VfSlider_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Current value, clamped to `[min, max]` and snapped to `step`. */
+    value: number;
+    /** Minimum value (inclusive). */
+    min: number;
+    /** Maximum value (inclusive). */
+    max: number;
+    /** Increment the value snaps to (also sets its display precision). */
+    step: number;
+    /** Form field name used when submitting the associated form. */
+    name: string;
+    /** Accessible name, exposed as the control's `aria-label`. */
+    label: string;
+    private track;
+    /** Measured content width of the rail, in px — the rail SVG is regenerated
+     * from it so every edge stays on the device grid. */
+    private readonly trackSize;
+    /** 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;
+    /** True when this component owns the host `tabindex`. */
+    private selfManagedTabIndex;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Restores the initial value when the associated form resets. */
+    formResetCallback(): void;
+    /**
+     * Restored form state parses back to the numeric `value` (the stored state
+     * is `String(clampedValue)`; the base default would assign the string).
+     */
+    protected applyFormState(state: string): void;
+    /**
+     * Mirror state into the form value, ARIA and the tab stop — each write gated
+     * on the properties it derives from, so the re-renders driven by unrelated
+     * state (the focus ring, a rail resize tick) don't re-run all of it. On the
+     * first update every reactive property is in `changed` (class-field defaults,
+     * with `undefined` as the old value), so the initial writes all still happen.
+     */
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-slider': VfSlider;
+    }
+}
+export {};

package/dist/components/vf-slider.js

@@ -0,0 +1,255 @@
+import { vfElement as e } from "../define.js";
+import { ScaleController as t, sys as n, toSys as r } from "../scale.js";
+import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as a } from "../position.js";
+import { vfBase as o } from "../styles/recipes/host.js";
+import { vfFocusUnderline as s } from "../styles/recipes/focus.js";
+import { GridSnapController as c } from "../grid-snap.js";
+import { emit as l, emitNative as u } from "../events.js";
+import { SLIDER_THUMB as d, SLIDER_THUMB_FACE as f } from "../glyphs.js";
+import { VfFormControl as p } from "../form-control.js";
+import { FocusRuleController as m } from "../focus-modality.js";
+import { decimalsOf as h } from "../number.js";
+import { TrackWidthController as g } from "../track-width.js";
+import { css as _, html as v } from "lit";
+import { property as y, query as b } from "lit/decorators.js";
+//#region src/components/vf-slider.ts
+var x = 11, S = 12, C = 5, w = x / 2, T = 4, E = 3;
+function D(e, t) {
+	let n = [], r = (e, t, r, i) => {
+		r > 0 && i > 0 && n.push(`M${e} ${t}h${r}v${i}h-${r}z`);
+	};
+	return r(1, 0, e - 2, 1), r(1, 3, e - 2, 1), r(0, 1, 1, 2), r(e - 1, 1, 1, 2), r(1, 1, Math.min(Math.max(t, 0), e - 1) - 1, 2), n.join("");
+}
+var O = class extends a(p) {
+	static {
+		this.styles = [o, _`
+      :host {
+        /* Padding just leaves room for the thumb's focus ring; the thumb itself
+           stays within the rail (its travel is inset by half its width). */
+        display: block;
+        padding: calc(var(--vf-scale, 1) * 3px) calc(var(--vf-scale, 1) * 4px);
+        color: var(--vf-black, #000);
+        cursor: var(--vf-cursor, default);
+        -webkit-tap-highlight-color: transparent;
+      }
+      .track {
+        position: relative;
+        width: 100%;
+        height: calc(var(--vf-scale, 1) * ${S}px);
+        touch-action: none;
+      }
+      /* A slider has no separate label — the fill *is* the value, so the whole
+         control dims to gray when disabled (like the number field's value).
+         Keyed off the resolved state (covers both the attribute and an ancestor
+         <fieldset disabled>), which .rail/.thumb inherit via currentColor. */
+      .track.disabled {
+        color: var(--vf-disabled, #c0c0c0);
+        pointer-events: none;
+      }
+      .rail {
+        position: absolute;
+        left: 0;
+        top: calc(var(--vf-scale, 1) * ${E}px);
+        height: calc(var(--vf-scale, 1) * ${T}px);
+        color: inherit;
+        pointer-events: none;
+      }
+      .rail path {
+        fill: currentColor;
+      }
+      .thumb {
+        position: absolute;
+        top: 0;
+        /* Above the rail so the opaque handle occludes it. */
+        z-index: 1;
+        width: calc(var(--vf-scale, 1) * ${x}px);
+        height: calc(var(--vf-scale, 1) * ${S}px);
+        color: inherit;
+        pointer-events: none;
+      }
+      .thumb-glyph {
+        display: block;
+        width: calc(var(--vf-scale, 1) * ${x}px);
+        height: calc(var(--vf-scale, 1) * ${S}px);
+      }
+      /* Solid white fill behind the black outline so the rail passes *behind*
+         the handle, not through its interior. */
+      .thumb-face {
+        fill: var(--vf-white, #fff);
+      }
+      .thumb-outline {
+        fill: currentColor;
+      }
+      /* Never draw the UA outline on the host: keyboard focus is the kit's
+         dashed rule under the RAIL, not a ring around the handle. Marking the
+         handle marked the value rather than the control, and moved as the value
+         did; the rail is the slider's whole extent, so the rule reads as one
+         underline for the control however far along the thumb has travelled.
+         One blank system px row under the rail's bottom edge, which sits
+         RAIL_TOP + RAIL_H from the track's top: the offset counts back up from
+         the track's own bottom, 12 − (3 + 4) − 1 − 1 = 3.
+
+         The thumb is z-index 1 and the rule is not, so the handle occludes the
+         dashes it passes over — the same way it occludes the rail behind it.
+
+         Gated on a class, not :focus-visible, as vf-select and vf-menu are: a
+         press on the track preventDefaults (to suppress text selection), which
+         cancels the native focus, so #onPointerDown calls focus() itself — and
+         Blink reads a scripted focus as a visible one. */
+      :host(:focus) {
+        outline: none;
+      }
+      .track.vf-focus-rule::after {
+        --vf-focus-underline-offset: ${3}px;
+        ${s}
+      }
+    `];
+	}
+	#e;
+	#t;
+	#n;
+	constructor() {
+		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new g(this, () => this.track), this.scale = new t(this), this.gridSnap = new c(this), this.selfManagedTabIndex = !1, this.#e = new m(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
+			if (!(this.isDisabled || e.button !== 0)) {
+				e.preventDefault(), this.#e.suppress(), this.focus(), this.#n = !0, this.#t = this.value;
+				try {
+					this.track?.setPointerCapture(e.pointerId);
+				} catch {}
+				this.#l(this.#d(e.clientX));
+			}
+		}, this.#p = (e) => {
+			this.#n && this.#l(this.#d(e.clientX));
+		}, this.#m = (e) => {
+			if (this.#n) {
+				this.#n = !1;
+				try {
+					this.track?.hasPointerCapture(e.pointerId) && this.track.releasePointerCapture(e.pointerId);
+				} catch {}
+				this.value !== this.#t && this.#u("vf-change");
+			}
+		}, this.#h = (e) => {
+			if (this.isDisabled) return;
+			let t = this.#i, n = Math.max(t, this.#r / 10), r = this.value;
+			switch (e.key) {
+				case "ArrowRight":
+				case "ArrowUp":
+					r = this.#o(this.#s + t);
+					break;
+				case "ArrowLeft":
+				case "ArrowDown":
+					r = this.#o(this.#s - t);
+					break;
+				case "PageUp":
+					r = this.#o(this.#s + n);
+					break;
+				case "PageDown":
+					r = this.#o(this.#s - n);
+					break;
+				case "Home":
+					r = this.min;
+					break;
+				case "End":
+					r = this.max;
+					break;
+				default: return;
+			}
+			e.preventDefault(), this.#e.reveal(), r !== this.value && (this.#l(r), this.#u("vf-change"));
+		}, this.internals.role = "slider", this.internals.ariaOrientation = "horizontal";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.latchFormDefault(this.value), this.hasAttribute("tabindex") || (this.selfManagedTabIndex = !0, this.tabIndex = this.isDisabled ? -1 : 0), this.addEventListener("keydown", this.#h);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.#h);
+	}
+	formResetCallback() {
+		this.value = this.formDefault(0);
+	}
+	applyFormState(e) {
+		let t = Number(e);
+		Number.isNaN(t) || (this.value = t);
+	}
+	get #r() {
+		return this.max - this.min || 1;
+	}
+	get #i() {
+		return this.step > 0 ? this.step : 1;
+	}
+	#a(e) {
+		return Math.min(Math.max(e, this.min), this.max);
+	}
+	#o(e) {
+		let t = this.#i, n = Math.round((e - this.min) / t), r = this.#a(this.min + n * t);
+		return Number(r.toFixed(h(t)));
+	}
+	get #s() {
+		let e = Number.isFinite(this.value) ? this.value : this.min;
+		return this.#a(e);
+	}
+	get #c() {
+		return Math.min(Math.max((this.#s - this.min) / this.#r, 0), 1);
+	}
+	#l(e) {
+		e !== this.value && (this.value = e, this.#u("vf-input"));
+	}
+	#u(e) {
+		l(this, e, { value: this.value }), u(this, e === "vf-input" ? "input" : "change");
+	}
+	#d(e) {
+		let t = this.track?.getBoundingClientRect();
+		if (!t) return this.value;
+		let r = t.width - n(x, this);
+		if (r <= 0) return this.value;
+		let i = Math.min(Math.max((e - t.left - n(w, this)) / r, 0), 1);
+		return this.#o(this.min + i * this.#r);
+	}
+	#f;
+	#p;
+	#m;
+	#h;
+	updated(e) {
+		let t = this.disabledChanged(e), n = e.has("value") || e.has("min") || e.has("max");
+		(n || t) && this.syncFormValue(String(this.#s)), e.has("min") && (this.internals.ariaValueMin = String(this.min)), e.has("max") && (this.internals.ariaValueMax = String(this.max)), n && (this.internals.ariaValueNow = String(this.#s)), e.has("label") && (this.internals.ariaLabel = this.label || null), t && (this.internals.ariaDisabled = this.isDisabled ? "true" : "false", this.selfManagedTabIndex && (this.tabIndex = this.isDisabled ? -1 : 0));
+	}
+	render() {
+		let e = r(this.trackSize.width, this), t = Math.round(this.#c * Math.max(0, e - x)), i = n(t, this), a = t + C;
+		return v`
+      <div
+        class="track vf-snap ${this.#e.marked ? "vf-focus-rule" : ""} ${this.isDisabled ? "disabled" : ""}"
+        part="track"
+        @pointerdown=${this.#f}
+        @pointermove=${this.#p}
+        @pointerup=${this.#m}
+        @pointercancel=${this.#m}
+        @lostpointercapture=${this.#m}
+      >
+        ${e >= 2 ? v`<svg
+              class="rail"
+              part="rail"
+              width=${n(e, this)}
+              height=${n(T, this)}
+              viewBox="0 0 ${e} ${T}"
+              shape-rendering="crispEdges"
+              aria-hidden="true"
+            >
+              <path d=${D(e, a)}></path>
+            </svg>` : null}
+        <span class="thumb" part="thumb" style="left: ${i}px">
+          <svg
+            class="thumb-glyph"
+            viewBox="0 0 ${x} ${S}"
+            shape-rendering="crispEdges"
+            aria-hidden="true"
+          >
+            <path class="thumb-face" d=${f.d}></path>
+            <path class="thumb-outline" d=${d.d}></path>
+          </svg>
+        </span>
+      </div>
+    `;
+	}
+};
+i([y({ type: Number })], O.prototype, "value", void 0), i([y({ type: Number })], O.prototype, "min", void 0), i([y({ type: Number })], O.prototype, "max", void 0), i([y({ type: Number })], O.prototype, "step", void 0), i([y({ reflect: !0 })], O.prototype, "name", void 0), i([y()], O.prototype, "label", void 0), i([b(".track")], O.prototype, "track", void 0), O = i([e("vf-slider")], O);
+//#endregion
+export { O as VfSlider };

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

@@ -0,0 +1,188 @@
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+/** Which axis the children run along. */
+export type VfStackDirection = 'column' | 'row';
+/**
+ * Where the children sit across the stack. Defaults per direction — `start`
+ * down a column, `center` across a row.
+ */
+export type VfStackPlace = 'start' | 'center' | 'end';
+declare const VfStack_base: (new (...args: any[]) => import("../size.js").VfSizedInterface) & (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-stack>` — arrange things inside a window, in system pixels.
+ *
+ * A window body is the one place the kit stopped short: every control inside it
+ * is authored in system px, but the *spaces between* them were the consumer's
+ * problem, written by hand as `calc(var(--vf-scale, 1) * 12px)`. This is that
+ * calculation, as a component — a flexbox whose `gap`, `pad`, `width` and
+ * `height` are declared in whole system px and converted internally:
+ *
+ * ```html
+ * <vf-stack gap="12">                            <!-- a column -->
+ *   <vf-stack fill-width direction="row" gap="8">   <!-- a labeled field -->
+ *     <vf-label width="80" for="name">Name:</vf-label>
+ *     <vf-text-field id="name" fill-width></vf-text-field>
+ *   </vf-stack>
+ *   <vf-stack fill-width place="end">                <!-- an action row -->
+ *     <vf-button-group>
+ *       <vf-button>Cancel</vf-button>
+ *       <vf-button variant="default">Save</vf-button>
+ *     </vf-button-group>
+ *   </vf-stack>
+ * </vf-stack>
+ * ```
+ *
+ * **Why this can't just be page CSS.** Scaling is default-on and *per
+ * component*: `ScaleController` sets `--vf-scale` on the component's own host,
+ * not on the document. So `var(--vf-scale, 1)` in a consumer's stylesheet
+ * resolves only where the rule's element happens to sit inside a `vf-*`
+ * ancestor and inherit it — true inside a window body, false for a plain
+ * `<div>` holding two buttons on an ordinary page, where the fallback `1` wins
+ * and the gap renders at 8px around 3×-sized buttons with no warning. A page
+ * that hasn't called `applyScale()` has no way to write "8 system px" at all.
+ * A component always can, because it *is* the scope — which is also why this
+ * one carries a {@link ScaleController} of its own: without it a lone stack
+ * would resolve its own gap against that same fallback while its children each
+ * self-scaled around it.
+ *
+ * **Whole system px is the only expressible value**, so the gap half of the
+ * layout contract (docs/SIZING.md rule 2) stops being a rule to remember. Declaring
+ * `width`/`height` covers the size half of rule 3 as well.
+ *
+ * **The geometry is governed by the content.** A column is as wide as its
+ * widest child and a row as tall as its tallest; children keep the size they
+ * drew themselves at (`flex: 0 0 auto` — no growing, no shrinking). System 7
+ * boxes are the size they are: a push button is as wide as its label, a popup
+ * menu hugs its widest option, and a window is a fixed box whose overflow is
+ * clipped at the frame, not a layout that squeezes its controls to fit. The
+ * stack distributes; it does not resize. That is why the box shrink-wraps
+ * (`fit-content`) rather than claiming its parent's whole width — a layout box
+ * that did would be inventing a size nobody declared.
+ *
+ * **`fill-width` / `fill-height` are how a child asks for more**, as bare
+ * attributes on consumer DOM the way `nosnap` opts an element out of snapping:
+ *
+ * ```html
+ * <vf-text-field fill-width></vf-text-field>
+ * ```
+ *
+ * Each names the *outcome*, not the axis, so the markup means the same thing
+ * wherever it lands; the stack does the flexbox translation, which is the whole
+ * reason to have a component. One rule to learn, about geometry rather than
+ * vocabulary: **the cross axis always has a size, the main axis only has slack
+ * if you declared one.** So `fill-width` always works in a column (the width is
+ * the widest child's) and needs a declared `width` in a row; `fill-height` is
+ * exactly the other way round. A fill with nothing to take is inert, not an
+ * error. Two children filling along the main axis end up *equal* — the zeroed
+ * flex basis is what lets them divide the slack rather than keep their natural
+ * sizes — and a child that declares its own size shouldn't also ask to fill it.
+ *
+ * A stack reads the same two attributes about *itself*, for the parents that
+ * aren't stacks: a window body, a fieldset, a scroll well, a grid cell. That is
+ * where a panel's width enters the tree, and from there `fill-width` hands it
+ * down a level at a time.
+ *
+ * **It paints nothing and means nothing.** No border, no background, no role,
+ * no keyboard behavior — what it holds decides what it is, as with
+ * {@link VfGrid}.
+ *
+ * **It holds its box on the device-pixel grid** — the `vf-container`
+ * arrangement, adopted here after first shipping without it. The original
+ * reasoning ("no ink of its own, and slotted `vf-*` children correct their own
+ * origins") accounted only for kit children: a stack is a positioned ancestor
+ * and a layout box for *anything*, and consumer content inside it — a div, an
+ * `<img>`, a run of text — has no controller of its own. So the flex
+ * container, the placed-child anchor and the `vf-snap` class live on one
+ * shadow box, and under `applyGridSnap()` the correction moves the stack's
+ * whole coordinate system; children (kit or not) ride it, and the sweep's
+ * outermost-first order means the kit children then find nothing left to
+ * correct. What this deliberately does not fix: a text-governed child width
+ * mid-row still shifts later siblings fractionally (their own controllers
+ * cover that), and centering still can't land on a whole pixel by itself.
+ *
+ * It is also the kit's one **typographically transparent** component: `vfBase`'s
+ * chrome face, ratio line box, color and non-selectability are all reset to
+ * `inherit` on the host. Wrapping content in a layout box must not change how
+ * that content reads — inside a window it goes on inheriting the window's face
+ * exactly as before, and on a plain page it leaves the page's typography (and
+ * its whole-pixel line boxes) alone.
+ *
+ * What it deliberately does **not** do: equalize its children's widths. A row of
+ * buttons still belongs in a `vf-button-group`, which sizes them all to the
+ * widest and aligns their *faces* rather than the `variant="default"` ring
+ * boxes a plain flex row would line up.
+ *
+ * @slot - The children to arrange. `fill-width` / `fill-height` on any of them.
+ */
+export declare class VfStack extends VfStack_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Which axis the children run along — `column` (the default) or `row`.
+     *
+     * A stack is vertical unless it says otherwise, the way the word is used
+     * everywhere else; a row is the one that reads as a deliberate choice in the
+     * markup.
+     */
+    direction: VfStackDirection;
+    /**
+     * The space between children, in whole system px. `0` by default: a layout
+     * box that spaced things out on its own would be exactly the kind of
+     * surprise SPEC §2 rules out when it says a component renders nothing
+     * unexpected outside its box.
+     */
+    gap: number;
+    /**
+     * Padding inside the stack, in whole system px — one to four values in the
+     * usual CSS shorthand order (`pad="12"`, `pad="10 12"`, `pad="14 12 10"`).
+     *
+     * Leave it off inside a `vf-window` body, which already carries its own 12px
+     * inset; a stack that means to own that inset goes inside `<vf-window flush>`.
+     */
+    pad?: string | number;
+    /**
+     * Where the children sit across the stack — `start`, `center` or `end`.
+     * Unset resolves per direction: `start` down a column, `center` across a row.
+     *
+     * Named `place` rather than `align` for a reason worth keeping in the source:
+     * `align` is a legacy HTML presentation attribute, and Blink maps it to
+     * `text-align` on any element, so the cross-axis switch used to re-align every
+     * run of copy inside the stack (see the `text-align` reset above).
+     *
+     * Note the one thing centering cannot do: land on a whole pixel by itself. A
+     * 16px caption centered in a row set by the 25-system-px `vf-number-field`
+     * sits at 4.5 system px, and no container can round that — it would have to
+     * read each child's height. `applyGridSnap()` keeps the caption's own ink
+     * crisp regardless (it corrects the origin inside the child's shadow root);
+     * `place="start"` is the deterministic escape.
+     */
+    place?: VfStackPlace;
+    /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
+    private readonly scale;
+    /**
+     * Hold the box on the device-pixel grid under `applyGridSnap()` — see the
+     * class doc for why the original no-controller decision was reversed. The
+     * host is what gets measured; `.box` (vf-snap) is where the correction
+     * lands, taking the whole coordinate system with it.
+     */
+    private readonly gridSnap;
+    /** The shadow flex box `gap`/`pad` write to; exists from the first render. */
+    private readonly box;
+    /**
+     * `gap` and `pad` go on the shadow box's inline style as
+     * `calc(var(--vf-scale, 1) * Npx)`, the way VfSized writes the declared
+     * size. Emitting the calc rather than a resolved number keeps each one live
+     * against the display: the scale is read at paint time (the var resolves
+     * against the host's own --vf-scale by inheritance), so a stack follows a
+     * monitor change exactly as the metrics in a component's stylesheet do.
+     * A real property on a real element, not a custom property — a token would
+     * inherit, and a nested stack would silently pick up its parent's spacing.
+     */
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-stack': VfStack;
+    }
+}
+export {};