vintage-frames 0.1.0

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

@@ -0,0 +1,53 @@
+import { VfTextControlBase } from '../text-control.js';
+declare const VfTextField_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof VfTextControlBase;
+/**
+ * `<vf-text-field>` — a System 7 single-line text entry field.
+ *
+ * A form-associated wrapper around a native `<input>`: white well, 1px solid
+ * black border, no corner radius. Keyboard focus draws the kit's dashed rule
+ * one blank row under the well; a click leaves it unmarked (no dotted outline
+ * either, per SPEC §1/§5). The shared field skin lives in `vfField`; the
+ * value/form scaffolding — and the focus rule's modality gate — in
+ * {@link VfTextControlBase}.
+ *
+ * @fires vf-input - On every keystroke. `detail: { value: string }`.
+ * @fires vf-change - On commit (native `change`). `detail: { value: string }`.
+ * @fires input - The native keystroke event: the inner input's own, composed,
+ *   so it crosses the shadow boundary and retargets to the host by itself.
+ * @fires change - The native commit event, re-dispatched from the host (the
+ *   inner one is `composed: false` and never leaves the shadow root), so form
+ *   delegation and framework bindings hear it.
+ *
+ * The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`,
+ * `maxlength`, `pattern`, `spellcheck`, `autocapitalize` — are forwarded from
+ * the host onto the inner input, where the platform actually honors them.
+ *
+ * @csspart input - The inner native `<input>` element.
+ * @cssprop [--vf-control-height=22px] - text fields — `vf-text-field`,
+ *   `vf-text-area`, the `vf-number-field` well
+ * @cssprop [--vf-field-width=180px] - default width of `vf-text-field` /
+ *   `vf-text-area`
+ * @cssprop [--vf-field-placeholder=#767676] - placeholder text in the editable
+ *   fields — kept off `--vf-disabled`: a placeholder sits in an *enabled* well
+ *   and holds AA contrast, where the disabled gray is exempt
+ */
+export declare class VfTextField extends VfTextField_base {
+    static styles: import("lit").CSSResult[];
+    /** Input type, passed through to the native input (e.g. `password`). */
+    type: string;
+    /** The shared forwarded set plus `pattern`, which only an `<input>` takes. */
+    protected static readonly forwardedAttributes: readonly string[];
+    /**
+     * Enter in a single-line field triggers the associated form's implicit
+     * submission. The native `<input>` is shadow-encapsulated, so its form owner
+     * is null and the browser won't do this itself.
+     */
+    private handleKeydown;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-text-field': VfTextField;
+    }
+}
+export {};

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

@@ -0,0 +1,79 @@
+import { vfElement as e } from "../define.js";
+import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as n } from "../position.js";
+import { vfBase as r } from "../styles/recipes/host.js";
+import { vfField as i } from "../styles/recipes/field.js";
+import { VfTextControlBase as a } from "../text-control.js";
+import { css as o, html as s, nothing as c } from "lit";
+import { property as l } from "lit/decorators.js";
+import { live as u } from "lit/directives/live.js";
+//#region src/components/vf-text-field.ts
+var d = class extends n(a) {
+	constructor(...e) {
+		super(...e), this.type = "text";
+	}
+	static {
+		this.styles = [
+			r,
+			i,
+			o`
+      :host {
+        display: inline-block;
+        /* A sensible default width (authored system px, scaled) so a bare field
+           doesn't collapse; the inner control fills it. Override with a width
+           on the host or the --vf-field-width token. */
+        width: calc(var(--vf-scale, 1) * var(--vf-field-width, 180px));
+      }
+      input {
+        display: block;
+        width: 100%;
+        /* min-, not height: the default line box exactly fills the 22px well,
+           so nothing moves — but a user stylesheet raising line-height (the
+           WCAG 1.4.12 text-spacing condition) grows the well instead of
+           clipping the text inside a pinned one. */
+        min-height: calc(var(--vf-scale, 1) * var(--vf-control-height, 22px));
+        padding: 0 calc(var(--vf-scale, 1) * 6px);
+      }
+    `
+		];
+	}
+	static {
+		this.forwardedAttributes = [...a.forwardedAttributes, "pattern"];
+	}
+	handleKeydown(e) {
+		this.isSubmitEnter(e) && this.requestImplicitSubmit();
+	}
+	render() {
+		return s`
+      <div class=${this.wellClass}>
+        <input
+          part="input"
+          class="vf-field"
+          type=${this.type}
+          aria-label=${this.label || this.hostLabel || c}
+          aria-describedby=${this.describedBy}
+          aria-required=${this.required ? "true" : c}
+          aria-invalid=${this.validity.valid ? c : "true"}
+          autocomplete=${this.forwardedAttr("autocomplete")}
+          inputmode=${this.forwardedAttr("inputmode")}
+          enterkeyhint=${this.forwardedAttr("enterkeyhint")}
+          maxlength=${this.forwardedAttr("maxlength")}
+          pattern=${this.forwardedAttr("pattern")}
+          spellcheck=${this.forwardedAttr("spellcheck")}
+          autocapitalize=${this.forwardedAttr("autocapitalize")}
+          .value=${u(this.value)}
+          placeholder=${this.placeholder}
+          ?disabled=${this.isDisabled}
+          ?readonly=${this.readonly}
+          @keydown=${this.handleKeydown}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        />
+      </div>
+      ${this.renderDescription()}
+    `;
+	}
+};
+t([l()], d.prototype, "type", void 0), d = t([e("vf-text-field")], d);
+//#endregion
+export { d as VfTextField };

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

@@ -0,0 +1,157 @@
+import { LitElement, type PropertyValues } from 'lit';
+import './vf-scroll-area.js';
+declare const VfWindow_base: (new (...args: any[]) => import("../size.js").VfSizedInterface) & (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-window>` — the System 7 desktop-window shell.
+ *
+ * Striped title bar with optional close box (left) and zoom box (right), a
+ * solid-white frame with a hard offset shadow, an optional grow box for
+ * resizing, optional edge scroll rails (`scrollbars`), and the slim windoid
+ * chrome (`variant="utility"`). The HIG's window archetypes are parameter
+ * recipes over this shell rather than fixed anatomies — the component enables
+ * HIG compliance, it doesn't enforce it (see docs/LAYOUT.md "Window archetypes"):
+ * the full document window is `closable zoomable movable resizable
+ * scrollbars="both"`, a modeless dialog box is `closable movable`, a utility
+ * window is `variant="utility" movable`. Place inside `<vf-desktop>` to get
+ * click-to-front stacking and automatic `active` management (utility windows
+ * float above the document tier).
+ *
+ * Every recipe also declares `width` AND `height` ({@link VfSized}), in whole
+ * system px — the art's own unit, so the window keeps its proportions to the
+ * chrome inside it at every display density (a CSS-px size stays put while
+ * the components in it triple). A window is a fixed box in both axes, the way
+ * the WIND resource carried it: left to layout it takes whatever its
+ * container or content hands it, which is how a title bar ends up wider than
+ * the screen or a dialog reflows as it moves — and a window that grows with
+ * its body is one the user can neither predict nor (via the grow box) own.
+ * Content taller than the declared box is clipped at the frame the way the
+ * classic content region was; `scrollbars` lets the user reach the rest.
+ * Unset, the window still renders — normal block layout, as before — and
+ * says so once in the console.
+ *
+ * @slot - Default slot: window body content.
+ * @csspart frame - The outer chrome frame.
+ * @csspart title-bar - The striped (or dithered) title bar.
+ * @csspart title - The centered title patch (hidden on the utility bar).
+ * @csspart close-box - The close widget (left).
+ * @csspart zoom-box - The zoom widget (right).
+ * @csspart body - The content area.
+ * @csspart grow-box - The resize widget (bottom-right, when `resizable`).
+ * @csspart viewport - The built-in scroll area's viewport (when `scrollbars`;
+ *   re-exported from vf-scroll-area).
+ * @fires vf-close - Close box clicked. Detail `{ reason: 'close' }` (shape-
+ *   compatible with vf-dialog's `vf-close`). The window does NOT
+ *   remove itself; the consumer decides what closing means.
+ * @fires vf-zoom - Zoom box clicked. Detail `{}`.
+ * @cssprop --vf-dots-pattern - the windoid bar's dot-grid dither — a 2×2 motif,
+ *   one black pixel at its origin, on a 30-system-px tile (`vfDots`; override
+ *   the whole tile like `--vf-desktop-pattern` — consumer art renders as a
+ *   placed tile grid at that same geometry)
+ * @cssprop --vf-titlebar-height - window/dialog title bars
+ * @cssprop [--vf-titlebar-height-utility=12px] - the slim
+ *   `vf-window[variant="utility"]` (windoid) bar — 11px interior + 1px bottom
+ *   rule, traced from `Windows/utility-window.png`
+ */
+export declare class VfWindow extends VfWindow_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Chrome variant. Omit for the standard 18px striped bar; `'utility'` for
+     * the slim windoid bar (dot-grid dither, 7×7 widgets, no title patch — the
+     * heading still names the widgets). Inside a `vf-desktop`, utility windows
+     * float above the document tier and never take the single-active state.
+     */
+    variant?: 'utility';
+    /** Title text shown centered in the title bar. */
+    heading: string;
+    /**
+     * Whether this is the frontmost (active) window: stripes and widgets show.
+     * Managed automatically by an enclosing `vf-desktop`.
+     */
+    active: boolean;
+    /** Show the close box (left side of the title bar). */
+    closable: boolean;
+    /** Show the zoom box (right side of the title bar). */
+    zoomable: boolean;
+    /** Allow dragging the window by its title bar. */
+    movable: boolean;
+    /** Show a grow box at the bottom-right corner for resizing. */
+    resizable: boolean;
+    /** Remove the default 12px body padding. */
+    flush: boolean;
+    /**
+     * Put System 7 scroll rails on the window edge — the classic document
+     * window. The body slot renders inside a built-in `vf-scroll-area` pulled
+     * one system pixel under the frame on every side, so the rails repaint the
+     * border lines and a `resizable` window's grow box lands in the corner
+     * cell. Values mirror `vf-scroll-area`'s `axis`; the `heading` names the
+     * scroll region; the viewport part is re-exported. Implies `flush` (the
+     * viewport carries its own padding). The slotted composition (SPEC §5
+     * vf-scroll-area) still works for windows that want an inset well instead.
+     */
+    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. */
+    private readonly gridSnap;
+    /** Holds the centered title patch on the placement lattice (src/chrome.ts). */
+    private readonly titleCenter;
+    /**
+     * The consumer's `--vf-dots-pattern` override, or `''` for the kit dots —
+     * which exact-fill path the utility bar takes (src/tile-grid.ts). Re-read
+     * every update; a runtime token swap wants a `requestUpdate()`.
+     */
+    private _dotsPattern;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /**
+     * The exact dots fill rendered into the utility bar's `.vf-dots` layer
+     * (src/tile-grid.ts): the bar interior is the declared width minus the
+     * frame borders. The kit raster is ceiled to whole 30-px tiles so a
+     * grow-box resize only re-encodes the image when it crosses a tile
+     * boundary — the layer's clip crops the overdraw; a consumer
+     * `--vf-dots-pattern` renders the placed tile grid at the token's
+     * documented 30-px geometry instead. A window with no declared width
+     * renders neither and the layer keeps its CSS-repeated tile.
+     */
+    private _dotsTexture;
+    /**
+     * Drag placement: the origin lands in `top`/`left` in system px, so a moved
+     * window is placed the way an authored one is and holds its spot through a
+     * zoom (see src/position.ts).
+     */
+    private readonly _placement;
+    /**
+     * Title-bar drag-to-move (shared with `vf-dialog` via {@link DragController}).
+     * The controller owns the pointer bookkeeping and hands over system px; the
+     * placement controller seeds the origin and writes the result.
+     */
+    private readonly _drag;
+    private _resizeState;
+    /**
+     * Say something the first time a window is opened without a width. The size
+     * itself is written by VfSized's controller, from `width`/`height` — which
+     * is also what the grow box sets, so a resized window and an authored one
+     * are the same declaration and neither can be re-asserted over the other.
+     * Controllers run before this hook, so the inline style the warning reads is
+     * already written.
+     */
+    protected updated(): void;
+    disconnectedCallback(): void;
+    private _onCloseClick;
+    private _onZoomClick;
+    private _onGrowPointerDown;
+    private _onGrowPointerMove;
+    /**
+     * Ends a grow-box resize on pointerup / pointercancel / lostpointercapture.
+     * Idempotent — releasing the capture below re-enters here, and by then
+     * `_resizeState` is already null.
+     */
+    private _onGrowPointerEnd;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-window': VfWindow;
+    }
+}
+export {};

package/dist/components/vf-window.js

@@ -0,0 +1,377 @@
+import { vfElement as e } from "../define.js";
+import { ScaleController as t, snapSys as n, sysLength as r, toSysExact as i } from "../scale.js";
+import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { PlacementController as o, VfPositioned as s, warnMovableContract as c } from "../position.js";
+import { vfBase as l } from "../styles/recipes/host.js";
+import { DOT_RECTS as u, DOT_SPAN as d, vfDots as f, vfStripes as p } from "../styles/recipes/pattern.js";
+import { vfChromeFrame as m } from "../styles/recipes/surface.js";
+import { vfTitleBar as h, vfWindowWidgets as g } from "../styles/recipes/title-bar.js";
+import { vfFocus as _ } from "../styles/recipes/focus.js";
+import { TileRasterCache as v, patternOverride as y, tileGrid as b, vfTileGrid as x } from "../tile-grid.js";
+import { GridSnapController as S } from "../grid-snap.js";
+import { VfSized as C } from "../size.js";
+import { DragController as w } from "../drag.js";
+import { TitleCenterController as T, chromeTitleBar as E, closeBox as D, widgetLabel as O, zoomBox as k } from "../chrome.js";
+import { emit as A } from "../events.js";
+import "./vf-scroll-area.js";
+import { LitElement as j, css as M, html as N, nothing as P } from "lit";
+import { property as F } from "lit/decorators.js";
+//#region src/components/vf-window.ts
+var I = 80, L = 54, R = 24, z = 8, B = class extends C(s(j)) {
+	constructor(...e) {
+		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this.flush = !1, this.scale = new t(this), this.gridSnap = new S(this), this.titleCenter = new T(this), this._dotsPattern = "", this.#e = new v(), this.#t = (e, t, n) => {
+			let r = i(this.offsetWidth, this);
+			return {
+				x: Math.min(Math.max(e, R - r), n.width - R),
+				y: Math.min(Math.max(t, 0), Math.max(0, n.height - R))
+			};
+		}, this._placement = new o(this, (e, t, n) => this.#t(e, t, n)), this._drag = new w(this, {
+			onDragStart: (e) => !this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box")) ? null : (this.#i(), this._placement.seed()),
+			onDrag: (e, t) => this._placement.moveTo(e, t)
+		}), this._resizeState = null, this.#n = !1, this.#r = !1;
+	}
+	static {
+		this.styles = [
+			l,
+			p,
+			f,
+			x,
+			_,
+			m,
+			h,
+			g,
+			M`
+      :host {
+        display: block;
+        position: relative;
+        --vf-surface: var(--vf-white, #ffffff);
+      }
+      /* Skin from vfChromeFrame; the layout is the window's own — a full-size
+         flex column so the body takes the slack the title bar and grow box
+         don't. */
+      .vf-frame {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+      }
+
+      /* --- Title bar ------------------------------------------------- */
+      /* Clearance for the close/zoom widgets either side of the title patch:
+         8px offset + an 11px box + its 1px white patch ring, doubled, rounded
+         up to the classic 30-per-side. Not a theming knob — it's the widgets'
+         own geometry — so it's set on the element, like --vf-focus-offset. */
+      .vf-title {
+        --vf-title-inset: 60px;
+      }
+      :host([movable]) .vf-title-bar {
+        touch-action: none;
+      }
+      :host(:not([active])) .vf-stripes,
+      :host(:not([active])) .vf-dots {
+        display: none;
+      }
+      /* Inactive window: the stripes go away and the widgets stop being
+         drawn (see the widget rule below — they keep their tab stops), but
+         the title text stays black — classic System 7 never grayed the
+         title. */
+
+      /* --- Window widgets (close / zoom boxes) ----------------------- */
+      /* Skin from vfWindowWidgets (shared with vf-dialog); only the
+         host-state rule is the window's own — a dialog has no inactive
+         state, so blanking widgets with the stripes lives here.
+
+         Blanked with transparent ink, NOT display/visibility: System 7 drew
+         an inactive bar bare, and this reproduces exactly that — but the
+         controls stay in the tree and the tab order, a modern affordance the
+         kit adds (SPEC §1). A background window whose body holds nothing
+         focusable (a static About window, the modeless-dialog recipe, a
+         palette of labels) is otherwise unreachable by keyboard entirely:
+         Tab must be able to land on "Close Bravo" so vf-desktop's focusin
+         raise can activate the window — which repaints the widgets under
+         the focus that just arrived. It also means deactivation never yanks
+         a focused widget out of the tree, so focus can't be dropped to
+         <body> by a click on another window. */
+      :host(:not([active])) .box {
+        border-color: transparent;
+        background-color: transparent;
+        box-shadow: none;
+      }
+      :host(:not([active])) .zoom::after {
+        border-color: transparent;
+      }
+
+      /* --- Utility (windoid) variant --------------------------------- */
+      /* The slim floating-window bar, traced from Windows/utility-window.png
+         : 11px interior over the 1px rule
+         (--vf-titlebar-height-utility: 12px), the vf-dots dither instead of
+         stripes, and 7×7 widgets at left:7px / right:8px — the art really is
+         asymmetric by that pixel. No title patch: the bar is two system px
+         shorter than the display face's line box, so the heading feeds the
+         widget labels instead (a consumer retheming a taller bar can re-show
+         it through ::part(title)). */
+      :host([variant='utility']) .vf-title-bar {
+        height: calc(
+          var(--vf-scale, 1) * var(--vf-titlebar-height-utility, 12px)
+        );
+      }
+      :host([variant='utility']) .vf-title {
+        display: none;
+      }
+      :host([variant='utility']) .box {
+        /* 7×7 box with 2px of clear white above and below (bar interior is
+           11px: 2 + 7 + 2). The patch ring stays 2px here where the striped
+           bar's is 1px: the windoid sheet deliberately clears two px of
+           dither beside its widgets — the flush dot grid lands a dot in the
+           column adjacent to the box, and the art blanks it. A custom
+           property rather than box-shadow so the
+           inactive blanking rule above still wins the cascade. */
+        --vf-widget-ring: 2px;
+        top: calc(var(--vf-scale, 1) * 2px);
+        width: calc(var(--vf-scale, 1) * 7px);
+        height: calc(var(--vf-scale, 1) * 7px);
+      }
+      :host([variant='utility']) .close {
+        left: calc(var(--vf-scale, 1) * 7px);
+      }
+      :host([variant='utility']) .zoom {
+        right: calc(var(--vf-scale, 1) * 8px);
+      }
+      /* Pressed windoid widget: the whole box inverts — black interior under
+         a white (invisible, over the patch ring) borderline — rather than the
+         big bar's 9×9 sunburst, which cannot land whole on a 5×5 interior. */
+      :host([variant='utility']) .box:active {
+        border-color: var(--vf-white, #ffffff);
+        background-color: var(--vf-black, #000000);
+        background-image: none;
+      }
+      /* The nested zoom square, miniaturized: right/bottom edges land at
+         sprite col/row 3 of the 7×7 box (padding col/row 2). */
+      :host([variant='utility']) .zoom::after {
+        width: calc(var(--vf-scale, 1) * 3px);
+        height: calc(var(--vf-scale, 1) * 3px);
+      }
+
+      /* --- Body ------------------------------------------------------ */
+      /* Clipped at the frame, the way the classic content region was: the
+         window is a fixed box (width and height are both declared), so content
+         taller than it is content the user reaches with the scrollbars
+         parameter, not something that paints out over the desktop.
+
+         What this deliberately does NOT clip is a control's drop-open panel.
+         vf-select's list is position:fixed, computed from the control's rect,
+         precisely so it escapes clipping ancestors (see vf-select.ts) — and it
+         still escapes this one, because nothing between it and the viewport
+         establishes a containing block for fixed descendants: the grid-snap
+         correction is a position:relative left/top offset, never a transform
+         (see grid-snap.ts, "Why an offset and not a transform"). So a popup
+         opening near the bottom edge still runs past the window border, as it
+         should. A vf-menu panel is anchored position:absolute and would clip —
+         but a menu bar belongs to the desktop, not inside a window body. */
+      .body {
+        /* The positioning anchor for slotted children placed with top/left
+           (src/position.ts): coordinates measure from the content region's
+           corner — the frame's inner edge, below the title bar — exactly the
+           DITL convention. CSS anchors absolute children at the padding box,
+           so the 12px inset below governs flow content only. */
+        position: relative;
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: hidden;
+        padding: calc(var(--vf-scale, 1) * 12px);
+      }
+      :host([flush]) .body,
+      :host([scrollbars]) .body {
+        padding: 0;
+      }
+      /* The edge-rail composition pulls the scroll area one system px OUT of
+         the body on every side so its frame border repaints the window's
+         border (see .edge-scroll below) — clipping the body would shave
+         exactly that overhang off. The scroll area does its own clipping. */
+      :host([scrollbars]) .body {
+        overflow: visible;
+      }
+
+      /* --- Edge scroll rails (scrollbars) ----------------------------- */
+      /* The TeachText composition (SPEC §5 vf-scroll-area), internalized:
+         the built-in scroll area is pulled one system pixel under the window
+         frame on every side, so its own frame border repaints the window's
+         border lines exactly (no doubled frame), the rails run edge to edge,
+         and a resizable window's grow box (z-index 1) lands over the rail
+         corner cell. */
+      .edge-scroll {
+        width: calc(100% + var(--vf-scale, 1) * 2px);
+        height: calc(100% + var(--vf-scale, 1) * 2px);
+        margin: calc(var(--vf-scale, 1) * -1px);
+      }
+
+      /* --- Grow box --------------------------------------------------- */
+      .grow {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        width: calc(var(--vf-scale, 1) * 15px);
+        height: calc(var(--vf-scale, 1) * 15px);
+        border-top: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+        border-left: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+        background: var(--vf-white, #ffffff);
+        touch-action: none;
+        cursor: var(--vf-cursor, default);
+      }
+      .grow::before {
+        content: '';
+        position: absolute;
+        right: calc(var(--vf-scale, 1) * 2px);
+        bottom: calc(var(--vf-scale, 1) * 2px);
+        width: calc(var(--vf-scale, 1) * 9px);
+        height: calc(var(--vf-scale, 1) * 9px);
+        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+      }
+      .grow::after {
+        content: '';
+        position: absolute;
+        top: calc(var(--vf-scale, 1) * 2px);
+        left: calc(var(--vf-scale, 1) * 2px);
+        width: calc(var(--vf-scale, 1) * 7px);
+        height: calc(var(--vf-scale, 1) * 7px);
+        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+        background: var(--vf-white, #ffffff);
+      }
+      /* Inactive window: the size box empties with the scroll rails (the same
+         HIG no-interactive-UX treatment ScrollStateController drives for the
+         bars) — its cell and borders stay, the nested squares go. */
+      :host(:not([active])) .grow::before,
+      :host(:not([active])) .grow::after {
+        display: none;
+      }
+    `
+		];
+	}
+	#e;
+	willUpdate(e) {
+		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = y(this, "--vf-dots-pattern"));
+	}
+	_dotsTexture() {
+		if (this.width == null) return;
+		let e = Math.max(1, this.width - 2);
+		if (this._dotsPattern) return b({
+			cols: Math.ceil(e / d),
+			rows: 1,
+			tile: d
+		});
+		let t = Math.ceil((e + 2) / d) * d, n = z + 2;
+		return N`<div
+      class="vf-tile-raster"
+      style="width:${r(t)};height:${r(n)};background-image:${this.#e.for(2, 2, u, t, n)}"
+    ></div>`;
+	}
+	#t;
+	updated() {
+		this.#a();
+	}
+	#n;
+	#r;
+	#i() {
+		this.#r ||= c(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
+	}
+	#a() {
+		if (this.#n) return;
+		let e = [];
+		this.width == null && this.style.width === "" && e.push("width (falling back to block layout)"), this.height == null && this.style.height === "" && e.push("height (falling back to the content)"), e.length !== 0 && (this.#n = !0, console.warn(`vf-window${this.heading ? ` ("${this.heading}")` : ""}: no ${e.join(", no ")}. A window owns its whole box — declare both in system px: <vf-window width="240" height="176">.`));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._resizeState = null;
+	}
+	_onCloseClick() {
+		A(this, "vf-close", { reason: "close" });
+	}
+	_onZoomClick() {
+		A(this, "vf-zoom", {});
+	}
+	_onGrowPointerDown(e) {
+		if (!this.resizable || e.button !== 0) return;
+		let t = this.getBoundingClientRect();
+		this._resizeState = {
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startY: e.clientY,
+			baseWidth: i(t.width, this),
+			baseHeight: i(t.height, this)
+		}, e.currentTarget.setPointerCapture(e.pointerId), e.preventDefault();
+	}
+	_onGrowPointerMove(e) {
+		let t = this._resizeState;
+		if (!t || e.pointerId !== t.pointerId) return;
+		let r = Math.max(I, t.baseWidth + i(e.clientX - t.startX, this)), a = Math.max(L, t.baseHeight + i(e.clientY - t.startY, this));
+		this.width = n(r, this), this.height = n(a, this);
+	}
+	_onGrowPointerEnd(e) {
+		let t = this._resizeState;
+		if (!t || e.pointerId !== t.pointerId) return;
+		this._resizeState = null;
+		let n = e.currentTarget;
+		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId);
+	}
+	render() {
+		return N`
+      <div
+        class="vf-frame vf-snap"
+        part="frame"
+        role="group"
+        aria-labelledby=${this.heading ? "title" : P}
+      >
+        ${E(this._drag, N`
+            ${this.closable ? D(O("Close", this.heading), this._onCloseClick) : P}
+            <span class="vf-title" part="title" id="title">${this.heading}</span>
+            ${this.zoomable ? k(O("Zoom", this.heading), this._onZoomClick) : P}
+          `, this.variant === "utility" ? "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
+        <div class="body" part="body">
+          ${this.scrollbars ? N`
+                <vf-scroll-area
+                  class="edge-scroll"
+                  axis=${this.scrollbars}
+                  label=${this.heading || P}
+                  exportparts="viewport"
+                >
+                  <slot></slot>
+                </vf-scroll-area>
+              ` : N`<slot></slot>`}
+        </div>
+        ${this.resizable ? N`
+              <div
+                class="grow"
+                part="grow-box"
+                @pointerdown=${this._onGrowPointerDown}
+                @pointermove=${this._onGrowPointerMove}
+                @pointerup=${this._onGrowPointerEnd}
+                @pointercancel=${this._onGrowPointerEnd}
+                @lostpointercapture=${this._onGrowPointerEnd}
+              ></div>
+            ` : P}
+      </div>
+    `;
+	}
+};
+a([F({ reflect: !0 })], B.prototype, "variant", void 0), a([F()], B.prototype, "heading", void 0), a([F({
+	type: Boolean,
+	reflect: !0
+})], B.prototype, "active", void 0), a([F({
+	type: Boolean,
+	reflect: !0
+})], B.prototype, "closable", void 0), a([F({
+	type: Boolean,
+	reflect: !0
+})], B.prototype, "zoomable", void 0), a([F({
+	type: Boolean,
+	reflect: !0
+})], B.prototype, "movable", void 0), a([F({
+	type: Boolean,
+	reflect: !0
+})], B.prototype, "resizable", void 0), a([F({
+	type: Boolean,
+	reflect: !0
+})], B.prototype, "flush", void 0), a([F({ reflect: !0 })], B.prototype, "scrollbars", void 0), B = a([e("vf-window")], B);
+//#endregion
+export { B as VfWindow };