vintage-frames 0.1.0

package/dist/components/vf-progress-bar.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+declare const VfProgressBar_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-progress-bar>` — the System 7 progress indicator.
+ *
+ * A 14px white track (`--vf-progress-track`) with a 1px black border.
+ * Determinate mode fills from the left in solid black
+ * (`--vf-progress-fill`) with a 1px black leading edge. Indeterminate
+ * mode shows chunky, stepped diagonal black/white barber stripes (the classic
+ * "busy" bar) animated with `steps()` timing so movement is deliberately
+ * steppy, not smooth.
+ *
+ * Exposes `role="progressbar"` with `aria-valuemin/max` and, when
+ * determinate, `aria-valuenow`.
+ *
+ * @csspart track - The outer bordered track.
+ * @csspart fill - The determinate fill or the indeterminate stripe layer.
+ * @cssprop [--vf-progress-fill=#000000] - determinate progress fill (solid
+ *   black)
+ * @cssprop --vf-progress-stripes - the indeterminate barber stripes — a 12×12
+ *   motif drawn as rects so the staircase stays whole system px at any scale,
+ *   on a 60-system-px tile (override the whole tile — consumer art renders as
+ *   a placed tile grid at that same geometry)
+ * @cssprop [--vf-progress-track=#ffffff] - progress track (white)
+ */
+export declare class VfProgressBar extends VfProgressBar_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    private readonly scale;
+    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    private readonly gridSnap;
+    /** Current progress, from 0 to `max`. Clamped for display and ARIA. */
+    value: number;
+    /** Maximum value (default 100). */
+    max: number;
+    /** Barber-pole "busy" mode; ignores `value` and omits `aria-valuenow`. */
+    indeterminate: boolean;
+    /**
+     * Accessible name for the bar, applied as the host's `aria-label` (which
+     * carries `role="progressbar"`). Especially useful in `indeterminate` mode,
+     * where there is no `aria-valuenow` to describe the bar. A consumer-supplied
+     * `aria-label`/`aria-labelledby` attribute is left alone.
+     */
+    label: string;
+    private track;
+    /** Track the fill area's width so the determinate fill can snap to it. */
+    private readonly trackSize;
+    /**
+     * The consumer's `--vf-progress-stripes` override, or `''` for the kit
+     * barber — which exact-fill path the strip takes (src/tile-grid.ts).
+     * Re-read every update; a runtime token swap wants a `requestUpdate()`.
+     */
+    private _pattern;
+    constructor();
+    /** Effective maximum: a non-positive `max` is treated as the default 100. */
+    private get effectiveMax();
+    /** `value` clamped to `[0, effectiveMax]`. */
+    private get clampedValue();
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-progress-bar': VfProgressBar;
+    }
+}
+export {};

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

@@ -0,0 +1,272 @@
+import { vfElement as e } from "../define.js";
+import { ScaleController as t, sys as n, sysLength as r, toSys as i } from "../scale.js";
+import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as o } from "../position.js";
+import { vfBase as s } from "../styles/recipes/host.js";
+import { tileImage as c, tileRects as l, tileSpan as u, vfTileMaskSize as d } from "../styles/recipes/tile.js";
+import { TileRasterCache as f, patternOverride as p, tileGrid 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";
+//#region src/components/vf-progress-bar.ts
+var w = 12, T = [
+	[
+		0,
+		0,
+		6,
+		1
+	],
+	[
+		1,
+		1,
+		6,
+		1
+	],
+	[
+		2,
+		2,
+		6,
+		1
+	],
+	[
+		3,
+		3,
+		6,
+		1
+	],
+	[
+		4,
+		4,
+		6,
+		1
+	],
+	[
+		5,
+		5,
+		6,
+		1
+	],
+	[
+		6,
+		6,
+		6,
+		1
+	],
+	[
+		0,
+		7,
+		1,
+		1
+	],
+	[
+		7,
+		7,
+		5,
+		1
+	],
+	[
+		0,
+		8,
+		2,
+		1
+	],
+	[
+		8,
+		8,
+		4,
+		1
+	],
+	[
+		0,
+		9,
+		3,
+		1
+	],
+	[
+		9,
+		9,
+		3,
+		1
+	],
+	[
+		0,
+		10,
+		4,
+		1
+	],
+	[
+		10,
+		10,
+		2,
+		1
+	],
+	[
+		0,
+		11,
+		5,
+		1
+	],
+	[
+		11,
+		11,
+		1,
+		1
+	]
+], E = c(w, w, l(T)), D = u(w), O = class extends o(v) {
+	static {
+		this.styles = [
+			s,
+			h,
+			y`
+      :host {
+        display: block;
+        height: calc(var(--vf-scale, 1) * 14px);
+      }
+      .track {
+        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;
+      }
+      .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;
+      }
+      .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)
+           over this themeable white ground. The art itself rides the
+           .vf-tile-strip child (src/tile-grid.ts): the kit's whole-surface
+           raster, or a consumer --vf-progress-stripes token's placed tile
+           grid at the token's documented 60-px tile geometry. This layer is
+           the strip's containing block and its clip. */
+        position: relative;
+        background-color: var(--vf-white, #fff);
+        --_vf-tile-image: var(--vf-progress-stripes, ${x(E)});
+      }
+      /* The animated strip: rests one 12px cell to the left (fully covering
+         the fill), and each cycle advances one whole cell in 4 chunky steps —
+         steppy, not smooth, wrapping with zero phase jump because the art's
+           period is the cell. The animated value is a layout property, so
+         every step is one quantized length paint-snapped like any placed
+         box — no CSS length ever accumulates a phase. */
+      .vf-tile-strip {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(var(--vf-scale, 1) * -12px);
+        animation: vf-barber 0.4s steps(4, end) infinite;
+      }
+      @keyframes vf-barber {
+        from {
+          left: calc(var(--vf-scale, 1) * -12px);
+        }
+        to {
+          left: 0;
+        }
+      }
+      /* Forced colors: the fill and track are the bar's whole reading, and
+         both have their own tokens with literal fallbacks the override
+         flattens to Canvas — remapped here like the palette tokens in vfBase.
+         The strip's raster art would keep its literal black ink (invisible on
+         a dark theme), so the strip hides and the layer repaints as a mask
+         over the ink token — same tile, same token a consumer overrides —
+         with the animation on the mask's position. The span-tiled mask keeps
+         the zoom caveat (no mask pipeline rasterizes exactly at a zoom-minted
+         scale); forced-colors-plus-zoom stays the accepted residual. */
+      @media (forced-colors: active) {
+        :host {
+          --vf-progress-fill: CanvasText;
+          --vf-progress-track: Canvas;
+        }
+        .fill.stripes {
+          background-color: var(--vf-progress-fill, CanvasText);
+          mask-image: var(--vf-progress-stripes, ${x(E)});
+          ${d(w)}
+          animation: vf-barber-mask 0.4s steps(4, end) infinite;
+        }
+        .fill.stripes .vf-tile-strip {
+          display: none;
+        }
+      }
+      @keyframes vf-barber-mask {
+        from {
+          mask-position: 0 0;
+        }
+        to {
+          mask-position: calc(var(--vf-scale, 1) * 12px) 0;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .fill.stripes,
+        .vf-tile-strip {
+          animation: none;
+        }
+      }
+    `
+		];
+	}
+	#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 f(), this.#t = this.attachInternals(), this.#t.role = "progressbar", this.#t.ariaValueMin = "0";
+	}
+	get effectiveMax() {
+		return this.max > 0 ? this.max : 100;
+	}
+	get clampedValue() {
+		return Math.min(Math.max(this.value, 0), this.effectiveMax);
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this.indeterminate && (this._pattern = p(this, "--vf-progress-stripes"));
+	}
+	updated(e) {
+		e.has("label") && (this.#t.ariaLabel = this.label || null), e.has("max") && (this.#t.ariaValueMax = String(this.effectiveMax)), (e.has("value") || e.has("max") || e.has("indeterminate")) && (this.#t.ariaValueNow = this.indeterminate ? null : String(this.clampedValue));
+	}
+	render() {
+		if (this.indeterminate) {
+			let e = i(this.trackSize.width, this), t = Math.max(D, Math.ceil((e + w) / D) * D), n = this._pattern ? m({
+				cols: t / D,
+				rows: 1,
+				tile: D
+			}) : b`<div
+            class="vf-tile-raster"
+            style="width:${r(t)};height:${r(24)};background-image:${this.#e.for(w, w, T, t, 24)}"
+          ></div>`;
+			return b`
+        <div class="track vf-snap" part="track">
+          <div class="fill stripes vf-tile-grid" part="fill">
+            <div class="vf-tile-strip">${n}</div>
+          </div>
+        </div>
+      `;
+		}
+		let e = this.clampedValue / this.effectiveMax, t = i(this.trackSize.width, this), a = t > 0 ? `${n(Math.round(e * t), this)}px` : `${e * 100}%`;
+		return b`
+      <div class="track vf-snap" part="track">
+        <div
+          class="fill ${e <= 0 ? "empty" : ""}"
+          part="fill"
+          style="width: ${a}"
+        ></div>
+      </div>
+    `;
+	}
+};
+a([S({ type: Number })], O.prototype, "value", void 0), a([S({ type: Number })], O.prototype, "max", void 0), a([S({
+	type: Boolean,
+	reflect: !0
+})], O.prototype, "indeterminate", void 0), a([S()], O.prototype, "label", void 0), a([C(".track")], O.prototype, "track", void 0), O = a([e("vf-progress-bar")], O);
+//#endregion
+export { O as VfProgressBar };

package/dist/components/vf-radio-group.d.ts

@@ -0,0 +1,109 @@
+import type { PropertyValues } from 'lit';
+import { VfFormControl } from '../form-control.js';
+declare const VfRadioGroup_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof VfFormControl;
+/**
+ * Groups `vf-radio` children, owning selection, keyboard navigation and the
+ * form value. Renders no chrome of its own; directly slotted radios stack
+ * vertically with a 6px gap (override with your own layout if needed —
+ * arbitrary markup containing radios also works).
+ *
+ * Form-associated: submits `value` under `name`, restores the initial value
+ * on form reset. Keeps children in sync — the child whose `value` matches
+ * the group's `value` is checked, all others unchecked.
+ *
+ * Keyboard (classic Mac behavior): the group is one tab stop (roving
+ * tabindex on the selected radio); ArrowUp/ArrowLeft and
+ * ArrowDown/ArrowRight move the selection AND select it, wrapping around
+ * and skipping disabled radios.
+ *
+ * @slot - `vf-radio` elements, or arbitrary markup containing them.
+ * @fires vf-change - When the selection changes via user interaction. `detail: { value: string }`.
+ * @fires input - Native event, dispatched from the group (the form-associated
+ *   surface) per user pick. A programmatic `value` set fires nothing.
+ * @fires change - Native event, dispatched from the group per user pick so
+ *   form delegation and framework bindings hear it.
+ */
+export declare class VfRadioGroup extends VfRadioGroup_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The value of the selected radio. An empty string means no selection
+     * (and nothing is submitted with the form).
+     */
+    value: string;
+    /** Form field name used when submitting. */
+    name: string;
+    /**
+     * Accessible name for the group, exposed as the `radiogroup`'s `aria-label`.
+     * Without it a caption-less group is announced anonymously.
+     */
+    label: string;
+    /** No radio checked — the state `required` calls a missing value. */
+    protected get valueMissing(): boolean;
+    /** The message a native required radio group reports. */
+    protected get valueMissingMessage(): string;
+    private readonly scale;
+    /**
+     * Re-syncs the group when its radios change structurally or by value —
+     * covers radios added/removed inside arbitrary wrapper markup (no top-level
+     * slotchange fires) and a child radio's value/disabled changing at runtime.
+     */
+    private mutationObserver;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Form-associated lifecycle: restores the initial value. */
+    formResetCallback(): void;
+    /** All descendant radios belonging to this group (nested groups excluded). */
+    private get radios();
+    /**
+     * Identity of the state {@link syncRadios} pushes down, and the value it
+     * last pushed. Everything the children receive derives from these two, so
+     * comparing them tells `updated()` whether a sync would be a no-op.
+     *
+     * It intentionally doesn't track the children themselves: a structural or
+     * value/disabled change reaches `syncRadios()` directly (via the mutation
+     * observer or slotchange), never through this gate.
+     */
+    private get syncKey();
+    private syncedKey;
+    /**
+     * Push group state down to the children: checked flags, group-disabled
+     * dimming, and the roving tabindex (the checked radio is the tab stop;
+     * with no selection, the first enabled radio is).
+     */
+    private syncRadios;
+    /**
+     * Moves keyboard focus to the group's roving tab stop — the checked radio,
+     * else the first enabled one. Overridden because the platform's `focus()`
+     * is a silent no-op on this host (no `delegatesFocus`, no host tabindex),
+     * so `vf-label for` (which calls `target.focus()`) never reached the group.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Select a radio, sync everything, and fire `vf-change` if value changed.
+     *
+     * The sync stays synchronous — a `vf-change` listener must see the children
+     * already carrying the new selection, not the state of a pending update —
+     * and `updated()` then skips its own pass via the sync key.
+     */
+    private selectRadio;
+    /** A child radio was clicked or Space-selected: adopt it. */
+    private handleRadioChange;
+    /** Arrow keys move the selection AND select (classic Mac behavior). */
+    private handleKeydown;
+    /**
+     * With no value of its own, adopt a pre-checked radio's value — and treat
+     * it as the form-reset default.
+     */
+    private adoptPreChecked;
+    private handleSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-radio-group': VfRadioGroup;
+    }
+}
+export {};

package/dist/components/vf-radio-group.js

@@ -0,0 +1,105 @@
+import { vfElement as e } from "../define.js";
+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 } from "../position.js";
+import { vfBase as i } from "../styles/recipes/host.js";
+import { emit as a, emitNative as o } from "../events.js";
+import { VfFormControl as s } from "../form-control.js";
+import { VfRadio as c } from "./vf-radio.js";
+import { css as l, html as u } from "lit";
+import { property as d } from "lit/decorators.js";
+//#region src/components/vf-radio-group.ts
+var f = class extends r(s) {
+	static {
+		this.styles = [i, l`
+      :host {
+        display: block;
+      }
+      ::slotted(vf-radio) {
+        display: flex;
+      }
+      ::slotted(vf-radio:not(:first-child)) {
+        margin-top: calc(var(--vf-scale, 1) * 6px);
+      }
+    `];
+	}
+	get valueMissing() {
+		return this.value === "";
+	}
+	get valueMissingMessage() {
+		return "Please select one of these options.";
+	}
+	constructor() {
+		super(), this.value = "", this.name = "", this.label = "", this.scale = new t(this), this.mutationObserver = null, this.syncedKey = null, this.handleRadioChange = (e) => {
+			let t = e.target;
+			t === this || !(t instanceof c) || t.closest("vf-radio-group") === this && (this.isDisabled || t.disabled || this.selectRadio(t, !1));
+		}, this.handleKeydown = (e) => {
+			if (this.isDisabled) return;
+			let t = e.key, n = 0;
+			if (t === "ArrowDown" || t === "ArrowRight") n = 1;
+			else if (t === "ArrowUp" || t === "ArrowLeft") n = -1;
+			else return;
+			e.preventDefault();
+			let r = this.radios.filter((e) => !e.disabled);
+			if (r.length === 0) return;
+			let i = e.target instanceof c ? e.target : this.radios.find((e) => e.checked), a = i ? r.indexOf(i) : -1, o = r[a === -1 ? n > 0 ? 0 : r.length - 1 : (a + n + r.length) % r.length];
+			o && this.selectRadio(o, !0);
+		}, this.handleSlotChange = () => {
+			this.adoptPreChecked(), this.syncRadios();
+		}, this.internals.role = "radiogroup", this.addEventListener("keydown", this.handleKeydown), this.addEventListener("vf-change", this.handleRadioChange);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.value !== "" && this.latchFormDefault(this.value), this.mutationObserver ??= new MutationObserver((e) => {
+			e.every((e) => e.type === "attributes" && e.target === this) || this.syncRadios();
+		}), this.mutationObserver.observe(this, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["value", "disabled"]
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.mutationObserver?.disconnect();
+	}
+	render() {
+		return u`<slot @slotchange=${this.handleSlotChange}></slot>`;
+	}
+	willUpdate(e) {
+		this.hasUpdated || this.adoptPreChecked(), super.willUpdate(e);
+	}
+	updated(e) {
+		let t = this.disabledChanged(e);
+		(e.has("value") || t) && this.syncFormValue(this.value === "" ? null : this.value), e.has("label") && (this.internals.ariaLabel = this.label || null), t && (this.internals.ariaDisabled = this.isDisabled ? "true" : "false"), this.syncedKey !== this.syncKey && this.syncRadios();
+	}
+	formResetCallback() {
+		this.value = this.formDefault("");
+	}
+	get radios() {
+		return [...this.querySelectorAll("vf-radio")].filter((e) => e.closest("vf-radio-group") === this);
+	}
+	get syncKey() {
+		return `${this.isDisabled ? "d" : "e"}:${this.value}`;
+	}
+	syncRadios() {
+		let e = this.radios, t = this.isDisabled;
+		this.syncedKey = this.syncKey;
+		let n = this.value === "" ? void 0 : e.find((e) => e.value === this.value), r = n && !n.disabled ? n : void 0;
+		r ||= e.find((e) => !e.disabled);
+		for (let i of e) i.checked = i === n, i.groupDisabled = t, i.tabIndex = !t && i === r ? 0 : -1;
+	}
+	focus(e) {
+		this.radios.find((e) => e.tabIndex === 0)?.focus(e);
+	}
+	selectRadio(e, t) {
+		let n = this.value !== e.value;
+		this.value = e.value, this.syncRadios(), t && e.focus(), n && (a(this, "vf-change", { value: this.value }), o(this, "input"), o(this, "change"));
+	}
+	adoptPreChecked() {
+		if (this.value !== "") return;
+		let e = this.radios.find((e) => e.checked);
+		e && e.value !== "" && (this.value = e.value, this.latchFormDefault(this.value));
+	}
+};
+n([d()], f.prototype, "value", void 0), n([d({ reflect: !0 })], f.prototype, "name", void 0), n([d()], f.prototype, "label", void 0), f = n([e("vf-radio-group")], f);
+//#endregion
+export { f as VfRadioGroup };

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

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+declare const VfRadio_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & (abstract new (...args: any[]) => import("../toggle-control.js").VfToggleControlInterface) & typeof LitElement;
+/**
+ * A single System 7 radio button: a 13×13 white circle with the pixel-exact
+ * 1-bit ring and centered dot traced from the Classic Macintosh UI Kit sprite
+ * (replacing the anti-aliased `border-radius` rendering). The ring thickens
+ * while pressed, exactly like the original control.
+ *
+ * Radios are meant to live inside a `vf-radio-group`, which owns selection
+ * state, the form value and the roving tabindex. A `vf-radio` is NOT itself
+ * form-associated. Clicking (or pressing Space on) an unselected radio
+ * dispatches `vf-change`; the containing group listens, selects it and
+ * unselects its siblings.
+ *
+ * @slot - The label, rendered to the right of the circle with a 6px gap.
+ * @csspart circle - The 13×13 radio circle.
+ * @csspart label - The label wrapper around the slot.
+ * @fires vf-change - When selected by user interaction. `detail: { value: string }`.
+ */
+export declare class VfRadio extends VfRadio_base {
+    static styles: import("lit").CSSResult[];
+    /** Whether this radio is selected. Managed by the containing group. */
+    checked: boolean;
+    /** Disables this single radio: the label dims to gray; circle and dot stay black. */
+    disabled: boolean;
+    /** The value the containing `vf-radio-group` reports when selected. */
+    value: string;
+    /**
+     * True while the containing `vf-radio-group` is disabled. Managed by the
+     * group — not intended to be set by consumers.
+     */
+    groupDisabled: boolean;
+    private readonly internals;
+    constructor();
+    /**
+     * A radio attaches its own internals: it is deliberately NOT form-associated
+     * (the enclosing `vf-radio-group` is the form surface), so there is no
+     * `VfFormControl` handle to inherit.
+     */
+    protected get toggleInternals(): ElementInternals;
+    /** This radio's own `disabled`, or its group's. */
+    protected get toggleDisabled(): boolean;
+    /**
+     * Inside a `vf-radio-group` the group is the single source of truth: it runs
+     * the roving tabindex and flips `checked` on the whole set. Standalone, this
+     * radio owns both — otherwise a bare radio would be keyboard-dead (its Space
+     * handler unreachable) and would never visibly toggle.
+     */
+    protected get externallyCoordinated(): boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    /** Click/Space on an enabled, unselected radio selects it. */
+    protected activate(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-radio': VfRadio;
+    }
+}
+export {};