vintage-frames 0.13.0 → 0.14.1

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

@@ -10,53 +10,53 @@ import { SCREEN_CORNER as c, steppedCornerClip as l } from "../pixel-frame.js";
 import { TypeAheadBuffer as u } from "../type-ahead.js";
 import { MenuPressController as d } from "../menu-press.js";
 import { LitElement as f, css as p, html as m, unsafeCSS as h } from "lit";
-import { property as g, queryAssignedElements as _ } from "lit/decorators.js";
+import { property as g, queryAssignedElements as _, state as v } from "lit/decorators.js";
 //#region src/components/vf-menu-bar.ts
-var v = class extends r(f) {
+var y = class extends r(f) {
 	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new o(this), this.label = "", this.rounded = !1, this.shortcuts = !1, this.#e = null, this.#t = this.attachInternals(), this.#n = new u(), this.#r = null, this.#i = new s(this, () => [[
+		super(...e), this.scale = new t(this), this.gridSnap = new o(this), this.label = "", this.rounded = !1, this.shortcuts = !1, this._hasEnd = !1, this.#e = null, this.#t = this.attachInternals(), this.#n = new u(), this.#r = null, this.#i = new s(this, () => [[
 			document,
 			"pointerdown",
-			this.#h,
+			this.#g,
 			!0
 		], [
 			document,
 			"keydown",
-			this.#g,
+			this.#_,
 			!0
 		]]), this.#a = new d(this, {
 			menus: () => this._menus,
-			open: (e) => this.#p(e),
-			close: () => this.#m()
+			open: (e) => this.#m(e),
+			close: () => this.#h()
 		}), this.#o = (e) => {
 			if (!this.#e) return;
 			let t = e.relatedTarget;
-			t instanceof Node && (this.contains(t) || this.renderRoot.contains(t)) || this.#m();
-		}, this.#u = (e) => {
-			let t = e.detail;
-			e.preventDefault(), e.stopPropagation(), t.menu.open ? this.#m() : this.#p(t.menu);
+			t instanceof Node && (this.contains(t) || this.renderRoot.contains(t)) || this.#h();
 		}, this.#d = (e) => {
 			let t = e.detail;
-			this.#e && t.menu !== this.#e && this.#p(t.menu);
-		}, this.#f = () => {
-			this.#e?.focus(), this.#m();
-		}, this.#h = (e) => {
-			e.composedPath().includes(this) || this.#m();
+			e.preventDefault(), e.stopPropagation(), t.menu.open ? this.#h() : this.#m(t.menu);
+		}, this.#f = (e) => {
+			let t = e.detail;
+			this.#e && t.menu !== this.#e && this.#m(t.menu);
+		}, this.#p = () => {
+			this.#e?.focus(), this.#h();
 		}, this.#g = (e) => {
+			e.composedPath().includes(this) || this.#h();
+		}, this.#_ = (e) => {
 			if (!(e.defaultPrevented || !this.#e)) switch (e.key) {
 				case "Escape":
-					e.preventDefault(), this.#e.focus(), this.#m();
+					e.preventDefault(), this.#e.focus(), this.#h();
 					break;
 				case "Tab":
-					this.#m();
+					this.#h();
 					break;
 				case "ArrowLeft":
 				case "ArrowRight":
-					e.preventDefault(), this.#v(e.key === "ArrowRight" ? 1 : -1);
+					e.preventDefault(), this.#y(e.key === "ArrowRight" ? 1 : -1);
 					break;
 				case "ArrowDown":
 				case "ArrowUp":
-					e.preventDefault(), this.#y(e.key === "ArrowDown" ? 1 : -1);
+					e.preventDefault(), this.#b(e.key === "ArrowDown" ? 1 : -1);
 					break;
 				case "Home":
 				case "End": {
@@ -76,7 +76,7 @@ var v = class extends r(f) {
 					break;
 				}
 			}
-		}, this.#_ = (e) => {
+		}, this.#v = (e) => {
 			if (this.#e) return;
 			let t = this._menus;
 			if (t.length === 0) return;
@@ -98,7 +98,7 @@ var v = class extends r(f) {
 					break;
 				default: return;
 			}
-			e.preventDefault(), i && (this.#l(i), i.focus());
+			e.preventDefault(), i && (this.#u(i), i.focus());
 		};
 	}
 	static {
@@ -141,6 +141,22 @@ var v = class extends r(f) {
       ::slotted(vf-menu) {
         margin-inline-start: calc(var(--vf-scale, 1) * -5px);
       }
+      /* The bar's right end (slot="end"): a clock, say. A row of its own,
+         pushed to the end and held 9px in, mirroring the first title's
+         inset. A caption in it rides the bar's line, so its baseline is the
+         titles'. */
+      slot[name='end'] {
+        display: flex;
+        align-items: stretch;
+        margin-inline-start: auto;
+        padding-inline-end: calc(var(--vf-scale, 1) * 9px);
+        --vf-label-line-height: var(--vf-menubar-height, 20px);
+      }
+      /* Empty, it takes no part in the row: a page that pushes its own item
+         to the end with an auto margin keeps the whole of the slack. */
+      slot[name='end'].empty {
+        display: none;
+      }
       /* rounded: the screen-corner mask. The corners aren't a shape of the
          bar's own — they're the black staircase the ROM painted over the
          CRT's rounded corners, worn by the menu bar because it sat flush with
@@ -178,10 +194,10 @@ var v = class extends r(f) {
 	#i;
 	#a;
 	connectedCallback() {
-		super.connectedCallback(), this.#t.role = "menubar", this.addEventListener("vf-menu-toggle-request", this.#u), this.addEventListener("vf-menu-hover", this.#d), this.addEventListener("vf-menu-close-request", this.#f), this.addEventListener("keydown", this.#_), this.addEventListener("pointerdown", this.#a.onPointerDown), this.addEventListener("focusout", this.#o);
+		super.connectedCallback(), this.#t.role = "menubar", this.addEventListener("vf-menu-toggle-request", this.#d), this.addEventListener("vf-menu-hover", this.#f), this.addEventListener("vf-menu-close-request", this.#p), this.addEventListener("keydown", this.#v), this.addEventListener("pointerdown", this.#a.onPointerDown), this.addEventListener("focusout", this.#o);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("vf-menu-toggle-request", this.#u), this.removeEventListener("vf-menu-hover", this.#d), this.removeEventListener("vf-menu-close-request", this.#f), this.removeEventListener("keydown", this.#_), this.removeEventListener("pointerdown", this.#a.onPointerDown), this.removeEventListener("focusout", this.#o), this.#e = null, this.#r = null;
+		super.disconnectedCallback(), this.removeEventListener("vf-menu-toggle-request", this.#d), this.removeEventListener("vf-menu-hover", this.#f), this.removeEventListener("vf-menu-close-request", this.#p), this.removeEventListener("keydown", this.#v), this.removeEventListener("pointerdown", this.#a.onPointerDown), this.removeEventListener("focusout", this.#o), this.#e = null, this.#r = null;
 	}
 	focus(e) {
 		(this.#e ?? this.#r ?? this._menus[0])?.focus(e);
@@ -193,41 +209,49 @@ var v = class extends r(f) {
 	render() {
 		return m`
       <div class="bar vf-snap vf-rule-bottom" part="bar" role="presentation">
-        <slot @slotchange=${this.#s}></slot>
+        <slot @slotchange=${this.#c}></slot>
+        <slot
+          name="end"
+          class=${this._hasEnd ? "" : "empty"}
+          @slotchange=${this.#s}
+        ></slot>
       </div>
     `;
 	}
-	#s() {
-		this.#e && !this._menus.includes(this.#e) && this.#m(), this.#r && !this._menus.includes(this.#r) && (this.#r = null), this.#c();
+	#s(e) {
+		this._hasEnd = e.target.assignedElements().length > 0;
 	}
 	#c() {
+		this.#e && !this._menus.includes(this.#e) && this.#h(), this.#r && !this._menus.includes(this.#r) && (this.#r = null), this.#l();
+	}
+	#l() {
 		let e = this._menus, t = this.#e ?? this.#r ?? e[0];
 		for (let n of e) n.barTabIndex = n === t ? 0 : -1;
 	}
-	#l(e) {
-		this.#r = e, this.#c();
+	#u(e) {
+		this.#r = e, this.#l();
 	}
-	#u;
 	#d;
 	#f;
-	#p(e) {
+	#p;
+	#m(e) {
 		for (let t of this._menus) t !== e && (t.open = !1);
-		e.open = !0, this.#e = e, this.#r = e, this.#n.reset(), this.#c(), this.#i.attach();
+		e.open = !0, this.#e = e, this.#r = e, this.#n.reset(), this.#l(), this.#i.attach();
 	}
-	#m() {
+	#h() {
 		for (let e of this._menus) e.open = !1;
-		this.#e = null, this.#n.reset(), this.#i.detach(), this.#c();
+		this.#e = null, this.#n.reset(), this.#i.detach(), this.#l();
 	}
-	#h;
 	#g;
 	#_;
-	#v(e) {
+	#v;
+	#y(e) {
 		let t = this._menus;
 		if (!this.#e || t.length === 0) return;
 		let n = t[(t.indexOf(this.#e) + e + t.length) % t.length];
-		n && n !== this.#e && (this.#p(n), n.focus());
+		n && n !== this.#e && (this.#m(n), n.focus());
 	}
-	#y(e) {
+	#b(e) {
 		if (!this.#e) return;
 		let t = this.#e.items;
 		if (t.length === 0) return;
@@ -235,15 +259,15 @@ var v = class extends r(f) {
 		r = n < 0 ? e === 1 ? 0 : t.length - 1 : (n + e + t.length) % t.length, t[r]?.focus();
 	}
 };
-n([g()], v.prototype, "label", void 0), n([g({
+n([g()], y.prototype, "label", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "rounded", void 0), n([g({
+})], y.prototype, "rounded", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "shortcuts", void 0), n([_({
+})], y.prototype, "shortcuts", void 0), n([_({
 	selector: "vf-menu",
 	flatten: !0
-})], v.prototype, "_menus", void 0), v = n([e("vf-menu-bar")], v);
+})], y.prototype, "_menus", void 0), n([v()], y.prototype, "_hasEnd", void 0), y = n([e("vf-menu-bar")], y);
 //#endregion
-export { v as VfMenuBar };
+export { y as VfMenuBar };

package/dist/components/vf-menu.js

@@ -125,22 +125,23 @@ var T = class extends a(_) {
         @media (forced-colors: active) {
           forced-color-adjust: none;
         }
-        background: var(--vf-highlight, #000);
         color: var(--vf-highlight-text, #fff);
-        /* The hilite leaves the bar's top row white: System 7's plate is rows
-           1..18 of the 20px bar (the Label specimen in Menus.png is 18px of
-           plate, and InfiniteMac shows the white row above it). Transparent
-           borders + padding-box clip inset the paint without moving the box:
-           the top row shows the bar's white through, the bottom row the bar's
-           own black rule, and the hit rect stays the full bar height so a
-           click slammed against the screen top still opens the menu. The
-           18px content box centers the 16px em on the same rows as the
-           closed state, so the title never shifts. Declared only while open
-           because forced-colors mode repaints transparent borders CanvasText
-           on closed labels; here forced-color-adjust above already exempts
-           them. */
-        border-block: calc(var(--vf-scale, 1) * 1px) solid transparent;
-        background-clip: padding-box;
+      }
+      /* The hilite leaves the bar's top row white: System 7's plate is rows
+         1..18 of the 20px bar (the Label specimen in Menus.png is 18px of
+         plate, and InfiniteMac shows the white row above it). So the plate is
+         a layer inset a row top and bottom rather than the label's own
+         background: the top row shows the bar's white through, the bottom row
+         the bar's own black rule, and the hit rect stays the full bar height
+         so a click slammed against the screen top still opens the menu. The
+         title doesn't move. The label is positioned (vf-snap), and the title
+         is too, so the plate paints under it in tree order. */
+      :host([open]) .label::before,
+      .label.flash-on::before {
+        content: '';
+        position: absolute;
+        inset: calc(var(--vf-scale, 1) * 1px) 0;
+        background: var(--vf-highlight, #000);
       }
       /* The title rides in its own box so the focus rule spans the title and
          not the bar cell's 10px padding — the same reason vf-button wraps its
@@ -198,13 +199,14 @@ var T = class extends a(_) {
            from. (The nowrap rows make min-content the widest row, so the
            shrink-to-fit abspos width IS the MDEF width.) */
         min-width: 100%;
-        /* No vertical inset: every panel in Menus.png — both pulldowns, the
-           open popup and the closed pill — puts its first row's ink at +4 from
-           the border box, which is the 1px border plus the row's own 3px ✓
-           bias. The bottom border likewise sits immediately after the last row.
-           A 2px inset here displaced every row by 2px against the art; it was
-           invisible while the rows themselves were 6px too tall. */
-        padding: 0;
+        /* No inset of its own beyond the frame, whose 1px stroke is the
+           panel's padding (vfPanel): every panel in Menus.png — both
+           pulldowns, the open popup and the closed pill — puts its first
+           row's ink at +4 from the border box, which is the 1px frame plus
+           the row's own 3px ✓ bias. The bottom line likewise sits
+           immediately after the last row. A 2px inset here displaced every
+           row by 2px against the art; it was invisible while the rows
+           themselves were 6px too tall. */
         z-index: 1000;
         /* As on the title: the held press, not the browser, owns touch moves
            over the dropped panel. */

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

@@ -3,16 +3,17 @@ import { vfElement as t } from "../define.js";
 import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { VfPositioned as r } from "../position.js";
 import { vfBase as i } from "../styles/recipes/host.js";
-import { vfField as a } from "../styles/recipes/field.js";
-import { STEPPER as o, STEPPER_DOWN_FILL as s, STEPPER_UP_FILL as c } from "../glyphs.js";
-import { VfTextControlBase as l } from "../text-control.js";
-import { decimalsOf as u } from "../number.js";
-import { css as d, html as f, nothing as p } from "lit";
-import { property as m, query as h, state as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-import { live as v } from "lit/directives/live.js";
+import { vfStrokeInset as a } from "../styles/recipes/stroke.js";
+import { vfField as o } from "../styles/recipes/field.js";
+import { STEPPER as s, STEPPER_DOWN_FILL as c, STEPPER_UP_FILL as l } from "../glyphs.js";
+import { VfTextControlBase as u } from "../text-control.js";
+import { decimalsOf as d } from "../number.js";
+import { css as f, html as p, nothing as m } from "lit";
+import { property as h, query as g, state as _ } from "lit/decorators.js";
+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 y = class extends r(l) {
+var b = class extends r(u) {
 	constructor(...t) {
 		super(...t), this.step = 1, this.pressed = null, this.#l = (e) => {
 			if (this.isDisabled || this.readonly) return;
@@ -48,14 +49,14 @@ var y = class extends r(l) {
 			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(u(this.step)))), this.#o("vf-change"), e(this, "change");
+			this.value = Number.isNaN(r) ? n : String(Number(this.#r(r).toFixed(d(this.step)))), this.#o("vf-change"), e(this, "change");
 		};
 	}
 	static {
 		this.styles = [
 			i,
-			a,
-			d`
+			o,
+			f`
       :host {
         display: inline-flex;
         /* NOT stretch: that sized the well to the stepper's 25px, making this
@@ -82,7 +83,7 @@ var y = class extends r(l) {
            (1 above / 2 below) — optically centered, still on the device grid. */
         margin-top: calc(var(--vf-scale, 1) * 1px);
       }
-      input {
+      input.vf-field {
         flex: 1 1 auto;
         width: var(--vf-number-field-width, 4em);
         min-width: 2em;
@@ -94,7 +95,8 @@ var y = class extends r(l) {
            fills it, and a user stylesheet raising line-height grows the well
            instead of clipping the digits. */
         min-height: calc(var(--vf-scale, 1) * var(--vf-control-height, 22px));
-        padding: 0 calc(var(--vf-scale, 1) * 6px);
+        /* The 6px text inset, inside the well's stroke (vfField). */
+        padding: ${a(0)} ${a(6)};
         text-align: right;
       }
 
@@ -152,7 +154,7 @@ var y = class extends r(l) {
 		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(u(this.step))));
+		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"));
 	}
 	#a(e) {
@@ -181,7 +183,7 @@ var y = class extends r(l) {
 	#p;
 	render() {
 		let e = this.isDisabled, t = this.#n();
-		return f`
+		return p`
       <div class=${this.wellClass}>
         <input
           part="input"
@@ -194,14 +196,14 @@ var y = class extends r(l) {
           maxlength=${this.forwardedAttr("maxlength")}
           spellcheck=${this.forwardedAttr("spellcheck")}
           autocapitalize=${this.forwardedAttr("autocapitalize")}
-          aria-label=${this.label || this.hostLabel || p}
+          aria-label=${this.label || this.hostLabel || m}
           aria-describedby=${this.describedBy}
-          aria-required=${this.required ? "true" : p}
-          aria-invalid=${this.validity.valid ? p : "true"}
-          aria-valuenow=${Number.isNaN(t) ? p : t}
-          aria-valuemin=${this.min ?? p}
-          aria-valuemax=${this.max ?? p}
-          .value=${v(this.value)}
+          aria-required=${this.required ? "true" : m}
+          aria-invalid=${this.validity.valid ? m : "true"}
+          aria-valuenow=${Number.isNaN(t) ? m : t}
+          aria-valuemin=${this.min ?? m}
+          aria-valuemax=${this.max ?? m}
+          .value=${y(this.value)}
           placeholder=${this.placeholder}
           ?disabled=${e}
           ?readonly=${this.readonly}
@@ -212,15 +214,15 @@ var y = class extends r(l) {
       </div>
       <span class="stepper vf-snap" part="stepper">
         <svg viewBox="0 0 15 25" shape-rendering="crispEdges" fill="currentColor" aria-hidden="true">
-          <path d=${o.d}></path>
-          <path class=${_({
+          <path d=${s.d}></path>
+          <path class=${v({
 			fill: !0,
 			on: this.pressed === "up"
-		})} d=${c.d}></path>
-          <path class=${_({
+		})} d=${l.d}></path>
+          <path class=${v({
 			fill: !0,
 			on: this.pressed === "down"
-		})} d=${s.d}></path>
+		})} d=${c.d}></path>
         </svg>
         <span
           class="hit up"
@@ -243,6 +245,6 @@ var y = class extends r(l) {
     `;
 	}
 };
-n([m({ type: Number })], y.prototype, "min", void 0), n([m({ type: Number })], y.prototype, "max", void 0), n([m({ type: Number })], y.prototype, "step", void 0), n([g()], y.prototype, "pressed", void 0), n([h("input")], y.prototype, "input", void 0), y = n([t("vf-number-field")], y);
+n([h({ type: Number })], b.prototype, "min", void 0), n([h({ type: Number })], b.prototype, "max", void 0), n([h({ type: Number })], b.prototype, "step", void 0), n([_()], b.prototype, "pressed", void 0), n([g("input")], b.prototype, "input", void 0), b = n([t("vf-number-field")], b);
 //#endregion
-export { y as VfNumberField };
+export { b as VfNumberField };

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

@@ -5,12 +5,13 @@ import { VfPositioned as a } from "../position.js";
 import { vfBase as o } from "../styles/recipes/host.js";
 import { tileImage as s, tileRects as c, tileSpan as l, vfTileMaskSize as u } from "../styles/recipes/tile.js";
 import { RepeatTileController as d, patternOverride as f, tileGrid as p, vfRepeatTileSize as m, vfTileGrid as h } from "../tile-grid.js";
-import { GridSnapController as g } from "../grid-snap.js";
-import { TrackWidthController as _ } from "../track-width.js";
-import { LitElement as v, css as y, html as b, unsafeCSS as x } from "lit";
-import { property as S, query as C } from "lit/decorators.js";
+import { vfStrokeDecls as g } from "../styles/recipes/stroke.js";
+import { GridSnapController as _ } from "../grid-snap.js";
+import { TrackWidthController as v } from "../track-width.js";
+import { LitElement as y, css as b, html as x, unsafeCSS as S } from "lit";
+import { property as C, query as w } from "lit/decorators.js";
 //#region src/components/vf-progress-bar.ts
-var w = 12, T = [
+var T = 12, E = [
 	[
 		0,
 		0,
@@ -113,16 +114,16 @@ var w = 12, T = [
 		1,
 		1
 	]
-], E = {
-	width: w,
-	height: w,
-	rects: T
-}, D = s(w, w, c(T)), O = l(w), k = class extends a(v) {
+], D = {
+	width: T,
+	height: T,
+	rects: E
+}, O = s(T, T, c(E)), k = l(T), A = class extends a(y) {
 	static {
 		this.styles = [
 			o,
 			h,
-			y`
+			b`
       :host {
         display: block;
         height: calc(var(--vf-scale, 1) * 14px);
@@ -131,22 +132,20 @@ var w = 12, T = [
         position: relative;
         height: 100%;
         background: var(--vf-progress-track, #ffffff);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         border-radius: 0;
         overflow: hidden;
+        ${g()}
       }
       .fill {
         height: 100%;
         background: var(--vf-progress-fill, #000000);
-        /* The classic 1px black leading edge. */
-        border-right: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
       }
-      .fill.empty {
-        border-right: none;
+      /* The classic 1px black leading edge, on a fill with any width. */
+      .fill:not(.empty):not(.stripes) {
+        ${g({ edges: ["right"] })}
       }
       .fill.stripes {
         width: 100%;
-        border-right: none;
         /* Chunky 45° barber stripes: a 12×12 system-px cell whose two black
            \ bands are a staircase of axis-aligned 1px rects (genuine pixel
            art — a *diagonal* edge would blur where these stay pixel-exact)
@@ -157,7 +156,7 @@ var w = 12, T = [
            strip's containing block and its clip. */
         position: relative;
         background-color: var(--vf-white, #fff);
-        --_vf-tile-image: var(--vf-progress-stripes, ${x(D)});
+        --_vf-tile-image: var(--vf-progress-stripes, ${S(O)});
       }
       /* The animated strip: the fill's width plus one 12px cell, resting
          that cell to the left (fully covering the fill), and each cycle
@@ -201,8 +200,8 @@ var w = 12, T = [
         }
         .fill.stripes {
           background-color: var(--vf-progress-fill, CanvasText);
-          mask-image: var(--vf-progress-stripes, ${x(D)});
-          ${u(w)}
+          mask-image: var(--vf-progress-stripes, ${S(O)});
+          ${u(T)}
           animation: vf-barber-mask 0.4s steps(4, end) infinite;
         }
         .fill.stripes .vf-tile-strip {
@@ -229,9 +228,9 @@ var w = 12, T = [
 	#e;
 	#t;
 	constructor() {
-		super(), this.scale = new t(this), this.gridSnap = new g(this), this.value = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.trackSize = new _(this, () => this.track), this._pattern = "", this.#e = new d(this, {
+		super(), this.scale = new t(this), this.gridSnap = new _(this), this.value = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.trackSize = new v(this, () => this.track), this._pattern = "", this.#e = new d(this, {
 			getBox: () => this.renderRoot?.querySelector(".vf-tile-strip"),
-			getArt: () => this.indeterminate && !this._pattern ? E : null,
+			getArt: () => this.indeterminate && !this._pattern ? D : null,
 			property: "--_vf-barber-tile"
 		}), this.#t = this.attachInternals(), this.#t.role = "progressbar", this.#t.ariaValueMin = "0";
 	}
@@ -251,14 +250,14 @@ var w = 12, T = [
 		if (this.indeterminate) {
 			let e = null;
 			if (this._pattern) {
-				let t = r(this.trackSize.width, this), n = Math.max(1, Math.ceil((t + w) / O));
+				let t = r(this.trackSize.width, this), n = Math.max(1, Math.ceil((t + T) / k));
 				e = p({
 					cols: n,
 					rows: 1,
-					tile: O
+					tile: k
 				});
 			}
-			return b`
+			return x`
         <div class="track vf-snap" part="track">
           <div class="fill stripes vf-tile-grid" part="fill">
             <div class="vf-tile-strip">${e}</div>
@@ -267,7 +266,7 @@ var w = 12, T = [
       `;
 		}
 		let e = this.clampedValue / this.effectiveMax, t = r(this.trackSize.width, this), i = t > 0 ? `${n(Math.round(e * t), this)}px` : `${e * 100}%`;
-		return b`
+		return x`
       <div class="track vf-snap" part="track">
         <div
           class="fill ${e <= 0 ? "empty" : ""}"
@@ -278,9 +277,9 @@ var w = 12, T = [
     `;
 	}
 };
-i([S({ type: Number })], k.prototype, "value", void 0), i([S({ type: Number })], k.prototype, "max", void 0), i([S({
+i([C({ type: Number })], A.prototype, "value", void 0), i([C({ type: Number })], A.prototype, "max", void 0), i([C({
 	type: Boolean,
 	reflect: !0
-})], k.prototype, "indeterminate", void 0), i([S()], k.prototype, "label", void 0), i([C(".track")], k.prototype, "track", void 0), k = i([e("vf-progress-bar")], k);
+})], A.prototype, "indeterminate", void 0), i([C()], A.prototype, "label", void 0), i([w(".track")], A.prototype, "track", void 0), A = i([e("vf-progress-bar")], A);
 //#endregion
-export { k as VfProgressBar };
+export { A as VfProgressBar };

package/dist/components/vf-radio.js

@@ -21,10 +21,9 @@ var y = class extends r(f(p)) {
 			m`
       /* Keyboard focus underlines the circle itself — not the label, and not a
          ring around either (see vfFocusUnderline). One blank row below the
-         well, which is where vf-checkbox puts its own: −2 rather than that
-         control's −3 only because this well is unbordered, so the two rules
-         land on the same row of a mixed list. The 12px sprite sits half a
-         pixel proud of the 13px well, so the gap reads as one row or two
+         well, which ends on the same row as vf-checkbox's box, so the two
+         rules land on the same row of a mixed list. The 12px sprite sits half
+         a pixel proud of the 13px well, so the gap reads as one row or two
          depending on which way that rounds — the well is the anchor, not the
          sprite. */
       :host(:focus-visible) .circle::after {