vintage-frames 0.12.8 → 0.14.0

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;

package/dist/components/vf-separator.js

@@ -19,20 +19,46 @@ var u = class extends r(o) {
         height: auto;
         align-self: stretch;
       }
-      /* The rule ink lives on an inner element rather than a host border so it
-         can ride the snap offset (see .vf-snap in base.ts). */
+      /* The rule ink lives on an inner element rather than the host so it can
+         ride the snap offset (see .vf-snap in base.ts). The element is the
+         line — the host is one system px across — so it paints its own
+         background rather than a border, whose width Safari rounds before
+         page zoom (see vfStrokeDecls). */
       .rule {
         width: 100%;
         height: 100%;
-        border-top: calc(var(--vf-scale, 1) * 1px)
-          var(--vf-separator-style, solid)
-          var(--vf-separator-color, var(--vf-black, #000));
+        background: var(--vf-separator-color, var(--vf-black, #000));
       }
-      :host([vertical]) .rule {
-        border-top: none;
-        border-left: calc(var(--vf-scale, 1) * 1px)
-          var(--vf-separator-style, solid)
-          var(--vf-separator-color, var(--vf-black, #000));
+      /* Dotted: one system px of ink, one off, from the start of the rule. */
+      @container style(--vf-separator-style: dotted) {
+        .rule {
+          background: repeating-linear-gradient(
+            to right,
+            var(--vf-separator-color, var(--vf-black, #000)) 0 calc(var(--vf-scale, 1) * 1px),
+            transparent calc(var(--vf-scale, 1) * 1px) calc(var(--vf-scale, 1) * 2px)
+          );
+        }
+        :host([vertical]) .rule {
+          background: repeating-linear-gradient(
+            to bottom,
+            var(--vf-separator-color, var(--vf-black, #000)) 0 calc(var(--vf-scale, 1) * 1px),
+            transparent calc(var(--vf-scale, 1) * 1px) calc(var(--vf-scale, 1) * 2px)
+          );
+        }
+      }
+      /* Forced colors repaints backgrounds and deletes gradients, so the line
+         is a border there, as every kit stroke is (vfStrokeDecls). */
+      @media (forced-colors: active) {
+        .rule {
+          background: none;
+          border-top: calc(var(--vf-scale, 1) * 1px) var(--vf-separator-style, solid)
+            var(--vf-separator-color, var(--vf-black, #000));
+        }
+        :host([vertical]) .rule {
+          border-top: none;
+          border-left: calc(var(--vf-scale, 1) * 1px) var(--vf-separator-style, solid)
+            var(--vf-separator-color, var(--vf-black, #000));
+        }
       }
     `];
 	}

package/dist/components/vf-slider.js

@@ -5,12 +5,12 @@ import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { VfPositioned as s } from "../position.js";
 import { vfBase as c } from "../styles/recipes/host.js";
 import { vfFocusUnderline as l } from "../styles/recipes/focus.js";
-import { TrackWidthController as u } from "../track-width.js";
-import { GridSnapController as d } from "../grid-snap.js";
-import { SLIDER_THUMB as f, SLIDER_THUMB_FACE as p } from "../glyphs.js";
-import { VfFormControl as m } from "../form-control.js";
-import { FocusRuleController as h } from "../focus-modality.js";
-import { decimalsOf as g } from "../number.js";
+import { GridSnapController as u } from "../grid-snap.js";
+import { SLIDER_THUMB as d, SLIDER_THUMB_FACE as f } from "../glyphs.js";
+import { VfFormControl as p } from "../form-control.js";
+import { FocusRuleController as m } from "../focus-modality.js";
+import { decimalsOf as h } from "../number.js";
+import { TrackWidthController as g } from "../track-width.js";
 import { css as _, html as v } from "lit";
 import { property as y, query as b } from "lit/decorators.js";
 //#region src/components/vf-slider.ts
@@ -21,7 +21,7 @@ function D(e, t) {
 	};
 	return r(1, 0, e - 2, 1), r(1, 3, e - 2, 1), r(0, 1, 1, 2), r(e - 1, 1, 1, 2), r(1, 1, Math.min(Math.max(t, 0), e - 1) - 1, 2), n.join("");
 }
-var O = class extends s(m) {
+var O = class extends s(p) {
 	static {
 		this.styles = [c, _`
       :host {
@@ -110,7 +110,7 @@ var O = class extends s(m) {
 	#t;
 	#n;
 	constructor() {
-		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new u(this, () => this.track), this.scale = new r(this), this.gridSnap = new d(this), this.selfManagedTabIndex = !1, this.#e = new h(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
+		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new g(this, () => this.track), this.scale = new r(this), this.gridSnap = new u(this), this.selfManagedTabIndex = !1, this.#e = new m(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
 			if (!(this.isDisabled || e.button !== 0)) {
 				e.preventDefault(), this.#e.suppress(), this.focus(), this.#n = !0, this.#t = this.value;
 				try {
@@ -181,7 +181,7 @@ var O = class extends s(m) {
 	}
 	#o(e) {
 		let t = this.#i, n = Math.round((e - this.min) / t), r = this.#a(this.min + n * t);
-		return Number(r.toFixed(g(t)));
+		return Number(r.toFixed(h(t)));
 	}
 	get #s() {
 		let e = Number.isFinite(this.value) ? this.value : this.min;
@@ -242,8 +242,8 @@ var O = class extends s(m) {
             shape-rendering="crispEdges"
             aria-hidden="true"
           >
-            <path class="thumb-face" d=${p.d}></path>
-            <path class="thumb-outline" d=${f.d}></path>
+            <path class="thumb-face" d=${f.d}></path>
+            <path class="thumb-outline" d=${d.d}></path>
           </svg>
         </span>
       </div>

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

@@ -83,8 +83,8 @@ export declare class VfSwatch extends VfSwatch_base {
     private readonly gridSnap;
     /**
      * The consumer's `--vf-swatch-checker` override, or `''` for the kit
-     * checker — which exact-fill path render() takes (src/tile-grid.ts).
-     * Re-read every update; a runtime token swap wants a `requestUpdate()`.
+     * checker — which path render() takes (src/tile-grid.ts). Re-read every
+     * update; a runtime token swap wants a `requestUpdate()`.
      */
     private _pattern;
     protected willUpdate(changed: PropertyValues<this>): void;