vintage-frames 0.13.0 → 0.14.1

package/dist/components/vf-window.js

@@ -6,39 +6,41 @@ import { PlacementController as c, VfPositioned as l, placementIn as u, warnMova
 import { vfBase as f } from "../styles/recipes/host.js";
 import { RepeatTileController as p, patternOverride as m, tileGrid as h, vfTileGrid as g } from "../tile-grid.js";
 import { DOTS as _, DOT_SPAN as v, vfDots as y, vfStripes as b } from "../styles/recipes/pattern.js";
-import { vfChromeFrame as x } from "../styles/recipes/surface.js";
-import { vfRule as S } from "../styles/recipes/rule.js";
-import { vfTitleBar as C, vfWindowWidgets as w } from "../styles/recipes/title-bar.js";
-import { vfFocus as T } from "../styles/recipes/focus.js";
-import { GridSnapController as E } from "../grid-snap.js";
-import { DocumentListenersController as D } from "../document-listeners.js";
-import { VfSized as O } from "../size.js";
-import { DragController as k } from "../drag.js";
-import { TitleCenterController as A, chromeTitleBar as j, closeBox as M, widgetLabel as N, zoomBox as P } from "../chrome.js";
-import { prefersReducedMotion as F, windowRectFraction as I } from "../motion.js";
-import { paintSelectionRect as L, penPhase as R, xorPenCanvas as z } from "../open-art.js";
+import { vfStrokeDecls as x, vfStrokeInset as S } from "../styles/recipes/stroke.js";
+import { vfChromeFrame as C } from "../styles/recipes/surface.js";
+import { vfRule as w } from "../styles/recipes/rule.js";
+import { vfTitleBar as T, vfWindowWidgets as E } from "../styles/recipes/title-bar.js";
+import { vfFocus as D } from "../styles/recipes/focus.js";
+import { GridSnapController as O } from "../grid-snap.js";
+import { DocumentListenersController as k } from "../document-listeners.js";
+import { VfSized as A } from "../size.js";
+import { DragController as j } from "../drag.js";
+import { TitleCenterController as M, chromeTitleBar as N, closeBox as P, widgetLabel as F, zoomBox as I } from "../chrome.js";
+import { prefersReducedMotion as L, windowRectFraction as R } from "../motion.js";
+import { paintSelectionRect as z, penPhase as B, xorPenCanvas as V } from "../open-art.js";
+import "../window-chrome.js";
 import "./vf-scroll-area.js";
-import { LitElement as B, css as V, html as H, nothing as U } from "lit";
-import { property as W, query as G, state as K } from "lit/decorators.js";
+import { LitElement as H, css as U, html as W, nothing as G } from "lit";
+import { property as K, query as q, state as J } from "lit/decorators.js";
 //#region src/components/vf-window.ts
-var q = 80, J = 54;
-function Y(e, t, n) {
+var Y = 80, X = 54;
+function Z(e, t, n) {
 	let r = Math.max(t, e);
 	return n == null ? r : Math.min(n, r);
 }
-var X = 24, Z = class extends O(l(B)) {
+var Q = 24, $ = class extends A(l(H)) {
 	constructor(...e) {
-		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.outlineDrag = !1, this.resizable = !1, this._hasHeader = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new E(this), this.titleCenter = new A(this), this._dotsPattern = "", this.#e = new p(this, {
+		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.outlineDrag = !1, this.resizable = !1, this._hasHeader = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new O(this), this.titleCenter = new M(this), this._dotsPattern = "", this.#e = new p(this, {
 			getBox: () => this.renderRoot?.querySelector(".vf-dots"),
 			getArt: () => this.variant === "utility" && !this._dotsPattern ? _ : null,
 			property: "--_vf-dots-tile"
 		}), this.#t = (e, t, n) => {
 			let r = o(this.offsetWidth, this);
 			return {
-				x: Math.min(Math.max(e, X - r), n.width - X),
-				y: Math.min(Math.max(t, 0), Math.max(0, n.height - X))
+				x: Math.min(Math.max(e, Q - r), n.width - Q),
+				y: Math.min(Math.max(t, n.top), Math.max(n.top, n.height - Q))
 			};
-		}, this._placement = new c(this, (e, t, n) => this.#t(e, t, n)), this._drag = new k(this, {
+		}, this._placement = new c(this, (e, t, n) => this.#t(e, t, n)), this._drag = new j(this, {
 			onDragStart: (e) => {
 				if (!this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box"))) return null;
 				this.#S();
@@ -51,7 +53,7 @@ var X = 24, Z = class extends O(l(B)) {
 			onDragEnd: (e, t) => {
 				this.#y(t);
 			}
-		}), this._resizeState = null, this.#n = this.attachInternals(), this.#r = null, this.#i = new D(this, () => [[
+		}), this._resizeState = null, this.#n = this.attachInternals(), this.#r = null, this.#i = new k(this, () => [[
 			document,
 			"pointerdown",
 			this.#a,
@@ -65,7 +67,7 @@ var X = 24, Z = class extends O(l(B)) {
 			this.#s("finish");
 		}, this.#o = (e) => {
 			e.key !== "Escape" || !this.#r || (e.preventDefault(), e.stopPropagation(), this.#s("finish"));
-		}, this.#f = null, this.#p = new D(this, () => [[
+		}, this.#f = null, this.#p = new k(this, () => [[
 			document,
 			"keydown",
 			this.#m,
@@ -80,12 +82,12 @@ var X = 24, Z = class extends O(l(B)) {
 			b,
 			y,
 			g,
-			T,
-			x,
-			S,
+			D,
 			C,
 			w,
-			V`
+			T,
+			E,
+			U`
       :host {
         display: block;
         position: relative;
@@ -147,12 +149,12 @@ var X = 24, Z = class extends O(l(B)) {
          a focused widget out of the tree, so focus can't be dropped to
          <body> by a click on another window. */
       :host(:not([active])) .box {
-        border-color: transparent;
+        --_vf-stroke-ink: transparent;
         background-color: transparent;
         box-shadow: none;
       }
       :host(:not([active])) .zoom::after {
-        border-color: transparent;
+        --_vf-stroke-ink: transparent;
       }
 
       /* --- Utility (windoid) variant --------------------------------- */
@@ -195,7 +197,7 @@ var X = 24, Z = class extends O(l(B)) {
          a white (invisible, over the patch ring) borderline — rather than the
          big bar's 9×9 sunburst, which cannot land whole on a 5×5 interior. */
       :host([variant='utility']) .box:active {
-        border-color: var(--vf-white, #ffffff);
+        --_vf-stroke-ink: var(--vf-white, #ffffff);
         background-color: var(--vf-black, #000000);
         background-image: none;
       }
@@ -272,11 +274,19 @@ var X = 24, Z = class extends O(l(B)) {
          vertical rail's arrows begin under it. Takes no space until the slot
          is populated. Clipped like the body; a drop-open panel still escapes
          (see the body's note). A div with a class, never a <header>: that
-         element maps to a banner landmark (see render()). */
+         element maps to a banner landmark (see render()).
+
+         The rule is a stroke, so the header's own box runs under it: the
+         slot is the box content lays out, places and clips in, above the
+         rule. */
       .header {
-        position: relative;
         flex: none;
         background: var(--vf-white, #ffffff);
+      }
+      .header > slot {
+        display: block;
+        position: relative;
+        height: 100%;
         overflow: hidden;
       }
       .header.empty {
@@ -296,7 +306,6 @@ var X = 24, Z = class extends O(l(B)) {
       .status {
         flex: none;
         display: flex;
-        align-items: center;
         height: calc(var(--vf-scale, 1) * var(--vf-status-bar-height, 15px));
         /* The rule is vfRule's vf-rule-top on the element. */
         background: var(--vf-white, #ffffff);
@@ -305,6 +314,16 @@ var X = 24, Z = class extends O(l(B)) {
         white-space: nowrap;
         overflow: hidden;
       }
+      /* The rule is a stroke, so the strip's own box runs under it: the slot
+         centers the content in the 14px below the rule and clips it there.
+         Sideways it still runs to the strip's edges, as before. */
+      .status > slot {
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow-y: clip;
+      }
       /* Clear the grow box: its 15px cell plus the strip's own 6px inset. */
       :host([resizable]) .status {
         padding-inline-end: calc(var(--vf-scale, 1) * 21px);
@@ -314,18 +333,20 @@ var X = 24, Z = class extends O(l(B)) {
       }
 
       /* --- Grow box --------------------------------------------------- */
+      /* Flush inside the frame's stroke, which is padding (vfChromeFrame);
+         the two nested squares place against the box the same way, the
+         lower-right one clear of its top/left stroke. */
       .grow {
         position: absolute;
-        right: 0;
-        bottom: 0;
+        right: ${S(0)};
+        bottom: ${S(0)};
         z-index: 1;
         width: calc(var(--vf-scale, 1) * 15px);
         height: calc(var(--vf-scale, 1) * 15px);
-        border-top: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
-        border-left: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
         background: var(--vf-white, #ffffff);
         touch-action: none;
         cursor: var(--vf-cursor, default);
+        ${x({ edges: ["top", "left"] })}
       }
       .grow::before {
         content: '';
@@ -334,17 +355,17 @@ var X = 24, Z = class extends O(l(B)) {
         bottom: calc(var(--vf-scale, 1) * 1px);
         width: calc(var(--vf-scale, 1) * 9px);
         height: calc(var(--vf-scale, 1) * 9px);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+        ${x()}
       }
       .grow::after {
         content: '';
         position: absolute;
-        top: calc(var(--vf-scale, 1) * 2px);
-        left: calc(var(--vf-scale, 1) * 2px);
+        top: ${S(2)};
+        left: ${S(2)};
         width: calc(var(--vf-scale, 1) * 7px);
         height: calc(var(--vf-scale, 1) * 7px);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
         background: var(--vf-white, #ffffff);
+        ${x()}
       }
       /* Inactive window: the size box empties with the scroll rails (the same
          HIG no-interactive-UX treatment ScrollStateController drives for the
@@ -356,6 +377,14 @@ var X = 24, Z = class extends O(l(B)) {
     `
 		];
 	}
+	get sizeLimits() {
+		return {
+			minWidth: this.minWidth ?? Y,
+			minHeight: this.minHeight ?? X,
+			maxWidth: this.maxWidth ?? Infinity,
+			maxHeight: this.maxHeight ?? Infinity
+		};
+	}
 	#e;
 	willUpdate(e) {
 		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = m(this, "--vf-dots-pattern"));
@@ -380,7 +409,7 @@ var X = 24, Z = class extends O(l(B)) {
 	async show(e = {}) {
 		this.#s("finish"), this.hidden = !1;
 		let t = e.from;
-		if (!t || F()) return !1;
+		if (!t || L()) return !1;
 		let n = {
 			closing: !1,
 			animations: []
@@ -396,7 +425,7 @@ var X = 24, Z = class extends O(l(B)) {
 	async hide(e = {}) {
 		let t = this.#r?.closing === !1, n = !this.hidden && !t;
 		this.#s(t ? "cancel" : "finish");
-		let r = e.to, i = r && n && this.isConnected && !F() ? this.#u(r, this.getBoundingClientRect(), !0) : null;
+		let r = e.to, i = r && n && this.isConnected && !L() ? this.#u(r, this.getBoundingClientRect(), !0) : null;
 		if (this.hidden = !0, !i) return !1;
 		let a = {
 			closing: !0,
@@ -439,8 +468,8 @@ var X = 24, Z = class extends O(l(B)) {
 			animations: []
 		};
 		for (let e = 0; e < 14; e++) {
-			let t = I(e), r = (e, n) => e + Math.trunc((n - e) * t), o = r(l.left, u.left), s = r(l.top, u.top), c = Math.max(1, r(l.right, u.right) - o), f = Math.max(1, r(l.bottom, u.bottom) - s), p = z("window-rect"), m = p.style;
-			m.position = "absolute", m.left = a(o), m.top = a(s), m.width = a(c), m.height = a(f), m.visibility = "hidden", L(p, c, f, R(o, s)), i.append(p), d.canvases.push(p);
+			let t = R(e), r = (e, n) => e + Math.trunc((n - e) * t), o = r(l.left, u.left), s = r(l.top, u.top), c = Math.max(1, r(l.right, u.right) - o), f = Math.max(1, r(l.bottom, u.bottom) - s), p = V("window-rect"), m = p.style;
+			m.position = "absolute", m.left = a(o), m.top = a(s), m.width = a(c), m.height = a(f), m.visibility = "hidden", z(p, c, f, B(o, s)), i.append(p), d.canvases.push(p);
 			let h = n ? 13 - e : e;
 			d.animations.push(p.animate([{ visibility: "visible" }, { visibility: "visible" }], {
 				delay: h * 17,
@@ -475,13 +504,13 @@ var X = 24, Z = class extends O(l(B)) {
 	#_(e, t, n) {
 		let r = e.base.x + t, i = e.base.y + n;
 		e.canvas.style.left = a(r), e.canvas.style.top = a(i);
-		let o = R(r, i);
-		o !== e.phase && (e.phase = o, L(e.canvas, e.width, e.height, o));
+		let o = B(r, i);
+		o !== e.phase && (e.phase = o, z(e.canvas, e.width, e.height, o));
 	}
 	#v(e) {
 		let t = this.#d();
 		if (!t) return null;
-		let n = r(this), i = t.getBoundingClientRect(), o = Math.max(1, Math.round(e.width / n)), s = Math.max(1, Math.round(e.height / n)), c = z("drag-outline"), l = c.style;
+		let n = r(this), i = t.getBoundingClientRect(), o = Math.max(1, Math.round(e.width / n)), s = Math.max(1, Math.round(e.height / n)), c = V("drag-outline"), l = c.style;
 		return l.position = "absolute", l.width = a(o), l.height = a(s), t.append(c), {
 			canvas: c,
 			base: {
@@ -554,7 +583,7 @@ var X = 24, Z = class extends O(l(B)) {
 	_onGrowPointerMove(e) {
 		let t = this._resizeState;
 		if (!t || e.pointerId !== t.pointerId) return;
-		let n = Y(i(t.baseWidth + o(e.clientX - t.startX, this), this), this.minWidth ?? q, this.maxWidth), r = Y(i(t.baseHeight + o(e.clientY - t.startY, this), this), this.minHeight ?? J, this.maxHeight);
+		let n = Z(i(t.baseWidth + o(e.clientX - t.startX, this), this), this.minWidth ?? Y, this.maxWidth), r = Z(i(t.baseHeight + o(e.clientY - t.startY, this), this), this.minHeight ?? X, this.maxHeight);
 		(n !== this.width || r !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = n, this.height = r;
 	}
 	_onGrowPointerEnd(t) {
@@ -569,42 +598,42 @@ var X = 24, Z = class extends O(l(B)) {
 		});
 	}
 	render() {
-		return H`
+		return W`
       <div
         class="vf-frame vf-snap"
         part="frame"
         role="group"
-        aria-labelledby=${this.heading ? "title" : U}
+        aria-labelledby=${this.heading ? "title" : G}
       >
-        ${j(this._drag, H`
-            ${this.closable ? M(N("Close", this.heading), this._onCloseClick) : U}
+        ${N(this._drag, W`
+            ${this.closable ? P(F("Close", this.heading), this._onCloseClick) : G}
             <span class="vf-title" part="title" id="title">${this.heading}</span>
-            ${this.zoomable ? P(N("Zoom", this.heading), this._onZoomClick) : U}
+            ${this.zoomable ? I(F("Zoom", this.heading), this._onZoomClick) : G}
           `, this.variant === "utility" ? this._dotsPattern ? "vf-dots vf-dots-token" : "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
         <div
           class="header vf-rule-bottom ${this._hasHeader ? "" : "empty"}"
           part="header"
-          style=${this.headerHeight == null ? U : `height:${a(this.headerHeight)}`}
+          style=${this.headerHeight == null ? G : `height:${a(this.headerHeight)}`}
         >
           <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
         </div>
         <div class="body" part="body">
-          ${this.scrollbars ? H`
+          ${this.scrollbars ? W`
                 <vf-scroll-area
                   class="edge-scroll"
                   axis=${this.scrollbars}
                   ?corner=${this.resizable && !this._hasStatus}
-                  label=${this.heading || U}
+                  label=${this.heading || G}
                   exportparts="viewport"
                 >
                   <slot></slot>
                 </vf-scroll-area>
-              ` : H`<slot></slot>`}
+              ` : W`<slot></slot>`}
         </div>
         <div class="status vf-rule-top ${this._hasStatus ? "" : "empty"}" part="status-bar">
           <slot name="status" @slotchange=${this._onStatusSlotChange}></slot>
         </div>
-        ${this.resizable ? H`
+        ${this.resizable ? W`
               <div
                 class="grow"
                 part="grow-box"
@@ -614,45 +643,45 @@ var X = 24, Z = class extends O(l(B)) {
                 @pointercancel=${this._onGrowPointerEnd}
                 @lostpointercapture=${this._onGrowPointerEnd}
               ></div>
-            ` : U}
+            ` : G}
       </div>
     `;
 	}
 };
-s([W({ reflect: !0 })], Z.prototype, "variant", void 0), s([W()], Z.prototype, "heading", void 0), s([W({
+s([K({ reflect: !0 })], $.prototype, "variant", void 0), s([K()], $.prototype, "heading", void 0), s([K({
 	type: Boolean,
 	reflect: !0
-})], Z.prototype, "active", void 0), s([W({
+})], $.prototype, "active", void 0), s([K({
 	type: Boolean,
 	reflect: !0
-})], Z.prototype, "closable", void 0), s([W({
+})], $.prototype, "closable", void 0), s([K({
 	type: Boolean,
 	reflect: !0
-})], Z.prototype, "zoomable", void 0), s([W({
+})], $.prototype, "zoomable", void 0), s([K({
 	type: Boolean,
 	reflect: !0
-})], Z.prototype, "movable", void 0), s([W({
+})], $.prototype, "movable", void 0), s([K({
 	type: Boolean,
 	reflect: !0,
 	attribute: "outline-drag"
-})], Z.prototype, "outlineDrag", void 0), s([W({
+})], $.prototype, "outlineDrag", void 0), s([K({
 	type: Boolean,
 	reflect: !0
-})], Z.prototype, "resizable", void 0), s([W({
+})], $.prototype, "resizable", void 0), s([K({
 	type: Number,
 	attribute: "min-width"
-})], Z.prototype, "minWidth", void 0), s([W({
+})], $.prototype, "minWidth", void 0), s([K({
 	type: Number,
 	attribute: "min-height"
-})], Z.prototype, "minHeight", void 0), s([W({
+})], $.prototype, "minHeight", void 0), s([K({
 	type: Number,
 	attribute: "max-width"
-})], Z.prototype, "maxWidth", void 0), s([W({
+})], $.prototype, "maxWidth", void 0), s([K({
 	type: Number,
 	attribute: "max-height"
-})], Z.prototype, "maxHeight", void 0), s([W({ reflect: !0 })], Z.prototype, "scrollbars", void 0), s([W({
+})], $.prototype, "maxHeight", void 0), s([K({ reflect: !0 })], $.prototype, "scrollbars", void 0), s([K({
 	type: Number,
 	attribute: "header-height"
-})], Z.prototype, "headerHeight", void 0), s([K()], Z.prototype, "_hasHeader", void 0), s([K()], Z.prototype, "_hasStatus", void 0), s([G(".body")], Z.prototype, "body", void 0), s([G("vf-scroll-area")], Z.prototype, "scrollArea", void 0), Z = s([t("vf-window")], Z);
+})], $.prototype, "headerHeight", void 0), s([J()], $.prototype, "_hasHeader", void 0), s([J()], $.prototype, "_hasStatus", void 0), s([q(".body")], $.prototype, "body", void 0), s([q("vf-scroll-area")], $.prototype, "scrollArea", void 0), $ = s([t("vf-window")], $);
 //#endregion
-export { Z as VfWindow };
+export { $ as VfWindow };

package/dist/index.d.ts

@@ -13,6 +13,8 @@
 export { VfDesktop } from './components/vf-desktop.js';
 export { VfWindow } from './components/vf-window.js';
 export type { VfViewportBox, VfWindowHideOptions, VfWindowShowOptions, } from './components/vf-window.js';
+export { windowChrome, WINDOW_MIN_WIDTH, WINDOW_MIN_HEIGHT } from './window-chrome.js';
+export type { VfInsets, VfWindowChromeOptions } from './window-chrome.js';
 export { VfDialog } from './components/vf-dialog.js';
 export { VfSeparator } from './components/vf-separator.js';
 export { VfButton } from './components/vf-button.js';
@@ -92,7 +94,7 @@ 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, 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 { vfBase, vfBodyDecls, vfDisplay, vfDisplayDecls, vfStaticText, vfPanel, vfChromeFrame, vfModalFrame, vfRule, vfTitleBar, vfWindowWidgets, vfHardShadow, 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
@@ -101,6 +103,15 @@ export type { TileRect } from './styles/base.js';
  */
 export { RULE_EDGES, parseRule, ruleClasses } from './styles/base.js';
 export type { RuleEdge } from './styles/base.js';
+/**
+ * A 1-bit stroke for a box of your own: `vfStrokeDecls()` draws the line as
+ * padding plus an inset shadow, the way every kit frame is drawn, because a
+ * CSS `border` of `calc(var(--vf-scale, 1) * 1px)` renders thin under Safari's
+ * page zoom. `vfStrokeInset()` offsets a child placed against the box, and
+ * `vfStrokeShadow()` restates the painted width alone.
+ */
+export { vfStrokeDecls, vfStrokeInset, vfStrokeShadow } from './styles/base.js';
+export type { VfStrokeOptions } from './styles/base.js';
 /**
  * The exact tiled fill (src/tile-grid.ts): a surface's own art as a CSS
  * repeat of one tile drawn at the display's resolution — `repeatTile()` for

package/dist/index.js

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

package/dist/pattern-fill.d.ts

@@ -47,14 +47,17 @@ export declare class PatternFillController extends RepeatTileController {
  * a pattern is resolved (the component's template knows).
  *
  * Painting: the tile the controller wrote, repeated from the padding box's
- * corner at {@link vfRepeatTileSize}, 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.
+ * corner at {@link vfRepeatTileSize}, nearest-neighbor. All of it rides the
+ * `vf-patterned` state, the image included, so an unpatterned box paints
+ * exactly nothing. The tile's custom property inherits like any other: a
+ * box that read it unpatterned would paint the tile of the nearest
+ * patterned box around it — a desktop's dither inside a window.
+ * `image-rendering` inherits too, 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.

package/dist/pattern-fill.js

@@ -17,12 +17,10 @@ var i = /* @__PURE__ */ new WeakMap(), a = (e) => {
 		});
 	}
 }, s = r`
-  .vf-pattern-fill {
+  .vf-pattern-fill.vf-patterned {
     background-image: var(--_vf-pattern-image, none);
     ${t}
     background-repeat: repeat;
-  }
-  .vf-pattern-fill.vf-patterned {
     background-color: var(--vf-white, #fff);
     image-rendering: pixelated;
   }
@@ -30,7 +28,7 @@ var i = /* @__PURE__ */ new WeakMap(), a = (e) => {
     image-rendering: auto;
   }
   @media (forced-colors: active) {
-    .vf-pattern-fill {
+    .vf-pattern-fill.vf-patterned {
       background-image: none;
     }
   }