staffa 0.1.0 → 0.2.1

package/src/components/field.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { type BaseOptions, type Bindable, type Slot, type Styling, drawSlot, uniqueId } from "../core.js";
+import { type Bindable, type Slot, type Attributes, drawSlot, uniqueId } from "../core.js";
 
 /**
  * Options shared by all *form field* components (textline, textarea, checkbox,
@@ -9,7 +9,9 @@ import { type BaseOptions, type Bindable, type Slot, type Styling, drawSlot, uni
  * 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. */
@@ -27,26 +29,27 @@ 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;
 }
 
 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",
 	},
 });
 
@@ -60,8 +63,8 @@ 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: FieldOptions,
@@ -70,12 +73,12 @@ export function drawField(
 	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 #*");
+					if (opts.required) A("span.s-req aria-hidden=true #*");
 				});
 			}
 		});
@@ -83,10 +86,10 @@ export function drawField(
 		drawControl(id, isInvalid);
 
 		A(() => {
-			if (opts.help != null && !opts.error) A("div.S_help", () => drawSlot(opts.help));
+			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);
+			if (opts.error) A("div.s-error role=alert #", opts.error);
 		});
 	});
 }

package/src/components/form.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-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 {
@@ -12,20 +12,20 @@ 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;
 }
 
 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",
 	},
 });
@@ -54,7 +54,7 @@ A.insertGlobalCss({
 export function form(opts: FormOptions | Content = {}): void {
 	const o: FormOptions = 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(() => {
@@ -78,7 +78,7 @@ export function form(opts: FormOptions | Content = {}): void {
 
 		// Own scope so toggling actions doesn't recreate the fields above.
 		A(() => {
-			if (o.actions) A("footer", o.actionsInner, () => o.actions?.());
+			if (o.actions) A("footer", o.actionsAttrs, () => o.actions?.());
 		});
 	});
 }

package/src/components/main.ts

@@ -1,8 +1,10 @@
 import A from "aberdeen";
-import { type BaseOptions, type Content, type Slot, type Styling, drawSlot } from "../core.js";
+import { type Content, type Slot, type Attributes, drawSlot } from "../core.js";
 
 /** Options for {@link main}. */
-export interface MainOptions extends BaseOptions {
+export interface MainOptions {
+	/** Aberdeen attr/style string applied to the outermost shell element. */
+	attrs?: Attributes;
 	/** App/page title shown in the top bar. */
 	title?: Slot;
 	/** Secondary line under the title. */
@@ -22,25 +24,27 @@ export interface MainOptions extends BaseOptions {
 	 */
 	maxWidth?: string;
 	/** Aberdeen attr/style string applied to the content sheet. */
-	inner?: Styling;
+	contentAttrs?: Attributes;
 	/** Aberdeen attr/style string applied to the top bar. */
-	topbarInner?: Styling;
+	topbarAttrs?: Attributes;
 }
 
 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",
+	".s-main": {
+		// Colours come from the surface classes added in main(): the shell is a
+		// filled base, the bars are raised, the framed sheet is a panel.
+		"&": "display:flex flex-direction:column min-height:100vh max-height:100vh",
+		"> header": "display:flex align-items:center gap:$3 padding: $2 $3; border-bottom: 1px solid $s-border; 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:$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",
 		"> 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",
+		"> main > .s-content": "width:100% flex:1",
+		"> main > .s-content.s-framed": "margin: $3 auto; border: 1px solid $s-border; r:$s-radius-lg box-shadow:$s-shadow p:$4",
+		"> main > .s-content.s-plain": "p:$3",
+		"> footer": "display:flex align-items:center gap:$2 padding: $2 $3; border-top: 1px solid $s-border; fg:$s-fg-muted",
 	},
 });
 
@@ -65,38 +69,38 @@ A.insertGlobalCss({
  * ```
  */
 export function main(opts: MainOptions = {}): void {
-	A("div.S_main", opts.root, () => {
+	A("div.s-main.s-s.base", opts.attrs, () => {
 		// 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("header.s-s.raised", opts.topbarAttrs, () => {
 				A(() => {
-					if (opts.icon != null) A("div.S_icon", () => drawSlot(opts.icon));
+					if (opts.icon != null) A("div.s-icon", () => drawSlot(opts.icon));
 				});
-				A("div.S_titles", () => {
+				A("div.s-titles", () => {
 					A(() => {
-						if (opts.title != null) A("div.S_title", () => drawSlot(opts.title));
+						if (opts.title != null) A("div.s-title", () => drawSlot(opts.title));
 					});
 					A(() => {
-						if (opts.subtitle != null) A("div.S_subtitle", () => drawSlot(opts.subtitle));
+						if (opts.subtitle != null) A("div.s-subtitle", () => drawSlot(opts.subtitle));
 					});
 				});
 				A(() => {
-					if (opts.menu) A("div.S_menu", () => opts.menu?.());
+					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, () => {
+			A("div.s-content", opts.contentAttrs, () => {
 				// 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 (max != null) A(".s-framed.s-s.panel max-width:", max);
+					else A(".s-plain");
 				});
 				if (opts.content) opts.content();
 			});

package/src/components/select.ts

@@ -17,10 +17,10 @@ export interface SelectOptions extends FieldOptions {
 
 // Wrapper provides the chevron via ::after (pseudo-elements on <select> are unreliable).
 A.insertGlobalCss({
-	".S_select_wrap": {
+	".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",
+		"&::after": "content: '▾'; position:absolute right:0.7em top:50%; transform: translateY(-50%); pointer-events:none fg:$s-fg-muted font-size:0.85em",
 	},
 });
 
@@ -36,8 +36,8 @@ A.insertGlobalCss({
  */
 export function select(opts: SelectOptions): void {
 	drawField(opts, (id, isInvalid) => {
-		A("div.S_select_wrap", opts.control, () => {
-			A("select.S_input", () => {
+		A("div.s-select_wrap", opts.inputAttrs, () => {
+			A("select.s-input", () => {
 				applyControlAttrs(opts, id, isInvalid);
 
 				A("change=", (e: Event) => {

package/src/components/tabs.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { type BaseOptions, type Bindable, type Content, type Slot, type Styling, drawSlot, uniqueId } from "../core.js";
+import { type Bindable, type Content, type Slot, type Attributes, drawSlot, uniqueId } from "../core.js";
 
 /** A single tab definition. */
 export interface Tab {
@@ -16,7 +16,9 @@ export interface Tab {
 }
 
 /** Options for {@link tabs}. */
-export interface TabsOptions extends BaseOptions {
+export interface TabsOptions {
+	/** Aberdeen attr/style string applied to the outermost element. */
+	attrs?: Attributes;
 	/** The tabs to display. */
 	tabs: Tab[];
 	/**
@@ -27,30 +29,32 @@ export interface TabsOptions extends BaseOptions {
 	/** Visual style of the tab strip. Defaults to `"underline"`. */
 	variant?: "underline" | "pills";
 	/** Aberdeen attr/style string applied to the active panel. */
-	inner?: Styling;
+	contentAttrs?: Attributes;
 }
 
 A.insertGlobalCss({
-	".S_tabs": {
+	".s-tabs": {
 		"&": "display:flex flex-direction:column gap:$3",
-		".S_tablist": "display:flex gap:$1 align-items:stretch",
-		".S_tab":
+		".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; " +
+			"border:0 color: $s-fg-muted; 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",
+		".s-tab:hover:not(:disabled)": "color: $s-fg;",
+		".s-tab:disabled": "opacity:0.5 cursor:not-allowed",
+		".s-tab:focus-visible": "outline:none box-shadow: 0 0 0 3px $s-focus; r: $s-radius;",
+		// Underline variant — the active marker uses the contextual brand accent.
+		"&.s-underline .s-tablist": "border-bottom: 1px solid $s-border;",
+		"&.s-underline .s-tab": "border-bottom: 2px solid transparent; margin-bottom:-1px",
+		"&.s-underline .s-tab[aria-selected=true]": "color: $s-fg; border-bottom-color: $s-accent;",
+		// Pills variant — the active pill gets the `.s-s.primary` surface (added in
+		// tabs()), so its `--s-bg`/`--s-fg` are the brand surface's; we just paint
+		// (the `.s-tab` rule's transparent background would otherwise win on it).
+		"&.s-pills .s-tab": "r: $s-radius;",
+		"&.s-pills .s-tab[aria-selected=true]": "background: $s-bg; color: $s-fg;",
 		// 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",
+		".s-tabpanel": "display:block",
 	},
 });
 
@@ -81,16 +85,19 @@ export function tabs(opts: TabsOptions): void {
 		$sel.value = keyOf(tab, index);
 	};
 
-	A(`div.S_tabs.S_${variant}`, opts.root, () => {
-		A("div.S_tablist role=tablist", () => {
+	A(`div.s-tabs.s-${variant}`, opts.attrs, () => {
+		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("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");
+						// The active pill is a filled brand surface; the classes flip
+						// with selection (Aberdeen removes them when this scope re-runs).
+						if (selected && variant === "pills") A(".s-s.primary");
 					});
 					if (tab.disabled) A("disabled=true");
 					A("click=", () => select(tab, index));
@@ -101,7 +108,7 @@ export function tabs(opts: TabsOptions): void {
 			});
 		});
 
-		A("div.S_tabpanel role=tabpanel", opts.inner, () => {
+		A("div.s-tabpanel role=tabpanel", opts.contentAttrs, () => {
 			A(() => {
 				const selKey = $sel.value;
 				const index = opts.tabs.findIndex((t, i) => keyOf(t, i) === selKey);

package/src/components/textarea.ts

@@ -23,8 +23,8 @@ export interface TextareaOptions extends FieldOptions {
 }
 
 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",
+	"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",
 });
 
 /**
@@ -40,9 +40,9 @@ export function textarea(opts: TextareaOptions = {}): void {
 	const grow = opts.autoGrow !== false;
 
 	drawField(opts, (id, isInvalid) => {
-		const el = A("textarea.S_input", opts.control, () => {
+		const el = A("textarea.s-input", opts.inputAttrs, () => {
 			if (grow) {
-				A(".S_autoGrow");
+				A(".s-autoGrow");
 				A("input=", (e: Event) => {
 					fitToContent(e.currentTarget as HTMLTextAreaElement);
 					if (opts.input) opts.input(e);

package/src/components/textline.ts

@@ -53,7 +53,7 @@ export interface TextlineOptions extends FieldOptions {
  */
 export function textline(opts: TextlineOptions = {}): void {
 	drawField(opts, (id, isInvalid) => {
-		A("input.S_input", opts.control, () => {
+		A("input.s-input", opts.inputAttrs, () => {
 			A("type=", opts.type ?? "text");
 			if (opts.placeholder != null) A("placeholder=", opts.placeholder);
 			if (opts.autocomplete != null) A("autocomplete=", opts.autocomplete);

package/src/core.ts

@@ -11,16 +11,20 @@ import A from "aberdeen";
 
 /**
  * An Aberdeen attribute/style/class string, e.g. `"display:flex gap:$3 .my-class"`.
+ * 
+ * Common values are our surface modifier classes:
+ * - for colors: `.panel` `.raised` `.neutral` `.primary` `.danger` `.success` and `.warning`
+ * - for variant: `.filled` `.tonal` and `.outlined`
  *
  * These strings are passed straight through to {@link A} as positional
  * arguments, so they accept the full Aberdeen shorthand syntax: CSS shortcuts
  * (`p`, `mt`, `bg`, `r`, ...), spacing variables (`$1`..`$12`), CSS custom
- * properties (`$sPrimary`), classes (`.foo`) and attributes (`aria-label=Hi`).
+ * properties (`$s-primary`), classes (`.foo`) and attributes (`aria-label=Hi`).
  *
  * Note: because Aberdeen interprets a leading bare word as an element name, write
  * `display:flex` rather than just `flex`.
  */
-export type Styling = string;
+export type Attributes = string;
 
 /** A reactive "value box", such as the result of `A.proxy(x)` or `A.ref(obj, key)`. */
 export type Bindable<T> = { value: T };
@@ -29,46 +33,27 @@ export type Bindable<T> = { value: T };
 export type Content = () => void;
 
 /**
- * Something that renders a small piece of content: either a plain string (drawn
- * as a text node) or a draw function (for icons, badges, custom markup, ...).
- */
-export type Slot = string | Content;
-
-/**
- * Options shared by *every* Staffa component.
+ * Something that renders a small piece of content: either a plain string or a
+ * draw function (for icons, badges, custom markup, ...).
  *
- * The {@link BaseOptions.root | root} string is applied to the outermost element
- * of the widget, letting callers tweak layout, spacing or add classes without
- * forking the component.
+ * A string is drawn as **rich text** (see {@link drawSlot}): Aberdeen's `rich`
+ * markup is applied, so `*italic*`, `**bold**`, `` `code` `` and
+ * `[links](/path)` render as inline elements (text is safely escaped).
+ *
+ * The optional `Args` type parameter lets a slot's draw-function receive
+ * arguments — e.g. a dialog body is a `Slot<[close: () => void]>`.
  */
-export interface BaseOptions {
-	/**
-	 * Aberdeen attr/style string applied to the widget's root element.
-	 *
-	 * It is passed as a positional argument to {@link A}, so a *change* to it on a
-	 * proxied options object re-runs the caller's scope (recreating the widget).
-	 * That's fine for `root` — it rarely changes at runtime.
-	 */
-	root?: Styling;
-}
+export type Slot<Args extends unknown[] = []> = string | ((...args: Args) => void);
 
 /**
- * Options for components that wrap a single block of caller-provided content.
- *
- * Such components render an *inner* element (the one that actually holds the
- * children) which is given sensible default padding and `gap` in CSS. Override
- * those via {@link ContentOptions.inner | inner}, whose declarations win because
- * they're applied as inline styles.
+ * Options for components that wrap a single block of caller-provided content,
+ * with an `attrs` escape hatch on the outermost element.
  */
-export interface ContentOptions extends BaseOptions {
+export interface ContentOptions {
+	/** Aberdeen attr/style string applied to the widget's outermost element. */
+	attrs?: Attributes;
 	/** Draws the children of this component. */
 	content?: Content;
-	/**
-	 * Aberdeen attr/style string applied to the inner (content-holding) element.
-	 * Add `display:flex` here if you want the children laid out as a flex
-	 * row/column.
-	 */
-	inner?: Styling;
 }
 
 let idCounter = 0;
@@ -78,11 +63,12 @@ export function uniqueId(prefix = "s"): string {
 }
 
 /**
- * Draw a {@link Slot} into the current element: call it if it's a function,
- * otherwise emit it as a text node.
+ * Draw a {@link Slot} into the current element: call it (with any extra `args`)
+ * if it's a function, otherwise emit the string as **rich text** via Aberdeen's
+ * `rich` markup (`*italic*`, `**bold**`, `` `code` ``, `[link](/path)`).
  */
-export function drawSlot(slot: Slot | undefined): void {
+export function drawSlot<Args extends unknown[] = []>(slot: Slot<Args> | undefined, ...args: Args): void {
 	if (slot == null) return;
-	if (typeof slot === "function") slot();
-	else A("#", slot);
+	if (typeof slot === "function") slot(...args);
+	else A("rich=", slot);
 }

package/src/index.ts

@@ -30,12 +30,14 @@
  * mutate it. See `AGENTS.md` for the design philosophy.
  */
 // Importing the theme module installs spacing vars, the reactive theme and the
-// base stylesheet. Customise by mutating S.darkTheme / S.lightTheme.
-import { darkTheme, lightTheme, setDarkMode, getDarkMode } from "./theme.js";
+// 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";
@@ -60,11 +62,10 @@ export const S = {
 	checkbox,
 	tabs,
 	button,
+	buttonChooser,
 	buttonGroup,
 	autocomplete,
 	select,
-	darkTheme,
-	lightTheme,
 	setDarkMode,
 	getDarkMode,
 };
@@ -72,14 +73,14 @@ export const S = {
 export default S;
 
 // Re-export theming and shared types for advanced use.
-export { type Theme, darkTheme, lightTheme, setDarkMode, getDarkMode } from "./theme.js";
+export { setDarkMode, getDarkMode } from "./theme.js";
+export type { SurfaceRole, Variant } from "./theme.js";
 export type {
-	BaseOptions,
 	ContentOptions,
 	Bindable,
 	Content,
 	Slot,
-	Styling,
+	Attributes as Styling,
 } from "./core.js";
 export { drawSlot, uniqueId } from "./core.js";
 
@@ -91,7 +92,8 @@ 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, ButtonVariant, ButtonColor } from "./components/button.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";