staffa 0.3.1 → 0.4.1

package/dist/components/main.js

@@ -15,8 +15,9 @@ A.insertGlobalCss({
         "> header .s-title": "font-weight:800 font-size:1.1em line-height:1.2 overflow:hidden text-overflow:ellipsis white-space:nowrap letter-spacing:-0.01em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content max-width:100%",
         "> header .s-subtitle": "fg:$s-fg-muted font-size:0.85em overflow:hidden text-overflow:ellipsis white-space:nowrap",
         "> header .s-menu": "display:flex align-items:center gap:$2",
-        // Body holds sidebar + separator + <main> side by side (only used in sidebar
-        // nav mode). It centres `.s-body-inner`, which caps the trio to maxWidth.
+        // Body always wraps <main> (with or without a sidebar) so max-width centering
+        // and scrollbar alignment work identically in both cases.
+        // .s-body centres .s-body-inner; .s-body-inner caps the content to maxWidth.
         ".s-body": "flex:1 overflow:hidden display:flex flex-direction:row min-height:0 justify-content:center",
         ".s-body-inner": "flex:1 display:flex flex-direction:row min-height:0",
         // Put the sidebar on the right (content fills the left) for right-hand navs.
@@ -24,20 +25,19 @@ A.insertGlobalCss({
         // A vertical hairline between sidebar and content, fading out at both ends —
         // the vertical sibling of the menu's `hr.s-menu-sep`.
         ".s-nav-sep": "width:1px flex-shrink:0 align-self:stretch margin: 0.6rem 0; border:0 background: linear-gradient(to bottom, transparent, $s-border-strong 18%, $s-border-strong 82%, transparent);",
-        // Without a sidebar, <main> is a direct child; with one it lives in .s-body.
-        "> main, .s-body main": "flex:1 overflow-y:auto display:flex flex-direction:column",
-        // The content area fills the scroll region with comfortable padding. Without a
-        // sidebar it caps its own width to maxWidth and centres (applied inline in
-        // drawMainContent); with one, `.s-body-inner` does the capping for the trio.
+        // min-height:0 overrides the flex default of min-height:auto so <main> can
+        // shrink to fit the bounded container and show its own scrollbar.
+        ".s-body main": "flex:1 min-height:0 overflow-y:auto display:flex flex-direction:column",
+        // The content area fills the scroll region with comfortable padding.
         // It is deliberately NOT a boxed "sheet" — content brings its own boxes.
-        "> main > .s-content, .s-body main > .s-content": "width:100% flex:1 p:$3",
+        ".s-body main > .s-content": "width:100% flex:1 p:$3",
         // When <main> actually shows a vertical scrollbar (the `.s-scroll-y` class is
         // toggled from JS by watchVerticalOverflow), inset it from the shell edge by
         // $3 so the bar's right edge lines up with the header/footer content (which
         // sits $3 inside the edge via `.s-bar` padding). The $3 gap between the content
         // and the bar already comes from `.s-content`'s padding. Without a scrollbar
         // there's no margin, so the content keeps its single $3 edge — not 2×$3.
-        "> main.s-scroll-y, .s-body main.s-scroll-y": "margin-right:$3",
+        ".s-body main.s-scroll-y": "margin-right:$3",
     },
     // Sidebar nav panel. Items reuse the shared `.s-menu-item[-link]` /
     // `.s-menu-sep` styles from menu.ts, so the sidebar and the floating
@@ -63,6 +63,9 @@ A.insertGlobalCss({
         // On phones a top-level content box becomes a full-bleed block: pull it out
         // to negate the content padding and drop the rounded corners.
         ".s-content > .s-box": "margin-inline: calc(-1 * $3); r:0 border-inline:0",
+        // At narrow widths, content boxes are full-bleed so there's no inset to
+        // align the scrollbar with — cancel the right margin.
+        ".s-main .s-body main.s-scroll-y": "margin-right:0",
     },
 });
 /**
@@ -85,7 +88,7 @@ A.insertGlobalCss({
  *     ],
  *   },
  *   navPosition: "left",
- *   menu: () => S.button({ text: "New", attrs: ".small" }),
+ *   menu: () => S.button({ content: "New", attrs: ".small" }),
  *   content: () => drawPage(),
  *   footer: "© 2026",
  * });
@@ -146,31 +149,28 @@ export function main(opts = {}) {
                     });
                     A(() => {
                         if (opts.menu)
-                            A("div.s-menu", () => opts.menu?.());
+                            A("div.s-menu", () => drawSlot(opts.menu));
                     });
                 });
             });
         });
-        // Body — wraps sidebar + separator + main when nav is in sidebar mode. The
-        // trio together caps to maxWidth (via .s-body-inner); main fills the rest.
-        if (hasNav && navPos !== "button") {
-            A("div.s-body", () => {
-                A("div.s-body-inner", () => {
-                    A(() => {
-                        if (opts.maxWidth != null)
-                            A("max-width:", opts.maxWidth);
-                    });
+        // Body always wraps <main> so max-width centering and scrollbar alignment
+        // are identical with and without a sidebar nav.
+        A("div.s-body", () => {
+            A("div.s-body-inner", () => {
+                A(() => {
+                    if (opts.maxWidth != null)
+                        A("max-width:", opts.maxWidth);
+                });
+                if (hasNav && navPos !== "button") {
                     A(`nav.s-nav-panel.s-s.raised.s-nav-${navPos}`, opts.navAttrs, () => {
                         drawMenu(nav.items);
                     });
                     A("div.s-nav-sep aria-hidden=true");
-                    drawMainContent(opts, false);
-                });
+                }
+                drawMainContent(opts);
             });
-        }
-        else {
-            drawMainContent(opts, true);
-        }
+        });
         // Footer — full-width background, content centred to maxWidth via .s-bar.
         A(() => {
             if (opts.footer != null) {
@@ -187,22 +187,10 @@ export function main(opts = {}) {
         });
     });
 }
-/**
- * Draw the scrollable `<main>` + content area. When `capWidth` is true (no
- * sidebar), the content caps its own width to maxWidth and centres; in sidebar
- * mode the surrounding `.s-body-inner` already caps the sidebar+content trio.
- */
-function drawMainContent(opts, capWidth) {
+function drawMainContent(opts) {
     const mainEl = A("main", () => {
         A("div.s-content", opts.contentAttrs, () => {
-            if (capWidth) {
-                A(() => {
-                    if (opts.maxWidth != null)
-                        A("margin-inline:auto max-width:", opts.maxWidth);
-                });
-            }
-            if (opts.content)
-                opts.content();
+            drawSlot(opts.content);
         });
     });
     watchVerticalOverflow(mainEl);

package/dist/components/menu.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 ButtonOptions } from "./button.js";
 /**
  * A clickable item in a menu or sidebar nav.
@@ -36,10 +36,10 @@ export interface MenuSeparator {
  * An entry in a menu or sidebar nav list. Three forms:
  * - `MenuItem` — a clickable/linkable row with label and optional icon.
  * - `MenuSeparator` — a visual divider (`{ separator: true }`).
- * - A draw function `() => void` — renders custom content (section header,
+ * - A slot (string or draw function) — renders custom content (section header,
  *   avatar, search box, …). Skipped by keyboard navigation.
  */
-export type MenuEntry = MenuItem | MenuSeparator | Content;
+export type MenuEntry = MenuItem | MenuSeparator | Slot;
 /** Options for {@link menuButton} and {@link MainOptions.nav}. */
 export interface MenuOptions {
     /** Items shown in the dropdown or sidebar nav. */
@@ -106,7 +106,7 @@ export declare function showFloatingMenu(opts: FloatingMenuOptions): () => void;
  * @example
  * ```ts
  * S.menuButton({
- *   button: { text: "Actions", attrs: ".neutral .outlined" },
+ *   button: { content: "Actions", attrs: ".neutral .outlined" },
  *   items: [
  *     { label: "Edit", icon: () => A("#✎"), click: () => edit() },
  *     { separator: true },

package/dist/components/menu.js

@@ -1,6 +1,6 @@
 import A from "aberdeen";
 import { matchCurrent } from "aberdeen/route";
-import { drawSlot } from "../core.js";
+import { drawSlot, mountPortal } from "../core.js";
 import { button } from "./button.js";
 // Styles shared by the floating dropdown and the sidebar nav, so both look
 // identical. The item styles aren't scoped to a container, so `drawMenu` can
@@ -68,8 +68,8 @@ export function drawMenu(items, onActivate) {
         els[next].focus();
     });
     for (const entry of items) {
-        if (typeof entry === "function") {
-            entry();
+        if (typeof entry === "string" || typeof entry === "function") {
+            drawSlot(entry);
             continue;
         }
         if ("separator" in entry) {
@@ -122,7 +122,7 @@ function positionMenu(menuEl, rect) {
     menuEl.style.left = Math.max(8, x) + "px";
     menuEl.style.top = Math.max(8, y) + "px";
 }
-A.mount(document.body, () => {
+mountPortal(() => {
     const f = $floating.opts;
     if (!f)
         return;
@@ -187,7 +187,7 @@ export function showFloatingMenu(opts) {
  * @example
  * ```ts
  * S.menuButton({
- *   button: { text: "Actions", attrs: ".neutral .outlined" },
+ *   button: { content: "Actions", attrs: ".neutral .outlined" },
  *   items: [
  *     { label: "Edit", icon: () => A("#✎"), click: () => edit() },
  *     { separator: true },
@@ -202,7 +202,9 @@ export function menuButton(opts) {
         closeFloating(); });
     button({
         icon: () => A("span aria-hidden=true #☰"),
-        ariaLabel: "Open menu",
+        // Only label the trigger "Open menu" when it has no visible text of its
+        // own — an aria-label would otherwise *hide* that text from AT.
+        ...(opts.button?.content == null ? { ariaLabel: "Open menu" } : null),
         attrs: ".neutral .outlined",
         ...opts.button,
         click: (e) => {

package/dist/components/tabs.d.ts

@@ -1,4 +1,4 @@
-import { type Bindable, type Content, type Slot, type Attributes } from "../core.js";
+import { type Bindable, type Slot, type Attributes } from "../core.js";
 /** A single tab definition. */
 export interface Tab {
     /** Stable id used as the selection value. Falls back to the array index. */
@@ -7,8 +7,8 @@ export interface Tab {
     label: Slot;
     /** Optional leading icon. */
     icon?: Slot;
-    /** Content rendered in the panel when this tab is active. */
-    content?: Content;
+    /** Content rendered in the panel when this tab is active. A string is rendered as rich text. */
+    content?: Slot;
     /** Disables selecting this tab. */
     disabled?: boolean;
 }

package/dist/components/tabs.js

@@ -67,7 +67,7 @@ export function tabs(opts) {
                 if (!tab)
                     return;
                 A(`id=${groupId}-panel-${keyOf(tab, index)} aria-labelledby=${groupId}-tab-${keyOf(tab, index)}`);
-                tab.content?.();
+                drawSlot(tab.content);
             });
         });
     });

package/dist/components/toast.d.ts

@@ -1,5 +1,4 @@
 import { type Slot, type Attributes } from "../core.js";
-import type { SurfaceRole } from "../theme.js";
 /** Options for {@link toast}. */
 export interface ToastOptions {
     /** Primary message. A string is rendered as rich text. */
@@ -8,9 +7,8 @@ export interface ToastOptions {
     title?: Slot;
     /**
      * Colour role. Defaults to `"neutral"`.
-     * Use `"success"` / `"danger"` / `"warning"` for semantic feedback.
      */
-    type?: SurfaceRole;
+    type?: "success" | "danger" | "warning" | "neutral";
     /**
      * Auto-dismiss delay in milliseconds. Defaults to `4000`.
      * Pass `0` to make the toast persistent until dismissed manually.

package/dist/components/toast.js

@@ -1,6 +1,6 @@
 import A from "aberdeen";
 import { grow, shrink } from "aberdeen/transitions";
-import { drawSlot } from "../core.js";
+import { drawSlot, mountPortal } from "../core.js";
 A.insertGlobalCss({
     ".s-toasts": "position:fixed bottom:$3 right:$3 z-index:400 " +
         "display:flex flex-direction:column gap:$2 " +
@@ -21,7 +21,7 @@ A.insertGlobalCss({
 let toastCount = 0;
 // Keyed by stable ID so A.onEach scopes are per-toast — removing one never re-renders others.
 const toasts = A.proxy({});
-A.mount(document.body, () => {
+mountPortal(() => {
     A("div.s-toasts aria-live=polite aria-atomic=false", () => {
         A.onEach(toasts, (entry) => {
             const { opts } = entry;

package/dist/components/tooltip.js

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { drawSlot } from "../core.js";
+import { drawSlot, mountPortal } from "../core.js";
 A.insertGlobalCss({
     ".s-tt-tip": {
         "&": "position:fixed z-index:500 " +
@@ -67,7 +67,7 @@ function scheduleHide() {
     }, 100);
 }
 // ─── Portal ──────────────────────────────────────────────────────────────────
-A.mount(document.body, () => {
+mountPortal(() => {
     const active = $ttActive.value;
     if (!active)
         return;

package/dist/core.d.ts

@@ -26,8 +26,6 @@ export type Attributes = string;
 export type Bindable<T> = {
     value: T;
 };
-/** A content function. It runs inside the relevant element's reactive scope. */
-export type Content = () => void;
 /**
  * Something that renders a small piece of content: either a plain string or a
  * draw function (for icons, badges, custom markup, ...).
@@ -47,8 +45,8 @@ export type Slot<Args extends unknown[] = []> = string | ((...args: Args) => voi
 export interface ContentOptions {
     /** Aberdeen attr/style string applied to the widget's outermost element. */
     attrs?: Attributes;
-    /** Draws the children of this component. */
-    content?: Content;
+    /** Draws the children of this component. A string is rendered as rich text. */
+    content?: Slot;
 }
 /** Generates a process-unique id, used to wire `<label for>` to its control. */
 export declare function uniqueId(prefix?: string): string;
@@ -58,3 +56,11 @@ export declare function uniqueId(prefix?: string): string;
  * `rich` markup (`*italic*`, `**bold**`, `` `code` ``, `[link](/path)`).
  */
 export declare function drawSlot<Args extends unknown[] = []>(slot: Slot<Args> | undefined, ...args: Args): void;
+/**
+ * Mount a portal (tooltip, toast, menu, dialog, …) in its own dedicated
+ * container under `<body>`. Each portal gets a private parent element because
+ * two `A.mount`s sharing one parent can't tell their nodes apart: a redraw of
+ * one (e.g. a tooltip hiding) may sweep up nodes another portal inserted
+ * earlier in the same parent (e.g. an open menu).
+ */
+export declare function mountPortal(draw: () => void): void;

package/dist/core.js

@@ -17,3 +17,16 @@ export function drawSlot(slot, ...args) {
     else
         A("rich=", slot);
 }
+/**
+ * Mount a portal (tooltip, toast, menu, dialog, …) in its own dedicated
+ * container under `<body>`. Each portal gets a private parent element because
+ * two `A.mount`s sharing one parent can't tell their nodes apart: a redraw of
+ * one (e.g. a tooltip hiding) may sweep up nodes another portal inserted
+ * earlier in the same parent (e.g. an open menu).
+ */
+export function mountPortal(draw) {
+    const container = document.createElement("div");
+    container.style.display = "contents";
+    document.body.appendChild(container);
+    A.mount(container, draw);
+}

package/dist/index.d.ts

@@ -5,7 +5,7 @@
  * Import the default `S` object and call its component functions:
  *
  * ```ts
- * import S from "staffa";
+ * import * as S from "staffa";
  *
  * S.main({
  *   title: "Hello",
@@ -17,7 +17,7 @@
  *           S.textline({ label: "Email", type: "email", bind: A.ref($u, "email") });
  *           S.checkbox({ label: "Remember me", bind: A.ref($u, "remember") });
  *         },
- *         actions: () => S.button({ text: "Sign in", type: "submit" }),
+ *         actions: () => S.button({ content: "Sign in", type: "submit" }),
  *       });
  *     }});
  *   },
@@ -29,68 +29,22 @@
  * which case the component re-renders the affected parts in place when you
  * mutate it. See `AGENTS.md` for the design philosophy.
  */
-import { setDarkMode, getDarkMode } from "./theme.js";
-import { autocomplete } from "./components/autocomplete.js";
-import { box } from "./components/box.js";
-import { button } from "./components/button.js";
-import { buttonChooser } from "./components/buttonChooser.js";
-import { buttonGroup } from "./components/buttonGroup.js";
-import { checkbox } from "./components/checkbox.js";
-import { form } from "./components/form.js";
-import { main } from "./components/main.js";
-import { menuButton, showFloatingMenu } from "./components/menu.js";
-import { dialog, alert, confirm, prompt } from "./components/dialog.js";
-import { select } from "./components/select.js";
-import { tabs } from "./components/tabs.js";
-import { textarea } from "./components/textarea.js";
-import { textline } from "./components/textline.js";
-import { toast } from "./components/toast.js";
-import { addTooltip } from "./components/tooltip.js";
-/** The Staffa component namespace. */
-export declare const S: {
-    main: typeof main;
-    box: typeof box;
-    dialog: typeof dialog;
-    alert: typeof alert;
-    confirm: typeof confirm;
-    prompt: typeof prompt;
-    form: typeof form;
-    menuButton: typeof menuButton;
-    showFloatingMenu: typeof showFloatingMenu;
-    textline: typeof textline;
-    textarea: typeof textarea;
-    checkbox: typeof checkbox;
-    tabs: typeof tabs;
-    button: typeof button;
-    buttonChooser: typeof buttonChooser;
-    buttonGroup: typeof buttonGroup;
-    autocomplete: typeof autocomplete;
-    select: typeof select;
-    toast: typeof toast;
-    addTooltip: typeof addTooltip;
-    setDarkMode: typeof setDarkMode;
-    getDarkMode: typeof getDarkMode;
-};
-export default S;
 export { setDarkMode, getDarkMode } from "./theme.js";
-export type { SurfaceRole, Variant } from "./theme.js";
-export type { ContentOptions, Bindable, Content, Slot, Attributes as Styling, } from "./core.js";
-export { drawSlot, uniqueId } from "./core.js";
+export { autocomplete, type AutocompleteOptions, type AutocompleteOptionInput } from "./components/autocomplete.js";
+export { box, type BoxOptions } from "./components/box.js";
+export { button, type ButtonOptions } from "./components/button.js";
+export { buttonChooser, type ButtonChooserOptions } from "./components/buttonChooser.js";
+export { buttonGroup, type ButtonGroupOptions } from "./components/buttonGroup.js";
+export { checkbox, type CheckboxOptions } from "./components/checkbox.js";
+export { form, type FormOptions } from "./components/form.js";
+export { main, type MainOptions } from "./components/main.js";
+export { menuButton, showFloatingMenu, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions } from "./components/menu.js";
+export { dialog, alert, confirm, prompt, type DialogOptions } from "./components/dialog.js";
+export { select, type SelectOptions, type SelectOptionInput } from "./components/select.js";
+export { tabs, type Tab, type TabsOptions } from "./components/tabs.js";
+export { textarea, type TextareaOptions } from "./components/textarea.js";
+export { textline, type TextlineOptions, type TextlineType } from "./components/textline.js";
+export { toast, type ToastOptions } from "./components/toast.js";
+export { addTooltip, type TooltipOptions } from "./components/tooltip.js";
 export type { FieldOptions } from "./components/field.js";
-export type { MainOptions } from "./components/main.js";
-export type { MenuOptions, MenuEntry, MenuItem, MenuSeparator, FloatingMenuOptions } from "./components/menu.js";
-export { drawMenu } from "./components/menu.js";
-export type { ToastOptions } from "./components/toast.js";
-export type { TooltipOptions } from "./components/tooltip.js";
-export type { BoxOptions } from "./components/box.js";
-export type { FormOptions } from "./components/form.js";
-export type { TextlineOptions, TextlineType } from "./components/textline.js";
-export type { TextareaOptions } from "./components/textarea.js";
-export type { CheckboxOptions } from "./components/checkbox.js";
-export type { Tab, TabsOptions } from "./components/tabs.js";
-export type { ButtonOptions } from "./components/button.js";
-export type { ButtonChooserOptions } from "./components/buttonChooser.js";
-export type { ButtonGroupOptions } from "./components/buttonGroup.js";
-export type { AutocompleteOptions, AutocompleteOptionInput } from "./components/autocomplete.js";
-export type { SelectOptions, SelectOptionInput } from "./components/select.js";
-export type { DialogOptions } from "./components/dialog.js";
+export type { ContentOptions, Bindable, Slot, Attributes } from "./core.js";

package/dist/index.js

@@ -5,7 +5,7 @@
  * Import the default `S` object and call its component functions:
  *
  * ```ts
- * import S from "staffa";
+ * import * as S from "staffa";
  *
  * S.main({
  *   title: "Hello",
@@ -17,7 +17,7 @@
  *           S.textline({ label: "Email", type: "email", bind: A.ref($u, "email") });
  *           S.checkbox({ label: "Remember me", bind: A.ref($u, "remember") });
  *         },
- *         actions: () => S.button({ text: "Sign in", type: "submit" }),
+ *         actions: () => S.button({ content: "Sign in", type: "submit" }),
  *       });
  *     }});
  *   },
@@ -32,50 +32,20 @@
 // Importing the theme module installs spacing vars, the reactive theme and the
 // base stylesheet. Customise it from your app with A.insertGlobalCss (see
 // theme.ts); toggle modes with setDarkMode / getDarkMode.
-import { setDarkMode, getDarkMode } from "./theme.js";
-import { autocomplete } from "./components/autocomplete.js";
-import { box } from "./components/box.js";
-import { button } from "./components/button.js";
-import { buttonChooser } from "./components/buttonChooser.js";
-import { buttonGroup } from "./components/buttonGroup.js";
-import { checkbox } from "./components/checkbox.js";
-import { form } from "./components/form.js";
-import { main } from "./components/main.js";
-import { menuButton, showFloatingMenu } from "./components/menu.js";
-import { dialog, alert, confirm, prompt } from "./components/dialog.js";
-import { select } from "./components/select.js";
-import { tabs } from "./components/tabs.js";
-import { textarea } from "./components/textarea.js";
-import { textline } from "./components/textline.js";
-import { toast } from "./components/toast.js";
-import { addTooltip } from "./components/tooltip.js";
-/** The Staffa component namespace. */
-export const S = {
-    main,
-    box,
-    dialog,
-    alert,
-    confirm,
-    prompt,
-    form,
-    menuButton,
-    showFloatingMenu,
-    textline,
-    textarea,
-    checkbox,
-    tabs,
-    button,
-    buttonChooser,
-    buttonGroup,
-    autocomplete,
-    select,
-    toast,
-    addTooltip,
-    setDarkMode,
-    getDarkMode,
-};
-export default S;
-// Re-export theming and shared types for advanced use.
 export { setDarkMode, getDarkMode } from "./theme.js";
-export { drawSlot, uniqueId } from "./core.js";
-export { drawMenu } from "./components/menu.js";
+export { autocomplete } from "./components/autocomplete.js";
+export { box } from "./components/box.js";
+export { button } from "./components/button.js";
+export { buttonChooser } from "./components/buttonChooser.js";
+export { buttonGroup } from "./components/buttonGroup.js";
+export { checkbox } from "./components/checkbox.js";
+export { form } from "./components/form.js";
+export { main } from "./components/main.js";
+export { menuButton, showFloatingMenu } from "./components/menu.js";
+export { dialog, alert, confirm, prompt } from "./components/dialog.js";
+export { select } from "./components/select.js";
+export { tabs } from "./components/tabs.js";
+export { textarea } from "./components/textarea.js";
+export { textline } from "./components/textline.js";
+export { toast } from "./components/toast.js";
+export { addTooltip } from "./components/tooltip.js";