vintage-frames 0.12.7 → 0.13.0

package/dist/styles/recipes/scroll-rail.d.ts

@@ -1,6 +1,13 @@
-export declare const TROUGH_MOTIF_X: number;
-export declare const TROUGH_MOTIF_Y: number;
-export declare const TROUGH_RECTS: readonly import("./tile.js").TileRect[];
+/**
+ * The trough's 25% lattice is the library's `gray-25` — QuickDraw's
+ * `ltGray`, and the UI kit's "Scroll bg" sprite — on its minimal cell: a
+ * 4×2-system-px motif with a dot at (0,0) and (2,1). The DOM trough repeats
+ * it as a tile drawn at the display's resolution (`--_vf-trough-tile`,
+ * written by `ScrollRailController` — 1-bit at every scale, zoom-minted ones
+ * included); the SVG span tile below is the forced-colors mask, which
+ * repaints the same art in the remapped ink token.
+ */
+export declare const TROUGH: import("../../patterns.js").PatternMotif;
 /**
  * System 7 scroll rails, drawn by the kit as ordinary shadow DOM — the skin
  * for the subtree `renderScrollRail()` (src/scroll-rail.ts) produces. The
@@ -17,7 +24,7 @@ export declare const TROUGH_RECTS: readonly import("./tile.js").TileRect[];
  * is kit art: subpixel layout device-snaps at paint like every other element,
  * and the whole defect class is unrepresentable. It also renders identically
  * in every engine (Firefox included), is assertable headless, and lets the
- * trough adopt the exact tile raster the other dithers use.
+ * trough adopt the repeating tile the other dithers use.
  *
  * Geometry (system px) — the classic 16px cell, of which the outermost line
  * is the component's own 1px frame: the rail element is the 15 inside it —
@@ -52,9 +59,9 @@ export declare const TROUGH_RECTS: readonly import("./tile.js").TileRect[];
  * through the vfBase token remap like every other element. The arrows are
  * inline `currentColor` SVG now, so they re-ink with the palette (the old
  * `::-webkit-scrollbar` skin's one genuine residual — mask-image is ignored
- * on scrollbar pseudos — dies here). The trough raster keeps literal ink, so
- * it is hidden and the trough repaints as the ink token masked by the same
- * art (the vfDots idiom; the span mask keeps the zoom caveat every masked
+ * on scrollbar pseudos — dies here). The trough's tile keeps literal ink, so
+ * it goes and the trough repaints as the ink token masked by the same art
+ * (the vfDots idiom; the span mask keeps the zoom caveat every masked
  * surface has, an accepted residual).
  */
 export declare const vfScrollRail: import("lit").CSSResult;

package/dist/styles/recipes/scroll-rail.js

@@ -1,8 +1,9 @@
 import { tileImage as e, tileRects as t, vfTileMaskSize as n } from "./tile.js";
-import { PATTERNS as r, patternMotif as i } from "../../patterns.js";
-import { css as a, unsafeCSS as o } from "lit";
+import { vfRepeatTileSize as r } from "../../tile-grid.js";
+import { PATTERNS as i, patternMotif as a } from "../../patterns.js";
+import { css as o, unsafeCSS as s } from "lit";
 //#region src/styles/recipes/scroll-rail.ts
-var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u)), f = a`
+var c = a(i["gray-25"]), l = e(c.width, c.height, t(c.rects)), u = o`
   /* Hide the native bar, keep the native scrolling. Both lines ship:
      scrollbar-width reaches Chromium 121+/Firefox/Safari 18.2+, the pseudo
      covers older WebKit — the last scrollbar pseudo left in the kit.
@@ -117,25 +118,16 @@ var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u
     min-width: 0;
     min-height: 0;
   }
-  /* The trough: the token base color under the dither, clipping the raster's
-     overdraw (the art is ceiled up to whole motifs of the measured track). */
+  /* The trough: the dither over the token base color — the repeating tile
+     ScrollRailController writes (src/tile-grid.ts), 1-bit at every scale. */
   .vf-rail-trough {
     position: absolute;
     inset: 0;
-    overflow: hidden;
     background-color: var(--vf-scrollbar-track, var(--vf-white, #fff));
-    pointer-events: none;
-  }
-  /* The dither raster ScrollRailController sizes and writes — one image px
-     per system px, magnified nearest-neighbor (the vf-img idiom), so the
-     lattice is 1-bit at every scale. */
-  .vf-rail-trough-art {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
+    background-image: var(--_vf-trough-tile, none);
+    ${r}
     image-rendering: pixelated;
+    pointer-events: none;
   }
   /* The fixed System 7 thumb (never proportional): a white 16px box spanning
      the channel. Its border reads as inset 1px from each channel rail — the
@@ -207,21 +199,19 @@ var s = i(r["gray-25"]), c = s.width, l = s.height, u = s.rects, d = e(c, l, t(u
     display: none;
   }
 
-  /* Forced colors: the raster keeps literal ink, so it hides and the trough
+  /* Forced colors: the tile keeps literal ink, so it goes and the trough
      repaints as the remapped ink token masked by the same art (the vfDots
      idiom — and like every masked tile, the span mask keeps the zoom
      caveat). Everything else re-inks through the vfBase token remap; the
      arrows are currentColor SVG and follow the palette by themselves. */
   @media (forced-colors: active) {
     .vf-rail-trough {
+      background-image: none;
       background-color: var(--vf-black, #000);
-      mask-image: ${o(d)};
-      ${n(c, l)}
-    }
-    .vf-rail-trough-art {
-      display: none;
+      mask-image: ${s(l)};
+      ${n(c.width, c.height)}
     }
   }
 `;
 //#endregion
-export { c as TROUGH_MOTIF_X, l as TROUGH_MOTIF_Y, u as TROUGH_RECTS, f as vfScrollRail };
+export { c as TROUGH, u as vfScrollRail };

package/dist/styles/recipes/tile.d.ts

@@ -61,8 +61,9 @@ export type TileRect = readonly [x: number, y: number, w: number, h: number, fil
 export declare function tileRects(rects: readonly TileRect[]): string;
 /**
  * The motif tiled over `spanWidth × spanHeight` system px as a RASTER image —
- * a PNG data URI at one image px per system px — for the whole-surface fill a
- * converted tiled surface paints (src/tile-grid.ts).
+ * a PNG data URI at `density` image px per system px (one by default) — the
+ * encoder behind the tile every kit surface repeats (`repeatTile`,
+ * src/tile-grid.ts).
  *
  * A raster because of how engines rasterize a fill's art, not how they place
  * its box. Chromium rasterizes an SVG image at the box's *stored* (layout)
@@ -79,8 +80,15 @@ export declare function tileRects(rects: readonly TileRect[]): string;
  * out as a data URI and released — kit art only, so there is nothing
  * cross-origin to taint). Where canvas is unavailable the SVG tile is
  * returned instead, so the declaration still paints.
+ *
+ * `density` draws each system px as a `density × density` block of whole
+ * image px. An image drawn at the device px per system px it will be shown
+ * at is copied 1:1 onto the device grid, so no engine's image filter has
+ * anything to decide — Safari smooths a magnified image on its repeating
+ * path whatever `image-rendering` says. It is still one pattern bit per
+ * system px; only who scales it changes.
  */
-export declare function tileRaster(motifWidth: number, motifHeight: number, rects: readonly TileRect[], spanWidth?: number, spanHeight?: number): string;
+export declare function tileRaster(motifWidth: number, motifHeight: number, rects: readonly TileRect[], spanWidth?: number, spanHeight?: number, density?: number): string;
 /**
  * `background-size` for a REPEATING tile — stated as the motif, sized as the
  * span that motif tiles at ({@link tileSpan}).

package/dist/styles/recipes/tile.js

@@ -11,18 +11,18 @@ function i(e, t, n, i = r(e), a = r(t)) {
 function a(e) {
 	return e.map(([e, t, n, r, i]) => `%3Crect ${(e ? `x='${e}' ` : "") + (t ? `y='${t}' ` : "")}width='${n}' height='${r}'${i ? ` fill='${encodeURIComponent(i)}'` : ""}/%3E`).join("");
 }
-function o(e, t, n, o = r(e), s = r(t)) {
-	let c = () => i(e, t, a(n), o, s);
-	if (typeof document > "u") return c();
-	let l = document.createElement("canvas");
-	l.width = e, l.height = t;
-	let u = l.getContext("2d");
-	if (!u) return c();
-	for (let [e, t, r, i, a] of n) u.fillStyle = a ?? "#000000", u.fillRect(e, t, r, i);
-	let d = document.createElement("canvas");
-	d.width = o, d.height = s;
-	let f = d.getContext("2d"), p = f?.createPattern(l, "repeat");
-	return !f || !p ? c() : (f.fillStyle = p, f.fillRect(0, 0, o, s), `url("${d.toDataURL("image/png")}")`);
+function o(e, t, n, o = r(e), s = r(t), c = 1) {
+	let l = () => i(e, t, a(n), o, s);
+	if (typeof document > "u") return l();
+	let u = document.createElement("canvas");
+	u.width = e * c, u.height = t * c;
+	let d = u.getContext("2d");
+	if (!d) return l();
+	for (let [e, t, r, i, a] of n) d.fillStyle = a ?? "#000000", d.fillRect(e * c, t * c, r * c, i * c);
+	let f = document.createElement("canvas");
+	f.width = o * c, f.height = s * c;
+	let p = f.getContext("2d"), m = p?.createPattern(u, "repeat");
+	return !p || !m ? l() : (p.fillStyle = m, p.fillRect(0, 0, f.width, f.height), `url("${f.toDataURL("image/png")}")`);
 }
 function s(t, n = t) {
 	return e`

package/dist/tile-grid.d.ts

@@ -1,51 +1,39 @@
-import { type CSSResult, type TemplateResult } from 'lit';
+import { type CSSResult, type ReactiveController, type ReactiveControllerHost, type TemplateResult } from 'lit';
 import { type TileRect } from './styles/recipes/tile.js';
 /**
- * The tiled-fill machinery that replaces CSS `background-repeat` on the kit's
- * convertible tiled surfaces (the desktop dither, the windoid dots, the swatch
- * checker, the barber stripes).
+ * The tiled-fill machinery behind the kit's patterned surfaces — the desktop
+ * and container patterns, the windoid dots, the swatch checker, the barber
+ * stripes and the scroll trough.
  *
- * A CSS repeating fill is ONE paint-snapped box holding N *unsnapped* repeats,
- * each placed at `k × tileSize` where the tile size is a single stored length
- * the engine quantizes to its layout grid (Chromium 1/64 CSS px, Gecko 1/60).
- * The error compounds linearly with `k` until a motif boundary has walked a
- * whole device pixel and the 1-bit art smears to gray. The span construction
- * (`tileSpan`, src/styles/recipes/tile.ts) makes the stored length exact for
- * every scale the *density* ladder derives — but zoom mints scales with
- * arbitrary prime denominators (20/17 at Safari's 85%, 30/23 at its 115%),
- * and no finite lattice can hold those. ZOOM-TILE-DRIFT.md is the analysis;
- * TILE-GRID-PLAN.md the plan this module implements.
+ * **Kit art is a CSS repeat of one pre-scaled tile** ({@link repeatTile}):
+ * the motif laid over {@link REPEAT_TILE} system px square and drawn at n
+ * image px per system px, n = `--vf-scale × trueDpr` — whole by the scale
+ * contract — so the engine copies the tile to the device grid 1:1 and has no
+ * filtering to choose. The surface states the tile's size as
+ * {@link vfRepeatTileSize}, a length every engine holds exactly at every
+ * density and zoom, so each repeat lands exactly. The tile depends only on
+ * the art and n: it is encoded once per pair for the whole page, drawn again
+ * when zoom or the display changes n, and never on a resize.
+ * {@link RepeatTileController} keeps a box's tile current.
  *
- * Two rendering paths, chosen by whether the surface's pattern token is
- * overridden ({@link patternOverride}):
+ * Why 120, and why pre-scaled (TILE-REPEAT-PLAN.md, in git history at
+ * commit 5bc45c2, has the measurements): Safari smooths a repeated image it
+ * has to magnify, whatever
+ * `image-rendering` says, so the image must already be at device
+ * resolution; and WebKit on a 3× display now and then draws one small tile a
+ * device px narrow and resamples it, which tiles of 192 device px and up
+ * never showed. The repeat replaced one raster the size of the whole surface,
+ * re-encoded as it was resized.
  *
- * **Kit art (token unset): one whole-surface raster** — a single `.vf-tile-raster`
- * element carrying the motif tiled over the surface's declared system-px size
- * as a raster image at one image px per system px (`tileRaster`), stretched
- * `background-size: 100% 100%` under `image-rendering: pixelated`. Exact at
- * every scale, holdable or not, for two measured reasons: nearest-neighbor
- * sampling can only produce source colors, and ONE box has no interior
- * boundaries — Chromium paints an image background to the box's *unsnapped*
- * layout rect with antialiased edges, so any fill assembled from several
- * boxes blends a one-device-px line at every interior seam at a zoom-minted
- * scale, no matter how exactly the boxes were placed. (That measurement is
- * what buried both this plan's original per-tile form and SVG art of any
- * kind: Chromium rasterizes SVG images at the fractional layout size and
- * ignores `image-rendering` for them.) The box's own edge is the one place a
- * partial device pixel remains — the same status every component box already
- * has. The sampling stays exact because the box's stored length errs at most
- * 1/128 CSS px over the WHOLE surface: the relative error shrinks as the
- * surface grows, so the nearest-neighbor grid cannot slip a pixel at any
- * realistic size.
- *
- * **Consumer art (token set): the placed tile grid** — a flat set of
- * absolutely positioned `.vf-tile` boxes, each `T × T` system px at
+ * **Consumer art (a pattern token set): the placed tile grid** — a flat set
+ * of absolutely positioned `.vf-tile` boxes, each `T × T` system px at
  * `left: calc(var(--vf-scale, 1) * kT px)`: one single-multiplication length
  * per tile, quantized once, so each box paint-snaps onto the device grid
  * independently and the documented tile geometry (`--vf-*-pattern` art on a
- * 30- or 60-system-px tile) renders verbatim. Positions never accumulate
- * error; at a zoom-minted scale what remains is the bounded per-seam blend
- * above — a hairline per tile boundary, never surface-wide smear. Raster
+ * 30- or 60-system-px tile) renders verbatim. A token is any CSS image —
+ * SVG included — so it cannot be pre-scaled the way kit art is. Positions
+ * never accumulate error; at a scale the layout grid cannot hold, what
+ * remains is a hairline per tile boundary, never surface-wide smear. Raster
  * consumer art additionally magnifies nearest-neighbor (the `vf-img` idiom).
  *
  * The trap that must not come back: NEVER lay tiles out with CSS grid,
@@ -55,22 +43,18 @@ import { type TileRect } from './styles/recipes/tile.js';
  * returns. Flat absolute placement with one multiplication per tile is the
  * correctness, not a style choice.
  *
- * Wiring: the *container* — the layer the fill used to paint on, or a
+ * Wiring the grid: the *container* — the layer the fill paints on, or a
  * dedicated child filling it — takes the `vf-tile-grid` class (clip and
  * pointer transparency; it must be positioned, which every kit layer already
- * is). For the grid path it resolves `--_vf-tile-image` — the pattern-token
- * `var()` each tile stretches over its box, stated once so no data URI is
- * repeated per tile — and {@link tileGrid} renders the tiles. For the raster
- * path the component renders a `.vf-tile-raster` child whose
- * `background-image` it writes from `tileRaster(...)`, regenerated only when
- * the declared system-px size changes (density and zoom re-render nothing:
- * the box lengths are live against `--vf-scale`).
+ * is). It resolves `--_vf-tile-image` — the pattern-token `var()` each tile
+ * stretches over its box, stated once so no data URI is repeated per tile —
+ * and {@link tileGrid} renders the tiles.
  *
- * Forced colors keeps each surface's existing layer-level branches (flat
- * Canvas desktop, span-masked dots and barber, the swatch's
- * forced-color-adjust) — no mask pipeline rasterizes exactly at a zoom-minted
- * scale (image-rendering does not reach masks), so forced-colors-plus-zoom
- * remains the one accepted residual, unchanged from before this work.
+ * Forced colors keeps each surface's existing branches (flat Canvas desktop,
+ * span-masked dots, barber and trough, the swatch's forced-color-adjust) — no
+ * mask pipeline rasterizes exactly at a zoom-minted scale (image-rendering
+ * does not reach masks), so forced-colors-plus-zoom remains the one accepted
+ * residual.
  */
 export declare const vfTileGrid: CSSResult;
 /**
@@ -89,9 +73,9 @@ export declare function tileGrid({ cols, rows, tile, }: {
 }): TemplateResult[];
 /**
  * The consumer's override of a pattern token, or `''` when the token is unset
- * and the surface should paint its own art — how a converted surface picks
- * between its whole-surface raster (kit art) and its placed tile grid
- * (consumer art at the documented tile geometry).
+ * and the surface should paint its own art — how a surface picks between its
+ * repeating kit tile and its placed tile grid (consumer art at the
+ * documented tile geometry).
  *
  * Read with `getComputedStyle` at update time, not observed live: a pattern
  * token swapped at runtime without touching the component wants a nudge (any
@@ -99,15 +83,65 @@ export declare function tileGrid({ cols, rows, tile, }: {
  * contract the component's other measured inputs follow.
  */
 export declare function patternOverride(el: Element, token: string): string;
+/** A motif as rect data over the cell it tiles at, in system px. */
+export interface TileMotif {
+    readonly width: number;
+    readonly height: number;
+    readonly rects: readonly TileRect[];
+}
+/**
+ * The side of a kit repeat tile in system px: a whole number of every motif
+ * the kit draws (8 × 15 — the 2-, 4-, 8- and 12-px cells all divide it), and
+ * a whole number of layout px in every engine at every density and zoom
+ * (120n device px over the engine's ratio: 40n at 3×, 60n at 2×).
+ */
+export declare const REPEAT_TILE = 120;
+/**
+ * `background-size` for a {@link repeatTile}: {@link REPEAT_TILE} system px
+ * square, live against `--vf-scale`.
+ */
+export declare const vfRepeatTileSize: CSSResult;
 /**
- * A one-entry cache for a surface's whole-surface raster, keyed by its
- * system-px size — so every render with an unchanged size (all of them except
- * a declared-size change) reuses the encoded image instead of re-running
- * `tileRaster`'s canvas encode. A surface whose *art* can change under the
- * same size (a `pattern` attribute, src/pattern-fill.ts) passes an `id` for
- * it — the fixed-motif surfaces leave it empty.
+ * The motif laid over {@link REPEAT_TILE} system px square and drawn at `n`
+ * image px per system px, as a CSS `url()` — the image a
+ * {@link vfRepeatTileSize} repeat copies 1:1 at that density. Cached for the
+ * page by the motif's content and `n`.
+ */
+export declare function repeatTile(motif: TileMotif, n: number): string;
+/**
+ * Device px per system px at `el`: its `--vf-scale` (a consumer override
+ * included) times the true device pixel ratio — the `n` a {@link repeatTile}
+ * shown there is drawn at.
+ */
+export declare function devicePxAt(el: Element): number;
+/** What a component hands {@link RepeatTileController}. */
+export interface RepeatTileOptions {
+    /** The element the tile's custom property is written on. */
+    getBox: () => HTMLElement | null | undefined;
+    /** The art to tile, or null to write nothing (a consumer token owns the
+     *  surface, or the component isn't showing it). Return the same object for
+     *  the same art: an unchanged motif and density cost nothing. */
+    getArt: () => TileMotif | null | undefined;
+    /** The custom property the surface's `background-image` reads. */
+    property: string;
+}
+/**
+ * Keeps a box's {@link repeatTile} current: writes it as a custom property on
+ * the box's inline style after each host update, drawn for the density at
+ * the box, and again when zoom or the display changes that density
+ * ({@link onScaleChange}); removes it the moment there is nothing to paint.
+ * A custom-property channel rather than `background-image` itself, so a
+ * surface's forced-colors rule can out-cascade it without `!important`.
+ *
+ * The surface's stylesheet does the rest: `background-image` from the
+ * property, {@link vfRepeatTileSize}, `background-repeat: repeat`, and
+ * `image-rendering: pixelated` for the frame between a zoom and the new
+ * tile.
  */
-export declare class TileRasterCache {
+export declare class RepeatTileController implements ReactiveController {
     #private;
-    for(motifWidth: number, motifHeight: number, rects: readonly TileRect[], width: number, height: number, id?: string): string;
+    constructor(host: ReactiveControllerHost, opts: RepeatTileOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
 }

package/dist/tile-grid.js

@@ -1,53 +1,86 @@
-import { sysLength as e } from "./scale.js";
-import { tileRaster as t } from "./styles/recipes/tile.js";
-import { css as n, html as r } from "lit";
+import { truePixelRatio as e } from "./zoom.js";
+import { effectiveScale as t, onScaleChange as n, sysLength as r } from "./scale.js";
+import { tileRaster as i } from "./styles/recipes/tile.js";
+import { css as a, html as o } from "lit";
 //#region src/tile-grid.ts
-var i = n`
+var s = a`
   .vf-tile-grid {
     /* Clip the overdraw: a fill overdrawn past a box that is not a whole
-       number of tiles (or a raster ceiled up to one) crops here. */
+       number of tiles crops here. */
     overflow: hidden;
     pointer-events: none;
   }
-  .vf-tile,
-  .vf-tile-raster {
+  .vf-tile {
     position: absolute;
     /* The box IS the size — never the image's intrinsic size, and never an
        intra-box repeat: a consumer tile smaller than its box repeating
        inside it would re-import the accumulation this module removes. */
+    background-image: var(--_vf-tile-image);
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    /* Raster art samples nearest-neighbor — the exactness mechanism for the
-       kit's own tiles and the vf-img idiom for consumer raster art. A no-op
-       for SVG (which is why kit art is raster; see tileRaster). */
+    /* Consumer raster art samples nearest-neighbor — the vf-img idiom. A
+       no-op for SVG. */
     image-rendering: pixelated;
   }
-  .vf-tile {
-    background-image: var(--_vf-tile-image);
-  }
-  .vf-tile-raster {
-    top: 0;
-    left: 0;
-  }
 `;
-function a({ cols: t, rows: n, tile: i }) {
-	let a = e(i), o = [];
-	for (let s = 0; s < n; s++) for (let n = 0; n < t; n++) o.push(r`<span
+function c({ cols: e, rows: t, tile: n }) {
+	let i = r(n), a = [];
+	for (let s = 0; s < t; s++) for (let t = 0; t < e; t++) a.push(o`<span
           class="vf-tile"
-          style="left:${e(n * i)};top:${e(s * i)};width:${a};height:${a}"
+          style="left:${r(t * n)};top:${r(s * n)};width:${i};height:${i}"
         ></span>`);
-	return o;
+	return a;
 }
-function o(e, t) {
+function l(e, t) {
 	return typeof getComputedStyle > "u" ? "" : getComputedStyle(e).getPropertyValue(t).trim();
 }
-var s = class {
-	#e = "";
-	#t = "";
-	for(e, n, r, i, a, o = "") {
-		let s = `${o}|${i}x${a}`;
-		return this.#e !== s && (this.#e = s, this.#t = t(e, n, r, i, a)), this.#t;
+var u = 120, d = a`
+  background-size: calc(var(--vf-scale, 1) * ${120}px)
+    calc(var(--vf-scale, 1) * ${120}px);
+`, f = /* @__PURE__ */ new Map();
+function p(e, t) {
+	let n = `${e.width}×${e.height}|${t}|${e.rects.join(";")}`, r = f.get(n);
+	return r || (r = i(e.width, e.height, e.rects, 120, 120, t), f.set(n, r)), r;
+}
+function m(n) {
+	return Math.max(1, Math.round(t(n) * e()));
+}
+var h = class {
+	#e;
+	#t;
+	#n = null;
+	#r = null;
+	#i = 0;
+	#a = "";
+	constructor(e, t) {
+		this.#e = t, e.addController(this);
+	}
+	hostConnected() {
+		this.#t = n(() => this.#o());
+	}
+	hostDisconnected() {
+		this.#t?.(), this.#t = void 0;
+	}
+	hostUpdated() {
+		this.#o();
+	}
+	#o() {
+		let e = this.#e.getBox() ?? null;
+		e !== this.#n && (this.#s(), this.#n = e);
+		let t = this.#e.getArt() ?? null;
+		if (!e || !t) {
+			this.#s();
+			return;
+		}
+		let n = m(e);
+		if (t === this.#r && n === this.#i && this.#a) return;
+		this.#r = t, this.#i = n;
+		let r = p(t, n);
+		r !== this.#a && (this.#a = r, e.style.setProperty(this.#e.property, r));
+	}
+	#s() {
+		this.#r = null, this.#i = 0, this.#a && (this.#a = "", this.#n?.style.removeProperty(this.#e.property));
 	}
 };
 //#endregion
-export { s as TileRasterCache, o as patternOverride, a as tileGrid, i as vfTileGrid };
+export { u as REPEAT_TILE, h as RepeatTileController, m as devicePxAt, l as patternOverride, p as repeatTile, c as tileGrid, d as vfRepeatTileSize, s as vfTileGrid };

package/dist/track-width.d.ts

@@ -22,8 +22,7 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
  * runs on every update.
  *
  * The height comes along from the same observation, for a box measured on
- * both axes: `PatternFillController` (src/pattern-fill.ts) sizes a pattern
- * raster to a box whose extent nobody declared.
+ * both axes.
  */
 export declare class TrackWidthController implements ReactiveController {
     private readonly host;