@adia-ai/web-modules 0.6.14 → 0.6.16

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog — @adia-ai/web-modules
 
+## [0.6.16] — 2026-05-21
+
+### Fixed
+- **`<admin-page>` layout breaks at narrow viewports when wrapped in `<router-ui>` (sticky-overlap regression).** The bespoke selectors `admin-scroll > admin-page, admin-content > admin-page` use the direct-child combinator. When a router (e.g. `<router-ui>` in chat-ui's docs-site, or any consumer's SPA router) sits between `<admin-scroll>` and `<admin-page>` to stamp routed content, the selector misses, `<admin-page>` falls back to `HTMLUnknownElement` (`display: inline`), and its sticky/flex children silently fail layout. At wide viewports the inline flow happens to land roughly where flex would have placed it; at narrower widths (~700–900px), `<admin-page-header>` (sticky inside inline parent) overlaps `<admin-page-body>` content — the user's screenshot showed h1 "Dashboard" + tabs rendering ON TOP OF the KPI cards (Total Revenue, Subscriptions). Fix: relax the selector to use the descendant combinator (`:is(admin-scroll, admin-content) admin-page`) so any depth of intermediate wrapping (`router-ui`, `slot`, generic divs) still picks up the canonical `display: flex; flex-direction: column; min-height: 100%` layout. `<admin-page>` is never legitimately nested inside another `<admin-page>`, so depth-1 restriction isn't needed. Files: `packages/web-modules/shell/admin-shell/css/admin-shell.bespoke.css` (selector relaxation + inline doc comment explaining the trap).
+
+### Changed
+- **`--page-content-header-bg` token: `--a-canvas-2` → `--a-canvas-1`.** The page-header band now matches the shell + sidebar canvas (`oklch(0.19 0.01 225)` in dark mode) so the admin chrome reads as a continuous wrapper around the page-body's content surface (canvas-0). Previous v0.6.14 value (canvas-2, ΔL=0.08) was chosen under the "elevated step over content" intent, but vision-tests against dense layouts at 1572px viewport in dark mode showed the band still read as flush with body — the ΔL=0.08 step is below human-perceptible threshold for a band of this proportion against this surrounding content density. Reframing as **shell-chrome continuation** rather than as elevated step: the page-header reads as the horizontal arm of the shell's L-shape wrapping the rounded content area. Consumers who want a stronger raised band can override the token at `:root`. Files: `packages/web-modules/shell/admin-shell/css/admin-shell.tokens.css` (token value + history comment).
+
+### Verification
+- `components.mjs --verify` clean (142 files up-to-date).
+- `verify:traits` 56/56 clean.
+- `check:lockstep` — all 9 at 0.6.16, ranges at ^0.6.0.
+- `eval:diff --engine zettel` cov=49% / avg=90 (baseline-identical).
+- Browser-verified at `/site/examples/admin-dashboard` in dark mode at 1280px viewport: `admin-page` computed `display: flex` (was `inline` pre-fix), `flex-direction: column`; `admin-page-header` computed `display: block` (was `inline` pre-fix), `position: sticky`, bg `oklch(0.19 0.01 225)` matches sidebar canvas. Vision pass confirms no overlap between page-header and KPI cards across the layout.
+
+## [0.6.15] — 2026-05-21
+
+### Maintenance
+- **Lockstep version bump only.** No source changes in this package; bumped to maintain the 9-package version coherence enforced by `scripts/release/check-lockstep.mjs`. Substantive v0.6.15 work shipped in `@adia-ai/web-components` — `installIconLoaders` shape-detects malformed flat globs (FB-07 auto-promote + warn), `icons-phosphor.js` surfaces silent-fail diagnostics (FB-08), and docs/skill examples corrected (FB-09). See `packages/web-components/CHANGELOG.md#0615--2026-05-21` for details.
+
 ## [0.6.14] — 2026-05-21
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.6.14",
+  "version": "0.6.16",
   "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/css/admin-shell.bespoke.css

@@ -72,9 +72,17 @@ admin-shell[mode~="rounded"] > admin-content > admin-scroll {
   border-radius: var(--page-content-radius);
 }
 
-/* ── admin-page ≡ <article data-content-root> ── */
-admin-scroll > admin-page,
-admin-content > admin-page {
+/* ── admin-page ≡ <article data-content-root> ── 
+   Selector covers the canonical direct-child cases AND any indirect descent
+   (e.g. when <router-ui> sits between <admin-scroll> and <admin-page> to
+   stamp routed content; the docs-site at /site/* + every consumer using a
+   router pattern hits this layout). The previous `>` combinator silently
+   broke at narrow viewports because the unmatched <admin-page> rendered as
+   HTMLUnknownElement (display:inline) and its sticky/flex children
+   collapsed on top of each other. The descendant combinator is safe here:
+   <admin-page> is never legitimately nested inside another <admin-page>,
+   so we don't need depth-1 restriction. */
+:is(admin-scroll, admin-content) admin-page {
   display: flex;
   flex-direction: column;
   min-height: 100%;

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

@@ -38,7 +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-header-bg: var(--a-canvas-1);       /* sticky page-header band — matches sidebar/topbar canvas so the shell reads as a continuous L-shape of chrome wrapping the page-body. ΔL=0.04 above body canvas-0. History: v0.6.14 used canvas-2 (ΔL=0.08) under the "elevated step over content" intent, but vision-tests against dense layouts showed the band still read as flush with body. v0.6.15 reframes the page-header as shell-chrome continuation (canvas-1 matches sidebar) rather than as an elevated step — visual cohesion over contrast. Consumers who want a stronger raised band can override this token at :root. */
   --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 */