staffa 0.1.0

package/dist/components/field.js

@@ -0,0 +1,78 @@
+import A from "aberdeen";
+import { drawSlot, uniqueId } from "../core.js";
+A.insertGlobalCss({
+    ".S_field": {
+        "&": "display:flex flex-direction:column gap:$1",
+        "> label": "font-weight:600 font-size:0.9em fg:$sFg user-select:none",
+    },
+    // Shared, reusable bits (also used by checkbox & autocomplete).
+    ".S_req": "fg:$sDanger margin-left:2px",
+    ".S_help": "font-size:0.82em fg:$sFgMuted",
+    ".S_error": "font-size:0.82em fg:$sDanger",
+    // Shared look for text-like controls.
+    ".S_input": {
+        "&": "w:100% bg:$sSurface fg:$sFg border: 1px solid $sBorder; r:$sRadius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;",
+        "&:hover:not(:disabled)": "border-color:$sBorderStrong",
+        "&:focus-visible": "border-color:$sPrimary box-shadow: 0 0 0 3px $sFocus; outline:none",
+        "&:disabled": "opacity:0.6 cursor:not-allowed",
+        "&[aria-invalid=true]": "border-color:$sDanger",
+    },
+});
+/**
+ * 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 function drawField(opts, drawControl) {
+    const id = opts.id ?? uniqueId("field");
+    const isInvalid = () => !!opts.error;
+    A("div.S_field", opts.root, () => {
+        A(() => {
+            if (opts.label != null) {
+                A(`label for=${id}`, () => {
+                    drawSlot(opts.label);
+                    if (opts.required)
+                        A("span.S_req aria-hidden=true #*");
+                });
+            }
+        });
+        drawControl(id, isInvalid);
+        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);
+        });
+    });
+}
+/**
+ * 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 function applyControlAttrs(opts, id, isInvalid, bind) {
+    A(`id=${id}`);
+    if (opts.name)
+        A(`name=${opts.name}`);
+    A(() => {
+        if (opts.disabled)
+            A("disabled=true");
+    });
+    A(() => {
+        if (opts.required)
+            A("aria-required=true");
+    });
+    A(() => A("aria-invalid=", isInvalid() ? "true" : "false"));
+    if (bind)
+        A("bind=", bind);
+}

package/dist/components/form.d.ts

@@ -0,0 +1,42 @@
+import { type Content, type ContentOptions, type Styling } from "../core.js";
+/** Options for {@link form}. */
+export interface FormOptions extends ContentOptions {
+    /**
+     * Submit handler. Called with collected form data (keyed by each field's
+     * `name`) and the original event. `preventDefault()` is already called.
+     * Multi-value fields (e.g. multi-select) produce a `string[]`.
+     */
+    submit?: (data: Record<string, string | string[]>, event: SubmitEvent) => void;
+    /**
+     * Layout of fields. `"stacked"` (default) is a single column; `"grid"` packs
+     * fields into a responsive multi-column grid. A field can span the full grid
+     * width by adding the `.S_wide` class (e.g. `root: ".S_wide"`).
+     */
+    layout?: "stacked" | "grid";
+    /** Aberdeen attr/style string for the action bar. */
+    actionsInner?: Styling;
+    /** Footer actions (typically a {@link import("./buttonGroup").buttonGroup} or buttons). */
+    actions?: Content;
+}
+/**
+ * An opinionated `<form>` wrapper that lays its fields out consistently — a clean
+ * single column by default, or a responsive grid — and provides a standard
+ * action bar.
+ *
+ * Field components ({@link import("./textline").textline} et al.) drop straight
+ * in as {@link ContentOptions.content}. Submission is wired so the browser's
+ * native validation runs, but the page never reloads.
+ *
+ * @example
+ * ```ts
+ * S.form({
+ *   submit: () => save(),
+ *   content: () => {
+ *     S.textline({ label: "Name", required: true, bind: A.ref($u, "name") });
+ *     S.textline({ label: "Email", type: "email", bind: A.ref($u, "email") });
+ *   },
+ *   actions: () => S.button({ text: "Save", type: "submit" }),
+ * });
+ * ```
+ */
+export declare function form(opts?: FormOptions | Content): void;

package/dist/components/form.js

@@ -0,0 +1,59 @@
+import A from "aberdeen";
+A.insertGlobalCss({
+    ".S_form": {
+        "&": "display:flex flex-direction:column gap:$3",
+        "&.grid": "display:grid grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap:$3",
+        "&.grid > .S_wide, &.grid > footer": "grid-column: 1 / -1;",
+        "> footer": "display:flex align-items:center gap:$2 flex-wrap:wrap margin-top:$1",
+    },
+});
+/**
+ * An opinionated `<form>` wrapper that lays its fields out consistently — a clean
+ * single column by default, or a responsive grid — and provides a standard
+ * action bar.
+ *
+ * Field components ({@link import("./textline").textline} et al.) drop straight
+ * in as {@link ContentOptions.content}. Submission is wired so the browser's
+ * native validation runs, but the page never reloads.
+ *
+ * @example
+ * ```ts
+ * S.form({
+ *   submit: () => save(),
+ *   content: () => {
+ *     S.textline({ label: "Name", required: true, bind: A.ref($u, "name") });
+ *     S.textline({ label: "Email", type: "email", bind: A.ref($u, "email") });
+ *   },
+ *   actions: () => S.button({ text: "Save", type: "submit" }),
+ * });
+ * ```
+ */
+export function form(opts = {}) {
+    const o = typeof opts === "function" ? { content: opts } : opts;
+    A(`form.S_form`, o.root, o.inner, () => {
+        // Toggle grid class in its own scope so changing layout doesn't recreate
+        // the fields (which would lose focus / input state).
+        A(() => {
+            A(".grid=", o.layout === 'grid');
+        });
+        A("submit=", (event) => {
+            event.preventDefault();
+            if (o.submit) {
+                const fd = new FormData(event.target);
+                const data = {};
+                for (const key of new Set(fd.keys())) {
+                    const vals = fd.getAll(key);
+                    data[key] = vals.length === 1 ? vals[0] : vals;
+                }
+                o.submit(data, event);
+            }
+        });
+        if (o.content)
+            o.content();
+        // Own scope so toggling actions doesn't recreate the fields above.
+        A(() => {
+            if (o.actions)
+                A("footer", o.actionsInner, () => o.actions?.());
+        });
+    });
+}

package/dist/components/main.d.ts

@@ -0,0 +1,47 @@
+import { type BaseOptions, type Content, type Slot, type Styling } from "../core.js";
+/** Options for {@link main}. */
+export interface MainOptions extends BaseOptions {
+    /** App/page title shown in the top bar. */
+    title?: Slot;
+    /** Secondary line under the title. */
+    subtitle?: Slot;
+    /** Leading icon/logo in the top bar. */
+    icon?: Slot;
+    /** Action area on the right of the top bar (buttons, menu, ...). */
+    menu?: Content;
+    /** The scrollable page content. */
+    content?: Content;
+    /** Footer content, pinned below the scroll area. */
+    footer?: Slot;
+    /**
+     * Max content width. When set, the content is centered in a "sheet" with a
+     * drop shadow and a distinct surface, against the darker page background.
+     * e.g. `"60rem"`.
+     */
+    maxWidth?: string;
+    /** Aberdeen attr/style string applied to the content sheet. */
+    inner?: Styling;
+    /** Aberdeen attr/style string applied to the top bar. */
+    topbarInner?: Styling;
+}
+/**
+ * An application shell that wires up the things almost every app needs: a sticky
+ * top bar (icon, title, subtitle, action menu), a scrollable content area, and a
+ * footer. With {@link MainOptions.maxWidth} the content becomes a centered,
+ * shadowed "sheet" — the common dashboard/document look — while staying fully
+ * customisable via the various draw-function options and styling strings.
+ *
+ * @example
+ * ```ts
+ * S.main({
+ *   icon: "✦",
+ *   title: "Skye Demo",
+ *   subtitle: "Component playground",
+ *   maxWidth: "56rem",
+ *   menu: () => S.button({ text: "New", size: "sm" }),
+ *   content: () => drawPage(),
+ *   footer: "© 2026",
+ * });
+ * ```
+ */
+export declare function main(opts?: MainOptions): void;

package/dist/components/main.js

@@ -0,0 +1,89 @@
+import A from "aberdeen";
+import { drawSlot } from "../core.js";
+A.insertGlobalCss({
+    ".S_main": {
+        "&": "display:flex flex-direction:column min-height:100vh max-height:100vh bg:$sBg fg:$sFg",
+        "> header": "display:flex align-items:center gap:$3 padding: $2 $3; bg:$sSurfaceHi border-bottom: 1px solid $sBorder; position:sticky top:0 z-index:10",
+        "> header .S_icon": "display:flex align-items:center font-size:1.4em",
+        "> header .S_titles": "display:flex flex-direction:column min-width:0 flex:1",
+        "> header .S_title": "font-weight:700 font-size:1.1em line-height:1.2 overflow:hidden text-overflow:ellipsis white-space:nowrap",
+        "> header .S_subtitle": "fg:$sFgMuted font-size:0.85em overflow:hidden text-overflow:ellipsis white-space:nowrap",
+        "> header .S_menu": "display:flex align-items:center gap:$2",
+        "> main": "flex:1 overflow-y:auto display:flex flex-direction:column",
+        "> main > .S_content": "width:100% flex:1",
+        "> main > .S_content.S_framed": "margin: $3 auto; bg:$sSurface border: 1px solid $sBorder; r:$sRadiusLg box-shadow:$sShadow p:$4",
+        "> main > .S_content.S_plain": "p:$3",
+        "> footer": "display:flex align-items:center gap:$2 padding: $2 $3; bg:$sSurfaceHi border-top: 1px solid $sBorder; fg:$sFgMuted",
+    },
+});
+/**
+ * An application shell that wires up the things almost every app needs: a sticky
+ * top bar (icon, title, subtitle, action menu), a scrollable content area, and a
+ * footer. With {@link MainOptions.maxWidth} the content becomes a centered,
+ * shadowed "sheet" — the common dashboard/document look — while staying fully
+ * customisable via the various draw-function options and styling strings.
+ *
+ * @example
+ * ```ts
+ * S.main({
+ *   icon: "✦",
+ *   title: "Skye Demo",
+ *   subtitle: "Component playground",
+ *   maxWidth: "56rem",
+ *   menu: () => S.button({ text: "New", size: "sm" }),
+ *   content: () => drawPage(),
+ *   footer: "© 2026",
+ * });
+ * ```
+ */
+export function main(opts = {}) {
+    A("div.S_main", opts.root, () => {
+        // Top bar — only rendered when there's something to show in it.
+        A(() => {
+            const hasBar = opts.title != null || opts.subtitle != null || opts.icon != null || opts.menu != null;
+            if (!hasBar)
+                return;
+            A("header", opts.topbarInner, () => {
+                A(() => {
+                    if (opts.icon != null)
+                        A("div.S_icon", () => drawSlot(opts.icon));
+                });
+                A("div.S_titles", () => {
+                    A(() => {
+                        if (opts.title != null)
+                            A("div.S_title", () => drawSlot(opts.title));
+                    });
+                    A(() => {
+                        if (opts.subtitle != null)
+                            A("div.S_subtitle", () => drawSlot(opts.subtitle));
+                    });
+                });
+                A(() => {
+                    if (opts.menu)
+                        A("div.S_menu", () => opts.menu?.());
+                });
+            });
+        });
+        // Scrollable main region with the (optionally framed) content sheet.
+        A("main", () => {
+            A("div.S_content", opts.inner, () => {
+                // Framing applied in its own scope so changing maxWidth doesn't
+                // recreate the content (which holds the whole page).
+                A(() => {
+                    const max = opts.maxWidth;
+                    if (max != null)
+                        A(".S_framed max-width:", max);
+                    else
+                        A(".S_plain");
+                });
+                if (opts.content)
+                    opts.content();
+            });
+        });
+        // Footer.
+        A(() => {
+            if (opts.footer != null)
+                A("footer", () => drawSlot(opts.footer));
+        });
+    });
+}

package/dist/components/modal.d.ts

@@ -0,0 +1,2 @@
+/** @deprecated Use `dialog` / `DialogOptions` from `./dialog.js` instead. */
+export { dialog as modal, type DialogOptions as ModalOptions } from "./dialog.js";

package/dist/components/modal.js

@@ -0,0 +1,2 @@
+/** @deprecated Use `dialog` / `DialogOptions` from `./dialog.js` instead. */
+export { dialog as modal } from "./dialog.js";

package/dist/components/select.d.ts

@@ -0,0 +1,27 @@
+import { type Bindable } from "../core.js";
+import { type FieldOptions } from "./field.js";
+/** A selectable option: a bare string, or a `{ value, label }` pair. */
+export type SelectOptionInput = string | {
+    value: string;
+    label?: string;
+};
+/** Options for {@link select}. */
+export interface SelectOptions extends FieldOptions {
+    /** The list of selectable options. */
+    options: SelectOptionInput[] | (() => SelectOptionInput[]);
+    /** Two-way binding for the selected value string (`""` when nothing is selected). */
+    bind?: Bindable<string>;
+    /** Placeholder option shown when nothing is selected yet. */
+    placeholder?: string;
+}
+/**
+ * A single-select dropdown backed by a native `<select>` element. Looks like the
+ * other Skye inputs but delegates all focus management, keyboard navigation, and
+ * mobile-native picker behaviour to the browser.
+ *
+ * @example
+ * ```ts
+ * S.select({ label: "Country", options: ["Belgium", "Netherlands"], bind: $sel });
+ * ```
+ */
+export declare function select(opts: SelectOptions): void;

package/dist/components/select.js

@@ -0,0 +1,57 @@
+import A from "aberdeen";
+import { applyControlAttrs, drawField } from "./field.js";
+// Wrapper provides the chevron via ::after (pseudo-elements on <select> are unreliable).
+A.insertGlobalCss({
+    ".S_select_wrap": {
+        "&": "position:relative display:block",
+        "select": "w:100% cursor:pointer padding-right:2.2em; appearance:none",
+        "&::after": "content: '▾'; position:absolute right:0.7em top:50%; transform: translateY(-50%); pointer-events:none fg:$sFgMuted font-size:0.85em",
+    },
+});
+/**
+ * A single-select dropdown backed by a native `<select>` element. Looks like the
+ * other Skye inputs but delegates all focus management, keyboard navigation, and
+ * mobile-native picker behaviour to the browser.
+ *
+ * @example
+ * ```ts
+ * S.select({ label: "Country", options: ["Belgium", "Netherlands"], bind: $sel });
+ * ```
+ */
+export function select(opts) {
+    drawField(opts, (id, isInvalid) => {
+        A("div.S_select_wrap", opts.control, () => {
+            A("select.S_input", () => {
+                applyControlAttrs(opts, id, isInvalid);
+                A("change=", (e) => {
+                    if (opts.bind)
+                        opts.bind.value = e.target.value;
+                });
+                // Render options reactively; re-runs when options list or selected value changes.
+                A(() => {
+                    const raw = typeof opts.options === "function" ? opts.options() : opts.options;
+                    const current = (opts.bind?.value ?? "");
+                    if (opts.placeholder != null) {
+                        A("option", () => {
+                            A("value= disabled=true hidden=true");
+                            if (!current)
+                                A("selected=true");
+                            A("#", opts.placeholder);
+                        });
+                    }
+                    for (const o of raw) {
+                        const opt = typeof o === "string"
+                            ? { value: o, label: o }
+                            : { value: o.value, label: o.label ?? o.value };
+                        A("option", () => {
+                            A("value=", opt.value);
+                            if (opt.value === current)
+                                A("selected=true");
+                            A("#", opt.label);
+                        });
+                    }
+                });
+            });
+        });
+    });
+}

package/dist/components/tabs.d.ts

@@ -0,0 +1,41 @@
+import { type BaseOptions, type Bindable, type Content, type Slot, type Styling } from "../core.js";
+/** A single tab definition. */
+export interface Tab {
+    /** Stable id used as the selection value. Falls back to the array index. */
+    id?: string;
+    /** Tab label shown in the tab strip. */
+    label: Slot;
+    /** Optional leading icon. */
+    icon?: Slot;
+    /** Content rendered in the panel when this tab is active. */
+    content?: Content;
+    /** Disables selecting this tab. */
+    disabled?: boolean;
+}
+/** Options for {@link tabs}. */
+export interface TabsOptions extends BaseOptions {
+    /** The tabs to display. */
+    tabs: Tab[];
+    /**
+     * Two-way binding for the selected tab's id. When omitted, the component keeps
+     * its own internal selection, starting at the first tab.
+     */
+    bind?: Bindable<string>;
+    /** Visual style of the tab strip. Defaults to `"underline"`. */
+    variant?: "underline" | "pills";
+    /** Aberdeen attr/style string applied to the active panel. */
+    inner?: Styling;
+}
+/**
+ * A tabbed view. Renders an ARIA `tablist` of buttons and a single live panel
+ * for the selected tab. Supports keyboard navigation (left/right/home/end).
+ *
+ * @example
+ * ```ts
+ * S.tabs({ tabs: [
+ *   { label: "Overview", content: () => A("p#...") },
+ *   { label: "Settings", content: () => drawSettings() },
+ * ]});
+ * ```
+ */
+export declare function tabs(opts: TabsOptions): void;

package/dist/components/tabs.js

@@ -0,0 +1,108 @@
+import A from "aberdeen";
+import { drawSlot, uniqueId } from "../core.js";
+A.insertGlobalCss({
+    ".S_tabs": {
+        "&": "display:flex flex-direction:column gap:$3",
+        ".S_tablist": "display:flex gap:$1 align-items:stretch",
+        ".S_tab": "display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent " +
+            "border:0 fg:$sFgMuted font-weight:600 padding: 0.6em 0.9em; " +
+            "transition: color 0.15s, background 0.15s, border-color 0.15s;",
+        ".S_tab:hover:not(:disabled)": "fg:$sFg",
+        ".S_tab:disabled": "opacity:0.5 cursor:not-allowed",
+        ".S_tab:focus-visible": "outline:none box-shadow: 0 0 0 3px $sFocus; r:$sRadius",
+        // Underline variant.
+        "&.S_underline .S_tablist": "border-bottom: 1px solid $sBorder;",
+        "&.S_underline .S_tab": "border-bottom: 2px solid transparent; margin-bottom:-1px",
+        "&.S_underline .S_tab[aria-selected=true]": "fg:$sFg border-bottom-color:$sPrimary",
+        // Pills variant.
+        "&.S_pills .S_tab": "r:$sRadius",
+        "&.S_pills .S_tab[aria-selected=true]": "fg:$sPrimaryFg background:$sPrimary",
+        // The panel has no enclosing box, so no default padding — its content
+        // aligns flush with the tab strip. Callers add padding/flex via `inner`.
+        ".S_tabpanel": "display:block",
+    },
+});
+/**
+ * A tabbed view. Renders an ARIA `tablist` of buttons and a single live panel
+ * for the selected tab. Supports keyboard navigation (left/right/home/end).
+ *
+ * @example
+ * ```ts
+ * S.tabs({ tabs: [
+ *   { label: "Overview", content: () => A("p#...") },
+ *   { label: "Settings", content: () => drawSettings() },
+ * ]});
+ * ```
+ */
+export function tabs(opts) {
+    const variant = opts.variant ?? "underline";
+    const groupId = uniqueId("tabs");
+    // Resolve a tab's selection key (its id, or its index as a string).
+    const keyOf = (tab, index) => tab.id ?? String(index);
+    // Selection state: caller-provided binding, or internal.
+    const $sel = opts.bind ?? A.proxy(keyOf(opts.tabs[0] ?? { label: "" }, 0));
+    const select = (tab, index) => {
+        if (tab.disabled)
+            return;
+        $sel.value = keyOf(tab, index);
+    };
+    A(`div.S_tabs.S_${variant}`, opts.root, () => {
+        A("div.S_tablist role=tablist", () => {
+            opts.tabs.forEach((tab, index) => {
+                const key = keyOf(tab, index);
+                A("button.S_tab type=button role=tab", () => {
+                    A(`id=${groupId}-tab-${key} aria-controls=${groupId}-panel-${key}`);
+                    A(() => {
+                        const selected = $sel.value === key;
+                        A("aria-selected=", selected ? "true" : "false");
+                        A("tabindex=", selected ? "0" : "-1");
+                    });
+                    if (tab.disabled)
+                        A("disabled=true");
+                    A("click=", () => select(tab, index));
+                    A("keydown=", (e) => onKey(e, opts.tabs, index, select));
+                    drawSlot(tab.icon);
+                    drawSlot(tab.label);
+                });
+            });
+        });
+        A("div.S_tabpanel role=tabpanel", opts.inner, () => {
+            A(() => {
+                const selKey = $sel.value;
+                const index = opts.tabs.findIndex((t, i) => keyOf(t, i) === selKey);
+                const tab = opts.tabs[index] ?? opts.tabs[0];
+                if (!tab)
+                    return;
+                A(`id=${groupId}-panel-${keyOf(tab, index)} aria-labelledby=${groupId}-tab-${keyOf(tab, index)}`);
+                tab.content?.();
+            });
+        });
+    });
+}
+/** Roving-tabindex keyboard handling for the tab strip. */
+function onKey(e, list, index, select) {
+    let next = index;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown")
+        next = (index + 1) % list.length;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+        next = (index - 1 + list.length) % list.length;
+    else if (e.key === "Home")
+        next = 0;
+    else if (e.key === "End")
+        next = list.length - 1;
+    else
+        return;
+    e.preventDefault();
+    // Skip disabled tabs in the chosen direction.
+    const dir = next >= index ? 1 : -1;
+    for (let i = 0; i < list.length; i++) {
+        const candidate = list[next];
+        if (candidate && !candidate.disabled) {
+            select(candidate, next);
+            const el = e.currentTarget?.parentElement?.children[next];
+            el?.focus();
+            return;
+        }
+        next = (next + dir + list.length) % list.length;
+    }
+}

package/dist/components/textarea.d.ts

@@ -0,0 +1,31 @@
+import type { Bindable } from "../core.js";
+import { type FieldOptions } from "./field.js";
+/** Options for {@link textarea}. */
+export interface TextareaOptions extends FieldOptions {
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Two-way binding target. */
+    bind?: Bindable<string>;
+    /** Static initial value. */
+    value?: string;
+    /** Visible number of text rows. Defaults to `4`. Ignored when `autoGrow` is enabled. */
+    rows?: number;
+    /** Whether the textarea may be resized by the user. Defaults to `"vertical"`. Ignored when `autoGrow` is enabled. */
+    resize?: "none" | "vertical" | "horizontal" | "both";
+    /** Auto-grow the textarea to fit its content. Defaults to `true`. */
+    autoGrow?: boolean;
+    /** Fired on every `input` event. */
+    input?: (event: Event) => void;
+    /** Fired on `change` (commit). */
+    change?: (event: Event) => void;
+}
+/**
+ * A multi-line text input. Shares the field chrome and styling of
+ * {@link textline}, adding `rows` and `resize` controls.
+ *
+ * @example
+ * ```ts
+ * S.textarea({ label: "Bio", rows: 6, bind: A.ref($user, "bio") });
+ * ```
+ */
+export declare function textarea(opts?: TextareaOptions): void;

package/dist/components/textarea.js

@@ -0,0 +1,49 @@
+import A from "aberdeen";
+import { applyControlAttrs, drawField } from "./field.js";
+A.insertGlobalCss({
+    "textarea.S_input": "resize:vertical min-height:3em line-height:1.45",
+    "textarea.S_input.S_autoGrow": "resize:none min-height:2.5em overflow-y:hidden",
+});
+/**
+ * A multi-line text input. Shares the field chrome and styling of
+ * {@link textline}, adding `rows` and `resize` controls.
+ *
+ * @example
+ * ```ts
+ * S.textarea({ label: "Bio", rows: 6, bind: A.ref($user, "bio") });
+ * ```
+ */
+export function textarea(opts = {}) {
+    const grow = opts.autoGrow !== false;
+    drawField(opts, (id, isInvalid) => {
+        const el = A("textarea.S_input", opts.control, () => {
+            if (grow) {
+                A(".S_autoGrow");
+                A("input=", (e) => {
+                    fitToContent(e.currentTarget);
+                    if (opts.input)
+                        opts.input(e);
+                });
+            }
+            else {
+                A("rows=", opts.rows ?? 4);
+                A("resize:", opts.resize ?? "vertical");
+                if (opts.input)
+                    A("input=", opts.input);
+            }
+            if (opts.placeholder != null)
+                A("placeholder=", opts.placeholder);
+            if (opts.value != null && !opts.bind)
+                A("value=", opts.value);
+            if (opts.change)
+                A("change=", opts.change);
+            applyControlAttrs(opts, id, isInvalid, opts.bind);
+        });
+        if (grow)
+            requestAnimationFrame(() => fitToContent(el));
+    });
+}
+function fitToContent(el) {
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+}