vintage-frames 0.12.8 → 0.14.0

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

@@ -3,16 +3,17 @@ import { vfElement as t } from "../define.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 { vfField as a } from "../styles/recipes/field.js";
-import { STEPPER as o, STEPPER_DOWN_FILL as s, STEPPER_UP_FILL as c } from "../glyphs.js";
-import { VfTextControlBase as l } from "../text-control.js";
-import { decimalsOf as u } from "../number.js";
-import { css as d, html as f, nothing as p } from "lit";
-import { property as m, query as h, state as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-import { live as v } from "lit/directives/live.js";
+import { vfStrokeInset as a } from "../styles/recipes/stroke.js";
+import { vfField as o } from "../styles/recipes/field.js";
+import { STEPPER as s, STEPPER_DOWN_FILL as c, STEPPER_UP_FILL as l } from "../glyphs.js";
+import { VfTextControlBase as u } from "../text-control.js";
+import { decimalsOf as d } from "../number.js";
+import { css as f, html as p, nothing as m } from "lit";
+import { property as h, query as g, state as _ } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { live as y } from "lit/directives/live.js";
 //#region src/components/vf-number-field.ts
-var y = class extends r(l) {
+var b = class extends r(u) {
 	constructor(...t) {
 		super(...t), this.step = 1, this.pressed = null, this.#l = (e) => {
 			if (this.isDisabled || this.readonly) return;
@@ -48,14 +49,14 @@ var y = class extends r(l) {
 			this.value = e.target.value, this.#o("vf-input");
 		}, this.#p = (t) => {
 			let n = t.target.value, r = parseFloat(n);
-			this.value = Number.isNaN(r) ? n : String(Number(this.#r(r).toFixed(u(this.step)))), this.#o("vf-change"), e(this, "change");
+			this.value = Number.isNaN(r) ? n : String(Number(this.#r(r).toFixed(d(this.step)))), this.#o("vf-change"), e(this, "change");
 		};
 	}
 	static {
 		this.styles = [
 			i,
-			a,
-			d`
+			o,
+			f`
       :host {
         display: inline-flex;
         /* NOT stretch: that sized the well to the stepper's 25px, making this
@@ -82,7 +83,7 @@ var y = class extends r(l) {
            (1 above / 2 below) — optically centered, still on the device grid. */
         margin-top: calc(var(--vf-scale, 1) * 1px);
       }
-      input {
+      input.vf-field {
         flex: 1 1 auto;
         width: var(--vf-number-field-width, 4em);
         min-width: 2em;
@@ -94,7 +95,8 @@ var y = class extends r(l) {
            fills it, and a user stylesheet raising line-height grows the well
            instead of clipping the digits. */
         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: ${a(0)} ${a(6)};
         text-align: right;
       }
 
@@ -152,7 +154,7 @@ var y = class extends r(l) {
 		return this.min != null && e < this.min ? this.min : this.max != null && e > this.max ? this.max : e;
 	}
 	#i(t) {
-		let n = String(Number(this.#r(t).toFixed(u(this.step))));
+		let n = String(Number(this.#r(t).toFixed(d(this.step))));
 		n !== this.value && (this.value = n, this.#o("vf-change"), e(this, "input"), e(this, "change"));
 	}
 	#a(e) {
@@ -181,7 +183,7 @@ var y = class extends r(l) {
 	#p;
 	render() {
 		let e = this.isDisabled, t = this.#n();
-		return f`
+		return p`
       <div class=${this.wellClass}>
         <input
           part="input"
@@ -194,14 +196,14 @@ var y = class extends r(l) {
           maxlength=${this.forwardedAttr("maxlength")}
           spellcheck=${this.forwardedAttr("spellcheck")}
           autocapitalize=${this.forwardedAttr("autocapitalize")}
-          aria-label=${this.label || this.hostLabel || p}
+          aria-label=${this.label || this.hostLabel || m}
           aria-describedby=${this.describedBy}
-          aria-required=${this.required ? "true" : p}
-          aria-invalid=${this.validity.valid ? p : "true"}
-          aria-valuenow=${Number.isNaN(t) ? p : t}
-          aria-valuemin=${this.min ?? p}
-          aria-valuemax=${this.max ?? p}
-          .value=${v(this.value)}
+          aria-required=${this.required ? "true" : m}
+          aria-invalid=${this.validity.valid ? m : "true"}
+          aria-valuenow=${Number.isNaN(t) ? m : t}
+          aria-valuemin=${this.min ?? m}
+          aria-valuemax=${this.max ?? m}
+          .value=${y(this.value)}
           placeholder=${this.placeholder}
           ?disabled=${e}
           ?readonly=${this.readonly}
@@ -212,15 +214,15 @@ var y = class extends r(l) {
       </div>
       <span class="stepper vf-snap" part="stepper">
         <svg viewBox="0 0 15 25" shape-rendering="crispEdges" fill="currentColor" aria-hidden="true">
-          <path d=${o.d}></path>
-          <path class=${_({
+          <path d=${s.d}></path>
+          <path class=${v({
 			fill: !0,
 			on: this.pressed === "up"
-		})} d=${c.d}></path>
-          <path class=${_({
+		})} d=${l.d}></path>
+          <path class=${v({
 			fill: !0,
 			on: this.pressed === "down"
-		})} d=${s.d}></path>
+		})} d=${c.d}></path>
         </svg>
         <span
           class="hit up"
@@ -243,6 +245,6 @@ var y = class extends r(l) {
     `;
 	}
 };
-n([m({ type: Number })], y.prototype, "min", void 0), n([m({ type: Number })], y.prototype, "max", void 0), n([m({ type: Number })], y.prototype, "step", void 0), n([g()], y.prototype, "pressed", void 0), n([h("input")], y.prototype, "input", void 0), y = n([t("vf-number-field")], y);
+n([h({ type: Number })], b.prototype, "min", void 0), n([h({ type: Number })], b.prototype, "max", void 0), n([h({ type: Number })], b.prototype, "step", void 0), n([_()], b.prototype, "pressed", void 0), n([g("input")], b.prototype, "input", void 0), b = n([t("vf-number-field")], b);
 //#endregion
-export { y as VfNumberField };
+export { b as VfNumberField };

package/dist/components/vf-progress-bar.d.ts

@@ -48,8 +48,8 @@ export declare class VfProgressBar extends VfProgressBar_base {
     private readonly trackSize;
     /**
      * The consumer's `--vf-progress-stripes` override, or `''` for the kit
-     * barber — which exact-fill path the strip takes (src/tile-grid.ts).
-     * Re-read every update; a runtime token swap wants a `requestUpdate()`.
+     * barber — which path the strip takes (src/tile-grid.ts). Re-read every
+     * update; a runtime token swap wants a `requestUpdate()`.
      */
     private _pattern;
     constructor();

package/dist/components/vf-progress-bar.js

@@ -1,16 +1,17 @@
 import { vfElement as e } from "../define.js";
-import { ScaleController as t, sys as n, sysLength as r, toSys as i } from "../scale.js";
-import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as o } from "../position.js";
-import { vfBase as s } from "../styles/recipes/host.js";
-import { tileImage as c, tileRects as l, tileSpan as u, vfTileMaskSize as d } from "../styles/recipes/tile.js";
-import { TileRasterCache as f, patternOverride as p, tileGrid as m, vfTileGrid as h } from "../tile-grid.js";
-import { TrackWidthController as g } from "../track-width.js";
+import { ScaleController as t, sys as n, toSys 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 { tileImage as s, tileRects as c, tileSpan as l, vfTileMaskSize as u } from "../styles/recipes/tile.js";
+import { RepeatTileController as d, patternOverride as f, tileGrid as p, vfRepeatTileSize as m, vfTileGrid as h } from "../tile-grid.js";
+import { vfStrokeDecls as g } from "../styles/recipes/stroke.js";
 import { GridSnapController as _ } from "../grid-snap.js";
-import { LitElement as v, css as y, html as b, unsafeCSS as x } from "lit";
-import { property as S, query as C } from "lit/decorators.js";
+import { TrackWidthController as v } from "../track-width.js";
+import { LitElement as y, css as b, html as x, unsafeCSS as S } from "lit";
+import { property as C, query as w } from "lit/decorators.js";
 //#region src/components/vf-progress-bar.ts
-var w = 12, T = [
+var T = 12, E = [
 	[
 		0,
 		0,
@@ -113,12 +114,16 @@ var w = 12, T = [
 		1,
 		1
 	]
-], E = c(w, w, l(T)), D = u(w), O = class extends o(v) {
+], D = {
+	width: T,
+	height: T,
+	rects: E
+}, O = s(T, T, c(E)), k = l(T), A = class extends a(y) {
 	static {
 		this.styles = [
-			s,
+			o,
 			h,
-			y`
+			b`
       :host {
         display: block;
         height: calc(var(--vf-scale, 1) * 14px);
@@ -127,45 +132,48 @@ var w = 12, T = [
         position: relative;
         height: 100%;
         background: var(--vf-progress-track, #ffffff);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         border-radius: 0;
         overflow: hidden;
+        ${g()}
       }
       .fill {
         height: 100%;
         background: var(--vf-progress-fill, #000000);
-        /* The classic 1px black leading edge. */
-        border-right: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
       }
-      .fill.empty {
-        border-right: none;
+      /* The classic 1px black leading edge, on a fill with any width. */
+      .fill:not(.empty):not(.stripes) {
+        ${g({ edges: ["right"] })}
       }
       .fill.stripes {
         width: 100%;
-        border-right: none;
         /* Chunky 45° barber stripes: a 12×12 system-px cell whose two black
            \ bands are a staircase of axis-aligned 1px rects (genuine pixel
            art — a *diagonal* edge would blur where these stay pixel-exact)
            over this themeable white ground. The art itself rides the
-           .vf-tile-strip child (src/tile-grid.ts): the kit's whole-surface
-           raster, or a consumer --vf-progress-stripes token's placed tile
-           grid at the token's documented 60-px tile geometry. This layer is
-           the strip's containing block and its clip. */
+           .vf-tile-strip child (src/tile-grid.ts): the kit's repeating
+           tile, or a consumer --vf-progress-stripes token's placed tile grid
+           at the token's documented 60-px tile geometry. This layer is the
+           strip's containing block and its clip. */
         position: relative;
         background-color: var(--vf-white, #fff);
-        --_vf-tile-image: var(--vf-progress-stripes, ${x(E)});
+        --_vf-tile-image: var(--vf-progress-stripes, ${S(O)});
       }
-      /* The animated strip: rests one 12px cell to the left (fully covering
-         the fill), and each cycle advances one whole cell in 4 chunky steps —
-         steppy, not smooth, wrapping with zero phase jump because the art's
-           period is the cell. The animated value is a layout property, so
-         every step is one quantized length paint-snapped like any placed
-         box — no CSS length ever accumulates a phase. */
+      /* The animated strip: the fill's width plus one 12px cell, resting
+         that cell to the left (fully covering the fill), and each cycle
+         advances one whole cell in 4 chunky steps — steppy, not smooth,
+         wrapping with zero phase jump because the art's period is the cell.
+         The animated value is a layout property, so every step is one
+         quantized length paint-snapped like any placed box — no CSS length
+         ever accumulates a phase. */
       .vf-tile-strip {
         position: absolute;
         top: 0;
         height: 100%;
+        width: calc(100% + var(--vf-scale, 1) * 12px);
         left: calc(var(--vf-scale, 1) * -12px);
+        background-image: var(--_vf-barber-tile, none);
+        ${m}
+        image-rendering: pixelated;
         animation: vf-barber 0.4s steps(4, end) infinite;
       }
       @keyframes vf-barber {
@@ -179,8 +187,8 @@ var w = 12, T = [
       /* Forced colors: the fill and track are the bar's whole reading, and
          both have their own tokens with literal fallbacks the override
          flattens to Canvas — remapped here like the palette tokens in vfBase.
-         The strip's raster art would keep its literal black ink (invisible on
-         a dark theme), so the strip hides and the layer repaints as a mask
+         The strip's tile would keep its literal black ink (invisible on a
+         dark theme), so the strip hides and the layer repaints as a mask
          over the ink token — same tile, same token a consumer overrides —
          with the animation on the mask's position. The span-tiled mask keeps
          the zoom caveat (no mask pipeline rasterizes exactly at a zoom-minted
@@ -192,8 +200,8 @@ var w = 12, T = [
         }
         .fill.stripes {
           background-color: var(--vf-progress-fill, CanvasText);
-          mask-image: var(--vf-progress-stripes, ${x(E)});
-          ${d(w)}
+          mask-image: var(--vf-progress-stripes, ${S(O)});
+          ${u(T)}
           animation: vf-barber-mask 0.4s steps(4, end) infinite;
         }
         .fill.stripes .vf-tile-strip {
@@ -220,7 +228,11 @@ var w = 12, T = [
 	#e;
 	#t;
 	constructor() {
-		super(), this.scale = new t(this), this.gridSnap = new _(this), this.value = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.trackSize = new g(this, () => this.track), this._pattern = "", this.#e = new f(), this.#t = this.attachInternals(), this.#t.role = "progressbar", this.#t.ariaValueMin = "0";
+		super(), this.scale = new t(this), this.gridSnap = new _(this), this.value = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.trackSize = new v(this, () => this.track), this._pattern = "", this.#e = new d(this, {
+			getBox: () => this.renderRoot?.querySelector(".vf-tile-strip"),
+			getArt: () => this.indeterminate && !this._pattern ? D : null,
+			property: "--_vf-barber-tile"
+		}), this.#t = this.attachInternals(), this.#t.role = "progressbar", this.#t.ariaValueMin = "0";
 	}
 	get effectiveMax() {
 		return this.max > 0 ? this.max : 100;
@@ -229,44 +241,45 @@ var w = 12, T = [
 		return Math.min(Math.max(this.value, 0), this.effectiveMax);
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this.indeterminate && (this._pattern = p(this, "--vf-progress-stripes"));
+		super.willUpdate(e), this.indeterminate && (this._pattern = f(this, "--vf-progress-stripes"));
 	}
 	updated(e) {
 		e.has("label") && (this.#t.ariaLabel = this.label || null), e.has("max") && (this.#t.ariaValueMax = String(this.effectiveMax)), (e.has("value") || e.has("max") || e.has("indeterminate")) && (this.#t.ariaValueNow = this.indeterminate ? null : String(this.clampedValue));
 	}
 	render() {
 		if (this.indeterminate) {
-			let e = i(this.trackSize.width, this), t = Math.max(D, Math.ceil((e + w) / D) * D), n = this._pattern ? m({
-				cols: t / D,
-				rows: 1,
-				tile: D
-			}) : b`<div
-            class="vf-tile-raster"
-            style="width:${r(t)};height:${r(24)};background-image:${this.#e.for(w, w, T, t, 24)}"
-          ></div>`;
-			return b`
+			let e = null;
+			if (this._pattern) {
+				let t = r(this.trackSize.width, this), n = Math.max(1, Math.ceil((t + T) / k));
+				e = p({
+					cols: n,
+					rows: 1,
+					tile: k
+				});
+			}
+			return x`
         <div class="track vf-snap" part="track">
           <div class="fill stripes vf-tile-grid" part="fill">
-            <div class="vf-tile-strip">${n}</div>
+            <div class="vf-tile-strip">${e}</div>
           </div>
         </div>
       `;
 		}
-		let e = this.clampedValue / this.effectiveMax, t = i(this.trackSize.width, this), a = t > 0 ? `${n(Math.round(e * t), this)}px` : `${e * 100}%`;
-		return b`
+		let e = this.clampedValue / this.effectiveMax, t = r(this.trackSize.width, this), i = t > 0 ? `${n(Math.round(e * t), this)}px` : `${e * 100}%`;
+		return x`
       <div class="track vf-snap" part="track">
         <div
           class="fill ${e <= 0 ? "empty" : ""}"
           part="fill"
-          style="width: ${a}"
+          style="width: ${i}"
         ></div>
       </div>
     `;
 	}
 };
-a([S({ type: Number })], O.prototype, "value", void 0), a([S({ type: Number })], O.prototype, "max", void 0), a([S({
+i([C({ type: Number })], A.prototype, "value", void 0), i([C({ type: Number })], A.prototype, "max", void 0), i([C({
 	type: Boolean,
 	reflect: !0
-})], O.prototype, "indeterminate", void 0), a([S()], O.prototype, "label", void 0), a([C(".track")], O.prototype, "track", void 0), O = a([e("vf-progress-bar")], O);
+})], A.prototype, "indeterminate", void 0), i([C()], A.prototype, "label", void 0), i([w(".track")], A.prototype, "track", void 0), A = i([e("vf-progress-bar")], A);
 //#endregion
-export { O as VfProgressBar };
+export { A as VfProgressBar };

package/dist/components/vf-radio.js

@@ -21,10 +21,9 @@ var y = class extends r(f(p)) {
 			m`
       /* Keyboard focus underlines the circle itself — not the label, and not a
          ring around either (see vfFocusUnderline). One blank row below the
-         well, which is where vf-checkbox puts its own: −2 rather than that
-         control's −3 only because this well is unbordered, so the two rules
-         land on the same row of a mixed list. The 12px sprite sits half a
-         pixel proud of the 13px well, so the gap reads as one row or two
+         well, which ends on the same row as vf-checkbox's box, so the two
+         rules land on the same row of a mixed list. The 12px sprite sits half
+         a pixel proud of the 13px well, so the gap reads as one row or two
          depending on which way that rounds — the well is the anchor, not the
          sprite. */
       :host(:focus-visible) .circle::after {

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

@@ -3,19 +3,20 @@ 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, placementIn as i } from "../position.js";
 import { vfBase as a } from "../styles/recipes/host.js";
-import { vfFocusRing as o } from "../styles/recipes/focus.js";
-import { vfScrollRail as s } from "../styles/recipes/scroll-rail.js";
-import { GridSnapController as c } from "../grid-snap.js";
-import { ScrollStateController as l } from "../scroll-state.js";
-import { ScrollRailController as u, renderScrollRail as d } from "../scroll-rail.js";
-import { LitElement as f, css as p, html as m, nothing as h } from "lit";
-import { property as g, query as _, state as v } from "lit/decorators.js";
+import { vfStrokeDecls as o } from "../styles/recipes/stroke.js";
+import { vfFocusRing as s } from "../styles/recipes/focus.js";
+import { vfScrollRail as c } from "../styles/recipes/scroll-rail.js";
+import { GridSnapController as l } from "../grid-snap.js";
+import { ScrollStateController as u } from "../scroll-state.js";
+import { ScrollRailController as d, renderScrollRail as f } from "../scroll-rail.js";
+import { LitElement as p, css as m, html as h, nothing as g } from "lit";
+import { property as _, query as v, state as y } from "lit/decorators.js";
 //#region src/components/vf-scroll-area.ts
-var y = class extends r(f) {
+var b = class extends r(p) {
 	constructor() {
-		super(), this.scale = new t(this), this.gridSnap = new c(this), this.axis = "vertical", this.corner = !1, this.label = "", this.scrollState = new l(this, () => this.viewport, () => this.content, (e) => {
+		super(), this.scale = new t(this), this.gridSnap = new l(this), this.axis = "vertical", this.corner = !1, this.label = "", this.scrollState = new u(this, () => this.viewport, () => this.content, (e) => {
 			this._scrollable = e.x || e.y;
-		}), this.rail = new u(this, {
+		}), this.rail = new d(this, {
 			getScroll: () => this.viewport,
 			getContent: () => this.content
 		}), this._scrollable = !1, this.#e = () => {
@@ -38,13 +39,13 @@ var y = class extends r(f) {
 	static {
 		this.styles = [
 			a,
-			s,
-			p`
+			c,
+			m`
       :host {
         display: block;
       }
-      /* The snapped wrapper: a real 1px frame (the rails' outer line is this
-         border), a grid that reserves each rail as its own edge column/row —
+      /* The snapped wrapper: the 1px frame (the rails' outer line is this
+         stroke), a grid that reserves each rail as its own edge column/row —
          the rails size themselves to the 15px inside the frame — and the
          scroller and rails riding the grid-snap offset as one. */
       .box {
@@ -53,8 +54,8 @@ var y = class extends r(f) {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         background: var(--vf-white, #fff);
+        ${o()}
       }
       :host(:not([axis])) .box,
       :host([axis='vertical']) .box,
@@ -134,36 +135,36 @@ var y = class extends r(f) {
       /* Focusable so keyboard users can scroll; inset ring to stay in-box. */
       .viewport:focus-visible {
         --vf-focus-offset: -2px;
-        ${o}
+        ${s}
       }
     `
 		];
 	}
 	render() {
 		let e = this.axis !== "horizontal", t = this.axis === "horizontal" || this.axis === "both", n = e && t || this.corner;
-		return m`
+		return h`
       <div class="box vf-snap">
         <div
           class="viewport vf-scroll"
           part="viewport"
-          tabindex=${this._scrollable ? "0" : h}
-          role=${this.label ? "region" : this._scrollable ? "group" : h}
-          aria-label=${this.label || h}
+          tabindex=${this._scrollable ? "0" : g}
+          role=${this.label ? "region" : this._scrollable ? "group" : g}
+          aria-label=${this.label || g}
         >
           <div class="content">
             <slot @slotchange=${this._onSlotChange}></slot>
           </div>
         </div>
-        ${e ? d(this.rail, "vertical") : h}
-        ${t ? d(this.rail, "horizontal") : h}
-        ${n ? m`<div class="vf-rail-corner" aria-hidden="true"></div>` : h}
+        ${e ? f(this.rail, "vertical") : g}
+        ${t ? f(this.rail, "horizontal") : g}
+        ${n ? h`<div class="vf-rail-corner" aria-hidden="true"></div>` : g}
       </div>
     `;
 	}
 };
-n([g({ reflect: !0 })], y.prototype, "axis", void 0), n([g({
+n([_({ reflect: !0 })], b.prototype, "axis", void 0), n([_({
 	type: Boolean,
 	reflect: !0
-})], y.prototype, "corner", void 0), n([g()], y.prototype, "label", void 0), n([_(".viewport")], y.prototype, "viewport", void 0), n([_(".content")], y.prototype, "content", void 0), n([v()], y.prototype, "_scrollable", void 0), y = n([e("vf-scroll-area")], y);
+})], b.prototype, "corner", void 0), n([_()], b.prototype, "label", void 0), n([v(".viewport")], b.prototype, "viewport", void 0), n([v(".content")], b.prototype, "content", void 0), n([y()], b.prototype, "_scrollable", void 0), b = n([e("vf-scroll-area")], b);
 //#endregion
-export { y as VfScrollArea };
+export { b as VfScrollArea };