@adia-ai/web-modules 0.6.12 → 0.6.14

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog — @adia-ai/web-modules
 
+## [0.6.14] — 2026-05-21
+
+### Fixed
+- **`<admin-page-header>` — distinct background + drop-shadow.** Page-header now uses `var(--page-content-header-bg)` (= `--a-canvas-2`, ΔL=0.08 above body canvas) with `var(--a-shadow-sm)` instead of inheriting the body canvas. The previous behavior used `var(--page-content-bg)` (same as body), which left the band visually flush with the page body — a regression observed in dark mode on the claims-ui-v3 cold-start dogfood at 1572px viewport where KPI cards rendered visually attached to the page-header content. Two tokens shift: `--page-content-header-bg: var(--a-canvas-2)` (new, in `admin-shell.tokens.css`) and `box-shadow: var(--a-shadow-sm)` (new, in `admin-shell.bespoke.css` at `admin-page > admin-page-header`). The intent is preserve-not-regress visual hierarchy: page-header band reads as elevated chrome over the body's content surface in both light and dark modes.
+
+### Verification
+- `verify:traits` 56/56 clean.
+- `components.mjs --verify` clean (142 files up-to-date).
+- `smoke:engines` green; `smoke:register-engine` 11/11.
+- `eval:diff --engine zettel` cov=49% / avg=90 (baseline-identical).
+- Browser-verified at `/site/examples/admin-dashboard`: page-header bg measures `oklch(0.23 0.01 225)` (canvas-2) in dark mode, with `var(--a-shadow-sm)` rendering below the band; KPI grid sits 40px below the page-header bottom (no overlap).
+
+## [0.6.13] — 2026-05-20
+
+### Changed
+- **`<admin-shell>` — default `mode` is now `"rounded borderless"` (was flat-bordered).** A bare `<admin-shell>` with no `mode` attribute auto-promotes to `mode="rounded borderless"` in `connectedCallback` — the modern soft-chrome visual baseline becomes opt-out, not opt-in. Any author-supplied `mode` attribute (including the empty string `mode=""` for the flat legacy chrome) is respected verbatim: the default fires only when no `mode` attribute is present on the tag at all. The behavior change is scoped to consumers emitting a bare `<admin-shell>` — every in-repo composition surface and every audited external consumer except claims-ui-v3 already set `mode="rounded borderless"` explicitly. Opt-out matrix: `<admin-shell>` → `rounded borderless`; `<admin-shell mode="">` → `""`; `<admin-shell mode="rounded">` → `rounded`. The `props.mode` schema also drops its (incorrect) `enum: ["", rounded, borderless]` constraint — `mode` is a space-separated token set consumed by CSS `mode~="<token>"` attribute selectors, so the `.d.ts` `mode` type widens from `'' | 'rounded' | 'borderless'` to `string` (TS consumers can now assign `el.mode = "rounded borderless"` without a cast).
+
 ## [0.6.12] — 2026-05-20
 
 ### Cleanup (no in-tree or audited external consumer impact)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.6.12",
+  "version": "0.6.14",
   "description": "AdiaUI composite custom elements \u2014 shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {

package/shell/admin-shell/admin-shell.a2ui.json

@@ -17,14 +17,9 @@
       "const": "AppShell"
     },
     "mode": {
-      "description": "Layout variant — default is bordered surface; rounded softens edges; borderless removes the outer chrome.",
+      "description": "Layout variant — space-separated token set. Recognized tokens:\n  rounded     — softens content-surface edges (border-radius from --page-content-radius)\n  borderless  — removes outer chrome borders (content dividers persist)\nThe CSS uses `mode~=\"<token>\"` attribute selectors, so multiple\ntokens combine additively (\"rounded borderless\" = both).\n\nDefault since v0.6.13: \"rounded borderless\". A bare `<admin-shell>`\nwith no `mode` attribute auto-promotes to this pair on connect.\nAuthor-supplied `mode` attributes (including the empty string\n`mode=\"\"` for flat bordered chrome) are respected verbatim.\n",
       "type": "string",
-      "enum": [
-        "",
-        "rounded",
-        "borderless"
-      ],
-      "default": ""
+      "default": "rounded borderless"
     }
   },
   "required": [

package/shell/admin-shell/admin-shell.d.ts

@@ -35,8 +35,18 @@ export interface AdminShellSidebarToggleEventDetail {
 export type AdminShellSidebarToggleEvent = CustomEvent<AdminShellSidebarToggleEventDetail>;
 
 export class AdminShell extends UIElement {
-  /** Layout variant — default is bordered surface; rounded softens edges; borderless removes the outer chrome. */
-  mode: '' | 'rounded' | 'borderless';
+  /** Layout variant — space-separated token set. Recognized tokens:
+  rounded     — softens content-surface edges (border-radius from --page-content-radius)
+  borderless  — removes outer chrome borders (content dividers persist)
+The CSS uses `mode~="<token>"` attribute selectors, so multiple
+tokens combine additively ("rounded borderless" = both).
+
+Default since v0.6.13: "rounded borderless". A bare `<admin-shell>`
+with no `mode` attribute auto-promotes to this pair on connect.
+Author-supplied `mode` attributes (including the empty string
+`mode=""` for flat bordered chrome) are respected verbatim.
+ */
+  mode: string;
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,

package/shell/admin-shell/admin-shell.js

@@ -17,7 +17,12 @@
  * compat reads; see git history for the legacy paths.
  *
  * Host responsibilities (the only behavior that stays here):
- *   1. [mode] reflection — "rounded", "borderless", or both
+ *   1. [mode] reflection — "rounded", "borderless", or both. **Default
+ *      since v0.6.13: "rounded borderless"**. Authors who want the flat
+ *      legacy chrome opt out via an explicit `mode=""` or `mode="rounded"`
+ *      (etc.); any author-supplied `mode` attribute (including the empty
+ *      string) is respected verbatim, so the default only fires when
+ *      no `mode` attribute is present at all on the tag.
  *   2. [data-sidebar-toggle="<name>"] click forwarding to the matching
  *      <admin-sidebar>'s .toggle() public method
  *   3. [data-command-trigger] click forwarding to <admin-command>.show()
@@ -26,6 +31,8 @@
 
 import { UIElement } from '../../../web-components/core/element.js';
 
+const DEFAULT_MODE = 'rounded borderless';
+
 class AdminShell extends UIElement {
   static properties = {
     mode: { type: String, default: '', reflect: true },
@@ -34,6 +41,11 @@ class AdminShell extends UIElement {
   static template = () => null;
 
   connected() {
+    // Apply the v0.6.13 default mode if (and only if) the author did
+    // not supply a `mode` attribute on the tag. `hasAttribute` returns
+    // true for `mode=""` so explicit empty-string authoring (the flat
+    // legacy chrome opt-out) is preserved.
+    if (!this.hasAttribute('mode')) this.mode = DEFAULT_MODE;
     this.#wireToggleButtons();
     this.#wireCommandTriggers();
   }

package/shell/admin-shell/admin-shell.yaml

@@ -13,10 +13,19 @@ description: |
 props:
   mode:
     type: string
-    default: ""
-    enum: ["", rounded, borderless]
+    default: "rounded borderless"
     reflect: true
-    description: Layout variant — default is bordered surface; rounded softens edges; borderless removes the outer chrome.
+    description: |
+      Layout variant — space-separated token set. Recognized tokens:
+        rounded     — softens content-surface edges (border-radius from --page-content-radius)
+        borderless  — removes outer chrome borders (content dividers persist)
+      The CSS uses `mode~="<token>"` attribute selectors, so multiple
+      tokens combine additively ("rounded borderless" = both).
+
+      Default since v0.6.13: "rounded borderless". A bare `<admin-shell>`
+      with no `mode` attribute auto-promotes to this pair on connect.
+      Author-supplied `mode` attributes (including the empty string
+      `mode=""` for flat bordered chrome) are respected verbatim.
 
 events:
   sidebar-toggle:

package/shell/admin-shell/css/admin-shell.bespoke.css

@@ -82,13 +82,21 @@ admin-content > admin-page {
   container-name: page-content;
 }
 
-/* ── admin-page-header ≡ <[data-content-header]> sticky band ── */
+/* ── admin-page-header ≡ <[data-content-header]> sticky band ──
+   Background uses --page-content-header-bg (defaults to --a-canvas-1, one
+   step raised from --page-content-bg / --a-canvas-0) so the sticky band
+   visually distinguishes itself from the content surface scrolling under
+   it. A subtle drop shadow below the band reinforces "chrome floating
+   above content" on both light and dark themes — the canvas-step alone
+   reads too quietly in dark mode (ΔL ≈ 0.04 on the OKLCH scale). The
+   border-bottom remains for crisp edge separation. */
 admin-page > admin-page-header {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: var(--page-content-bg);
+  background: var(--page-content-header-bg);
   border-bottom: var(--page-content-border);
+  box-shadow: var(--a-shadow-sm);
   flex-shrink: 0;
 }
 

package/shell/admin-shell/css/admin-shell.tokens.css

@@ -38,6 +38,7 @@
 
   /* Content area — scroll region inside main */
   --page-content-bg:        var(--a-canvas-0);       /* content surface (lighter than chrome) */
+  --page-content-header-bg: var(--a-canvas-2);       /* sticky page-header band — stronger raised step (ΔL ≈ 0.08 from content) so the band reads clearly on both light and dark themes. Pre-v0.6.14 (--a-canvas-1, ΔL ≈ 0.04) was too subtle in dark mode. */
   --page-content-radius:    var(--a-radius-lg);      /* used by "rounded" mode */
   --page-content-inset:     var(--a-space-10);       /* padding for header/body/footer */
   --page-content-max-width: 1540px;                   /* max-width for content children */