vintage-frames 0.1.0

package/dist/focus-modality.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Which input modality last drove the page — the signal a control consults to
+ * decide whether an incoming focus deserves a visible focus mark.
+ *
+ * `:focus-visible` answers that question for every control in the kit except
+ * the editable fields. The selector is specified to match ANY focus of an
+ * element that takes keyboard input, so a text field clicked with the mouse
+ * matches it exactly as a tabbed-to one does — unlike a button, which matches
+ * only from the keyboard (`npm run verify:focus` asserts both halves). That is
+ * the right default for a browser drawing a ring nobody asked for on a field
+ * with no other focus affordance. It is the wrong one here, where a click has
+ * already put the insertion point on screen and the kit draws its own mark.
+ *
+ * Why the document, rather than latching the field's own `pointerdown` the way
+ * `vf-slider` does for its ring: the pointer event that lands focus in a field
+ * is routinely not on the field. A `vf-label` `for` caption focuses its control
+ * from a click on the caption, and all the field sees is a programmatic
+ * `focus()` — locally indistinguishable from Tab. Watching the page catches
+ * that, and any other control that focuses a field on the user's behalf.
+ *
+ * The default is `'keyboard'`: focus that arrives with no preceding input at
+ * all is assistive tech, an `autofocus`, or a script, and all three should be
+ * marked. Only an observed pointer suppresses the mark.
+ */
+import type { LitElement, ReactiveController } from 'lit';
+export type FocusModality = 'keyboard' | 'pointer';
+/** The modality that last drove the page. `'keyboard'` until a pointer says otherwise. */
+export declare function focusModality(): FocusModality;
+/**
+ * Start watching the page's input modality; returns the release function.
+ *
+ * The two listeners are shared by every watcher and refcounted, so a page full
+ * of fields adds one capture-phase `pointerdown` and one `keydown` to the
+ * document, not one pair each. Both are passive and read-only — they set a
+ * variable and nothing else. Releasing the last watcher removes them, so a kit
+ * torn off a page leaves nothing behind (calling the release twice is a no-op).
+ *
+ * Capture phase, because the modality has to be recorded before the focus it
+ * explains: a `pointerdown` that a control stops from bubbling still moved the
+ * focus, and a `keydown` on the element being tabbed away from is the thing
+ * that makes the next focus a keyboard one.
+ *
+ * Both handlers assign one variable and do nothing else — no DOM reads, no
+ * `preventDefault` (a passive listener could not anyway), no
+ * `stopPropagation` — so a host page's own handlers see every event exactly as
+ * they would without the kit. The one way a page can defeat the tracker is to
+ * stop these events before the document sees them, e.g. a window-capture
+ * listener calling `stopPropagation()`. The modality then goes stale and a
+ * field may wear its mark after a click: the failure mode is a focus rule
+ * shown too eagerly, never an exception or a swallowed event.
+ */
+export declare function trackFocusModality(): () => void;
+/**
+ * Whether a control should be wearing the kit's dashed focus rule right now:
+ * {@link focusModality} resolved against the host's own focus, as one reactive
+ * flag.
+ *
+ * Four controls need this rather than `:focus-visible`, for two different
+ * reasons (SPEC §4). The editable fields, because that selector is specified to
+ * match *any* focus of an element which takes keyboard input, so it is already
+ * true for a clicked text field. And the three that suppress the browser's own
+ * mouse focus so a press-drag gesture can own the pointer — `vf-select`,
+ * `vf-menu`, `vf-slider` — then call `focus()` themselves, which Blink reads as
+ * a *visible* focus, making `:focus-visible` true after a pure mouse gesture.
+ * One controller so the answer can't drift between them.
+ *
+ * `focusin`/`focusout`, not `focus`/`blur`: the focus usually lands on an
+ * element inside the shadow root, and only the bubbling, composed pair crosses
+ * that boundary to reach the host. Focus moving *within* the component — a
+ * `vf-select` pill handing off to its option rows, a `vf-menu` title to its
+ * dropped panel — is not leaving, so the mark survives it and the host takes it
+ * back when the panel closes.
+ */
+export declare class FocusRuleController implements ReactiveController {
+    #private;
+    private readonly host;
+    constructor(host: LitElement);
+    /** True while the host's focus should be marked. */
+    get marked(): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Force the mark on: the keyboard just drove the control, whatever put the
+     * focus there. `vf-slider` calls this from a handled arrow key, so a slider
+     * clicked and then nudged with the keys starts showing its rule.
+     */
+    reveal(): void;
+    /**
+     * Force the mark off. A pointer press on an ALREADY-focused control moves no
+     * focus and so fires no `focusin` — the one pointer route this controller
+     * cannot see for itself.
+     */
+    suppress(): void;
+}

package/dist/focus-modality.js

@@ -0,0 +1,56 @@
+//#region src/focus-modality.ts
+var e = "keyboard", t = 0, n = () => {
+	e = "pointer";
+}, r = () => {
+	e = "keyboard";
+};
+function i() {
+	return e;
+}
+function a() {
+	t++ === 0 && (document.addEventListener("pointerdown", n, {
+		capture: !0,
+		passive: !0
+	}), document.addEventListener("keydown", r, {
+		capture: !0,
+		passive: !0
+	}));
+	let e = !1;
+	return () => {
+		e || (e = !0, --t === 0 && (document.removeEventListener("pointerdown", n, { capture: !0 }), document.removeEventListener("keydown", r, { capture: !0 })));
+	};
+}
+var o = class {
+	#e = !1;
+	#t;
+	constructor(e) {
+		this.host = e, e.addController(this);
+	}
+	get marked() {
+		return this.#e;
+	}
+	hostConnected() {
+		this.#t = a(), this.host.addEventListener("focusin", this.#r), this.host.addEventListener("focusout", this.#i);
+	}
+	hostDisconnected() {
+		this.host.removeEventListener("focusin", this.#r), this.host.removeEventListener("focusout", this.#i), this.#t?.(), this.#t = void 0, this.#n(!1);
+	}
+	reveal() {
+		this.#n(!0);
+	}
+	suppress() {
+		this.#n(!1);
+	}
+	#n(e) {
+		e !== this.#e && (this.#e = e, this.host.requestUpdate());
+	}
+	#r = () => {
+		this.#n(e === "keyboard");
+	};
+	#i = (e) => {
+		let t = e.relatedTarget;
+		t instanceof Node && (this.host.contains(t) || this.host.renderRoot.contains(t)) || this.#n(!1);
+	};
+};
+//#endregion
+export { o as FocusRuleController, i as focusModality, a as trackFocusModality };

package/dist/form-control.d.ts

@@ -0,0 +1,247 @@
+import { LitElement, nothing, type PropertyValues } from 'lit';
+/**
+ * Shared base for the kit's form-associated controls (SPEC §4).
+ *
+ * Owns the boilerplate every one of them repeated: the `ElementInternals`
+ * handle, the reflected `disabled` property, the `formDisabled` state fed by
+ * `formDisabledCallback` (an ancestor `<fieldset disabled>`), the resolved
+ * {@link isDisabled} getter, the form-reset default latch
+ * ({@link latchFormDefault} / {@link formDefault}), and — crucially — the
+ * disabled-guarded {@link syncFormValue} funnel every subclass routes its
+ * `setFormValue` through, so a disabled control can never leak a value into
+ * submission.
+ *
+ * Subclasses supply their own value semantics, ARIA and (where needed) a
+ * `formResetCallback` restoring their captured default.
+ */
+export declare class VfFormControl extends LitElement {
+    #private;
+    /** Participates in native forms via ElementInternals. */
+    static formAssociated: boolean;
+    /** Form + ARIA internals; attached once here for every subclass. */
+    protected readonly internals: ElementInternals;
+    /**
+     * Disables the control: it stops responding and submits no value. Each
+     * control dims per SPEC §1 (typically the label greys while the 1-bit chrome
+     * stays black).
+     */
+    disabled: boolean;
+    /** True while an ancestor `<fieldset disabled>` disables this control. */
+    protected formDisabled: boolean;
+    /** Effective disabled state: the `disabled` prop OR an ancestor fieldset. */
+    get isDisabled(): boolean;
+    /**
+     * Form-associated lifecycle: the browser calls this when this control's
+     * disabled state changes — an ancestor `<fieldset disabled>`, or the
+     * element's OWN `disabled` attribute (the browser counts both).
+     *
+     * Also mirrored as the `form-disabled` custom state: `disabled` reflects as
+     * an attribute a stylesheet can see, but a `<fieldset disabled>` ancestor
+     * lands here in otherwise-private state — `:state(form-disabled)` is the
+     * one selector that lets consumer CSS style that case. Optional-chained for
+     * engines without `CustomStateSet`.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Form-associated lifecycle: the browser hands back state it stored for
+     * this control — a bfcache/session restore, or a browser autofill pass.
+     * The kit's controls all submit through single-argument `setFormValue`, so
+     * the stored state IS the last submitted string. Without this callback,
+     * every native input in the form repopulates on restore while the `vf-*`
+     * controls silently keep their defaults.
+     */
+    formStateRestoreCallback(state: string | File | FormData | null, _mode: 'restore' | 'autofill'): void;
+    /**
+     * Maps stored form state back onto the control's own value semantics. The
+     * default covers the string-valued majority (the fields, `vf-select`,
+     * `vf-radio-group`); `vf-checkbox` (a checked flag) and `vf-slider` (a
+     * number) override.
+     */
+    protected applyFormState(state: string): void;
+    /**
+     * Submit `value` under the control's `name` — unless the control is disabled,
+     * in which case nothing is submitted (SPEC §4). The single guarded funnel for
+     * every subclass's form value, so the disabled contract holds in one place.
+     */
+    protected syncFormValue(value: string | File | FormData | null): void;
+    /**
+     * Requires a value before the associated form submits (SPEC §4): an empty
+     * control fails constraint validation with `valueMissing`, exactly like a
+     * native `required`. What "empty" means is each control's own
+     * {@link valueMissing}; a control with no required semantics (a slider
+     * always has a value, a swatch submits nothing) never fails it, the way a
+     * native range input never does.
+     */
+    required: boolean;
+    /**
+     * Installs a custom validity message — the native channel: a non-empty
+     * string makes the control invalid with exactly that message, `''` clears
+     * it.
+     */
+    setCustomValidity(message: string): void;
+    /** The control's current `ValidityState`, as on a native control. */
+    get validity(): ValidityState;
+    /** The message of the currently failing constraint, `''` while valid. */
+    get validationMessage(): string;
+    /**
+     * Whether the control is a candidate for constraint validation — false
+     * while disabled or readonly, per HTML's barring rules (the browser
+     * computes this from the reflected attributes).
+     */
+    get willValidate(): boolean;
+    /** True when the control satisfies its constraints; fires `invalid` if not. */
+    checkValidity(): boolean;
+    /** {@link checkValidity} plus the browser's own error UI on failure. */
+    reportValidity(): boolean;
+    /**
+     * Whether the control is empty for `required`'s purposes. Overridden by the
+     * controls a value can be missing from — `value === ''` on the fields, the
+     * select and the radio group, unchecked on the checkbox. The default never
+     * fails, which is what makes a bare `required` inert on the rest.
+     */
+    protected get valueMissing(): boolean;
+    /** The `valueMissing` message; subclasses match their native counterpart's. */
+    protected get valueMissingMessage(): string;
+    /**
+     * The single funnel every validity write goes through — the
+     * {@link syncFormValue} shape, one place for the contract: the flags are
+     * computed from the live properties (`required` × {@link valueMissing},
+     * plus any custom error) and installed with `setValidity`, so `:invalid`
+     * matches on the host and `form.reportValidity()` blocks exactly as it
+     * would on a native control. Runs from {@link willUpdate}, before render,
+     * so the same update's template reads fresh validity. Also mirrors
+     * `aria-required`/`aria-invalid` through internals for the controls whose
+     * role sits on the host — internals lose to a consumer's own host
+     * attribute, which is the correct precedence direction.
+     */
+    protected syncValidity(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Capture the control's form-reset default. Only the first call latches, so
+     * lifecycle paths that can run more than once — reconnects, repeated
+     * slotchanges — may call it unconditionally. WHEN to call it is each
+     * control's own contract: most latch on first connect, `vf-select` waits
+     * until options exist, `vf-radio-group` lets a pre-checked radio adopted on
+     * slotchange claim an unauthored default.
+     */
+    protected latchFormDefault(value: unknown): void;
+    /**
+     * The latched form-reset default, or `fallback` while nothing has latched.
+     * The cast is sound because a control only ever latches its own value type.
+     */
+    protected formDefault<T>(fallback: T): T;
+    /**
+     * True when this update changed the *resolved* disabled state — the gate a
+     * subclass's `updated()` should use before re-running its form value, ARIA
+     * or tab-stop writes.
+     *
+     * It exists because {@link formDisabled} is protected, so `keyof this` can't
+     * name it and a `PropertyValues<this>` gate silently can't test for it: a
+     * `changed.has('disabled')` check compiles, reads as complete, and misses
+     * every ancestor `<fieldset disabled>` — which is the path that must clear a
+     * control's submitted value. One named predicate keeps that trap in one
+     * place instead of in each subclass's gate.
+     */
+    protected disabledChanged(changed: PropertyValues): boolean;
+}
+/**
+ * {@link VfFormControl} plus the name/description bridge, for the controls
+ * whose **role sits on a shadow-internal node** — `vf-button`, `vf-select`,
+ * `vf-swatch`, and the three fields via `VfTextControlBase` (SPEC §4).
+ *
+ * That one structural fact is the whole membership rule. On those controls the
+ * host is a generic wrapper AccName never consults, and a host-level IDREF
+ * cannot reach into a shadow tree, so the platform's own words — `aria-label`,
+ * `aria-labelledby`, `<label for>`, `aria-describedby` — land on nothing unless
+ * something resolves them to text and hands them inward. This class is that
+ * something.
+ *
+ * The controls whose role sits on the **host** (`vf-checkbox`,
+ * `vf-radio-group`, `vf-slider`) deliberately stay on the plain base: the
+ * platform reads their host attributes directly, so a bridge there would
+ * duplicate a working channel — and an inherited property that renders nothing
+ * is exactly the "advertised API that silently does nothing" this split exists
+ * to make impossible. `verify:manifest` holds the line: a tag whose manifest
+ * carries `description` must call {@link renderDescription} in its own source.
+ */
+export declare class VfShadowRoleControl extends VfFormControl {
+    /**
+     * The host-level ARIA attributes the bridge mirrors inward, observed so a
+     * consumer writing one after upgrade re-renders the control. They are
+     * deliberately not reactive properties: each has an IDL accessor on
+     * `Element` already, and a Lit `@property` would shadow the platform member
+     * (the kit's `align`/`draggable` trap) — so they are observed by name and
+     * read at render time, the `forwardedAttributes` shape.
+     */
+    private static readonly bridgedAriaAttributes;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /**
+     * Form-associated lifecycle: the association changed, so the `<label for>`
+     * set feeding {@link hostLabel} may have too — re-render whatever mirrors it.
+     */
+    formAssociatedCallback(_form: HTMLFormElement | null): void;
+    /**
+     * The accessible name the *host* carries. A consumer's `aria-label`,
+     * `aria-labelledby` or `<label for>` used to be silently inert on these
+     * controls, so the bridge resolves them to text for the control to hand to
+     * its inner focusable element. The explicit `label` property still wins:
+     * templates read `this.label || this.hostLabel`.
+     *
+     * Precedence is html-aam's — `aria-labelledby`, then `aria-label`, then the
+     * associated `<label for>` elements (`internals.labels`). Referenced text is
+     * flattened at render time, so an edit to a referenced element's *text*
+     * lands on the control's next render rather than instantly — the one
+     * divergence from a native control, recorded in SPEC §4.
+     */
+    protected get hostLabel(): string;
+    /**
+     * The ARIA half of {@link hostLabel} — `aria-labelledby`, then `aria-label`,
+     * in html-aam's order — without the `<label for>` leg.
+     *
+     * Split out because that leg does not apply to every control. A `<button>`
+     * is not a labelable element, so no caption names a native one and none
+     * should name a `vf-button` either (`verify:names` asserts that a `vf-label
+     * for=` leaves a button's own name alone). What a button DOES need is the
+     * other half: on a control whose role sits on a shadow-internal node, a
+     * consumer's `aria-label` is otherwise inert, because it lands on a generic
+     * host AccName never consults — so an icon button labelled the ordinary way
+     * was announced by its glyph.
+     */
+    protected get hostAriaLabel(): string;
+    /**
+     * Description for the control — hint text, a format, a unit. A host-level
+     * `aria-describedby` cannot reach a focusable element inside a shadow root,
+     * so there was structurally no way to describe a field; this property is
+     * that channel. It renders as a hidden span in the control's own shadow root
+     * with the inner control's `aria-describedby` pointing at it — the
+     * shadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A
+     * host-level `aria-describedby` is bridged into the same span when this
+     * property is empty, and a failing constraint's {@link validationMessage}
+     * joins it too, so AT hears the error where it hears the hint.
+     *
+     * Host-role controls get neither half: their `aria-describedby` already
+     * works, and their validation message reaches AT the way a native control's
+     * does — `aria-invalid` plus the browser's own validation UI, not AccName.
+     */
+    description: string;
+    /**
+     * What {@link renderDescription}'s span carries: the current validation
+     * message while the control is invalid, then the description (the property,
+     * or the bridged host `aria-describedby` text).
+     */
+    protected get descriptionText(): string;
+    /**
+     * `aria-describedby` value for the inner control — set only while the span
+     * has something to say, so an idle control isn't announced as described by
+     * nothing.
+     */
+    protected get describedBy(): string | typeof nothing;
+    /**
+     * The hidden span the inner control's `aria-describedby` points at.
+     * `hidden` keeps it out of the page; AccName still resolves `display: none`
+     * reference targets (the fact vf-window's utility title patch leans on), so
+     * the text reaches AT without painting.
+     */
+    protected renderDescription(): import("lit-html").TemplateResult<1> | typeof nothing;
+}

package/dist/form-control.js

@@ -0,0 +1,127 @@
+import e from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { LitElement as t, html as n, nothing as r } from "lit";
+import { property as i, state as a } from "lit/decorators.js";
+//#region src/form-control.ts
+function o(e, t) {
+	let n = e.getAttribute(t);
+	if (!n) return "";
+	let r = e.getRootNode();
+	return r instanceof Document || r instanceof ShadowRoot ? n.split(/\s+/).filter(Boolean).map((e) => r.getElementById(e)?.textContent?.trim() ?? "").filter(Boolean).join(" ") : "";
+}
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.internals = this.attachInternals(), this.disabled = !1, this.formDisabled = !1, this.required = !1, this.#e = "", this.#n = !1;
+	}
+	static {
+		this.formAssociated = !0;
+	}
+	get isDisabled() {
+		return this.disabled || this.formDisabled;
+	}
+	formDisabledCallback(e) {
+		let t = this.formDisabled !== e;
+		this.formDisabled = e, e ? this.internals.states?.add("form-disabled") : this.internals.states?.delete("form-disabled"), t && this.isUpdatePending && queueMicrotask(() => this.requestUpdate());
+	}
+	formStateRestoreCallback(e, t) {
+		typeof e == "string" && this.applyFormState(e);
+	}
+	applyFormState(e) {
+		this.value = e;
+	}
+	syncFormValue(e) {
+		this.internals.setFormValue(this.isDisabled ? null : e);
+	}
+	#e;
+	setCustomValidity(e) {
+		this.#e = e, this.syncValidity(), this.requestUpdate();
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	get valueMissing() {
+		return !1;
+	}
+	get valueMissingMessage() {
+		return "Please fill out this field.";
+	}
+	syncValidity() {
+		let e = this.required && this.valueMissing, t = this.#e || (e ? this.valueMissingMessage : "");
+		this.internals.setValidity({
+			customError: this.#e !== "",
+			valueMissing: e
+		}, t || void 0), this.internals.ariaRequired = this.required ? "true" : null, this.internals.ariaInvalid = this.internals.validity.valid ? null : "true";
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this.syncValidity();
+	}
+	#t;
+	#n;
+	latchFormDefault(e) {
+		this.#n || (this.#n = !0, this.#t = e);
+	}
+	formDefault(e) {
+		return this.#n ? this.#t : e;
+	}
+	disabledChanged(e) {
+		return e.has("disabled") || e.has("formDisabled");
+	}
+};
+e([i({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([a()], s.prototype, "formDisabled", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "required", void 0);
+var c = class e extends s {
+	constructor(...e) {
+		super(...e), this.description = "";
+	}
+	static {
+		this.bridgedAriaAttributes = [
+			"aria-label",
+			"aria-labelledby",
+			"aria-describedby"
+		];
+	}
+	static get observedAttributes() {
+		return [...super.observedAttributes, ...e.bridgedAriaAttributes];
+	}
+	attributeChangedCallback(t, n, r) {
+		super.attributeChangedCallback(t, n, r), e.bridgedAriaAttributes.includes(t) && this.requestUpdate();
+	}
+	formAssociatedCallback(e) {
+		this.requestUpdate();
+	}
+	get hostLabel() {
+		return this.hostAriaLabel || [...this.internals.labels].map((e) => e.textContent?.trim() ?? "").filter(Boolean).join(" ");
+	}
+	get hostAriaLabel() {
+		return o(this, "aria-labelledby") || this.getAttribute("aria-label")?.trim() || "";
+	}
+	get descriptionText() {
+		return [this.internals.validity.valid ? "" : this.internals.validationMessage, this.description || o(this, "aria-describedby")].filter(Boolean).join(" ");
+	}
+	get describedBy() {
+		return this.descriptionText ? "description" : r;
+	}
+	renderDescription() {
+		let e = this.descriptionText;
+		return e ? n`<span id="description" hidden>${e}</span>` : r;
+	}
+};
+e([i()], c.prototype, "description", void 0);
+//#endregion
+export { s as VfFormControl, c as VfShadowRoleControl };

package/dist/glyphs.d.ts

@@ -0,0 +1,117 @@
+import type { TemplateResult } from 'lit';
+/**
+ * Pixel-exact 1-bit glyphs. Each glyph's `d` is a run-length-merged fill path
+ * on the System 7 pixel grid, one rectangle per run of ink. Rendered at its
+ * native pixel size (or an integer multiple) with `shape-rendering: crispEdges`
+ * it is pixel-exact — so consumers MUST size the SVG to `w`×`h` px (or a whole
+ * multiple), never a fractional scale, or the 1-bit edges snap unevenly to the
+ * device grid. It inherits `currentColor` (fully themeable) and ships as inline
+ * SVG — no external raster assets, matching the library's zero-CSS,
+ * `var(--vf-*)`-themeable design (see SPEC §1).
+ *
+ * This file is the authoritative source for these marks (the glyph-sprites note
+ * at the top of SPEC.md). They replace the earlier anti-aliased approximations
+ * (the checkbox ✕ was a 1.5px SVG stroke; the radio was a `border-radius: 50%`
+ * box; the menu ✓ was a font-dependent Unicode character; the popup ▼ was a
+ * CSS-border triangle) with the exact System 7 pixel shapes.
+ */
+export interface Glyph {
+    /** Native grid width (viewBox units = source-sprite pixels). */
+    readonly w: number;
+    /** Native grid height. */
+    readonly h: number;
+    /** SVG path data (a union of 1×N pixel-run rectangles). */
+    readonly d: string;
+}
+/** Checkbox ✕ — the interior corner-to-corner cross (`check Selected=True`). */
+export declare const CHECKBOX_X: Glyph;
+/** Radio solid disc — the white control face under the ring (`radio` outline, flood-filled). */
+export declare const RADIO_FACE: Glyph;
+/** Radio ring — the 1px pixel circle outline (`radio Selected=False`). */
+export declare const RADIO_RING: Glyph;
+/** Radio ring, pressed — the 2px-thick outline (`radio State=Press`). */
+export declare const RADIO_RING_PRESSED: Glyph;
+/** Radio dot — the centered pixel disc shown when selected (`radio Selected=True` minus ring). */
+export declare const RADIO_DOT: Glyph;
+/** Menu / popup ✓ checkmark (`Symbols/Check.png`). */
+export declare const CHECKMARK: Glyph;
+/**
+ * Popup-menu ▼ caret (`Symbols/Caret Down.png`).
+ *
+ * Also the *scroll* arrow a clipped popup shows in its bottom row slot: a
+ * screenshot of a real System 7 popup overflowing the screen (Find File's
+ * criteria menu, captured under Infinite Mac at 2×) puts a 22×12 device-pixel
+ * triangle there, which is this exact 11×6 shape — the popup's own ▼
+ * vocabulary, reused rather than a second arrow art.
+ */
+export declare const CARET_DOWN: Glyph;
+/**
+ * The ▲ a clipped popup shows in its *top* row slot — {@link CARET_DOWN}
+ * mirrored vertically (the shape is left-right symmetric, so the mirror is its
+ * six rows in reverse order). Synthesized rather than traced: the reference
+ * sheets carry no scrolling menu, and the overflow screenshot above happened to
+ * catch a list clipped only at the bottom. If a top-clipped reference turns up,
+ * retrace both. Same synthesis convention as {@link STEPPER_UP_FILL}.
+ */
+export declare const CARET_UP: Glyph;
+/**
+ * The "little arrows" stepper at rest — a rounded 1-bit frame enclosing hollow
+ * up/down arrows (`Little arrows.png`), used by `vf-number-field`.
+ */
+export declare const STEPPER: Glyph;
+/**
+ * The horizontal slider thumb — a shield-shaped handle with three vertical grip
+ * lines and a pointed bottom (`Slider Handle.png`), used by `vf-slider`. Traced
+ * pixel-exact from the sprite: an 11×12 hollow 1-bit frame (flat top, tapering
+ * to a point) enclosing the three grip strokes. The grip lines sit at columns
+ * 3/5/7 so the middle stroke (x5) marks the thumb's value point.
+ */
+export declare const SLIDER_THUMB: Glyph;
+/**
+ * Solid white face for the slider thumb — the filled shield silhouette drawn
+ * *behind* {@link SLIDER_THUMB} so the handle is opaque (the rail passes behind
+ * it, not through it). Same 11×12 grid, flood-filled to the outline's extent on
+ * each row. Analogous to {@link RADIO_FACE} under the radio ring.
+ */
+export declare const SLIDER_THUMB_FACE: Glyph;
+/**
+ * Solid up-arrow fill for the pressed state — overlaid on {@link STEPPER} while
+ * the up arrow is held. Synthesized from the rest sprite (the only reference we
+ * have) by filling the hollow arrow solid, matching the kit's scroll-arrow
+ * hollow→solid press convention.
+ */
+export declare const STEPPER_UP_FILL: Glyph;
+/** Solid down-arrow fill for the pressed state (mirror of {@link STEPPER_UP_FILL}). */
+export declare const STEPPER_DOWN_FILL: Glyph;
+/**
+ * Authentic System 7 scroll arrows (arrow + stem), traced from the Classic
+ * Macintosh UI Kit sprites — a hollow outline at rest that fills solid black
+ * while the button is pressed (the `*_FILL` variants). Each is stated on the
+ * scrollbar's full 16-unit cell (same convention as {@link STEPPER}): the
+ * outermost ring of that cell is the frame and divider lines, which the DOM
+ * rail draws as real borders, so the rail renders these through a
+ * `viewBox="1 1 14 14"` window onto the interior (src/scroll-rail.ts) — the
+ * ink never reaches the outer ring, so nothing is cropped.
+ */
+export declare const SCROLL_ARROW_UP: Glyph;
+/** {@link SCROLL_ARROW_UP}, pressed — the arrow flood-filled solid. */
+export declare const SCROLL_ARROW_UP_FILL: Glyph;
+/** The ▼ scroll arrow (vertical increment). */
+export declare const SCROLL_ARROW_DOWN: Glyph;
+/** {@link SCROLL_ARROW_DOWN}, pressed. */
+export declare const SCROLL_ARROW_DOWN_FILL: Glyph;
+/** The ◀ scroll arrow (horizontal decrement). */
+export declare const SCROLL_ARROW_LEFT: Glyph;
+/** {@link SCROLL_ARROW_LEFT}, pressed. */
+export declare const SCROLL_ARROW_LEFT_FILL: Glyph;
+/** The ▶ scroll arrow (horizontal increment). */
+export declare const SCROLL_ARROW_RIGHT: Glyph;
+/** {@link SCROLL_ARROW_RIGHT}, pressed. */
+export declare const SCROLL_ARROW_RIGHT_FILL: Glyph;
+/**
+ * Render a single-color glyph as a crisp, theme-colored inline SVG.
+ *
+ * Size and color come from CSS on the passed `className` (the SVG fills with
+ * `currentColor`), so consumers theme it via `var(--vf-*)` like everything else.
+ */
+export declare function glyphSvg(g: Glyph, className: string): TemplateResult;