staffa 0.1.0

package/dist/components/button.js

@@ -0,0 +1,83 @@
+import A from "aberdeen";
+import { drawSlot } from "../core.js";
+// The color role sets a local `--c` (and `--cfg` for text on filled); the
+// variant rules consume them, so we avoid writing colour×variant rules.
+A.insertGlobalCss({
+    ".S_btn": {
+        "&": "--c:$sPrimary --cfg:$sPrimaryFg " +
+            "display:inline-flex align-items:center justify-content:center gap:$2 " +
+            "font-weight:600 line-height:1.2 white-space:nowrap cursor:pointer text-decoration:none " +
+            "border: 1px solid transparent; r:$sRadius padding: 0.5em 1em; " +
+            "transition: background 0.15s, border-color 0.15s, filter 0.15s, box-shadow 0.15s;",
+        "&:focus-visible": "outline:none box-shadow: 0 0 0 3px $sFocus;",
+        "&:disabled, &[aria-disabled=true]": "opacity:0.45 cursor:not-allowed pointer-events:none filter:saturate(0.6)",
+        // Colour roles.
+        "&.S_neutral": "--c:$sBorderStrong --cfg:$sFg",
+        "&.S_danger": "--c:$sDanger --cfg:#fff",
+        "&.S_success": "--c:$sSuccess --cfg:#08110d",
+        // Variants.
+        "&.S_filled": "background:$c color:$cfg border-color:$c",
+        "&.S_filled:hover": "filter:brightness(1.1)",
+        "&.S_tonal": "color:$c background: color-mix(in srgb, $c 20%, transparent); border-color: color-mix(in srgb, $c 30%, transparent);",
+        "&.S_tonal:hover": "background: color-mix(in srgb, $c 30%, transparent);",
+        "&.S_outlined": "color:$c background:transparent border-color: color-mix(in srgb, $c 55%, $sBorder);",
+        "&.S_outlined:hover": "background: color-mix(in srgb, $c 12%, transparent);",
+        // Sizes.
+        "&.S_sm": "padding: 0.32em 0.7em; font-size:0.85em",
+        "&.S_lg": "padding: 0.66em 1.3em; font-size:1.1em",
+    },
+});
+/**
+ * A button. Always carries at least a visible border so its affordance is
+ * obvious at a glance, regardless of {@link ButtonVariant | variant}.
+ *
+ * Shortcut: pass a string to use it as the label, or a function for custom
+ * content.
+ *
+ * @example
+ * ```ts
+ * S.button({ text: "Save", click: save });
+ * S.button({ text: "Delete", color: "danger", variant: "outlined", click: del });
+ * S.button("Cancel");                        // shorthand for { text: "Cancel" }
+ * S.button({ href: "/docs", text: "Docs" }); // renders an <a role=button>
+ * ```
+ */
+export function button(opts = {}) {
+    const o = typeof opts === "string" ? { text: opts } : typeof opts === "function" ? { content: opts } : opts;
+    const tag = o.href != null ? "a" : "button";
+    const variant = o.variant ?? "filled";
+    const color = o.color ?? "primary";
+    const size = o.size === "sm" || o.size === "lg" ? `.S_${o.size}` : "";
+    // Semantic roles select a colour class (the CSS sets `--c`/`--cfg`); any other
+    // value is a raw CSS colour we assign to `--c`, which the variant rules consume
+    // via `var(--c)`. (`primary` is the base default — its class is a no-op.)
+    const semantic = color === "primary" || color === "neutral" || color === "danger" || color === "success";
+    const colorCls = semantic ? `.S_${color}` : "";
+    const el = A(`${tag}.S_btn.S_${variant}${colorCls}${size}`, o.root, o.inner, () => {
+        if (o.href != null) {
+            A(`href=${o.href} role=button`);
+            if (o.disabled)
+                A("aria-disabled=true");
+        }
+        else {
+            A("type=", o.type ?? "button");
+            if (o.disabled)
+                A("disabled=true");
+        }
+        if (o.ariaLabel)
+            A("aria-label=", o.ariaLabel);
+        if (o.click)
+            A("click=", o.click);
+        drawSlot(o.icon);
+        if (o.content)
+            o.content();
+        else if (o.text != null)
+            A("#", o.text);
+    });
+    // Aberdeen's inline styler doesn't set CSS custom properties, so assign the
+    // custom accent on the element directly. A leading `$` is Aberdeen's shorthand
+    // for a CSS variable reference, so expand it to `var(--name)`.
+    if (!semantic && el instanceof HTMLElement) {
+        el.style.setProperty("--c", color.startsWith("$") ? `var(--${color.slice(1)})` : color);
+    }
+}

package/dist/components/buttonGroup.d.ts

@@ -0,0 +1,31 @@
+import type { ContentOptions } from "../core.js";
+import { type ButtonOptions } from "./button.js";
+/** Options for {@link buttonGroup}. */
+export interface ButtonGroupOptions extends ContentOptions {
+    /**
+     * Declarative list of buttons. Rendered in order. Alternatively (or
+     * additionally) draw buttons yourself via {@link ContentOptions.content}.
+     */
+    buttons?: ButtonOptions[];
+    /**
+     * `"attached"` (default) joins the buttons into a single segmented control
+     * with shared borders; `"spaced"` lays them out with a normal gap.
+     */
+    layout?: "attached" | "spaced";
+    /** Stack vertically instead of horizontally. */
+    vertical?: boolean;
+}
+/**
+ * Groups related buttons, either as a joined segmented control (`attached`) or
+ * spaced out. A `role=group` is applied for assistive tech.
+ *
+ * @example
+ * ```ts
+ * S.buttonGroup({ buttons: [
+ *   { text: "Day", variant: "outlined", color: "neutral" },
+ *   { text: "Week", variant: "outlined", color: "neutral" },
+ *   { text: "Month", variant: "outlined", color: "neutral" },
+ * ]});
+ * ```
+ */
+export declare function buttonGroup(opts?: ButtonGroupOptions): void;

package/dist/components/buttonGroup.js

@@ -0,0 +1,46 @@
+import A from "aberdeen";
+import { button } from "./button.js";
+A.insertGlobalCss({
+    ".S_bgroup": {
+        "&": "display:inline-flex align-items:stretch",
+        "&.S_spaced": "gap:$2 flex-wrap:wrap",
+        "&.S_vertical": "flex-direction:column",
+        "&.S_attached": "gap:0",
+        // When attached, collapse the shared border and square off the touching
+        // corners, keeping only the outer ends of the group rounded.
+        "&.S_attached:not(.S_vertical) > .S_btn:not(:first-child)": "margin-left:-1px",
+        "&.S_attached:not(.S_vertical) > .S_btn:not(:first-child):not(:last-child)": "r:0",
+        "&.S_attached:not(.S_vertical) > .S_btn:first-child:not(:last-child)": "border-top-right-radius:0 border-bottom-right-radius:0",
+        "&.S_attached:not(.S_vertical) > .S_btn:last-child:not(:first-child)": "border-top-left-radius:0 border-bottom-left-radius:0",
+        "&.S_attached.S_vertical > .S_btn:not(:first-child)": "margin-top:-1px",
+        "&.S_attached.S_vertical > .S_btn:not(:first-child):not(:last-child)": "r:0",
+        "&.S_attached.S_vertical > .S_btn:first-child:not(:last-child)": "border-bottom-left-radius:0 border-bottom-right-radius:0",
+        "&.S_attached.S_vertical > .S_btn:last-child:not(:first-child)": "border-top-left-radius:0 border-top-right-radius:0",
+        // Keep the hovered/focused button's border above its neighbours.
+        "&.S_attached > .S_btn:hover, &.S_attached > .S_btn:focus-visible": "z-index:1",
+    },
+});
+/**
+ * Groups related buttons, either as a joined segmented control (`attached`) or
+ * spaced out. A `role=group` is applied for assistive tech.
+ *
+ * @example
+ * ```ts
+ * S.buttonGroup({ buttons: [
+ *   { text: "Day", variant: "outlined", color: "neutral" },
+ *   { text: "Week", variant: "outlined", color: "neutral" },
+ *   { text: "Month", variant: "outlined", color: "neutral" },
+ * ]});
+ * ```
+ */
+export function buttonGroup(opts = {}) {
+    const layout = opts.layout ?? "attached";
+    const cls = `.S_${layout}${opts.vertical ? ".S_vertical" : ""}`;
+    A(`div.S_bgroup${cls} role=group`, opts.root, opts.inner, () => {
+        if (opts.buttons)
+            for (const b of opts.buttons)
+                button(b);
+        if (opts.content)
+            opts.content();
+    });
+}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,24 @@
+import { type Bindable, type Slot } from "../core.js";
+import type { FieldOptions } from "./field.js";
+/** Options for {@link checkbox}. */
+export interface CheckboxOptions extends Omit<FieldOptions, "label"> {
+    /** The label shown next to the box. Required for a meaningful checkbox. */
+    label?: Slot;
+    /** Two-way binding target holding a boolean. */
+    bind?: Bindable<boolean>;
+    /** Static initial checked state. */
+    checked?: boolean;
+    /** Fired on `change` with the native event. */
+    change?: (event: Event) => void;
+}
+/**
+ * A checkbox with an associated, clickable label. Uses the native `<input
+ * type=checkbox>` (styled with `accent-color`) for full keyboard and screen
+ * reader support.
+ *
+ * @example
+ * ```ts
+ * S.checkbox({ label: "Subscribe to newsletter", bind: A.ref($prefs, "newsletter") });
+ * ```
+ */
+export declare function checkbox(opts?: CheckboxOptions): void;

package/dist/components/checkbox.js

@@ -0,0 +1,63 @@
+import A from "aberdeen";
+import { drawSlot, uniqueId } from "../core.js";
+A.insertGlobalCss({
+    ".S_check": {
+        "&": "display:flex flex-direction:column gap:$1",
+        "> label": "display:flex align-items:center gap:$2 cursor:pointer user-select:none",
+        "> label:has(input:disabled)": "cursor:not-allowed opacity:0.6",
+        // Native control styled with accent-color: accessible and zero-fuss.
+        "input": "width:1.15em height:1.15em accent-color:$sPrimary cursor:inherit m:0",
+    },
+});
+/**
+ * A checkbox with an associated, clickable label. Uses the native `<input
+ * type=checkbox>` (styled with `accent-color`) for full keyboard and screen
+ * reader support.
+ *
+ * @example
+ * ```ts
+ * S.checkbox({ label: "Subscribe to newsletter", bind: A.ref($prefs, "newsletter") });
+ * ```
+ */
+export function checkbox(opts = {}) {
+    const id = opts.id ?? uniqueId("check");
+    A("div.S_check", opts.root, () => {
+        A(`label for=${id}`, () => {
+            A("input type=checkbox", opts.control, () => {
+                A(`id=${id}`);
+                if (opts.name)
+                    A(`name=${opts.name}`);
+                // `checked` is a boolean attribute: only set it when actually true.
+                if (opts.checked && !opts.bind)
+                    A("checked=true");
+                if (opts.change)
+                    A("change=", opts.change);
+                A(() => {
+                    if (opts.disabled)
+                        A("disabled=true");
+                });
+                A(() => {
+                    if (opts.required)
+                        A("aria-required=true");
+                });
+                if (opts.bind)
+                    A("bind=", opts.bind);
+            });
+            // Own scope so the label text/required marker don't recreate the input.
+            A(() => {
+                if (opts.label != null)
+                    drawSlot(opts.label);
+                if (opts.required)
+                    A("span.S_req aria-hidden=true #*");
+            });
+        });
+        A(() => {
+            if (opts.help != null && !opts.error)
+                A("div.S_help", () => drawSlot(opts.help));
+        });
+        A(() => {
+            if (opts.error)
+                A("div.S_error role=alert #", opts.error);
+        });
+    });
+}

package/dist/components/dialog.d.ts

@@ -0,0 +1,97 @@
+import { type Slot, type Styling } from "../core.js";
+/** Options for {@link dialog}. */
+export interface DialogOptions {
+    /** Slot rendered in the styled header bar. */
+    header?: Slot;
+    /** Slot rendered in the styled footer bar. */
+    footer?: Slot;
+    /** Aberdeen attr/style string applied to the header bar. */
+    headerInner?: Styling;
+    /** Aberdeen attr/style string applied to the footer bar. */
+    footerInner?: Styling;
+    /** Aberdeen attr/style string applied to the scrollable content `<div>`. */
+    inner?: Styling;
+    /** Aberdeen attr/style string applied to the dialog panel itself. */
+    root?: Styling;
+    /**
+     * Allow closing via Esc or clicking the backdrop. Defaults to `true`.
+     * May be changed on a proxied options object while the dialog is open
+     * (e.g. lock when form data is dirty).
+     */
+    allowCancel?: boolean;
+    /**
+     * Dialog body. Receives a `close()` function — call it to dismiss the dialog
+     * programmatically.
+     */
+    content?: (close: () => void) => void;
+    /**
+     * Called when the dialog closes for any reason (explicit `close()`, Esc, or
+     * backdrop click). Useful when you want a side-effect on close but don't need
+     * the Promise returned by {@link dialog}.
+     */
+    onClose?: () => void;
+}
+/**
+ * A dialog rendered into `document.body` via `A.mount`, with a dimming backdrop
+ * that fades in and out. Returns a `Promise<void>` that resolves when the dialog
+ * closes. Lifecycle is also tied to the parent reactive scope — when that scope
+ * is cleaned up the dialog disappears and the promise resolves.
+ *
+ * Only the **last** open dialog (and its backdrop) is visible; earlier pairs are
+ * hidden via the CSS `+` selector, so nested dialogs stack correctly.
+ *
+ * The header and footer are pinned; only the body content scrolls when it is
+ * taller than `88vh`.
+ *
+ * @example
+ * ```ts
+ * S.dialog({
+ *   header: "Confirm",
+ *   content: (close) => {
+ *     A("p #Are you sure?");
+ *     S.button({ text: "Yes", click: () => { doIt(); close(); } });
+ *     S.button({ text: "Cancel", variant: "outlined", click: close });
+ *   },
+ * });
+ * ```
+ */
+export declare function dialog(opts: DialogOptions): Promise<void>;
+/**
+ * Shows a message dialog with a single OK button. Returns a `Promise<void>`
+ * that resolves when the user dismisses it.
+ *
+ * All properties of `opts` override the defaults, including `content`.
+ *
+ * @example
+ * ```ts
+ * await S.alert("File saved successfully.");
+ * ```
+ */
+export declare function alert(message: string, opts?: Partial<DialogOptions>): Promise<void>;
+/**
+ * Shows a confirmation dialog with Cancel and OK buttons. Returns a
+ * `Promise<boolean>` — `true` if the user clicked OK, `false` otherwise
+ * (including Esc / backdrop click when `allowCancel` is not `false`).
+ *
+ * All properties of `opts` override the defaults, including `content`.
+ *
+ * @example
+ * ```ts
+ * if (await S.confirm("Delete this item?")) deleteItem();
+ * ```
+ */
+export declare function confirm(message: string, opts?: Partial<DialogOptions>): Promise<boolean>;
+/**
+ * Shows a prompt dialog with a text input. Returns a `Promise<string | null>` —
+ * the entered string if the user confirmed, or `null` if cancelled (Esc /
+ * backdrop click / Cancel button).
+ *
+ * All properties of `opts` override the defaults, including `content`.
+ *
+ * @example
+ * ```ts
+ * const name = await S.prompt("Enter your name:", "Alice");
+ * if (name !== null) greet(name);
+ * ```
+ */
+export declare function prompt(message: string, defaultValue?: string, opts?: Partial<DialogOptions>): Promise<string | null>;

package/dist/components/dialog.js

@@ -0,0 +1,214 @@
+import A from "aberdeen";
+import { drawSlot } from "../core.js";
+import { button } from "./button.js";
+import { buttonGroup } from "./buttonGroup.js";
+import { textline } from "./textline.js";
+// Transition helper classes.
+// `.S_backdrop` = backdrop, hidden when another backdrop follows it in the DOM.
+// `.S_dialog`   = dialog box, slides + fades in/out.
+A.insertGlobalCss({
+    ".S_backdrop": {
+        "&": "position:fixed inset:0 z-index:200; background: rgba(0,0,0,0.55); transition: opacity 0.2s ease;",
+        "&:not(:has(~ .S_backdrop))": "display:block",
+        "&:not(:has(~ .S_backdrop)) + .S_dialog": "display:flex flex-direction:column",
+        // Transition states: applied momentarily on create; re-applied on destroy.
+        "&.hidden": "opacity:0 pointer-events:none",
+    },
+    ".S_dialog": {
+        "&": "position:fixed z-index:201 top:50% left:50% " +
+            "transform:translate(-50%,-50%) " +
+            "min-width:20rem max-width:min(90vw,44rem) max-height:min(88vh,800px) " +
+            "bg:$sSurface border: 1px solid $sBorder; r:$sRadiusLg box-shadow:$sShadow overflow:hidden " +
+            "transition: opacity 0.2s ease, transform 0.2s ease;",
+        // Header and footer are fixed; only the content <div> scrolls.
+        "> header": "display:flex align-items:center gap:$2 padding: $2 $3; " +
+            "bg:$sSurfaceHi border-bottom: 1px solid $sBorder; font-weight:600 flex-shrink:0",
+        "> footer": "display:flex align-items:center gap:$2 padding: $2 $3; " +
+            "bg:$sSurfaceHi border-top: 1px solid $sBorder; flex-shrink:0",
+        "> div": "p:$3 gap:$3 display:flex flex-direction:column overflow-y:auto flex:1 min-height:0",
+        "&.hidden": "opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px));",
+        "&.hidden *": "pointer-events:none",
+    },
+});
+/**
+ * A dialog rendered into `document.body` via `A.mount`, with a dimming backdrop
+ * that fades in and out. Returns a `Promise<void>` that resolves when the dialog
+ * closes. Lifecycle is also tied to the parent reactive scope — when that scope
+ * is cleaned up the dialog disappears and the promise resolves.
+ *
+ * Only the **last** open dialog (and its backdrop) is visible; earlier pairs are
+ * hidden via the CSS `+` selector, so nested dialogs stack correctly.
+ *
+ * The header and footer are pinned; only the body content scrolls when it is
+ * taller than `88vh`.
+ *
+ * @example
+ * ```ts
+ * S.dialog({
+ *   header: "Confirm",
+ *   content: (close) => {
+ *     A("p #Are you sure?");
+ *     S.button({ text: "Yes", click: () => { doIt(); close(); } });
+ *     S.button({ text: "Cancel", variant: "outlined", click: close });
+ *   },
+ * });
+ * ```
+ */
+export function dialog(opts) {
+    return new Promise((resolve) => {
+        const $closed = A.proxy(false);
+        const close = () => { $closed.value = true; };
+        let resolved = false;
+        const onDone = () => {
+            if (resolved)
+                return;
+            resolved = true;
+            opts.onClose?.();
+            resolve();
+        };
+        // A.mount ties this scope to the calling reactive scope — when the parent
+        // scope is torn down, the backdrop and dialog are removed from body too.
+        A.mount(document.body, () => {
+            // The 'peek' is there such that when 'closed' is first set, this scope doesn't need to watch anything anymore.
+            if (A.peek($closed, "value"), $closed.value)
+                return;
+            // Global Esc listener — registered here so it's removed on close.
+            const onKey = (e) => {
+                if (e.key === "Escape" && opts.allowCancel !== false)
+                    close();
+            };
+            document.addEventListener("keydown", onKey);
+            A.clean(() => {
+                document.removeEventListener("keydown", onKey);
+                // Fires when this render is torn down — either because $closed became
+                // true (normal close) or because the parent reactive scope was cleaned up.
+                onDone();
+            });
+            // Backdrop: fades in on creation, fades out on removal.
+            A("div.S_backdrop create=hidden destroy=hidden", () => {
+                A("click=", () => {
+                    if (opts.allowCancel !== false)
+                        close();
+                });
+            });
+            // Dialog panel: fades + slides in/out.
+            A("div.S_dialog create=hidden destroy=hidden", opts.root, () => {
+                A(() => {
+                    if (opts.header != null) {
+                        A("header", opts.headerInner, () => drawSlot(opts.header));
+                    }
+                });
+                A("div", opts.inner, () => {
+                    if (opts.content)
+                        opts.content(close);
+                });
+                A(() => {
+                    if (opts.footer != null) {
+                        A("footer", opts.footerInner, () => drawSlot(opts.footer));
+                    }
+                });
+            });
+        });
+    });
+}
+/**
+ * Shows a message dialog with a single OK button. Returns a `Promise<void>`
+ * that resolves when the user dismisses it.
+ *
+ * All properties of `opts` override the defaults, including `content`.
+ *
+ * @example
+ * ```ts
+ * await S.alert("File saved successfully.");
+ * ```
+ */
+export function alert(message, opts = {}) {
+    return dialog({
+        header: "Alert",
+        allowCancel: true,
+        content: (close) => {
+            A("p", () => { A("#", message); });
+            buttonGroup({ layout: "spaced", root: "align-self:flex-end", content: () => {
+                    button({ text: "OK", click: close });
+                } });
+        },
+        ...opts,
+    });
+}
+/**
+ * Shows a confirmation dialog with Cancel and OK buttons. Returns a
+ * `Promise<boolean>` — `true` if the user clicked OK, `false` otherwise
+ * (including Esc / backdrop click when `allowCancel` is not `false`).
+ *
+ * All properties of `opts` override the defaults, including `content`.
+ *
+ * @example
+ * ```ts
+ * if (await S.confirm("Delete this item?")) deleteItem();
+ * ```
+ */
+export function confirm(message, opts = {}) {
+    return new Promise((resolve) => {
+        let confirmed = false;
+        dialog({
+            header: "Confirm",
+            allowCancel: true,
+            content: (close) => {
+                A("p", () => { A("#", message); });
+                buttonGroup({ layout: "spaced", root: "align-self:flex-end", content: () => {
+                        button({ text: "Cancel", variant: "outlined", color: "neutral", click: close });
+                        button({ text: "OK", click: () => { confirmed = true; close(); } });
+                    } });
+            },
+            ...opts,
+            onClose: () => {
+                resolve(confirmed);
+                opts.onClose?.();
+            },
+        });
+    });
+}
+/**
+ * Shows a prompt dialog with a text input. Returns a `Promise<string | null>` —
+ * the entered string if the user confirmed, or `null` if cancelled (Esc /
+ * backdrop click / Cancel button).
+ *
+ * All properties of `opts` override the defaults, including `content`.
+ *
+ * @example
+ * ```ts
+ * const name = await S.prompt("Enter your name:", "Alice");
+ * if (name !== null) greet(name);
+ * ```
+ */
+export function prompt(message, defaultValue = "", opts = {}) {
+    return new Promise((resolve) => {
+        let result = null;
+        dialog({
+            header: "Input",
+            allowCancel: true,
+            content: (close) => {
+                A("p", () => { A("#", message); });
+                const $v = A.proxy({ value: defaultValue });
+                // Wrap in a form so Enter submits; display:contents keeps flex layout intact.
+                A("form display:contents", () => {
+                    A("submit=", (e) => {
+                        e.preventDefault();
+                        result = $v.value;
+                        close();
+                    });
+                    textline({ bind: A.ref($v, "value") });
+                    buttonGroup({ layout: "spaced", root: "align-self:flex-end", content: () => {
+                            button({ text: "Cancel", variant: "outlined", color: "neutral", type: "button", click: close });
+                            button({ text: "OK", type: "submit" });
+                        } });
+                });
+            },
+            ...opts,
+            onClose: () => {
+                resolve(result);
+                opts.onClose?.();
+            },
+        });
+    });
+}

package/dist/components/field.d.ts

@@ -0,0 +1,50 @@
+import { type BaseOptions, type Bindable, type Slot, type Styling } from "../core.js";
+/**
+ * Options shared by all *form field* components (textline, textarea, checkbox,
+ * autocomplete, ...).
+ *
+ * Fields share a consistent vertical layout: an optional label, the control
+ * itself, and optional help/error text below it. {@link form} relies on this
+ * shared structure to align groups of fields.
+ */
+export interface FieldOptions extends BaseOptions {
+    /** Visible label, associated with the control via `for`/`id` for a11y. */
+    label?: Slot;
+    /** Helper text shown beneath the control. */
+    help?: Slot;
+    /**
+     * Error message shown beneath the control. When set, the control is marked
+     * `aria-invalid` and styled accordingly. May be reactive.
+     */
+    error?: string;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Marks the field required (adds a `*` and the `aria-required` attribute). */
+    required?: boolean;
+    /** The `name` attribute, for native form submission. */
+    name?: string;
+    /** Explicit id for the control; auto-generated when omitted. */
+    id?: string;
+    /** Aberdeen attr/style string applied to the control element itself. */
+    control?: Styling;
+}
+/**
+ * Render the standard field chrome (label + control + help/error) around a
+ * caller-supplied control.
+ *
+ * Each piece is read inside its own small reactive scope, so e.g. flipping
+ * `error` on a proxied options object only re-renders the error line — not the
+ * control.
+ *
+ * @param opts The field options.
+ * @param drawControl Receives the resolved `id` and the live "invalid" getter,
+ *   and must draw the actual control element (using class `S_input` where
+ *   appropriate, and passing `opts.control` as an arg for caller styling).
+ */
+export declare function drawField(opts: FieldOptions, drawControl: (id: string, isInvalid: () => boolean) => void): void;
+/**
+ * Apply the shared, reactive control attributes (`id`, `name`, `disabled`,
+ * `required`, `aria-invalid`, `bind`) to the current element. The dynamic ones
+ * each get their own scope so the control element is never recreated.
+ */
+export declare function applyControlAttrs(opts: FieldOptions, id: string, isInvalid: () => boolean, bind?: Bindable<unknown>): void;