vintage-frames 0.1.0

package/dist/components/vf-stack.js

@@ -0,0 +1,168 @@
+import { vfElement as e } from "../define.js";
+import { ScaleController as t, sysLength as n, sysLengths as r } from "../scale.js";
+import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as a } from "../position.js";
+import { vfBase as o } from "../styles/recipes/host.js";
+import { 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";
+//#region src/components/vf-stack.ts
+var m = class extends c(a(l)) {
+	constructor(...e) {
+		super(...e), this.direction = "column", this.gap = 0, this.scale = new t(this), this.gridSnap = new s(this);
+	}
+	static {
+		this.styles = [o, u`
+      :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
+           declared to the things inside it — and it takes no part in its
+           parent's inline formatting while doing it.
+
+           fit-content, not inline-level, and the difference is 2 system px. An
+           inline-level box sits on a line box, and a line box can never be
+           shorter than the parent's strut: a stack shorter than the line-height
+           around it silently gains the difference as leading (the showcase's
+           swatch panel, an 18px row inside a 20px line box, grew by exactly
+           that). vertical-align: top removes the descender half of it; nothing
+           inside a component can shrink its parent's strut. So the box stays
+           block-level and shrink-wraps instead — same geometry, no line box, no
+           whitespace between two adjacent stacks, and the typographic
+           transparency below stops having an exception.
+
+           The flex machinery itself lives one element down, on .box — the host
+           is a plain block shell, so the grid-snap correction has an interior
+           element to land on while the host's own layout stays untouched. */
+        display: block;
+        width: fit-content;
+        /* Typographic transparency — see the class doc. vfBase dresses a host
+           as chrome (body face, 1.25 line box, black, unselectable); a stack
+           holds no text of its own, so imposing any of that on what it wraps
+           would make a layout box change how content reads. In particular a
+           ratio line-height landing on slotted prose is the exact rule-2 fault
+           the kit warns pages about. */
+        /* font is a shorthand, so it carries the line box back to inherit with
+           the family, size and weight; smoothing and color are their own
+           inherited properties and need saying. */
+        font: inherit;
+        -webkit-font-smoothing: inherit;
+        color: inherit;
+        /* inherit, not auto: a stack inside a window has to keep the window's
+           chrome rule (SPEC §1 — chrome text isn't selectable), and one on an
+           ordinary page has to keep the page's. auto would be a third answer
+           of its own. */
+        user-select: inherit;
+        -webkit-user-select: inherit;
+        /* text-align is on that list because of a trap this component walked
+           into: align is a LEGACY HTML PRESENTATION ATTRIBUTE. Blink maps the
+           align content attribute on any HTML element to text-align — "left" /
+           "right" / "center" by name, anything else verbatim — so the cross-axis
+           attribute, back when it was spelled align, silently right-aligned
+           every run of copy inside an action row. It is spelled place now, but
+           the reset stays: it costs nothing, it keeps old markup harmless, and
+           a layout box changing how content reads is the one thing this
+           component promises not to do. */
+        text-align: inherit;
+      }
+
+      /* The flex container, the positioning anchor for children placed with
+         top/left (src/position.ts), and the grid-snap target — one shadow box
+         coinciding with the host box, the vf-container arrangement. vf-snap
+         (vfBase) gives it position: relative plus the controller's
+         --vf-snap-dx/-dy offset, so one element owns the coordinate system
+         and its correction: corrected, it takes every child with it, kit or
+         not. It carries no padding of its own until pad writes some, so its
+         padding box IS the host box and the placed-child anchor ignores pad
+         exactly as before (pad, like any padding, is flow-only).
+
+         height: 100% hands a declared (or filled) host height to the flex
+         layout — against an undeclared height it computes to auto and the
+         content governs, as always. Width needs no saying: a block-level box
+         fills the host, and the host shrink-wraps from its content. */
+      .box {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      /* The same two words a child uses, read by the stack about itself — for
+         the parents that aren't stacks and have no ::slotted rule to give: a
+         window body, a fieldset, a scroll well, a grid cell, a plain div. A
+         percentage is the one fill a page can always express, needing no
+         system px, so this is the boundary where the chain would otherwise
+         break. Inside a stack both rules apply and agree: 100% of a column's
+         content box is what stretch resolves to anyway, and along a row the
+         zeroed flex basis outranks a width. A declared width/height lands on
+         the host's inline style and beats both, which is the resolution of
+         "don't declare a size and ask to fill it". */
+      :host([fill-width]) {
+        width: 100%;
+      }
+      :host([fill-height]) {
+        height: 100%;
+      }
+
+      /* --- Cross axis --------------------------------------------------- */
+      /* The two directions want opposite things and always did: a column of
+         fields starts at the panel's left edge, while a row of a caption beside
+         a control centers on it. Both are stated as the direction's default
+         rather than as an "auto" value, so an unrecognized place (a stale
+         place="stretch", say) lands on the sane one instead of on flexbox's
+         own "normal", which stretches. The named values come after, and win at
+         equal specificity on source order. */
+      :host([direction='row']) .box {
+        flex-direction: row;
+        align-items: center;
+      }
+      :host([place='start']) .box {
+        align-items: flex-start;
+      }
+      :host([place='center']) .box {
+        align-items: center;
+      }
+      :host([place='end']) .box {
+        align-items: flex-end;
+      }
+
+      /* --- 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
+         one, so a page can still override any of this on its own children —
+         align-self: stretch is the escape hatch for the cross-axis fill a
+         direction doesn't offer, and needs no system px to write. */
+      ::slotted(*) {
+        flex: 0 0 auto;
+      }
+      /* fill-width / fill-height name the outcome, so each one compiles to the
+         main axis or the cross axis depending on which way the stack runs. The
+         min-* that rides the main-axis form is what lets a filled child shrink
+         below its content: the flex-item min-width: auto default is what
+         otherwise pins a text field to its value's width. */
+      :host(:not([direction='row'])) ::slotted([fill-width]) {
+        align-self: stretch;
+      }
+      :host(:not([direction='row'])) ::slotted([fill-height]) {
+        flex: 1 1 0;
+        min-height: 0;
+      }
+      :host([direction='row']) ::slotted([fill-width]) {
+        flex: 1 1 0;
+        min-width: 0;
+      }
+      :host([direction='row']) ::slotted([fill-height]) {
+        align-self: stretch;
+      }
+    `];
+	}
+	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>`;
+	}
+};
+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);
+//#endregion
+export { m as VfStack };

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

@@ -0,0 +1,98 @@
+import { type PropertyValues } from 'lit';
+import { VfShadowRoleControl } from '../form-control.js';
+declare const VfSwatch_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof VfShadowRoleControl;
+/**
+ * `<vf-swatch>` — a color-swatch button: the color well of a palette cell.
+ *
+ * A solid rectangle with a 1px black border and a 1px white inset ring, filled
+ * edge-to-edge with a solid color. Given no `color` at all it shows the
+ * transparency checker instead — the "this cell holds nothing" grid every
+ * paint program draws behind an empty fill.
+ *
+ * `width`/`height` state the border box in whole system pixels (the fill is
+ * what remains inside the border and inset), multiplied by `--vf-scale` like
+ * every other metric, so the swatch holds the device-pixel grid wherever a
+ * palette puts it.
+ *
+ * `shadow` opts into the kit's hard drop shadow — the shared
+ * `--vf-shadow-offset` token, the same depth cue as windows, menus and alerts,
+ * painted outside the box like theirs. It is off by default because the
+ * swatch's usual home is a table of them (a `vf-grid`, a picker row), where
+ * every cell shadowing its neighbour reads as noise rather than depth; a lone
+ * well standing in for a current color — the one a dialog asks you to click —
+ * is the case that wants it.
+ *
+ * It is "basically a button": a native `<button>` inside, so `click` retargets
+ * to the host, Enter/Space activate it, and pressing inverts the white inset
+ * to black — the inset counterpart of vf-button's face inversion. Keyboard
+ * focus is marked with the kit's 1px dashed rule under the box
+ * (`vfFocusUnderline`) rather than a ring around it. It is form-associated
+ * for the *disabled* contract alone — an ancestor `<fieldset disabled>` must
+ * reach a palette the way it reaches every other control, and only the
+ * form-associated lifecycle delivers that across the shadow boundary — but it
+ * submits nothing (a palette cell picks, it doesn't submit; no `name`, no
+ * value, no `FormData` entry). `disabled` only stops interaction, dimming
+ * nothing — the kit dims *labels* when disabled, and a swatch's only label is
+ * its fill, which must keep reading as its color.
+ *
+ * @csspart button - The inner native `<button>` (border, inset and, with
+ *   `shadow`, the drop shadow).
+ * @csspart fill - The color area inside the inset.
+ * @cssprop --vf-swatch-checker - `vf-swatch`'s no-color transparency checker —
+ *   a 4×4 motif of 2×2 white/`#c0c0c0` checks, on a 60-system-px tile
+ *   (override the whole tile like `--vf-desktop-pattern` — consumer art
+ *   renders as a placed tile grid at that same geometry)
+ */
+export declare class VfSwatch extends VfSwatch_base {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * The fill — a CSS color, typically the hex the palette calls for. Unset,
+     * the swatch shows the transparency checker; a translucent value (an
+     * 8-digit hex) layers over that same checker, so partial opacity reads as
+     * partial. An unparseable value falls back to the checker too.
+     */
+    color?: string;
+    /** The swatch's border box width in whole system px. */
+    width: number;
+    /** The swatch's border box height in whole system px. */
+    height: number;
+    /**
+     * Cast the kit's hard drop shadow (`--vf-shadow-offset`). Off by default:
+     * the plain black-bordered well is what a table of swatches wants, and the
+     * depth cue is for the lone well that stands in for a current color.
+     */
+    shadow: boolean;
+    /**
+     * Accessible name for the inner button — a swatch has no text of its own.
+     * Left empty, the name falls back to whatever the host carries
+     * (`aria-labelledby`, `aria-label`, an associated `<label for>` — see
+     * {@link VfShadowRoleControl.hostLabel}), then to the `color` value (or
+     * "transparent") as a last resort, so a palette is never nameless — but a
+     * hex literal announced as "number f f six six zero zero" is a fallback to
+     * name past, not a name. `vf-label`'s `for` wiring writes this property,
+     * like every `vf-*` control's.
+     */
+    label: string;
+    /** Disables the control: it stops responding. Nothing dims (see class doc). */
+    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. */
+    private readonly gridSnap;
+    /**
+     * The consumer's `--vf-swatch-checker` override, or `''` for the kit
+     * checker — which exact-fill path render() takes (src/tile-grid.ts).
+     * Re-read every update; a runtime token swap wants a `requestUpdate()`.
+     */
+    private _pattern;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-swatch': VfSwatch;
+    }
+}
+export {};

package/dist/components/vf-swatch.js

@@ -0,0 +1,201 @@
+import { vfElement as e } from "../define.js";
+import { ScaleController as t, sysLength as n } from "../scale.js";
+import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as i } from "../position.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { tileImage as o, tileRects as s, tileSpan as c, vfTileSize as l } from "../styles/recipes/tile.js";
+import { vfHardShadowDecls as u } from "../styles/recipes/shadow.js";
+import { vfFocusUnderline as d } from "../styles/recipes/focus.js";
+import { TileRasterCache as f, patternOverride as p, tileGrid as m, vfTileGrid as h } from "../tile-grid.js";
+import { GridSnapController as g } from "../grid-snap.js";
+import { VfShadowRoleControl as _ } from "../form-control.js";
+import { css as v, html as y, unsafeCSS as b } from "lit";
+import { property as x } from "lit/decorators.js";
+import { styleMap as S } from "lit/directives/style-map.js";
+//#region src/components/vf-swatch.ts
+var C = 4, w = [
+	[
+		0,
+		0,
+		4,
+		4,
+		"#ffffff"
+	],
+	[
+		0,
+		0,
+		2,
+		2,
+		"#c0c0c0"
+	],
+	[
+		2,
+		2,
+		2,
+		2,
+		"#c0c0c0"
+	]
+], T = o(C, C, s(w)), E = c(C), D = class extends i(_) {
+	constructor(...e) {
+		super(...e), this.width = 24, this.height = 18, this.shadow = !1, this.label = "", this.disabled = !1, this.scale = new t(this), this.gridSnap = new g(this), this._pattern = "", this.#e = new f();
+	}
+	static {
+		this.shadowRootOptions = {
+			..._.shadowRootOptions,
+			delegatesFocus: !0
+		};
+	}
+	static {
+		this.styles = [
+			a,
+			h,
+			v`
+      :host {
+        display: inline-flex;
+        cursor: var(--vf-cursor, default);
+        /* The transparency checker: 2×2-system-px white/#c0c0c0 checks on a
+           4×4 motif. Resolved into a private property once so the underlay
+           rule and the tile grid's art channel below share one definition;
+           override the public token to retheme the whole tile. What actually
+           shows is the exact fill rendered into .fill (see src/tile-grid.ts):
+           the whole-surface raster for the kit checker, or the placed tile
+           grid at the token's documented 60-px tile geometry for a consumer
+           override. */
+        --_checker: var(--vf-swatch-checker, ${b(T)});
+        /* How deep a shadow this swatch actually casts — nothing unless the
+           shadow attribute is set. Resolved here once so the focus rule below
+           can compose the real depth rather than assume one, and so a consumer
+           retheming --vf-shadow-offset still moves both together. */
+        --_shadow-depth: 0px;
+      }
+      :host([shadow]) {
+        --_shadow-depth: var(--vf-shadow-offset, 2px);
+      }
+      /* The 1px black frame, and — as the button's own background showing
+         through its 1px padding — the white inset ring around the fill. */
+      button {
+        display: block;
+        /* Also the anchor the focus rule below hangs from. */
+        position: relative;
+        padding: calc(var(--vf-scale, 1) * 1px);
+        margin: 0;
+        background: var(--vf-white, #fff);
+        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+        cursor: inherit;
+        -webkit-appearance: none;
+        appearance: none;
+      }
+      /* Opt-in depth: the kit's one hard shadow, painted outside the border
+         box like every raised surface's. */
+      :host([shadow]) button {
+        ${u}
+      }
+      /* Pressed: the white inset inverts to black — instant 1-bit feedback. */
+      button:active:not(:disabled) {
+        background: var(--vf-black, #000);
+      }
+      /* Keyboard focus is the kit's dashed rule under the swatch, not a ring
+         around it (see vfFocusUnderline). It goes BELOW the whole box rather
+         than inside it the way vf-button underlines its label: a swatch has no
+         interior to lend — every pixel inside the inset is the color it exists
+         to show, and a rule drawn over the fill would read as part of it.
+
+         The offset counts every row of ink below the pseudo-element's padding
+         box before the blank row and the rule itself — the 1px border, then
+         whatever shadow this swatch is casting — none by default, a rethemeable
+         token under the shadow attribute — so it composes --_shadow-depth
+         rather than assuming a depth. The ±1px sides widen the rule from that
+         same padding box to the border box, the shape the swatch reads as (the
+         shadow is a depth cue, not part of the silhouette). */
+      button:focus-visible {
+        outline: none;
+      }
+      button:focus-visible::after {
+        --vf-focus-underline-offset: calc(-3px - var(--_shadow-depth));
+        ${d}
+        left: calc(var(--vf-scale, 1) * -1px);
+        right: calc(var(--vf-scale, 1) * -1px);
+      }
+      .fill {
+        display: block;
+        /* The containing block for the exact fill and the tint. */
+        position: relative;
+        width: 100%;
+        height: 100%;
+        /* The CSS-repeated underlay, occluded by the (opaque) kit raster —
+           belt-and-braces paint only, like vf-desktop's. */
+        background-image: var(--_checker);
+        ${l(C)}
+        /* Forced colors would delete the color layer and keep the checker,
+           showing "transparent" for every color. The fill is CONTENT, not
+           chrome — the color is the one thing the control exists to show,
+           the case forced-color-adjust's own spec exempts (its example is a
+           color picker). It inherits to the raster, tiles and tint. Frame,
+           inset and press feedback stay on the forced palette like every
+           other control's. */
+        @media (forced-colors: active) {
+          forced-color-adjust: none;
+        }
+      }
+      /* A consumer checker token switches the fill to the placed tile grid;
+         the underlay must not paint beneath it — a translucent consumer tile
+         would show the underlay's drifting copy of itself. The grid's tiles
+         resolve the token through the shared private property. */
+      .fill.patterned {
+        background-image: none;
+        --_vf-tile-image: var(--_checker);
+      }
+      /* The color, painted over the checker so a translucent value reads as
+         partial — the same compositing the two-layer background used to do. */
+      .tint {
+        position: absolute;
+        inset: 0;
+      }
+    `
+		];
+	}
+	#e;
+	willUpdate(e) {
+		super.willUpdate(e), this._pattern = p(this, "--vf-swatch-checker");
+	}
+	render() {
+		let e = Math.max(1, (this.width ?? 24) - 4), t = Math.max(1, (this.height ?? 18) - 4), r = (e) => Math.ceil((e + C) / C) * C, i = this._pattern ? m({
+			cols: Math.ceil(e / E),
+			rows: Math.ceil(t / E),
+			tile: E
+		}) : y`<span
+          class="vf-tile-raster"
+          style="width:${n(r(e))};height:${n(r(t))};background-image:${this.#e.for(C, C, w, r(e), r(t))}"
+        ></span>`, a = this.color ? y`<span
+          class="tint"
+          style=${S({ "background-color": this.color })}
+        ></span>` : null;
+		return y`
+      <button
+        part="button"
+        class="vf-snap"
+        type="button"
+        style="width: ${n(this.width)}; height: ${n(this.height)}"
+        aria-label=${this.label || this.hostLabel || this.color || "transparent"}
+        aria-describedby=${this.describedBy}
+        ?disabled=${this.isDisabled}
+      >
+        <span
+          class="fill vf-tile-grid${this._pattern ? " patterned" : ""}"
+          part="fill"
+          >${i}${a}</span
+        >
+      </button>
+      ${this.renderDescription()}
+    `;
+	}
+};
+r([x()], D.prototype, "color", void 0), r([x({ type: Number })], D.prototype, "width", void 0), r([x({ type: Number })], D.prototype, "height", void 0), r([x({
+	type: Boolean,
+	reflect: !0
+})], D.prototype, "shadow", void 0), r([x()], D.prototype, "label", void 0), r([x({
+	type: Boolean,
+	reflect: !0
+})], D.prototype, "disabled", void 0), D = r([e("vf-swatch")], D);
+//#endregion
+export { D as VfSwatch };

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

@@ -0,0 +1,77 @@
+import { VfTextControlBase } from '../text-control.js';
+declare const VfTextArea_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof VfTextControlBase;
+/**
+ * `<vf-text-area>` — a System 7 multi-line text entry field.
+ *
+ * Identical styling to `<vf-text-field>` but wrapping a native `<textarea>`.
+ * No resize grip (`resize: none`) — System 7 fields don't resize. Wrapped
+ * text sits on Chicago 12's native 16px line (the single-line well keeps its
+ * 20px box — that is control geometry, not typesetting). The shared field
+ * skin lives in `vfField`; the value/form scaffolding in
+ * {@link VfTextControlBase}.
+ *
+ * The `.vf-field-well` wrapper is the one `vfField` hangs the focus rule from,
+ * doing double duty here: it is the field's framed box — it carries the 1px
+ * frame the single-line field draws on the well itself, and lays the drawn
+ * scroll rail beside the borderless inner `<textarea>` — and the `vf-snap`
+ * element whose grid-snap offset the field, the frame and the rule ride as
+ * one.
+ *
+ * The vertical scroll rail is a permanent System 7 placeholder: arrows on an
+ * empty white channel sit in the field even when the text fits, the dither
+ * and thumb filling in only once the content overflows (driven by
+ * {@link ScrollStateController}). The rail is the shared `vfScrollRail`
+ * subtree — the kit-drawn rail every scroll surface wears — synced to the
+ * textarea's own native scrolling by {@link ScrollRailController}; the native
+ * bar itself is hidden.
+ *
+ * @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 textarea's own,
+ *   composed, so it crosses the shadow boundary and retargets to the host.
+ * @fires change - The native commit event, re-dispatched from the host (the
+ *   inner one is `composed: false` and never leaves the shadow root).
+ *
+ * The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`,
+ * `maxlength`, `spellcheck`, `autocapitalize` — are forwarded from the host
+ * onto the inner textarea, where the platform actually honors them
+ * (`pattern` is not: only an `<input>` takes it).
+ *
+ * @csspart textarea - The inner native `<textarea>` element.
+ * @cssprop --vf-line-height-display - The display face's native line (default
+ *   `16px`, Chicago 12's) — the pitch wrapped entry text sits on, shared with
+ *   the static-text components so a display retheme moves them together.
+ * @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
+ * @cssprop --vf-scrollbar-thumb - scrollbar thumb/elevator (white)
+ * @cssprop --vf-scrollbar-track - the scroll trough's base color under the
+ *   dot-dither (white)
+ */
+export declare class VfTextArea extends VfTextArea_base {
+    static styles: import("lit").CSSResult[];
+    /** Number of visible text rows (native `rows`). Default 4. */
+    rows: number;
+    private textarea;
+    /** Reserves the vertical rail and toggles it active on overflow. */
+    private readonly scrollState;
+    /** Syncs the drawn rail to the textarea and drives its interactions. */
+    private readonly rail;
+    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Re-measure overflow on each keystroke. A `<textarea>`'s scrollHeight grows
+     * as the text wraps without resizing the element's box, so the controllers'
+     * ResizeObservers never fire — this is the imperative path both document
+     * (the state controller keeps the rail's active state honest, the rail
+     * controller its thumb).
+     */
+    protected handleInput(event: Event): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-text-area': VfTextArea;
+    }
+}
+export {};

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

@@ -0,0 +1,121 @@
+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 { vfScrollRail as a } from "../styles/recipes/scroll-rail.js";
+import { ScrollStateController as o } from "../scroll-state.js";
+import { ScrollRailController as s, renderScrollRail as c } from "../scroll-rail.js";
+import { VfTextControlBase as l } from "../text-control.js";
+import { css as u, html as d, nothing as f } from "lit";
+import { property as p, query as m } from "lit/decorators.js";
+import { live as h } from "lit/directives/live.js";
+//#region src/components/vf-text-area.ts
+var g = class extends n(l) {
+	constructor(...e) {
+		super(...e), this.rows = 4, this.scrollState = new o(this, () => this.textarea), this.rail = new s(this, { getScroll: () => this.textarea });
+	}
+	static {
+		this.styles = [
+			r,
+			i,
+			a,
+			u`
+      :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));
+      }
+      /* The well is the field's framed box: it carries the 1px frame (the
+         single-line field draws it on the input itself, but here the drawn
+         scroll rail has to sit inside the frame beside the text), and lays
+         out [textarea | rail] — the rail sizes itself to the 15px inside the
+         frame. */
+      .vf-field-well {
+        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+        background: var(--vf-white, #fff);
+        display: grid;
+        grid-template-columns: 1fr auto;
+      }
+      /* The focus rule anchors to the well's PADDING box, and this well —
+         unlike the single-line field's borderless wrapper — carries the 1px
+         frame: −3 is the documented bordered-carrier offset (see
+         vfFocusUnderline), keeping the rule one blank row under the frame,
+         and the −1px insets span it across the border box edge to edge. */
+      .vf-field-well.vf-focus-rule::after {
+        --vf-focus-underline-offset: -3px;
+        left: calc(var(--vf-scale, 1) * -1px);
+        right: calc(var(--vf-scale, 1) * -1px);
+      }
+      /* textarea.vf-field so the border override out-ranks the vf-field skin's
+         own border (a bare element selector would lose to the class). */
+      textarea.vf-field {
+        display: block;
+        width: 100%;
+        min-width: 0;
+        /* Borderless — the frame is the well's (above). vf-text-field's own
+           3px/6px padding plus that border holds the text exactly where the
+           bordered field puts it; the mod() term is border-floor
+           compensation (engines floor the fractional border to whole CSS px;
+           this is exactly what they floored away), keeping the text on the
+           4px/7px system-px inset from the frame box at every scale. */
+        border: 0;
+        padding: calc(
+            var(--vf-scale, 1) * 3px + mod(var(--vf-scale, 1) * 1px, 1px)
+          )
+          calc(var(--vf-scale, 1) * 6px + mod(var(--vf-scale, 1) * 1px, 1px));
+        /* Wrapped entry copy on the display face's native line (editable
+           text is display type) — the same face token the static-text
+           components read, so a display retheme moves this well too. The
+           vfField skin inherits the host's 1.25 ratio (a 20px box — what
+           vf-text-field's 22px well is built on and keeps); a multi-line
+           well is typesetting, and takes the strike's own pitch: rows buys
+           one line each. */
+        line-height: calc(var(--vf-scale, 1) * var(--vf-line-height-display, 16px));
+        resize: none;
+        /* Native scrolling; the bar itself is hidden by the recipe
+           (.vf-scroll) and the reservation is the rail element beside the
+           text. */
+        overflow-y: auto;
+      }
+    `
+		];
+	}
+	render() {
+		return d`
+      <div class=${this.wellClass}>
+        <textarea
+          part="textarea"
+          class="vf-field vf-scroll"
+          rows=${this.rows}
+          aria-label=${this.label || this.hostLabel || f}
+          aria-describedby=${this.describedBy}
+          aria-required=${this.required ? "true" : f}
+          aria-invalid=${this.validity.valid ? f : "true"}
+          autocomplete=${this.forwardedAttr("autocomplete")}
+          inputmode=${this.forwardedAttr("inputmode")}
+          enterkeyhint=${this.forwardedAttr("enterkeyhint")}
+          maxlength=${this.forwardedAttr("maxlength")}
+          spellcheck=${this.forwardedAttr("spellcheck")}
+          autocapitalize=${this.forwardedAttr("autocapitalize")}
+          .value=${h(this.value)}
+          placeholder=${this.placeholder}
+          ?disabled=${this.isDisabled}
+          ?readonly=${this.readonly}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        ></textarea>
+        ${c(this.rail, "vertical")}
+      </div>
+      ${this.renderDescription()}
+    `;
+	}
+	handleInput(e) {
+		super.handleInput(e), this.scrollState.measure(), this.rail.sync();
+	}
+};
+t([p({ type: Number })], g.prototype, "rows", void 0), t([m("textarea")], g.prototype, "textarea", void 0), g = t([e("vf-text-area")], g);
+//#endregion
+export { g as VfTextArea };