vintage-frames 0.1.1 → 0.2.1

package/dist/components/vf-menu.js

@@ -1,22 +1,23 @@
 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 { vfPanel as a } from "../styles/recipes/surface.js";
-import { vfFocusUnderline as o } from "../styles/recipes/focus.js";
-import { GridSnapController as s } from "../grid-snap.js";
-import { DocumentListenersController as c, releaseAfterGesture as l } from "../document-listeners.js";
-import { deferActivation as u, emit as d } from "../events.js";
-import { FocusRuleController as f } from "../focus-modality.js";
-import { TypeAheadBuffer as p } from "../type-ahead.js";
-import { MenuPressController as m } from "../menu-press.js";
-import { LitElement as h, css as g, html as _, nothing as v } from "lit";
-import { property as y, query as b, queryAssignedElements as x } from "lit/decorators.js";
+import { VfPositioned as r } from "../position.js";
+import { vfDisplay as i } from "../styles/recipes/display-face.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { vfPanel as o } from "../styles/recipes/surface.js";
+import { vfFocusUnderline as s } from "../styles/recipes/focus.js";
+import { GridSnapController as c } from "../grid-snap.js";
+import { DocumentListenersController as l, releaseAfterGesture as u } from "../document-listeners.js";
+import { deferActivation as d, emit as f } from "../events.js";
+import { FocusRuleController as p } from "../focus-modality.js";
+import { TypeAheadBuffer as m } from "../type-ahead.js";
+import { MenuPressController as h } from "../menu-press.js";
+import { LitElement as g, css as _, html as v, nothing as y } from "lit";
+import { property as b, query as x, queryAssignedElements as S } from "lit/decorators.js";
 //#region src/components/vf-menu.ts
-var S = class extends h {
+var C = class extends r(g) {
 	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new s(this), this.#e = new f(this), this.label = "", this.open = !1, this.barTabIndex = 0, this.#t = new m(this, {
+		super(...e), this.scale = new t(this), this.gridSnap = new c(this), this.#e = new p(this), this.label = "", this.open = !1, this.barTabIndex = 0, this.#t = new h(this, {
 			menus: () => [this],
 			open: (e) => {
 				e.open = !0;
@@ -24,7 +25,7 @@ var S = class extends h {
 			close: () => {
 				this.open = !1;
 			}
-		}), this.#r = this.attachInternals(), this.#i = new p(), this.#a = !1, this.#o = () => {
+		}), this.#r = this.attachInternals(), this.#i = new m(), this.#a = !1, this.#o = () => {
 			this.#n || this.focus(), this.open = !1;
 		}, this.#s = (e) => {
 			e.composedPath().includes(this) || (this.open = !1);
@@ -58,7 +59,7 @@ var S = class extends h {
 					break;
 				}
 			}
-		}, this.#u = new c(this, () => [[
+		}, this.#u = new l(this, () => [[
 			document,
 			"pointerdown",
 			this.#s,
@@ -78,10 +79,10 @@ var S = class extends h {
 	}
 	static {
 		this.styles = [
-			i,
-			r,
 			a,
-			g`
+			i,
+			o,
+			_`
       :host {
         display: inline-block;
         position: relative;
@@ -168,7 +169,7 @@ var S = class extends h {
       }
       :host(:not([open])) .label.vf-focus-rule .title::after {
         --vf-focus-underline-offset: -2px;
-        ${o}
+        ${s}
       }
       .panel {
         position: absolute;
@@ -270,7 +271,7 @@ var S = class extends h {
 		this.focus();
 	}
 	render() {
-		return _`
+		return v`
       <div
         class="label vf-snap ${this.#e.marked ? "vf-focus-rule" : ""}"
         part="label"
@@ -278,7 +279,7 @@ var S = class extends h {
         tabindex=${this.barTabIndex}
         aria-haspopup="menu"
         aria-expanded=${this.open ? "true" : "false"}
-        aria-label=${this.label || v}
+        aria-label=${this.label || y}
         @pointerdown=${this.#h}
         @click=${this.#g}
         @pointerenter=${this.#_}
@@ -290,7 +291,7 @@ var S = class extends h {
         class="panel vf-panel"
         part="panel"
         role="menu"
-        aria-label=${this.label || v}
+        aria-label=${this.label || y}
       >
         <slot></slot>
       </div>
@@ -301,13 +302,13 @@ var S = class extends h {
 			this.open = !this.open;
 			return;
 		}
-		d(this, "vf-menu-toggle-request", { menu: this }, {
+		f(this, "vf-menu-toggle-request", { menu: this }, {
 			cancelable: !0,
 			composed: !1
 		}) && (this.open = !this.open);
 	}
 	#h() {
-		this.#a = !0, l(() => {
+		this.#a = !0, u(() => {
 			this.#a = !1;
 		});
 	}
@@ -316,10 +317,10 @@ var S = class extends h {
 			this.#a = !1;
 			return;
 		}
-		u(this, e, () => this.#m());
+		d(this, e, () => this.#m());
 	}
 	#_() {
-		d(this, "vf-menu-hover", { menu: this }, { composed: !1 });
+		f(this, "vf-menu-hover", { menu: this }, { composed: !1 });
 	}
 	#v(e) {
 		if (e.key === "Enter" || e.key === " ") {
@@ -332,15 +333,15 @@ var S = class extends h {
 		await this.updateComplete, this.items[0]?.focus();
 	}
 };
-n([y()], S.prototype, "label", void 0), n([y({
+n([b()], C.prototype, "label", void 0), n([b({
 	type: Boolean,
 	reflect: !0
-})], S.prototype, "open", void 0), n([y({
+})], C.prototype, "open", void 0), n([b({
 	type: Number,
 	attribute: !1
-})], S.prototype, "barTabIndex", void 0), n([b(".label")], S.prototype, "_labelEl", void 0), n([x({
+})], C.prototype, "barTabIndex", void 0), n([x(".label")], C.prototype, "_labelEl", void 0), n([S({
 	selector: "vf-menu-item",
 	flatten: !0
-})], S.prototype, "_assignedItems", void 0), S = n([e("vf-menu")], S);
+})], C.prototype, "_assignedItems", void 0), C = n([e("vf-menu")], C);
 //#endregion
-export { S as VfMenu };
+export { C as VfMenu };

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

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
+declare const VfOption_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
 /**
  * `<vf-option>` — a single choice inside a `<vf-select>` popup menu.
  *
@@ -12,6 +13,14 @@ import type { PropertyValues } from 'lit';
  *
  * The host carries `role="option"` with `aria-selected`/`aria-disabled`.
  *
+ * Takes `top`/`left` like every other element ({@link VfPositioned}), for the
+ * consumer who wants one somewhere other than a popup row. Inside its parent
+ * `<vf-select>` it is a row the panel measures and scrolls in flow, so stating
+ * an origin there takes it out of that measurement: the panel stops counting it
+ * toward its own width and its scroll clamp, and the rows below close the gap.
+ * That is the placement doing exactly what it says — not a bug — but it is not
+ * how a popup is laid out.
+ *
  * @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)
@@ -19,7 +28,7 @@ import type { PropertyValues } from 'lit';
  *   / `vf-option` + `vf-menu-item` ✓ column (shared so the value doesn't shift
  *   on open)
  */
-export declare class VfOption extends LitElement {
+export declare class VfOption extends VfOption_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
@@ -47,3 +56,4 @@ declare global {
         'vf-option': VfOption;
     }
 }
+export {};

package/dist/components/vf-option.js

@@ -1,18 +1,19 @@
 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";
+import { VfPositioned as r } from "../position.js";
+import { vfDisplay as i } from "../styles/recipes/display-face.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { CHECKMARK as o, glyphSvg as s } from "../glyphs.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-option.ts
-var d = class extends s {
+var f = class extends r(c) {
 	static {
 		this.styles = [
+			a,
 			i,
-			r,
-			c`
+			l`
       :host {
         position: relative;
         display: flex;
@@ -97,23 +98,23 @@ var d = class extends s {
 		e.has("selected") && (this.#e.ariaSelected = this.selected ? "true" : "false"), e.has("disabled") && (this.#e.ariaDisabled = this.disabled ? "true" : null);
 	}
 	render() {
-		return l`
+		return u`
       <span class="check" part="check" aria-hidden="true"
-        >${o(a, "checkmark")}</span
+        >${s(o, "checkmark")}</span
       >
       <slot></slot>
     `;
 	}
 };
-n([u()], d.prototype, "value", void 0), n([u({
+n([d()], f.prototype, "value", void 0), n([d({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "disabled", void 0), n([u({
+})], f.prototype, "disabled", void 0), n([d({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "selected", void 0), n([u({
+})], f.prototype, "selected", void 0), n([d({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "active", void 0), d = n([e("vf-option")], d);
+})], f.prototype, "active", void 0), f = n([e("vf-option")], f);
 //#endregion
-export { d as VfOption };
+export { f as VfOption };

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

@@ -19,8 +19,8 @@ declare const VfParagraph_base: (new (...args: any[]) => import("../size.js").Vf
  *   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()`;
+ * - its own {@link GridSnapController}, so it holds its own origin
+ *   wherever the page puts it;
  * - 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
@@ -52,7 +52,7 @@ 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. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * Which embedded face to set the copy in — `'body'` (Geneva, the

package/dist/components/vf-progress-bar.d.ts

@@ -28,7 +28,7 @@ export declare class VfProgressBar extends VfProgressBar_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /** Current progress, from 0 to `max`. Clamped for display and ARIA. */
     value: number;

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

@@ -13,11 +13,14 @@ declare const VfRadio_base: (new (...args: any[]) => import("../position.js").Vf
  * unselects its siblings.
  *
  * @slot - The label, rendered to the right of the circle with a 6px gap.
+ *   Left empty, the label and its gap collapse: the control is the bare
+ *   13×13 circle.
  * @csspart circle - The 13×13 radio circle.
  * @csspart label - The label wrapper around the slot.
  * @fires vf-change - When selected by user interaction. `detail: { value: string }`.
  */
 export declare class VfRadio extends VfRadio_base {
+    #private;
     static styles: import("lit").CSSResult[];
     /** Whether this radio is selected. Managed by the containing group. */
     checked: boolean;
@@ -30,6 +33,8 @@ export declare class VfRadio extends VfRadio_base {
      * group — not intended to be set by consumers.
      */
     groupDisabled: boolean;
+    /** Whether the slot holds non-whitespace content; gates the label row. */
+    private _hasLabel;
     private readonly internals;
     constructor();
     /**

package/dist/components/vf-radio.js

@@ -9,10 +9,10 @@ import { emit as s } from "../events.js";
 import { RADIO_DOT as c, RADIO_FACE as l, RADIO_RING as u, RADIO_RING_PRESSED as d } from "../glyphs.js";
 import { VfToggleControl as f } from "../toggle-control.js";
 import { LitElement as p, css as m, html as h } from "lit";
-import { property as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
+import { property as g, state as _ } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
 //#region src/components/vf-radio.ts
-var v = class extends n(f(p)) {
+var y = class extends n(f(p)) {
 	static {
 		this.styles = [
 			i,
@@ -82,7 +82,7 @@ var v = class extends n(f(p)) {
 		];
 	}
 	constructor() {
-		super(), this.checked = !1, this.disabled = !1, this.value = "", this.groupDisabled = !1, this.internals = this.attachInternals(), this.internals.role = "radio";
+		super(), this.checked = !1, this.disabled = !1, this.value = "", this.groupDisabled = !1, this._hasLabel = !1, this.internals = this.attachInternals(), this.internals.role = "radio";
 	}
 	get toggleInternals() {
 		return this.internals;
@@ -97,7 +97,7 @@ var v = class extends n(f(p)) {
 		let e = this.toggleDisabled;
 		return h`
       <span
-        class=${_({
+        class=${v({
 			circle: !0,
 			dim: e,
 			"vf-snap": !0
@@ -112,14 +112,19 @@ var v = class extends n(f(p)) {
           <path class="dot" d=${c.d}></path>
         </svg>
       </span>
-      <span class=${_({
+      <span class=${v({
 			label: !0,
-			dim: e
+			dim: e,
+			empty: !this._hasLabel
 		})} part="label">
-        <slot></slot>
+        <slot @slotchange=${this.#e}></slot>
       </span>
     `;
 	}
+	#e(e) {
+		let t = e.target;
+		this._hasLabel = t.assignedNodes({ flatten: !0 }).some((e) => e.nodeType === Node.ELEMENT_NODE || !!e.textContent?.trim());
+	}
 	activate() {
 		this.checked || (this.externallyCoordinated || (this.checked = !0), this.focus(), s(this, "vf-change", { value: this.value }));
 	}
@@ -127,9 +132,9 @@ var v = class extends n(f(p)) {
 t([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "checked", void 0), t([g({
+})], y.prototype, "checked", void 0), t([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "disabled", void 0), t([g()], v.prototype, "value", void 0), t([g({ attribute: !1 })], v.prototype, "groupDisabled", void 0), v = t([e("vf-radio")], v);
+})], y.prototype, "disabled", void 0), t([g()], y.prototype, "value", void 0), t([g({ attribute: !1 })], y.prototype, "groupDisabled", void 0), t([_()], y.prototype, "_hasLabel", void 0), y = t([e("vf-radio")], y);
 //#endregion
-export { v as VfRadio };
+export { y as VfRadio };

package/dist/components/vf-scroll-area.d.ts

@@ -30,7 +30,7 @@ declare const VfScrollArea_base: (new (...args: any[]) => import("../position.js
  */
 export declare class VfScrollArea extends VfScrollArea_base {
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * Which scroll rails to reserve as permanent placeholders: `vertical`

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

@@ -116,7 +116,7 @@ export declare class VfSelect extends VfSelect_base {
     private cachedOptions;
     /** 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. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * Whether the closed pill wears the kit's dashed focus rule — keyboard focus

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

@@ -22,7 +22,7 @@ export declare class VfSeparator extends VfSeparator_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /** Render as a vertical rule (1px wide) instead of horizontal. */
     vertical: boolean;

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

@@ -48,7 +48,7 @@ export declare class VfSlider extends VfSlider_base {
     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. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /** True when this component owns the host `tabindex`. */
     private selfManagedTabIndex;

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

@@ -93,12 +93,16 @@ declare const VfStack_base: (new (...args: any[]) => import("../size.js").VfSize
  * 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
+ * shadow box, and 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.
+ * cover that).
+ *
+ * **Centering lands on whole system px as well** — halving an odd count of free
+ * system px gives a half, which no container can round in CSS. See
+ * {@link CrossCenterController}.
  *
  * 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
@@ -148,18 +152,18 @@ export declare class VfStack extends VfStack_base {
      * `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.
+     * Centering divides the free space in two, so an odd count of system px would
+     * land a child on a half — a 16px caption centered in a row set by the
+     * 25-system-px `vf-number-field` sits at 4.5. {@link CrossCenterController}
+     * steps that back onto whole system px, the exact half going toward the start
+     * the way QuickDraw's `div 2` did; `place="start"` is still the way to ask
+     * for no centering at all.
      */
     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
+     * Hold the box on the device-pixel grid — 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.
@@ -167,6 +171,20 @@ export declare class VfStack extends VfStack_base {
     private readonly gridSnap;
     /** The shadow flex box `gap`/`pad` write to; exists from the first render. */
     private readonly box;
+    /** The slot the children arrive through. (`slot` itself is HTMLElement's.) */
+    private readonly childSlot;
+    /**
+     * Keeps cross-axis centering on whole system px (src/cross-center.ts).
+     * A null axis is the inert state — no observers, nothing held — which is
+     * every column that starts its children, i.e. the default.
+     */
+    private readonly crossCenter;
+    /**
+     * Mirrors the stylesheet's alignment selectors: a row centers unless `place`
+     * names something else, a column only when it says `center`, and an
+     * unrecognized value lands on the direction's default in both places.
+     */
+    private get centersChildren();
     /**
      * `gap` and `pad` go on the shadow box's inline style as
      * `calc(var(--vf-scale, 1) * Npx)`, the way VfSized writes the declared

package/dist/components/vf-stack.js

@@ -5,15 +5,20 @@ import { VfPositioned as a } from "../position.js";
 import { vfBase as o } from "../styles/recipes/host.js";
 import { GridSnapController as s } from "../grid-snap.js";
 import { VfSized as c } from "../size.js";
-import { LitElement as l, css as u, html as d } from "lit";
-import { property as f, query as p } from "lit/decorators.js";
+import { CrossCenterController as l } from "../cross-center.js";
+import { LitElement as u, css as d, html as f } from "lit";
+import { property as p, query as m } from "lit/decorators.js";
 //#region src/components/vf-stack.ts
-var m = class extends c(a(l)) {
+var h = class extends c(a(u)) {
 	constructor(...e) {
-		super(...e), this.direction = "column", this.gap = 0, this.scale = new t(this), this.gridSnap = new s(this);
+		super(...e), this.direction = "column", this.gap = 0, this.scale = new t(this), this.gridSnap = new s(this), this.crossCenter = new l(this, () => ({
+			box: this.box,
+			slot: this.childSlot,
+			axis: this.centersChildren ? this.direction === "row" ? "y" : "x" : null
+		}));
 	}
 	static {
-		this.styles = [o, u`
+		this.styles = [o, d`
       :host {
         /* Shrink to the content, but stay BLOCK-level while doing it: the stack
            is exactly as big as what it holds, so it can't hand a size it never
@@ -126,6 +131,20 @@ var m = class extends c(a(l)) {
         align-items: flex-end;
       }
 
+      /* The centering tie: CrossCenterController steps a centered child onto
+         whole system px through these variables (src/cross-center.ts has the
+         why). Keyed off the marker because a ::slotted rule outranks a slotted
+         element's own :host — a blanket position would restyle vf-window and
+         vf-menu. */
+      :host(:not([direction='row'])) ::slotted([data-vf-tie]) {
+        position: relative;
+        left: var(--vf-stack-dx, 0px);
+      }
+      :host([direction='row']) ::slotted([data-vf-tie]) {
+        position: relative;
+        top: var(--vf-stack-dy, 0px);
+      }
+
       /* --- Children ----------------------------------------------------- */
       /* Neither grow nor shrink: the content governs the box, not the other way
          round (see the class doc). A light-DOM declaration beats a ::slotted
@@ -156,13 +175,16 @@ var m = class extends c(a(l)) {
       }
     `];
 	}
+	get centersChildren() {
+		return this.place === "center" ? !0 : this.place === "start" || this.place === "end" ? !1 : this.direction === "row";
+	}
 	updated(e) {
 		e.has("gap") && (this.box.style.gap = n(this.gap)), e.has("pad") && (this.box.style.padding = r(this.pad));
 	}
 	render() {
-		return d`<div class="vf-snap box"><slot></slot></div>`;
+		return f`<div class="vf-snap box"><slot></slot></div>`;
 	}
 };
-i([f({ reflect: !0 })], m.prototype, "direction", void 0), i([f({ type: Number })], m.prototype, "gap", void 0), i([f()], m.prototype, "pad", void 0), i([f({ reflect: !0 })], m.prototype, "place", void 0), i([p(".box")], m.prototype, "box", void 0), m = i([e("vf-stack")], m);
+i([p({ reflect: !0 })], h.prototype, "direction", void 0), i([p({ type: Number })], h.prototype, "gap", void 0), i([p()], h.prototype, "pad", void 0), i([p({ reflect: !0 })], h.prototype, "place", void 0), i([m(".box")], h.prototype, "box", void 0), i([m("slot")], h.prototype, "childSlot", void 0), h = i([e("vf-stack")], h);
 //#endregion
-export { m as VfStack };
+export { h as VfStack };

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

@@ -79,7 +79,7 @@ export declare class VfSwatch extends VfSwatch_base {
     disabled: boolean;
     /** 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. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * The consumer's `--vf-swatch-checker` override, or `''` for the kit

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

@@ -92,7 +92,7 @@ export declare class VfWindow extends VfWindow_base {
     scrollbars?: 'vertical' | 'horizontal' | 'both';
     /** 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. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /** Holds the centered title patch on the placement lattice (src/chrome.ts). */
     private readonly titleCenter;

package/dist/cross-center.d.ts

@@ -0,0 +1,76 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** The axis a container centers its children across — `null` when it doesn't. */
+export type CrossAxis = 'x' | 'y' | null;
+/** What {@link CrossCenterController} reads off its host before each measure. */
+export interface CrossCenterParts {
+    /** The flex box the children are centered in. */
+    box: HTMLElement | null | undefined;
+    /** The slot they arrive through. */
+    slot: HTMLSlotElement | null | undefined;
+    /** Which axis that centering happens on, if it happens at all. */
+    axis: CrossAxis;
+}
+/**
+ * Marks a held child; the container's `::slotted()` rule keys off it. The
+ * container owns the correction, the child carries only the fact of it.
+ */
+export declare const CENTER_TIE_ATTRIBUTE = "data-vf-tie";
+/**
+ * Holds cross-axis centering on the system-pixel grid.
+ *
+ * Centering halves the free space, and half of an odd count of system px is a
+ * half: a 71-system-px child centered in 200 sits at 64.5 — half a *system*
+ * px, so the child's whole 1-bit interior misses the device grid at every
+ * density. CSS can't round it: no rule can say "half my child's width,
+ * floored", and a fractional transform leaves the composite-time fringe
+ * grid-snap.ts measured. So the offset is measured here and corrected through
+ * layout: each centered child steps to the nearest whole system px, the exact
+ * half going toward the start as QuickDraw's `div 2` did.
+ *
+ * It measures where flexbox actually put each child rather than deriving from
+ * the two widths — a stack holds anything, including a child whose width isn't
+ * whole system px (`vf-select` is 87⅓ at 1.5×), and deriving would move such a
+ * child *off* a grid position it already held. Everything is relative to the
+ * box, so a stack the page put on a fractional origin is untouched: that stays
+ * the page's fault, or the grid snapper's to absorb (src/grid-snap.ts).
+ *
+ * The correction lands as {@link CENTER_TIE_ATTRIBUTE} plus a length in
+ * `--vf-stack-dx` / `--vf-stack-dy`, applied by the container's own
+ * `::slotted([data-vf-tie])` rule (see vf-stack.ts). A marker plus a variable
+ * is the weakest channel available — any inline style or page rule beats it —
+ * and the marker matters because a `::slotted` rule outranks a slotted
+ * element's own `:host` (measured): a blanket `position` would restyle
+ * `vf-window` and `vf-menu`.
+ *
+ * Re-measures after every host render and on any resize of the box or a child
+ * — a density change, a late-registering face, an edited label. A relative
+ * offset changes no box's size, so the measurement stays stable: the applied
+ * correction is subtracted back out before the next one is derived, and a
+ * child already on the grid is left exactly as it is.
+ */
+export declare class CrossCenterController implements ReactiveController {
+    private readonly host;
+    private readonly read;
+    private observer?;
+    private observed;
+    private slot?;
+    private readonly held;
+    constructor(host: ReactiveControllerHost & HTMLElement, read: () => CrossCenterParts);
+    hostConnected(): void;
+    hostUpdated(): void;
+    hostDisconnected(): void;
+    /** Re-attach to the current box, slot and children, then re-measure. */
+    private readonly sync;
+    /**
+     * Detach from everything and give every held child its box back. Keeps the
+     * observer instance, so a re-parented stack doesn't allocate a fresh one.
+     */
+    private rest;
+    /** Observe the box and every child, once per distinct set. */
+    private watch;
+    /** Put every centered child on the nearest whole system px, ties to the start. */
+    private hold;
+    private apply;
+    /** Give a child back exactly the box it arrived with. */
+    private clear;
+}