staffa 0.1.0 → 0.2.1

package/dist/components/buttonGroup.js

@@ -1,23 +1,23 @@
 import A from "aberdeen";
 import { button } from "./button.js";
 A.insertGlobalCss({
-    ".S_bgroup": {
+    ".s-bgroup": {
         "&": "display:inline-flex align-items:stretch",
-        "&.S_spaced": "gap:$2 flex-wrap:wrap",
-        "&.S_vertical": "flex-direction:column",
-        "&.S_attached": "gap:0",
+        "&.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",
+        "&.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",
+        "&.s-attached > .s-btn:hover, &.s-attached > .s-btn:focus-visible": "z-index:1",
     },
 });
 /**
@@ -27,16 +27,16 @@ A.insertGlobalCss({
  * @example
  * ```ts
  * S.buttonGroup({ buttons: [
- *   { text: "Day", variant: "outlined", color: "neutral" },
- *   { text: "Week", variant: "outlined", color: "neutral" },
- *   { text: "Month", variant: "outlined", color: "neutral" },
+ *   { text: "Day", attrs: ".neutral .outlined" },
+ *   { text: "Week", attrs: ".neutral .outlined" },
+ *   { text: "Month", attrs: ".neutral .outlined" },
  * ]});
  * ```
  */
 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, () => {
+    const cls = `.s-${layout}${opts.vertical ? ".s-vertical" : ""}`;
+    A(`div.s-bgroup${cls} role=group`, opts.attrs, () => {
         if (opts.buttons)
             for (const b of opts.buttons)
                 button(b);

package/dist/components/checkbox.js

@@ -1,12 +1,12 @@
 import A from "aberdeen";
 import { drawSlot, uniqueId } from "../core.js";
 A.insertGlobalCss({
-    ".S_check": {
+    ".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",
+        "input": "width:1.15em height:1.15em accent-color:$s-accent cursor:inherit m:0",
     },
 });
 /**
@@ -21,9 +21,9 @@ A.insertGlobalCss({
  */
 export function checkbox(opts = {}) {
     const id = opts.id ?? uniqueId("check");
-    A("div.S_check", opts.root, () => {
+    A("div.s-check", opts.attrs, () => {
         A(`label for=${id}`, () => {
-            A("input type=checkbox", opts.control, () => {
+            A("input type=checkbox", opts.inputAttrs, () => {
                 A(`id=${id}`);
                 if (opts.name)
                     A(`name=${opts.name}`);
@@ -48,16 +48,16 @@ export function checkbox(opts = {}) {
                 if (opts.label != null)
                     drawSlot(opts.label);
                 if (opts.required)
-                    A("span.S_req aria-hidden=true #*");
+                    A("span.s-req aria-hidden=true #*");
             });
         });
         A(() => {
             if (opts.help != null && !opts.error)
-                A("div.S_help", () => drawSlot(opts.help));
+                A("div.s-help", () => drawSlot(opts.help));
         });
         A(() => {
             if (opts.error)
-                A("div.S_error role=alert #", opts.error);
+                A("div.s-error role=alert #", opts.error);
         });
     });
 }

package/dist/components/dialog.d.ts

@@ -1,18 +1,18 @@
-import { type Slot, type Styling } from "../core.js";
+import { type Slot, type Attributes } 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 dialog panel. A surface — pass modifier classes (e.g. `".warning"`) to recolour it. */
+    attrs?: Attributes;
     /** Aberdeen attr/style string applied to the header bar. */
-    headerInner?: Styling;
+    headerAttrs?: Attributes;
     /** Aberdeen attr/style string applied to the footer bar. */
-    footerInner?: Styling;
+    footerAttrs?: Attributes;
     /** Aberdeen attr/style string applied to the scrollable content `<div>`. */
-    inner?: Styling;
-    /** Aberdeen attr/style string applied to the dialog panel itself. */
-    root?: Styling;
+    contentAttrs?: Attributes;
     /**
      * Allow closing via Esc or clicking the backdrop. Defaults to `true`.
      * May be changed on a proxied options object while the dialog is open
@@ -20,10 +20,16 @@ export interface DialogOptions {
      */
     allowCancel?: boolean;
     /**
-     * Dialog body. Receives a `close()` function — call it to dismiss the dialog
-     * programmatically.
+     * When set to `true` (default) the model will be destroyed when the `dialog()`-calling
+     * scope is destroyed.
      */
-    content?: (close: () => void) => void;
+    cancelWithScope?: boolean;
+    /**
+     * Dialog body. A {@link Slot} whose draw-function receives a `close()` function
+     * — call it to dismiss the dialog programmatically. (A plain string renders as
+     * rich text.)
+     */
+    content?: Slot<[close: () => 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
@@ -37,11 +43,8 @@ export interface DialogOptions {
  * 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`.
+ * Multiple dialogs stack correctly: each new pair (backdrop + dialog) has a
+ * higher z-index, while older dialogs are pushed behind their covering backdrop.
  *
  * @example
  * ```ts
@@ -50,7 +53,7 @@ export interface DialogOptions {
  *   content: (close) => {
  *     A("p #Are you sure?");
  *     S.button({ text: "Yes", click: () => { doIt(); close(); } });
- *     S.button({ text: "Cancel", variant: "outlined", click: close });
+ *     S.button({ text: "Cancel", attrs: ".neutral .outlined", click: close });
  *   },
  * });
  * ```
@@ -60,8 +63,6 @@ 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.");
@@ -70,10 +71,7 @@ export declare function dialog(opts: DialogOptions): Promise<void>;
 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`.
+ * `Promise<boolean>` — `true` if the user clicked OK, `false` otherwise.
  *
  * @example
  * ```ts
@@ -83,10 +81,7 @@ export declare function alert(message: string, opts?: Partial<DialogOptions>): P
 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`.
+ * the entered string if the user confirmed, or `null` if cancelled.
  *
  * @example
  * ```ts

package/dist/components/dialog.js

@@ -3,44 +3,74 @@ 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.
+    ".s-backdrop": {
+        "&": "position:fixed inset:0 z-index:200 display:block background: rgba(0,0,0,0.55); transition: opacity 0.4s ease-in-out;",
         "&.hidden": "opacity:0 pointer-events:none",
     },
-    ".S_dialog": {
-        "&": "position:fixed z-index:201 top:50% left:50% " +
+    ".s-dialog": {
+        "&": "position:fixed z-index:200 top:50% left:50% " +
+            "display:flex flex-direction:column " +
             "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.
+            "border: 1px solid $s-border; r: $s-radius-lg; box-shadow: $s-shadow; overflow:hidden " +
+            "transition: opacity 0.2s ease-out, transform 0.2s ease-out;",
         "> header": "display:flex align-items:center gap:$2 padding: $2 $3; " +
-            "bg:$sSurfaceHi border-bottom: 1px solid $sBorder; font-weight:600 flex-shrink:0",
+            "border-bottom: 1px solid $s-border; 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",
+            "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));",
-        "&.hidden *": "pointer-events:none",
+        "&.hidden": "opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px)); pointer-events:none",
     },
 });
+const dialogs = A.proxy({});
+let dialogCount = 0;
+const topDialogId = A.derive(() => {
+    const keys = Object.keys(dialogs);
+    if (keys.length)
+        return keys[keys.length - 1];
+});
+A.mount(document.body, () => {
+    A.onEach(dialogs, ({ resolve, opts }, dialogId) => {
+        const close = () => { delete dialogs[dialogId]; };
+        A.clean(() => {
+            // Fires when this render is torn down — either because $closed became
+            // true (normal close) or because the parent reactive scope was cleaned up.
+            opts.onClose?.();
+            resolve();
+        });
+        // Backdrop - hide when not the top dialog
+        const overlaid = A.derive(() => topDialogId.value != dialogId);
+        A("div.s-backdrop create=hidden destroy=hidden .hidden=", overlaid, "click=", () => {
+            if (opts.allowCancel !== false)
+                close();
+        });
+        // Dialog itself
+        A("div.s-dialog.s-s.panel create=hidden destroy=hidden", opts.attrs, () => {
+            A(() => {
+                if (opts.header != null) {
+                    A("header.s-s.raised", opts.headerAttrs, () => drawSlot(opts.header));
+                }
+            });
+            A("div", opts.contentAttrs, () => {
+                drawSlot(opts.content, close);
+            });
+            A(() => {
+                if (opts.footer != null) {
+                    A("footer.s-s.raised", opts.footerAttrs, () => drawSlot(opts.footer));
+                }
+            });
+        });
+    });
+});
 /**
  * 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`.
+ * Multiple dialogs stack correctly: each new pair (backdrop + dialog) has a
+ * higher z-index, while older dialogs are pushed behind their covering backdrop.
  *
  * @example
  * ```ts
@@ -49,74 +79,41 @@ A.insertGlobalCss({
  *   content: (close) => {
  *     A("p #Are you sure?");
  *     S.button({ text: "Yes", click: () => { doIt(); close(); } });
- *     S.button({ text: "Cancel", variant: "outlined", click: close });
+ *     S.button({ text: "Cancel", attrs: ".neutral .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));
+    if (!dialogCount) {
+        // Install Esc handler the first time we create a dialog
+        document.addEventListener("keydown", (e) => {
+            if (e.key === "Escape" && opts.allowCancel !== false) {
+                const ds = A.unproxy(dialogs);
+                // Search for top-most dialog
+                for (let i = dialogCount; i > 0; i--) {
+                    if (ds[i]) {
+                        if (ds[i].opts.allowCancel !== false) {
+                            // The clean handler should call resolve and onClose
+                            delete dialogs[i];
+                        }
+                        break;
                     }
-                });
-            });
+                }
+            }
         });
+    }
+    const dialogId = ++dialogCount;
+    if (opts.cancelWithScope !== false)
+        A.clean(() => { delete dialogs[dialogId]; });
+    return new Promise((resolve) => {
+        dialogs[dialogId] = { resolve, opts };
     });
 }
 /**
  * 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.");
@@ -128,7 +125,7 @@ export function alert(message, opts = {}) {
         allowCancel: true,
         content: (close) => {
             A("p", () => { A("#", message); });
-            buttonGroup({ layout: "spaced", root: "align-self:flex-end", content: () => {
+            buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
                     button({ text: "OK", click: close });
                 } });
         },
@@ -137,10 +134,7 @@ export function alert(message, 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`.
+ * `Promise<boolean>` — `true` if the user clicked OK, `false` otherwise.
  *
  * @example
  * ```ts
@@ -155,8 +149,8 @@ export function confirm(message, opts = {}) {
             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 });
+                buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
+                        button({ text: "Cancel", attrs: ".neutral .outlined", click: close });
                         button({ text: "OK", click: () => { confirmed = true; close(); } });
                     } });
             },
@@ -170,10 +164,7 @@ export function confirm(message, opts = {}) {
 }
 /**
  * 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`.
+ * the entered string if the user confirmed, or `null` if cancelled.
  *
  * @example
  * ```ts
@@ -190,7 +181,6 @@ export function prompt(message, defaultValue = "", opts = {}) {
             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();
@@ -198,8 +188,8 @@ export function prompt(message, defaultValue = "", opts = {}) {
                         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 });
+                    buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
+                            button({ text: "Cancel", attrs: ".neutral .outlined", type: "button", click: close });
                             button({ text: "OK", type: "submit" });
                         } });
                 });

package/dist/components/field.d.ts

@@ -1,4 +1,4 @@
-import { type BaseOptions, type Bindable, type Slot, type Styling } from "../core.js";
+import { type Bindable, type Slot, type Attributes } from "../core.js";
 /**
  * Options shared by all *form field* components (textline, textarea, checkbox,
  * autocomplete, ...).
@@ -7,7 +7,9 @@ import { type BaseOptions, type Bindable, type Slot, type Styling } from "../cor
  * 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 {
+export interface FieldOptions {
+    /** Aberdeen attr/style string applied to the field's wrapper element. */
+    attrs?: Attributes;
     /** Visible label, associated with the control via `for`/`id` for a11y. */
     label?: Slot;
     /** Helper text shown beneath the control. */
@@ -25,8 +27,8 @@ export interface FieldOptions extends BaseOptions {
     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;
+    /** Aberdeen attr/style string applied to the control (input) element itself. */
+    inputAttrs?: Attributes;
 }
 /**
  * Render the standard field chrome (label + control + help/error) around a
@@ -38,8 +40,8 @@ export interface FieldOptions extends BaseOptions {
  *
  * @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).
+ *   and must draw the actual control element (using class `s-input` where
+ *   appropriate, and passing `opts.inputAttrs` as an arg for caller styling).
  */
 export declare function drawField(opts: FieldOptions, drawControl: (id: string, isInvalid: () => boolean) => void): void;
 /**

package/dist/components/field.js

@@ -1,21 +1,22 @@
 import A from "aberdeen";
 import { drawSlot, uniqueId } from "../core.js";
 A.insertGlobalCss({
-    ".S_field": {
+    ".s-field": {
         "&": "display:flex flex-direction:column gap:$1",
-        "> label": "font-weight:600 font-size:0.9em fg:$sFg user-select:none",
+        "> label": "font-weight:600 font-size:0.9em fg:$s-fg 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",
+    ".s-req": "fg:$s-danger margin-left:2px",
+    ".s-help": "font-size:0.82em fg:$s-fg-muted",
+    ".s-error": "font-size:0.82em fg:$s-danger",
+    // Shared look for text-like controls: a panel fill with a contextual border,
+    // the brand accent for focus, and the semantic danger ink when invalid.
+    ".s-input": {
+        "&": "w:100% bg:$s-panel fg:$s-ink border: 1px solid $s-border; r:$s-radius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;",
+        "&:hover:not(:disabled)": "border-color:$s-border-strong",
+        "&:focus-visible": "border-color:$s-accent box-shadow: 0 0 0 3px $s-focus; outline:none",
         "&:disabled": "opacity:0.6 cursor:not-allowed",
-        "&[aria-invalid=true]": "border-color:$sDanger",
+        "&[aria-invalid=true]": "border-color:$s-danger",
     },
 });
 /**
@@ -28,30 +29,30 @@ A.insertGlobalCss({
  *
  * @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).
+ *   and must draw the actual control element (using class `s-input` where
+ *   appropriate, and passing `opts.inputAttrs` 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("div.s-field", opts.attrs, () => {
         A(() => {
             if (opts.label != null) {
                 A(`label for=${id}`, () => {
                     drawSlot(opts.label);
                     if (opts.required)
-                        A("span.S_req aria-hidden=true #*");
+                        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("div.s-help", () => drawSlot(opts.help));
         });
         A(() => {
             if (opts.error)
-                A("div.S_error role=alert #", opts.error);
+                A("div.s-error role=alert #", opts.error);
         });
     });
 }

package/dist/components/form.d.ts

@@ -1,4 +1,4 @@
-import { type Content, type ContentOptions, type Styling } from "../core.js";
+import { type Content, type ContentOptions, type Attributes } from "../core.js";
 /** Options for {@link form}. */
 export interface FormOptions extends ContentOptions {
     /**
@@ -10,11 +10,11 @@ export interface FormOptions extends ContentOptions {
     /**
      * 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"`).
+     * width by adding the `.s-wide` class (e.g. `attrs: ".s-wide"`).
      */
     layout?: "stacked" | "grid";
     /** Aberdeen attr/style string for the action bar. */
-    actionsInner?: Styling;
+    actionsAttrs?: Attributes;
     /** Footer actions (typically a {@link import("./buttonGroup").buttonGroup} or buttons). */
     actions?: Content;
 }

package/dist/components/form.js

@@ -1,9 +1,9 @@
 import A from "aberdeen";
 A.insertGlobalCss({
-    ".S_form": {
+    ".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;",
+        "&.grid > .s-wide, &.grid > footer": "grid-column: 1 / -1;",
         "> footer": "display:flex align-items:center gap:$2 flex-wrap:wrap margin-top:$1",
     },
 });
@@ -30,7 +30,7 @@ A.insertGlobalCss({
  */
 export function form(opts = {}) {
     const o = typeof opts === "function" ? { content: opts } : opts;
-    A(`form.S_form`, o.root, o.inner, () => {
+    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).
         A(() => {
@@ -53,7 +53,7 @@ export function form(opts = {}) {
         // Own scope so toggling actions doesn't recreate the fields above.
         A(() => {
             if (o.actions)
-                A("footer", o.actionsInner, () => o.actions?.());
+                A("footer", o.actionsAttrs, () => o.actions?.());
         });
     });
 }