staffa 0.6.0 → 0.7.0

package/dist/components/main.js

@@ -1,33 +1,38 @@
 import A from "aberdeen";
 import { drawSlot } from "../core.js";
-import { menuButton, drawMenu } from "./menu.js";
+import { menuButton, drawMenu, isFloatingMenuOpen } from "./menu.js";
+import { isDialogOpen } from "./dialog.js";
 A.insertGlobalCss({
     ".s-main": {
         // container-type so @container queries below can respond to shell width.
         "&": "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",
@@ -39,7 +44,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,
@@ -48,7 +53,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.
@@ -103,7 +108,7 @@ export function main(opts = {}) {
     const navPos = opts.navPosition ?? "left";
     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 = opts.title != null ||
@@ -113,7 +118,7 @@ export function main(opts = {}) {
                 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(() => {
@@ -131,7 +136,7 @@ export function main(opts = {}) {
                                 button: {
                                     icon: () => A("span aria-hidden=true #☰"),
                                     ariaLabel: "Open navigation",
-                                    attrs: ".neutral .outlined .small",
+                                    attrs: ".neutral .small",
                                     ...nav.button,
                                 },
                             });
@@ -167,7 +172,7 @@ export function main(opts = {}) {
                         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");
@@ -190,6 +195,38 @@ export function main(opts = {}) {
             }
         });
     });
+    // 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) => {
+            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(".s-nav-panel");
+            if (panel?.offsetParent != null) {
+                const item = panel.querySelector("[aria-current=page]") ??
+                    panel.querySelector(".s-menu-item:not([aria-disabled=true])");
+                if (item) {
+                    e.preventDefault();
+                    item.focus();
+                }
+                return;
+            }
+            const trigger = root.querySelector(".s-nav-trigger button");
+            if (trigger) {
+                e.preventDefault();
+                trigger.click();
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        A.clean(() => document.removeEventListener("keydown", onKey));
+    }
 }
 function drawMainContent(opts) {
     const mainEl = A("main", () => {

package/dist/components/menu.d.ts

@@ -61,12 +61,27 @@ export interface FloatingMenuOptions {
     items: MenuEntry[];
     /** Element to anchor the menu to (positioned just below it, flips up if needed). */
     anchor: HTMLElement;
+    /**
+     * Position the menu at this viewport point (e.g. a pointer location) instead
+     * of just below the anchor. Used by {@link addContextMenu} to open at the
+     * exact click/tap target.
+     */
+    at?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Also close the menu when the anchor itself is clicked. By default a click on
+     * the anchor is ignored (so a trigger button can run its own toggle), but a
+     * context menu — whose anchor has no click handler — wants the click to close.
+     */
+    closeOnAnchorClick?: boolean;
     /** Aberdeen attr/style string on the floating panel. */
     dropdownAttrs?: Attributes;
 }
 /** Options for {@link addContextMenu} — like {@link FloatingMenuOptions}, but
  * the anchor is the element the handler is attached to. */
-export type ContextMenuOptions = Omit<FloatingMenuOptions, "anchor">;
+export type ContextMenuOptions = Omit<FloatingMenuOptions, "anchor" | "at" | "closeOnAnchorClick">;
 /**
  * Draw a list of {@link MenuEntry} items into the *current* element, with
  * arrow-key / Home / End navigation between the focusable items. The single
@@ -82,6 +97,12 @@ export type ContextMenuOptions = Omit<FloatingMenuOptions, "anchor">;
  *   floating menu to close itself on selection).
  */
 export declare function drawMenu(items: MenuEntry[], onActivate?: () => void): void;
+/**
+ * Whether a floating menu is currently open. Reflects live state (cleared the
+ * instant it closes), unlike the DOM — the panel lingers briefly while its
+ * `destroy=` transition plays out.
+ */
+export declare function isFloatingMenuOpen(): boolean;
 /**
  * Open a floating dropdown menu anchored to an element. Portals to
  * `document.body` (never clipped), positions itself (flipping up when there's
@@ -141,7 +162,7 @@ export declare function addContextMenu(opts: ContextMenuOptions): void;
  * @example
  * ```ts
  * S.menuButton({
- *   button: { content: "Actions", attrs: ".neutral .outlined" },
+ *   button: { content: "Actions", attrs: ".neutral" },
  *   items: [
  *     { label: "Edit", icon: () => A("#✎"), click: () => edit() },
  *     { separator: true },

package/dist/components/menu.js

@@ -1,38 +1,33 @@
 import A from "aberdeen";
 import { matchCurrent } from "aberdeen/route";
-import { drawSlot, mountPortal } from "../core.js";
+import { drawSlot, mountPortal, focusFirst } 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
 // render its items into either one.
 A.insertGlobalCss({
+    // Border comes from the `.s-s.neutral` surface; the panel only overrides the radius
+    // (lg) and opts into elevation via `.shadow` (added on the element below).
     ".s-menu-list": "position:fixed z-index:350 min-width:10rem display:flex flex-direction:column p:$1 " +
-        "border: 1px solid $s-border; r:$s-radius-lg box-shadow:$s-shadow " +
+        "r:$s-radius-lg " +
         "overflow-y:auto max-height:min(80vh,28rem) " +
         "transition: opacity 0.15s, transform 0.15s;",
     ".s-menu-list.hidden": "opacity:0 pointer-events:none transform:translateY(-6px)",
-    ".s-menu-item, .s-menu-item-link": "display:flex align-items:center gap:$2 w:100% " +
-        "padding: 0.5em 0.65em; r:$s-radius cursor:pointer text-align:left " +
-        "font-size:0.9em border:0 background:transparent fg:$s-fg text-decoration:none " +
-        "transition: background 0.12s, color 0.12s, transform 0.12s, box-shadow 0.12s;",
-    // A translucent ink tint (rather than an *opaque* mix) so the hover fades in
-    // cleanly: transitioning background from `transparent` toward an opaque colour
-    // flashes through dark mid-tones in browsers that interpolate non-premultiplied.
-    // Staying ink-hued at low alpha keeps the fade the right colour throughout.
-    ".s-menu-item:hover:not([aria-disabled=true]):not([aria-current=page]), .s-menu-item-link:hover:not([aria-current=page])": "background: color-mix(in srgb, $s-fg 10%, transparent);",
-    // Active (current page): a filled brand-gradient pill with a soft glow — the
-    // one place the menu shows real colour, so the current page is unmistakable.
-    ".s-menu-item[aria-current=page], .s-menu-item-link[aria-current=page]": "color:$s-on-accent font-weight:600 background: $s-gradient; box-shadow: 0 3px 10px color-mix(in srgb, $s-primary 38%, transparent);",
-    ".s-menu-item[aria-current=page] .s-menu-icon, .s-menu-item-link[aria-current=page] .s-menu-icon": "color:$s-on-accent",
-    ".s-menu-item[aria-current=page]:hover, .s-menu-item-link[aria-current=page]:hover": "filter:brightness(1.06)",
-    ".s-menu-item:focus-visible, .s-menu-item-link:focus-visible": "outline:none background: color-mix(in srgb, $s-fg 10%, transparent); box-shadow: 0 0 0 2px inset $s-focus;",
-    ".s-menu-item[aria-disabled=true], .s-menu-item-link[aria-disabled=true]": "opacity:0.45 cursor:not-allowed pointer-events:none",
-    ".s-menu-icon": "fg:$s-fg-muted flex-shrink:0",
+    // One class for both the `<a>` (link) and `<button>` forms — they look
+    // identical; the element only differs where link semantics matter (see below).
+    ".s-menu-item": "display:flex align-items:center gap:$2 w:100% outline:0 " +
+        "padding: $m2; line-height:1.1 r:$s-radius cursor:pointer text-align:left font-weight:450 " +
+        "font-size:0.9em border:0 background:transparent fg:$s-text text-decoration:none " +
+        "transition: color 0.12s, transform 0.12s, text-shadow 0.12s;",
+    ".s-menu-item:focus-visible:not([aria-current=page]), .s-menu-item:hover:not([aria-disabled=true]):not([aria-current=page])": "filter:none color: color-mix(in lab, $s-primary 33%, $s-text);",
+    ".s-menu-item[aria-current=page]": "text-shadow: 0 0 2px $s-primary; color: color-mix(in lab, $s-primary 50%, $s-text); filter:brightness(1.15)",
+    ".s-menu-item[aria-disabled=true]": "opacity:0.45 cursor:not-allowed pointer-events:none",
+    ".s-menu-icon": "flex-shrink:0",
     // A soft hairline that fades out at both ends, rather than a hard full-width
     // rule — quieter, and it reads as a grouping cue instead of a divider bar.
     // `hr.` (not just `.`) so this wins over the global hr flow-margin rule.
     "hr.s-menu-sep": "border:0 height:1px margin: $1 0.6rem; " +
-        "background: linear-gradient(to right, transparent, $s-border-strong 18%, $s-border-strong 82%, transparent);",
+        "background: linear-gradient(to right, transparent, $s-faint 18%, $s-faint 82%, transparent);",
 });
 /**
  * Draw a list of {@link MenuEntry} items into the *current* element, with
@@ -51,11 +46,19 @@ A.insertGlobalCss({
 export function drawMenu(items, onActivate) {
     // Roving focus via the DOM: query the live item elements on each keypress.
     A("keydown=", (e) => {
+        // Link items navigate through interceptLinks' own Enter handler, which
+        // preventDefault()s the activation — so no synthetic `click` fires, and the
+        // click-bound `onActivate` (which closes a floating menu) never runs. Close it
+        // ourselves, deferred so this keydown finishes dispatching (and navigates) first.
+        if (e.key === "Enter" && e.target.tagName === "A") {
+            queueMicrotask(() => onActivate?.());
+            return;
+        }
         if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End")
             return;
         e.preventDefault();
         const container = e.currentTarget;
-        const els = [...container.querySelectorAll(".s-menu-item, .s-menu-item-link")]
+        const els = [...container.querySelectorAll(".s-menu-item")]
             .filter((el) => el.getAttribute("aria-disabled") !== "true");
         if (!els.length)
             return;
@@ -76,7 +79,7 @@ export function drawMenu(items, onActivate) {
             A("hr.s-menu-sep");
             continue;
         }
-        A(entry.href ? "a.s-menu-item-link" : "button.s-menu-item type=button", entry.attrs, () => {
+        A(entry.href ? "a.s-menu-item" : "button.s-menu-item type=button", entry.attrs, () => {
             if (entry.href) {
                 A("href=", entry.href);
                 if (entry.target)
@@ -109,6 +112,14 @@ function closeFloating() {
     $floating.opts = null;
     anchor?.focus();
 }
+/**
+ * Whether a floating menu is currently open. Reflects live state (cleared the
+ * instant it closes), unlike the DOM — the panel lingers briefly while its
+ * `destroy=` transition plays out.
+ */
+export function isFloatingMenuOpen() {
+    return $floating.opts != null;
+}
 function positionMenu(menuEl, rect) {
     const mw = menuEl.offsetWidth, mh = menuEl.offsetHeight;
     const vw = window.innerWidth, vh = window.innerHeight;
@@ -126,14 +137,14 @@ mountPortal(() => {
     const f = $floating.opts;
     if (!f)
         return;
-    const menuEl = A("div.s-menu-list.s-s.panel create=hidden destroy=hidden", f.dropdownAttrs, () => {
+    const menuEl = A("div.s-menu-list.s-s.neutral.shadow create=hidden destroy=hidden", f.dropdownAttrs, () => {
         drawMenu(f.items, closeFloating);
     });
     // Capture-phase document handlers replace an invisible backdrop element:
     // any click outside the panel + anchor closes; Escape/Tab close.
     const onClick = (e) => {
         const t = e.target;
-        if (!menuEl.contains(t) && !f.anchor.contains(t))
+        if (!menuEl.contains(t) && (f.closeOnAnchorClick || !f.anchor.contains(t)))
             closeFloating();
     };
     const onKey = (e) => {
@@ -152,8 +163,14 @@ mountPortal(() => {
     requestAnimationFrame(() => {
         if (!document.body.contains(menuEl))
             return;
-        positionMenu(menuEl, f.anchor.getBoundingClientRect());
-        menuEl.querySelector(".s-menu-item:not([aria-disabled=true]), .s-menu-item-link:not([aria-disabled=true])")?.focus();
+        // Position at the supplied point (a zero-size rect) when given — e.g. the
+        // pointer location for a context menu — otherwise below the anchor.
+        const rect = f.at ? { left: f.at.x, right: f.at.x, top: f.at.y, bottom: f.at.y } : f.anchor.getBoundingClientRect();
+        positionMenu(menuEl, rect);
+        // Focus the active (current-page) item if there is one — so opening lands
+        // where you are — else the first focusable element (covers custom slot
+        // content, like a settings dropdown, not just `.s-menu-item`s).
+        focusFirst(menuEl, ".s-menu-item[aria-current=page]");
     });
 });
 // ─── Public API ──────────────────────────────────────────────────────────────
@@ -214,7 +231,15 @@ export function addContextMenu(opts) {
     A("contextmenu=", (e) => {
         e.preventDefault();
         myEl = e.currentTarget;
-        showFloatingMenu({ items: opts.items, anchor: myEl, dropdownAttrs: opts.dropdownAttrs });
+        // Anchor at the exact click/tap point, and close on a plain click of the
+        // element (it has no toggle handler of its own).
+        showFloatingMenu({
+            items: opts.items,
+            anchor: myEl,
+            at: { x: e.clientX, y: e.clientY },
+            closeOnAnchorClick: true,
+            dropdownAttrs: opts.dropdownAttrs,
+        });
     });
 }
 /**
@@ -228,7 +253,7 @@ export function addContextMenu(opts) {
  * @example
  * ```ts
  * S.menuButton({
- *   button: { content: "Actions", attrs: ".neutral .outlined" },
+ *   button: { content: "Actions", attrs: ".neutral" },
  *   items: [
  *     { label: "Edit", icon: () => A("#✎"), click: () => edit() },
  *     { separator: true },
@@ -246,7 +271,7 @@ export function menuButton(opts) {
         // 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",
+        attrs: ".neutral",
         ...opts.button,
         click: (e) => {
             myEl = e.currentTarget;

package/dist/components/select.js

@@ -5,7 +5,7 @@ A.insertGlobalCss({
     ".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:$s-fg-muted font-size:0.85em",
+        "&::after": "content: '▾'; position:absolute right:0.7em top:50%; transform: translateY(-50%); pointer-events:none fg:$s-muted font-size:0.85em",
     },
 });
 /**

package/dist/components/tabs.js

@@ -3,13 +3,13 @@ import { drawSlot, uniqueId } from "../core.js";
 A.insertGlobalCss({
     ".s-tabs": {
         "&": "display:flex flex-direction:column gap:$3",
-        ".s-tablist": "display:flex gap:$1 align-items:stretch overflow-x:auto scrollbar-width:none border-bottom: 1px solid $s-border;",
+        ".s-tablist": "display:flex gap:$1 align-items:stretch overflow-x:auto scrollbar-width:none border-bottom: 1px solid $s-faint;",
         ".s-tablist::-webkit-scrollbar": "display:none",
         ".s-tab": "display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent " +
-            "border:0 color: $s-fg-muted; font-weight:600 padding: 0.6em 0.9em; " +
+            "border:0 color: $s-muted; font-weight:600 padding: 0.6em 0.9em; " +
             "border-bottom: 3px solid transparent; margin-bottom:-1px " +
             "transition: color 0.15s, background 0.15s, border-color 0.15s;",
-        ".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]": "color: $s-fg;",
+        ".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]": "color: $s-text;",
         ".s-tab:focus-visible": "outline:none box-shadow: 0 0 0 3px $s-focus; r: $s-radius;",
         ".s-tab[aria-selected=true]": "border-image: $s-gradient 1;",
         ".s-tabpanel": "display:block",

package/dist/components/toast.js

@@ -7,15 +7,14 @@ A.insertGlobalCss({
         "pointer-events:none max-width:min(90vw,24rem) w:24rem",
     ".s-toast": {
         "&": "display:flex align-items:flex-start gap:$2 " +
-            "padding: $3; border: 1px solid $s-border; r:$s-radius box-shadow:$s-shadow " +
+            "padding: $3; " +
             "pointer-events:auto position:relative overflow:hidden",
         ".s-toast-body": "display:flex flex-direction:column gap:$1 flex:1 min-width:0",
         ".s-toast-title": "font-weight:700 line-height:1.3",
-        ".s-toast-msg": "font-size:0.9em fg:$s-fg-muted line-height:1.4",
-        ".s-toast-close": "cursor:pointer border:0 background:transparent fg:$s-fg-muted font-size:1.1em line-height:1 " +
+        ".s-toast-close": "cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 " +
             "padding: 0 0.15em; r:4px flex-shrink:0 align-self:flex-start",
-        ".s-toast-close:hover": "fg:$s-fg",
-        ".s-toast-close:focus-visible": "outline:none box-shadow: 0 0 0 3px $s-focus; fg:$s-fg",
+        ".s-toast-close:hover": "fg:$s-text",
+        ".s-toast-close:focus-visible": "outline:none box-shadow: 0 0 0 3px $s-focus; fg:$s-text",
         ".s-toast-progress": "position:absolute bottom:0 left:0 right:0 height:2px background:$s-accent width:100%",
     },
 });
@@ -27,11 +26,12 @@ mountPortal(() => {
     // leaving the container in the DOM forever after. (So as not to cut of hide animations.)
     if (A.peek(() => A.isEmpty(toasts)) && A.isEmpty(toasts))
         return;
-    A("div.s-toasts aria-live=polite aria-atomic=false", () => {
+    A("div.s-toasts", () => {
         A.onEach(toasts, (entry) => {
             const { opts, id } = entry;
             const role = opts.type === "danger" || opts.type === "warning" ? "alert" : "status";
-            const surface = opts.type ?? "neutral";
+            // "neutral" (the default) is a neutral surface; the rest are accent surfaces.
+            const surface = opts.type == null || opts.type === "neutral" ? "neutral" : opts.type;
             const duration = opts.duration ?? 6000;
             let timer;
             let progressEl = null;
@@ -55,7 +55,7 @@ mountPortal(() => {
                 }
             };
             A.clean(() => clearTimeout(timer));
-            A(`div.s-toast.s-s.${surface} role=${role}`, "create=", grow, "destroy=", shrink, opts.attrs, () => {
+            A(`div.s-toast.s-s.${surface}.extra-shadow aria-live=polite role=${role}`, "create=", grow, "destroy=", shrink, opts.attrs, () => {
                 if (duration > 0) {
                     A("mouseenter=", stopCountdown);
                     A("mouseleave=", startCountdown);

package/dist/components/tooltip.js

@@ -1,11 +1,12 @@
 import A from "aberdeen";
 import { drawSlot, mountPortal } from "../core.js";
+// The tip is a `.s-s.neutral.shadow` surface (it portals to <body>, so it renders at
+// the page's next neutral shade), which provides its background, ink, border,
+// radius and elevation.
 A.insertGlobalCss({
     ".s-tt-tip": {
         "&": "position:fixed z-index:500 " +
             "max-width:20rem w:max-content " +
-            "bg:$s-raised fg:$s-fg border: 1px solid $s-border-strong; " +
-            "r:$s-radius box-shadow:$s-shadow " +
             "padding: 0.3em 0.65em; font-size:0.85em line-height:1.4 " +
             "pointer-events:none",
     },
@@ -73,7 +74,7 @@ mountPortal(() => {
         return;
     const { opts, anchor } = active;
     const placement = opts.placement ?? "top";
-    const tipEl = A("div.s-tt-tip role=tooltip visibility:hidden", opts.attrs, () => {
+    const tipEl = A("div.s-tt-tip.s-s.neutral.shadow role=tooltip visibility:hidden", opts.attrs, () => {
         A("mouseenter=", () => {
             if (hideTimer) {
                 clearTimeout(hideTimer);

package/dist/core.d.ts

@@ -10,8 +10,9 @@
  * 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` `.secondary` `.gradient` `.danger` `.success` and `.warning`
- * - for variant: `.filled` `.tonal` and `.outlined`
+ * - neutral surface: `.neutral` (shade steps with nesting depth)
+ * - accent surface: `.primary` `.danger` `.success` `.warning` and `.link`
+ * - accent 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
@@ -56,6 +57,17 @@ 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;
+/**
+ * Move keyboard focus to the first focusable element inside `container`, skipping
+ * disabled, `aria-disabled`, `tabindex=-1` and hidden ones. When `prefer` (a
+ * selector) matches a focusable element it wins — e.g. a menu's current item — so
+ * opening lands where the user already is. Returns whether anything was focused.
+ *
+ * Shared by overlays (the floating menu, dialogs) so "open → focus the right
+ * thing" behaves identically everywhere. Call it after the element is in the DOM
+ * and laid out (typically inside a `requestAnimationFrame`).
+ */
+export declare function focusFirst(container: HTMLElement, prefer?: string): boolean;
 /**
  * Mount a portal (tooltip, toast, menu, dialog, …) directly into `<body>`.
  * Must be called at module top level, where Aberdeen's root scope (whose

package/dist/core.js

@@ -17,6 +17,29 @@ export function drawSlot(slot, ...args) {
     else
         A("rich=", slot);
 }
+/** Selector matching the natively focusable elements we care about. */
+const FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
+/**
+ * Move keyboard focus to the first focusable element inside `container`, skipping
+ * disabled, `aria-disabled`, `tabindex=-1` and hidden ones. When `prefer` (a
+ * selector) matches a focusable element it wins — e.g. a menu's current item — so
+ * opening lands where the user already is. Returns whether anything was focused.
+ *
+ * Shared by overlays (the floating menu, dialogs) so "open → focus the right
+ * thing" behaves identically everywhere. Call it after the element is in the DOM
+ * and laid out (typically inside a `requestAnimationFrame`).
+ */
+export function focusFirst(container, prefer) {
+    const ok = (el) => el instanceof HTMLElement &&
+        !el.hasAttribute("disabled") &&
+        el.getAttribute("aria-disabled") !== "true" &&
+        el.tabIndex >= 0 &&
+        el.getClientRects().length > 0;
+    const target = (prefer ? [...container.querySelectorAll(prefer)].find(ok) : undefined) ??
+        [...container.querySelectorAll(FOCUSABLE_SELECTOR)].find(ok);
+    target?.focus();
+    return target != null;
+}
 /**
  * Mount a portal (tooltip, toast, menu, dialog, …) directly into `<body>`.
  * Must be called at module top level, where Aberdeen's root scope (whose