staffa 0.3.1 → 0.4.1

package/README.md

@@ -4,25 +4,23 @@ A small, opinionated TypeScript component library for the [Aberdeen](https://abe
 
 ```ts
 import A from "aberdeen";
-import S from "staffa";
+import * as S from "staffa";
 
 const $user = A.proxy({ name: "", email: "" });
 
-A.mount(document.body, () => {
-  S.main({
-    title: "Sign up",
-    maxWidth: "40rem",
-    content: () => {
-      S.form({
-        submit: () => console.log(A.unproxy($user)),
-        content: () => {
-          S.textline({ label: "Name", required: true, bind: A.ref($user, "name") });
-          S.textline({ label: "Email", type: "email", bind: A.ref($user, "email") });
-        },
-        actions: () => S.button({ text: "Create account", type: "submit" }),
-      });
-    },
-  });
+S.main({
+  title: "Sign up",
+  maxWidth: "40rem",
+  content: () => {
+    S.form({
+      submit: () => console.log(A.unproxy($user)),
+      content: () => {
+        S.textline({ label: "Name", required: true, bind: A.ref($user, "name") });
+        S.textline({ label: "Email", type: "email", bind: A.ref($user, "email") });
+      },
+      actions: () => S.button({ content: "Create account", type: "submit" }),
+    });
+  },
 });
 ```
 
@@ -43,7 +41,7 @@ Aberdeen is a peer dependency. Staffa is published as ESM with TypeScript types.
 Every component takes a single typed options object and draws DOM via Aberdeen. No classes, no web components. The `S` object collects all component functions:
 
 ```ts
-S.button({ text: "Save", disabled: false });
+S.button({ content: "Save", disabled: false });
 S.box({ header: "Settings", content: () => { ... } });
 ```
 
@@ -52,7 +50,7 @@ S.box({ header: "Settings", content: () => { ... } });
 All components get their options in a typed object. The object may be an Aberdeen proxy, if you want to update the component in-place.
 
 ```ts
-const $btn = A.proxy({ text: "Save", disabled: false });
+const $btn = A.proxy({ content: "Save", disabled: false });
 S.button($btn);
 // ...later:
 $btn.disabled = true;  // button updates instantly
@@ -63,7 +61,7 @@ $btn.disabled = true;  // button updates instantly
 Anywhere a component takes content, a `label`, `header`, button `text`, dialog body, etc, you can pass either a string or a `() => void` draw function. Strings render as **rich text**: `*italic*`, `**bold**`, `` `code` ``, `[link](/path)`. All text is safely escaped.
 
 ```ts
-S.button({ text: "Save **now**" });
+S.button({ content: "Save **now**" });
 S.box({ header: "See the [docs](/docs)", content: () => { ... } });
 ```
 
@@ -78,7 +76,7 @@ Staffa builds on **surfaces**: elements marked with `.s-s` that have their own b
 Components are built from these (`S.button` is a `.s-s.primary.filled`, `S.box` a `.s-s.panel`, etc.). Because component options include an optional `attrs` string, which has Aberdeen `A()` string semantics, you can easily override it:
 
 ```ts
-S.button({ text: "Delete", attrs: ".danger" });
+S.button({ content: "Delete", attrs: ".danger" });
 S.box({ attrs: ".raised.outlined", content: () => { ... } });
 ```
 
@@ -120,7 +118,7 @@ If you need further customization, just add some CSS to override the default sty
 A.insertGlobalCss({".s-s.my-surface": "--s-a:white --s-b:#ef6b00"});
 
 S.button({
-  text: "You'll want to click me",
+  content: "You'll want to click me",
   attrs: ".my-surface",
   click: () => S.alert("Good work!", {attrs: ".my-surface"})
 });
@@ -184,7 +182,7 @@ import { sparkles, bell } from "staffa/icons.js";
 Each icon is a draw function usable anywhere a slot is accepted (e.g. a button `icon`), or called directly. Customize per call, or globally via `setDefaults()`:
 
 ```ts
-S.button({ text: "Save", icon: bell });
+S.button({ content: "Save", icon: bell });
 sparkles({ size: "1.5em", color: "var(--s-primary)", strokeWidth: 1.5 });
 ```
 
@@ -213,7 +211,7 @@ Two-way binding uses Aberdeen proxies: pass `bind: A.ref($obj, "key")` to form f
 </script>
 <script type="module">
   import A from "aberdeen";
-  import S from "staffa/all.js";
+  import * as S from "staffa/all.js";
   // ...
 </script>
 ```
@@ -265,4 +263,28 @@ npm run build      # compile TypeScript to dist/
 npm run typecheck  # check types
 npm run smoke      # render every component in jsdom
 npx http-server    # allows demo to be viewed at http://localhost:8080/demo
+npx shotest test   # visual tests: click through the demo, screenshotting every step
+npx shotest review # review/accept the visual changes against the baseline
 ```
+
+The visual tests (`tests/*.spec.ts`) need a build first (`npm run build`); they serve the repo root themselves and click through every demo page. Accepted baselines live in `test-accepted/`.
+
+## AI skill
+
+If you use Claude Code, GitHub Copilot or another AI agents that supports Skills, Staffa includes a `skill/` directory that provides specialized knowledge to the AI about how to use the library effectively.
+
+To use this, it is recommended to symlink the skill into your project's `.claude/skills` directory:
+
+```sh
+mkdir -p .claude/skills
+ln -s ../../node_modules/staffa/skill .claude/skills/staffa
+```
+
+## Breaking changes
+
+- **0.4**
+  - There is no default export anymore: replace `import S from "staffa"` with `import * as S from "staffa"`.
+  - `S.button` no longer has a `text` option: use `content` instead (it accepts a string or a draw function).
+  - The `Content` type is gone: use `Slot` instead. The `Styling` type alias is now exported as `Attributes`.
+  - `S.buttonChooser` uses `undefined` instead of `null` for "nothing selected" (in `bind` and with `allowDeselect`).
+  

package/dist/components/box.d.ts

@@ -1,4 +1,4 @@
-import { type Content, type ContentOptions, type Slot, type Attributes } from "../core.js";
+import { type ContentOptions, type Slot, type Attributes } from "../core.js";
 /** Options for {@link box}. */
 export interface BoxOptions extends ContentOptions {
     /** Header content, drawn in a styled bar above the body. */
@@ -30,4 +30,4 @@ export interface BoxOptions extends ContentOptions {
  * S.box(() => A("p#Just some content"));   // shorthand
  * ```
  */
-export declare function box(opts?: BoxOptions | Content): void;
+export declare function box(opts?: BoxOptions | Slot): void;

package/dist/components/box.js

@@ -9,7 +9,7 @@ A.insertGlobalCss({
         "&": "display:flex flex-direction:column border: 1px solid $s-border; r: $s-radius-lg; overflow:hidden box-shadow: $s-shadow;",
         "&:not(:first-child)": "margin-top: $3",
         "> header": "display:flex align-items:center gap:$2 padding: $2 $3; border-bottom: 1px solid $s-border; font-weight:600",
-        "> footer": "display:flex align-items:center gap:$2 padding: $2 $3; border-top: 1px solid $s-border;",
+        "> footer": "display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border-top: 1px solid $s-border;",
         "> div": "p:$3 gap:$3",
     },
 });
@@ -32,7 +32,7 @@ A.insertGlobalCss({
  * ```
  */
 export function box(opts = {}) {
-    const o = typeof opts === "function" ? { content: opts } : opts;
+    const o = typeof opts === "string" || typeof opts === "function" ? { content: opts } : opts;
     A("section.s-box.s-s.panel", o.attrs, () => {
         // Header and footer get their own scopes so toggling them doesn't recreate
         // the body (which may hold focused inputs / lots of content).
@@ -41,8 +41,7 @@ export function box(opts = {}) {
                 A("header.s-s.raised", o.headerAttrs, () => drawSlot(o.header));
         });
         A("div", o.contentAttrs, () => {
-            if (o.content)
-                o.content();
+            drawSlot(o.content);
         });
         A(() => {
             if (o.footer != null)

package/dist/components/button.d.ts

@@ -1,10 +1,8 @@
-import { type Content, type Slot, type Attributes } from "../core.js";
+import { type Slot, type Attributes } from "../core.js";
 /** Options for {@link button}. */
 export interface ButtonOptions {
-    /** Button label text. */
-    text?: string;
-    /** Custom content (overrides {@link ButtonOptions.text | text}). */
-    content?: Content;
+    /** Button content: a string for plain text, or a function for custom markup. */
+    content?: Slot;
     /** Leading icon/adornment, drawn before the label. */
     icon?: Slot;
     /** Click handler. */
@@ -39,15 +37,15 @@ export interface ButtonOptions {
  * startup) for SPA-style navigation without manual click handlers:
  * ```ts
  * interceptLinks(); // once at root
- * S.button({ href: "/dashboard", text: "Dashboard" }); // navigates via router
+ * S.button({ href: "/dashboard", content: "Dashboard" }); // navigates via router
  * ```
  *
  * @example
  * ```ts
- * S.button({ text: "Save", click: save });
- * S.button({ text: "Delete", attrs: ".danger .outlined", click: del });
- * S.button("Cancel");                        // shorthand for { text: "Cancel" }
- * S.button({ href: "/docs", text: "Docs" }); // renders an <a role=button>
+ * S.button({ content: "Save", click: save });
+ * S.button({ content: "Delete", attrs: ".danger .outlined", click: del });
+ * S.button("Cancel");                        // shorthand for { content: "Cancel" }
+ * S.button({ href: "/docs", content: "Docs" }); // renders an <a role=button>
  * ```
  */
-export declare function button(opts?: ButtonOptions | string | Content): void;
+export declare function button(opts?: ButtonOptions | Slot): void;

package/dist/components/button.js

@@ -17,14 +17,15 @@ A.insertGlobalCss({
         "&:hover": "filter: brightness(1.08); transform: translateY(-1px)",
         "&.tonal:hover, &.outlined:hover": "background: color-mix(in srgb, $s-b 26%, transparent);",
         // A filled `.gradient` button (the default) is the app's signature call to
-        // action: a borderless gradient with a soft glow that lifts on hover. The
-        // gradient fill itself comes from the `.s-s.gradient` surface rule in theme.ts.
-        // No border: a filled gradient reads as one solid shape. Dropping the border
-        // (rather than making it transparent) also sidesteps a Chromium artifact where
-        // a gradient clipped to a transparent rounded border fringes the edge with the
-        // gradient's far colour.
-        "&.gradient:not(.tonal):not(.outlined)": "border:0 box-shadow: $s-glow;",
-        "&.gradient:not(.tonal):not(.outlined):hover": "filter: brightness(1.06); box-shadow: 0 10px 28px color-mix(in srgb, $s-primary 42%, transparent); transform: translateY(-1px);",
+        // action: a borderless gradient with a hairline top highlight (a hint of
+        // top-lighting that sells the fill as a lit, rounded shape) over a soft glow.
+        // The gradient fill itself comes from the `.s-s.gradient` surface rule in
+        // theme.ts. No border: a filled gradient reads as one solid shape. Dropping
+        // the border (rather than making it transparent) also sidesteps a Chromium
+        // artifact where a gradient clipped to a transparent rounded border fringes
+        // the edge with the gradient's far colour.
+        "&.gradient:not(.tonal):not(.outlined)": "border:0 box-shadow: inset 0 1px 0 color-mix(in srgb, white 25%, transparent), $s-glow;",
+        "&.gradient:not(.tonal):not(.outlined):hover": "filter: brightness(1.05); box-shadow: inset 0 1px 0 color-mix(in srgb, white 25%, transparent), 0 7px 18px color-mix(in srgb, $s-primary 34%, transparent); transform: translateY(-1px);",
         // Subtle press feedback.
         "&:active:not(:disabled):not([aria-disabled=true])": "transform: translateY(1px)",
         // Size: set on the button itself, or inherited from a `.small`/`.large`
@@ -47,19 +48,19 @@ const ROLE_CLASS = /\.(gradient|primary|secondary|neutral|danger|success|warning
  * startup) for SPA-style navigation without manual click handlers:
  * ```ts
  * interceptLinks(); // once at root
- * S.button({ href: "/dashboard", text: "Dashboard" }); // navigates via router
+ * S.button({ href: "/dashboard", content: "Dashboard" }); // navigates via router
  * ```
  *
  * @example
  * ```ts
- * S.button({ text: "Save", click: save });
- * S.button({ text: "Delete", attrs: ".danger .outlined", click: del });
- * S.button("Cancel");                        // shorthand for { text: "Cancel" }
- * S.button({ href: "/docs", text: "Docs" }); // renders an <a role=button>
+ * S.button({ content: "Save", click: save });
+ * S.button({ content: "Delete", attrs: ".danger .outlined", click: del });
+ * S.button("Cancel");                        // shorthand for { content: "Cancel" }
+ * S.button({ href: "/docs", content: "Docs" }); // renders an <a role=button>
  * ```
  */
 export function button(opts = {}) {
-    const o = typeof opts === "string" ? { text: opts } : typeof opts === "function" ? { content: opts } : opts;
+    const o = typeof opts === "string" || typeof opts === "function" ? { content: opts } : opts;
     const tag = o.href != null ? "a" : "button";
     // A filled `.gradient` surface by default — the signature CTA. If the caller's
     // `attrs` already names a surface role we omit the default, so `.danger`,
@@ -82,9 +83,6 @@ export function button(opts = {}) {
         if (o.click)
             A("click=", o.click);
         drawSlot(o.icon);
-        if (o.content)
-            o.content();
-        else if (o.text != null)
-            A("#", o.text);
+        drawSlot(o.content);
     });
 }

package/dist/components/buttonChooser.d.ts

@@ -10,13 +10,13 @@ export interface ButtonChooserOptions {
      */
     options: Record<string, Slot>;
     /**
-     * Two-way binding for the selected id, or `null` when nothing is selected.
+     * Two-way binding for the selected id, or `undefined` when nothing is selected.
      * Use an `A.proxy` or `A.ref`.
      */
-    bind: Bindable<string | null>;
+    bind: Bindable<string | undefined>;
     /**
      * When `true`, clicking the already-selected button deselects it, setting
-     * `bind.value` to `null`. Useful for "none / auto" states.
+     * `bind.value` to `undefined`. Useful for "none / auto" states.
      */
     allowDeselect?: boolean;
     /** Name attribute for the hidden `<input>`, enabling form submission. */
@@ -24,14 +24,14 @@ export interface ButtonChooserOptions {
 }
 /**
  * A single-selection segmented control: an attached button group where exactly
- * one button is active at a time. Optionally allows deselecting back to `null`.
+ * one button is active at a time. Optionally allows deselecting back to `undefined`.
  *
  * Renders a hidden `<input>` alongside (when `name` is set) so the selected
  * value is included in native form submission.
  *
  * @example
  * ```ts
- * const $view = A.proxy({ value: "day" as string | null });
+ * const $view = A.proxy({ value: "day" as string | undefined });
  * S.buttonChooser({
  *   options: { day: "Day", week: "Week", month: "Month" },
  *   bind: $view,

package/dist/components/buttonChooser.js

@@ -2,14 +2,14 @@ import A from "aberdeen";
 import { buttonGroup } from "./buttonGroup.js";
 /**
  * A single-selection segmented control: an attached button group where exactly
- * one button is active at a time. Optionally allows deselecting back to `null`.
+ * one button is active at a time. Optionally allows deselecting back to `undefined`.
  *
  * Renders a hidden `<input>` alongside (when `name` is set) so the selected
  * value is included in native form submission.
  *
  * @example
  * ```ts
- * const $view = A.proxy({ value: "day" as string | null });
+ * const $view = A.proxy({ value: "day" as string | undefined });
  * S.buttonChooser({
  *   options: { day: "Day", week: "Week", month: "Month" },
  *   bind: $view,
@@ -22,11 +22,13 @@ export function buttonChooser(opts) {
         buttonGroup({
             attrs: opts.attrs,
             buttons: Object.entries(opts.options).map(([id, label]) => ({
-                text: typeof label === "string" ? label : undefined,
-                content: typeof label === "function" ? label : undefined,
+                content: label,
+                // Icon-only options (draw-function labels) get the id as their
+                // accessible name; plain-text labels speak for themselves.
+                ariaLabel: typeof label === "function" ? id : undefined,
                 attrs: selected === id ? ".primary" : ".neutral .outlined",
                 click: () => {
-                    opts.bind.value = (opts.allowDeselect && selected === id) ? null : id;
+                    opts.bind.value = (opts.allowDeselect && selected === id) ? undefined : id;
                 },
             })),
         });

package/dist/components/buttonGroup.d.ts

@@ -22,9 +22,9 @@ export interface ButtonGroupOptions extends ContentOptions {
  * @example
  * ```ts
  * S.buttonGroup({ buttons: [
- *   { text: "Day", attrs: ".neutral .outlined" },
- *   { text: "Week", attrs: ".neutral .outlined" },
- *   { text: "Month", attrs: ".neutral .outlined" },
+ *   { content: "Day", attrs: ".neutral .outlined" },
+ *   { content: "Week", attrs: ".neutral .outlined" },
+ *   { content: "Month", attrs: ".neutral .outlined" },
  * ]});
  * ```
  */

package/dist/components/buttonGroup.js

@@ -1,4 +1,5 @@
 import A from "aberdeen";
+import { drawSlot } from "../core.js";
 import { button } from "./button.js";
 A.insertGlobalCss({
     ".s-bgroup": {
@@ -24,9 +25,9 @@ A.insertGlobalCss({
  * @example
  * ```ts
  * S.buttonGroup({ buttons: [
- *   { text: "Day", attrs: ".neutral .outlined" },
- *   { text: "Week", attrs: ".neutral .outlined" },
- *   { text: "Month", attrs: ".neutral .outlined" },
+ *   { content: "Day", attrs: ".neutral .outlined" },
+ *   { content: "Week", attrs: ".neutral .outlined" },
+ *   { content: "Month", attrs: ".neutral .outlined" },
  * ]});
  * ```
  */
@@ -37,7 +38,6 @@ export function buttonGroup(opts = {}) {
         if (opts.buttons)
             for (const b of opts.buttons)
                 button(b);
-        if (opts.content)
-            opts.content();
+        drawSlot(opts.content);
     });
 }

package/dist/components/dialog.d.ts

@@ -52,8 +52,8 @@ export interface DialogOptions {
  *   header: "Confirm",
  *   content: (close) => {
  *     A("p #Are you sure?");
- *     S.button({ text: "Yes", click: () => { doIt(); close(); } });
- *     S.button({ text: "Cancel", attrs: ".neutral .outlined", click: close });
+ *     S.button({ content: "Yes", click: () => { doIt(); close(); } });
+ *     S.button({ content: "Cancel", attrs: ".neutral .outlined", click: close });
  *   },
  * });
  * ```

package/dist/components/dialog.js

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { drawSlot } from "../core.js";
+import { drawSlot, mountPortal } from "../core.js";
 import { button } from "./button.js";
 import { buttonGroup } from "./buttonGroup.js";
 import { textline } from "./textline.js";
@@ -17,7 +17,7 @@ A.insertGlobalCss({
             "transition: opacity 0.2s ease-out, transform 0.2s ease-out;",
         "> header": "display:flex align-items:center gap:$2 padding: $2 $3; " +
             "border-bottom: 1px solid $s-border; font-weight:600 flex-shrink:0",
-        "> footer": "display:flex align-items:center gap:$2 padding: $2 $3; " +
+        "> footer": "display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; " +
             "border-top: 1px solid $s-border; 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)); pointer-events:none",
@@ -30,7 +30,7 @@ const topDialogId = A.derive(() => {
     if (keys.length)
         return keys[keys.length - 1];
 });
-A.mount(document.body, () => {
+mountPortal(() => {
     A.onEach(dialogs, ({ resolve, opts }, dialogId) => {
         const close = () => { delete dialogs[dialogId]; };
         A.clean(() => {
@@ -78,8 +78,8 @@ A.mount(document.body, () => {
  *   header: "Confirm",
  *   content: (close) => {
  *     A("p #Are you sure?");
- *     S.button({ text: "Yes", click: () => { doIt(); close(); } });
- *     S.button({ text: "Cancel", attrs: ".neutral .outlined", click: close });
+ *     S.button({ content: "Yes", click: () => { doIt(); close(); } });
+ *     S.button({ content: "Cancel", attrs: ".neutral .outlined", click: close });
  *   },
  * });
  * ```
@@ -126,7 +126,7 @@ export function alert(message, opts = {}) {
         content: (close) => {
             A("p", () => { A("#", message); });
             buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
-                    button({ text: "OK", click: close });
+                    button({ content: "OK", click: close });
                 } });
         },
         ...opts,
@@ -150,8 +150,8 @@ export function confirm(message, opts = {}) {
             content: (close) => {
                 A("p", () => { A("#", message); });
                 buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
-                        button({ text: "Cancel", attrs: ".neutral .outlined", click: close });
-                        button({ text: "OK", click: () => { confirmed = true; close(); } });
+                        button({ content: "Cancel", attrs: ".neutral .outlined", click: close });
+                        button({ content: "OK", click: () => { confirmed = true; close(); } });
                     } });
             },
             ...opts,
@@ -189,8 +189,8 @@ export function prompt(message, defaultValue = "", opts = {}) {
                     });
                     textline({ bind: A.ref($v, "value") });
                     buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
-                            button({ text: "Cancel", attrs: ".neutral .outlined", type: "button", click: close });
-                            button({ text: "OK", type: "submit" });
+                            button({ content: "Cancel", attrs: ".neutral .outlined", type: "button", click: close });
+                            button({ content: "OK", type: "submit" });
                         } });
                 });
             },

package/dist/components/form.d.ts

@@ -1,4 +1,4 @@
-import { type Content, type ContentOptions, type Attributes } from "../core.js";
+import { type ContentOptions, type Attributes, type Slot } from "../core.js";
 /** Options for {@link form}. */
 export interface FormOptions extends ContentOptions {
     /**
@@ -16,7 +16,7 @@ export interface FormOptions extends ContentOptions {
     /** Aberdeen attr/style string for the action bar. */
     actionsAttrs?: Attributes;
     /** Footer actions (typically a {@link import("./buttonGroup").buttonGroup} or buttons). */
-    actions?: Content;
+    actions?: Slot;
 }
 /**
  * An opinionated `<form>` wrapper that lays its fields out consistently — a clean
@@ -35,8 +35,8 @@ export interface FormOptions extends ContentOptions {
  *     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" }),
+ *   actions: () => S.button({ content: "Save", type: "submit" }),
  * });
  * ```
  */
-export declare function form(opts?: FormOptions | Content): void;
+export declare function form(opts?: FormOptions | Slot): void;

package/dist/components/form.js

@@ -1,10 +1,11 @@
 import A from "aberdeen";
+import { drawSlot } from "../core.js";
 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",
+        "> footer": "display:flex align-items:center justify-content:flex-end gap:$2 flex-wrap:wrap margin-top:$1",
     },
 });
 /**
@@ -24,12 +25,12 @@ A.insertGlobalCss({
  *     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" }),
+ *   actions: () => S.button({ content: "Save", type: "submit" }),
  * });
  * ```
  */
 export function form(opts = {}) {
-    const o = typeof opts === "function" ? { content: opts } : opts;
+    const o = typeof opts === "string" || typeof opts === "function" ? { content: opts } : opts;
     A(`form.s-form`, o.attrs, () => {
         // Toggle grid class in its own scope so changing layout doesn't recreate
         // the fields (which would lose focus / input state).
@@ -48,12 +49,11 @@ export function form(opts = {}) {
                 o.submit(data, event);
             }
         });
-        if (o.content)
-            o.content();
+        drawSlot(o.content);
         // Own scope so toggling actions doesn't recreate the fields above.
         A(() => {
             if (o.actions)
-                A("footer", o.actionsAttrs, () => o.actions?.());
+                A("footer", o.actionsAttrs, () => drawSlot(o.actions));
         });
     });
 }

package/dist/components/main.d.ts

@@ -1,4 +1,4 @@
-import { type Content, type Slot, type Attributes } from "../core.js";
+import { type Slot, type Attributes } from "../core.js";
 import { type MenuOptions } from "./menu.js";
 /** Options for {@link main}. */
 export interface MainOptions {
@@ -11,9 +11,9 @@ export interface MainOptions {
     /** 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;
+    menu?: Slot;
+    /** The scrollable page content. A string is rendered as rich text. */
+    content?: Slot;
     /** Footer content, pinned below the scroll area. */
     footer?: Slot;
     /**
@@ -65,7 +65,7 @@ export interface MainOptions {
  *     ],
  *   },
  *   navPosition: "left",
- *   menu: () => S.button({ text: "New", attrs: ".small" }),
+ *   menu: () => S.button({ content: "New", attrs: ".small" }),
  *   content: () => drawPage(),
  *   footer: "© 2026",
  * });