vintage-frames 0.13.0 → 0.14.0

package/dist/components/vf-window.js

@@ -6,39 +6,40 @@ 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 "./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, 0), Math.max(0, 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 +52,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 +66,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 +81,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 +148,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 +196,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 +273,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 +305,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 +313,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 +332,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 +354,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
@@ -380,7 +400,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 +416,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 +459,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 +495,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 +574,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 +589,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 +634,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

@@ -92,7 +92,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 +101,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,63 @@ 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 { ScrollStateController as dt } from "./scroll-state.js";
+import { CARET_DOWN as ft, CARET_DOWN_SMALL as pt, CHECKBOX_X as mt, CHECKMARK as ht, RADIO_DOT as gt, RADIO_FACE as _t, RADIO_RING as vt, RADIO_RING_PRESSED as yt, SLIDER_THUMB as bt, SLIDER_THUMB_FACE as xt, STEPPER as St, STEPPER_DOWN_FILL as Ct, STEPPER_UP_FILL as wt, glyphSvg as Tt } from "./glyphs.js";
+import { ScrollRailController as Et, renderScrollRail as Dt } from "./scroll-rail.js";
+import { VfScrollArea as Ot } from "./components/vf-scroll-area.js";
+import { VfWindow as kt } from "./components/vf-window.js";
+import { VfModalDialog as At, modalDialogStyles as jt } from "./modal-dialog.js";
+import { VfDialog as Mt } from "./components/vf-dialog.js";
+import { VfSeparator as Nt } from "./components/vf-separator.js";
+import { VfFormControl as Pt } from "./form-control.js";
+import { VfButton as Ft } from "./components/vf-button.js";
+import { VfButtonGroup as It } from "./components/vf-button-group.js";
+import { VfSwatch as Lt } from "./components/vf-swatch.js";
+import { VfToggleControl as Rt } from "./toggle-control.js";
+import { VfCheckbox as zt } from "./components/vf-checkbox.js";
+import { VfRadio as Bt } from "./components/vf-radio.js";
+import { VfRadioGroup as Vt } from "./components/vf-radio-group.js";
+import { FocusRuleController as Ht, focusModality as Ut, trackFocusModality as Wt } from "./focus-modality.js";
+import { VfTextControlBase as Gt } from "./text-control.js";
+import { VfTextField as Kt } from "./components/vf-text-field.js";
+import { VfTextArea as qt } from "./components/vf-text-area.js";
+import { VfNumberField as Jt } from "./components/vf-number-field.js";
+import { VfOption as Yt } from "./components/vf-option.js";
+import { VfSelect as Xt } from "./components/vf-select.js";
+import { TrackWidthController as Zt } from "./track-width.js";
+import { VfProgressBar as Qt } from "./components/vf-progress-bar.js";
+import { VfSlider as $t } from "./components/vf-slider.js";
+import { VfLabel as en } from "./components/vf-label.js";
+import { VfParagraph as tn } from "./components/vf-paragraph.js";
+import { VfImg as nn } from "./components/vf-img.js";
+import { VfIcon as rn } from "./components/vf-icon.js";
+import { VfIconField as an } from "./components/vf-icon-field.js";
+import { VfMenuBar as on } from "./components/vf-menu-bar.js";
+import { VfMenu as sn } from "./components/vf-menu.js";
+import { VfMenuItem as cn } from "./components/vf-menu-item.js";
+import { VfList as ln } from "./components/vf-list.js";
+import { VfListItem as un } from "./components/vf-list-item.js";
+import { VfFieldset as dn } from "./components/vf-fieldset.js";
+import { VfGrid as fn } from "./components/vf-grid.js";
+import { VfStack as pn } from "./components/vf-stack.js";
+import { VfContainer as mn } from "./components/vf-container.js";
+import { CURSOR_ARROW as hn, CURSOR_CROSSHAIR as gn, CURSOR_I_BEAM as _n, CURSOR_WAIT as vn } from "./cursor-art.js";
+import { applyCursor as yn } from "./cursor.js";
+export { Ge as BLINK_FLIPS, Ke as BLINK_INTERVAL_MS, Ne as BUTTON_FACE, Pe as BUTTON_FRAME, ft as CARET_DOWN, pt as CARET_DOWN_SMALL, mt as CHECKBOX_X, ht as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, hn as CURSOR_ARROW, gn as CURSOR_CROSSHAIR, _n as CURSOR_I_BEAM, vn as CURSOR_WAIT, qe as DRAG_SLOP_COARSE_PX, Je as DRAG_SLOP_PX, Me as DocumentListenersController, We as DragController, Ht 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, gt as RADIO_DOT, _t as RADIO_FACE, vt as RADIO_RING, yt 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, bt as SLIDER_THUMB, xt as SLIDER_THUMB_FACE, St as STEPPER, Ct as STEPPER_DOWN_FILL, wt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, Et as ScrollRailController, dt as ScrollStateController, Ze as TAP_PAIR_MS, Qe as TAP_PAIR_SLOP_PX, R as TILE_LATTICE, Zt as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, Ft as VfButton, It as VfButtonGroup, zt as VfCheckbox, mn as VfContainer, He as VfDesktop, Mt as VfDialog, dn as VfFieldset, Pt as VfFormControl, fn as VfGrid, rn as VfIcon, an as VfIconField, nn as VfImg, en as VfLabel, ln as VfList, un as VfListItem, sn as VfMenu, on as VfMenuBar, cn as VfMenuItem, At as VfModalDialog, Jt as VfNumberField, Yt as VfOption, tn as VfParagraph, E as VfPositioned, Qt as VfProgressBar, Bt as VfRadio, Vt as VfRadioGroup, Ot as VfScrollArea, Xt as VfSelect, Nt as VfSeparator, Ue as VfSized, $t as VfSlider, pn as VfStack, Lt as VfSwatch, qt as VfTextArea, Gt as VfTextControlBase, Kt as VfTextField, Rt as VfToggleControl, kt as VfWindow, $e as WALK_BEAT_MS, et as WALK_STEP_MS, tt as WALK_STEP_PX, nt as WINDOW_RECTS_VISIBLE, rt as WINDOW_RECT_RATIO, it as WINDOW_RECT_STEPS, at as WINDOW_RECT_STEP_MS, yn as applyCursor, f as applyScale, t as defineElement, q as devicePxAt, o as devicePxPerSystemPx, ot as dragSlop, p as effectiveScale, e as emit, Ut as focusModality, m as getScale, s as getZoom, Tt as glyphSvg, jt 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, Dt 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, Wt 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, ut as windowRectFraction };

package/dist/styles/base.d.ts

@@ -27,7 +27,9 @@ export { vfDisplay, vfDisplayDecls } from './recipes/display-face.js';
 export { vfBase } from './recipes/host.js';
 export { vfStaticText } from './recipes/static-text.js';
 export { vfDots, vfStripes } from './recipes/pattern.js';
-export { vfHardShadowDecls } from './recipes/shadow.js';
+export { vfHardShadow, vfHardShadowDecls } from './recipes/shadow.js';
+export { vfStrokeDecls, vfStrokeInset, vfStrokeShadow } from './recipes/stroke.js';
+export type { VfStrokeOptions } from './recipes/stroke.js';
 export { vfChromeFrame, vfModalFrame, vfPanel } from './recipes/surface.js';
 export { RULE_EDGES, parseRule, ruleClasses, vfRule } from './recipes/rule.js';
 export type { RuleEdge } from './recipes/rule.js';

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

@@ -1,13 +1,17 @@
 /**
  * The System 7 editable-field skin (SPEC §1/§5): a white well with a 1px black
- * border, no corner radius, Chicago-style display type, and the kit's dashed
+ * frame, no corner radius, Chicago-style display type, and the kit's dashed
  * keyboard-focus rule under the well (no dotted ring). Add the `vf-field`
  * class to the inner native `<input>`/`<textarea>` and wrap it in a
- * `.vf-field-well` element; the host supplies layout (width, height, padding)
- * around it, and `VfTextControlBase` supplies the `.vf-focus-rule` class that
- * turns the rule on. Shared by vf-text-field, vf-text-area and
- * vf-number-field so the well, focus and disabled treatment stay identical
- * across all three.
+ * `.vf-field-well` element; the host supplies layout (width, height) around
+ * it, and `VfTextControlBase` supplies the `.vf-focus-rule` class that turns
+ * the rule on. Shared by vf-text-field, vf-text-area and vf-number-field so
+ * the well, focus and disabled treatment stay identical across all three.
+ *
+ * The frame is a stroke ({@link vfStrokeDecls}), so the recipe owns the
+ * input's padding and box-shadow: a host that insets the text restates the
+ * padding with `vfStrokeInset` (`padding: ${vfStrokeInset(0)}
+ * ${vfStrokeInset(6)}`) in a rule that outranks `.vf-field`.
  *
  * Why the wrapper: the rule is a pseudo-element, and a replaced element
  * generates none — neither `<input>` nor `<textarea>` can draw its own

package/dist/styles/recipes/field.js

@@ -1,11 +1,12 @@
 import { vfDisplayDecls as e } from "./display-face.js";
-import { vfFocusUnderline as t } from "./focus.js";
-import { css as n } from "lit";
+import { vfStrokeDecls as t } from "./stroke.js";
+import { vfFocusUnderline as n } from "./focus.js";
+import { css as r } from "lit";
 //#region src/styles/recipes/field.ts
-var r = n`
+var i = r`
   .vf-field {
     background: var(--vf-white, #fff);
-    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${t()}
     border-radius: 0;
     /* Editable text is set in the Chicago-style display face. */
     ${e}
@@ -36,7 +37,7 @@ var r = n`
      VfTextControlBase adds .vf-focus-rule for a keyboard focus only. */
   .vf-field-well.vf-focus-rule::after {
     --vf-focus-underline-offset: -2px;
-    ${t}
+    ${n}
   }
   /* Its own token, deliberately not --vf-disabled: the disabled rule below is
      an inactive control and exempt from contrast requirements, but a
@@ -50,7 +51,7 @@ var r = n`
     font-weight: inherit;
     opacity: 1;
   }
-  /* Disabled: the text dims to gray; the solid black box border stays. The
+  /* Disabled: the text dims to gray; the solid black frame stays. The
      cursor returns to the arrow — a well that can't take input isn't text. */
   .vf-field:disabled {
     color: var(--vf-disabled, #c0c0c0);
@@ -65,4 +66,4 @@ var r = n`
   }
 `;
 //#endregion
-export { r as vfField };
+export { i as vfField };