vintage-frames 0.4.0 → 0.5.1

package/dist/components/vf-desktop.js

@@ -4,39 +4,26 @@ import { ScaleController as n, effectiveScale as r, sysLength as i } from "../sc
 import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { VfPositioned as o } from "../position.js";
 import { vfBase as s } from "../styles/recipes/host.js";
-import { tileImage as c, tileRaster as l, tileRects as u, tileSpan as d, vfTileSize as f } from "../styles/recipes/tile.js";
-import { TileRasterCache as p, patternOverride as m, tileGrid as h, vfTileGrid as g } from "../tile-grid.js";
-import { GridSnapController as _ } from "../grid-snap.js";
-import { DocumentListenersController as v } from "../document-listeners.js";
-import { SCREEN_CORNER as y, steppedCornerClip as b } from "../pixel-frame.js";
-import { LitElement as x, css as S, html as C, unsafeCSS as w } from "lit";
-import { property as T, queryAssignedElements as E } from "lit/decorators.js";
+import { tileImage as c, tileRects as l, tileSpan as u } from "../styles/recipes/tile.js";
+import { PATTERNS as d, parsePattern as f, patternMotif as p } from "../patterns.js";
+import { patternOverride as m, tileGrid as h, vfTileGrid as g } from "../tile-grid.js";
+import { PatternFillController as _, vfPatternFill as v } from "../pattern-fill.js";
+import { GridSnapController as y } from "../grid-snap.js";
+import { DocumentListenersController as b } from "../document-listeners.js";
+import { SCREEN_CORNER as x, steppedCornerClip as S } from "../pixel-frame.js";
+import { LitElement as C, css as w, html as T, unsafeCSS as E } from "lit";
+import { property as D, query as O, queryAssignedElements as k } from "lit/decorators.js";
 //#region src/components/vf-desktop.ts
-var D = 1e6, O = 512, k = 342, A = 2, j = [
-	[
-		0,
-		0,
-		2,
-		2,
-		"#ffffff"
-	],
-	[
-		0,
-		0,
-		1,
-		1,
-		"#000000"
-	],
-	[
-		1,
-		1,
-		1,
-		1,
-		"#000000"
-	]
-], M = c(A, A, u(j)), N = l(A, A, j), P = d(A), F = class extends o(x) {
+var A = 1e6, j = 512, M = 342, N = "gray-50", P = p(d[N], "#000000", "#ffffff"), F = c(P.width, P.height, l(P.rects)), I = u(P.width), L = class extends o(C) {
 	constructor(...e) {
-		super(...e), this.width = O, this.height = k, this.bezel = 0, this.scale = new n(this), this.gridSnap = new _(this), this._pattern = "", this.#e = new p(), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._gestureEnd = new v(this, () => [[
+		super(...e), this.width = j, this.height = M, this.bezel = 0, this.pattern = N, this.scale = new n(this), this.gridSnap = new y(this), this._token = "", this._desktopPattern = d[N], this.#e = !1, this.patternFill = new _(this, {
+			getBox: () => this.screen,
+			getPattern: () => this._token ? null : this._desktopPattern,
+			getSize: () => ({
+				width: this.width ?? j,
+				height: this.height ?? M
+			})
+		}), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._gestureEnd = new b(this, () => [[
 			document,
 			"pointerup",
 			this._onGestureEnd,
@@ -62,7 +49,8 @@ var D = 1e6, O = 512, k = 342, A = 2, j = [
 		this.styles = [
 			s,
 			g,
-			S`
+			v,
+			w`
       :host {
         display: block;
         position: relative;
@@ -88,69 +76,48 @@ var D = 1e6, O = 512, k = 342, A = 2, j = [
            raster's corrected edge, not the host's possibly-fractional one. */
         overflow: hidden;
         /* An isolated stacking context, so the tile grid's z-index: -1 below
-           resolves HERE — above this element's own underlay background, under
-           every slotted child. Without it the negative z-index would resolve
+           resolves HERE — above this element's own background, under every
+           slotted child. Without it the negative z-index would resolve
            against some ancestor stacking context and paint the tiles beneath
            this background. */
         isolation: isolate;
+        /* The base color. Under the kit pattern it is covered by the fill's
+           opaque white paper (vfPatternFill) — the authentic black-on-white
+           dither — and shows only through a consumer token's translucent
+           tile (see the --vf-desktop note in the class doc). The pattern
+           itself is this element's own background, written by the
+           PatternFillController: one whole-surface raster at one image px
+           per system px, magnified nearest-neighbor, which is what keeps it
+           1-bit at the zoom-minted scales a repeating fill cannot hold
+           (src/tile-grid.ts, src/pattern-fill.ts). */
         background-color: var(--vf-desktop, #808080);
-        /* Classic 50% checker dither as a crisp 1-bit SVG tile — a 2×2 motif
-           painting an opaque white base with two black pixels on the diagonal.
-           Black-on-white is the authentic System 7 dither, so the tile is
-           deliberately opaque and covers the background-color above (see the
-           --vf-desktop note in the class doc). Scaled with --vf-scale so each
-           system pixel lands on whole device pixels; unlike a conic-gradient
-           (whose hard stops the browser feathers into a blur), the SVG rects are
-           pixel-exact.
-
-           This CSS-repeated layer is the UNDERLAY: what actually shows is the
-           whole-surface raster (or, under a consumer pattern token, the
-           placed tile grid) rendered over it — see src/tile-grid.ts — which
-           is what keeps the dither 1-bit at the zoom-minted scales a
-           repeating fill cannot hold. The declaration stays as
-           belt-and-braces paint beneath the (opaque) kit fill. Override the
-           whole tile via --vf-desktop-pattern — the tile grid renders the
-           same token at the same documented geometry. */
-        background-image: var(--vf-desktop-pattern, ${w(M)});
-        ${f(A)}
-        /* Forced colors: the checker is opaque literal white-and-black (a
-           preserved url() tile), which ignores a dark theme entirely. A
-           backdrop is decoration, and high-contrast mode is a request for
-           less of that — so the desktop goes flat Canvas (the forced
-           background-color) rather than re-dithering in the user's pair.
-           Deliberate; the windoid dot bar, which carries meaning, IS
-           re-inked (see vfDots). */
+        /* Forced colors: the pattern is literal black ink on white, which
+           ignores a dark theme entirely. A backdrop is decoration, and
+           high-contrast mode is a request for less of that — so the desktop
+           goes flat Canvas (the forced background-color) rather than
+           re-dithering in the user's pair. Deliberate; the windoid dot bar,
+           which carries meaning, IS re-inked (see vfDots). The recipe drops
+           the image too; stated here as well so the posture lives with the
+           surface. */
         @media (forced-colors: active) {
           background-image: none;
         }
       }
-      /* With a consumer pattern token in play the exact fill is the placed
-         tile grid, and the CSS-repeated underlay must not paint: a
-         translucent consumer tile would show the underlay's *drifting* copy
-         of the same art through itself. The base color stays — that is the
-         layer translucent art composites over, as documented. */
-      .screen.patterned {
-        background-image: none;
-      }
-      /* The dither's exact fill — the whole-surface raster (kit art) or the
-         placed tile grid (consumer art) — kept under every slotted child
-         (menu bar, windows) by the negative z-index the .screen isolation
-         scopes. The grid's tiles resolve the pattern token stated once here
-         rather than per tile. */
-      .screen > .vf-tile-grid,
-      .screen > .vf-tile-raster {
+      /* A consumer token's exact fill — the placed tile grid — kept under
+         every slotted child (menu bar, windows) by the negative z-index the
+         .screen isolation scopes. The grid's tiles resolve the token stated
+         once here rather than per tile; the fallback is the kit dither for
+         the record, never reached (the grid renders only under a set token). */
+      .screen > .vf-tile-grid {
+        position: absolute;
+        inset: 0;
         z-index: -1;
-        /* Forced colors: hidden with the underlay's tile, same posture — the
-           desktop goes flat Canvas (a backdrop is decoration). */
+        --_vf-tile-image: var(--vf-desktop-pattern, ${E(F)});
+        /* Forced colors: hidden with the pattern, same posture. */
         @media (forced-colors: active) {
           display: none;
         }
       }
-      .screen > .vf-tile-grid {
-        position: absolute;
-        inset: 0;
-        --_vf-tile-image: var(--vf-desktop-pattern, ${w(N)});
-      }
       /* Bezeled, the screen is inset by exactly one bezel width. The host
          is always the declared screen + 2×bezel (written in updated()), so
          this subtraction is exact and the raster is whole by construction —
@@ -176,19 +143,19 @@ var D = 1e6, O = 512, k = 342, A = 2, j = [
       .corner {
         position: absolute;
         top: 0;
-        width: calc(var(--vf-scale, 1) * ${y[0]}px);
-        height: calc(var(--vf-scale, 1) * ${y.length}px);
+        width: calc(var(--vf-scale, 1) * ${x[0]}px);
+        height: calc(var(--vf-scale, 1) * ${x.length}px);
         background: var(--vf-black, #000);
         pointer-events: none;
         z-index: 2147483647;
       }
       .corner.tl {
         left: 0;
-        clip-path: ${w(b(y, "left"))};
+        clip-path: ${E(S(x, "left"))};
       }
       .corner.tr {
         right: 0;
-        clip-path: ${w(b(y, "right"))};
+        clip-path: ${E(S(x, "right"))};
       }
     `
 		];
@@ -221,7 +188,7 @@ var D = 1e6, O = 512, k = 342, A = 2, j = [
 	}
 	_restack(e) {
 		let t = this._isUtility(e);
-		e.style.zIndex = String(++this._zCounter + (t ? D : 0)), t || this._setActive(e);
+		e.style.zIndex = String(++this._zCounter + (t ? A : 0)), t || this._setActive(e);
 	}
 	_requestDomSync() {
 		this._pointerGesture || this._syncDomOrder();
@@ -238,7 +205,7 @@ var D = 1e6, O = 512, k = 342, A = 2, j = [
 		let e = this._windows, t = null;
 		for (let n of e) if (!n.style.zIndex) {
 			let e = this._isUtility(n);
-			n.style.zIndex = String(++this._zCounter + (e ? D : 0)), e || (t = n);
+			n.style.zIndex = String(++this._zCounter + (e ? A : 0)), e || (t = n);
 		}
 		let n = e.filter((e) => !this._isUtility(e)), r = this._activeWindow && n.includes(this._activeWindow) ? this._activeWindow : null;
 		this._setActive(t ?? r ?? (this._deactivated ? null : this._topmost(n))), customElements.get("vf-window") || this._normalizeAfterUpgrade();
@@ -283,37 +250,40 @@ var D = 1e6, O = 512, k = 342, A = 2, j = [
 		r && n instanceof HTMLElement && n.isConnected && this._deepActiveElement() !== n && (this._restoringFocus = !0, n.focus({ preventScroll: !0 }), this._restoringFocus = !1);
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this._pattern = m(this, "--vf-desktop-pattern");
+		if (super.willUpdate(e), this._token = m(this, "--vf-desktop-pattern"), e.has("pattern")) {
+			let e = f(this.pattern);
+			e === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-desktop: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Keeping ${N}.`)), this._desktopPattern = e ?? d[N];
+		}
 	}
 	updated(e) {
 		if (e.has("bezel") && (this.bezel > 0 ? this.style.setProperty("--vf-desktop-bezel", i(this.bezel)) : this.style.removeProperty("--vf-desktop-bezel")), e.has("width") || e.has("height") || e.has("bezel")) {
-			let e = this.width ?? O, t = this.height ?? k;
+			let e = this.width ?? j, t = this.height ?? M;
 			this.style.width = i(e + 2 * this.bezel), this.style.height = i(t + 2 * this.bezel);
 		}
 	}
 	render() {
-		let e = this.width ?? O, t = this.height ?? k, n = Math.ceil(e / P), r = Math.ceil(t / P), a = this._pattern ? C`<div class="vf-tile-grid">
+		let e = this.width ?? j, t = this.height ?? M, n = this._token ? T`<div class="vf-tile-grid">
           ${h({
-			cols: n,
-			rows: r,
-			tile: P
+			cols: Math.ceil(e / I),
+			rows: Math.ceil(t / I),
+			tile: I
 		})}
-        </div>` : C`<div
-          class="vf-tile-raster"
-          style="width:${i(n * P)};height:${i(r * P)};background-image:${this.#e.for(A, A, j, n * P, r * P)}"
-        ></div>`;
-		return C`
+        </div>` : null;
+		return T`
       <div class=${this.bezel > 0 ? "desktop vf-snap bezeled" : "desktop vf-snap"}>
-        <div class="screen${this._pattern ? " patterned" : ""}" part="desktop">
-          ${a}
+        <div
+          class="screen vf-pattern-fill${this._token ? "" : " vf-patterned"}"
+          part="desktop"
+        >
+          ${n}
           <slot @slotchange=${this._onSlotChange}></slot>
-          ${this.bezel > 0 ? C`<div class="corner tl"></div>
+          ${this.bezel > 0 ? T`<div class="corner tl"></div>
                 <div class="corner tr"></div>` : null}
         </div>
       </div>
     `;
 	}
 };
-a([T({ type: Number })], F.prototype, "width", void 0), a([T({ type: Number })], F.prototype, "height", void 0), a([T({ type: Number })], F.prototype, "bezel", void 0), a([E({ selector: "vf-window" })], F.prototype, "_windows", void 0), F = a([t("vf-desktop")], F);
+a([D({ type: Number })], L.prototype, "width", void 0), a([D({ type: Number })], L.prototype, "height", void 0), a([D({ type: Number })], L.prototype, "bezel", void 0), a([D()], L.prototype, "pattern", void 0), a([k({ selector: "vf-window" })], L.prototype, "_windows", void 0), a([O(".screen")], L.prototype, "screen", void 0), L = a([t("vf-desktop")], L);
 //#endregion
-export { F as VfDesktop };
+export { L as VfDesktop };

package/dist/components/vf-dialog.d.ts

@@ -4,19 +4,21 @@ import './vf-button-group.js';
  * `<vf-dialog>` — the System 7 modal dialog shell.
  *
  * Two chromes, one modal lifecycle (native `<dialog>` for top-layer rendering
- * and focus trapping, with a fully transparent backdrop — no dimming):
+ * and focus trapping, with a fully transparent backdrop — no dimming). Both
+ * are the same dBoxProc double frame — 1px outer rule, 2px gap, 2px inner
+ * band, no shadow ({@link vfModalFrame}):
  *
- * - **Default:** a striped title bar with a centered title over a white body —
- *   the movable-modal look. Drag the title bar to move it. `closable` adds the
- *   standard close box (left of the bar) — the HIG's own figures disagree on
- *   whether a movable modal carries one (Figure 5-1 says yes, Figure 6-1 and
- *   the Chapter 6 text say no), so the component enables either reading rather
- *   than enforcing one.
- * - **`frame="plain"`:** the classic dBoxProc modal-dialog frame — 1px outer
- *   border, 2px gap, 2px inner band, no shadow, no title bar — and immovable,
- *   like the original. A `heading` renders as a centered display-face heading
- *   at the top of the body (the reference art's "Dialog title"); `closable` is
- *   ignored, there being no bar to carry the widget.
+ * - **Default:** the movable modal (movableDBoxProc) — the striped title bar
+ *   set into the top of that frame, with a centered title over a white body.
+ *   Drag the title bar to move it. `closable` adds the standard close box
+ *   (left of the bar) — the HIG's own figures disagree on whether a movable
+ *   modal carries one (Figure 5-1 says yes, Figure 6-1 and the Chapter 6 text
+ *   say no), so the component enables either reading rather than enforcing
+ *   one.
+ * - **`frame="plain"`:** the modal dialog box — the bare frame, no title bar —
+ *   and immovable, like the original. A `heading` renders as a centered
+ *   display-face heading at the top of the body (the reference art's "Dialog
+ *   title"); `closable` is ignored, there being no bar to carry the widget.
  *
  * Open it with `show()` (or set the `open` attribute/property); close with
  * `close()`. Escape closes it and fires `vf-close` with
@@ -27,7 +29,8 @@ import './vf-button-group.js';
  * @slot buttons - Optional action buttons. Rendered as a bottom-right
  *   `vf-button-group` (equal-width, faces aligned); the footer only takes
  *   space when the slot is populated.
- * @csspart frame - The outer chrome frame (striped-bar or plain).
+ * @csspart frame - The outer frame (the double frame's 1px rule; the bar and
+ *   the inner band sit inside it).
  * @csspart title-bar - The striped title bar (default chrome only).
  * @csspart title - The centered title patch (or the plain-frame heading).
  * @csspart close-box - The close widget (`closable`, default chrome only).
@@ -76,8 +79,9 @@ export declare class VfDialog extends VfModalDialog {
      */
     closable: boolean;
     /**
-     * Frame chrome. Omit for the striped title bar (movable modal); `'plain'`
-     * for the immovable dBoxProc double frame with no bar (modal dialog box).
+     * Frame chrome. Omit for the movable modal (the double frame with the
+     * striped title bar set into it); `'plain'` for the immovable modal dialog
+     * box (the bare double frame, no bar).
      */
     frame?: 'plain';
     /** Whether the `buttons` slot has assigned content (drives the footer). */

package/dist/components/vf-dialog.js

@@ -4,23 +4,23 @@ import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { vfDisplayDecls as i } from "../styles/recipes/display-face.js";
 import { vfBase as a } from "../styles/recipes/host.js";
 import { vfStripes as o } from "../styles/recipes/pattern.js";
-import { vfChromeFrame as s, vfModalFrame as c } from "../styles/recipes/surface.js";
-import { vfTitleBar as l, vfWindowWidgets as u } from "../styles/recipes/title-bar.js";
-import { vfFocus as d, vfFocusRing as f } from "../styles/recipes/focus.js";
-import { vfScrollRail as p } from "../styles/recipes/scroll-rail.js";
-import { DragController as m } from "../drag.js";
-import { TitleCenterController as h, chromeTitleBar as g, closeBox as _, widgetLabel as v } from "../chrome.js";
-import { ScrollStateController as y } from "../scroll-state.js";
-import { ScrollRailController as b, renderScrollRail as x } from "../scroll-rail.js";
-import { VfModalDialog as S, modalDialogStyles as C } from "../modal-dialog.js";
+import { vfModalFrame as s } from "../styles/recipes/surface.js";
+import { vfTitleBar as c, vfWindowWidgets as l } from "../styles/recipes/title-bar.js";
+import { vfFocus as u, vfFocusRing as d } from "../styles/recipes/focus.js";
+import { vfScrollRail as f } from "../styles/recipes/scroll-rail.js";
+import { DragController as p } from "../drag.js";
+import { TitleCenterController as m, chromeTitleBar as h, closeBox as g, widgetLabel as _ } from "../chrome.js";
+import { ScrollStateController as v } from "../scroll-state.js";
+import { ScrollRailController as y, renderScrollRail as b } from "../scroll-rail.js";
+import { VfModalDialog as x, modalDialogStyles as S } from "../modal-dialog.js";
 import "./vf-button-group.js";
-import { css as w, html as T, nothing as E } from "lit";
-import { property as D, query as O, state as k } from "lit/decorators.js";
-import { styleMap as A } from "lit/directives/style-map.js";
+import { css as C, html as w, nothing as T } from "lit";
+import { property as E, query as D, state as O } from "lit/decorators.js";
+import { styleMap as k } from "lit/directives/style-map.js";
 //#region src/components/vf-dialog.ts
-var j = class extends S {
+var A = class extends x {
 	constructor(...e) {
-		super(...e), this._drag = new m(this, {
+		super(...e), this._drag = new p(this, {
 			onDragStart: (e) => {
 				if (e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box"))) return null;
 				let r = this._dialog;
@@ -36,34 +36,32 @@ var j = class extends S {
 				};
 			},
 			onDrag: (e, t) => this.placeAt(e, t)
-		}), this._titleCenter = new h(this), this.heading = "", this.label = "", this.closable = !1, this._hasButtons = !1, this._scrollable = !1, this._scrollState = new y(this, () => this._content, void 0, (e) => {
+		}), this._titleCenter = new m(this), this.heading = "", this.label = "", this.closable = !1, this._hasButtons = !1, this._scrollable = !1, this._scrollState = new v(this, () => this._content, void 0, (e) => {
 			this._scrollable = e.y;
-		}), this._rail = new b(this, { getScroll: () => this._content });
+		}), this._rail = new y(this, { getScroll: () => this._content });
 	}
 	static {
 		this.styles = [
 			a,
 			o,
-			d,
+			u,
 			s,
 			c,
 			l,
-			u,
-			p,
-			C,
-			w`
+			f,
+			S,
+			C`
       :host {
         display: contents;
       }
       /* A declared height lands on the <dialog> (dialogSize), so the frame has
-         to be told to fill it — vfChromeFrame is skin only. Both chromes are
-         full-height flex columns for the same reason vf-window's is: the body
+         to be told to fill it — vfModalFrame is skin only. The frame is a
+         full-height flex column for the same reason vf-window's is: the body
          takes the slack the title bar doesn't. The frame is the flex child of
          the <dialog> itself (modalDialogStyles), not a height: 100% block —
          a percentage can't resolve against the undeclared-height dialog that
          only the UA's dialog:modal max-height caps, and that spill was
          exactly how a tall modal used to strand its buttons off-screen. */
-      .vf-frame,
       .vf-modal-frame {
         display: flex;
         flex-direction: column;
@@ -182,7 +180,7 @@ var j = class extends S {
          treatment as vf-scroll-area's viewport. */
       .content:focus-visible {
         --vf-focus-offset: -2px;
-        ${f}
+        ${d}
       }
       /* The plain frame's heading: centered chrome type at the top of the
          body, the way dBoxProc dialogs drew their title in content (see
@@ -214,21 +212,21 @@ var j = class extends S {
 		this.close();
 	}
 	render() {
-		let e = !this.label && this.heading !== "", t = this.frame === "plain", n = T`
+		let e = !this.label && this.heading !== "", t = this.frame === "plain", n = w`
       <div class="body" part="body">
         <div class="content-wrap">
           <div
             class="content vf-scroll"
             part="content"
-            tabindex=${this._scrollable ? "0" : E}
-            role=${this._scrollable ? "group" : E}
+            tabindex=${this._scrollable ? "0" : T}
+            role=${this._scrollable ? "group" : T}
           >
-            ${t && this.heading !== "" ? T`<span class="plain-heading" part="title" id="title"
+            ${t && this.heading !== "" ? w`<span class="plain-heading" part="title" id="title"
                   >${this.heading}</span
-                >` : E}
+                >` : T}
             <slot @slotchange=${this._onBodySlotChange}></slot>
           </div>
-          ${x(this._rail, "vertical")}
+          ${b(this._rail, "vertical")}
           <div class="scroll-frame" aria-hidden="true"></div>
         </div>
         <div class="footer ${this._hasButtons ? "" : "empty"}" part="footer">
@@ -241,29 +239,23 @@ var j = class extends S {
         </div>
       </div>
     `;
-		return T`
+		return w`
       <dialog
-        style=${A(this.dialogSize)}
-        aria-labelledby=${e ? "title" : E}
-        aria-label=${e ? E : this.label || "Dialog"}
+        style=${k(this.dialogSize)}
+        aria-labelledby=${e ? "title" : T}
+        aria-label=${e ? T : this.label || "Dialog"}
         @cancel=${this._onNativeCancel}
         @close=${this._onNativeClose}
       >
-        ${t ? T`
-              <div class="vf-modal-frame" part="frame">
-                <div class="vf-modal-frame-inner">${n}</div>
-              </div>
-            ` : T`
-              <div class="vf-frame" part="frame">
-                ${g(this._drag, T`
-                    ${this.closable ? _(v("Close", this.heading), this._onCloseClick) : E}
-                    <span class="vf-title" part="title" id="title"
-                      >${this.heading}</span
-                    >
-                  `)}
-                ${n}
-              </div>
-            `}
+        <div class="vf-modal-frame" part="frame">
+          ${t ? T : h(this._drag, w`
+                  ${this.closable ? g(_("Close", this.heading), this._onCloseClick) : T}
+                  <span class="vf-title" part="title" id="title"
+                    >${this.heading}</span
+                  >
+                `)}
+          <div class="vf-modal-frame-inner">${n}</div>
+        </div>
       </dialog>
     `;
 	}
@@ -272,9 +264,9 @@ var j = class extends S {
 		this._hasButtons = t.assignedElements().length > 0;
 	}
 };
-r([D()], j.prototype, "heading", void 0), r([D()], j.prototype, "label", void 0), r([D({
+r([E()], A.prototype, "heading", void 0), r([E()], A.prototype, "label", void 0), r([E({
 	type: Boolean,
 	reflect: !0
-})], j.prototype, "closable", void 0), r([D({ reflect: !0 })], j.prototype, "frame", void 0), r([k()], j.prototype, "_hasButtons", void 0), r([O(".content")], j.prototype, "_content", void 0), r([k()], j.prototype, "_scrollable", void 0), j = r([e("vf-dialog")], j);
+})], A.prototype, "closable", void 0), r([E({ reflect: !0 })], A.prototype, "frame", void 0), r([O()], A.prototype, "_hasButtons", void 0), r([D(".content")], A.prototype, "_content", void 0), r([O()], A.prototype, "_scrollable", void 0), A = r([e("vf-dialog")], A);
 //#endregion
-export { j as VfDialog };
+export { A as VfDialog };

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

@@ -3,17 +3,18 @@ import { ScaleController as t } from "../scale.js";
 import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { VfPositioned as r } from "../position.js";
 import { vfBase as i } from "../styles/recipes/host.js";
-import { GridSnapController as a } from "../grid-snap.js";
-import { DocumentListenersController as o } from "../document-listeners.js";
-import { SCREEN_CORNER as s, steppedCornerClip as c } from "../pixel-frame.js";
-import { TypeAheadBuffer as l } from "../type-ahead.js";
-import { MenuPressController as u } from "../menu-press.js";
-import { LitElement as d, css as f, html as p, unsafeCSS as m } from "lit";
-import { property as h, queryAssignedElements as g } from "lit/decorators.js";
+import { vfRule as a } from "../styles/recipes/rule.js";
+import { GridSnapController as o } from "../grid-snap.js";
+import { DocumentListenersController as s } from "../document-listeners.js";
+import { SCREEN_CORNER as c, steppedCornerClip as l } from "../pixel-frame.js";
+import { TypeAheadBuffer as u } from "../type-ahead.js";
+import { MenuPressController as d } from "../menu-press.js";
+import { LitElement as f, css as p, html as m, unsafeCSS as h } from "lit";
+import { property as g, queryAssignedElements as _ } from "lit/decorators.js";
 //#region src/components/vf-menu-bar.ts
-var _ = class extends r(d) {
+var v = class extends r(f) {
 	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new a(this), this.label = "", this.rounded = !1, this.shortcuts = !1, this.#e = null, this.#t = this.attachInternals(), this.#n = new l(), this.#r = null, this.#i = new o(this, () => [[
+		super(...e), this.scale = new t(this), this.gridSnap = new o(this), this.label = "", this.rounded = !1, this.shortcuts = !1, this.#e = null, this.#t = this.attachInternals(), this.#n = new u(), this.#r = null, this.#i = new s(this, () => [[
 			document,
 			"pointerdown",
 			this.#h,
@@ -23,7 +24,7 @@ var _ = class extends r(d) {
 			"keydown",
 			this.#g,
 			!0
-		]]), this.#a = new u(this, {
+		]]), this.#a = new d(this, {
 			menus: () => this._menus,
 			open: (e) => this.#p(e),
 			close: () => this.#m()
@@ -101,7 +102,10 @@ var _ = class extends r(d) {
 		};
 	}
 	static {
-		this.styles = [i, f`
+		this.styles = [
+			i,
+			a,
+			p`
       :host {
         display: block;
         /* 19 white system px over the 1px black rule — Menus.png's bar strip
@@ -112,9 +116,9 @@ var _ = class extends r(d) {
       }
       .bar {
         /* Paint lives here rather than on the host so it rides the snap offset
-           (see .vf-snap in base.ts); border-box sizing keeps the geometry. */
+           (see .vf-snap in base.ts); border-box sizing keeps the geometry. The
+           rule is vfRule's vf-rule-bottom on the element. */
         background: var(--vf-white, #fff);
-        border-bottom: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         display: flex;
         align-items: stretch;
         height: 100%;
@@ -146,20 +150,21 @@ var _ = class extends r(d) {
         content: '';
         position: absolute;
         top: 0;
-        width: calc(var(--vf-scale, 1) * ${s[0]}px);
-        height: calc(var(--vf-scale, 1) * ${s.length}px);
+        width: calc(var(--vf-scale, 1) * ${c[0]}px);
+        height: calc(var(--vf-scale, 1) * ${c.length}px);
         background: var(--vf-black, #000);
         pointer-events: none;
       }
       :host([rounded]) .bar::before {
         left: 0;
-        clip-path: ${m(c(s, "left"))};
+        clip-path: ${h(l(c, "left"))};
       }
       :host([rounded]) .bar::after {
         right: 0;
-        clip-path: ${m(c(s, "right"))};
+        clip-path: ${h(l(c, "right"))};
       }
-    `];
+    `
+		];
 	}
 	#e;
 	#t;
@@ -181,8 +186,8 @@ var _ = class extends r(d) {
 		e.has("label") && (this.#t.ariaLabel = this.label || null);
 	}
 	render() {
-		return p`
-      <div class="bar vf-snap" part="bar" role="presentation">
+		return m`
+      <div class="bar vf-snap vf-rule-bottom" part="bar" role="presentation">
         <slot @slotchange=${this.#s}></slot>
       </div>
     `;
@@ -225,15 +230,15 @@ var _ = class extends r(d) {
 		r = n < 0 ? e === 1 ? 0 : t.length - 1 : (n + e + t.length) % t.length, t[r]?.focus();
 	}
 };
-n([h()], _.prototype, "label", void 0), n([h({
+n([g()], v.prototype, "label", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "rounded", void 0), n([h({
+})], v.prototype, "rounded", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "shortcuts", void 0), n([g({
+})], v.prototype, "shortcuts", void 0), n([_({
 	selector: "vf-menu",
 	flatten: !0
-})], _.prototype, "_menus", void 0), _ = n([e("vf-menu-bar")], _);
+})], v.prototype, "_menus", void 0), v = n([e("vf-menu-bar")], v);
 //#endregion
-export { _ as VfMenuBar };
+export { v as VfMenuBar };