staffa 0.6.0 → 0.7.0

package/README.md

@@ -13,7 +13,10 @@ S.main({
   maxWidth: "40rem",
   content: () => {
     S.form({
-      submit: () => console.log(A.unproxy($user)),
+      submit: () => S.dialog({
+        header: "Submitted",
+        content: () => A.dump($user)
+      }),
       content: () => {
         S.textline({ label: "Name", required: true, bind: A.ref($user, "name") });
         S.textline({ label: "Email", type: "email", bind: A.ref($user, "email") });
@@ -72,20 +75,29 @@ S.box({ header: "See the [docs](/docs)", content: () => { ... } });
 
 ### Surfaces
 
-Staffa builds on **surfaces**: elements marked with `.s-s` that have their own background and derived text/border tokens. Add modifier classes to colour them:
+Staffa builds on **surfaces**: elements marked with `.s-s` that have their own background and derived text/border tokens. There are two families:
 
-- **level**: `.base`, `.panel`, `.raised`
-- **role**: `.primary`, `.secondary`, `.gradient`, `.neutral`, `.danger`, `.success`, `.warning`
-- **variant**: `.filled`, `.tonal`, `.outlined`
+- **Neutral surfaces** — `.neutral` (and the implicit page at `:root`). A calm neutral whose shade steps automatically with nesting depth (page → panel → raised, capped). Use them for cards, bars, popovers — anything that just holds content. No variants.
+- **Accent surfaces** — `.primary`, `.danger`, `.success`, `.warning`, `.link` (a bare `.s-s` defaults to primary). A bright fill with white ink, painted as a subtle single-colour gradient. They take a **variant**: `.filled` (default), `.tonal`, or `.outlined`. A surface nested *inside* an accent surface is always rendered filled, so it can't bleed into the vivid parent.
 
-Components are built from these (`S.button` is a `.s-s.primary.filled`, `S.box` a `.s-s.panel`, etc.). Because component options include an optional `attrs` string, which has Aberdeen `A()` string semantics, you can easily override it:
+Components are built from these (`S.button` is a `.s-s.primary`, `S.box` a `.s-s.neutral`, etc.). Because component options include an optional `attrs` string, which has Aberdeen `A()` string semantics, you can easily override it:
 
 ```ts
 S.button({ content: "Delete", attrs: ".danger" });
-S.box({ attrs: ".raised.outlined", content: () => { ... } });
+S.button({ content: "Cancel", attrs: ".neutral" });       // neutral button
+S.box({ attrs: ".primary", content: () => { ... } });
 ```
 
-Inside any surface, CSS variables are defined for suitable foreground colors (`$s-fg`, `$s-bg`, `$s-fg-muted`, `$s-border`, `$s-accent`, ...), with `color` defaulting to `$s-fg`. By using these, components has access to various foreground colors that will look regardless of the surface it is drawing on.
+Inside any surface (including `:root`), CSS variables are defined for the background and a set of safe foreground colors: `$s-bg`, `$s-text` (also applied as `color`), `$s-muted`, `$s-accent` (the surface's "pop" — the brand primary on neutral surfaces, the ink on accent surfaces), and `$s-faint`. By using these, components adapt to wherever they're nested.
+
+The colour tokens are mode-independent and settable: `$s-primary` (the one brand colour — it tints the neutrals and defines `.s-s.primary`), `$s-danger`, `$s-success`, `$s-warning`, and `$s-link` (the link colour, which is also the fill of the `.s-s.link` surface). Links render in `$s-link` on neutral surfaces and in the ink on accent surfaces.
+
+**Borders & shadows.** Neutral surfaces carry a subtle hairline border on their own (so a card looks like a card without any component help). Any surface can be lifted with `.shadow` or `.extra-shadow`: on a neutral surface that's a neutral drop shadow, on an accent surface it's a self-coloured glow (a lit button is just a `.primary` surface with `.shadow`), and on `.tonal`/`.outlined` it's ignored. `.no-shadow` removes a component's built-in shadow:
+
+```ts
+S.box({ attrs: ".extra-shadow", content: () => { ... } });   // a more raised card
+S.button({ content: "Quiet", attrs: ".no-shadow" });          // drop the button glow
+```
 
 ### Dark and light modes
 
@@ -105,22 +117,20 @@ Staffa includes a lightweight CSS reset that makes bare semantic HTML look a bit
 
 ### Theming
 
-The first step in theming is just setting some CSS variables, most commonly the primary and secondary color. This can be done through CSS directly, or using Aberdeen:
+The first step in theming is just setting some CSS variables. Everything derives from a single brand colour, `s-primary` (the neutral surface shades are tinted toward it too), so often that's all you need. This can be done through CSS directly, or using Aberdeen:
 
 ```ts
 A.cssVars["s-primary"] = "#fdda58";
-A.cssVars["s-secondary"] = "#cc5624";
 A.cssVars["s-danger"] = "#ee4422";
 A.cssVars["s-radius"] = "4px";
 ```
 
 See `src/theme.ts` for what other CSS variables are being used.
 
-If you need further customization, just add some CSS to override the default styling. For instance, to add your own surface type:
+If you need further customization, just add some CSS to override the default styling. For instance, to add your own accent surface, set its background (and, if needed, its ink) — the subtle gradient and the rest of the tokens follow automatically:
 
 ```ts
-// In filled mode, 's-a' is the foreground and 's-b' is the background. "outlined" and "tonal" use the colors in different ways.
-A.insertGlobalCss({".s-s.my-surface": "--s-a:white --s-b:#ef6b00"});
+A.insertGlobalCss({".s-s.my-surface": "--s-bg:#ef6b00 --s-text:#fff"});
 
 S.button({
   content: "You'll want to click me",
@@ -129,6 +139,8 @@ S.button({
 });
 ```
 
+Custom surface class names may be anything (other than the built-in modifiers `.tonal`, `.outlined`, `.small`, `.large`). The `.tonal` and `.outlined` variants work on your surface for free.
+
 Note that when changing CSS like this, things *may* break if you upgrade Staffa. The recommended update strategy is therefore: don't!
 
 If you want to make changes that are dependent upon the current light/dark mode setting, rely on Aberdeen reactivity:
@@ -137,10 +149,10 @@ If you want to make changes that are dependent upon the current light/dark mode
 A(() => {
   if (S.getDarkMode()) {
     A.cssVars["s-primary"] = "#aa9944";
-    A.insertGlobalCss({".s-s.my-surface": "--s-a:white --s-b:#444444"});
+    A.insertGlobalCss({".s-s.my-surface": "--s-bg:#444444 --s-text:#fff"});
   } else {
     A.cssVars["s-primary"] = "#fdda58";
-    A.insertGlobalCss({".s-s.my-surface": "--s-a:black --s-b:#cccccc"});
+    A.insertGlobalCss({".s-s.my-surface": "--s-bg:#cccccc --s-text:#000"});
   }
 });
 ```
@@ -233,7 +245,7 @@ Staffa is designed for extension. A component is simply a plain function taking
 
 3. **Reach for reactivity deliberately.** Pass option strings straight to `A` as positional args (the caller's scope). Only wrap a dedicated `A(() => ...)` scope where it matters: input elements (recreation loses focus), or large subtrees you don't want to redraw. Use `A.peek(() => ...)` when you need a value but must not subscribe.
 
-4. **Build on surfaces.** Mark elements `.s-s` and add level/role/variant modifiers. Inside them, use the contextual foreground color CSS variables (`$s-fg`, `$s-bg`, `$s-border`, ...) so components adapt to wherever they're nested. Hard-coding colors in components shouldn't be needed, but if you must, make sure you set *both* foreground and background.
+4. **Build on surfaces.** Mark elements `.s-s` and add `.neutral` or an accent role (`.primary`, `.danger`, …) plus an optional variant. Inside them, use the contextual CSS variables (`$s-text`, `$s-bg`, `$s-muted`, `$s-accent`, `$s-faint`, ...) so components adapt to wherever they're nested. Hard-coding colors in components shouldn't be needed, but if you must, make sure you set *both* foreground and background.
 
 5. **No outer margins.** Components don't margin themselves; spacing is the parent's job. Content components set default `padding` on the content element; `contentAttrs` overrides it.
 
@@ -285,6 +297,14 @@ ln -s ../../node_modules/staffa/skill .claude/skills/staffa
 
 ## Breaking changes
 
+- **0.7** — the surface model was reduced to two families: **neutral** (`.neutral`) and **accent** (`.primary`/`.danger`/`.success`/`.warning`/`.link`). Apps that only use the high-level `S.*` components need no changes. Code that uses surface classes or tokens directly must update:
+  - **Surface levels gone.** Replace `.base`/`.panel`/`.raised`/`.neutral`/`.nest` with the single `.neutral` class.
+  - **`.secondary` and `.gradient` gone.** Drop any `s-secondary` colour override; there's no `s-secondary` anymore. The default button is now `.primary`.
+  - **Tokens renamed.** `--s-fg`→`--s-text`, `--s-fg-muted`→`--s-muted`, `--s-border`→`--s-faint`. Removed: `--s-fg-faint`, `--s-border-strong`, `--s-ink`, `--s-on-accent`, `--s-page`/`--s-panel`/`--s-raised`, `--s-neutral`, `--s-tint`, `--s-glow`, `--s-shadow`, `--s-gradient-surface`. A custom surface now sets `--s-bg`/`--s-text` (was the `--s-a`/`--s-b` anchors).
+  - **Borders/shadows moved onto surfaces.** Components no longer draw their own border/shadow. If you relied on `S.box`/`S.dialog`/etc. elevation, it now comes from the surface; pass `.no-shadow` to drop it, or `.shadow`/`.extra-shadow` to add it on any surface.
+
+- **0.6**: None.
+
 - **0.5**
   - Surfaces (`.s-s`) now apply `border-radius` and — for `.tonal` and `.outlined` variants — `border` automatically. Custom surfaces or components that previously set these manually may see doubled or conflicting styles; remove the manual declarations.
   - `border:0` is now applied to `.s-btn` by default (overriding the browser's 2px button border). Custom button-like components built on `.s-btn` that relied on the browser default border should add an explicit border.

package/dist/components/autocomplete.js

@@ -4,20 +4,23 @@ import { drawField } from "./field.js";
 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",
     },
 });
 function normOption(o) {
@@ -160,7 +163,7 @@ export function autocomplete(opts) {
                 const list = filtered();
                 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/dist/components/box.js

@@ -1,15 +1,20 @@
 import A from "aberdeen";
 import { drawSlot } from "../core.js";
-// 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",
     },
 });
@@ -34,19 +39,19 @@ A.insertGlobalCss({
  */
 export function box(opts = {}) {
     const o = 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));
+                A("header.s-s.neutral", o.headerAttrs, () => drawSlot(o.header));
         });
         A("div", o.contentAttrs, () => {
             drawSlot(o.content);
         });
         A(() => {
             if (o.footer != null)
-                A("footer.s-s.raised", o.footerAttrs, () => drawSlot(o.footer));
+                A("footer.s-s.neutral", o.footerAttrs, () => drawSlot(o.footer));
         });
     });
 }

package/dist/components/button.d.ts

@@ -18,7 +18,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
@@ -44,6 +45,7 @@ export interface ButtonOptions {
  * @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>

package/dist/components/button.js

@@ -6,35 +6,28 @@ import { drawSlot } from "../core.js";
 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.
@@ -53,6 +46,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>
@@ -61,12 +55,11 @@ const ROLE_CLASS = /\.(gradient|primary|secondary|neutral|danger|success|warning
 export function button(opts = {}) {
     const o = typeof opts === "string" || typeof opts === "function" ? { content: opts } : opts;
     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)

package/dist/components/buttonChooser.js

@@ -26,7 +26,7 @@ export function buttonChooser(opts) {
                 // 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/dist/components/buttonGroup.d.ts

@@ -24,9 +24,9 @@ export interface ButtonGroupOptions extends ContentOptions {
  * @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/dist/components/buttonGroup.js

@@ -27,9 +27,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/dist/components/dialog.d.ts

@@ -37,6 +37,8 @@ export interface DialogOptions {
      */
     onClose?: () => void;
 }
+/** Whether any dialog is currently open (live state, not the lingering DOM). */
+export declare function isDialogOpen(): boolean;
 /**
  * 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
@@ -53,7 +55,7 @@ export interface DialogOptions {
  *   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 });
  *   },
  * });
  * ```

package/dist/components/dialog.js

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { drawSlot, mountPortal } from "../core.js";
+import { drawSlot, mountPortal, focusFirst } from "../core.js";
 import { button } from "./button.js";
 import { buttonGroup } from "./buttonGroup.js";
 import { textline } from "./textline.js";
@@ -8,17 +8,19 @@ 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",
     },
@@ -30,6 +32,10 @@ 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() {
+    return topDialogId.value != null;
+}
 mountPortal(() => {
     A.onEach(dialogs, ({ resolve, opts }, dialogId) => {
         const close = () => { delete dialogs[dialogId]; };
@@ -46,10 +52,10 @@ mountPortal(() => {
                 close();
         });
         // 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));
                 }
             });
             A("div", opts.contentAttrs, () => {
@@ -57,10 +63,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));
                 }
             });
         });
+        // 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); });
     });
 });
 /**
@@ -79,7 +89,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 });
  *   },
  * });
  * ```
@@ -150,7 +160,7 @@ export function confirm(message, opts = {}) {
             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(); } });
                     } });
             },
@@ -189,7 +199,7 @@ export function prompt(message, defaultValue = "", opts = {}) {
                     });
                     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/dist/components/field.js

@@ -3,14 +3,17 @@ import { drawSlot, uniqueId } from "../core.js";
 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",
     },