vintage-frames 0.13.0 → 0.14.0

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-swatch.js

@@ -5,15 +5,15 @@ import { VfPositioned as i } from "../position.js";
 import { vfBase as a } from "../styles/recipes/host.js";
 import { tileImage as o, tileRects as s, tileSpan as c } from "../styles/recipes/tile.js";
 import { RepeatTileController as l, patternOverride as u, tileGrid as d, vfRepeatTileSize as f, vfTileGrid as p } from "../tile-grid.js";
-import { vfHardShadowDecls as m } from "../styles/recipes/shadow.js";
-import { vfFocusUnderline as h } from "../styles/recipes/focus.js";
-import { GridSnapController as g } from "../grid-snap.js";
-import { VfShadowRoleControl as _ } from "../form-control.js";
-import { css as v, html as y, unsafeCSS as b } from "lit";
-import { property as x } from "lit/decorators.js";
-import { styleMap as S } from "lit/directives/style-map.js";
+import { vfStrokeDecls as m, vfStrokeInset as h } from "../styles/recipes/stroke.js";
+import { vfFocusUnderline as g } from "../styles/recipes/focus.js";
+import { GridSnapController as _ } from "../grid-snap.js";
+import { VfShadowRoleControl as v } from "../form-control.js";
+import { css as y, html as b, unsafeCSS as x } from "lit";
+import { property as S } from "lit/decorators.js";
+import { styleMap as C } from "lit/directives/style-map.js";
 //#region src/components/vf-swatch.ts
-var C = [
+var w = [
 	[
 		0,
 		0,
@@ -35,21 +35,21 @@ var C = [
 		2,
 		"#c0c0c0"
 	]
-], w = {
+], T = {
 	width: 4,
 	height: 4,
-	rects: C
-}, T = o(w.width, w.height, s(C)), E = c(w.width), D = class extends i(_) {
+	rects: w
+}, E = o(T.width, T.height, s(w)), D = c(T.width), O = class extends i(v) {
 	constructor(...e) {
-		super(...e), this.width = 24, this.height = 18, this.shadow = !1, this.label = "", this.disabled = !1, this.scale = new t(this), this.gridSnap = new g(this), this._pattern = "", this.#e = new l(this, {
+		super(...e), this.width = 24, this.height = 18, this.shadow = !1, this.label = "", this.disabled = !1, this.scale = new t(this), this.gridSnap = new _(this), this._pattern = "", this.#e = new l(this, {
 			getBox: () => this.renderRoot?.querySelector(".fill"),
-			getArt: () => this._pattern ? null : w,
+			getArt: () => this._pattern ? null : T,
 			property: "--_vf-checker-tile"
 		});
 	}
 	static {
 		this.shadowRootOptions = {
-			..._.shadowRootOptions,
+			...v.shadowRootOptions,
 			delegatesFocus: !0
 		};
 	}
@@ -57,7 +57,7 @@ var C = [
 		this.styles = [
 			a,
 			p,
-			v`
+			y`
       :host {
         display: inline-flex;
         cursor: var(--vf-cursor, default);
@@ -65,7 +65,7 @@ var C = [
            tile grid .fill renders for it at the token's documented 60-px
            tile geometry (src/tile-grid.ts). The kit checker is .fill's own
            repeating tile instead. */
-        --_checker: var(--vf-swatch-checker, ${b(T)});
+        --_checker: var(--vf-swatch-checker, ${x(E)});
         /* How deep a shadow this swatch actually casts — nothing unless the
            shadow attribute is set. Resolved here once so the focus rule below
            can compose the real depth rather than assume one, and so a consumer
@@ -75,24 +75,24 @@ var C = [
       :host([shadow]) {
         --_shadow-depth: var(--vf-shadow-offset, 2px);
       }
-      /* The 1px black frame, and — as the button's own background showing
-         through its 1px padding — the white inset ring around the fill. */
+      /* The 1px black frame, a stroke, and — as the button's own background
+         showing through its 1px padding inside the stroke — the white inset
+         ring around the fill. After the stroke, the opt-in depth: the kit's
+         one hard shadow, painted outside the border box like every raised
+         surface's, and nothing at depth 0. */
       button {
         display: block;
         /* Also the anchor the focus rule below hangs from. */
         position: relative;
-        padding: calc(var(--vf-scale, 1) * 1px);
         margin: 0;
         background: var(--vf-white, #fff);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         cursor: inherit;
         -webkit-appearance: none;
         appearance: none;
-      }
-      /* Opt-in depth: the kit's one hard shadow, painted outside the border
-         box like every raised surface's. */
-      :host([shadow]) button {
-        ${m}
+        ${m({
+				padding: 1,
+				shadows: "calc(var(--vf-scale, 1) * var(--_shadow-depth)) calc(var(--vf-scale, 1) * var(--_shadow-depth)) 0 0 var(--vf-black, #000)"
+			})}
       }
       /* Pressed: the white inset inverts to black — instant 1-bit feedback. */
       button:active:not(:disabled) {
@@ -105,20 +105,22 @@ var C = [
          to show, and a rule drawn over the fill would read as part of it.
 
          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
-         whatever shadow this swatch is casting — none by default, a rethemeable
-         token under the shadow attribute — so it composes --_shadow-depth
-         rather than assuming a depth. The ±1px sides widen the rule from that
-         same padding box to the border box, the shape the swatch reads as (the
-         shadow is a depth cue, not part of the silhouette). */
+         box, which runs under the frame's stroke, before the blank row and
+         the rule itself — whatever shadow this swatch is casting — none by
+         default, a rethemeable token under the shadow attribute — so it
+         composes --_shadow-depth rather than assuming a depth. The rule spans
+         that same box, the shape the swatch 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. */
       button:focus-visible {
         outline: none;
       }
       button:focus-visible::after {
-        --vf-focus-underline-offset: calc(-3px - var(--_shadow-depth));
-        ${h}
-        left: calc(var(--vf-scale, 1) * -1px);
-        right: calc(var(--vf-scale, 1) * -1px);
+        ${g}
+        bottom: ${h("(-3px - var(--_shadow-depth))")};
+        left: ${h(-1)};
+        right: ${h(-1)};
       }
       .fill {
         display: block;
@@ -162,14 +164,14 @@ var C = [
 	}
 	render() {
 		let e = Math.max(1, (this.width ?? 24) - 4), t = Math.max(1, (this.height ?? 18) - 4), r = this._pattern ? d({
-			cols: Math.ceil(e / E),
-			rows: Math.ceil(t / E),
-			tile: E
-		}) : null, i = this.color ? y`<span
+			cols: Math.ceil(e / D),
+			rows: Math.ceil(t / D),
+			tile: D
+		}) : null, i = this.color ? b`<span
           class="tint"
-          style=${S({ "background-color": this.color })}
+          style=${C({ "background-color": this.color })}
         ></span>` : null;
-		return y`
+		return b`
       <button
         part="button"
         class="vf-snap"
@@ -189,12 +191,12 @@ var C = [
     `;
 	}
 };
-r([x()], D.prototype, "color", void 0), r([x({ type: Number })], D.prototype, "width", void 0), r([x({ type: Number })], D.prototype, "height", void 0), r([x({
+r([S()], O.prototype, "color", void 0), r([S({ type: Number })], O.prototype, "width", void 0), r([S({ type: Number })], O.prototype, "height", void 0), r([S({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "shadow", void 0), r([x()], D.prototype, "label", void 0), r([x({
+})], O.prototype, "shadow", void 0), r([S()], O.prototype, "label", void 0), r([S({
 	type: Boolean,
 	reflect: !0
-})], D.prototype, "disabled", void 0), D = r([e("vf-swatch")], D);
+})], O.prototype, "disabled", void 0), O = r([e("vf-swatch")], O);
 //#endregion
-export { D as VfSwatch };
+export { O as VfSwatch };

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

@@ -2,25 +2,26 @@ import { vfElement as e } from "../define.js";
 import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { VfPositioned as n } from "../position.js";
 import { vfBase as r } from "../styles/recipes/host.js";
-import { vfField as i } from "../styles/recipes/field.js";
-import { vfScrollRail as a } from "../styles/recipes/scroll-rail.js";
-import { ScrollStateController as o } from "../scroll-state.js";
-import { ScrollRailController as s, renderScrollRail as c } from "../scroll-rail.js";
-import { VfTextControlBase as l } from "../text-control.js";
-import { css as u, html as d, nothing as f } from "lit";
-import { property as p, query as m } from "lit/decorators.js";
-import { live as h } from "lit/directives/live.js";
+import { vfStrokeDecls as i, vfStrokeInset as a } from "../styles/recipes/stroke.js";
+import { vfField as o } from "../styles/recipes/field.js";
+import { vfScrollRail as s } from "../styles/recipes/scroll-rail.js";
+import { ScrollStateController as c } from "../scroll-state.js";
+import { ScrollRailController as l, renderScrollRail as u } from "../scroll-rail.js";
+import { VfTextControlBase as d } from "../text-control.js";
+import { css as f, html as p, nothing as m } from "lit";
+import { property as h, query as g } from "lit/decorators.js";
+import { live as _ } from "lit/directives/live.js";
 //#region src/components/vf-text-area.ts
-var g = class extends n(l) {
+var v = class extends n(d) {
 	constructor(...e) {
-		super(...e), this.rows = 4, this.scrollState = new o(this, () => this.textarea), this.rail = new s(this, { getScroll: () => this.textarea });
+		super(...e), this.rows = 4, this.scrollState = new c(this, () => this.textarea), this.rail = new l(this, { getScroll: () => this.textarea });
 	}
 	static {
 		this.styles = [
 			r,
-			i,
-			a,
-			u`
+			o,
+			s,
+			f`
       :host {
         display: inline-block;
         /* A sensible default width (authored system px, scaled) so a bare field
@@ -34,31 +35,32 @@ var g = class extends n(l) {
          out [textarea | rail] — the rail sizes itself to the 15px inside the
          frame. */
       .vf-field-well {
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         background: var(--vf-white, #fff);
         display: grid;
         grid-template-columns: 1fr auto;
+        ${i()}
       }
-      /* The focus rule anchors to the well's PADDING box, and this well —
-         unlike the single-line field's borderless wrapper — carries the 1px
-         frame: −3 is the documented bordered-carrier offset (see
-         vfFocusUnderline), keeping the rule one blank row under the frame,
-         and the −1px insets span it across the border box edge to edge. */
+      /* The focus rule anchors to the well's padding box, which runs under
+         the frame's stroke: the same −2 as the borderless single-line well
+         puts the rule one blank row under the frame, edge to edge. Under
+         forced colors the frame is a border again and the padding box sits
+         inside it, so the offsets grow by it there. */
       .vf-field-well.vf-focus-rule::after {
-        --vf-focus-underline-offset: -3px;
-        left: calc(var(--vf-scale, 1) * -1px);
-        right: calc(var(--vf-scale, 1) * -1px);
+        bottom: ${a(-3)};
+        left: ${a(-1)};
+        right: ${a(-1)};
       }
-      /* textarea.vf-field so the border override out-ranks the vf-field skin's
-         own border (a bare element selector would lose to the class). */
+      /* textarea.vf-field so the overrides out-rank the vf-field skin's own
+         stroke (a bare element selector would lose to the class). */
       textarea.vf-field {
         display: block;
         width: 100%;
         min-width: 0;
-        /* Borderless — the frame is the well's (above). vf-text-field's own
-           3px/6px padding plus that border holds the text exactly where the
-           bordered field puts it, 4px/7px from the frame box. */
+        /* No frame of its own — the frame is the well's (above). The 3px/6px
+           padding inside it holds the text exactly where the framed field
+           puts it, 4px/7px from the frame box. */
         border: 0;
+        box-shadow: none;
         padding: calc(var(--vf-scale, 1) * 3px) calc(var(--vf-scale, 1) * 6px);
         /* Wrapped entry copy on the display face's native line (editable
            text is display type) — the same face token the static-text
@@ -78,30 +80,30 @@ var g = class extends n(l) {
 		];
 	}
 	render() {
-		return d`
+		return p`
       <div class=${this.wellClass}>
         <textarea
           part="textarea"
           class="vf-field vf-scroll"
           rows=${this.rows}
-          aria-label=${this.label || this.hostLabel || f}
+          aria-label=${this.label || this.hostLabel || m}
           aria-describedby=${this.describedBy}
-          aria-required=${this.required ? "true" : f}
-          aria-invalid=${this.validity.valid ? f : "true"}
+          aria-required=${this.required ? "true" : m}
+          aria-invalid=${this.validity.valid ? m : "true"}
           autocomplete=${this.forwardedAttr("autocomplete")}
           inputmode=${this.forwardedAttr("inputmode")}
           enterkeyhint=${this.forwardedAttr("enterkeyhint")}
           maxlength=${this.forwardedAttr("maxlength")}
           spellcheck=${this.forwardedAttr("spellcheck")}
           autocapitalize=${this.forwardedAttr("autocapitalize")}
-          .value=${h(this.value)}
+          .value=${_(this.value)}
           placeholder=${this.placeholder}
           ?disabled=${this.isDisabled}
           ?readonly=${this.readonly}
           @input=${this.handleInput}
           @change=${this.handleChange}
         ></textarea>
-        ${c(this.rail, "vertical")}
+        ${u(this.rail, "vertical")}
       </div>
       ${this.renderDescription()}
     `;
@@ -110,6 +112,6 @@ var g = class extends n(l) {
 		super.handleInput(e), this.scrollState.measure(), this.rail.sync();
 	}
 };
-t([p({ type: Number })], g.prototype, "rows", void 0), t([m("textarea")], g.prototype, "textarea", void 0), g = t([e("vf-text-area")], g);
+t([h({ type: Number })], v.prototype, "rows", void 0), t([g("textarea")], v.prototype, "textarea", void 0), v = t([e("vf-text-area")], v);
 //#endregion
-export { g as VfTextArea };
+export { v as VfTextArea };

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

@@ -2,21 +2,22 @@ import { vfElement as e } from "../define.js";
 import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { VfPositioned as n } from "../position.js";
 import { vfBase as r } from "../styles/recipes/host.js";
-import { vfField as i } from "../styles/recipes/field.js";
-import { VfTextControlBase as a } from "../text-control.js";
-import { css as o, html as s, nothing as c } from "lit";
-import { property as l } from "lit/decorators.js";
-import { live as u } from "lit/directives/live.js";
+import { vfStrokeInset as i } from "../styles/recipes/stroke.js";
+import { vfField as a } from "../styles/recipes/field.js";
+import { VfTextControlBase as o } from "../text-control.js";
+import { css as s, html as c, nothing as l } from "lit";
+import { property as u } from "lit/decorators.js";
+import { live as d } from "lit/directives/live.js";
 //#region src/components/vf-text-field.ts
-var d = class extends n(a) {
+var f = class extends n(o) {
 	constructor(...e) {
 		super(...e), this.type = "text";
 	}
 	static {
 		this.styles = [
 			r,
-			i,
-			o`
+			a,
+			s`
       :host {
         display: inline-block;
         /* A sensible default width (authored system px, scaled) so a bare field
@@ -24,7 +25,7 @@ var d = class extends n(a) {
            on the host or the --vf-field-width token. */
         width: calc(var(--vf-scale, 1) * var(--vf-field-width, 180px));
       }
-      input {
+      input.vf-field {
         display: block;
         width: 100%;
         /* min-, not height: the default line box exactly fills the 22px well,
@@ -32,28 +33,29 @@ var d = class extends n(a) {
            WCAG 1.4.12 text-spacing condition) grows the well instead of
            clipping the text inside a pinned one. */
         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: ${i(0)} ${i(6)};
       }
     `
 		];
 	}
 	static {
-		this.forwardedAttributes = [...a.forwardedAttributes, "pattern"];
+		this.forwardedAttributes = [...o.forwardedAttributes, "pattern"];
 	}
 	handleKeydown(e) {
 		this.isSubmitEnter(e) && this.requestImplicitSubmit() && e.preventDefault();
 	}
 	render() {
-		return s`
+		return c`
       <div class=${this.wellClass}>
         <input
           part="input"
           class="vf-field"
           type=${this.type}
-          aria-label=${this.label || this.hostLabel || c}
+          aria-label=${this.label || this.hostLabel || l}
           aria-describedby=${this.describedBy}
-          aria-required=${this.required ? "true" : c}
-          aria-invalid=${this.validity.valid ? c : "true"}
+          aria-required=${this.required ? "true" : l}
+          aria-invalid=${this.validity.valid ? l : "true"}
           autocomplete=${this.forwardedAttr("autocomplete")}
           inputmode=${this.forwardedAttr("inputmode")}
           enterkeyhint=${this.forwardedAttr("enterkeyhint")}
@@ -61,7 +63,7 @@ var d = class extends n(a) {
           pattern=${this.forwardedAttr("pattern")}
           spellcheck=${this.forwardedAttr("spellcheck")}
           autocapitalize=${this.forwardedAttr("autocapitalize")}
-          .value=${u(this.value)}
+          .value=${d(this.value)}
           placeholder=${this.placeholder}
           ?disabled=${this.isDisabled}
           ?readonly=${this.readonly}
@@ -74,6 +76,6 @@ var d = class extends n(a) {
     `;
 	}
 };
-t([l()], d.prototype, "type", void 0), d = t([e("vf-text-field")], d);
+t([u()], f.prototype, "type", void 0), f = t([e("vf-text-field")], f);
 //#endregion
-export { d as VfTextField };
+export { f as VfTextField };