vintage-frames 0.15.0 → 0.16.0

package/dist/components/vf-menu.js

@@ -16,9 +16,18 @@ import { MenuPressController as g } from "../menu-press.js";
 import { LitElement as _, css as v, html as y, nothing as b } from "lit";
 import { property as x, query as S, queryAssignedElements as C, state as w } from "lit/decorators.js";
 //#region src/components/vf-menu.ts
-var T = class extends a(_) {
+var T = /* @__PURE__ */ new Set([
+	"vf-img",
+	"img",
+	"svg",
+	"picture",
+	"canvas"
+]), E = class extends a(_) {
 	constructor(...e) {
-		super(...e), this.scale = new r(this), this.gridSnap = new u(this), this.#e = new m(this), this.label = "", this.open = !1, this.shortcuts = !1, this.barTabIndex = 0, this.#t = new g(this, {
+		super(...e), this.scale = new r(this), this.gridSnap = new u(this), this.#e = new m(this), this.label = "", this.open = !1, this.shortcuts = !1, this.barTabIndex = 0, this._artTitle = !1, this.#t = (e) => {
+			let t = e.target.assignedElements();
+			this._artTitle = t.length > 0 && t.every((e) => T.has(e.localName));
+		}, this.#n = new g(this, {
 			menus: () => [this],
 			open: (e) => {
 				e.open = !0;
@@ -26,17 +35,17 @@ var T = class extends a(_) {
 			close: () => {
 				this.open = !1;
 			}
-		}), this.#r = this.attachInternals(), this.#i = new h(), this.#a = !1, this.#o = () => {
-			this.#n || this.focus(), this.open = !1;
-		}, this._flashOn = !1, this.#c = () => {
-			this.open || (this.#l(), this.#s = p((e) => {
+		}), this.#i = this.attachInternals(), this.#a = new h(), this.#o = !1, this.#s = () => {
+			this.#r || this.focus(), this.open = !1;
+		}, this._flashOn = !1, this.#l = () => {
+			this.open || (this.#u(), this.#c = p((e) => {
 				this._flashOn = e;
 			}, () => {
-				this._flashOn = !1, this.#s = void 0;
+				this._flashOn = !1, this.#c = void 0;
 			}));
-		}, this.#u = (e) => {
-			e.composedPath().includes(this) || (this.open = !1);
 		}, this.#d = (e) => {
+			e.composedPath().includes(this) || (this.open = !1);
+		}, this.#f = (e) => {
 			if (!e.defaultPrevented) switch (e.key) {
 				case "Escape":
 					e.preventDefault(), this.open = !1, this.focus();
@@ -46,7 +55,7 @@ var T = class extends a(_) {
 					break;
 				case "ArrowDown":
 				case "ArrowUp":
-					e.preventDefault(), this.#f(e.key === "ArrowDown" ? 1 : -1);
+					e.preventDefault(), this.#p(e.key === "ArrowDown" ? 1 : -1);
 					break;
 				case "Home":
 				case "End": {
@@ -59,29 +68,29 @@ var T = class extends a(_) {
 					if (e.key.length !== 1 || e.key === " " || e.metaKey || e.ctrlKey || e.altKey) break;
 					e.preventDefault();
 					let t = this.items, n = t.indexOf(document.activeElement);
-					t[this.#i.feed(e.key, n, t.map((e) => ({
+					t[this.#a.feed(e.key, n, t.map((e) => ({
 						text: e.textContent ?? "",
 						disabled: !1
 					})))]?.focus();
 					break;
 				}
 			}
-		}, this.#p = new d(this, () => [[
+		}, this.#m = new d(this, () => [[
 			document,
 			"pointerdown",
-			this.#u,
+			this.#d,
 			!0
 		], [
 			document,
 			"keydown",
-			this.#d,
+			this.#f,
 			!0
-		]]), this.#h = (e) => {
-			if (!this.open || this.#n) return;
+		]]), this.#g = (e) => {
+			if (!this.open || this.#r) return;
 			let t = e.relatedTarget;
 			t instanceof Node && (this.contains(t) || this.renderRoot.contains(t)) || (this.open = !1);
-		}, this.#g = (e) => {
-			this.#e.suppress(), !this.#n && this.#t.onPointerDown(e);
+		}, this.#_ = (e) => {
+			this.#e.suppress(), !this.#r && this.#n.onPointerDown(e);
 		};
 	}
 	static {
@@ -102,7 +111,7 @@ var T = class extends a(_) {
            Menus.png puts the plate 10px left / 9px right of the title ink.
            Chicago carries a 1px bearing on each side inside the text box, so
            9/8 in layout lands the plate at ink −10/+9. In a bar, vf-menu-bar
-           overlaps adjacent boxes 5px on top of this — the plates share a
+           overlaps adjacent boxes 4px on top of this — the plates share a
            band, as the originals did. */
         padding-inline: calc(var(--vf-scale, 1) * 9px) calc(var(--vf-scale, 1) * 8px);
         white-space: nowrap;
@@ -177,6 +186,18 @@ var T = class extends a(_) {
          is for the state the inversion can't express: focused, not yet open.
          The class stays on through the open state, so the rule comes back by
          itself when the menu closes and hands focus back to the title. */
+      /* An art title: an icon in the label slot. Its 16×16 cell sits 6 system
+         px into the plate and 6 short of the plate's end, on the plate's top
+         row (one row above where centering would put it). Art drawn from x 2,
+         y 1 of its cell, as the apple is, then has 8 px of plate before its
+         ink, and its ink runs from the bar's row 2. */
+      .label.art {
+        align-items: flex-start;
+        padding-inline: calc(var(--vf-scale, 1) * 6px);
+      }
+      .label.art .title {
+        margin-block-start: calc(var(--vf-scale, 1) * 1px);
+      }
       .label:focus {
         outline: none;
       }
@@ -236,6 +257,7 @@ var T = class extends a(_) {
 	}
 	#e;
 	#t;
+	#n;
 	get items() {
 		return this.allItems.filter((e) => !e.disabled);
 	}
@@ -245,44 +267,44 @@ var T = class extends a(_) {
 	get labelRect() {
 		return this._labelEl?.getBoundingClientRect() ?? null;
 	}
-	get #n() {
+	get #r() {
 		return this.closest("vf-menu-bar") !== null;
 	}
-	#r;
 	#i;
 	#a;
 	#o;
 	#s;
 	#c;
-	#l() {
-		this.#s?.cancel(), this.#s = void 0, this._flashOn = !1;
+	#l;
+	#u() {
+		this.#c?.cancel(), this.#c = void 0, this._flashOn = !1;
 	}
-	#u;
 	#d;
-	#f(e) {
+	#f;
+	#p(e) {
 		let t = this.items;
 		if (t.length === 0) return;
 		let n = t.indexOf(document.activeElement), r;
 		r = n < 0 ? e === 1 ? 0 : t.length - 1 : (n + e + t.length) % t.length, t[r]?.focus();
 	}
-	#p;
+	#m;
 	connectedCallback() {
-		super.connectedCallback(), this.#m(), this.requestUpdate(), this.addEventListener("vf-menu-close-request", this.#o), this.addEventListener("vf-menu-flash-request", this.#c), this.addEventListener("pointerdown", this.#g), this.addEventListener("focusout", this.#h);
+		super.connectedCallback(), this.#h(), this.requestUpdate(), this.addEventListener("vf-menu-close-request", this.#s), this.addEventListener("vf-menu-flash-request", this.#l), this.addEventListener("pointerdown", this.#_), this.addEventListener("focusout", this.#g);
 	}
-	#m() {
-		this.#r.role = this.#n ? "none" : null;
+	#h() {
+		this.#i.role = this.#r ? "none" : null;
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("vf-menu-close-request", this.#o), this.removeEventListener("vf-menu-flash-request", this.#c), this.removeEventListener("pointerdown", this.#g), this.removeEventListener("focusout", this.#h), this.#l();
+		super.disconnectedCallback(), this.removeEventListener("vf-menu-close-request", this.#s), this.removeEventListener("vf-menu-flash-request", this.#l), this.removeEventListener("pointerdown", this.#_), this.removeEventListener("focusout", this.#g), this.#u();
 	}
-	#h;
+	#g;
 	updated(e) {
 		if (e.has("open")) {
-			if (this.open && this.#l(), this.open && !this.#n ? this.#p.attach() : this.#p.detach(), !this.open) for (let e of this.allItems) e.active = !1;
-			this.open || this.#i.reset();
+			if (this.open && this.#u(), this.open && !this.#r ? this.#m.attach() : this.#m.detach(), !this.open) for (let e of this.allItems) e.active = !1;
+			this.open || this.#a.reset();
 		}
 	}
-	#g;
+	#_;
 	focus(e) {
 		this._labelEl?.focus(e);
 	}
@@ -292,19 +314,21 @@ var T = class extends a(_) {
 	render() {
 		return y`
       <div
-        class="label vf-snap ${this.#e.marked ? "vf-focus-rule" : ""} ${this._flashOn ? "flash-on" : ""}"
+        class="label vf-snap ${this.#e.marked ? "vf-focus-rule" : ""} ${this._flashOn ? "flash-on" : ""} ${this._artTitle ? "art" : ""}"
         part="label"
-        role=${this.#n ? "menuitem" : "button"}
+        role=${this.#r ? "menuitem" : "button"}
         tabindex=${this.barTabIndex}
         aria-haspopup="menu"
         aria-expanded=${this.open ? "true" : "false"}
         aria-label=${this.label || b}
-        @pointerdown=${this.#v}
-        @click=${this.#y}
-        @pointerenter=${this.#b}
-        @keydown=${this.#x}
+        @pointerdown=${this.#y}
+        @click=${this.#b}
+        @pointerenter=${this.#x}
+        @keydown=${this.#S}
       >
-        <span class="title"><slot name="label">${this.label}</slot></span>
+        <span class="title"
+          ><slot name="label" @slotchange=${this.#t}>${this.label}</slot></span
+        >
       </div>
       <div
         class="panel vf-panel"
@@ -316,8 +340,8 @@ var T = class extends a(_) {
       </div>
     `;
 	}
-	#_() {
-		if (!this.#n) {
+	#v() {
+		if (!this.#r) {
 			this.open = !this.open;
 			return;
 		}
@@ -326,44 +350,44 @@ var T = class extends a(_) {
 			composed: !1
 		}) && (this.open = !this.open);
 	}
-	#v() {
-		this.#a = !0, f(() => {
-			this.#a = !1;
+	#y() {
+		this.#o = !0, f(() => {
+			this.#o = !1;
 		});
 	}
-	#y(t) {
-		if (this.#a) {
-			this.#a = !1;
+	#b(t) {
+		if (this.#o) {
+			this.#o = !1;
 			return;
 		}
-		e(this, t, () => this.#_());
+		e(this, t, () => this.#v());
 	}
-	#b() {
+	#x() {
 		t(this, "vf-menu-hover", { menu: this }, { composed: !1 });
 	}
-	#x(e) {
+	#S(e) {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
 			let t = this.open;
-			this.#_(), !t && this.open && this.#S();
-		} else e.key === "ArrowDown" && !this.open && (e.preventDefault(), this.#_(), this.open && this.#S());
+			this.#v(), !t && this.open && this.#C();
+		} else e.key === "ArrowDown" && !this.open && (e.preventDefault(), this.#v(), this.open && this.#C());
 	}
-	async #S() {
+	async #C() {
 		await this.updateComplete, this.items[0]?.focus();
 	}
 };
-i([x()], T.prototype, "label", void 0), i([x({
+i([x()], E.prototype, "label", void 0), i([x({
 	type: Boolean,
 	reflect: !0
-})], T.prototype, "open", void 0), i([x({
+})], E.prototype, "open", void 0), i([x({
 	type: Boolean,
 	reflect: !0
-})], T.prototype, "shortcuts", void 0), i([x({
+})], E.prototype, "shortcuts", void 0), i([x({
 	type: Number,
 	attribute: !1
-})], T.prototype, "barTabIndex", void 0), i([S(".label")], T.prototype, "_labelEl", void 0), i([C({
+})], E.prototype, "barTabIndex", void 0), i([S(".label")], E.prototype, "_labelEl", void 0), i([w()], E.prototype, "_artTitle", void 0), i([C({
 	selector: "vf-menu-item",
 	flatten: !0
-})], T.prototype, "_assignedItems", void 0), i([w()], T.prototype, "_flashOn", void 0), T = i([n("vf-menu")], T);
+})], E.prototype, "_assignedItems", void 0), i([w()], E.prototype, "_flashOn", void 0), E = i([n("vf-menu")], E);
 //#endregion
-export { T as VfMenu };
+export { E as VfMenu };

package/dist/components/vf-number-field.d.ts

@@ -50,6 +50,10 @@ export declare class VfNumberField extends VfNumberField_base {
     private pressed;
     private input;
     disconnectedCallback(): void;
+    /** Typed text clamps and rounds when it is a number; otherwise it stays as typed. */
+    protected committedText(raw: string): string;
+    /** Every value event carries `valueAsNumber` too. */
+    protected emitValue(type: 'vf-input' | 'vf-change', detail?: Record<string, unknown>): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/components/vf-number-field.js

@@ -14,42 +14,39 @@ import { classMap as v } from "lit/directives/class-map.js";
 import { live as y } from "lit/directives/live.js";
 //#region src/components/vf-number-field.ts
 var b = class extends r(u) {
-	constructor(...t) {
-		super(...t), this.step = 1, this.pressed = null, this.#l = (e) => {
+	constructor(...e) {
+		super(...e), this.step = 1, this.pressed = null, this.#l = (e) => {
 			if (this.isDisabled || this.readonly) return;
 			let t = e.currentTarget.classList.contains("up") ? 1 : -1;
 			e.preventDefault();
 			try {
 				e.currentTarget.setPointerCapture(e.pointerId);
 			} catch {}
-			this.input?.focus(), this.pressed = t > 0 ? "up" : "down", this.#a(t), this.#s(t);
+			this.input?.focus(), this.pressed = t > 0 ? "up" : "down", this.#o(t), this.#s(t);
 		}, this.#u = () => {
 			this.#c(), this.pressed = null;
 		}, this.#d = (e) => {
 			if (this.isSubmitEnter(e)) {
-				this.requestImplicitSubmit() && e.preventDefault();
+				this.submitOnEnter(e);
 				return;
 			}
 			if (!(this.isDisabled || this.readonly) && !(e.isComposing || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) switch (e.key) {
 				case "ArrowUp":
-					e.preventDefault(), this.#a(1);
+					e.preventDefault(), this.#o(1);
 					break;
 				case "ArrowDown":
-					e.preventDefault(), this.#a(-1);
+					e.preventDefault(), this.#o(-1);
 					break;
 				case "Home":
-					this.min != null && (e.preventDefault(), this.#i(this.min));
+					this.min != null && (e.preventDefault(), this.#a(this.min));
 					break;
 				case "End":
-					this.max != null && (e.preventDefault(), this.#i(this.max));
+					this.max != null && (e.preventDefault(), this.#a(this.max));
 					break;
 				case " ": e.preventDefault();
 			}
 		}, this.#f = (e) => {
-			this.value = e.target.value, this.#o("vf-input");
-		}, this.#p = (t) => {
-			let n = t.target.value, r = parseFloat(n);
-			this.value = Number.isNaN(r) ? n : String(Number(this.#r(r).toFixed(d(this.step)))), this.#o("vf-change"), e(this, "change");
+			this.value = e.target.value, this.emitValue("vf-input");
 		};
 	}
 	static {
@@ -153,24 +150,31 @@ var b = class extends r(u) {
 	#r(e) {
 		return this.min != null && e < this.min ? this.min : this.max != null && e > this.max ? this.max : e;
 	}
-	#i(t) {
-		let n = String(Number(this.#r(t).toFixed(d(this.step))));
-		n !== this.value && (this.value = n, this.#o("vf-change"), e(this, "input"), e(this, "change"));
+	#i(e) {
+		return String(Number(this.#r(e).toFixed(d(this.step))));
 	}
-	#a(e) {
+	committedText(e) {
+		let t = parseFloat(e);
+		return Number.isNaN(t) ? e : this.#i(t);
+	}
+	#a(t) {
+		let n = this.#i(t);
+		n !== this.value && (this.value = n, this.committed = n, this.emitValue("vf-change"), e(this, "input"), e(this, "change"));
+	}
+	#o(e) {
 		if (this.isDisabled || this.readonly) return;
 		let t = this.#n(), n = Number.isNaN(t) ? this.min ?? 0 : t + e * this.step;
-		this.#i(n);
+		this.#a(n);
 	}
-	#o(e) {
-		this.emitValue(e, {
-			value: this.value,
-			valueAsNumber: this.#n()
-		});
+	emitValue(e, t = {
+		value: this.value,
+		valueAsNumber: this.#n()
+	}) {
+		super.emitValue(e, t);
 	}
 	#s(e) {
 		this.#c(), this.#e = window.setTimeout(() => {
-			this.#t = window.setInterval(() => this.#a(e), 60);
+			this.#t = window.setInterval(() => this.#o(e), 60);
 		}, 300);
 	}
 	#c() {
@@ -180,7 +184,6 @@ var b = class extends r(u) {
 	#u;
 	#d;
 	#f;
-	#p;
 	render() {
 		let e = this.isDisabled, t = this.#n();
 		return p`
@@ -208,7 +211,7 @@ var b = class extends r(u) {
           ?disabled=${e}
           ?readonly=${this.readonly}
           @input=${this.#f}
-          @change=${this.#p}
+          @change=${this.handleChange}
           @keydown=${this.#d}
         />
       </div>

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

@@ -29,7 +29,9 @@ declare const VfParagraph_base: (new (...args: any[]) => import("../size.js").Vf
  *   measure the copy wraps to, whole and on the grid.
  *
  * The shadow root renders a real `<p>`, so the copy keeps paragraph semantics
- * for assistive tech, and — unlike the kit's chrome — the text is selectable.
+ * for assistive tech, and — unlike the kit's chrome — the text is selectable,
+ * selected text inverting to the 1-bit highlight (`--vf-highlight` /
+ * `--vf-highlight-text`) as a field's does.
  * There is no margin: per SPEC §2 a component adds nothing outside its own box,
  * so paragraph spacing is the page's (a `gap` on the column, or a margin on the
  * host — kept a whole number of pixels, like everything else in the contract).

package/dist/components/vf-paragraph.js

@@ -37,6 +37,13 @@ var f = class extends s(r(c)) {
         user-select: text;
         -webkit-user-select: text;
       }
+      /* Selected copy inverts to the 1-bit highlight, as a field's does. The
+         copy is the host's own light-DOM text, so the rule is the host's;
+         text inside slotted elements (a <b>, a link) inherits it. */
+      :host::selection {
+        background-color: var(--vf-highlight, #000);
+        color: var(--vf-highlight-text, #fff);
+      }
       /* Chrome copy wraps on Chicago 12's native line: ascent 12 + descent 3
          + leading 1 = 16 — zero half-leading on the 16px em, 7 blank rows
          between a baseline and the caps under it, as a real alert set it.

package/dist/components/vf-scroll-area.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 declare const VfScrollArea_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
 /**
  * `<vf-scroll-area>` — a container whose scrollbars look like System 7.
@@ -24,7 +25,8 @@ declare const VfScrollArea_base: (new (...args: any[]) => import("../position.js
  *
  * Size the host (width/height) from the outside; the viewport fills it.
  * Content runs to the frame and the rails — the area adds no inset of its
- * own; an inset is the content's (a `vf-stack pad`).
+ * own; an inset is the content's (a `vf-stack pad`). `pattern` fills the
+ * scrolled plane with a 1-bit pattern, as on `vf-container`.
  *
  * The scrolled plane sizes to its content — never narrower than the
  * viewport, as wide as content that cannot wrap — so the rails follow a row
@@ -75,8 +77,21 @@ export declare class VfScrollArea extends VfScrollArea_base {
      * unnamed region is inert) and role-less when not.
      */
     label: string;
+    /**
+     * A 1-bit fill for the scrolled plane, as on `vf-container`: a library
+     * pattern by name (docs/PATTERNS.md) or sixteen hex digits. It fills the
+     * visible area, runs on past the content, and scrolls with it, its phase
+     * anchored at the content's top-left. Unset, the plane stays white; an
+     * unrecognized value paints nothing and warns once.
+     */
+    pattern?: string | null;
+    /** `pattern`, resolved — what the fill paints; null paints nothing. */
+    private _pattern;
     private viewport;
     private content;
+    /** The pattern fill, painted on the scrolled plane (src/pattern-fill.ts). */
+    private readonly patternFill;
+    protected willUpdate(changed: PropertyValues<this>): void;
     /** Reports overflow per axis so the reserved rail(s) activate on overflow. */
     private readonly scrollState;
     /** Syncs the drawn rails to the viewport and drives their interactions. */

package/dist/components/vf-scroll-area.js

@@ -3,27 +3,36 @@ 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, placementIn as i } from "../position.js";
 import { vfBase as a } from "../styles/recipes/host.js";
-import { vfStrokeDecls as o } from "../styles/recipes/stroke.js";
-import { vfFocusRing as s } from "../styles/recipes/focus.js";
-import { vfScrollRail as c } from "../styles/recipes/scroll-rail.js";
-import { GridSnapController as l } from "../grid-snap.js";
-import { ScrollStateController as u } from "../scroll-state.js";
-import { ScrollRailController as d, renderScrollRail as f } from "../scroll-rail.js";
-import { LitElement as p, css as m, html as h, nothing as g } from "lit";
-import { property as _, query as v, state as y } from "lit/decorators.js";
+import { parsePattern as o } from "../patterns.js";
+import { vfStrokeDecls as s } from "../styles/recipes/stroke.js";
+import { vfFocusRing as c } from "../styles/recipes/focus.js";
+import { vfScrollRail as l } from "../styles/recipes/scroll-rail.js";
+import { PatternFillController as u, vfPatternFill as d } from "../pattern-fill.js";
+import { GridSnapController as f } from "../grid-snap.js";
+import { ScrollStateController as p } from "../scroll-state.js";
+import { ScrollRailController as m, renderScrollRail as h } from "../scroll-rail.js";
+import { LitElement as g, css as _, html as v, nothing as y } from "lit";
+import { property as b, query as x, state as S } from "lit/decorators.js";
 //#region src/components/vf-scroll-area.ts
-var b = class extends r(p) {
+var C = class extends r(g) {
+	#e;
+	willUpdate(e) {
+		super.willUpdate(e), e.has("pattern") && (this._pattern = o(this.pattern), this._pattern === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-scroll-area: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Painting nothing.`)));
+	}
 	constructor() {
-		super(), this.scale = new t(this), this.gridSnap = new l(this), this.axis = "vertical", this.corner = !1, this.label = "", this.scrollState = new u(this, () => this.viewport, () => this.content, (e) => {
+		super(), this.scale = new t(this), this.gridSnap = new f(this), this.axis = "vertical", this.corner = !1, this.label = "", this._pattern = null, this.#e = !1, this.patternFill = new u(this, {
+			getBox: () => this.content,
+			getPattern: () => this._pattern
+		}), this.scrollState = new p(this, () => this.viewport, () => this.content, (e) => {
 			this._scrollable = e.x || e.y;
-		}), this.rail = new d(this, {
+		}), this.rail = new m(this, {
 			getScroll: () => this.viewport,
 			getContent: () => this.content
-		}), this._scrollable = !1, this.#e = () => {
+		}), this._scrollable = !1, this.#t = () => {
 			this.measure();
-		}, this.addEventListener("vf-placement-change", this.#e);
+		}, this.addEventListener("vf-placement-change", this.#t);
 	}
-	#e;
+	#t;
 	placementAt(e, t, n) {
 		return i(this.content ?? this, e, t, this, n);
 	}
@@ -39,8 +48,9 @@ var b = class extends r(p) {
 	static {
 		this.styles = [
 			a,
-			c,
-			m`
+			l,
+			d,
+			_`
       :host {
         display: block;
       }
@@ -55,7 +65,7 @@ var b = class extends r(p) {
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
         background: var(--vf-white, #fff);
-        ${o()}
+        ${s()}
       }
       :host(:not([axis])) .box,
       :host([axis='vertical']) .box,
@@ -135,36 +145,36 @@ var b = class extends r(p) {
       /* Focusable so keyboard users can scroll; inset ring to stay in-box. */
       .viewport:focus-visible {
         --vf-focus-offset: -2px;
-        ${s}
+        ${c}
       }
     `
 		];
 	}
 	render() {
 		let e = this.axis !== "horizontal", t = this.axis === "horizontal" || this.axis === "both", n = e && t || this.corner;
-		return h`
+		return v`
       <div class="box vf-snap">
         <div
           class="viewport vf-scroll"
           part="viewport"
-          tabindex=${this._scrollable ? "0" : g}
-          role=${this.label ? "region" : this._scrollable ? "group" : g}
-          aria-label=${this.label || g}
+          tabindex=${this._scrollable ? "0" : y}
+          role=${this.label ? "region" : this._scrollable ? "group" : y}
+          aria-label=${this.label || y}
         >
-          <div class="content">
+          <div class="content vf-pattern-fill${this._pattern ? " vf-patterned" : ""}">
             <slot @slotchange=${this._onSlotChange}></slot>
           </div>
         </div>
-        ${e ? f(this.rail, "vertical") : g}
-        ${t ? f(this.rail, "horizontal") : g}
-        ${n ? h`<div class="vf-rail-corner" aria-hidden="true"></div>` : g}
+        ${e ? h(this.rail, "vertical") : y}
+        ${t ? h(this.rail, "horizontal") : y}
+        ${n ? v`<div class="vf-rail-corner" aria-hidden="true"></div>` : y}
       </div>
     `;
 	}
 };
-n([_({ reflect: !0 })], b.prototype, "axis", void 0), n([_({
+n([b({ reflect: !0 })], C.prototype, "axis", void 0), n([b({
 	type: Boolean,
 	reflect: !0
-})], b.prototype, "corner", void 0), n([_()], b.prototype, "label", void 0), n([v(".viewport")], b.prototype, "viewport", void 0), n([v(".content")], b.prototype, "content", void 0), n([y()], b.prototype, "_scrollable", void 0), b = n([e("vf-scroll-area")], b);
+})], C.prototype, "corner", void 0), n([b()], C.prototype, "label", void 0), n([b()], C.prototype, "pattern", void 0), n([x(".viewport")], C.prototype, "viewport", void 0), n([x(".content")], C.prototype, "content", void 0), n([S()], C.prototype, "_scrollable", void 0), C = n([e("vf-scroll-area")], C);
 //#endregion
-export { b as VfScrollArea };
+export { C as VfScrollArea };

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

@@ -9,10 +9,11 @@ declare const VfSelect_base: (new (...args: any[]) => import("../position.js").V
  * Children are `<vf-option>` elements in the default slot. The closed control
  * is a white box with a 1px black border, the small 1px hard shadow, the
  * selected option's label on the left and a solid black ▼ triangle on the
- * right. The open panel uses the shared `.vf-panel` recipe and is positioned
- * `position: fixed` (computed from `getBoundingClientRect()`) so it escapes
- * clipping containers; when possible the currently-selected item opens
- * directly over the control, like the real popup menu.
+ * right. The open panel uses the shared `.vf-panel` recipe and is a manual
+ * popover in the top layer, positioned `position: fixed` (computed from
+ * `getBoundingClientRect()`), so it escapes clipping containers and paints
+ * over every window, palettes included; when possible the currently-selected
+ * item opens directly over the control, like the real popup menu.
  *
  * Pointer — two interaction styles are supported and disambiguated by the
  * gesture itself, resolved at the first pointer release: