vintage-frames 0.1.0

package/dist/components/vf-button.js

@@ -0,0 +1,234 @@
+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 { vfDisplay as i } from "../styles/recipes/display-face.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { vfFocusUnderline as o } from "../styles/recipes/focus.js";
+import { GridSnapController as s } from "../grid-snap.js";
+import { BUTTON_FACE as c, BUTTON_FRAME as l, RING_FRAME as u, RING_HOLE as d, steppedRectClip as f, steppedRingClip as p } from "../pixel-frame.js";
+import { deferActivation as m } from "../events.js";
+import { VfShadowRoleControl as h } from "../form-control.js";
+import { css as g, html as _, nothing as v, unsafeCSS as y } from "lit";
+import { property as b, query as x } from "lit/decorators.js";
+//#region src/components/vf-button.ts
+var S = "vf-submitter", C = class extends r(h) {
+	constructor(...e) {
+		super(...e), this.type = "button", this.name = "", this.value = "", this.formAction = "", this.formEnctype = "", this.formMethod = "", this.formNoValidate = !1, this.formTarget = "", this.scale = new t(this), this.gridSnap = new s(this), this.#e = !1, this.handleClick = (e) => {
+			this.isDisabled || this.#e || this.resolvedType !== "button" && m(this, e, () => this.activate());
+		};
+	}
+	static {
+		this.shadowRootOptions = {
+			...h.shadowRootOptions,
+			delegatesFocus: !0
+		};
+	}
+	static {
+		this.styles = [
+			a,
+			i,
+			g`
+      :host {
+        display: inline-flex;
+        position: relative;
+        cursor: var(--vf-cursor, default);
+        /* Display scaling: metrics are authored in *system pixels* and
+           multiplied by --vf-scale (default 1 = today's rendering). Opt a
+           subtree into true 72dpi size via applyScale()/--vf-scale — see
+           src/scale.ts. The chrome font scales with the control. */
+        font-size: calc(var(--vf-scale, 1) * var(--vf-font-size-display, 16px));
+      }
+      /* Breathing room for the default-button ring drawn at inset -4 system px.
+         A vf-button-group zeroes this (via --vf-button-ring-margin) and reserves
+         the ring space itself, so grouped button *faces* align instead of their
+         margin boxes — see src/components/vf-button-group.ts. */
+      :host([variant='default']) {
+        margin: calc(
+          var(--vf-scale, 1) * var(--vf-button-ring-margin, ${4}px)
+        );
+      }
+      /* The default ring: a 3px stepped band with a transparent 1px gap to the
+         button, clipped as an evenodd donut so the gap shows the surface
+         behind it (the reference's gap pixels are alpha-0). */
+      :host([variant='default'])::before {
+        content: '';
+        position: absolute;
+        /* The ring anchors to the host, not the corrected button, so each
+           inset composes the snap offset (see grid-snap.ts) to ride along. */
+        top: calc(var(--vf-scale, 1) * -${4}px + var(--vf-snap-dy, 0px));
+        left: calc(var(--vf-scale, 1) * -${4}px + var(--vf-snap-dx, 0px));
+        bottom: calc(var(--vf-scale, 1) * -${4}px - var(--vf-snap-dy, 0px));
+        right: calc(var(--vf-scale, 1) * -${4}px - var(--vf-snap-dx, 0px));
+        background: var(--vf-black, #000);
+        clip-path: ${y(p(u, d))};
+        pointer-events: none;
+      }
+      /* Disabled default: the fat outer ring dims to gray; the inner button
+         border stays solid black (see button:disabled) — the System 7 reading,
+         where the ring and the title dim together and the button's own frame
+         does not. (The original dimmed with a 50% stipple; gray standing in
+         for it is the kit's one liberty here — SPEC §1.)
+
+         Both disabled routes need a selector, because only one of them is an
+         attribute: an ancestor <fieldset disabled> disables the control
+         through formDisabledCallback, which sets the form-disabled custom
+         state and never touches the disabled attribute. Keyed on the
+         attribute alone, a default button inside a disabled fieldset greyed
+         its label — that comes from the inner <button>'s own :disabled —
+         while its ring stayed solid black. Separate rules rather than one
+         :is() list: an engine that doesn't parse :state() drops the whole
+         selector it appears in, and the attribute case should survive that
+         on its own. */
+      :host([variant='default'][disabled])::before {
+        background: var(--vf-disabled, #c0c0c0);
+      }
+      :host([variant='default']:state(form-disabled))::before {
+        background: var(--vf-disabled, #c0c0c0);
+      }
+      /* The native button paints no box of its own — its frame and face are
+         the stepped pseudo-element silhouettes below. Keeping the clip-paths
+         off the button itself leaves the hit area a plain rectangle, and
+         anything painted outside the silhouette (a ring a consumer restores
+         on ::part(button)) unclipped. */
+      button {
+        position: relative;
+        /* Own stacking context so the negative-z silhouettes stay inside the
+           button: above everything behind it, below the label. */
+        z-index: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        /* 20px, not the 22px fields: the reference sheets put the button face
+           at 80×20 (and the default ring's inner box at exactly that), so the
+           ring traces were authored against a 20px face. --vf-control-height
+           stays the *field* height — see SPEC §3. */
+        height: calc(var(--vf-scale, 1) * var(--vf-button-height, 20px));
+        min-width: calc(var(--vf-scale, 1) * 64px);
+        /* Fill the host so a vf-button-group can stretch this face to the
+           shared column width. Standalone (shrink-wrapped host) it's a no-op. */
+        flex: var(--vf-button-flex, 0 1 auto);
+        padding: 0 calc(var(--vf-scale, 1) * 14px);
+        background: none;
+        border: none;
+        color: var(--vf-black, #000);
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        white-space: nowrap;
+        cursor: inherit;
+      }
+      /* Frame: the outer silhouette in solid black. The face below covers all
+         but the outline, leaving the reference's exact border pixels — the
+         QuickDraw difference-of-silhouettes, not a stroked border. */
+      button::before,
+      button::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+      }
+      button::before {
+        background: var(--vf-black, #000);
+        clip-path: ${y(f(l))};
+      }
+      /* Face: white fill inset one pixel, with its own traced corner steps. */
+      button::after {
+        background: var(--vf-white, #fff);
+        clip-path: ${y(f(c))};
+      }
+      /* Pressed: instant white-on-black inversion. */
+      button:active:not(:disabled) {
+        color: var(--vf-white, #fff);
+      }
+      button:active:not(:disabled)::after {
+        background: var(--vf-black, #000);
+      }
+      /* The label rides in its own box so the focus underline can span the
+         text and not the button's padding: as the flex item it shrink-wraps
+         to the label, and its 20px line box puts the baseline a known
+         distance above its bottom edge (see vfFocusUnderline). */
+      .label {
+        position: relative;
+      }
+      /* Keyboard focus is the dashed rule under the label, not a ring around
+         the control — so the UA's own outline goes. */
+      button:focus-visible {
+        outline: none;
+      }
+      /* …and off the host too. Blink doesn't currently propagate
+         :focus-visible to a delegatesFocus host, so today this paints nothing
+         — but SPEC §vf-button claims the ring is off on both, and that claim
+         should hold because the component says so, not because one engine
+         happens to agree. Its own rule, not a selector list with the above:
+         one unparsed selector would drop the other with it. */
+      :host(:focus-visible) {
+        outline: none;
+      }
+      button:focus-visible .label::after {
+        ${o}
+      }
+      /* Disabled: only the label dims to gray; the solid black border stays. */
+      button:disabled {
+        color: var(--vf-disabled, #c0c0c0);
+      }
+    `
+		];
+	}
+	#e;
+	get resolvedType() {
+		let e = String(this.type ?? "").toLowerCase();
+		return e === "submit" ? "submit" : e === "reset" ? "reset" : "button";
+	}
+	click() {
+		let e = this.buttonEl;
+		e ? e.click() : super.click();
+	}
+	render() {
+		return _`
+      <button
+        part="button"
+        class="vf-snap"
+        type="button"
+        aria-label=${this.hostAriaLabel || v}
+        aria-describedby=${this.describedBy}
+        ?disabled=${this.isDisabled}
+        @click=${this.handleClick}
+      >
+        <span class="label"><slot></slot></span>
+      </button>
+      ${this.renderDescription()}
+    `;
+	}
+	activate() {
+		let e = this.resolvedType;
+		if (!this.internals.form || e === "button" || this.isDisabled) return;
+		let t = document.createElement("button");
+		t.type = e, t.slot = S, t.addEventListener("click", (e) => e.stopPropagation()), e === "submit" && (this.name && (t.name = this.name, t.value = this.value), this.formAction && (t.formAction = this.formAction), this.formEnctype && (t.formEnctype = this.formEnctype), this.formMethod && (t.formMethod = this.formMethod), this.formTarget && (t.formTarget = this.formTarget), t.formNoValidate = this.formNoValidate), this.#e = !0;
+		try {
+			this.append(t), t.click();
+		} finally {
+			t.remove(), this.#e = !1;
+		}
+	}
+};
+n([b({ reflect: !0 })], C.prototype, "variant", void 0), n([b({ reflect: !0 })], C.prototype, "type", void 0), n([b({ reflect: !0 })], C.prototype, "name", void 0), n([b({ reflect: !0 })], C.prototype, "value", void 0), n([b({
+	attribute: "formaction",
+	reflect: !0
+})], C.prototype, "formAction", void 0), n([b({
+	attribute: "formenctype",
+	reflect: !0
+})], C.prototype, "formEnctype", void 0), n([b({
+	attribute: "formmethod",
+	reflect: !0
+})], C.prototype, "formMethod", void 0), n([b({
+	type: Boolean,
+	attribute: "formnovalidate",
+	reflect: !0
+})], C.prototype, "formNoValidate", void 0), n([b({
+	attribute: "formtarget",
+	reflect: !0
+})], C.prototype, "formTarget", void 0), n([x("button")], C.prototype, "buttonEl", void 0), C = n([e("vf-button")], C);
+//#endregion
+export { C as VfButton };

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

@@ -0,0 +1,60 @@
+import { type PropertyValues } from 'lit';
+import { VfFormControl } from '../form-control.js';
+declare const VfCheckbox_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & (abstract new (...args: any[]) => import("../toggle-control.js").VfToggleControlInterface) & typeof VfFormControl;
+/**
+ * The classic System 7 checkbox: a 13×13 white square with a 1px black
+ * border whose checked state is the corner-to-corner ✕ glyph — the pixel-exact
+ * cross traced from the Classic Macintosh UI Kit sprite. The border "thickens"
+ * while pressed, exactly like the original control.
+ *
+ * Form-associated: submits `value` under `name` when checked (like a native
+ * checkbox) and restores its initial checked state on form reset. Toggles on
+ * click and Space.
+ *
+ * @slot - The label, rendered to the right of the box with a 6px gap.
+ * @csspart box - The 13×13 checkbox square.
+ * @csspart label - The label wrapper around the slot.
+ * @fires vf-change - When toggled by user interaction. `detail: { checked: boolean }`.
+ * @fires input - Native event, dispatched from the host per user toggle (with
+ *   `change`, the pair a native checkbox fires). A programmatic `checked` set
+ *   fires nothing, as on a native checkbox.
+ * @fires change - Native event, dispatched from the host per user toggle so
+ *   form delegation and framework bindings hear it.
+ */
+export declare class VfCheckbox extends VfCheckbox_base {
+    static styles: import("lit").CSSResult[];
+    /** Whether the checkbox is checked. */
+    checked: boolean;
+    /** Form field name used when submitting. */
+    name: string;
+    /** Value submitted with the form while checked. */
+    value: string;
+    /** `required` on a checkbox means it must be checked, as on a native one. */
+    protected get valueMissing(): boolean;
+    /** The message a native `<input type="checkbox" required>` reports. */
+    protected get valueMissingMessage(): string;
+    constructor();
+    connectedCallback(): void;
+    /** The handle {@link VfFormControl} already attached. */
+    protected get toggleInternals(): ElementInternals;
+    /** `disabled`, or an ancestor `<fieldset disabled>`. */
+    protected get toggleDisabled(): boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Form-associated lifecycle: restores the initial checked state. */
+    formResetCallback(): void;
+    /**
+     * Restored form state means the flag, not `value`: a checkbox only ever
+     * stores its submission string while checked, so getting one back IS
+     * "checked" (the base default would have overwritten `value` instead).
+     */
+    protected applyFormState(): void;
+    /** Click/Space on an enabled checkbox flips it. */
+    protected activate(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-checkbox': VfCheckbox;
+    }
+}
+export {};

package/dist/components/vf-checkbox.js

@@ -0,0 +1,135 @@
+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 { vfDisplay as r } from "../styles/recipes/display-face.js";
+import { vfBase as i } from "../styles/recipes/host.js";
+import { vfFocusUnderline as a } from "../styles/recipes/focus.js";
+import { vfToggle as o } from "../styles/recipes/toggle.js";
+import { emit as s, emitNative as c } from "../events.js";
+import { CHECKBOX_X as l, glyphSvg as u } from "../glyphs.js";
+import { VfFormControl as d } from "../form-control.js";
+import { VfToggleControl as f } from "../toggle-control.js";
+import { css as p, html as m } from "lit";
+import { property as h } from "lit/decorators.js";
+import { classMap as g } from "lit/directives/class-map.js";
+//#region src/components/vf-checkbox.ts
+var _ = class extends n(f(d)) {
+	static {
+		this.styles = [
+			i,
+			r,
+			o,
+			p`
+      /* Keyboard focus underlines the box itself — not the label, and not a
+         ring around either (see vfFocusUnderline). Both adjustments below are
+         the 1px border: an absolutely positioned pseudo sizes to the PADDING
+         box, which the border sits outside of. So the rule grows 1px each side
+         to span the whole well, and its offset counts the border before the
+         blank row and the rule itself: −(1 + 1 + 1). */
+      :host(:focus-visible) .box::after {
+        --vf-focus-underline-offset: -3px;
+        ${a}
+        left: calc(var(--vf-scale, 1) * -1px);
+        right: calc(var(--vf-scale, 1) * -1px);
+      }
+      .box {
+        position: relative;
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(var(--vf-scale, 1) * 13px);
+        height: calc(var(--vf-scale, 1) * 13px);
+        background: var(--vf-white, #fff);
+        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+        color: var(--vf-black, #000);
+      }
+      /* Pressed: border thickens to 2px (classic press feedback). */
+      :host(:active) .box:not(.dim) {
+        box-shadow: inset 0 0 0 calc(var(--vf-scale, 1) * 1px) var(--vf-black, #000);
+      }
+      /* Forced colors never paints box-shadow, so the press feedback above
+         goes silent. The same thickening as a real border-width change: with
+         box-sizing: border-box the 13×13 box holds and the extra pixel grows
+         inward, exactly where the inset shadow painted. */
+      @media (forced-colors: active) {
+        :host(:active) .box:not(.dim) {
+          border-width: calc(var(--vf-scale, 1) * 2px);
+        }
+      }
+      /* Native 12×12 sprite — centered in the 13×13 box; the glyph's own 1px
+         transparent margin lets it overhang onto the border harmlessly. Scales
+         with the box; crispEdges keeps it whole-device-pixel at any dpr. */
+      .check {
+        flex: none;
+        width: calc(var(--vf-scale, 1) * 12px);
+        height: calc(var(--vf-scale, 1) * 12px);
+        display: none;
+        color: inherit;
+      }
+      :host([checked]) .check {
+        display: block;
+      }
+    `
+		];
+	}
+	get valueMissing() {
+		return !this.checked;
+	}
+	get valueMissingMessage() {
+		return "Please check this box if you want to proceed.";
+	}
+	constructor() {
+		super(), this.checked = !1, this.name = "", this.value = "on", this.internals.role = "checkbox";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.latchFormDefault(this.checked);
+	}
+	get toggleInternals() {
+		return this.internals;
+	}
+	get toggleDisabled() {
+		return this.isDisabled;
+	}
+	render() {
+		let e = this.isDisabled;
+		return m`
+      <span
+        class=${g({
+			box: !0,
+			dim: e,
+			"vf-snap": !0
+		})}
+        part="box"
+        aria-hidden="true"
+      >
+        ${u(l, "check")}
+      </span>
+      <span class=${g({
+			label: !0,
+			dim: e,
+			"vf-snap": !0
+		})} part="label">
+        <slot></slot>
+      </span>
+    `;
+	}
+	updated(e) {
+		super.updated(e), (e.has("checked") || e.has("value") || this.disabledChanged(e)) && this.syncFormValue(this.checked ? this.value : null);
+	}
+	formResetCallback() {
+		this.checked = this.formDefault(!1);
+	}
+	applyFormState() {
+		this.checked = !0;
+	}
+	activate() {
+		this.checked = !this.checked, this.focus(), s(this, "vf-change", { checked: this.checked }), c(this, "input"), c(this, "change");
+	}
+};
+t([h({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "checked", void 0), t([h({ reflect: !0 })], _.prototype, "name", void 0), t([h()], _.prototype, "value", void 0), _ = t([e("vf-checkbox")], _);
+//#endregion
+export { _ as VfCheckbox };

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

@@ -0,0 +1,95 @@
+import { LitElement } from 'lit';
+declare const VfContainer_base: (new (...args: any[]) => import("../size.js").VfSizedInterface) & (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-container>` — a box that is nothing but its declared size.
+ *
+ * The kit's positioned-placement story (src/position.ts) ends with one line of
+ * CSS it can't write for you: children placed with `top`/`left` need a
+ * positioned ancestor, and while every kit container is one — a window body, a
+ * stack, a fieldset — a region of *your own* needs `position: relative` in a
+ * stylesheet. This component is that region as an element: declare `width` and
+ * `height` in whole system px, slot anything into it, place children against
+ * its origin. A DITL's enclosing rectangle, with nothing drawn in it.
+ *
+ * ```html
+ * <vf-container width="200" height="120">
+ *   <vf-icon label="System" width="64" top="8" left="12">…</vf-icon>
+ *   <vf-icon label="Finder" width="64" top="8" left="104">…</vf-icon>
+ * </vf-container>
+ * ```
+ *
+ * The rectangle is the whole API — `width`/`height` here, plus the `top`/`left`
+ * pair nearly every component takes ({@link VfPositioned}), so a container is
+ * itself placeable: inside a window, a desktop, or another container, at whole
+ * system px that keep its box on the device-pixel grid by construction.
+ *
+ * **It is not a `vf-stack`.** The stack is a flexbox with opinions — it
+ * distributes children along an axis, compiles `fill-width`/`fill-height` into
+ * flex, defaults a cross-axis alignment. This box has no layout opinion at
+ * all: in-flow children get normal flow, placed children get a coordinate
+ * system, and that is the whole API. Reach for it when the stack's opinions
+ * are the thing in the way — a field of placed icons, a fixed stage for
+ * absolutely-positioned art, a consumer's own composition that brings its
+ * layout with it.
+ *
+ * **The declared size is the layout.** `width`/`height` land on the host as a
+ * live `calc(var(--vf-scale, 1) * Npx)` ({@link VfSized}), so the box scales
+ * with the display and sits on the device-pixel grid by construction. Content
+ * that outgrows the box overflows it rather than growing it — the number is
+ * the layout, and content that doesn't fit is a number to raise. Leave a
+ * dimension off and that axis shrink-wraps: `fit-content`, not the parent's
+ * width, because a layout box that silently claimed a size nobody declared
+ * would be inventing one (the `vf-stack` rule, held here too).
+ *
+ * **It paints nothing and means nothing.** No border, background, role,
+ * keyboard behavior or selection — what it holds decides what it is.
+ *
+ * **It holds its box on the device-pixel grid** — with a `GridSnapController`.
+ * A container's box is itself the consumer's coordinate system, including for
+ * non-`vf` content that cannot correct itself, so the box is the thing to
+ * hold on the grid. The shadow box below owns the `position: relative` anchor
+ * and the `vf-snap` class together, so under `applyGridSnap()` the correction
+ * moves the whole coordinate system — everything placed against it rides
+ * along instead of being re-corrected child by child. (`vf-stack` shipped
+ * without a controller on the theory that slotted `vf-*` children correct
+ * their own origins; this component is where that theory's gap — consumer
+ * content — became visible, and the stack has since adopted the same
+ * arrangement.)
+ *
+ * Like the stack it is **typographically transparent**: `vfBase`'s chrome
+ * dress is returned to `inherit` on the host, so wrapping content in a sized
+ * box changes nothing about how that content reads.
+ *
+ * `fill-width` / `fill-height` work here the way they do everywhere: read
+ * about the host (be as big as *its* parent allows), and compiled for slotted
+ * children — `width: 100%` in normal flow, so a child filling the cross of a
+ * declared box needs no stylesheet. A height fill needs a declared `height`
+ * to resolve against; with none it is inert, not an error.
+ *
+ * @slot - The content. In flow by default; `top`/`left` on a kit child places
+ *   it against this box's origin. `fill-width` / `fill-height` on a child
+ *   fills it to the declared box.
+ */
+export declare class VfContainer extends VfContainer_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Default-on display scaling (true 72dpi size); see src/scale.ts. Without
+     * one, a lone container on a plain page would resolve its declared size
+     * against the `var(--vf-scale, 1)` fallback while its slotted children each
+     * self-scaled around it — the vf-stack reasoning, inherited with the rest.
+     */
+    private readonly scale;
+    /**
+     * Hold the box on the device-pixel grid under `applyGridSnap()` — see the
+     * class doc. The host is what gets measured; `.box` (vf-snap) is where the
+     * correction lands.
+     */
+    private readonly gridSnap;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-container': VfContainer;
+    }
+}
+export {};

package/dist/components/vf-container.js

@@ -0,0 +1,86 @@
+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 { VfSized as o } from "../size.js";
+import { LitElement as s, css as c, html as l } from "lit";
+//#region src/components/vf-container.ts
+var u = class extends o(r(s)) {
+	constructor(...e) {
+		super(...e), this.scale = new t(this), this.gridSnap = new a(this);
+	}
+	static {
+		this.styles = [i, c`
+      :host {
+        display: block;
+        /* Shrink-wrap an undeclared axis rather than claim the parent's
+           width — the vf-stack rule: a layout box must not hand out a size
+           nobody declared. A declared width/height lands on the host's inline
+           style (VfSized) and beats this. */
+        width: fit-content;
+        /* Typographic transparency — the same reset vf-stack carries, for the
+           same reason: vfBase dresses a host as chrome (body face, ratio line
+           box, black, unselectable), and a box that holds no text of its own
+           must not change how slotted content reads. font is a shorthand, so
+           it carries the line box back with the family, size and weight. */
+        font: inherit;
+        -webkit-font-smoothing: inherit;
+        color: inherit;
+        user-select: inherit;
+        -webkit-user-select: inherit;
+        text-align: inherit;
+      }
+
+      /* The coordinate system, as one shadow box coinciding with the host box.
+         vf-snap (vfBase) gives it position: relative plus the controller's
+         --vf-snap-dx/-dy offset — so it is BOTH the positioning anchor for
+         children placed with top/left (src/position.ts) AND the element the
+         grid-snap correction lands on. One element owning both is the point:
+         corrected, it takes every placed child with it, kit or not. */
+      .box {
+        /* flow-root: contain slotted margins, so the box's top edge — the
+           origin placed children measure from — stays glued to the host's
+           corner instead of being pushed down by a first child's margin
+           collapsing through. */
+        display: flow-root;
+        /* Coincide with a declared height (100% of a definite host height;
+           against an undeclared one it computes to auto and wraps content),
+           so slotted percentage fills resolve against the stated box. */
+        height: 100%;
+      }
+
+      /* The same two words a child uses, read about the host itself — for the
+         parents that can give this box a size: a window body, a filled stack
+         column, a grid cell. A percentage is the one fill a page can always
+         express; a declared width/height on the inline style beats it. */
+      :host([fill-width]) {
+        width: 100%;
+      }
+      :host([fill-height]) {
+        height: 100%;
+      }
+
+      /* And compiled for slotted children. Normal flow has no flex axes to
+         translate onto, so both fills are the percentage form: width resolves
+         against the box always, height only against a declared height —
+         percentage-against-auto computes to auto, so a fill with nothing to
+         take is inert, not an error (the vf-stack wording, kept true here). A
+         light-DOM declaration beats a ::slotted one, so a page can still
+         override either on its own children. */
+      ::slotted([fill-width]) {
+        width: 100%;
+      }
+      ::slotted([fill-height]) {
+        height: 100%;
+      }
+    `];
+	}
+	render() {
+		return l`<div class="vf-snap box"><slot></slot></div>`;
+	}
+};
+u = n([e("vf-container")], u);
+//#endregion
+export { u as VfContainer };