vintage-frames 0.5.0 → 0.5.2

package/dist/components/vf-window.js

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

package/dist/index.d.ts

@@ -88,8 +88,15 @@ export { CURSOR_ARROW, CURSOR_I_BEAM, CURSOR_CROSSHAIR, CURSOR_WAIT, } from './c
  * `static styles` to inherit the kit's type, panel frame, window chrome, focus
  * ring, field well and System 7 scroll-rail skin.
  */
-export { vfBase, vfBodyDecls, vfDisplay, vfDisplayDecls, vfStaticText, vfPanel, vfChromeFrame, vfModalFrame, vfTitleBar, vfWindowWidgets, vfHardShadowDecls, vfStripes, vfDots, vfFocus, vfFocusRing, vfFocusUnderline, vfToggle, vfField, vfScrollRail, vfTileSize, vfTileMaskSize, tileImage, tileRaster, tileRects, tileSpan, TILE_LATTICE, } from './styles/base.js';
+export { vfBase, vfBodyDecls, vfDisplay, vfDisplayDecls, vfStaticText, vfPanel, vfChromeFrame, vfModalFrame, vfRule, vfTitleBar, vfWindowWidgets, vfHardShadowDecls, vfStripes, vfDots, vfFocus, vfFocusRing, vfFocusUnderline, vfToggle, vfField, vfScrollRail, vfTileSize, vfTileMaskSize, tileImage, tileRaster, tileRects, tileSpan, TILE_LATTICE, } from './styles/base.js';
 export type { TileRect } from './styles/base.js';
+/**
+ * The 1px rule's attribute grammar (`vf-container rule="top bottom"`): the
+ * edge names, the parser, and the class list a resolved rule puts on a box
+ * styled by `vfRule`.
+ */
+export { RULE_EDGES, parseRule, ruleClasses } from './styles/base.js';
+export type { RuleEdge } from './styles/base.js';
 /**
  * The exact tiled fill (TILE-GRID-PLAN.md): a surface's own art as one
  * whole-surface raster (`tileRaster` + the `vf-tile-raster` rules), and a

package/dist/index.js

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

package/dist/styles/base.d.ts

@@ -29,6 +29,8 @@ export { vfStaticText } from './recipes/static-text.js';
 export { vfDots, vfStripes } from './recipes/pattern.js';
 export { vfHardShadowDecls } from './recipes/shadow.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';
 export { vfTitleBar, vfWindowWidgets } from './recipes/title-bar.js';
 export { vfFocus, vfFocusRing, vfFocusUnderline } from './recipes/focus.js';
 export { vfToggle } from './recipes/toggle.js';

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

@@ -0,0 +1,41 @@
+/**
+ * The four edges a rule can sit on, in CSS shorthand order.
+ */
+export declare const RULE_EDGES: readonly ["top", "right", "bottom", "left"];
+export type RuleEdge = (typeof RULE_EDGES)[number];
+/**
+ * The 1px rule — the single black line that is the 1-bit art's only edge —
+ * drawn on one side of a box. One class per edge, composable: the menu bar's
+ * floor is `.vf-rule-bottom`, a window's status strip's ceiling is
+ * `.vf-rule-top`, and `vf-container rule="…"` takes the edges by name.
+ *
+ * A border, not a pseudo-element or a painted line, so it lives inside the
+ * box's own `border-box` size (vfBase) and insets the padding box the way
+ * FrameRect insets a rectangle's interior: content, percentage fills and
+ * children placed against the box all begin inside the rule. Scales with
+ * `--vf-scale`, so it is one system px at every density, and paints in
+ * `--vf-black`, so it remaps under forced colors with the rest of the ink.
+ *
+ * One declaration per edge, so the kit cannot grow two rules — the
+ * {@link vfHardShadowDecls} principle, applied to the line.
+ *
+ * Being a border, it shares the kit's border-floor residual
+ * (docs/THREE-X-DISPLAYS.md): Chromium floors a fractional border-width to
+ * whole CSS px, so above 1× the line paints thinner than a system px (2
+ * device px of 3 at 2×) and the padding box begins that much inside — the
+ * same as every kit frame, and the same line the menu bar always drew.
+ * `npm run verify:rule` asserts a container's rule against the menu bar's.
+ */
+export declare const vfRule: import("lit").CSSResult;
+/**
+ * The `rule` attribute grammar: edge names separated by whitespace, in any
+ * order (`"bottom"`, `"top bottom"`, all four for a framed box). Returns the
+ * edges in top/right/bottom/left order with repeats dropped; an empty array
+ * for an unset or blank value; and `null` for a value carrying any token that
+ * is not an edge name — the whole value is refused, not the one token, as
+ * `parsePattern` refuses an unrecognized pattern. Case-sensitive, like the
+ * pattern names.
+ */
+export declare function parseRule(value: string | null | undefined): RuleEdge[] | null;
+/** The classes a resolved rule puts on its box: `vf-rule-top vf-rule-bottom`. */
+export declare function ruleClasses(edges: readonly RuleEdge[]): string;

package/dist/styles/recipes/rule.js

@@ -0,0 +1,32 @@
+import { css as e, unsafeCSS as t } from "lit";
+//#region src/styles/recipes/rule.ts
+var n = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+], r = t("calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000)"), i = e`
+  .vf-rule-top {
+    border-top: ${r};
+  }
+  .vf-rule-right {
+    border-right: ${r};
+  }
+  .vf-rule-bottom {
+    border-bottom: ${r};
+  }
+  .vf-rule-left {
+    border-left: ${r};
+  }
+`;
+function a(e) {
+	if (e == null) return [];
+	let t = e.trim().split(/\s+/).filter(Boolean), r = new Set(t);
+	for (let e of r) if (!n.includes(e)) return null;
+	return n.filter((e) => r.has(e));
+}
+function o(e) {
+	return e.map((e) => `vf-rule-${e}`).join(" ");
+}
+//#endregion
+export { n as RULE_EDGES, a as parseRule, o as ruleClasses, i as vfRule };

package/docs/SPEC.md

@@ -148,6 +148,7 @@ The span construction stays load-bearing for the CSS-repeated underlays beneath
 - `vfHardShadowDecls` — the hard 1-bit drop shadow on its own, for composing into a surface that supplies its own border: `box-shadow: var(--vf-shadow-offset, 2px) var(--vf-shadow-offset, 2px) 0 0 var(--vf-black, #000)`. No blur, no spread — System 7's only depth cue. Every raised surface in the kit composes this one declaration (`vfPanel`, `vfChromeFrame`; `vf-swatch` composes it without either surface class).
 - `vfPanel` — a `.vf-panel` class for menus/popups: white bg, `border: 1px solid var(--vf-black, #000)`, `vfHardShadowDecls`.
 - `vfChromeFrame` — a `.vf-frame` class for the desktop window (`vf-window`): the same white face, 1px black border and hard offset shadow as `vfPanel`, no bevels. Skin only — the component supplies its own layout (a full-size flex column). `vf-dialog` does not use it: both of its chromes are `vfModalFrame`.
+- `vfRule` — the 1px rule on one edge of a box, one class per edge: `.vf-rule-top`, `.vf-rule-right`, `.vf-rule-bottom`, `.vf-rule-left`, each `border-<edge>: 1px solid var(--vf-black, #000)` scaled by `--vf-scale`. A border, so it sits inside the box's `border-box` size and insets the padding box — content, percentage fills and children placed against the box begin inside the rule, as a rectangle's interior begins inside FrameRect's line. One declaration per edge, the `vfHardShadowDecls` principle applied to the line: `vf-menu-bar`'s floor and `vf-window`'s status-strip ceiling are these classes, and `vf-container rule="…"` takes the edges by name. The attribute grammar ships beside it (`RULE_EDGES`, `parseRule`, `ruleClasses`): edge names separated by whitespace in any order, repeats dropped, returned in shorthand order; a blank or unset value is no edges; any other token refuses the whole value, as `parsePattern` refuses an unrecognized pattern. Being a border it shares the kit's border-floor residual (docs/THREE-X-DISPLAYS.md — thin above 1× in Chromium, the padding box that much inside), exactly as every kit frame does. `npm run verify:rule` asserts a container's rule against the menu bar's own at four densities.
 - `vfModalFrame` — the dBoxProc modal-dialog frame, both `vf-dialog` chromes: `.vf-modal-frame` (white face, 1px black border, **no shadow**) around `.vf-modal-frame-inner` (`margin: 2px; border: 2px solid`). **The movable modal is this frame with the striped bar set into it** (traced from a 2× System 7 capture): a `.vf-title-bar` as the frame's first child sits directly under the outer rule, `margin: 0 2px` so its stripes — flush to the bar's own edge here, `inset: 3px 0` — keep the same 2px of white from the outer rule the band keeps; the inner box that follows it drops its top margin and thins its top border to 1px, so the bar's own 1px rule plus that border make the 2px band the bar's floor, continuing down the sides and along the bottom. System 7's alert box drew the mirror trace — 2px outer, 2px gap, 1px inner rule, *with* the hard shadow (`Windows/modal dialog.png` vs the alert reference) — a different chrome the kit does not ship: an alert box is a consumer composition over this frame, not a component.
 - `vfWindowWidgets` — the title-bar window widgets (`.box` base, `.close` left / `.zoom` right at 11×11 with the 1px white patch ring, the pressed go-away sunburst, the nested zoom square), shared by `vf-window` and a `closable` `vf-dialog` so the two components' widgets match by construction. The templates that pair with it (`closeBox`/`zoomBox`/`widgetLabel`) live in `src/chrome.ts` with `chromeTitleBar`. Geometry is the standard bar's; `vf-window`'s utility variant overrides sizes under its own selector.
 - `vfTitleBar` — the striped title bar shared by `vf-window` and `vf-dialog`: a `.vf-title-bar` row (`height: var(--vf-titlebar-height, 18px)`, 1px bottom rule, `overflow: hidden`) and the `.vf-title` patch inside it (display face, white bg, `padding: 0 6px`, `z-index: 1` over the stripes, `nowrap` + ellipsis). Put a `.vf-stripes` layer in as the bar's first child.
@@ -200,6 +201,7 @@ Full-bleed classic desktop container.
 - **Behavior:** manages stacking of slotted `vf-window` children: `pointerdown` *or `focusin`* on a window brings it to front (incrementing z-index counter) and sets its `active` attribute, clearing `active` on the others — the `focusin` half is the keyboard route to activation: Tab landing anywhere in a background window (its undrawn-but-focusable widgets included) raises it. Listens via delegated pointerdown/focusin listeners + `slotchange`. Windows slotted before `vf-window` is defined are re-normalized once `customElements.whenDefined('vf-window')` settles, since the upgrade reflects each window's `active = true` default back out and upgrading a slotted node doesn't re-fire `slotchange`.
   - **DOM order follows z-order** (bottom-most first), so sequential focus order matches the visual stack and Shift+Tab mirrors Tab exactly. The sync runs at pointer-gesture end (a mid-gesture node move would clear the pointer capture a title-bar drag or grow-box resize holds) and on programmatic `bringToFront`, never from a focus-driven raise (moving the window focus just entered would re-order the tab sequence mid-traversal); focus surviving its own window's move is restored without re-raising that window. Non-window children (a menu bar, page content) keep their positions. `npm run verify:window-a11y`.
   - **Floating tier:** `vf-window[variant="utility"]` children stack in a z band `1_000_000` above the document tier (one shared monotonic counter, so a palette stays above every document window), restack only among themselves, and stand outside the single-active invariant both ways: clicking a palette doesn't deactivate the active document window, and activating a document window never clears a palette's `active` — System 7 windoid behavior while the app is frontmost. The tier test reads the `variant` *attribute*, so a not-yet-upgraded element still lands right.
+  - **Menu tier:** a slotted `vf-menu-bar` — or a free-standing `vf-menu` placed on the desktop — is restated at `z-index: 2_000_000` by the desktop's own `::slotted(vf-menu-bar), ::slotted(vf-menu)` rule (an outer-tree `::slotted` declaration beats the bar's inner `:host { z-index: 1000 }`), a band above the floating tier, so a dropped menu paints over palettes and document windows alike — the Menu Manager drew menus over every window. Only the screen-corner mask is in front. The full stack inside the screen's isolated context: consumer tile grid (−1) < document windows (counter) < utility windows (counter + 1_000_000) < menu tier (2_000_000) < corner mask (max). A popup *inside* a window (`vf-select`'s fixed panel) is a different case: it stacks within its window's context, so a palette can still cover it — KNOWN-BUGS.md. `npm run verify:archetypes` (MENU TIER).
   - **Deactivation:** on a real System 7 machine clicking the desktop clicked the *Finder* — the frontmost application's windows lost their stripes. `clearActive()` is that gesture's handler: it clears `active` from the whole document tier, and **zero active windows is a legal state**, held until a press or `focusin` re-enters a document window or a new one is slotted (opening a window brings its application forward — a newly slotted window ends a deliberate deactivation, where a mere survivor never does: removing a *background* window while deactivated promotes nothing, while removing the holder outside a deactivation promotes the topmost survivor). The desktop never takes the decision itself — a press on its own bare dither changes nothing; desktop furniture is slotted light DOM, so only the page knows which of its children mean "the Finder". Utility windows keep their `active` through a deactivation (their dots stay drawn). Every change of holder — window to window, window to none, none to window — fires `vf-activate`, once per change; re-asserting the current holder is silent. `npm run verify:desktop-activate`.
 - **Events:** `vf-activate` (detail `{ window: HTMLElement | null }` — the new holder, `null` on deactivation).
 - **Parts:** `desktop`.
@@ -214,7 +216,7 @@ The desktop-window shell: the classic document window (see DragThing screenshot)
   - Zoom box: RIGHT side, same box, plus a small box nested in its top-left corner (sharing the widget's own top/left border; only the right and bottom edges are drawn). `:active` (pressed) → shows the identical sunburst as the close box; the nested box gives way to it.
   - Body: `padding: 12px` (0 if `flush` or `scrollbars`), and `overflow: hidden` — the window being a fixed box, content taller than it is clipped at the frame the way the classic content region was, rather than painting out over the desktop; `scrollbars` is how the user reaches the rest. Two deliberate exemptions: `[scrollbars]` restores `overflow: visible`, because the edge-rail composition below pulls the scroll area one system px *outside* the body on every side and clipping would shave exactly that overhang off (the scroll area does its own clipping); and a control's drop-open panel is not clipped — `vf-select`'s list is `position: fixed` off the control's rect precisely to escape clipping ancestors (§5 vf-select), and it still escapes, because nothing between it and the viewport establishes a containing block for fixed descendants (the grid-snap correction is a `position: relative` left/top offset, never a transform — see §7). A `vf-menu` panel is anchored `position: absolute` and *would* clip, but a menu bar belongs to the desktop, not inside a window body.
   - Grow box (if `resizable`): 15×15 at bottom-right corner, white bg, 1px black top/left borders, containing two overlapping small square outlines. Inactive: the cell and its borders stay, the nested squares go — System 7 drew a deactivated window's size box hollow, with its blanked scroll rails.
-  - Status bar (`status` slot): the classic bottom readout strip ("40px x 40px") — a 1px black rule over a white interior, `--vf-status-bar-height` (15px) in all, the grow box's own height, so a `resizable` window's grow box sits flush in the strip's right end (its top/left borders take over the rule there; the strip reserves 21px of right padding under `resizable` so text clears the cell). Slotted content rides the body face's native 12px line (`--vf-line-height`), whole-pixel centered in the 14px interior, `padding-inline: 6px`, nowrap + clipped. Takes **no space** until the slot is populated (the dialog-footer pattern), and collapses again when it empties. Composes with `scrollbars`: the edge rails' bottom overhang lands its frame line exactly on the strip's rule, so the two never double up — though the grow box then sits in the strip rather than the rail corner cell.
+  - Status bar (`status` slot): the classic bottom readout strip ("40px x 40px") — a 1px black rule (`vfRule`'s `.vf-rule-top`) over a white interior, `--vf-status-bar-height` (15px) in all, the grow box's own height, so a `resizable` window's grow box sits flush in the strip's right end (its top/left borders take over the rule there; the strip reserves 21px of right padding under `resizable` so text clears the cell). Slotted content rides the body face's native 12px line (`--vf-line-height`), whole-pixel centered in the 14px interior, `padding-inline: 6px`, nowrap + clipped. Takes **no space** until the slot is populated (the dialog-footer pattern), and collapses again when it empties. Composes with `scrollbars`: the edge rails' bottom overhang lands its frame line exactly on the strip's rule, so the two never double up — though the grow box then sits in the strip rather than the rail corner cell.
   - Edge scroll rails (if `scrollbars`): the body slot renders inside a shadow `vf-scroll-area` (its `axis` = the attribute's value, `label` = the heading, `viewport` part re-exported) carrying the TeachText composition internally — `calc(100% + 2px·scale)` with `margin: -1px·scale`, one system px under the frame on every side, so the area's own frame border repaints the window's border lines and a `resizable` window's grow box (z-index 1) lands exactly over the rail-corner cell. Same caveats as the slotted composition (see vf-scroll-area §5), which remains supported for inset wells.
   - Utility variant (`variant="utility"`): the slim windoid bar traced from `Windows/utility-window.png` — `--vf-titlebar-height-utility` (12px = 11px interior + 1px rule), the `vfDots` dither instead of stripes (flush to the side borders — see §4 vfDots), 7×7 widgets (`top: 2px`; close `left: 7px`, zoom `right: 8px` — the art is asymmetric by that pixel) with a 2px patch ring where the striped bar's is 1px (`--vf-widget-ring`, internal geometry: the windoid sheet clears two px of dither beside its widgets), and the nested zoom square shrunk so its edges land at sprite col/row 3. No title patch: the display face's 16px line box can't sit in an 11px interior, so `.vf-title` is `display: none` under the variant (a retheming consumer can re-show it via `::part(title)`) and the heading names the widgets. A pressed windoid widget inverts whole — black interior under a white (invisible) borderline — rather than flashing the big bar's 9×9 sunburst, which can't land on a 5×5 interior.
 - **A11y:** the close/zoom `aria-label`s are qualified by the title when there is one (`Close ${heading}` / `Zoom ${heading}`, falling back to bare `Close` / `Zoom`) — several windows are open at once by design, so a bare repeated "Close" gives an AT user no way to tell which window a widget belongs to. The frame is `role="group"`, named by the title patch via `aria-labelledby` when there is a heading (the utility variant's hidden patch still names it — AccName resolves hidden labelledby targets) — `group` rather than `region` deliberately, so a desktop of windows doesn't pollute landmark navigation; the title bar is a `<div>`, never a `<header>`, which would map to an unnamed `banner` landmark even inside the shadow root. An inactive window's widgets stay in the tree and the tab order but paint no ink (transparent border/background/patch ring — the bare System 7 bar): a background window whose body holds nothing focusable is still reachable, activated by `vf-desktop`'s `focusin` raise the moment Tab lands on a widget, and never drops focus to `<body>` when it deactivates. `npm run verify:window-a11y`.
@@ -354,7 +356,7 @@ The classic popup menu control ("Macintosh HD ▼").
 
 #### `vf-menu-bar` (`VfMenuBar`, vf-menu-bar.ts)
 - **Attributes/props:** `label: string` — accessible name for the menubar, mirrored as host `aria-label` (guarded: a consumer's own `aria-label`/`aria-labelledby` is left alone). `rounded: boolean` (reflected) — draws the System 7 screen-corner mask over the bar's top-left/top-right corners. `shortcuts: boolean` (reflected) — makes every slotted menu's item `shortcut`s live key equivalents, one declaration for the whole bar the way MenuKey() answered for every menu at once (see vf-menu-item for the claim contract). Off by default: key equivalents are page-global, and only *the* menu bar should own them.
-- **Visual:** `display: block/flex`, height `var(--vf-menubar-height, 20px)` — 19 white system px over the 1px black rule, the Menus.png bar strip exactly — white bg, `border-bottom: 1px solid var(--vf-black, #000)`, children laid out horizontally from left. Adjacent titles are pulled 5px into each other (`margin-inline-start: -5px` on every slotted menu, absorbed by 14px of bar start padding — 9px of bar before the first plate, as System 7 placed the Apple title, plus the first title's 5px share): Menus.png spaces title ink 14px apart while each title's plate runs 10px left / 9px right of its own ink, so neighboring plates *overlap* by 5px, as the originals did. With `rounded`, two 5×5 system-px corner overlays paint the traced stair-step mask (per-row runs 5/3/2/1/1 — `SCREEN_CORNER` + `steppedCornerClip` in `pixel-frame.ts`) in `--vf-black` *over* the bar: on the classic screen the rounding was the ROM's black corner mask sitting on top of the menu bar, not a shape of the bar's own, so it is ink over any backdrop rather than a cutout.
+- **Visual:** `display: block/flex`, height `var(--vf-menubar-height, 20px)` — 19 white system px over the 1px black rule, the Menus.png bar strip exactly — white bg, the rule `vfRule`'s `.vf-rule-bottom` on the bar (§4), children laid out horizontally from left. Adjacent titles are pulled 5px into each other (`margin-inline-start: -5px` on every slotted menu, absorbed by 14px of bar start padding — 9px of bar before the first plate, as System 7 placed the Apple title, plus the first title's 5px share): Menus.png spaces title ink 14px apart while each title's plate runs 10px left / 9px right of its own ink, so neighboring plates *overlap* by 5px, as the originals did. With `rounded`, two 5×5 system-px corner overlays paint the traced stair-step mask (per-row runs 5/3/2/1/1 — `SCREEN_CORNER` + `steppedCornerClip` in `pixel-frame.ts`) in `--vf-black` *over* the bar: on the classic screen the rounding was the ROM's black corner mask sitting on top of the menu bar, not a shape of the bar's own, so it is ink over any backdrop rather than a cutout.
 - **Behavior:** container/controller for slotted `vf-menu` children. Pressing a menu label → opens it (label inverts while open). While any menu is open, hovering another label switches to it (classic behavior). Escape / outside click / item selection closes. `role="menubar"`, behind a first-connect ownership latch so a consumer's own role survives upgrade; the shadow `.bar` is `role="presentation"` and each slotted `vf-menu` host `role="none"`, so the `menubar → menuitem` ownership chain has no generics in it. While a menu is open: ArrowLeft/Right move between menus, ArrowDown/Up walk the open menu's items, Home/End jump to its first/last enabled item, and printable keys run the shared Finder first-letter type-ahead over the items (`src/type-ahead.ts`; Space stays the focused item's activation key, and the prefix resets on menu switch or close). The bar also **owns the press-drag-release gesture** across its menus (`MenuPressController`, `src/menu-press.ts` — see `vf-menu`), since one press may travel over several of them: it binds the opening `pointerdown` and hands the controller its own open/close rules, so the gesture changes *when* a menu opens, never *how*.
 - **Slots:** default (vf-menu elements). **Parts:** `bar`.
 
@@ -428,10 +430,10 @@ The kit's layout primitive: a flexbox whose `gap`, `pad`, `width` and `height` a
 - **Slots:** default (the children; `fill-width` / `fill-height` on any of them). **Parts:** none. **Events:** none.
 
 #### `vf-container` (`VfContainer`, vf-container.ts)
-A plain sized box: `width`/`height` in whole system px around a bare slot — no paint, no layout opinion. Explicit placement (src/position.ts) leaves one line of CSS the kit can't write for a consumer: children placed with `top`/`left` need a positioned ancestor, so a region of the consumer's *own* needs `position: relative` in a stylesheet. This component is that region as an element — a DITL's enclosing rectangle with nothing drawn in it.
-- **Attributes/props:** `width` / `height`: number (whole system px, via `VfSized`); the `top` / `left` pair via `VfPositioned` like nearly every component; `pattern?: string` — a library pattern by name or sixteen hex digits (docs/PATTERNS.md), painted as the box's background: unset paints nothing, an unrecognized value paints nothing and warns once. On a **child**: `fill-width` and `fill-height`, bare attributes as in `vf-stack`. That is the whole API.
+A plain sized box: `width`/`height` in whole system px around a bare slot — nothing drawn but what `pattern` and `rule` name, no layout opinion. Explicit placement (src/position.ts) leaves one line of CSS the kit can't write for a consumer: children placed with `top`/`left` need a positioned ancestor, so a region of the consumer's *own* needs `position: relative` in a stylesheet. This component is that region as an element — a DITL's enclosing rectangle with nothing drawn in it.
+- **Attributes/props:** `width` / `height`: number (whole system px, via `VfSized`); the `top` / `left` pair via `VfPositioned` like nearly every component; `pattern?: string` — a library pattern by name or sixteen hex digits (docs/PATTERNS.md), painted as the box's background: unset paints nothing, an unrecognized value paints nothing and warns once; `rule?: string` — edge names separated by spaces (`"bottom"`, `"top bottom"`, up to all four in any order), the 1px rule drawn on those edges as the box's own border inside the declared size: unset draws none, a value naming anything but an edge draws none and warns once. On a **child**: `fill-width` and `fill-height`, bare attributes as in `vf-stack`. That is the whole API.
 - **Not a `vf-stack`.** The stack is a flexbox with opinions — an axis, a cross-axis default, fills compiled into flex. The container has none: in-flow children get normal flow, placed children get a coordinate system. Reach for it when the stack's opinions are the thing in the way — a field of placed icons, a fixed stage for placed art, a composition that brings its own layout with it.
-- **Visual:** none unless `pattern` is set — no border, role, keyboard behavior or selection; what it holds decides what it is. With `pattern`, the shadow box carries the fill as its own background (`vfPatternFill`: the `vf-pattern-fill` class always, `vf-patterned` while a pattern is resolved — *Patterns* under *Tiled fills*), riding the snap correction with the coordinate system; the raster is sized from the declared axes and measured on an undeclared one. `:host` is a block with `width: fit-content`, so an undeclared axis shrink-wraps rather than claiming the parent's width (the stack's rule — a layout box must not hand out a size nobody declared; a declared dimension lands on the host's inline style and beats it). The slot sits in one shadow box coinciding with the host box (`.vf-snap`, `display: flow-root`, `height: 100%`): flow-root so a slotted margin cannot collapse through the top edge and push the coordinate origin off the host's corner, 100% so percentage fills resolve against a declared height. That box owns `position: relative` — the anchor for `top`/`left` children — the component's purpose. Content that outgrows the declared box overflows it rather than growing it.
+- **Visual:** none unless `pattern` or `rule` is set — no role, keyboard behavior or selection; what it holds decides what it is. With `pattern`, the shadow box carries the fill as its own background (`vfPatternFill`: the `vf-pattern-fill` class always, `vf-patterned` while a pattern is resolved — *Patterns* under *Tiled fills*), riding the snap correction with the coordinate system; the raster is sized from the declared axes and measured on an undeclared one. With `rule`, the same box wears `vfRule`'s per-edge classes (§4): the rule is its border, inside the declared size (`box-sizing: border-box`), so a 24px `rule="bottom"` strip is 23 rows of box over one of ink — the menu bar's anatomy — and the padding box, which placed children anchor to and percentage fills resolve against, begins inside the rule. A pattern's paper reaches the rule and its phase anchors at the padding box, so it begins directly inside a top or left rule. `npm run verify:rule`. `:host` is a block with `width: fit-content`, so an undeclared axis shrink-wraps rather than claiming the parent's width (the stack's rule — a layout box must not hand out a size nobody declared; a declared dimension lands on the host's inline style and beats it). The slot sits in one shadow box coinciding with the host box (`.vf-snap`, `display: flow-root`, `height: 100%`): flow-root so a slotted margin cannot collapse through the top edge and push the coordinate origin off the host's corner, 100% so percentage fills resolve against a declared height. That box owns `position: relative` — the anchor for `top`/`left` children — the component's purpose. Content that outgrows the declared box overflows it rather than growing it.
 - **Carries a `GridSnapController`.** A container's box is itself the consumer's coordinate system, including for non-`vf` content that cannot correct itself. The shadow box owns the positioning anchor and the `vf-snap` class *together*, so the correction moves the whole coordinate system and everything placed against it rides along, kit or not. A declared size and whole-px `top`/`left` are on the grid by construction; the controller covers the origin the page contributes. (This is the arrangement `vf-stack` has since adopted too — one shadow box owning anchor and correction together.)
 - **Typographically transparent**, exactly as `vf-stack` and for the same reason: `font`, `-webkit-font-smoothing`, `color`, `user-select` and `text-align` return to `inherit`, so wrapping content in a sized box changes nothing about how that content reads.
 - **`fill-width` / `fill-height`** are read about the host (`width`/`height: 100%`, for a parent that can give the box a size) and compiled for slotted children as the percentage form — normal flow has no flex axes to translate onto. `width: 100%` always binds against the box; `height: 100%` binds only against a declared `height` (percentage-against-auto computes to auto), so a fill with nothing to take is inert, not an error. A light-DOM declaration beats the `::slotted` rule, as everywhere.