vintage-frames 0.10.1 → 0.12.0

package/dist/components/vf-select.js

@@ -3,36 +3,31 @@ import { vfElement as n } from "../define.js";
 import { ScaleController as r, sys as i } from "../scale.js";
 import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { VfPositioned as o } from "../position.js";
-import { vfDisplay as s } from "../styles/recipes/display-face.js";
-import { vfBase as c } from "../styles/recipes/host.js";
-import { vfPanel as l } from "../styles/recipes/surface.js";
-import { vfFocusUnderline as u } from "../styles/recipes/focus.js";
-import { GridSnapController as d } from "../grid-snap.js";
-import { DocumentListenersController as f } from "../document-listeners.js";
-import { runSelectionBlink as p } from "../motion.js";
-import { CARET_DOWN as m, CARET_UP as h, glyphSvg as g } from "../glyphs.js";
-import { VfShadowRoleControl as _ } from "../form-control.js";
-import { FocusRuleController as v } from "../focus-modality.js";
-import { VfOption as y } from "./vf-option.js";
-import { clampScroll as b, ensureVisibleScroll as x, firstPickableRow as S, lastPickableRow as C, layoutClampedPopup as w } from "../popup-overflow.js";
-import { TypeAheadBuffer as T } from "../type-ahead.js";
-import { css as E, html as D, nothing as O } from "lit";
-import { property as k, query as A, queryAssignedElements as j, state as M } from "lit/decorators.js";
-import { classMap as N } from "lit/directives/class-map.js";
+import { vfBodyDecls as s } from "../styles/recipes/body-face.js";
+import { vfDisplay as c } from "../styles/recipes/display-face.js";
+import { vfBase as l } from "../styles/recipes/host.js";
+import { vfPanel as u } from "../styles/recipes/surface.js";
+import { vfFocusUnderline as d } from "../styles/recipes/focus.js";
+import { GridSnapController as f } from "../grid-snap.js";
+import { DocumentListenersController as p } from "../document-listeners.js";
+import { runSelectionBlink as m } from "../motion.js";
+import { CARET_DOWN as h, CARET_DOWN_SMALL as g, CARET_UP as _, CARET_UP_SMALL as v, glyphSvg as y } from "../glyphs.js";
+import { VfShadowRoleControl as b } from "../form-control.js";
+import { FocusRuleController as x } from "../focus-modality.js";
+import { VfOption as S } from "./vf-option.js";
+import { clampScroll as C, ensureVisibleScroll as w, firstPickableRow as T, lastPickableRow as E, layoutClampedPopup as D } from "../popup-overflow.js";
+import { TypeAheadBuffer as O } from "../type-ahead.js";
+import { css as k, html as A, nothing as j } from "lit";
+import { property as M, query as N, queryAssignedElements as P, state as F } from "lit/decorators.js";
+import { classMap as I } from "lit/directives/class-map.js";
 //#region src/components/vf-select.ts
-var P, F = class extends o(_) {
-	static {
-		P = this;
-	}
-	static {
-		this.ITEM_HEIGHT = 16;
-	}
+var L = class extends o(b) {
 	static {
 		this.styles = [
-			c,
-			s,
 			l,
-			E`
+			c,
+			u,
+			k`
       :host {
         /* A popup menu is sized to its widest option — never stretched to fill
            its container. fit-content holds that intrinsic width even inside a
@@ -42,6 +37,14 @@ var P, F = class extends o(_) {
         display: inline-block;
         width: fit-content;
       }
+      /* The small pill restates the height token on the host, so the pill, the
+         arrow slots and the slotted options (which inherit it) all derive from
+         the one small height. A --vf-popup-height set on the element itself
+         still wins over :host. */
+      :host([size='small']) {
+        --vf-popup-height: var(--vf-popup-height-small, 12px);
+        ${s}
+      }
       .control {
         /* Also the anchor the focus rule below hangs from. */
         position: relative;
@@ -96,7 +99,7 @@ var P, F = class extends o(_) {
       }
       .control.vf-focus-rule::after {
         --vf-focus-underline-offset: -4px;
-        ${u}
+        ${d}
         left: calc(var(--vf-scale, 1) * -1px);
         right: calc(var(--vf-scale, 1) * -1px);
       }
@@ -121,6 +124,23 @@ var P, F = class extends o(_) {
         overflow: hidden;
         text-overflow: ellipsis;
       }
+      /* A line box as tall as the small pill's content (10 rows) centers the
+         body face's 16px em with 9 rows above the baseline and 1 below, which
+         puts the second descender row on the border. An 8px line box leaves 8
+         above and 2 below for the descenders.
+
+         The em's 4px descent reaches 2 rows past those 2, and this box is a
+         scroll container (overflow: hidden, for the ellipsis): with the clip
+         ending at the content's last row, that inkless spill is 2px of
+         scrollable overflow a find-in-page could scroll. So the padding covers
+         all 4 rows below the baseline, and the negative margin hands the extra
+         2 back to layout. The clip now ends 2 rows below the content, on the
+         border and the shadow, where the face draws nothing. */
+      :host([size='small']) .value {
+        line-height: calc(var(--vf-scale, 1) * (var(--vf-popup-height, 12px) - 4px));
+        padding-bottom: calc(var(--vf-scale, 1) * 4px);
+        margin-bottom: calc(var(--vf-scale, 1) * -2px);
+      }
       /* Sizer contributes width only: collapsed to zero height and clipped so it
          never adds a row, but its widest line still drives the grid cell width. */
       .sizer {
@@ -143,6 +163,17 @@ var P, F = class extends o(_) {
         width: calc(var(--vf-scale, 1) * 11px);
         height: calc(var(--vf-scale, 1) * 6px);
       }
+      /* The small ▼ is 5 rows tall, which centers on a half row, so it is
+         pinned 3 rows down the 10-row content: 3 blank rows above it, 2 below,
+         its middle row on the middle row of the x-height (rows 3–7). */
+      :host([size='small']) .arrow {
+        align-self: flex-start;
+        padding-top: calc(var(--vf-scale, 1) * 3px);
+      }
+      :host([size='small']) .arrow svg {
+        width: calc(var(--vf-scale, 1) * 9px);
+        height: calc(var(--vf-scale, 1) * 5px);
+      }
       /* Disabled: only the value label dims; the box, hard shadow and ▼ arrow
          stay solid black (System 7 dims the label, not the control). */
       :host([disabled]) .label,
@@ -226,6 +257,14 @@ var P, F = class extends o(_) {
         width: calc(var(--vf-scale, 1) * 11px);
         height: calc(var(--vf-scale, 1) * 6px);
       }
+      /* The small caret in a 10px slot: 2 rows above it, 3 below (5 rows can't
+         center), and 14 in, which keeps the regular caret's center column. */
+      :host([size='small']) .arrow-slot svg {
+        left: calc(var(--vf-scale, 1) * 14px);
+        top: calc(var(--vf-scale, 1) * 2px);
+        width: calc(var(--vf-scale, 1) * 9px);
+        height: calc(var(--vf-scale, 1) * 5px);
+      }
     `
 		];
 	}
@@ -242,7 +281,7 @@ var P, F = class extends o(_) {
 		return this.rowScroll < this.optionItems.length - this.visibleSlots;
 	}
 	constructor() {
-		super(), this.value = "", this.name = "", this.label = "", this.open = !1, this.cachedOptions = [], this.scale = new r(this), this.gridSnap = new d(this), this.focusRule = new v(this), this.panelListeners = new f(this, () => [
+		super(), this.value = "", this.name = "", this.size = "regular", this.label = "", this.open = !1, this.cachedOptions = [], this.scale = new r(this), this.gridSnap = new f(this), this.focusRule = new x(this), this.panelListeners = new p(this, () => [
 			[
 				document,
 				"pointerdown",
@@ -260,7 +299,7 @@ var P, F = class extends o(_) {
 				"resize",
 				this.handleWindowResize
 			]
-		]), this.pressListeners = new f(this, () => [
+		]), this.pressListeners = new p(this, () => [
 			[
 				document,
 				"pointermove",
@@ -279,8 +318,8 @@ var P, F = class extends o(_) {
 				this.handlePressCancel,
 				!0
 			]
-		]), this.activeIndex = -1, this.rowScroll = 0, this.visibleSlots = 0, this.rowHeight = 0, this.arrowScroll = null, this.pressStartArrow = null, this.pressing = !1, this.pressOpenedPanel = !1, this.pressMoved = !1, this.pressStartOption = null, this.pressDownTime = 0, this.pressDownX = 0, this.pressDownY = 0, this.swallowClick = !1, this.blinking = !1, this.typeAhead = new T(), this.handleSlotChange = () => {
-			if (this.cachedOptions = this.assignedOptions ?? [], this.value === "") {
+		]), this.activeIndex = -1, this.rowScroll = 0, this.visibleSlots = 0, this.rowHeight = 0, this.arrowScroll = null, this.pressStartArrow = null, this.pressing = !1, this.pressOpenedPanel = !1, this.pressMoved = !1, this.pressStartOption = null, this.pressDownTime = 0, this.pressDownX = 0, this.pressDownY = 0, this.swallowClick = !1, this.blinking = !1, this.typeAhead = new O(), this.handleSlotChange = () => {
+			if (this.cachedOptions = this.assignedOptions ?? [], this.applySize(), this.value === "") {
 				let e = this.optionItems.find((e) => !e.disabled);
 				e && (this.value = this.optionValue(e));
 			}
@@ -407,7 +446,7 @@ var P, F = class extends o(_) {
 		this.controlEl?.focus(e);
 	}
 	updated(e) {
-		e.has("value") && this.applySelection(), (e.has("value") || e.has("disabled")) && this.syncFormValue(this.value), e.has("disabled") && this.disabled && this.open && this.closePanel(!1);
+		e.has("value") && this.applySelection(), (e.has("value") || e.has("disabled")) && this.syncFormValue(this.value), e.has("disabled") && this.disabled && this.open && this.closePanel(!1), e.has("size") && (this.applySize(), this.open && this.closePanel(!1));
 	}
 	formDisabledCallback(e) {
 		super.formDisabledCallback(e), this.syncFormValue(this.value), e && this.open && this.closePanel(!1);
@@ -424,6 +463,10 @@ var P, F = class extends o(_) {
 	applySelection() {
 		for (let e of this.optionItems) e.selected = this.optionValue(e) === this.value;
 	}
+	applySize() {
+		let e = this.size === "small" ? "small" : "regular";
+		for (let t of this.optionItems) t.size = e;
+	}
 	async openPanel() {
 		if (this.open || this.isDisabled) return;
 		this.open = !0, this.panelListeners.attach(), await this.updateComplete;
@@ -433,15 +476,15 @@ var P, F = class extends o(_) {
 	positionPanel(e) {
 		let t = this.controlEl, n = this.panelEl;
 		if (!t || !n) return;
-		let r = t.getBoundingClientRect(), a = this.optionItems[0]?.getBoundingClientRect()?.height || i(P.ITEM_HEIGHT, this), o = getComputedStyle(n), s = parseFloat(o.borderTopWidth) || 0, c = (e) => i(parseFloat(o.getPropertyValue(e)) || 0, this), l = w({
-			idealTop: r.top - e * a,
-			rowHeight: a,
-			border: s,
+		let r = t.getBoundingClientRect(), a = getComputedStyle(n), o = parseFloat(a.borderTopWidth) || 0, s = this.optionItems[0]?.getBoundingClientRect()?.height || r.height - 2 * o, c = (e) => i(parseFloat(a.getPropertyValue(e)) || 0, this), l = D({
+			idealTop: r.top - e * s,
+			rowHeight: s,
+			border: o,
 			rowCount: this.optionItems.length,
 			viewTop: c("--vf-popup-clamp-top"),
 			viewBottom: window.innerHeight - c("--vf-popup-clamp-bottom")
 		}), u = r.left;
-		n.style.minWidth = `${r.width}px`, n.style.top = `${l.panelTop}px`, n.style.left = `${u}px`, n.style.height = `${l.panelHeight}px`, this.rowHeight = a, this.visibleSlots = l.visibleSlots, this.rowScroll = l.initialScroll, this.applyScroll();
+		n.style.minWidth = `${r.width}px`, n.style.top = `${l.panelTop}px`, n.style.left = `${u}px`, n.style.height = `${l.panelHeight}px`, this.rowHeight = s, this.visibleSlots = l.visibleSlots, this.rowScroll = l.initialScroll, this.applyScroll();
 	}
 	closePanel(e) {
 		this.open && (this.open = !1, this.cancelBlink(), this.stopArrowScroll(), this.endPress(), this.clearActive(), this.typeAhead.reset(), this.panelListeners.detach(), e && this.controlEl?.focus());
@@ -451,11 +494,11 @@ var P, F = class extends o(_) {
 		this.rowsEl && (this.rowsEl.style.transform = e ? `translateY(${-e}px)` : ""), this.upArrowEl?.classList.toggle("shown", this.showUpArrow), this.downArrowEl?.classList.toggle("shown", this.showDownArrow);
 	}
 	revealRow(e) {
-		let t = x(e, this.rowScroll, this.optionItems.length, this.visibleSlots);
+		let t = w(e, this.rowScroll, this.optionItems.length, this.visibleSlots);
 		t !== this.rowScroll && (this.rowScroll = t, this.applyScroll());
 	}
 	stepArrowScroll(e) {
-		let t = b(this.rowScroll + e, this.rowScroll, this.optionItems.length, this.visibleSlots);
+		let t = C(this.rowScroll + e, this.rowScroll, this.optionItems.length, this.visibleSlots);
 		return t !== this.rowScroll && (this.rowScroll = t, this.applyScroll(), !0);
 	}
 	startArrowScroll(e) {
@@ -531,7 +574,7 @@ var P, F = class extends o(_) {
 		if (e.disabled || this.blinking) return;
 		let t = this.optionItems.indexOf(e);
 		this.setActive(t, !1), this.blinking = !0;
-		let n = p((t) => {
+		let n = m((t) => {
 			e.active = t;
 		}, () => {
 			this.commit(e);
@@ -547,7 +590,7 @@ var P, F = class extends o(_) {
 		this.value = r, e(this, "vf-change", { value: r }), t(this, "input"), t(this, "change");
 	}
 	optionFromEvent(e) {
-		return e.composedPath().find((e) => e instanceof y);
+		return e.composedPath().find((e) => e instanceof S);
 	}
 	endPress() {
 		this.pressing && (this.pressing = !1, this.pressStartOption = null, this.pressStartArrow = null, this.pressListeners.detach());
@@ -557,7 +600,7 @@ var P, F = class extends o(_) {
 		if (!this.open || !n) return null;
 		let r = n.getBoundingClientRect();
 		if (e < r.left || e >= r.right || t < r.top || t >= r.bottom) return null;
-		let i = S(this.rowScroll), a = C(this.rowScroll, this.optionItems.length, this.visibleSlots);
+		let i = T(this.rowScroll), a = E(this.rowScroll, this.optionItems.length, this.visibleSlots);
 		for (let n = i; n <= a; n += 1) {
 			let r = this.optionItems[n];
 			if (!r) continue;
@@ -580,10 +623,10 @@ var P, F = class extends o(_) {
 		this.selectOption(e);
 	}
 	render() {
-		let e = this.optionItems.find((e) => this.optionValue(e) === this.value), t = e ? (e.textContent ?? "").trim() : "", n = this.isDisabled;
-		return D`
+		let e = this.optionItems.find((e) => this.optionValue(e) === this.value), t = e ? (e.textContent ?? "").trim() : "", n = this.isDisabled, r = this.size === "small", i = r ? g : h, a = r ? v : _;
+		return A`
       <div
-        class=${N({
+        class=${I({
 			control: !0,
 			"vf-snap": !0,
 			"vf-focus-rule": this.focusRule.marked && !this.open,
@@ -595,20 +638,20 @@ var P, F = class extends o(_) {
         aria-expanded=${this.open ? "true" : "false"}
         aria-disabled=${n ? "true" : "false"}
         aria-controls="listbox"
-        aria-label=${this.label || this.hostLabel || O}
+        aria-label=${this.label || this.hostLabel || j}
         aria-describedby=${this.describedBy}
-        aria-required=${this.required ? "true" : O}
-        aria-invalid=${this.validity.valid ? O : "true"}
+        aria-required=${this.required ? "true" : j}
+        aria-invalid=${this.validity.valid ? j : "true"}
         tabindex=${n ? "-1" : "0"}
       >
         <span class="label" part="label">
           <span class="value">${t}</span>
           <span class="sizer" aria-hidden="true">
-            ${this.optionItems.map((e) => D`<span>${(e.textContent ?? "").trim()}</span>`)}
+            ${this.optionItems.map((e) => A`<span>${(e.textContent ?? "").trim()}</span>`)}
           </span>
         </span>
         <span class="arrow" part="arrow" aria-hidden="true"
-          >${g(m, "caret")}</span
+          >${y(i, "caret")}</span
         >
       </div>
       <div
@@ -616,7 +659,7 @@ var P, F = class extends o(_) {
         class="panel vf-panel ${this.open ? "open" : ""}"
         part="panel"
         role="listbox"
-        aria-label=${this.label || this.hostLabel || O}
+        aria-label=${this.label || this.hostLabel || j}
         aria-hidden=${this.open ? "false" : "true"}
       >
         <!-- role="presentation" so the strip that carries the roll doesn't
@@ -636,7 +679,7 @@ var P, F = class extends o(_) {
           @pointermove=${this.handleArrowEnter}
           @pointerleave=${this.handleArrowLeave}
         >
-          ${g(h, "caret")}
+          ${y(a, "caret")}
         </div>
         <div
           class="arrow-slot down"
@@ -646,13 +689,13 @@ var P, F = class extends o(_) {
           @pointermove=${this.handleArrowEnter}
           @pointerleave=${this.handleArrowLeave}
         >
-          ${g(m, "caret")}
+          ${y(i, "caret")}
         </div>
       </div>
       ${this.renderDescription()}
     `;
 	}
 };
-a([k()], F.prototype, "value", void 0), a([k({ reflect: !0 })], F.prototype, "name", void 0), a([k()], F.prototype, "label", void 0), a([M()], F.prototype, "open", void 0), a([A(".control")], F.prototype, "controlEl", void 0), a([A(".panel")], F.prototype, "panelEl", void 0), a([A(".rows")], F.prototype, "rowsEl", void 0), a([A(".arrow-slot.up")], F.prototype, "upArrowEl", void 0), a([A(".arrow-slot.down")], F.prototype, "downArrowEl", void 0), a([j({ selector: "vf-option" })], F.prototype, "assignedOptions", void 0), a([M()], F.prototype, "cachedOptions", void 0), F = P = a([n("vf-select")], F);
+a([M()], L.prototype, "value", void 0), a([M({ reflect: !0 })], L.prototype, "name", void 0), a([M({ reflect: !0 })], L.prototype, "size", void 0), a([M()], L.prototype, "label", void 0), a([F()], L.prototype, "open", void 0), a([N(".control")], L.prototype, "controlEl", void 0), a([N(".panel")], L.prototype, "panelEl", void 0), a([N(".rows")], L.prototype, "rowsEl", void 0), a([N(".arrow-slot.up")], L.prototype, "upArrowEl", void 0), a([N(".arrow-slot.down")], L.prototype, "downArrowEl", void 0), a([P({ selector: "vf-option" })], L.prototype, "assignedOptions", void 0), a([F()], L.prototype, "cachedOptions", void 0), L = a([n("vf-select")], L);
 //#endregion
-export { F as VfSelect };
+export { L as VfSelect };

package/dist/glyphs.d.ts

@@ -54,6 +54,14 @@ export declare const CARET_DOWN: Glyph;
  * retrace both. Same synthesis convention as {@link STEPPER_UP_FILL}.
  */
 export declare const CARET_UP: Glyph;
+/**
+ * The small popup's ▼ (`vf-select size="small"`) — {@link CARET_DOWN} without
+ * its widest row: the same staircase, 9×5. Also the small panel's bottom
+ * scroll arrow, as the regular caret is the regular panel's.
+ */
+export declare const CARET_DOWN_SMALL: Glyph;
+/** {@link CARET_DOWN_SMALL} mirrored vertically: the small panel's top scroll arrow. */
+export declare const CARET_UP_SMALL: Glyph;
 /**
  * The "little arrows" stepper at rest — a rounded 1-bit frame enclosing hollow
  * up/down arrows (`Little arrows.png`), used by `vf-number-field`.

package/dist/glyphs.js

@@ -33,59 +33,67 @@ var t = {
 	h: 6,
 	d: "M5 0h1v1h-1zM4 1h3v1h-3zM3 2h5v1h-5zM2 3h7v1h-7zM1 4h9v1h-9zM0 5h11v1h-11z"
 }, l = {
+	w: 9,
+	h: 5,
+	d: "M0 0h9v1h-9zM1 1h7v1h-7zM2 2h5v1h-5zM3 3h3v1h-3zM4 4h1v1h-1z"
+}, u = {
+	w: 9,
+	h: 5,
+	d: "M4 0h1v1h-1zM3 1h3v1h-3zM2 2h5v1h-5zM1 3h7v1h-7zM0 4h9v1h-9z"
+}, d = {
 	w: 15,
 	h: 25,
 	d: "M2 0h11v1h-11zM1 1h1v1h-1zM13 1h1v1h-1zM0 2h1v1h-1zM14 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM14 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM8 4h1v1h-1zM14 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM9 5h1v1h-1zM14 5h1v1h-1zM0 6h1v1h-1zM4 6h1v1h-1zM10 6h1v1h-1zM14 6h1v1h-1zM0 7h1v1h-1zM3 7h3v1h-3zM9 7h3v1h-3zM14 7h1v1h-1zM0 8h1v1h-1zM5 8h1v1h-1zM9 8h1v1h-1zM14 8h1v1h-1zM0 9h1v1h-1zM5 9h1v1h-1zM9 9h1v1h-1zM14 9h1v1h-1zM0 10h1v1h-1zM5 10h5v1h-5zM14 10h1v1h-1zM0 11h1v1h-1zM14 11h1v1h-1zM0 12h1v1h-1zM14 12h1v1h-1zM0 13h1v1h-1zM14 13h1v1h-1zM0 14h1v1h-1zM5 14h5v1h-5zM14 14h1v1h-1zM0 15h1v1h-1zM5 15h1v1h-1zM9 15h1v1h-1zM14 15h1v1h-1zM0 16h1v1h-1zM5 16h1v1h-1zM9 16h1v1h-1zM14 16h1v1h-1zM0 17h1v1h-1zM3 17h3v1h-3zM9 17h3v1h-3zM14 17h1v1h-1zM0 18h1v1h-1zM4 18h1v1h-1zM10 18h1v1h-1zM14 18h1v1h-1zM0 19h1v1h-1zM5 19h1v1h-1zM9 19h1v1h-1zM14 19h1v1h-1zM0 20h1v1h-1zM6 20h1v1h-1zM8 20h1v1h-1zM14 20h1v1h-1zM0 21h1v1h-1zM7 21h1v1h-1zM14 21h1v1h-1zM0 22h1v1h-1zM14 22h1v1h-1zM1 23h1v1h-1zM13 23h1v1h-1zM2 24h11v1h-11z"
-}, u = {
+}, f = {
 	w: 11,
 	h: 12,
 	d: "M1 0h9v1h-9zM0 1h1v1h-1zM10 1h1v1h-1zM0 2h1v1h-1zM10 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM2 9h1v1h-1zM8 9h1v1h-1zM3 10h1v1h-1zM7 10h1v1h-1zM4 11h3v1h-3z"
-}, d = {
+}, p = {
 	w: 11,
 	h: 12,
 	d: "M1 0h9v1h-9zM0 1h11v1h-11zM0 2h11v1h-11zM0 3h11v1h-11zM0 4h11v1h-11zM0 5h11v1h-11zM0 6h11v1h-11zM0 7h11v1h-11zM1 8h9v1h-9zM2 9h7v1h-7zM3 10h5v1h-5zM4 11h3v1h-3z"
-}, f = {
+}, m = {
 	w: 15,
 	h: 25,
 	d: "M7 3h1v1h-1zM6 4h3v1h-3zM5 5h5v1h-5zM4 6h7v1h-7zM3 7h9v1h-9zM5 8h5v1h-5zM5 9h5v1h-5zM5 10h5v1h-5z"
-}, p = {
+}, h = {
 	w: 15,
 	h: 25,
 	d: "M5 14h5v1h-5zM5 15h5v1h-5zM5 16h5v1h-5zM3 17h9v1h-9zM4 18h7v1h-7zM5 19h5v1h-5zM6 20h3v1h-3zM7 21h1v1h-1z"
-}, m = {
+}, g = {
 	w: 16,
 	h: 16,
 	d: "M7 3h2v1h-2zM6 4h1v1h-1zM9 4h1v1h-1zM5 5h1v1h-1zM10 5h1v1h-1zM4 6h1v1h-1zM11 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM2 8h4v1h-4zM10 8h4v1h-4zM5 9h1v1h-1zM10 9h1v1h-1zM5 10h1v1h-1zM10 10h1v1h-1zM5 11h1v1h-1zM10 11h1v1h-1zM5 12h6v1h-6z"
-}, h = {
+}, _ = {
 	w: 16,
 	h: 16,
 	d: "M7 3h2v1h-2zM6 4h4v1h-4zM5 5h6v1h-6zM4 6h8v1h-8zM3 7h10v1h-10zM2 8h12v1h-12zM5 9h6v1h-6zM5 10h6v1h-6zM5 11h6v1h-6zM5 12h6v1h-6z"
-}, g = {
+}, v = {
 	w: 16,
 	h: 16,
 	d: "M5 3h6v1h-6zM5 4h1v1h-1zM10 4h1v1h-1zM5 5h1v1h-1zM10 5h1v1h-1zM5 6h1v1h-1zM10 6h1v1h-1zM2 7h4v1h-4zM10 7h4v1h-4zM3 8h1v1h-1zM12 8h1v1h-1zM4 9h1v1h-1zM11 9h1v1h-1zM5 10h1v1h-1zM10 10h1v1h-1zM6 11h1v1h-1zM9 11h1v1h-1zM7 12h2v1h-2z"
-}, _ = {
+}, y = {
 	w: 16,
 	h: 16,
 	d: "M5 3h6v1h-6zM5 4h6v1h-6zM5 5h6v1h-6zM5 6h6v1h-6zM2 7h12v1h-12zM3 8h10v1h-10zM4 9h8v1h-8zM5 10h6v1h-6zM6 11h4v1h-4zM7 12h2v1h-2z"
-}, v = {
+}, b = {
 	w: 16,
 	h: 16,
 	d: "M8 2h1v1h-1zM7 3h2v1h-2zM6 4h1v1h-1zM8 4h1v1h-1zM5 5h1v1h-1zM8 5h5v1h-5zM4 6h1v1h-1zM12 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM3 8h1v1h-1zM12 8h1v1h-1zM4 9h1v1h-1zM12 9h1v1h-1zM5 10h1v1h-1zM8 10h5v1h-5zM6 11h1v1h-1zM8 11h1v1h-1zM7 12h2v1h-2zM8 13h1v1h-1z"
-}, y = {
+}, x = {
 	w: 16,
 	h: 16,
 	d: "M8 2h1v1h-1zM7 3h2v1h-2zM6 4h3v1h-3zM5 5h8v1h-8zM4 6h9v1h-9zM3 7h10v1h-10zM3 8h10v1h-10zM4 9h9v1h-9zM5 10h8v1h-8zM6 11h3v1h-3zM7 12h2v1h-2zM8 13h1v1h-1z"
-}, b = {
+}, S = {
 	w: 16,
 	h: 16,
 	d: "M7 2h1v1h-1zM7 3h2v1h-2zM7 4h1v1h-1zM9 4h1v1h-1zM3 5h5v1h-5zM10 5h1v1h-1zM3 6h1v1h-1zM11 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM3 8h1v1h-1zM12 8h1v1h-1zM3 9h1v1h-1zM11 9h1v1h-1zM3 10h5v1h-5zM10 10h1v1h-1zM7 11h1v1h-1zM9 11h1v1h-1zM7 12h2v1h-2zM7 13h1v1h-1z"
-}, x = {
+}, C = {
 	w: 16,
 	h: 16,
 	d: "M7 2h1v1h-1zM7 3h2v1h-2zM7 4h3v1h-3zM3 5h8v1h-8zM3 6h9v1h-9zM3 7h10v1h-10zM3 8h10v1h-10zM3 9h9v1h-9zM3 10h8v1h-8zM7 11h3v1h-3zM7 12h2v1h-2zM7 13h1v1h-1z"
 };
-function S(t, n) {
+function w(t, n) {
 	return e`<svg
     class=${n}
     viewBox="0 0 ${t.w} ${t.h}"
@@ -97,4 +105,4 @@ function S(t, n) {
   </svg>`;
 }
 //#endregion
-export { s as CARET_DOWN, c as CARET_UP, t as CHECKBOX_X, o as CHECKMARK, a as RADIO_DOT, n as RADIO_FACE, r as RADIO_RING, i as RADIO_RING_PRESSED, g as SCROLL_ARROW_DOWN, _ as SCROLL_ARROW_DOWN_FILL, v as SCROLL_ARROW_LEFT, y as SCROLL_ARROW_LEFT_FILL, b as SCROLL_ARROW_RIGHT, x as SCROLL_ARROW_RIGHT_FILL, m as SCROLL_ARROW_UP, h as SCROLL_ARROW_UP_FILL, u as SLIDER_THUMB, d as SLIDER_THUMB_FACE, l as STEPPER, p as STEPPER_DOWN_FILL, f as STEPPER_UP_FILL, S as glyphSvg };
+export { s as CARET_DOWN, l as CARET_DOWN_SMALL, c as CARET_UP, u as CARET_UP_SMALL, t as CHECKBOX_X, o as CHECKMARK, a as RADIO_DOT, n as RADIO_FACE, r as RADIO_RING, i as RADIO_RING_PRESSED, v as SCROLL_ARROW_DOWN, y as SCROLL_ARROW_DOWN_FILL, b as SCROLL_ARROW_LEFT, x as SCROLL_ARROW_LEFT_FILL, S as SCROLL_ARROW_RIGHT, C as SCROLL_ARROW_RIGHT_FILL, g as SCROLL_ARROW_UP, _ as SCROLL_ARROW_UP_FILL, f as SLIDER_THUMB, p as SLIDER_THUMB_FACE, d as STEPPER, h as STEPPER_DOWN_FILL, m as STEPPER_UP_FILL, w as glyphSvg };

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { VfTextField } from './components/vf-text-field.js';
 export { VfTextArea } from './components/vf-text-area.js';
 export { VfNumberField } from './components/vf-number-field.js';
 export { VfSelect } from './components/vf-select.js';
+export type { VfSelectSize } from './components/vf-select.js';
 export { VfOption } from './components/vf-option.js';
 export { VfProgressBar } from './components/vf-progress-bar.js';
 export { VfSlider } from './components/vf-slider.js';
@@ -125,7 +126,7 @@ export type { Pattern, PatternMotif, PatternName } from './patterns.js';
 export { PatternFillController, vfPatternFill } from './pattern-fill.js';
 export type { PatternFillOptions } from './pattern-fill.js';
 /** Glyph sprites (`glyphSvg(CHECKMARK, 'check')`) and their pixel geometry. */
-export { glyphSvg, CHECKBOX_X, RADIO_FACE, RADIO_RING, RADIO_RING_PRESSED, RADIO_DOT, CHECKMARK, CARET_DOWN, STEPPER, STEPPER_UP_FILL, STEPPER_DOWN_FILL, SLIDER_THUMB, SLIDER_THUMB_FACE, } from './glyphs.js';
+export { glyphSvg, CHECKBOX_X, RADIO_FACE, RADIO_RING, RADIO_RING_PRESSED, RADIO_DOT, CHECKMARK, CARET_DOWN, CARET_DOWN_SMALL, STEPPER, STEPPER_UP_FILL, STEPPER_DOWN_FILL, SLIDER_THUMB, SLIDER_THUMB_FACE, } from './glyphs.js';
 export type { Glyph } from './glyphs.js';
 /** Pixel-stepped corner profiles and the clip-paths traced from them. */
 export { steppedRectClip, steppedRingClip, steppedCornerClip, BUTTON_FRAME, BUTTON_FACE, RING_FRAME, RING_HOLE, RING_INSET, SCREEN_CORNER, } from './pixel-frame.js';

package/dist/index.js

@@ -32,44 +32,44 @@ 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, WALK_BEAT_MS as Ue, WALK_STEP_MS as We, WALK_STEP_PX as Ge, prefersReducedMotion as Ke, runOutlineTravel as qe, runSelectionBlink as Je } from "./motion.js";
-import { CARET_DOWN as Ye, CHECKBOX_X as Xe, CHECKMARK as Ze, RADIO_DOT as Qe, RADIO_FACE as $e, RADIO_RING as et, RADIO_RING_PRESSED as tt, SLIDER_THUMB as nt, SLIDER_THUMB_FACE as rt, STEPPER as it, STEPPER_DOWN_FILL as at, STEPPER_UP_FILL as ot, glyphSvg as st } from "./glyphs.js";
-import { ScrollRailController as ct, renderScrollRail as lt } from "./scroll-rail.js";
-import { VfScrollArea as ut } from "./components/vf-scroll-area.js";
-import { VfWindow as dt } from "./components/vf-window.js";
-import { VfModalDialog as ft, modalDialogStyles as pt } from "./modal-dialog.js";
-import { VfDialog as mt } from "./components/vf-dialog.js";
-import { VfSeparator as ht } from "./components/vf-separator.js";
-import { VfFormControl as gt } from "./form-control.js";
-import { VfButton as _t } from "./components/vf-button.js";
-import { VfButtonGroup as vt } from "./components/vf-button-group.js";
-import { VfSwatch as yt } from "./components/vf-swatch.js";
-import { VfToggleControl as bt } from "./toggle-control.js";
-import { VfCheckbox as xt } from "./components/vf-checkbox.js";
-import { VfRadio as St } from "./components/vf-radio.js";
-import { VfRadioGroup as Ct } from "./components/vf-radio-group.js";
-import { FocusRuleController as wt, focusModality as Tt, trackFocusModality as Et } from "./focus-modality.js";
-import { VfTextControlBase as Dt } from "./text-control.js";
-import { VfTextField as Ot } from "./components/vf-text-field.js";
-import { VfTextArea as kt } from "./components/vf-text-area.js";
-import { VfNumberField as At } from "./components/vf-number-field.js";
-import { VfOption as jt } from "./components/vf-option.js";
-import { VfSelect as Mt } from "./components/vf-select.js";
-import { VfProgressBar as Nt } from "./components/vf-progress-bar.js";
-import { VfSlider as Pt } from "./components/vf-slider.js";
-import { VfLabel as Ft } from "./components/vf-label.js";
-import { VfParagraph as It } from "./components/vf-paragraph.js";
-import { VfImg as Lt } from "./components/vf-img.js";
-import { VfIcon as Rt } from "./components/vf-icon.js";
-import { VfIconField as zt } from "./components/vf-icon-field.js";
-import { VfMenuBar as Bt } from "./components/vf-menu-bar.js";
-import { VfMenu as Vt } from "./components/vf-menu.js";
-import { VfMenuItem as Ht } from "./components/vf-menu-item.js";
-import { VfList as Ut } from "./components/vf-list.js";
-import { VfListItem as Wt } from "./components/vf-list-item.js";
-import { VfFieldset as Gt } from "./components/vf-fieldset.js";
-import { VfGrid as Kt } from "./components/vf-grid.js";
-import { VfStack as qt } from "./components/vf-stack.js";
-import { VfContainer as Jt } from "./components/vf-container.js";
-import { CURSOR_ARROW as Yt, CURSOR_CROSSHAIR as Xt, CURSOR_I_BEAM as Zt, CURSOR_WAIT as Qt } from "./cursor-art.js";
-import { applyCursor as $t } from "./cursor.js";
-export { ze as BLINK_FLIPS, Be as BLINK_INTERVAL_MS, Ee as BUTTON_FACE, De as BUTTON_FRAME, Ye as CARET_DOWN, Xe as CHECKBOX_X, Ze as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, Yt as CURSOR_ARROW, Xt as CURSOR_CROSSHAIR, Zt as CURSOR_I_BEAM, Qt as CURSOR_WAIT, Te as DocumentListenersController, Le as DragController, wt 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, Qe as RADIO_DOT, $e as RADIO_FACE, et as RADIO_RING, tt 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, nt as SLIDER_THUMB, rt as SLIDER_THUMB_FACE, it as STEPPER, at as STEPPER_DOWN_FILL, ot as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, ct 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, _t as VfButton, vt as VfButtonGroup, xt as VfCheckbox, Jt as VfContainer, Fe as VfDesktop, mt as VfDialog, Gt as VfFieldset, gt as VfFormControl, Kt as VfGrid, Rt as VfIcon, zt as VfIconField, Lt as VfImg, Ft as VfLabel, Ut as VfList, Wt as VfListItem, Vt as VfMenu, Bt as VfMenuBar, Ht as VfMenuItem, ft as VfModalDialog, At as VfNumberField, jt as VfOption, It as VfParagraph, E as VfPositioned, Nt as VfProgressBar, St as VfRadio, Ct as VfRadioGroup, ut as VfScrollArea, Mt as VfSelect, ht as VfSeparator, Ie as VfSized, Pt as VfSlider, qt as VfStack, yt as VfSwatch, kt as VfTextArea, Dt as VfTextControlBase, Ot as VfTextField, bt as VfToggleControl, dt as VfWindow, Ue as WALK_BEAT_MS, We as WALK_STEP_MS, Ge as WALK_STEP_PX, $t as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, Tt as focusModality, m as getScale, s as getZoom, st as glyphSvg, pt 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, Ke as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, lt as renderScrollRail, we as requestGridSnap, l as resetZoomBaseline, oe as ruleClasses, qe as runOutlineTravel, Je 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, Et 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 };
+import { CARET_DOWN as Ye, CARET_DOWN_SMALL as Xe, CHECKBOX_X as Ze, CHECKMARK as Qe, RADIO_DOT as $e, RADIO_FACE as et, RADIO_RING as tt, RADIO_RING_PRESSED as nt, SLIDER_THUMB as rt, SLIDER_THUMB_FACE as it, STEPPER as at, STEPPER_DOWN_FILL as ot, STEPPER_UP_FILL as st, glyphSvg as ct } from "./glyphs.js";
+import { ScrollRailController as lt, renderScrollRail as ut } from "./scroll-rail.js";
+import { VfScrollArea as dt } from "./components/vf-scroll-area.js";
+import { VfWindow as ft } from "./components/vf-window.js";
+import { VfModalDialog as pt, modalDialogStyles as mt } from "./modal-dialog.js";
+import { VfDialog as ht } from "./components/vf-dialog.js";
+import { VfSeparator as gt } from "./components/vf-separator.js";
+import { VfFormControl as _t } from "./form-control.js";
+import { VfButton as vt } from "./components/vf-button.js";
+import { VfButtonGroup as yt } from "./components/vf-button-group.js";
+import { VfSwatch as bt } from "./components/vf-swatch.js";
+import { VfToggleControl as xt } from "./toggle-control.js";
+import { VfCheckbox as St } from "./components/vf-checkbox.js";
+import { VfRadio as Ct } from "./components/vf-radio.js";
+import { VfRadioGroup as wt } from "./components/vf-radio-group.js";
+import { FocusRuleController as Tt, focusModality as Et, trackFocusModality as Dt } from "./focus-modality.js";
+import { VfTextControlBase as Ot } from "./text-control.js";
+import { VfTextField as kt } from "./components/vf-text-field.js";
+import { VfTextArea as At } from "./components/vf-text-area.js";
+import { VfNumberField as jt } from "./components/vf-number-field.js";
+import { VfOption as Mt } from "./components/vf-option.js";
+import { VfSelect as Nt } from "./components/vf-select.js";
+import { VfProgressBar as Pt } from "./components/vf-progress-bar.js";
+import { VfSlider as Ft } from "./components/vf-slider.js";
+import { VfLabel as It } from "./components/vf-label.js";
+import { VfParagraph as Lt } from "./components/vf-paragraph.js";
+import { VfImg as Rt } from "./components/vf-img.js";
+import { VfIcon as zt } from "./components/vf-icon.js";
+import { VfIconField as Bt } from "./components/vf-icon-field.js";
+import { VfMenuBar as Vt } from "./components/vf-menu-bar.js";
+import { VfMenu as Ht } from "./components/vf-menu.js";
+import { VfMenuItem as Ut } from "./components/vf-menu-item.js";
+import { VfList as Wt } from "./components/vf-list.js";
+import { VfListItem as Gt } from "./components/vf-list-item.js";
+import { VfFieldset as Kt } from "./components/vf-fieldset.js";
+import { VfGrid as qt } from "./components/vf-grid.js";
+import { VfStack as Jt } from "./components/vf-stack.js";
+import { VfContainer as Yt } from "./components/vf-container.js";
+import { CURSOR_ARROW as Xt, CURSOR_CROSSHAIR as Zt, CURSOR_I_BEAM as Qt, CURSOR_WAIT as $t } from "./cursor-art.js";
+import { applyCursor as en } from "./cursor.js";
+export { ze as BLINK_FLIPS, Be as BLINK_INTERVAL_MS, Ee as BUTTON_FACE, De as BUTTON_FRAME, Ye as CARET_DOWN, Xe as CARET_DOWN_SMALL, Ze as CHECKBOX_X, Qe as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, Xt as CURSOR_ARROW, Zt as CURSOR_CROSSHAIR, Qt as CURSOR_I_BEAM, $t as CURSOR_WAIT, Te as DocumentListenersController, Le as DragController, Tt 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, $e as RADIO_DOT, et as RADIO_FACE, tt as RADIO_RING, nt 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, rt as SLIDER_THUMB, it as SLIDER_THUMB_FACE, at as STEPPER, ot as STEPPER_DOWN_FILL, st as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, lt 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, vt as VfButton, yt as VfButtonGroup, St as VfCheckbox, Yt as VfContainer, Fe as VfDesktop, ht as VfDialog, Kt as VfFieldset, _t as VfFormControl, qt as VfGrid, zt as VfIcon, Bt as VfIconField, Rt as VfImg, It as VfLabel, Wt as VfList, Gt as VfListItem, Ht as VfMenu, Vt as VfMenuBar, Ut as VfMenuItem, pt as VfModalDialog, jt as VfNumberField, Mt as VfOption, Lt as VfParagraph, E as VfPositioned, Pt as VfProgressBar, Ct as VfRadio, wt as VfRadioGroup, dt as VfScrollArea, Nt as VfSelect, gt as VfSeparator, Ie as VfSized, Ft as VfSlider, Jt as VfStack, bt as VfSwatch, At as VfTextArea, Ot as VfTextControlBase, kt as VfTextField, xt as VfToggleControl, ft as VfWindow, Ue as WALK_BEAT_MS, We as WALK_STEP_MS, Ge as WALK_STEP_PX, en as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, Et as focusModality, m as getScale, s as getZoom, ct as glyphSvg, mt 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, Ke as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, ut as renderScrollRail, we as requestGridSnap, l as resetZoomBaseline, oe as ruleClasses, qe as runOutlineTravel, Je 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, Dt 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/pixel-frame.d.ts

@@ -69,7 +69,8 @@ export declare const RING_INSET = 4;
 /**
  * The screen-corner mask: per-row width (system px) of the black staircase a
  * compact Mac's ROM painted over the rounded corners of its CRT — what makes
- * the System 7 menu bar's top corners read as rounded. Traced from a 1x
+ * the System 7 menu bar's top corners read as rounded, and what a bezeled
+ * `vf-desktop` paints on all four screen corners. Traced from a 1x
  * screen capture (5×5 corner crop): y0 run 5, y1 3, y2 2, y3–y4 1. The same
  * radius-5 staircase as {@link RING_FRAME}'s corner — QuickDraw had one
  * vocabulary for round corners — but the opposite *object*: this is the ink
@@ -80,14 +81,15 @@ export declare const SCREEN_CORNER: readonly number[];
 /** Compile a profile into a stepped `polygon()` clip-path value. */
 export declare const steppedRectClip: (p: SteppedProfile) => string;
 /**
- * Compile a corner-mask run list into the ink polygon for one *top* corner —
- * the corner box minus the rounded silhouette, i.e. the region the screen
- * mask blacked out. Runs are the mask's per-row width, topmost first; `side`
- * mirrors the staircase (via `100% - …`) for the top-right corner. Clip an
- * element `runs[0]` wide × `runs.length` tall (system px), anchored into its
- * corner, and let its `background` supply the ink.
+ * Compile a corner-mask run list into the ink polygon for one corner — the
+ * corner box minus the rounded silhouette, i.e. the region the screen mask
+ * blacked out. Runs are the mask's per-row width, the row on the box's edge
+ * first; `side` mirrors the staircase (via `100% - …`) for a right corner,
+ * `edge` for a bottom one. Clip an element `runs[0]` wide × `runs.length`
+ * tall (system px), anchored into its corner, and let its `background`
+ * supply the ink.
  */
-export declare const steppedCornerClip: (runs: readonly number[], side: "left" | "right") => string;
+export declare const steppedCornerClip: (runs: readonly number[], side: "left" | "right", edge?: "top" | "bottom") => string;
 /**
  * Compile an outer profile and a hole profile into a ring (a stepped donut).
  *

package/dist/pixel-frame.js

@@ -55,13 +55,13 @@ var e = {
 	for (let e of n) i.push(`${o(e.from)} ${s(e.y)}`, `${o(e.to)} ${s(e.y)}`);
 	for (let e of r) i.push(`${o(e.to)} ${o(e.y)}`, `${o(e.from)} ${o(e.y)}`);
 	return i;
-}, u = (e) => `polygon(${l(e).join(", ")})`, d = (e, t) => {
-	let n = t === "left" ? o : s, r = e[0] ?? 0, i = [`${n(0)} ${o(0)}`, `${n(r)} ${o(0)}`];
+}, u = (e) => `polygon(${l(e).join(", ")})`, d = (e, t, n = "top") => {
+	let r = t === "left" ? o : s, i = n === "top" ? o : s, a = e[0] ?? 0, c = [`${r(0)} ${i(0)}`, `${r(a)} ${i(0)}`];
 	for (let t = 1; t <= e.length; t++) {
-		let a = e[t] ?? 0;
-		a !== r && (i.push(`${n(r)} ${o(t)}`, `${n(a)} ${o(t)}`), r = a);
+		let n = e[t] ?? 0;
+		n !== a && (c.push(`${r(a)} ${i(t)}`, `${r(n)} ${i(t)}`), a = n);
 	}
-	return `polygon(${i.join(", ")})`;
+	return `polygon(${c.join(", ")})`;
 }, f = (e, t) => {
 	let n = l(e), r = l(t), i = `50% ${o(e.start)}`, a = `50% ${o(t.start)}`, s = [...n.slice(1), n[0]], c = [r[0], ...r.slice(1).reverse()];
 	return `polygon(evenodd, ${[