staffa 0.6.0 → 0.7.0

package/skill/textarea.md

@@ -0,0 +1,17 @@
+## textarea · function
+
+A multi-line text input. Shares the field chrome and styling of
+`textline`.
+
+**Signature:** `(opts?: TextareaOptions) => void`
+
+**Parameters:**
+
+- `opts: TextareaOptions` (optional)
+
+**Examples:**
+
+```ts
+const $user = A.proxy({bio: ""});
+S.textarea({ label: "Bio", bind: A.ref($user, "bio") });
+```

package/skill/textline.md

@@ -0,0 +1,20 @@
+## textline · function
+
+A single-line text input — covering text, passwords, numbers, email, dates and
+the other line-oriented `<input>` types.
+
+Renders inside the standard `drawField` chrome (label, control,
+help/error), so it aligns cleanly inside a `form`.
+
+**Signature:** `(opts?: TextlineOptions) => void`
+
+**Parameters:**
+
+- `opts: TextlineOptions` (optional)
+
+**Examples:**
+
+```ts
+const $user = A.proxy({email: "test@example.com"});
+S.textline({ label: "Email", type: "email", required: true, bind: A.ref($user, "email") });
+```

package/skill/toast.md

@@ -0,0 +1,19 @@
+## toast · function
+
+Show a toast notification. Returns a `dismiss()` function to remove it
+programmatically. Auto-dismisses after `duration` ms (default 6 000).
+
+**Signature:** `(opts: ToastOptions) => () => void`
+
+**Parameters:**
+
+- `opts: ToastOptions`
+
+**Examples:**
+
+```ts
+S.toast({ message: "Saved!", type: "success" });
+S.toast({ title: "Error", message: "Upload failed.", type: "danger", duration: 0 });
+const off = S.toast({ message: "Uploading…", duration: 0, dismissible: false });
+setTimeout(off, 3000); // Later..
+```

package/src/components/autocomplete.ts

@@ -35,20 +35,23 @@ export interface AutocompleteOptions extends FieldOptions {
 A.insertGlobalCss({
 	".s-ac": {
 		"&": "position:relative",
-		"> .s-control": "display:flex flex-wrap:wrap align-items:center gap:$1 bg:$s-panel fg:$s-ink border: 1px solid $s-border; r:$s-radius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;",
-		"> .s-control:hover": "border-color:$s-border-strong",
+		// Same light inset field as `.s-input` (see field.ts), derived from the surface.
+		"> .s-control": "display:flex flex-wrap:wrap align-items:center gap:$1 background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;",
+		"> .s-control:hover": "border-color: color-mix(in oklab, $s-text, $s-bg 55%);",
 		"> .s-control:focus-within": "border-color:$s-accent box-shadow: 0 0 0 3px $s-focus;",
 		"&[aria-invalid=true] > .s-control": "border-color:$s-danger",
-		".s-chip": "display:inline-flex align-items:center gap:$1 font-size:0.85em bg:$s-raised border: 1px solid $s-border; r:$s-radius padding: 0.1em 0.2em 0.1em 0.5em;",
-		".s-chip > button": "cursor:pointer border:0 background:transparent fg:$s-fg-muted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",
-		".s-chip > button:hover": "fg:$s-fg background:$s-border",
+		".s-chip": "display:inline-flex align-items:center gap:$1 font-size:0.85em background: color-mix(in oklab, $s-bg, $s-text 10%); border: 1px solid $s-faint; r:$s-radius padding: 0.1em 0.2em 0.1em 0.5em;",
+		".s-chip > button": "cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",
+		".s-chip > button:hover": "fg:$s-text background:$s-faint",
 		"input": "flex:1 min-width:6ch border:0 background:transparent color:inherit outline:none padding:0.25em",
-		"> .s-menu": "position:absolute top:100% left:0 right:0 z-index:20 margin-top:4px max-height:15rem overflow-y:auto list-style:none p:$1 margin-bottom:0 bg:$s-panel border: 1px solid $s-border; r:$s-radius box-shadow:$s-shadow",
+		// The popup is a `.s-s.neutral.shadow` surface (see below): background, border,
+		// radius and elevation all come from the surface.
+		"> .s-menu": "position:absolute top:100% left:0 right:0 z-index:20 margin-top:4px max-height:15rem overflow-y:auto list-style:none p:$1 margin-bottom:0",
 		"> .s-menu li": "margin:0",
 		".s-option": "padding: 0.45em 0.6em; r:6px cursor:pointer transition: background 0.1s;",
-		".s-option[aria-selected=true]": "background: color-mix(in srgb, $s-fg 10%, transparent);",
+		".s-option[aria-selected=true]": "background: color-mix(in srgb, $s-text 10%, transparent);",
 		".s-add": "fg:$s-accent font-style:italic",
-		".s-empty": "padding: 0.45em 0.6em; fg:$s-fg-muted",
+		".s-empty": "padding: 0.45em 0.6em; fg:$s-muted",
 	},
 });
 
@@ -191,7 +194,7 @@ export function autocomplete(opts: AutocompleteOptions): void {
 				const q = $st.query.trim();
 				const showAdd = opts.allowCustom !== false && q !== "" && !list.some((o) => o.label.toLowerCase() === q.toLowerCase());
 
-				A("ul.s-menu role=listbox", `id=${menuId}`, () => {
+				A("ul.s-menu.s-s.neutral.shadow role=listbox", `id=${menuId}`, () => {
 					list.forEach((option, i) => {
 						A("li.s-option role=option", `id=${menuId}-opt-${i}`, () => {
 							A(() => A("aria-selected=", $st.active === i ? "true" : "false"));

package/src/components/box.ts

@@ -15,16 +15,21 @@ export interface BoxOptions extends ContentOptions {
 	footerAttrs?: Attributes;
 }
 
-// The box itself is a `.panel` surface; its header/footer are `.raised`
-// surfaces (classes set on the elements in `box()` below). Colours and borders
-// come from the contextual tokens, so a box stays legible on whatever surface
-// it's nested in.
+// The box itself is a `.neutral` surface; its header/footer are `.neutral` surfaces
+// too — nested one level deeper, so they pick up the next elevation shade
+// automatically. Colours and borders come from the contextual tokens, so a box
+// stays legible on whatever surface it's nested in.
+// The box is just a `.s-s.neutral.shadow` surface: its border and shadow come from
+// the surface itself (see theme.ts), not from here. `.s-box` only does layout and
+// the header/footer dividers. Header/footer are `.neutral` surfaces too (one level
+// deeper, for the raised shade), so we cancel their full surface border down to a
+// single divider.
 A.insertGlobalCss({
 	".s-box": {
-		"&": "display:flex flex-direction:column border: 1px solid $s-border; r: $s-radius-lg; overflow:hidden box-shadow: $s-shadow;",
+		"&": "display:flex flex-direction:column overflow:hidden r: $s-radius-lg;",
 		"&: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 justify-content:flex-end gap:$2 padding: $2 $3; border-top: 1px solid $s-border;",
+		"> header": "display:flex align-items:center gap:$2 padding: $2 $3; border:0 border-bottom: 1px solid $s-faint; r:0 font-weight:600",
+		"> footer": "display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border:0 border-top: 1px solid $s-faint; r:0",
 		"> div": "p:$3 gap:$3",
 	},
 });
@@ -51,11 +56,11 @@ A.insertGlobalCss({
 export function box(opts: BoxOptions | Slot = {}): void {
 	const o: BoxOptions = typeof opts === "string" || typeof opts === "function" ? { content: opts } : opts;
 
-	A("section.s-box.s-s.panel", o.attrs, () => {
+	A("section.s-box.s-s.neutral.shadow", 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).
 		A(() => {
-			if (o.header != null) A("header.s-s.raised", o.headerAttrs, () => drawSlot(o.header));
+			if (o.header != null) A("header.s-s.neutral", o.headerAttrs, () => drawSlot(o.header));
 		});
 
 		A("div", o.contentAttrs, () => {
@@ -63,7 +68,7 @@ export function box(opts: BoxOptions | Slot = {}): void {
 		});
 
 		A(() => {
-			if (o.footer != null) A("footer.s-s.raised", o.footerAttrs, () => drawSlot(o.footer));
+			if (o.footer != null) A("footer.s-s.neutral", o.footerAttrs, () => drawSlot(o.footer));
 		});
 	});
 }

package/src/components/button.ts

@@ -20,7 +20,8 @@ export interface ButtonOptions {
 	/**
 	 * Aberdeen attr/style string applied to the button. A button is a surface, so
 	 * pass surface modifier classes here to restyle it, e.g. `".danger"`,
-	 * `".neutral .outlined"`. Defaults to a filled `.primary` surface.
+	 * `".danger .outlined"`, or `".neutral"` for a neutral button. Defaults to a
+	 * filled `.primary` surface.
 	 *
 	 * Size is set here too, with `.small` or `.large` (medium is the default and
 	 * needs no class), e.g. `".danger .small"`. A `.small`/`.large` parent (such
@@ -36,39 +37,29 @@ A.insertGlobalCss({
 	".s-btn": {
 		"&":
 			"display:inline-flex align-items:center justify-content:center gap:$2 " +
-			"font-weight:600 line-height:1.2 white-space:nowrap cursor:pointer text-decoration:none " +
-			"border:0 padding: 0.5em 1em; " +
+			"font-weight:450 line-height:1.1 white-space:nowrap cursor:pointer text-decoration:none " +
+			"padding: $m2 $m3; " +
 			"transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s, transform 0.08s;",
-		"&:focus-visible": "outline:none box-shadow: 0 0 0 3px $s-focus;",
-		// Hover feedback is colour-only (no movement). The filled `.gradient` CTA
-		// below layers a deeper shadow on top, so it still reads as the signature action.
-		"&:hover": "filter: brightness(1.08)",
-		"&.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 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)":
-			"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);",
+		// Focus ring via `outline` (not box-shadow) so it survives a `.no-shadow`
+		// (which hard-clears box-shadow). Modern browsers round it to the border-radius.
+		"&:focus-visible": "outline: 3px solid $s-focus; outline-offset: 1px;",
+		// The button carries `.shadow` (added in button() below); on a filled accent
+		// surface that resolves to the signature self-coloured glow, on a neutral
+		// `.neutral` button to nothing, on tonal/outlined to nothing — all via theme.ts.
+		"&:hover": "filter: brightness(1.06)",
+		// Tonal/outlined hover deepen their translucent fill; a neutral `.neutral`
+		// button (which is already near-white) darkens toward its ink instead.
+		"&.tonal:hover, &.outlined:hover": "background: color-mix(in srgb, $s-bg 24%, transparent);",
+		"&.neutral:hover": "filter:none background: color-mix(in srgb, $s-text 8%, $s-bg);",
 		// Subtle press feedback.
 		"&:active:not(:disabled)": "transform: translateY(1px)",
 		// Size: set on the button itself, or inherited from a `.small`/`.large`
 		// parent (e.g. a buttonGroup), so a container can size all its buttons at once.
-		"&.small, .small > &": "padding: 0.32em 0.7em; font-size:0.85em",
-		"&.large, .large > &": "padding: 0.66em 1.3em; font-size:1.1em",
+		"&.small, .small > &": "padding: $m1 $m2; font-size:0.85em border-radius:$s-radius-sm",
+		"&.large, .large > &": "font-size:1.4em border-radius:$s-radius-lg",
 	},
 });
 
-// Surface-role classes a caller may pass in `attrs`. When one is present we skip
-// the default `.gradient` base so the two roles don't stack on one element.
-const ROLE_CLASS = /\.(gradient|primary|secondary|neutral|danger|success|warning|base|panel|raised)(\.|\s|$)/;
-
 /**
  * A button. Tonal and outlined variants show a border; filled variants rely on
  * their solid background for affordance.
@@ -87,6 +78,7 @@ const ROLE_CLASS = /\.(gradient|primary|secondary|neutral|danger|success|warning
  * @example
  * ```ts
  * S.button({ content: "Save", click: S.alert("Saved.") });
+ * S.button({ content: "Cancel", attrs: ".neutral", click: cancel }); // neutral button
  * 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>
@@ -97,12 +89,11 @@ export function button(opts: ButtonOptions | Slot = {}): void {
 
 	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`,
-	// `.neutral .outlined`, etc. fully take over (rather than stacking two roles).
-	// A bare variant/size (`.outlined`, `.small`) keeps the gradient base.
-	const role = o.attrs && ROLE_CLASS.test(o.attrs) ? "" : ".gradient";
-	A(`${tag}.s-btn.s-s${role}`, o.attrs, () => {
+	// A bare `.s-s` is a filled accent surface defaulting to `.primary` (see
+	// theme.ts) — the signature CTA. The caller's `attrs` simply names another
+	// role (`.danger`, `.neutral`, a custom `.brand`) or variant (`.outlined`); no
+	// role detection needed, since the default lives in CSS, not here.
+	A(`${tag}.s-btn.s-s.shadow`, o.attrs, () => {
 		if (o.href != null) {
 			A(`href=${o.href} role=button`);
 			if (o.disabled) A("aria-disabled=true");

package/src/components/buttonChooser.ts

@@ -52,7 +52,7 @@ export function buttonChooser(opts: ButtonChooserOptions): void {
 				// 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",
+				attrs: selected === id ? ".primary" : ".neutral",
 				click: () => {
 					opts.bind.value = (opts.allowDeselect && selected === id) ? undefined : id;
 				},

package/src/components/buttonGroup.ts

@@ -46,9 +46,9 @@ A.insertGlobalCss({
  * @example
  * ```ts
  * S.buttonGroup({ buttons: [
- *   { content: "Day", attrs: ".neutral .outlined" },
- *   { content: "Week", attrs: ".neutral .outlined" },
- *   { content: "Month", attrs: ".neutral .outlined" },
+ *   { content: "Day", attrs: ".neutral" },
+ *   { content: "Week", attrs: ".neutral" },
+ *   { content: "Month", attrs: ".neutral" },
  * ]});
  * ```
  */

package/src/components/dialog.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { type Slot, type Attributes, drawSlot, mountPortal } from "../core.js";
+import { type Slot, type Attributes, drawSlot, mountPortal, focusFirst } from "../core.js";
 import { button } from "./button.js";
 import { buttonGroup } from "./buttonGroup.js";
 import { textline } from "./textline.js";
@@ -48,20 +48,22 @@ A.insertGlobalCss({
 		"&": "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",
 	},
+	// The dialog panel is a `.s-s.neutral.extra-shadow` surface: border, radius (lg)
+	// and the deep floating shadow come from the surface itself (see theme.ts).
 	".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) " +
-			"border: 1px solid $s-border; r: $s-radius-lg; box-shadow: $s-shadow; overflow:hidden " +
+			"r: $s-radius-lg; overflow:hidden " +
 			"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",
+			"border:0 border-bottom: 1px solid $s-faint; r:0 font-weight:600 flex-shrink:0",
 		"> footer":
 			"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; " +
-			"border-top: 1px solid $s-border; flex-shrink:0",
+			"border:0 border-top: 1px solid $s-faint; r:0 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",
 	},
@@ -75,6 +77,11 @@ const topDialogId = A.derive(() => {
 	if (keys.length) return keys[keys.length-1];
 });
 
+/** Whether any dialog is currently open (live state, not the lingering DOM). */
+export function isDialogOpen(): boolean {
+	return topDialogId.value != null;
+}
+
 mountPortal(() => {
 	A.onEach(dialogs, ({resolve, opts}, dialogId) => {
 		const close = () => { delete dialogs[dialogId]; };
@@ -93,10 +100,10 @@ mountPortal(() => {
 		});
 
 		// Dialog itself
-		A("div.s-dialog.s-s.panel create=hidden destroy=hidden", opts.attrs, () => {
+		const dialogEl = A("div.s-dialog.neutral.s-s.extra-shadow create=hidden destroy=hidden", opts.attrs, () => {
 			A(() => {
 				if (opts.header != null) {
-					A("header.s-s.raised", opts.headerAttrs, () => drawSlot(opts.header));
+					A("header.s-s.neutral", opts.headerAttrs, () => drawSlot(opts.header));
 				}
 			});
 
@@ -106,10 +113,14 @@ mountPortal(() => {
 
 			A(() => {
 				if (opts.footer != null) {
-					A("footer.s-s.raised", opts.footerAttrs, () => drawSlot(opts.footer));
+					A("footer.s-s.neutral", opts.footerAttrs, () => drawSlot(opts.footer));
 				}
 			});
-		});
+		}) as HTMLElement;
+
+		// Once laid out, move focus into the dialog (first focusable element) so it's
+		// keyboard-ready and focus doesn't linger on whatever opened it.
+		requestAnimationFrame(() => { if (document.body.contains(dialogEl)) focusFirst(dialogEl); });
 	});
 })
 
@@ -129,7 +140,7 @@ mountPortal(() => {
  *   content: (close) => {
  *     A("p #Are you sure?");
  *     S.button({ content: "Yes", click: () => { S.alert("Nice!"); close(); } });
- *     S.button({ content: "Cancel", attrs: ".neutral .outlined", click: close });
+ *     S.button({ content: "Cancel", attrs: ".neutral", click: close });
  *   },
  * });
  * ```
@@ -201,7 +212,7 @@ export function confirm(message: string, opts: Partial<DialogOptions> = {}): Pro
 			content: (close) => {
 				A("p", () => { A("#", message); });
 				buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
-					button({ content: "Cancel", attrs: ".neutral .outlined", click: close });
+					button({ content: "Cancel", attrs: ".neutral", click: close });
 					button({ content: "OK", click: () => { confirmed = true; close(); } });
 				}});
 			},
@@ -241,7 +252,7 @@ export function prompt(message: string, defaultValue = "", opts: Partial<DialogO
 					});
 					textline({ bind: A.ref($v, "value") });
 					buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
-						button({ content: "Cancel", attrs: ".neutral .outlined", type: "button", click: close });
+						button({ content: "Cancel", attrs: ".neutral", type: "button", click: close });
 						button({ content: "OK", type: "submit" });
 					}});
 				});

package/src/components/field.ts

@@ -36,14 +36,17 @@ export interface FieldOptions {
 A.insertGlobalCss({
 	".s-field": {
 		"&": "display:flex flex-direction:column gap:$1",
-		"> label": "font-weight:600 font-size:0.9em fg:$s-fg user-select:none",
+		"> label": "font-weight:600 font-size:0.9em fg:$s-text user-select:none",
 	},
 	".s-req": "fg:$s-danger margin-left:2px",
-	".s-help": "font-size:0.82em fg:$s-fg-muted",
+	".s-help": "font-size:0.82em fg:$s-muted",
 	".s-error": "font-size:0.82em fg:$s-danger",
 	".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",
+		// A light inset field, derived from the surrounding surface: the surface
+		// background nudged slightly toward its ink, with the ink as text. Adapts to
+		// whatever surface (and mode) holds the field, no fixed input colour needed.
+		"&": "w:100% background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;",
+		"&:hover:not(:disabled)": "border-color: color-mix(in oklab, $s-text, $s-bg 55%);",
 		"&:focus-visible": "border-color:$s-accent box-shadow: 0 0 0 3px $s-focus; outline:none",
 "&[aria-invalid=true]": "border-color:$s-danger",
 	},

package/src/components/main.ts

@@ -1,6 +1,7 @@
 import A from "aberdeen";
 import { type Slot, type Attributes, drawSlot } from "../core.js";
-import { type MenuOptions, menuButton, drawMenu } from "./menu.js";
+import { type MenuOptions, menuButton, drawMenu, isFloatingMenuOpen } from "./menu.js";
+import { isDialogOpen } from "./dialog.js";
 
 /** Options for {@link main}. */
 export interface MainOptions {
@@ -54,27 +55,31 @@ A.insertGlobalCss({
 		"&": "display:flex flex-direction:column min-height:100vh max-height:100vh container-type:inline-size",
 		// Header/footer stretch their background the full shell width; their inner
 		// `.s-bar` caps to maxWidth and centres, so chrome aligns with the content.
-		"> header": "border-bottom: 1px solid $s-border; position:sticky top:0 z-index:10",
-		"> footer": "border-top: 1px solid $s-border; fg:$s-fg-muted",
+		// The top bar is a full-width `.neutral` surface; cancel its surface border and
+		// radius down to just the bottom divider (it spans edge to edge).
+		"> header": "border:0 border-bottom: 1px solid $s-faint; r:0 position:sticky top:0 z-index:10",
+		"> footer": "border-top: 1px solid $s-faint; fg:$s-muted",
 		"> header > .s-bar, > footer > .s-bar": "display:flex align-items:center width:100% margin-inline:auto gap:$3 padding: $2 $3;",
 		"> header .s-header-icon": "display:flex align-items:center font-size:1.4em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent;",
 		"> header .s-titles": "display:flex flex-direction:column min-width:0 flex:1",
 		"> 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-subtitle": "fg:$s-muted font-size:0.85em overflow:hidden text-overflow:ellipsis white-space:nowrap",
 		"> header .s-menu": "display:flex align-items:center gap:$2",
 		// 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",
+		".s-body-inner": "flex:1 min-width:0 display:flex flex-direction:row min-height:0",
 		// Put the sidebar on the right (content fills the left) for right-hand navs.
 		"&.s-nav-right .s-body-inner": "flex-direction:row-reverse",
 		// 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);",
-		// 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",
+		".s-nav-sep": "width:1px flex-shrink:0 align-self:stretch margin: 0.6rem 0; border:0 background: linear-gradient(to bottom, transparent, $s-faint 18%, $s-faint 82%, transparent);",
+		// min-height:0 / min-width:0 override the flex default of min-*:auto so <main>
+		// can shrink to fit the bounded container (rather than letting wide content push
+		// the whole body — and any sidebar — past the viewport edge). overflow-x:hidden
+		// clips overlong content on the right; vertically it scrolls.
+		".s-body main": "flex:1 min-width:0 min-height:0 overflow-x:hidden 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.
 		".s-body main > .s-content": "width:100% flex:1 p:$3",
@@ -86,7 +91,7 @@ A.insertGlobalCss({
 		// there's no margin, so the content keeps its single $3 edge — not 2×$3.
 		".s-body main.s-scroll-y": "margin-right:$3",
 	},
-	// Sidebar nav panel. Items reuse the shared `.s-menu-item[-link]` /
+	// Sidebar nav panel. Items reuse the shared `.s-menu-item` /
 	// `.s-menu-sep` styles from menu.ts, so the sidebar and the floating
 	// dropdown stay visually identical.
 	// Borderless and transparent so the page's aurora shows through — an airy,
@@ -95,7 +100,7 @@ A.insertGlobalCss({
 		// Extra horizontal padding leaves room for the active pill's glow, which the
 		// vertical scroll (overflow-y:auto, which also clips overflow-x) would
 		// otherwise cut off at the panel edges.
-		"&": "display:flex flex-direction:column overflow-y:auto flex-shrink:0 max-width:228px padding:$3 gap:$1 background:transparent",
+		"&": "display:flex flex-direction:column overflow-y:auto flex-shrink:0 max-width:228px padding:$3 gap:$1",
 	},
 	// In button-only mode (or always-button navPosition), hide the sidebar and
 	// show the trigger. In sidebar mode, show the panel and hide the trigger.
@@ -152,7 +157,7 @@ export function main(opts: MainOptions = {}): void {
 	const hasNav = nav != null && nav.items.length > 0;
 	const navCls = hasNav ? (navPos === "button" ? ".s-nav-btn-only" : `.s-nav-${navPos}`) : "";
 
-	A(`div.s-main.s-s.base${navCls}`, opts.attrs, () => {
+	const root = A(`div.s-main${navCls}`, opts.attrs, () => {
 		// Top bar.
 		A(() => {
 			const hasBar =
@@ -162,7 +167,7 @@ export function main(opts: MainOptions = {}): void {
 				opts.menu != null ||
 				hasNav;
 			if (!hasBar) return;
-			A("header.s-s.raised", opts.topbarAttrs, () => {
+			A("header.s-s.neutral", opts.topbarAttrs, () => {
 				A("div.s-bar", () => {
 					// Cap the bar's content to maxWidth and centre it within the full-width header.
 					A(() => {
@@ -178,7 +183,7 @@ export function main(opts: MainOptions = {}): void {
 								button: {
 									icon: () => A("span aria-hidden=true #☰"),
 									ariaLabel: "Open navigation",
-									attrs: ".neutral .outlined .small",
+									attrs: ".neutral .small",
 									...nav.button,
 								},
 							});
@@ -211,7 +216,7 @@ export function main(opts: MainOptions = {}): void {
 					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, () => {
+					A(`nav.s-nav-panel.s-nav-${navPos}`, opts.navAttrs, () => {
 						drawMenu(nav.items);
 					});
 					A("div.s-nav-sep aria-hidden=true");
@@ -233,7 +238,33 @@ export function main(opts: MainOptions = {}): void {
 				});
 			}
 		});
-	});
+	}) as HTMLElement;
+
+	// Escape jumps to the navigation: into the sidebar's current item when the
+	// sidebar is showing, or — when collapsed to (or always) a button — open the
+	// dropdown (which focuses its current item). Listens on `document` so it works
+	// wherever focus is, but bows out while another overlay (a dialog, or an
+	// already-open menu) is up — those handle Escape themselves.
+	if (hasNav) {
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key !== "Escape" || e.defaultPrevented) return;
+			// An open dialog or menu owns Escape itself — don't also jump to the nav.
+			if (isDialogOpen() || isFloatingMenuOpen()) return;
+			// `offsetParent` is null when the sidebar is hidden (display:none).
+			const panel = root.querySelector<HTMLElement>(".s-nav-panel");
+			if (panel?.offsetParent != null) {
+				const item =
+					panel.querySelector<HTMLElement>("[aria-current=page]") ??
+					panel.querySelector<HTMLElement>(".s-menu-item:not([aria-disabled=true])");
+				if (item) { e.preventDefault(); item.focus(); }
+				return;
+			}
+			const trigger = root.querySelector<HTMLElement>(".s-nav-trigger button");
+			if (trigger) { e.preventDefault(); trigger.click(); }
+		};
+		document.addEventListener("keydown", onKey);
+		A.clean(() => document.removeEventListener("keydown", onKey));
+	}
 }
 
 function drawMainContent(opts: MainOptions): void {