vintage-frames 0.13.0 → 0.14.0

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 {

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

@@ -3,19 +3,20 @@ 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 { vfFocusRing as o } from "../styles/recipes/focus.js";
-import { vfScrollRail as s } from "../styles/recipes/scroll-rail.js";
-import { GridSnapController as c } from "../grid-snap.js";
-import { ScrollStateController as l } from "../scroll-state.js";
-import { ScrollRailController as u, renderScrollRail as d } from "../scroll-rail.js";
-import { LitElement as f, css as p, html as m, nothing as h } from "lit";
-import { property as g, query as _, state as v } from "lit/decorators.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";
 //#region src/components/vf-scroll-area.ts
-var y = class extends r(f) {
+var b = class extends r(p) {
 	constructor() {
-		super(), this.scale = new t(this), this.gridSnap = new c(this), this.axis = "vertical", this.corner = !1, this.label = "", this.scrollState = new l(this, () => this.viewport, () => this.content, (e) => {
+		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) => {
 			this._scrollable = e.x || e.y;
-		}), this.rail = new u(this, {
+		}), this.rail = new d(this, {
 			getScroll: () => this.viewport,
 			getContent: () => this.content
 		}), this._scrollable = !1, this.#e = () => {
@@ -38,13 +39,13 @@ var y = class extends r(f) {
 	static {
 		this.styles = [
 			a,
-			s,
-			p`
+			c,
+			m`
       :host {
         display: block;
       }
-      /* The snapped wrapper: a real 1px frame (the rails' outer line is this
-         border), a grid that reserves each rail as its own edge column/row —
+      /* The snapped wrapper: the 1px frame (the rails' outer line is this
+         stroke), a grid that reserves each rail as its own edge column/row —
          the rails size themselves to the 15px inside the frame — and the
          scroller and rails riding the grid-snap offset as one. */
       .box {
@@ -53,8 +54,8 @@ var y = class extends r(f) {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         background: var(--vf-white, #fff);
+        ${o()}
       }
       :host(:not([axis])) .box,
       :host([axis='vertical']) .box,
@@ -134,36 +135,36 @@ var y = class extends r(f) {
       /* Focusable so keyboard users can scroll; inset ring to stay in-box. */
       .viewport:focus-visible {
         --vf-focus-offset: -2px;
-        ${o}
+        ${s}
       }
     `
 		];
 	}
 	render() {
 		let e = this.axis !== "horizontal", t = this.axis === "horizontal" || this.axis === "both", n = e && t || this.corner;
-		return m`
+		return h`
       <div class="box vf-snap">
         <div
           class="viewport vf-scroll"
           part="viewport"
-          tabindex=${this._scrollable ? "0" : h}
-          role=${this.label ? "region" : this._scrollable ? "group" : h}
-          aria-label=${this.label || h}
+          tabindex=${this._scrollable ? "0" : g}
+          role=${this.label ? "region" : this._scrollable ? "group" : g}
+          aria-label=${this.label || g}
         >
           <div class="content">
             <slot @slotchange=${this._onSlotChange}></slot>
           </div>
         </div>
-        ${e ? d(this.rail, "vertical") : h}
-        ${t ? d(this.rail, "horizontal") : h}
-        ${n ? m`<div class="vf-rail-corner" aria-hidden="true"></div>` : h}
+        ${e ? f(this.rail, "vertical") : g}
+        ${t ? f(this.rail, "horizontal") : g}
+        ${n ? h`<div class="vf-rail-corner" aria-hidden="true"></div>` : g}
       </div>
     `;
 	}
 };
-n([g({ reflect: !0 })], y.prototype, "axis", void 0), n([g({
+n([_({ reflect: !0 })], b.prototype, "axis", void 0), n([_({
 	type: Boolean,
 	reflect: !0
-})], y.prototype, "corner", void 0), n([g()], y.prototype, "label", void 0), n([_(".viewport")], y.prototype, "viewport", void 0), n([_(".content")], y.prototype, "content", void 0), n([v()], y.prototype, "_scrollable", void 0), y = n([e("vf-scroll-area")], y);
+})], 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);
 //#endregion
-export { y as VfScrollArea };
+export { b as VfScrollArea };

package/dist/components/vf-select.js

@@ -6,28 +6,29 @@ import { VfPositioned as o } from "../position.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";
+import { vfStrokeDecls as u, vfStrokeInset as d } from "../styles/recipes/stroke.js";
+import { vfPanel as f } from "../styles/recipes/surface.js";
+import { vfFocusUnderline as p } from "../styles/recipes/focus.js";
+import { GridSnapController as m } from "../grid-snap.js";
+import { DocumentListenersController as h } from "../document-listeners.js";
+import { runSelectionBlink as g } from "../motion.js";
+import { CARET_DOWN as _, CARET_DOWN_SMALL as v, CARET_UP as y, CARET_UP_SMALL as b, glyphSvg as x } from "../glyphs.js";
+import { VfShadowRoleControl as S } from "../form-control.js";
+import { FocusRuleController as C } from "../focus-modality.js";
+import { VfOption as w } from "./vf-option.js";
+import { clampScroll as T, ensureVisibleScroll as E, firstPickableRow as D, lastPickableRow as O, layoutClampedPopup as k } from "../popup-overflow.js";
+import { TypeAheadBuffer as A } from "../type-ahead.js";
+import { css as j, html as M, nothing as N } from "lit";
+import { property as P, query as F, queryAssignedElements as I, state as L } from "lit/decorators.js";
+import { classMap as R } from "lit/directives/class-map.js";
 //#region src/components/vf-select.ts
-var L = class extends o(b) {
+var z = class extends o(S) {
 	static {
 		this.styles = [
 			l,
 			c,
-			u,
-			k`
+			f,
+			j`
       :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
@@ -65,22 +66,28 @@ var L = class extends o(b) {
         /* 18px, not the 22px fields: the reference pill measures 156×18 plus
            its 1px hard shadow (the 157×19 ink box on the sheet). */
         height: calc(var(--vf-scale, 1) * var(--vf-popup-height, 18px));
-        /* Left inset = the checkmark gutter (--vf-select-gutter), so the selected
-           label sits at the SAME x it will occupy in the open list (where the ✓
-           fills that gutter). The right inset stays the small 8px. */
-        padding: 0 calc(var(--vf-scale, 1) * 8px) 0
-          calc(var(--vf-scale, 1) * var(--vf-select-gutter, 16px));
         background: var(--vf-white, #fff);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         border-radius: 0;
-        /* At depth 0 the shadow is the border box itself, which paints nothing. */
-        box-shadow: calc(var(--vf-scale, 1) * var(--_shadow-depth))
-          calc(var(--vf-scale, 1) * var(--_shadow-depth)) 0 0 var(--vf-black, #000);
         /* The press-drag gesture owns pointer moves while the button is held;
            suppress the browser's own touch panning/scrolling so a touch drag
            tracks the list instead of scrolling the page. */
         touch-action: none;
         cursor: var(--vf-cursor, default);
+        /* The 1px frame is a stroke, the hard shadow after it in the list —
+           at depth 0 the shadow is the border box itself, which paints
+           nothing. Left inset = the checkmark gutter (--vf-select-gutter), so
+           the selected label sits at the SAME x it will occupy in the open
+           list (where the ✓ fills that gutter). The right inset stays the
+           small 8px. */
+        ${u({
+				padding: [
+					0,
+					8,
+					0,
+					"var(--vf-select-gutter, 16px)"
+				],
+				shadows: "calc(var(--vf-scale, 1) * var(--_shadow-depth)) calc(var(--vf-scale, 1) * var(--_shadow-depth)) 0 0 var(--vf-black, #000)"
+			})}
       }
       /* Keyboard focus is the kit's dashed rule under the pill, not a ring
          around it (see vfFocusUnderline). It goes BELOW the whole box rather
@@ -88,11 +95,12 @@ var L = class extends o(b) {
          has one line and the label already shares it with the ▼.
 
          The offset counts every row of ink below the pseudo-element's padding
-         box before the blank row and the rule itself — the 1px border, then
-         the hard shadow (1px, or none under no-shadow): −(1 + 1 + depth + 1).
-         The ±1px sides widen it from
-         that same padding box to the border box, which is the shape the pill
-         reads as (the shadow is a depth cue, not part of the silhouette).
+         box, which runs under the pill's stroke, before the blank row and the
+         rule itself — the hard shadow (1px, or none under no-shadow):
+         −(depth + 1 + 1). The rule spans that same box, which is the shape
+         the pill reads as (the shadow is a depth cue, not part of the
+         silhouette). Under forced colors the stroke is a border and the
+         padding box sits inside it, so the insets grow by it there.
 
          Gated on a class, not :focus-visible — the same problem the editable
          fields have, arrived at from the other direction. The pill suppresses
@@ -107,10 +115,10 @@ var L = class extends o(b) {
         outline: none;
       }
       .control.vf-focus-rule::after {
-        --vf-focus-underline-offset: calc(-3px - var(--_shadow-depth));
-        ${d}
-        left: calc(var(--vf-scale, 1) * -1px);
-        right: calc(var(--vf-scale, 1) * -1px);
+        ${p}
+        bottom: ${d("(-3px - var(--_shadow-depth))")};
+        left: ${d(-1)};
+        right: ${d(-1)};
       }
       /* The label is a 1×1 grid: the visible value and an invisible stack of
          every option's text share the one cell, so the cell — and thus the
@@ -194,16 +202,10 @@ var L = class extends o(b) {
         position: fixed;
         z-index: 10000;
         margin: 0;
-        padding: 0;
         /* Match the closed pill's 1px hard shadow — the shared .vf-panel recipe
            defaults to the 2px menu shadow, which would overhang the pill's shadow
            by 1px on the right and bottom. */
         --vf-shadow-offset: 1px;
-        /* A CLIP, never a scroll surface: positionPanel gives the panel a whole
-           number of row slots and the rows are rolled by transform inside it.
-           System 7 put no scrollbar on a menu, and an un-quantized native scroll
-           would break the row lattice the pill overlay is built on. */
-        overflow: hidden;
         /* The screen-edge reserve, resolved here and read back by
            positionPanel: the clamp is JS geometry, so the tokens can't be spent
            in a declaration, but their defaults and the cascade still belong in
@@ -216,6 +218,18 @@ var L = class extends o(b) {
       .panel.open {
         display: block;
       }
+      /* A CLIP, never a scroll surface: positionPanel gives the panel a whole
+         number of row slots and the rows are rolled by transform inside it.
+         System 7 put no scrollbar on a menu, and an un-quantized native scroll
+         would break the row lattice the pill overlay is built on. An element
+         inside the panel rather than the panel itself, whose frame is a
+         stroke: the panel would clip at its outer edge and let rolled rows
+         paint over the frame. The arrow slots place against it. */
+      .clip {
+        position: relative;
+        height: 100%;
+        overflow: hidden;
+      }
       /* The rolling strip — a box for the options to ride, whose translateY
          positionPanel and the arrow timer write. Transform rather than
          scrollTop: both keep
@@ -290,7 +304,7 @@ var L = class extends o(b) {
 		return this.rowScroll < this.optionItems.length - this.visibleSlots;
 	}
 	constructor() {
-		super(), this.value = "", this.name = "", this.size = "regular", this.noShadow = !1, 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, () => [
+		super(), this.value = "", this.name = "", this.size = "regular", this.noShadow = !1, this.label = "", this.open = !1, this.cachedOptions = [], this.scale = new r(this), this.gridSnap = new m(this), this.focusRule = new C(this), this.panelListeners = new h(this, () => [
 			[
 				document,
 				"pointerdown",
@@ -308,7 +322,7 @@ var L = class extends o(b) {
 				"resize",
 				this.handleWindowResize
 			]
-		]), this.pressListeners = new p(this, () => [
+		]), this.pressListeners = new h(this, () => [
 			[
 				document,
 				"pointermove",
@@ -327,7 +341,7 @@ var L = class extends o(b) {
 				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 O(), this.handleSlotChange = () => {
+		]), 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 A(), 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));
@@ -485,7 +499,7 @@ var L = class extends o(b) {
 	positionPanel(e) {
 		let t = this.controlEl, n = this.panelEl;
 		if (!t || !n) return;
-		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({
+		let r = t.getBoundingClientRect(), a = getComputedStyle(n), o = (parseFloat(a.borderTopWidth) || 0) + (parseFloat(a.paddingTop) || 0), s = this.optionItems[0]?.getBoundingClientRect()?.height || r.height - 2 * o, c = (e) => i(parseFloat(a.getPropertyValue(e)) || 0, this), l = k({
 			idealTop: r.top - e * s,
 			rowHeight: s,
 			border: o,
@@ -503,11 +517,11 @@ var L = class extends o(b) {
 		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 = w(e, this.rowScroll, this.optionItems.length, this.visibleSlots);
+		let t = E(e, this.rowScroll, this.optionItems.length, this.visibleSlots);
 		t !== this.rowScroll && (this.rowScroll = t, this.applyScroll());
 	}
 	stepArrowScroll(e) {
-		let t = C(this.rowScroll + e, this.rowScroll, this.optionItems.length, this.visibleSlots);
+		let t = T(this.rowScroll + e, this.rowScroll, this.optionItems.length, this.visibleSlots);
 		return t !== this.rowScroll && (this.rowScroll = t, this.applyScroll(), !0);
 	}
 	startArrowScroll(e) {
@@ -583,7 +597,7 @@ var L = class extends o(b) {
 		if (e.disabled || this.blinking) return;
 		let t = this.optionItems.indexOf(e);
 		this.setActive(t, !1), this.blinking = !0;
-		let n = m((t) => {
+		let n = g((t) => {
 			e.active = t;
 		}, () => {
 			this.commit(e);
@@ -599,7 +613,7 @@ var L = class extends o(b) {
 		this.value = r, e(this, "vf-change", { value: r }), t(this, "input"), t(this, "change");
 	}
 	optionFromEvent(e) {
-		return e.composedPath().find((e) => e instanceof S);
+		return e.composedPath().find((e) => e instanceof w);
 	}
 	endPress() {
 		this.pressing && (this.pressing = !1, this.pressStartOption = null, this.pressStartArrow = null, this.pressListeners.detach());
@@ -609,7 +623,7 @@ var L = class extends o(b) {
 		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 = T(this.rowScroll), a = E(this.rowScroll, this.optionItems.length, this.visibleSlots);
+		let i = D(this.rowScroll), a = O(this.rowScroll, this.optionItems.length, this.visibleSlots);
 		for (let n = i; n <= a; n += 1) {
 			let r = this.optionItems[n];
 			if (!r) continue;
@@ -632,10 +646,10 @@ var L = class extends o(b) {
 		this.selectOption(e);
 	}
 	render() {
-		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`
+		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 ? v : _, a = r ? b : y;
+		return M`
       <div
-        class=${I({
+        class=${R({
 			control: !0,
 			"vf-snap": !0,
 			"vf-focus-rule": this.focusRule.marked && !this.open,
@@ -647,20 +661,20 @@ var L = class extends o(b) {
         aria-expanded=${this.open ? "true" : "false"}
         aria-disabled=${n ? "true" : "false"}
         aria-controls="listbox"
-        aria-label=${this.label || this.hostLabel || j}
+        aria-label=${this.label || this.hostLabel || N}
         aria-describedby=${this.describedBy}
-        aria-required=${this.required ? "true" : j}
-        aria-invalid=${this.validity.valid ? j : "true"}
+        aria-required=${this.required ? "true" : N}
+        aria-invalid=${this.validity.valid ? N : "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) => A`<span>${(e.textContent ?? "").trim()}</span>`)}
+            ${this.optionItems.map((e) => M`<span>${(e.textContent ?? "").trim()}</span>`)}
           </span>
         </span>
         <span class="arrow" part="arrow" aria-hidden="true"
-          >${y(i, "caret")}</span
+          >${x(i, "caret")}</span
         >
       </div>
       <div
@@ -668,47 +682,51 @@ var L = class extends o(b) {
         class="panel vf-panel ${this.open ? "open" : ""}"
         part="panel"
         role="listbox"
-        aria-label=${this.label || this.hostLabel || j}
+        aria-label=${this.label || this.hostLabel || N}
         aria-hidden=${this.open ? "false" : "true"}
       >
-        <!-- role="presentation" so the strip that carries the roll doesn't
-             stand between the listbox and the options it owns. -->
-        <div class="rows" role="presentation">
-          <slot @slotchange=${this.handleSlotChange}></slot>
-        </div>
-        <!-- Pointer affordances only, hence aria-hidden: the clipped options
-             stay in the accessibility tree un-hidden (clipping is presentation,
-             and a native <select> exposes its whole list too), and keyboard and
-             AT users reach every row with the arrows, Home/End and type-ahead. -->
-        <div
-          class="arrow-slot up"
-          part="scroll-arrow"
-          aria-hidden="true"
-          @pointerenter=${this.handleArrowEnter}
-          @pointermove=${this.handleArrowEnter}
-          @pointerleave=${this.handleArrowLeave}
-        >
-          ${y(a, "caret")}
-        </div>
-        <div
-          class="arrow-slot down"
-          part="scroll-arrow"
-          aria-hidden="true"
-          @pointerenter=${this.handleArrowEnter}
-          @pointermove=${this.handleArrowEnter}
-          @pointerleave=${this.handleArrowLeave}
-        >
-          ${y(i, "caret")}
+        <!-- role="presentation" on the clip and the strip that carries the
+             roll, so neither stands between the listbox and the options it
+             owns. -->
+        <div class="clip" role="presentation">
+          <div class="rows" role="presentation">
+            <slot @slotchange=${this.handleSlotChange}></slot>
+          </div>
+          <!-- Pointer affordances only, hence aria-hidden: the clipped options
+               stay in the accessibility tree un-hidden (clipping is
+               presentation, and a native <select> exposes its whole list too),
+               and keyboard and AT users reach every row with the arrows,
+               Home/End and type-ahead. -->
+          <div
+            class="arrow-slot up"
+            part="scroll-arrow"
+            aria-hidden="true"
+            @pointerenter=${this.handleArrowEnter}
+            @pointermove=${this.handleArrowEnter}
+            @pointerleave=${this.handleArrowLeave}
+          >
+            ${x(a, "caret")}
+          </div>
+          <div
+            class="arrow-slot down"
+            part="scroll-arrow"
+            aria-hidden="true"
+            @pointerenter=${this.handleArrowEnter}
+            @pointermove=${this.handleArrowEnter}
+            @pointerleave=${this.handleArrowLeave}
+          >
+            ${x(i, "caret")}
+          </div>
         </div>
       </div>
       ${this.renderDescription()}
     `;
 	}
 };
-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({
+a([P()], z.prototype, "value", void 0), a([P({ reflect: !0 })], z.prototype, "name", void 0), a([P({ reflect: !0 })], z.prototype, "size", void 0), a([P({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-shadow"
-})], L.prototype, "noShadow", 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);
+})], z.prototype, "noShadow", void 0), a([P()], z.prototype, "label", void 0), a([L()], z.prototype, "open", void 0), a([F(".control")], z.prototype, "controlEl", void 0), a([F(".panel")], z.prototype, "panelEl", void 0), a([F(".rows")], z.prototype, "rowsEl", void 0), a([F(".arrow-slot.up")], z.prototype, "upArrowEl", void 0), a([F(".arrow-slot.down")], z.prototype, "downArrowEl", void 0), a([I({ selector: "vf-option" })], z.prototype, "assignedOptions", void 0), a([L()], z.prototype, "cachedOptions", void 0), z = a([n("vf-select")], z);
 //#endregion
-export { L as VfSelect };
+export { z as VfSelect };

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

@@ -10,13 +10,13 @@ declare const VfSeparator_base: (new (...args: any[]) => import("../position.js"
  *
  * Containers may restyle it via custom properties:
  * - `--vf-separator-color` — line color (default `var(--vf-black, #000)`).
- * - `--vf-separator-style` — line style, e.g. `dotted` (default `solid`).
- *   `vf-menu` sets these so slotted separators render as the classic dimmed
- *   dotted menu rule (see Menus.png).
+ * - `--vf-separator-style` — `solid` (the default) or `dotted`, one system px
+ *   on and one off. `vf-menu` sets these so slotted separators render as the
+ *   classic dimmed dotted menu rule (see Menus.png).
  * @cssprop --vf-separator-color - `vf-separator` rule color — `vf-menu` sets it
  *   to `--vf-disabled` for the dimmed menu rule
- * @cssprop [--vf-separator-style=solid] - `vf-separator` rule style — `vf-menu`
- *   sets `dotted` (see `Menus.png`)
+ * @cssprop [--vf-separator-style=solid] - `vf-separator` rule style: `solid`
+ *   or `dotted` — `vf-menu` sets `dotted` (see `Menus.png`)
  */
 export declare class VfSeparator extends VfSeparator_base {
     #private;