vintage-frames 0.4.0 → 0.5.1

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

@@ -5,8 +5,8 @@ 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 { GridSnapController as g } from "../grid-snap.js";
-import { TrackWidthController as _ } from "../track-width.js";
+import { TrackWidthController as g } from "../track-width.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";
 //#region src/components/vf-progress-bar.ts
@@ -220,7 +220,7 @@ var w = 12, T = [
 	#e;
 	#t;
 	constructor() {
-		super(), this.scale = new t(this), this.gridSnap = new g(this), this.value = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.trackSize = new _(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 g(this, () => this.track), this._pattern = "", this.#e = new f(), this.#t = this.attachInternals(), this.#t.role = "progressbar", this.#t.ariaValueMin = "0";
 	}
 	get effectiveMax() {
 		return this.max > 0 ? this.max : 100;

package/dist/components/vf-slider.js

@@ -5,12 +5,12 @@ import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { VfPositioned as s } from "../position.js";
 import { vfBase as c } from "../styles/recipes/host.js";
 import { vfFocusUnderline as l } from "../styles/recipes/focus.js";
-import { GridSnapController as u } from "../grid-snap.js";
-import { SLIDER_THUMB as d, SLIDER_THUMB_FACE as f } from "../glyphs.js";
-import { VfFormControl as p } from "../form-control.js";
-import { FocusRuleController as m } from "../focus-modality.js";
-import { decimalsOf as h } from "../number.js";
-import { TrackWidthController as g } from "../track-width.js";
+import { TrackWidthController as u } from "../track-width.js";
+import { GridSnapController as d } from "../grid-snap.js";
+import { SLIDER_THUMB as f, SLIDER_THUMB_FACE as p } from "../glyphs.js";
+import { VfFormControl as m } from "../form-control.js";
+import { FocusRuleController as h } from "../focus-modality.js";
+import { decimalsOf as g } from "../number.js";
 import { css as _, html as v } from "lit";
 import { property as y, query as b } from "lit/decorators.js";
 //#region src/components/vf-slider.ts
@@ -21,7 +21,7 @@ function D(e, t) {
 	};
 	return r(1, 0, e - 2, 1), r(1, 3, e - 2, 1), r(0, 1, 1, 2), r(e - 1, 1, 1, 2), r(1, 1, Math.min(Math.max(t, 0), e - 1) - 1, 2), n.join("");
 }
-var O = class extends s(p) {
+var O = class extends s(m) {
 	static {
 		this.styles = [c, _`
       :host {
@@ -110,7 +110,7 @@ var O = class extends s(p) {
 	#t;
 	#n;
 	constructor() {
-		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new g(this, () => this.track), this.scale = new r(this), this.gridSnap = new u(this), this.selfManagedTabIndex = !1, this.#e = new m(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
+		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new u(this, () => this.track), this.scale = new r(this), this.gridSnap = new d(this), this.selfManagedTabIndex = !1, this.#e = new h(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
 			if (!(this.isDisabled || e.button !== 0)) {
 				e.preventDefault(), this.#e.suppress(), this.focus(), this.#n = !0, this.#t = this.value;
 				try {
@@ -181,7 +181,7 @@ var O = class extends s(p) {
 	}
 	#o(e) {
 		let t = this.#i, n = Math.round((e - this.min) / t), r = this.#a(this.min + n * t);
-		return Number(r.toFixed(h(t)));
+		return Number(r.toFixed(g(t)));
 	}
 	get #s() {
 		let e = Number.isFinite(this.value) ? this.value : this.min;
@@ -242,8 +242,8 @@ var O = class extends s(p) {
             shape-rendering="crispEdges"
             aria-hidden="true"
           >
-            <path class="thumb-face" d=${f.d}></path>
-            <path class="thumb-outline" d=${d.d}></path>
+            <path class="thumb-face" d=${p.d}></path>
+            <path class="thumb-outline" d=${f.d}></path>
           </svg>
         </span>
       </div>

package/dist/components/vf-window.js

@@ -4,28 +4,29 @@ import { ScaleController as n, snapSys as r, sysLength as i, toSysExact as a } f
 import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { PlacementController as s, VfPositioned as c, warnMovableContract as l } from "../position.js";
 import { vfBase as u } from "../styles/recipes/host.js";
-import { DOT_RECTS as d, DOT_SPAN as f, vfDots as p, vfStripes as m } from "../styles/recipes/pattern.js";
-import { vfChromeFrame as h } from "../styles/recipes/surface.js";
-import { vfTitleBar as g, vfWindowWidgets as _ } from "../styles/recipes/title-bar.js";
-import { vfFocus as v } from "../styles/recipes/focus.js";
-import { TileRasterCache as y, patternOverride as b, tileGrid as x, vfTileGrid as S } from "../tile-grid.js";
-import { GridSnapController as C } from "../grid-snap.js";
-import { VfSized as w } from "../size.js";
-import { DragController as T } from "../drag.js";
-import { TitleCenterController as E, chromeTitleBar as D, closeBox as O, widgetLabel as k, zoomBox as A } from "../chrome.js";
+import { DOT_MOTIF as d, DOT_RECTS as f, DOT_SPAN as p, vfDots as m, vfStripes as h } from "../styles/recipes/pattern.js";
+import { vfChromeFrame as g } from "../styles/recipes/surface.js";
+import { vfRule as _ } from "../styles/recipes/rule.js";
+import { vfTitleBar as v, vfWindowWidgets as y } from "../styles/recipes/title-bar.js";
+import { vfFocus as b } from "../styles/recipes/focus.js";
+import { TileRasterCache as x, patternOverride as S, tileGrid as C, vfTileGrid as w } from "../tile-grid.js";
+import { GridSnapController as T } from "../grid-snap.js";
+import { VfSized as E } from "../size.js";
+import { DragController as D } from "../drag.js";
+import { TitleCenterController as O, chromeTitleBar as k, closeBox as A, widgetLabel as j, zoomBox as M } from "../chrome.js";
 import "./vf-scroll-area.js";
-import { LitElement as j, css as M, html as N, nothing as P } from "lit";
-import { property as F, state as I } from "lit/decorators.js";
+import { LitElement as N, css as P, html as F, nothing as I } from "lit";
+import { property as L, state as R } from "lit/decorators.js";
 //#region src/components/vf-window.ts
-var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
+var z = 80, B = 54, V = 24, H = 8, U = class extends E(c(N)) {
 	constructor(...e) {
-		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this.flush = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new C(this), this.titleCenter = new E(this), this._dotsPattern = "", this.#e = new y(), this.#t = (e, t, n) => {
+		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this.flush = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new T(this), this.titleCenter = new O(this), this._dotsPattern = "", this.#e = new x(), this.#t = (e, t, n) => {
 			let r = a(this.offsetWidth, this);
 			return {
-				x: Math.min(Math.max(e, z - r), n.width - z),
-				y: Math.min(Math.max(t, 0), Math.max(0, n.height - z))
+				x: Math.min(Math.max(e, V - r), n.width - V),
+				y: Math.min(Math.max(t, 0), Math.max(0, n.height - V))
 			};
-		}, this._placement = new s(this, (e, t, n) => this.#t(e, t, n)), this._drag = new T(this, {
+		}, this._placement = new s(this, (e, t, n) => this.#t(e, t, n)), this._drag = new D(this, {
 			onDragStart: (e) => !this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box")) ? null : (this.#i(), this._placement.seed()),
 			onDrag: (e, t) => this._placement.moveTo(e, t)
 		}), this._resizeState = null, this.#n = !1, this.#r = !1;
@@ -33,14 +34,15 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
 	static {
 		this.styles = [
 			u,
-			m,
-			p,
-			S,
-			v,
 			h,
+			m,
+			w,
+			b,
 			g,
 			_,
-			M`
+			v,
+			y,
+			P`
       :host {
         display: block;
         position: relative;
@@ -221,7 +223,7 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
         display: flex;
         align-items: center;
         height: calc(var(--vf-scale, 1) * var(--vf-status-bar-height, 15px));
-        border-top: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+        /* The rule is vfRule's vf-rule-top on the element. */
         background: var(--vf-white, #ffffff);
         padding-inline: calc(var(--vf-scale, 1) * 6px);
         line-height: calc(var(--vf-scale, 1) * var(--vf-line-height, 12px));
@@ -281,20 +283,20 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
 	}
 	#e;
 	willUpdate(e) {
-		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = b(this, "--vf-dots-pattern"));
+		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = S(this, "--vf-dots-pattern"));
 	}
 	_dotsTexture() {
 		if (this.width == null) return;
 		let e = Math.max(1, this.width - 2);
-		if (this._dotsPattern) return x({
-			cols: Math.ceil(e / f),
+		if (this._dotsPattern) return C({
+			cols: Math.ceil(e / p),
 			rows: 1,
-			tile: f
+			tile: p
 		});
-		let t = Math.ceil((e + 2) / f) * f, n = B + 2;
-		return N`<div
+		let t = Math.ceil((e + d) / p) * p, n = H + d;
+		return F`<div
       class="vf-tile-raster"
-      style="width:${i(t)};height:${i(n)};background-image:${this.#e.for(2, 2, d, t, n)}"
+      style="width:${i(t)};height:${i(n)};background-image:${this.#e.for(d, d, f, t, n)}"
     ></div>`;
 	}
 	#t;
@@ -346,7 +348,7 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
 	_onGrowPointerMove(e) {
 		let t = this._resizeState;
 		if (!t || e.pointerId !== t.pointerId) return;
-		let n = r(Math.max(L, t.baseWidth + a(e.clientX - t.startX, this)), this), i = r(Math.max(R, t.baseHeight + a(e.clientY - t.startY, this)), this);
+		let n = r(Math.max(z, t.baseWidth + a(e.clientX - t.startX, this)), this), i = r(Math.max(B, t.baseHeight + a(e.clientY - t.startY, this)), this);
 		(n !== this.width || i !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = n, this.height = i;
 	}
 	_onGrowPointerEnd(t) {
@@ -361,34 +363,34 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
 		});
 	}
 	render() {
-		return N`
+		return F`
       <div
         class="vf-frame vf-snap"
         part="frame"
         role="group"
-        aria-labelledby=${this.heading ? "title" : P}
+        aria-labelledby=${this.heading ? "title" : I}
       >
-        ${D(this._drag, N`
-            ${this.closable ? O(k("Close", this.heading), this._onCloseClick) : P}
+        ${k(this._drag, F`
+            ${this.closable ? A(j("Close", this.heading), this._onCloseClick) : I}
             <span class="vf-title" part="title" id="title">${this.heading}</span>
-            ${this.zoomable ? A(k("Zoom", this.heading), this._onZoomClick) : P}
+            ${this.zoomable ? M(j("Zoom", this.heading), this._onZoomClick) : I}
           `, this.variant === "utility" ? "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
         <div class="body" part="body">
-          ${this.scrollbars ? N`
+          ${this.scrollbars ? F`
                 <vf-scroll-area
                   class="edge-scroll"
                   axis=${this.scrollbars}
-                  label=${this.heading || P}
+                  label=${this.heading || I}
                   exportparts="viewport"
                 >
                   <slot></slot>
                 </vf-scroll-area>
-              ` : N`<slot></slot>`}
+              ` : F`<slot></slot>`}
         </div>
-        <div class="status ${this._hasStatus ? "" : "empty"}" part="status-bar">
+        <div class="status vf-rule-top ${this._hasStatus ? "" : "empty"}" part="status-bar">
           <slot name="status" @slotchange=${this._onStatusSlotChange}></slot>
         </div>
-        ${this.resizable ? N`
+        ${this.resizable ? F`
               <div
                 class="grow"
                 part="grow-box"
@@ -398,29 +400,29 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
                 @pointercancel=${this._onGrowPointerEnd}
                 @lostpointercapture=${this._onGrowPointerEnd}
               ></div>
-            ` : P}
+            ` : I}
       </div>
     `;
 	}
 };
-o([F({ reflect: !0 })], V.prototype, "variant", void 0), o([F()], V.prototype, "heading", void 0), o([F({
+o([L({ reflect: !0 })], U.prototype, "variant", void 0), o([L()], U.prototype, "heading", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "active", void 0), o([F({
+})], U.prototype, "active", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "closable", void 0), o([F({
+})], U.prototype, "closable", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "zoomable", void 0), o([F({
+})], U.prototype, "zoomable", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "movable", void 0), o([F({
+})], U.prototype, "movable", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "resizable", void 0), o([F({
+})], U.prototype, "resizable", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "flush", void 0), o([F({ reflect: !0 })], V.prototype, "scrollbars", void 0), o([I()], V.prototype, "_hasStatus", void 0), V = o([t("vf-window")], V);
+})], U.prototype, "flush", void 0), o([L({ reflect: !0 })], U.prototype, "scrollbars", void 0), o([R()], U.prototype, "_hasStatus", void 0), U = o([t("vf-window")], U);
 //#endregion
-export { V as VfWindow };
+export { U as VfWindow };

package/dist/index.d.ts

@@ -88,8 +88,15 @@ export { CURSOR_ARROW, CURSOR_I_BEAM, CURSOR_CROSSHAIR, CURSOR_WAIT, } from './c
  * `static styles` to inherit the kit's type, panel frame, window chrome, focus
  * ring, field well and System 7 scroll-rail skin.
  */
-export { vfBase, vfBodyDecls, vfDisplay, vfDisplayDecls, vfStaticText, vfPanel, vfChromeFrame, vfModalFrame, vfTitleBar, vfWindowWidgets, vfHardShadowDecls, vfStripes, vfDots, vfFocus, vfFocusRing, vfFocusUnderline, vfToggle, vfField, vfScrollRail, vfTileSize, vfTileMaskSize, tileImage, tileRaster, tileRects, tileSpan, TILE_LATTICE, } from './styles/base.js';
+export { vfBase, vfBodyDecls, vfDisplay, vfDisplayDecls, vfStaticText, vfPanel, vfChromeFrame, vfModalFrame, vfRule, vfTitleBar, vfWindowWidgets, vfHardShadowDecls, vfStripes, vfDots, vfFocus, vfFocusRing, vfFocusUnderline, vfToggle, vfField, vfScrollRail, vfTileSize, vfTileMaskSize, tileImage, tileRaster, tileRects, tileSpan, TILE_LATTICE, } from './styles/base.js';
 export type { TileRect } from './styles/base.js';
+/**
+ * The 1px rule's attribute grammar (`vf-container rule="top bottom"`): the
+ * edge names, the parser, and the class list a resolved rule puts on a box
+ * styled by `vfRule`.
+ */
+export { RULE_EDGES, parseRule, ruleClasses } from './styles/base.js';
+export type { RuleEdge } from './styles/base.js';
 /**
  * The exact tiled fill (TILE-GRID-PLAN.md): a surface's own art as one
  * whole-surface raster (`tileRaster` + the `vf-tile-raster` rules), and a
@@ -101,6 +108,20 @@ export type { TileRect } from './styles/base.js';
  * memoizes the encoded raster against its size.
  */
 export { vfTileGrid, tileGrid, patternOverride, TileRasterCache } from './tile-grid.js';
+/**
+ * The standard pattern set — the 38 MacPaint fills as 8-byte QuickDraw
+ * patterns (`PATTERNS`, named; `PATTERN_NAMES` in palette order), the
+ * attribute grammar (`parsePattern` reads a name or sixteen hex digits,
+ * `patternHex` writes one back), and the adapters onto the tile machinery
+ * (`patternMotif` on the minimal cell, `patternRects` on the full 8×8). The
+ * fill itself is `PatternFillController` + `vfPatternFill`: a pattern
+ * painted as a box's own background, exact at every density and zoom — what
+ * `vf-container pattern="…"` does.
+ */
+export { PATTERNS, PATTERN_NAMES, PATTERN_SIZE, parsePattern, patternHex, patternMotif, patternRects, } from './patterns.js';
+export type { Pattern, PatternMotif, PatternName } from './patterns.js';
+export { PatternFillController, vfPatternFill } from './pattern-fill.js';
+export type { PatternFillOptions } from './pattern-fill.js';
 /** Glyph sprites (`glyphSvg(CHECKMARK, 'check')`) and their pixel geometry. */
 export { glyphSvg, CHECKBOX_X, RADIO_FACE, RADIO_RING, RADIO_RING_PRESSED, RADIO_DOT, CHECKMARK, CARET_DOWN, STEPPER, STEPPER_UP_FILL, STEPPER_DOWN_FILL, SLIDER_THUMB, SLIDER_THUMB_FACE, } from './glyphs.js';
 export type { Glyph } from './glyphs.js';

package/dist/index.js

@@ -11,61 +11,64 @@ import { vfDisplay as P, vfDisplayDecls as F } from "./styles/recipes/display-fa
 import { vfBase as I } from "./styles/recipes/host.js";
 import { vfStaticText as L } from "./styles/recipes/static-text.js";
 import { TILE_LATTICE as R, tileImage as z, tileRaster as B, tileRects as V, tileSpan as H, vfTileMaskSize as U, vfTileSize as W } from "./styles/recipes/tile.js";
-import { vfDots as G, vfStripes as K } from "./styles/recipes/pattern.js";
-import { vfHardShadowDecls as q } from "./styles/recipes/shadow.js";
-import { vfChromeFrame as J, vfModalFrame as Y, vfPanel as X } from "./styles/recipes/surface.js";
-import { vfTitleBar as Z, vfWindowWidgets as Q } from "./styles/recipes/title-bar.js";
-import { vfFocus as $, vfFocusRing as ee, vfFocusUnderline as te } from "./styles/recipes/focus.js";
-import { vfToggle as ne } from "./styles/recipes/toggle.js";
-import { vfField as re } from "./styles/recipes/field.js";
-import { vfScrollRail as ie } from "./styles/recipes/scroll-rail.js";
-import { TileRasterCache as ae, patternOverride as oe, tileGrid as se, vfTileGrid as ce } from "./tile-grid.js";
-import { GridSnapController as le, requestGridSnap as ue } from "./grid-snap.js";
-import { DocumentListenersController as de } from "./document-listeners.js";
-import { BUTTON_FACE as fe, BUTTON_FRAME as pe, RING_FRAME as me, RING_HOLE as he, RING_INSET as ge, SCREEN_CORNER as _e, steppedCornerClip as ve, steppedRectClip as ye, steppedRingClip as be } from "./pixel-frame.js";
-import { VfDesktop as xe } from "./components/vf-desktop.js";
-import { VfSized as Se } from "./size.js";
-import { DragController as Ce } from "./drag.js";
-import { ScrollStateController as we } from "./scroll-state.js";
-import { BLINK_FLIPS as Te, BLINK_INTERVAL_MS as Ee, PRESS_HOLD_MS as De, RENAME_DELAY_MS as Oe, prefersReducedMotion as ke, runSelectionBlink as Ae } from "./motion.js";
-import { CARET_DOWN as je, CHECKBOX_X as Me, CHECKMARK as Ne, RADIO_DOT as Pe, RADIO_FACE as Fe, RADIO_RING as Ie, RADIO_RING_PRESSED as Le, SLIDER_THUMB as Re, SLIDER_THUMB_FACE as ze, STEPPER as Be, STEPPER_DOWN_FILL as Ve, STEPPER_UP_FILL as He, glyphSvg as Ue } from "./glyphs.js";
-import { ScrollRailController as We, renderScrollRail as Ge } from "./scroll-rail.js";
-import { VfScrollArea as Ke } from "./components/vf-scroll-area.js";
-import { VfWindow as qe } from "./components/vf-window.js";
-import { VfModalDialog as Je, modalDialogStyles as Ye } from "./modal-dialog.js";
-import { VfButtonGroup as Xe } from "./components/vf-button-group.js";
-import { VfDialog as Ze } from "./components/vf-dialog.js";
-import { VfSeparator as Qe } from "./components/vf-separator.js";
-import { VfFormControl as $e } from "./form-control.js";
-import { VfButton as et } from "./components/vf-button.js";
-import { VfSwatch as tt } from "./components/vf-swatch.js";
-import { VfToggleControl as nt } from "./toggle-control.js";
-import { VfCheckbox as rt } from "./components/vf-checkbox.js";
-import { VfRadio as it } from "./components/vf-radio.js";
-import { VfRadioGroup as at } from "./components/vf-radio-group.js";
-import { FocusRuleController as ot, focusModality as st, trackFocusModality as ct } from "./focus-modality.js";
-import { VfTextControlBase as lt } from "./text-control.js";
-import { VfTextField as ut } from "./components/vf-text-field.js";
-import { VfTextArea as dt } from "./components/vf-text-area.js";
-import { VfNumberField as ft } from "./components/vf-number-field.js";
-import { VfOption as pt } from "./components/vf-option.js";
-import { VfSelect as mt } from "./components/vf-select.js";
-import { TrackWidthController as ht } from "./track-width.js";
-import { VfProgressBar as gt } from "./components/vf-progress-bar.js";
-import { VfSlider as _t } from "./components/vf-slider.js";
-import { VfLabel as vt } from "./components/vf-label.js";
-import { VfParagraph as yt } from "./components/vf-paragraph.js";
-import { VfImg as bt } from "./components/vf-img.js";
-import { VfIcon as xt } from "./components/vf-icon.js";
-import { VfMenuBar as St } from "./components/vf-menu-bar.js";
-import { VfMenu as Ct } from "./components/vf-menu.js";
-import { VfMenuItem as wt } from "./components/vf-menu-item.js";
-import { VfList as Tt } from "./components/vf-list.js";
-import { VfListItem as Et } from "./components/vf-list-item.js";
-import { VfFieldset as Dt } from "./components/vf-fieldset.js";
-import { VfGrid as Ot } from "./components/vf-grid.js";
-import { VfStack as kt } from "./components/vf-stack.js";
-import { VfContainer as At } from "./components/vf-container.js";
-import { CURSOR_ARROW as jt, CURSOR_CROSSHAIR as Mt, CURSOR_I_BEAM as Nt, CURSOR_WAIT as Pt } from "./cursor-art.js";
-import { applyCursor as Ft } from "./cursor.js";
-export { Te as BLINK_FLIPS, Ee as BLINK_INTERVAL_MS, fe as BUTTON_FACE, pe as BUTTON_FRAME, je as CARET_DOWN, Me as CHECKBOX_X, Ne as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, jt as CURSOR_ARROW, Mt as CURSOR_CROSSHAIR, Nt as CURSOR_I_BEAM, Pt as CURSOR_WAIT, de as DocumentListenersController, Ce as DragController, ot as FocusRuleController, le as GridSnapController, D as PIXEL_GRID_METRICS, De as PRESS_HOLD_MS, T as PlacementController, Pe as RADIO_DOT, Fe as RADIO_FACE, Ie as RADIO_RING, Le as RADIO_RING_PRESSED, Oe as RENAME_DELAY_MS, me as RING_FRAME, he as RING_HOLE, ge as RING_INSET, _e as SCREEN_CORNER, Re as SLIDER_THUMB, ze as SLIDER_THUMB_FACE, Be as STEPPER, Ve as STEPPER_DOWN_FILL, He as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, We as ScrollRailController, we as ScrollStateController, R as TILE_LATTICE, ae as TileRasterCache, ht as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, et as VfButton, Xe as VfButtonGroup, rt as VfCheckbox, At as VfContainer, xe as VfDesktop, Ze as VfDialog, Dt as VfFieldset, $e as VfFormControl, Ot as VfGrid, xt as VfIcon, bt as VfImg, vt as VfLabel, Tt as VfList, Et as VfListItem, Ct as VfMenu, St as VfMenuBar, wt as VfMenuItem, Je as VfModalDialog, ft as VfNumberField, pt as VfOption, yt as VfParagraph, E as VfPositioned, gt as VfProgressBar, it as VfRadio, at as VfRadioGroup, Ke as VfScrollArea, mt as VfSelect, Qe as VfSeparator, Se as VfSized, _t as VfSlider, kt as VfStack, tt as VfSwatch, dt as VfTextArea, lt as VfTextControlBase, ut as VfTextField, nt as VfToggleControl, qe as VfWindow, Ft as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, st as focusModality, m as getScale, s as getZoom, Ue as glyphSvg, Ye as modalDialogStyles, h as onScaleChange, c as onZoomChange, oe as patternOverride, ke as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, Ge as renderScrollRail, ue as requestGridSnap, l as resetZoomBaseline, Ae as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, ve as steppedCornerClip, ye as steppedRectClip, be as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, se as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, ct as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, J as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, G as vfDots, n as vfElement, re as vfField, $ as vfFocus, ee as vfFocusRing, te as vfFocusUnderline, q as vfHardShadowDecls, Y as vfModalFrame, X as vfPanel, ie as vfScrollRail, L as vfStaticText, K as vfStripes, ce as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, Z as vfTitleBar, ne as vfToggle, Q as vfWindowWidgets };
+import { PATTERNS as G, PATTERN_NAMES as K, PATTERN_SIZE as q, parsePattern as J, patternHex as Y, patternMotif as X, patternRects as Z } from "./patterns.js";
+import { vfDots as Q, vfStripes as $ } from "./styles/recipes/pattern.js";
+import { vfHardShadowDecls as ee } from "./styles/recipes/shadow.js";
+import { vfChromeFrame as te, vfModalFrame as ne, vfPanel as re } from "./styles/recipes/surface.js";
+import { RULE_EDGES as ie, parseRule as ae, ruleClasses as oe, vfRule as se } from "./styles/recipes/rule.js";
+import { vfTitleBar as ce, vfWindowWidgets as le } from "./styles/recipes/title-bar.js";
+import { vfFocus as ue, vfFocusRing as de, vfFocusUnderline as fe } from "./styles/recipes/focus.js";
+import { vfToggle as pe } from "./styles/recipes/toggle.js";
+import { vfField as me } from "./styles/recipes/field.js";
+import { vfScrollRail as he } from "./styles/recipes/scroll-rail.js";
+import { TileRasterCache as ge, patternOverride as _e, tileGrid as ve, vfTileGrid as ye } from "./tile-grid.js";
+import { TrackWidthController as be } from "./track-width.js";
+import { PatternFillController as xe, vfPatternFill as Se } from "./pattern-fill.js";
+import { GridSnapController as Ce, requestGridSnap as we } from "./grid-snap.js";
+import { DocumentListenersController as Te } from "./document-listeners.js";
+import { BUTTON_FACE as Ee, BUTTON_FRAME as De, RING_FRAME as Oe, RING_HOLE as ke, RING_INSET as Ae, SCREEN_CORNER as je, steppedCornerClip as Me, steppedRectClip as Ne, steppedRingClip as Pe } from "./pixel-frame.js";
+import { VfDesktop as Fe } from "./components/vf-desktop.js";
+import { VfSized as Ie } from "./size.js";
+import { DragController as Le } from "./drag.js";
+import { ScrollStateController as Re } from "./scroll-state.js";
+import { BLINK_FLIPS as ze, BLINK_INTERVAL_MS as Be, PRESS_HOLD_MS as Ve, RENAME_DELAY_MS as He, prefersReducedMotion as Ue, runSelectionBlink as We } from "./motion.js";
+import { CARET_DOWN as Ge, CHECKBOX_X as Ke, CHECKMARK as qe, RADIO_DOT as Je, RADIO_FACE as Ye, RADIO_RING as Xe, RADIO_RING_PRESSED as Ze, SLIDER_THUMB as Qe, SLIDER_THUMB_FACE as $e, STEPPER as et, STEPPER_DOWN_FILL as tt, STEPPER_UP_FILL as nt, glyphSvg as rt } from "./glyphs.js";
+import { ScrollRailController as it, renderScrollRail as at } from "./scroll-rail.js";
+import { VfScrollArea as ot } from "./components/vf-scroll-area.js";
+import { VfWindow as st } from "./components/vf-window.js";
+import { VfModalDialog as ct, modalDialogStyles as lt } from "./modal-dialog.js";
+import { VfButtonGroup as ut } from "./components/vf-button-group.js";
+import { VfDialog as dt } from "./components/vf-dialog.js";
+import { VfSeparator as ft } from "./components/vf-separator.js";
+import { VfFormControl as pt } from "./form-control.js";
+import { VfButton as mt } from "./components/vf-button.js";
+import { VfSwatch as ht } from "./components/vf-swatch.js";
+import { VfToggleControl as gt } from "./toggle-control.js";
+import { VfCheckbox as _t } from "./components/vf-checkbox.js";
+import { VfRadio as vt } from "./components/vf-radio.js";
+import { VfRadioGroup as yt } from "./components/vf-radio-group.js";
+import { FocusRuleController as bt, focusModality as xt, trackFocusModality as St } from "./focus-modality.js";
+import { VfTextControlBase as Ct } from "./text-control.js";
+import { VfTextField as wt } from "./components/vf-text-field.js";
+import { VfTextArea as Tt } from "./components/vf-text-area.js";
+import { VfNumberField as Et } from "./components/vf-number-field.js";
+import { VfOption as Dt } from "./components/vf-option.js";
+import { VfSelect as Ot } from "./components/vf-select.js";
+import { VfProgressBar as kt } from "./components/vf-progress-bar.js";
+import { VfSlider as At } from "./components/vf-slider.js";
+import { VfLabel as jt } from "./components/vf-label.js";
+import { VfParagraph as Mt } from "./components/vf-paragraph.js";
+import { VfImg as Nt } from "./components/vf-img.js";
+import { VfIcon as Pt } from "./components/vf-icon.js";
+import { VfMenuBar as Ft } from "./components/vf-menu-bar.js";
+import { VfMenu as It } from "./components/vf-menu.js";
+import { VfMenuItem as Lt } from "./components/vf-menu-item.js";
+import { VfList as Rt } from "./components/vf-list.js";
+import { VfListItem as zt } from "./components/vf-list-item.js";
+import { VfFieldset as Bt } from "./components/vf-fieldset.js";
+import { VfGrid as Vt } from "./components/vf-grid.js";
+import { VfStack as Ht } from "./components/vf-stack.js";
+import { VfContainer as Ut } from "./components/vf-container.js";
+import { CURSOR_ARROW as Wt, CURSOR_CROSSHAIR as Gt, CURSOR_I_BEAM as Kt, CURSOR_WAIT as qt } from "./cursor-art.js";
+import { applyCursor as Jt } from "./cursor.js";
+export { ze as BLINK_FLIPS, Be as BLINK_INTERVAL_MS, Ee as BUTTON_FACE, De as BUTTON_FRAME, Ge as CARET_DOWN, Ke as CHECKBOX_X, qe as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, Wt as CURSOR_ARROW, Gt as CURSOR_CROSSHAIR, Kt as CURSOR_I_BEAM, qt as CURSOR_WAIT, Te as DocumentListenersController, Le as DragController, bt as FocusRuleController, Ce as GridSnapController, G as PATTERNS, K as PATTERN_NAMES, q as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ve as PRESS_HOLD_MS, xe as PatternFillController, T as PlacementController, Je as RADIO_DOT, Ye as RADIO_FACE, Xe as RADIO_RING, Ze as RADIO_RING_PRESSED, He as RENAME_DELAY_MS, Oe as RING_FRAME, ke as RING_HOLE, Ae as RING_INSET, ie as RULE_EDGES, je as SCREEN_CORNER, Qe as SLIDER_THUMB, $e as SLIDER_THUMB_FACE, et as STEPPER, tt as STEPPER_DOWN_FILL, nt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, it as ScrollRailController, Re as ScrollStateController, R as TILE_LATTICE, ge as TileRasterCache, be as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, mt as VfButton, ut as VfButtonGroup, _t as VfCheckbox, Ut as VfContainer, Fe as VfDesktop, dt as VfDialog, Bt as VfFieldset, pt as VfFormControl, Vt as VfGrid, Pt as VfIcon, Nt as VfImg, jt as VfLabel, Rt as VfList, zt as VfListItem, It as VfMenu, Ft as VfMenuBar, Lt as VfMenuItem, ct as VfModalDialog, Et as VfNumberField, Dt as VfOption, Mt as VfParagraph, E as VfPositioned, kt as VfProgressBar, vt as VfRadio, yt as VfRadioGroup, ot as VfScrollArea, Ot as VfSelect, ft as VfSeparator, Ie as VfSized, At as VfSlider, Ht as VfStack, ht as VfSwatch, Tt as VfTextArea, Ct as VfTextControlBase, wt as VfTextField, gt as VfToggleControl, st as VfWindow, Jt as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, xt as focusModality, m as getScale, s as getZoom, rt as glyphSvg, lt as modalDialogStyles, h as onScaleChange, c as onZoomChange, J as parsePattern, ae as parseRule, Y as patternHex, X as patternMotif, _e as patternOverride, Z as patternRects, Ue as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, at as renderScrollRail, we as requestGridSnap, l as resetZoomBaseline, oe as ruleClasses, We as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, Me as steppedCornerClip, Ne as steppedRectClip, Pe as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, ve as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, St as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, te as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, Q as vfDots, n as vfElement, me as vfField, ue as vfFocus, de as vfFocusRing, fe as vfFocusUnderline, ee as vfHardShadowDecls, ne as vfModalFrame, re as vfPanel, Se as vfPatternFill, se as vfRule, he as vfScrollRail, L as vfStaticText, $ as vfStripes, ye as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, ce as vfTitleBar, pe as vfToggle, le as vfWindowWidgets };

package/dist/pattern-fill.d.ts

@@ -0,0 +1,91 @@
+import { type CSSResult, type ReactiveController, type ReactiveControllerHost } from 'lit';
+import { type Pattern } from './patterns.js';
+/** What a component hands the controller. */
+export interface PatternFillOptions {
+    /** The element whose background the pattern paints — a component's own
+     *  snapped box, so the fill rides the grid-snap correction with it. */
+    getBox: () => HTMLElement | null | undefined;
+    /** The resolved pattern, or null to paint nothing ({@link parsePattern}
+     *  turns an attribute value into one). */
+    getPattern: () => Pattern | null | undefined;
+    /**
+     * The box's declared size in system px, per axis. A declared axis is used
+     * as it is — exact, and free of any measurement; an axis left `null` or
+     * `undefined` is measured off the box instead (a `ResizeObserver`,
+     * `toSys`-rounded). Omit the whole option to measure both.
+     */
+    getSize?: () => {
+        width?: number | null;
+        height?: number | null;
+    } | null | undefined;
+}
+/**
+ * Paints a {@link Pattern} as a box's own background — the fill behind
+ * `vf-container pattern="…"` and `vf-desktop pattern="…"`.
+ *
+ * It is the exact-fill idiom (src/tile-grid.ts) in its background form: the
+ * motif is encoded as one raster at one image px per system px
+ * (`tileRaster`, cached by pattern and size), sized in system px to the box
+ * ceiled up to whole pattern cells plus one cell of overdraw, and stretched
+ * onto that stated size under `image-rendering: pixelated`. Nearest-neighbor
+ * sampling can only emit source colors and one image has no interior seams,
+ * so the fill is 1-bit at every density and zoom — the same argument the
+ * desktop dither rests on. A `background-size` stated in system px is one
+ * stored length quantized once over the whole image (≤ 1/128 CSS px), not a
+ * repeat, and the box's background painting area crops the overdraw.
+ *
+ * A background rather than a child element, on purpose: it paints below all
+ * content by definition — no `isolation: isolate` + `z-index: -1`, so a
+ * patterned box never becomes a stacking context that traps a slotted
+ * control's drop-open panel under a later sibling — and it clips itself, so
+ * the box keeps `overflow: visible` (a container's outgrowing content
+ * overflows by contract). The one thing a background costs is that
+ * `image-rendering` is an inherited property: {@link vfPatternFill} sets it
+ * on the box only while patterned and hands `auto` back to the slot, so
+ * slotted content renders as it did.
+ *
+ * What it writes, all on the box's inline style and removed together the
+ * moment there is nothing to paint: `--_vf-pattern-image` (the raster) and
+ * `--_vf-pattern-size` (two live `sysLength`s). Custom-property channels,
+ * not `background-image` itself, so the recipe's forced-colors rule can
+ * out-cascade them without `!important` — an inline `background-image`
+ * could not be overridden from a stylesheet. The paper is the recipe's, a
+ * token: `var(--vf-white)` behind ink that is literal black, like every kit
+ * raster. Density and zoom re-encode nothing: the raster is keyed on system
+ * px, and the stated lengths are live against `--vf-scale`.
+ *
+ * Phase is anchored at the box's top-left — where the desktop, trough and
+ * swatch anchor theirs. Two same-pattern boxes meeting at an offset that is
+ * not a multiple of 8 show a phase seam; a port-anchored phase would be a
+ * contained follow-up, not a change here.
+ */
+export declare class PatternFillController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost & HTMLElement, opts: PatternFillOptions);
+    /** The raster's current box in system px (overdraw included), or null
+     *  while nothing is painted. */
+    get size(): {
+        width: number;
+        height: number;
+    } | null;
+    hostUpdated(): void;
+}
+/**
+ * The rules behind {@link PatternFillController}, for the box it paints:
+ * give the box the `vf-pattern-fill` class always, and `vf-patterned` while
+ * a pattern is resolved (the component's template knows).
+ *
+ * Painting: the raster the controller wrote, at the size it stated, once
+ * (`no-repeat` — the overdraw is the repeat), nearest-neighbor. The paper
+ * and the pixelation ride the `vf-patterned` state so an unpatterned box
+ * paints exactly nothing and inherits nothing new. `image-rendering`
+ * inherits, so the slot hands `auto` back to slotted content: a consumer's
+ * own `<img>` renders as it would anywhere else, and a kit element that
+ * wants nearest-neighbor (`vf-img`, a `vf-icon`) says so itself. A page
+ * that set `pixelated` on an ancestor gets `auto` inside a patterned box —
+ * its own declaration on the child still wins, as everywhere.
+ *
+ * Forced colors: the image goes, the paper is the remapped Canvas — the
+ * desktop's posture, a backdrop being decoration.
+ */
+export declare const vfPatternFill: CSSResult;

package/dist/pattern-fill.js

@@ -0,0 +1,74 @@
+import { sysLength as e, toSys as t } from "./scale.js";
+import { patternHex as n, patternMotif as r } from "./patterns.js";
+import { TileRasterCache as i } from "./tile-grid.js";
+import { TrackWidthController as a } from "./track-width.js";
+import { css as o } from "lit";
+//#region src/pattern-fill.ts
+var s = class {
+	#e;
+	#t;
+	#n = new i();
+	#r;
+	#i = null;
+	#a = "";
+	#o = "";
+	#s = null;
+	constructor(e, t) {
+		this.#e = e, this.#t = t, this.#r = new a(e, () => {
+			if (!t.getPattern()) return null;
+			let e = t.getSize?.();
+			return e == null || e.width == null || e.height == null ? t.getBox() : null;
+		}), e.addController(this);
+	}
+	get size() {
+		return this.#s;
+	}
+	hostUpdated() {
+		this.#c();
+	}
+	#c() {
+		let t = this.#t.getBox() ?? null;
+		t !== this.#i && (this.#u(), this.#i = t);
+		let i = this.#t.getPattern() ?? null;
+		if (!t || !i) {
+			this.#u();
+			return;
+		}
+		let a = this.#t.getSize?.() ?? null, o = c(a?.width) ?? this.#l(this.#r.width), s = c(a?.height) ?? this.#l(this.#r.height);
+		if (!o || !s) {
+			this.#u();
+			return;
+		}
+		let l = (e) => Math.ceil((e + 8) / 8) * 8, u = l(o), d = l(s), f = r(i), p = this.#n.for(f.width, f.height, f.rects, u, d, n(i)), m = `${e(u)} ${e(d)}`;
+		this.#s = {
+			width: u,
+			height: d
+		}, (p !== this.#a || m !== this.#o) && (this.#a = p, this.#o = m, t.style.setProperty("--_vf-pattern-image", p), t.style.setProperty("--_vf-pattern-size", m));
+	}
+	#l(e) {
+		return e > 0 ? t(e, this.#e) : 0;
+	}
+	#u() {
+		this.#s = null, !(!this.#a && !this.#o) && (this.#a = "", this.#o = "", this.#i?.style.removeProperty("--_vf-pattern-image"), this.#i?.style.removeProperty("--_vf-pattern-size"));
+	}
+}, c = (e) => typeof e == "number" && Number.isFinite(e) && e > 0 ? Math.trunc(e) : null, l = o`
+  .vf-pattern-fill {
+    background-image: var(--_vf-pattern-image, none);
+    background-size: var(--_vf-pattern-size, auto);
+    background-repeat: no-repeat;
+  }
+  .vf-pattern-fill.vf-patterned {
+    background-color: var(--vf-white, #fff);
+    image-rendering: pixelated;
+  }
+  .vf-pattern-fill.vf-patterned > slot {
+    image-rendering: auto;
+  }
+  @media (forced-colors: active) {
+    .vf-pattern-fill {
+      background-image: none;
+    }
+  }
+`;
+//#endregion
+export { s as PatternFillController, l as vfPatternFill };