vintage-frames 0.1.0

package/dist/components/vf-dialog.js

@@ -0,0 +1,280 @@
+import { vfElement as e } from "../define.js";
+import { snapSys as t, toSysExact as n } from "../scale.js";
+import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { vfDisplayDecls as i } from "../styles/recipes/display-face.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { vfStripes as o } from "../styles/recipes/pattern.js";
+import { vfChromeFrame as s, vfModalFrame as c } from "../styles/recipes/surface.js";
+import { vfTitleBar as l, vfWindowWidgets as u } from "../styles/recipes/title-bar.js";
+import { vfFocus as d, vfFocusRing as f } from "../styles/recipes/focus.js";
+import { vfScrollRail as p } from "../styles/recipes/scroll-rail.js";
+import { DragController as m } from "../drag.js";
+import { TitleCenterController as h, chromeTitleBar as g, closeBox as _, widgetLabel as v } from "../chrome.js";
+import { ScrollStateController as y } from "../scroll-state.js";
+import { ScrollRailController as b, renderScrollRail as x } from "../scroll-rail.js";
+import { VfModalDialog as S, modalDialogStyles as C } from "../modal-dialog.js";
+import "./vf-button-group.js";
+import { css as w, html as T, nothing as E } from "lit";
+import { property as D, query as O, state as k } from "lit/decorators.js";
+import { styleMap as A } from "lit/directives/style-map.js";
+//#region src/components/vf-dialog.ts
+var j = class extends S {
+	constructor(...e) {
+		super(...e), this._drag = new m(this, {
+			onDragStart: (e) => {
+				if (e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box"))) return null;
+				let r = this._dialog;
+				if (!r?.open) return null;
+				if (this.left != null || this.top != null) return {
+					x: this.left ?? 0,
+					y: this.top ?? 0
+				};
+				let i = r.getBoundingClientRect();
+				return {
+					x: t(n(i.left, this), this),
+					y: t(n(i.top, this), this)
+				};
+			},
+			onDrag: (e, t) => this.placeAt(e, t)
+		}), this._titleCenter = new h(this), this.heading = "", this.label = "", this.closable = !1, this._hasButtons = !1, this._scrollable = !1, this._scrollState = new y(this, () => this._content, void 0, (e) => {
+			this._scrollable = e.y;
+		}), this._rail = new b(this, { getScroll: () => this._content });
+	}
+	static {
+		this.styles = [
+			a,
+			o,
+			d,
+			s,
+			c,
+			l,
+			u,
+			p,
+			C,
+			w`
+      :host {
+        display: contents;
+      }
+      /* A declared height lands on the <dialog> (dialogSize), so the frame has
+         to be told to fill it — vfChromeFrame is skin only. Both chromes are
+         full-height flex columns for the same reason vf-window's is: the body
+         takes the slack the title bar doesn't. The frame is the flex child of
+         the <dialog> itself (modalDialogStyles), not a height: 100% block —
+         a percentage can't resolve against the undeclared-height dialog that
+         only the UA's dialog:modal max-height caps, and that spill was
+         exactly how a tall modal used to strand its buttons off-screen. */
+      .vf-frame,
+      .vf-modal-frame {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0;
+      }
+      .vf-modal-frame-inner {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0;
+      }
+      /* The bar is always a drag handle here (a movable modal has no immovable
+         state, unlike vf-window's [movable]); keep touch gestures from
+         scrolling the page instead of moving the dialog. */
+      .vf-title-bar {
+        touch-action: none;
+      }
+      /* Close box clearance: the same 60px vf-window uses, so an ellipsized
+         title can't run under the widget (the title is centered, so the inset
+         has to cover both sides). */
+      :host([closable]) .vf-title {
+        --vf-title-inset: 60px;
+      }
+      /* Takes the slack under the title bar. A modal is a fixed box — the
+         frame never grows with its body — but content taller than the box is
+         no longer silently clipped: the .content region below scrolls it
+         under a System 7 rail, with the footer pinned outside the scroll so
+         the action buttons stay reachable. overflow: hidden stays as the
+         frame-level backstop. A slotted vf-select's list still escapes: it is
+         position:fixed off the control's own rect (see vf-select.ts). */
+      .body {
+        --vf-surface: var(--vf-white, #ffffff);
+        background: var(--vf-white, #ffffff);
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: hidden;
+        padding: calc(var(--vf-scale, 1) * 16px);
+      }
+      /* The scroll region's positioned wrapper (the .scroll-frame overlay and
+         the rail overlay anchor against it). Shrink-only (flex-grow 0): with
+         slack in the box the footer sits right after the content, exactly
+         where block flow put it before this wrapper existed — the wrap only
+         gives height back when the content doesn't fit. */
+      .content-wrap {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 0 1 auto;
+        min-height: 0;
+      }
+      /* hidden, not auto, until the controller says otherwise — the two have
+         to agree on what "overflowing" means or the dialog scrolls without a
+         rail.
+         ScrollStateController deliberately ignores the body face's negative
+         half-leading (LEADING_SPILL_SYS, scroll-state.ts): vf-paragraph sets
+         Geneva's 12-system-px line box under a 16-system-px em, so the inline
+         box spills 2 inkless system px past the block box and scrollHeight
+         counts it. auto doesn't know that — it saw 6 CSS px of overflow at
+         scale 3 and handed the user a fixed info dialog that rubber-banded
+         under the wheel with no scrollbar to explain it.
+         hidden still scrolls programmatically (scrollIntoView on a focused
+         control keeps working); it just refuses to invent a user-facing scroll
+         the component has decided doesn't exist. */
+      .content {
+        flex: 0 1 auto;
+        min-height: 0;
+        overflow-y: hidden;
+      }
+      /* Only while genuinely over-stuffed (ScrollStateController's measured
+         signal) does the region scroll — reserving the 16px channel as its
+         own padding (what the native gutter used to reserve) — and only then
+         do the rail and the 1px frame boxing it appear. While the content
+         fits, none of this matches and the body renders exactly as it always
+         has. */
+      .content[data-overflow-y='true'] {
+        overflow-y: scroll;
+        padding-right: calc(var(--vf-scale, 1) * 16px);
+      }
+      /* The rail rides the wrapper as an OVERLAY pinned to its right edge,
+         inside the boxing frame's lines (the 1px insets; the fourth side is
+         its own divider) — deliberately out of the layout flow: a rail
+         column's two fixed 15px arrow cells would hand the region a 32px
+         minimum height, and a short dialog would then measure as fitting
+         with the rail shown and overflowing without it, flip-flopping
+         forever. An overlay cannot move the box; the channel the content
+         pays for is the padding above. Hidden until the region actually
+         scrolls. */
+      .content-wrap .vf-rail {
+        position: absolute;
+        top: calc(var(--vf-scale, 1) * 1px);
+        right: calc(var(--vf-scale, 1) * 1px);
+        bottom: calc(var(--vf-scale, 1) * 1px);
+        display: none;
+      }
+      .content[data-overflow-y='true'] ~ .vf-rail {
+        display: grid;
+      }
+      /* The 1px frame boxing the scrolling region and its rail — an overlay
+         (spanning both grid columns via inset 0) so the fitting dialog keeps
+         no reserved line. */
+      .scroll-frame {
+        position: absolute;
+        inset: 0;
+        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+        pointer-events: none;
+        display: none;
+      }
+      .content[data-overflow-y='true'] ~ .scroll-frame {
+        display: block;
+      }
+      /* A scrollable region is a keyboard stop (tabindex in the template);
+         mark it with the kit's dotted ring, inset to stay in-box — the same
+         treatment as vf-scroll-area's viewport. */
+      .content:focus-visible {
+        --vf-focus-offset: -2px;
+        ${f}
+      }
+      /* The plain frame's heading: centered chrome type at the top of the
+         body, the way dBoxProc dialogs drew their title in content (see
+         Windows/modal dialog.png). No patch, no ellipsis — it's body-top
+         text, not a bar. */
+      .plain-heading {
+        ${i}
+        display: block;
+        text-align: center;
+        margin-bottom: calc(var(--vf-scale, 1) * 16px);
+      }
+      /* Optional action row (slot="buttons"): a right-aligned vf-button-group
+         that only takes space when populated. */
+      .footer {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: calc(var(--vf-scale, 1) * 16px);
+      }
+      .footer.empty {
+        display: none;
+      }
+    `
+		];
+	}
+	_onBodySlotChange() {
+		this._scrollState.measure(), this._rail.sync();
+	}
+	_onCloseClick() {
+		this.close();
+	}
+	render() {
+		let e = !this.label && this.heading !== "", t = this.frame === "plain", n = T`
+      <div class="body" part="body">
+        <div class="content-wrap">
+          <div
+            class="content vf-scroll"
+            part="content"
+            tabindex=${this._scrollable ? "0" : E}
+            role=${this._scrollable ? "group" : E}
+          >
+            ${t && this.heading !== "" ? T`<span class="plain-heading" part="title" id="title"
+                  >${this.heading}</span
+                >` : E}
+            <slot @slotchange=${this._onBodySlotChange}></slot>
+          </div>
+          ${x(this._rail, "vertical")}
+          <div class="scroll-frame" aria-hidden="true"></div>
+        </div>
+        <div class="footer ${this._hasButtons ? "" : "empty"}" part="footer">
+          <vf-button-group class="buttons" part="buttons">
+            <slot
+              name="buttons"
+              @slotchange=${this._onButtonsSlotChange}
+            ></slot>
+          </vf-button-group>
+        </div>
+      </div>
+    `;
+		return T`
+      <dialog
+        style=${A(this.dialogSize)}
+        aria-labelledby=${e ? "title" : E}
+        aria-label=${e ? E : this.label || "Dialog"}
+        @cancel=${this._onNativeCancel}
+        @close=${this._onNativeClose}
+      >
+        ${t ? T`
+              <div class="vf-modal-frame" part="frame">
+                <div class="vf-modal-frame-inner">${n}</div>
+              </div>
+            ` : T`
+              <div class="vf-frame" part="frame">
+                ${g(this._drag, T`
+                    ${this.closable ? _(v("Close", this.heading), this._onCloseClick) : E}
+                    <span class="vf-title" part="title" id="title"
+                      >${this.heading}</span
+                    >
+                  `)}
+                ${n}
+              </div>
+            `}
+      </dialog>
+    `;
+	}
+	_onButtonsSlotChange(e) {
+		let t = e.target;
+		this._hasButtons = t.assignedElements().length > 0;
+	}
+};
+r([D()], j.prototype, "heading", void 0), r([D()], j.prototype, "label", void 0), r([D({
+	type: Boolean,
+	reflect: !0
+})], j.prototype, "closable", void 0), r([D({ reflect: !0 })], j.prototype, "frame", void 0), r([k()], j.prototype, "_hasButtons", void 0), r([O(".content")], j.prototype, "_content", void 0), r([k()], j.prototype, "_scrollable", void 0), j = r([e("vf-dialog")], j);
+//#endregion
+export { j as VfDialog };

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

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+declare const VfFieldset_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-fieldset>` — the classic "Install Location" group box.
+ *
+ * A 1px black rectangle whose bold legend sits on the top border, punching a
+ * gap through it with a `var(--vf-surface, ...)` background patch — so it
+ * matches whatever surface sits behind it.
+ *
+ * @slot - Group contents.
+ * @slot legend - Rich legend content; overrides the `legend` attribute.
+ * @csspart fieldset - The bordered box.
+ * @csspart legend - The legend patch on the top border.
+ * @cssprop [--vf-surface=...] - bg behind legends/label patches; `vf-window`
+ *   and `vf-dialog` both set it to white
+ */
+export declare class VfFieldset extends VfFieldset_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    private readonly scale;
+    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    private readonly gridSnap;
+    /** Legend text shown on the top border. */
+    legend: string;
+    /** Whether the named `legend` slot has assigned content. */
+    private _hasSlottedLegend;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-fieldset': VfFieldset;
+    }
+}
+export {};

package/dist/components/vf-fieldset.js

@@ -0,0 +1,76 @@
+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 { vfDisplayDecls as i } from "../styles/recipes/display-face.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { GridSnapController as o } from "../grid-snap.js";
+import { LitElement as s, css as c, html as l, nothing as u } from "lit";
+import { property as d, state as f } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+//#region src/components/vf-fieldset.ts
+var m = class extends r(s) {
+	constructor(...e) {
+		super(...e), this.scale = new t(this), this.gridSnap = new o(this), this.legend = "", this._hasSlottedLegend = !1;
+	}
+	static {
+		this.styles = [a, c`
+      :host {
+        display: block;
+      }
+      .fieldset {
+        position: relative;
+        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+        padding: calc(var(--vf-scale, 1) * 14px) calc(var(--vf-scale, 1) * 12px)
+          calc(var(--vf-scale, 1) * 10px);
+        margin-top: calc(var(--vf-scale, 1) * 8px);
+      }
+      .legend {
+        /* Chicago-style legend (chrome); grouped content keeps the body face. */
+        ${i}
+        position: absolute;
+        top: -0.7em;
+        left: calc(var(--vf-scale, 1) * 8px);
+        padding: 0 calc(var(--vf-scale, 1) * 5px);
+        /* Punches through the border, matching the surface behind it. */
+        background: var(--vf-surface, var(--vf-white, #fff));
+        white-space: nowrap;
+      }
+      .legend.empty {
+        display: none;
+      }
+    `];
+	}
+	render() {
+		let e = !this.legend && !this._hasSlottedLegend;
+		return l`
+      <div
+        class="fieldset vf-snap"
+        part="fieldset"
+        role="group"
+        aria-labelledby=${e ? u : "legend"}
+      >
+        <span
+          id="legend"
+          class=${p({
+			legend: !0,
+			empty: e
+		})}
+          part="legend"
+        >
+          <slot name="legend" @slotchange=${this.#e}>
+            ${this.legend}
+          </slot>
+        </span>
+        <slot></slot>
+      </div>
+    `;
+	}
+	#e(e) {
+		let t = e.target;
+		this._hasSlottedLegend = t.assignedNodes({ flatten: !0 }).length > 0;
+	}
+};
+n([d()], m.prototype, "legend", void 0), n([f()], m.prototype, "_hasSlottedLegend", void 0), m = n([e("vf-fieldset")], m);
+//#endregion
+export { m as VfFieldset };

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

@@ -0,0 +1,124 @@
+import { LitElement } from 'lit';
+/** How `vf-grid` draws a cell boundary. */
+export type VfGridRules = 'solid' | 'dashed' | 'none';
+declare const VfGrid_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-grid>` — a lattice of equal cells separated by 1px rules.
+ *
+ * The reference screens are full of these: the Figure 5-6 tool palette's 3×3
+ * of desk accessories, a color picker's swatch table, a pattern or icon
+ * chooser. They are all the same drawing — fixed-size cells butted together
+ * with a hairline between them — and every one of them used to be hand-rolled
+ * page CSS: a `display: grid` with a 1px gap over a black background, so the
+ * background showed through as the rules. That trick only draws *solid*
+ * interior rules, has to restate the cell size in three places, and puts the
+ * kit's own artwork in the consumer's stylesheet.
+ *
+ * This draws it instead. State the cell count and cell size in whole system px
+ * and slot the cells in; the component owns the track geometry and the rules:
+ *
+ * ```html
+ * <vf-grid columns="3" rows="3" cell-width="26" cell-height="26">
+ *   <button>…</button>  <!-- nine of them, one per cell -->
+ * </vf-grid>
+ * ```
+ *
+ * **The rules are a masked lattice, not gaps.** The grid's 1px gaps make the
+ * room; a single overlay paints `--vf-black` through two tiled masks — one
+ * column of pixels at the horizontal pitch, one row at the vertical — so the
+ * pen switches from `solid` to `dashed` (1 on, 1 off) without the layout
+ * moving a pixel. It paints *under* the cells (`z-index: -1` inside the grid's
+ * own stacking context, above its surface), so an item that spans two cells
+ * covers the boundary it swallowed, and a cell's own ink — a pressed face, a
+ * focus rule, a hard shadow — is never crossed by a line.
+ *
+ * **Cells are centered in their wells.** What a palette holds is normally
+ * smaller than the well it sits in — a 16px icon in a 26px cell — so a slotted
+ * item is centered on both axes rather than parked in the corner, which is
+ * where grid's own `stretch` default leaves anything carrying its own size. A
+ * cell that means to fill its well — a tool button that inverts black when
+ * selected, a tile whose border merges with the lattice — says
+ * `place-self: stretch` and gets the whole track. (Under `collapse` that is
+ * already the default: those cells exist to meet the lines.)
+ *
+ * **The perimeter is part of the lattice**, and drawn by default: the box
+ * carries the 1px the outer lines need, and one uninterrupted pitch runs from
+ * edge to edge. `frameless` drops it, for a grid inside something that already
+ * draws that line — the desk-accessory palette is a `vf-window[flush]`, whose
+ * frame *is* the grid's outer border, and a doubled one would read as 2px.
+ *
+ * **`collapse` puts an item's own border on the rule.** A cell that draws its
+ * own 1px border — a bordered tile, a 16×16 swatch — otherwise sets that border
+ * *beside* the lattice line, and every boundary reads 2px thick. `collapse`
+ * pulls each cell back one pixel on all four sides, so the two become one line:
+ * the `border-collapse: collapse` of a table, in system px. Size the cells at
+ * *item − 2px* — `cell-width="14"` for a 16px item — and each item then spans
+ * lattice line to lattice line, sharing one with each neighbor:
+ *
+ * ```html
+ * <vf-grid columns="8" rows="4" cell-width="14" cell-height="14" collapse>
+ * ```
+ *
+ * The frame is what gives the outermost borders a line of their own to land on,
+ * and it ends the box exactly at the last item's outer edge; go `frameless` and
+ * they paint a pixel outside the grid's box instead.
+ *
+ * `rules="none"` is the pen, not the lattice: nothing is drawn, the gaps close
+ * up, and the cells butt directly together (there is then no perimeter and
+ * nothing for `collapse` to collapse onto, so it goes inert).
+ *
+ * **Semantics are the consumer's.** The grid is layout — it takes no role, no
+ * keyboard behavior and no selection, so what it holds decides what it is: put
+ * `role="group"`/`aria-label` on the host for a tool palette, `role="radiogroup"`
+ * for a picker, or nothing at all for a plain tiling. Slotted cells stay in the
+ * light DOM with their own semantics intact.
+ *
+ * @slot - The cells, in order — one element per cell.
+ * @csspart grid - The grid box itself (surface, tracks, frame padding).
+ * @csspart rules - The lattice overlay painting the rules.
+ * @cssprop --vf-surface - The surface behind the cells (default white).
+ */
+export declare class VfGrid extends VfGrid_base {
+    static styles: import("lit").CSSResult[];
+    /** Cells across the x axis. */
+    columns: number;
+    /**
+     * Cells down the y axis. Left unset the grid takes as many rows as the
+     * slotted cells need; set, it reserves that many — an unfilled cell still
+     * gets its rules, the way a palette keeps its empty wells.
+     */
+    rows?: number;
+    /** Cell width in whole system px. */
+    cellWidth: number;
+    /** Cell height in whole system px. */
+    cellHeight: number;
+    /**
+     * The pen every rule is drawn with: `solid` (default), `dashed` (1 system px
+     * on, 1 off), or `none` — no rules at all, and the cells butt together.
+     */
+    rules: VfGridRules;
+    /**
+     * Drop the outer border, leaving only the boundaries between cells. For a
+     * grid inside something that already draws that line — a `vf-window[flush]`,
+     * a `vf-fieldset` — where a second one would read as 2px.
+     */
+    frameless: boolean;
+    /**
+     * Collapse each cell's own 1px border onto the grid's rules instead of
+     * setting it beside them (see the class doc). Size the cells at *item − 2px*;
+     * the frame is what gives the outermost borders a line to land on, so a
+     * `frameless` grid lets them paint a pixel outside its box.
+     */
+    collapse: 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. */
+    private readonly gridSnap;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-grid': VfGrid;
+    }
+}
+export {};

package/dist/components/vf-grid.js

@@ -0,0 +1,133 @@
+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, nothing as l } from "lit";
+import { property as u } from "lit/decorators.js";
+import { styleMap as d } from "lit/directives/style-map.js";
+//#region src/components/vf-grid.ts
+var f = 1, p = 2, m = (e, t, n) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${e}' height='${t}' shape-rendering='crispEdges'%3E${n.map(([e, t]) => `%3Crect x='${e}' y='${t}' width='1' height='1'/%3E`).join("")}%3C/svg%3E")`, h = (e, t, n) => ({
+	x: m(2 * e, n, [[0, 0], [e, e % n]]),
+	y: m(n, 2 * t, [[0, 0], [t % n, t]])
+}), g = (e, t) => {
+	let n = Math.trunc(e);
+	return Number.isFinite(n) && n > 0 ? n : t;
+}, _ = (e) => `calc(var(--vf-scale, 1) * ${e}px)`, v = class extends r(o) {
+	constructor(...e) {
+		super(...e), this.columns = 1, this.cellWidth = 16, this.cellHeight = 16, this.rules = "solid", this.frameless = !1, this.collapse = !1, this.scale = new t(this), this.gridSnap = new a(this);
+	}
+	static {
+		this.styles = [i, s`
+      :host {
+        display: block;
+      }
+      .grid {
+        display: grid;
+        /* A cell is a fixed box and its contents are usually smaller than it —
+           a 16px icon in a 26px well is the palette this component was drawn
+           for — so center them. Grid's own default (stretch) behaves as
+           start for anything with a size of its own, which parks every icon in
+           the top-left corner of its cell. A cell that wants the whole well
+           (a tool button that inverts when selected, a bordered tile under
+           collapse) asks for it with place-self: stretch. */
+        place-items: center;
+        /* Shrink-wrap to the cells. The host is block-level (a palette sits in
+           normal flow, and an inline-level box would hang a line-box descender
+           under it inside a flush window), so without this a wider parent would
+           stretch the grid and the lattice would tile on across the empty
+           space. */
+        width: max-content;
+        background: var(--vf-surface, var(--vf-white, #fff));
+        /* .vf-snap already makes this the positioned ancestor; isolating it
+           makes it the stacking context too, so the rule overlay's negative
+           z-index lands above this surface and below the cells rather than
+           behind the whole component. */
+        isolation: isolate;
+      }
+      /* The perimeter needs a pixel of its own to land on. */
+      :host(:not([frameless]):not([rules='none'])) .grid {
+        padding: calc(var(--vf-scale, 1) * ${f}px);
+      }
+      /* The cells are the grid's items, not the slot. */
+      slot {
+        display: contents;
+      }
+      /* collapse: every cell pulled back onto the lattice, so a cell drawing
+         its own 1px border lands it ON the rule rather than beside it (see the
+         class doc). A consumer's own margin still wins, since a light-DOM
+         declaration beats a ::slotted one. With no rules there is nothing to
+         collapse onto, so it stays inert.
+
+         These cells are the ones that mean to fill their well, so they keep
+         grid's stretch rather than the centering above: a sized tile lands
+         where it did before (stretch is start for a definite size, and the
+         -1px margins already center it), and an auto-sized one is resized to
+         the well — a 14px track with -1px margins makes a 16px item. */
+      :host([collapse]:not([rules='none'])) ::slotted(*) {
+        margin: calc(var(--vf-scale, 1) * -${f}px);
+        place-self: stretch;
+      }
+      .rules {
+        position: absolute;
+        inset: 0;
+        /* Under the cells, above the surface — see the class doc. */
+        z-index: -1;
+        background: var(--vf-black, #000);
+        mask-image: var(--_rules-x), var(--_rules-y);
+        mask-size: var(--_rules-size-x), var(--_rules-size-y);
+        mask-repeat: repeat;
+        /* Framed (the default): the lattice starts at the box's own edge, so
+           the perimeter is simply its first and last lines — one pitch,
+           unbroken, all the way across. */
+        mask-position: 0 0;
+        pointer-events: none;
+      }
+      /* frameless: interior boundaries only. Pulling the lattice back one pixel
+         puts its first line on the first gap instead of the left/top edge, and
+         drops the last one just outside the box. */
+      :host([frameless]) .rules {
+        mask-position: calc(var(--vf-scale, 1) * -${f}px)
+          calc(var(--vf-scale, 1) * -${f}px);
+      }
+    `];
+	}
+	render() {
+		let e = g(this.columns, 1), t = g(this.cellWidth, 16), n = g(this.cellHeight, 16), r = this.rows === void 0 ? 0 : g(this.rows, 0), i = this.rules !== "none", a = i ? f : 0, o = t + a, s = n + a, u = this.rules === "dashed" ? p : f, m = h(o, s, u);
+		return c`
+      <div
+        class="grid vf-snap"
+        part="grid"
+        style=${d({
+			"grid-template-columns": `repeat(${e}, ${_(t)})`,
+			"grid-template-rows": r ? `repeat(${r}, ${_(n)})` : null,
+			"grid-auto-rows": _(n),
+			gap: _(a),
+			"--_rules-x": m.x,
+			"--_rules-y": m.y,
+			"--_rules-size-x": `${_(2 * o)} ${_(u)}`,
+			"--_rules-size-y": `${_(u)} ${_(2 * s)}`
+		})}
+      >
+        ${i ? c`<div class="rules" part="rules"></div>` : l}
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+n([u({ type: Number })], v.prototype, "columns", void 0), n([u({ type: Number })], v.prototype, "rows", void 0), n([u({
+	type: Number,
+	attribute: "cell-width"
+})], v.prototype, "cellWidth", void 0), n([u({
+	type: Number,
+	attribute: "cell-height"
+})], v.prototype, "cellHeight", void 0), n([u({ reflect: !0 })], v.prototype, "rules", void 0), n([u({
+	type: Boolean,
+	reflect: !0
+})], v.prototype, "frameless", void 0), n([u({
+	type: Boolean,
+	reflect: !0
+})], v.prototype, "collapse", void 0), v = n([e("vf-grid")], v);
+//#endregion
+export { v as VfGrid };