vintage-frames 0.12.8 → 0.14.0

package/dist/components/vf-swatch.js

@@ -3,17 +3,17 @@ 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";
+import { tileImage as o, tileRects as s, tileSpan as c } from "../styles/recipes/tile.js";
+import { RepeatTileController as l, patternOverride as u, tileGrid as d, vfRepeatTileSize as f, vfTileGrid as p } from "../tile-grid.js";
+import { vfStrokeDecls as m, vfStrokeInset as h } from "../styles/recipes/stroke.js";
+import { vfFocusUnderline as g } from "../styles/recipes/focus.js";
+import { GridSnapController as _ } from "../grid-snap.js";
+import { VfShadowRoleControl as v } from "../form-control.js";
+import { css as y, html as b, unsafeCSS as x } from "lit";
+import { property as S } from "lit/decorators.js";
+import { styleMap as C } from "lit/directives/style-map.js";
 //#region src/components/vf-swatch.ts
-var C = 4, w = [
+var w = [
 	[
 		0,
 		0,
@@ -35,33 +35,37 @@ var C = 4, w = [
 		2,
 		"#c0c0c0"
 	]
-], T = o(C, C, s(w)), E = c(C), D = class extends i(_) {
+], T = {
+	width: 4,
+	height: 4,
+	rects: w
+}, E = o(T.width, T.height, s(w)), D = c(T.width), O = class extends i(v) {
 	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();
+		super(...e), this.width = 24, this.height = 18, this.shadow = !1, this.label = "", this.disabled = !1, this.scale = new t(this), this.gridSnap = new _(this), this._pattern = "", this.#e = new l(this, {
+			getBox: () => this.renderRoot?.querySelector(".fill"),
+			getArt: () => this._pattern ? null : T,
+			property: "--_vf-checker-tile"
+		});
 	}
 	static {
 		this.shadowRootOptions = {
-			..._.shadowRootOptions,
+			...v.shadowRootOptions,
 			delegatesFocus: !0
 		};
 	}
 	static {
 		this.styles = [
 			a,
-			h,
-			v`
+			p,
+			y`
       :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)});
+        /* The consumer's checker token, as the art channel of the placed
+           tile grid .fill renders for it at the token's documented 60-px
+           tile geometry (src/tile-grid.ts). The kit checker is .fill's own
+           repeating tile instead. */
+        --_checker: var(--vf-swatch-checker, ${x(E)});
         /* 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
@@ -71,24 +75,24 @@ var C = 4, w = [
       :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. */
+      /* The 1px black frame, a stroke, and — as the button's own background
+         showing through its 1px padding inside the stroke — the white inset
+         ring around the fill. After the stroke, the opt-in depth: the kit's
+         one hard shadow, painted outside the border box like every raised
+         surface's, and nothing at depth 0. */
       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}
+        ${m({
+				padding: 1,
+				shadows: "calc(var(--vf-scale, 1) * var(--_shadow-depth)) calc(var(--vf-scale, 1) * var(--_shadow-depth)) 0 0 var(--vf-black, #000)"
+			})}
       }
       /* Pressed: the white inset inverts to black — instant 1-bit feedback. */
       button:active:not(:disabled) {
@@ -101,48 +105,48 @@ var C = 4, w = [
          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). */
+         box, which runs under the frame's stroke, before the blank row and
+         the rule itself — 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 rule spans
+         that same box, the shape the swatch reads as (the shadow is a depth
+         cue, not part of the silhouette). Under forced colors the stroke is a
+         border and the padding box sits inside it, so the insets grow by it
+         there. */
       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);
+        ${g}
+        bottom: ${h("(-3px - var(--_shadow-depth))")};
+        left: ${h(-1)};
+        right: ${h(-1)};
       }
       .fill {
         display: block;
-        /* The containing block for the exact fill and the tint. */
+        /* The containing block for the token's tile grid 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)}
+        /* The kit checker: the repeating tile the swatch writes
+           (src/tile-grid.ts). */
+        background-image: var(--_vf-checker-tile, none);
+        ${f}
+        image-rendering: pixelated;
         /* 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. */
+           color picker). It inherits to the 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. */
+      /* A consumer checker token switches the fill to the placed tile grid,
+         whose 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
@@ -156,21 +160,18 @@ var C = 4, w = [
 	}
 	#e;
 	willUpdate(e) {
-		super.willUpdate(e), this._pattern = p(this, "--vf-swatch-checker");
+		super.willUpdate(e), this._pattern = u(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
+		let e = Math.max(1, (this.width ?? 24) - 4), t = Math.max(1, (this.height ?? 18) - 4), r = this._pattern ? d({
+			cols: Math.ceil(e / D),
+			rows: Math.ceil(t / D),
+			tile: D
+		}) : null, i = this.color ? b`<span
           class="tint"
-          style=${S({ "background-color": this.color })}
+          style=${C({ "background-color": this.color })}
         ></span>` : null;
-		return y`
+		return b`
       <button
         part="button"
         class="vf-snap"
@@ -183,19 +184,19 @@ var C = 4, w = [
         <span
           class="fill vf-tile-grid${this._pattern ? " patterned" : ""}"
           part="fill"
-          >${i}${a}</span
+          >${r}${i}</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({
+r([S()], O.prototype, "color", void 0), r([S({ type: Number })], O.prototype, "width", void 0), r([S({ type: Number })], O.prototype, "height", void 0), r([S({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "shadow", void 0), r([x()], D.prototype, "label", void 0), r([x({
+})], O.prototype, "shadow", void 0), r([S()], O.prototype, "label", void 0), r([S({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "disabled", void 0), D = r([e("vf-swatch")], D);
+})], O.prototype, "disabled", void 0), O = r([e("vf-swatch")], O);
 //#endregion
-export { D as VfSwatch };
+export { O as VfSwatch };

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

@@ -2,25 +2,26 @@ 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";
+import { vfStrokeDecls as i, vfStrokeInset as a } from "../styles/recipes/stroke.js";
+import { vfField as o } from "../styles/recipes/field.js";
+import { vfScrollRail as s } from "../styles/recipes/scroll-rail.js";
+import { ScrollStateController as c } from "../scroll-state.js";
+import { ScrollRailController as l, renderScrollRail as u } from "../scroll-rail.js";
+import { VfTextControlBase as d } from "../text-control.js";
+import { css as f, html as p, nothing as m } from "lit";
+import { property as h, query as g } from "lit/decorators.js";
+import { live as _ } from "lit/directives/live.js";
 //#region src/components/vf-text-area.ts
-var g = class extends n(l) {
+var v = class extends n(d) {
 	constructor(...e) {
-		super(...e), this.rows = 4, this.scrollState = new o(this, () => this.textarea), this.rail = new s(this, { getScroll: () => this.textarea });
+		super(...e), this.rows = 4, this.scrollState = new c(this, () => this.textarea), this.rail = new l(this, { getScroll: () => this.textarea });
 	}
 	static {
 		this.styles = [
 			r,
-			i,
-			a,
-			u`
+			o,
+			s,
+			f`
       :host {
         display: inline-block;
         /* A sensible default width (authored system px, scaled) so a bare field
@@ -34,31 +35,32 @@ var g = class extends n(l) {
          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;
+        ${i()}
       }
-      /* 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. */
+      /* The focus rule anchors to the well's padding box, which runs under
+         the frame's stroke: the same −2 as the borderless single-line well
+         puts the rule one blank row under the frame, edge to edge. Under
+         forced colors the frame is a border again and the padding box sits
+         inside it, so the offsets grow by it there. */
       .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);
+        bottom: ${a(-3)};
+        left: ${a(-1)};
+        right: ${a(-1)};
       }
-      /* 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 so the overrides out-rank the vf-field skin's own
+         stroke (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, 4px/7px from the frame box. */
+        /* No frame of its own — the frame is the well's (above). The 3px/6px
+           padding inside it holds the text exactly where the framed field
+           puts it, 4px/7px from the frame box. */
         border: 0;
+        box-shadow: none;
         padding: calc(var(--vf-scale, 1) * 3px) calc(var(--vf-scale, 1) * 6px);
         /* Wrapped entry copy on the display face's native line (editable
            text is display type) — the same face token the static-text
@@ -78,30 +80,30 @@ var g = class extends n(l) {
 		];
 	}
 	render() {
-		return d`
+		return p`
       <div class=${this.wellClass}>
         <textarea
           part="textarea"
           class="vf-field vf-scroll"
           rows=${this.rows}
-          aria-label=${this.label || this.hostLabel || f}
+          aria-label=${this.label || this.hostLabel || m}
           aria-describedby=${this.describedBy}
-          aria-required=${this.required ? "true" : f}
-          aria-invalid=${this.validity.valid ? f : "true"}
+          aria-required=${this.required ? "true" : m}
+          aria-invalid=${this.validity.valid ? m : "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)}
+          .value=${_(this.value)}
           placeholder=${this.placeholder}
           ?disabled=${this.isDisabled}
           ?readonly=${this.readonly}
           @input=${this.handleInput}
           @change=${this.handleChange}
         ></textarea>
-        ${c(this.rail, "vertical")}
+        ${u(this.rail, "vertical")}
       </div>
       ${this.renderDescription()}
     `;
@@ -110,6 +112,6 @@ var g = class extends n(l) {
 		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);
+t([h({ type: Number })], v.prototype, "rows", void 0), t([g("textarea")], v.prototype, "textarea", void 0), v = t([e("vf-text-area")], v);
 //#endregion
-export { g as VfTextArea };
+export { v as VfTextArea };

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

@@ -2,21 +2,22 @@ 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";
+import { vfStrokeInset as i } from "../styles/recipes/stroke.js";
+import { vfField as a } from "../styles/recipes/field.js";
+import { VfTextControlBase as o } from "../text-control.js";
+import { css as s, html as c, nothing as l } from "lit";
+import { property as u } from "lit/decorators.js";
+import { live as d } from "lit/directives/live.js";
 //#region src/components/vf-text-field.ts
-var d = class extends n(a) {
+var f = class extends n(o) {
 	constructor(...e) {
 		super(...e), this.type = "text";
 	}
 	static {
 		this.styles = [
 			r,
-			i,
-			o`
+			a,
+			s`
       :host {
         display: inline-block;
         /* A sensible default width (authored system px, scaled) so a bare field
@@ -24,7 +25,7 @@ var d = class extends n(a) {
            on the host or the --vf-field-width token. */
         width: calc(var(--vf-scale, 1) * var(--vf-field-width, 180px));
       }
-      input {
+      input.vf-field {
         display: block;
         width: 100%;
         /* min-, not height: the default line box exactly fills the 22px well,
@@ -32,28 +33,29 @@ var d = class extends n(a) {
            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);
+        /* The 6px text inset, inside the well's stroke (vfField). */
+        padding: ${i(0)} ${i(6)};
       }
     `
 		];
 	}
 	static {
-		this.forwardedAttributes = [...a.forwardedAttributes, "pattern"];
+		this.forwardedAttributes = [...o.forwardedAttributes, "pattern"];
 	}
 	handleKeydown(e) {
 		this.isSubmitEnter(e) && this.requestImplicitSubmit() && e.preventDefault();
 	}
 	render() {
-		return s`
+		return c`
       <div class=${this.wellClass}>
         <input
           part="input"
           class="vf-field"
           type=${this.type}
-          aria-label=${this.label || this.hostLabel || c}
+          aria-label=${this.label || this.hostLabel || l}
           aria-describedby=${this.describedBy}
-          aria-required=${this.required ? "true" : c}
-          aria-invalid=${this.validity.valid ? c : "true"}
+          aria-required=${this.required ? "true" : l}
+          aria-invalid=${this.validity.valid ? l : "true"}
           autocomplete=${this.forwardedAttr("autocomplete")}
           inputmode=${this.forwardedAttr("inputmode")}
           enterkeyhint=${this.forwardedAttr("enterkeyhint")}
@@ -61,7 +63,7 @@ var d = class extends n(a) {
           pattern=${this.forwardedAttr("pattern")}
           spellcheck=${this.forwardedAttr("spellcheck")}
           autocapitalize=${this.forwardedAttr("autocapitalize")}
-          .value=${u(this.value)}
+          .value=${d(this.value)}
           placeholder=${this.placeholder}
           ?disabled=${this.isDisabled}
           ?readonly=${this.readonly}
@@ -74,6 +76,6 @@ var d = class extends n(a) {
     `;
 	}
 };
-t([l()], d.prototype, "type", void 0), d = t([e("vf-text-field")], d);
+t([u()], f.prototype, "type", void 0), f = t([e("vf-text-field")], f);
 //#endregion
-export { d as VfTextField };
+export { f as VfTextField };

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

@@ -227,20 +227,17 @@ export declare class VfWindow extends VfWindow_base {
     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()`.
+     * which 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
+     * A consumer `--vf-dots-pattern`'s placed tile grid, rendered into the
+     * utility bar's `.vf-dots` layer at the token's documented 30-px geometry
      * (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.
+     * frame borders. A window with no declared width renders none, and the
+     * layer repeats the token in CSS instead (`vf-dots-token`).
      */
     private _dotsTexture;
     /**