@adia-ai/web-modules 0.6.11 → 0.6.13

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog — @adia-ai/web-modules
 
+## [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)
+- **Legacy shell-shape CSS bridges retired.** Per ADR-0032 (continuation of ADR-0023 + ADR-0024), the `:is(legacy, bespoke)` selector lists in `admin-shell.main.css`, `admin-shell.templates.css`, `admin-shell.collapsed.css`, and `admin-shell.shell.css` have been stripped to bespoke-only. Standalone `[data-content-root]` / `[data-content-header]` / `[data-content-body]` / `[data-content-footer]` rules in `admin-shell.templates.css` are gone. ADR-0024 retired the legacy JS-level reads in v0.4.0; the CSS bridges remained as a soft-deprecation through v0.6.x, and the v0.6.12 dogfooding sweep eliminated the last in-tree consumers. External-consumer audit at the v0.6.12 cut found zero usage of the legacy shape under `<admin-shell>` across the 4 known external projects (`claims-ui-v3`, `claims-ui-v2`, `claims-ui`, `color-app`) — patch-cut safe. Anyone outside that audit emitting `<main><header-ui>…<article data-content-root><div data-content-header>…</div></article></section-ui></main>` under `<admin-shell>` will need to migrate to the canonical 10-tag bespoke composition: `<admin-shell><admin-sidebar slot="leading">…</admin-sidebar><admin-content><admin-topbar>…</admin-topbar><admin-scroll><admin-page><admin-page-header><header>…</header></admin-page-header><admin-page-body><section>…</section></admin-page-body></admin-page></admin-scroll><admin-statusbar>…</admin-statusbar></admin-content></admin-shell>`. A future `adia-ui-kit` skill cut will ship an AST codemod for static-HTML migration.
+
+### Substrate completion
+- `admin-shell.bespoke.css` — completed missing slot-vocab properties on `:is(admin-topbar, admin-statusbar) > [slot="action"]` (added `display:flex`, `gap`, `align-items`, `flex-shrink` to handle multi-child action clusters). Added `scrollbar-width: none` to `<admin-scroll>`. Added `min-height: 0; width: 100%; box-sizing: border-box` to `<admin-page-body>`. Without these completions, stripping the legacy main.css rules would have lost cluster layout in multi-child topbar/statusbar slots.
+
+### Verification
+- `verify:no-legacy-shell-shapes` regression guard exits 0 (added + wired into omnibus `check` in v0.6.12).
+- Playground + site geometry pixel-identical pre/post strip across all 232 doc-template routes.
+- `smoke:consumers` 6/6, `smoke:engines` green, `smoke:register-engine` 11/11, `verify:traits` 56/56 clean, `eval:diff --engine zettel` cov=49% / avg=90 (baseline-identical).
+- 4 external consumer projects (`claims-ui-v3`, `claims-ui-v2`, `claims-ui`, `color-app`) audited — zero legacy-shape usage, no migration debt below the lockstep.
+
 ## [0.6.11] — 2026-05-20
 
 ### Maintenance

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.6.11",
+  "version": "0.6.13",
   "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

@@ -1,16 +1,20 @@
 /* ═══════════════════════════════════════════════════════════════
    admin-shell — Bespoke shell-tier children (canonical since v0.4.0)
 
-   Per ADR-0023 + ADR-0024 (Phase 3 deprecation, v0.4.0), this file
-   carries the canonical styling for the bespoke shell-tier children:
+   Per ADR-0023 + ADR-0024 (host-element legacy reads stripped v0.4.0)
+   + ADR-0032 (CSS bridges stripped v0.6.12), this file carries the
+   canonical styling for the bespoke shell-tier children:
    admin-content, admin-topbar, admin-statusbar, admin-scroll,
    admin-page, admin-page-header, admin-page-body, admin-sidebar.
 
    The legacy raw-HTML shape (<main>, <header>, <footer>, <aside-ui slot>,
-   <aside data-sidebar>, <dialog data-command>) was retired in v0.4.0;
-   the existing :is() lifts in layered files (main.css, sidebar.css,
-   templates.css) target ONLY the bespoke tags now. See git history
-   prior to v0.4.0 for the legacy paths.
+   <aside data-sidebar>, <dialog data-command>, [data-content-root],
+   [data-content-header], [data-content-body], [data-content-footer])
+   was the v0.3.x authoring contract. JS-level reads were retired in
+   v0.4.0; CSS bridges in main.css, templates.css, collapsed.css and
+   site/site.css were retired in v0.6.12 (see ADR-0032). All :is() lifts
+   in layered files now target ONLY the bespoke tags. See git history
+   prior to v0.6.12 for the legacy paths.
    ═══════════════════════════════════════════════════════════════ */
 
 /* ── admin-content ≡ <main> ── */
@@ -58,6 +62,7 @@ admin-content > admin-scroll {
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-width: none;
   background: var(--page-content-bg);
   border-inline: var(--page-content-border);
   box-shadow: var(--page-content-shadow);
@@ -90,6 +95,9 @@ admin-page > admin-page-header {
 /* ── admin-page-body ≡ <[data-content-body]> centered body ── */
 admin-page > admin-page-body {
   flex: 1;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
 }
@@ -192,3 +200,27 @@ admin-sidebar[collapsed] {
   color: var(--page-header-fg-muted);
   font-size: var(--a-ui-sm);
 }
+
+/* Multi-child action clusters: turn the slot into a flex row so nested
+   buttons gap correctly. Legacy <main> > <header> > [slot="action"]
+   got this from main.css; the equivalent for the bespoke topbar/
+   statusbar lives here. */
+:is(admin-topbar, admin-statusbar) > [slot="action"],
+:is(admin-topbar, admin-statusbar) > [slot="action-leading"] {
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-gap);
+  flex-shrink: 0;
+}
+
+/* Second + Nth [slot="action"] children: reset the auto-push from
+   :first-of-type so siblings sit flush against the first cluster. */
+:is(admin-topbar, admin-statusbar) > [slot="action"] ~ [slot="action"] {
+  margin-inline-start: 0;
+}
+
+/* Slot icon: flex inner alignment (legacy parity). */
+:is(admin-topbar, admin-statusbar) > [slot="icon"] {
+  display: flex;
+  align-items: center;
+}

package/shell/admin-shell/css/admin-shell.collapsed.css

@@ -13,7 +13,7 @@
 
 @container sidebar (max-width: 96px) {
   /* Center header/footer content */
-  :is(header, header-ui, footer, footer-ui) {
+  :is(admin-topbar, admin-statusbar) {
     justify-content: center;
     padding: var(--page-sidebar-px);
   }

package/shell/admin-shell/css/admin-shell.main.css

@@ -1,143 +1,67 @@
 /* ═══════════════════════════════════════════════════════════════
-   App Shell — Main column (topbar + scroll + footer)
-
-   Authoring shapes (both styled identically):
-     - Legacy: <main><header>…</header><section>…</section><footer>…</footer></main>
-     - Slot vocabulary: <main><header-ui>…</header-ui><section-ui>…</section-ui><footer-ui>…</footer-ui></main>
-
-   <main> stays as the main column container in both shapes. Slot
-   primitives (header-ui / section-ui / footer-ui) are accepted as
-   the chrome children alongside their raw-HTML counterparts.
+   App Shell — Main column layout helpers
+
+   Post-ADR-0032 (v0.6.12): the legacy <main> / <header-ui> / <section-ui>
+   / <footer-ui> selector lifts that lived here have been retired. The
+   canonical bespoke <admin-content> / <admin-topbar> / <admin-scroll> /
+   <admin-statusbar> geometry + slot vocabulary live in
+   admin-shell.bespoke.css.
+
+   What stays in this file:
+     • Edge-breathing-room :has() probes — they're cross-cutting (they
+       inspect both admin-shell-level chrome AND admin-content-level
+       chrome), so they don't belong in bespoke.css's pure-tag-keyed
+       rule blocks.
+     • <admin-scroll> WebKit scrollbar suppression sibling rule.
+     • Subnav rail grid layout — descendant-of-admin-scroll behavior
+       that's authored alongside the breathing-room logic.
    ═══════════════════════════════════════════════════════════════ */
 
-/* ── Main column ── */
-admin-shell > main {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  border-inline: var(--page-main-border);
-}
-
 /* ── Edge breathing room when adjacent chrome is absent ──
    When the shell has no visible chrome on a given edge of the content
-   surface, `> main > :is(section, section-ui)` owns a small inset
-   against that edge so the rounded/elevated surface doesn't sit flush
-   with the viewport. The `:has(... :not([hidden]))` probe catches
-   both "element missing from the DOM" AND "element present but
-   [hidden]" — toggling [hidden] flips the inset live with no JS
-   coordination. Scope is the section, not main, so the topbar /
-   statusbar inside main keep spanning full-width even when the
-   section gets its inset.
-
-   Block-edge probes accept either an app-level chrome bar
-   (`admin-shell > :is(header, header-ui)` / `> :is(footer, footer-ui)`)
-   OR a main-level chrome bar (`> main > :is(header, header-ui)` etc.).
-   Either qualifies as "chrome present" and suppresses the
-   corresponding margin. */
-admin-shell:not(:has(> :is(asideadmin-sidebar[slot="trailing"], admin-sidebar[slot="trailing"]):not([hidden]))) > main > :is(section, section-ui) {
+   surface, `<admin-scroll>` owns a small inset against that edge so
+   the rounded/elevated surface doesn't sit flush with the viewport.
+   The `:has(... :not([hidden]))` probe catches both "element missing
+   from the DOM" AND "element present but [hidden]" — toggling [hidden]
+   flips the inset live with no JS coordination. Scope is the scroll
+   container, not admin-content, so the topbar / statusbar inside
+   admin-content keep spanning full-width even when the scroll surface
+   gets its inset. */
+admin-shell:not(:has(> :is(asideadmin-sidebar[slot="trailing"], admin-sidebar[slot="trailing"]):not([hidden]))) > admin-content > admin-scroll {
   margin-inline-end: var(--a-space-2);
 }
-admin-shell:not(:has(> :is(header, header-ui):not([hidden]), > main > :is(header, header-ui):not([hidden]))) > main > :is(section, section-ui) {
+admin-shell:not(:has(> :is(header, header-ui, admin-topbar):not([hidden]), > admin-content > admin-topbar:not([hidden]))) > admin-content > admin-scroll {
   margin-block-start: var(--a-space-2);
 }
-admin-shell:not(:has(> :is(footer, footer-ui):not([hidden]), > main > :is(footer, footer-ui):not([hidden]))) > main > :is(section, section-ui) {
+admin-shell:not(:has(> :is(footer, footer-ui, admin-statusbar):not([hidden]), > admin-content > admin-statusbar:not([hidden]))) > admin-content > admin-scroll {
   margin-block-end: var(--a-space-2);
 }
 
-/* ── Main > header (topbar) ──
-   Contains: sidebar toggle, breadcrumb, spacer, action buttons.
-
-   Slot contract (shared with > main > footer and admin-sidebar >
-   header/footer) — identical to card-ui / drawer-ui / editor-shell:
-     [slot="icon"]        leading glyph
-     [slot="heading"]     primary label; strong weight + strong fg
-     [slot="description"] secondary metadata; muted fg + --a-ui-sm
-     [slot="action"]      trailing cluster; first pushes to end
-   The legacy data-sidebar-toggle / breadcrumb-ui / <span data-spacer>
-   / <div data-actions> hooks (see app-shell.helpers.css) remain
-   fully supported — slots are additive, not a replacement. Use slots
-   for simpler chrome surfaces; keep breadcrumb + data-actions for
-   docs-style shells where those conventions carry semantic weight. */
-admin-shell > main > :is(header, header-ui) {
-  display: flex;
-  align-items: center;
-  gap: var(--page-header-gap);
-  min-height: var(--page-header-height);
-  padding: 0 var(--page-header-px);
-  border-bottom: var(--page-border);
-  font-size: var(--page-header-font);
-  flex-shrink: 0;
-}
-
-admin-shell > main > :is(header, header-ui) > [slot="icon"] {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--page-header-fg-muted);
-}
-admin-shell > main > :is(header, header-ui) > [slot="heading"] {
-  font-weight: var(--a-weight-medium);
-  color: var(--a-fg);
-}
-admin-shell > main > :is(header, header-ui) > [slot="description"] {
-  color: var(--page-header-fg-muted);
-  font-size: var(--a-ui-sm);
-}
-admin-shell > main > :is(header, header-ui) > [slot="action"] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-admin-shell > main > :is(header, header-ui) > [slot="action"] ~ [slot="action"] {
-  margin-inline-start: 0;
-}
-/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
-admin-shell > main > :is(header, header-ui) > [slot="action-leading"] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-  flex-shrink: 0;
-  margin-inline-end: auto;
-}
-
-/* ── Main > section (scroll container) ──
-   Wraps [data-content-root]. Scrolls vertically, hides scrollbar.
-   Soft elevation via --page-content-shadow (defaults to --a-shadow-md)
-   so the content surface lifts off the chrome canvas regardless of
-   mode — pairs with --page-content-radius under "rounded" and stays
-   visible under "borderless". */
-admin-shell > main > :is(section, section-ui) {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: none;
-  background: var(--page-content-bg);
-  box-shadow: var(--page-content-shadow);
-}
-
-admin-shell > main > :is(section, section-ui)::-webkit-scrollbar { display: none; }
+/* ── Scroll container ──
+   Canonical styling for `<admin-scroll>` (flex, scrollbar suppression,
+   background, content shadow) lives in admin-shell.bespoke.css.
+   --page-content-shadow defaults to --a-shadow-md so the content
+   surface lifts off the chrome canvas regardless of mode — pairs with
+   --page-content-radius under "rounded" and stays visible under
+   "borderless". */
+admin-shell > admin-content > admin-scroll::-webkit-scrollbar { display: none; }
 
 /* ── Subnav rail layout ──
-   When the main section contains an `[data-subnav]` aside (the
-   left-rail nav pattern — `<aside data-subnav>` followed by the
-   `[data-content-root]` article), grid-layout the section so the
-   rail sits on the inline-start side and the content fills the
-   rest. Mirrors the docs-site convention (site.css `:has(#subnav-rail)`)
-   so consumer apps using admin-shell + the subnav-rail authoring
-   shape get the canonical layout for free. */
-admin-shell > main > :is(section, section-ui):has(> [data-subnav]:not([hidden])) {
+   When admin-scroll contains an `[data-subnav]` aside (the left-rail
+   nav pattern — `<aside data-subnav>` followed by the `<admin-page>`
+   article), grid-layout the scroll container so the rail sits on the
+   inline-start side and the content fills the rest. Mirrors the
+   docs-site convention (site.css `:has(#subnav-rail)`) so consumer
+   apps using admin-shell + the subnav-rail authoring shape get the
+   canonical layout for free. */
+admin-shell > admin-content > admin-scroll:has(> [data-subnav]:not([hidden])) {
   display: grid;
   grid-template-columns: var(--subnav-width, 14rem) 1fr;
   grid-template-rows: minmax(0, 1fr);
   gap: 0;
 }
 
-admin-shell > main > :is(section, section-ui) > [data-subnav] {
+admin-shell > admin-content > admin-scroll > [data-subnav] {
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -148,70 +72,11 @@ admin-shell > main > :is(section, section-ui) > [data-subnav] {
 
 /* Mobile: collapse to single column; subnav stacks above content. */
 @container (max-width: 40rem) {
-  admin-shell > main > :is(section, section-ui):has(> [data-subnav]:not([hidden])) {
+  admin-shell > admin-content > admin-scroll:has(> [data-subnav]:not([hidden])) {
     grid-template-columns: 1fr;
   }
-  admin-shell > main > :is(section, section-ui) > [data-subnav] {
+  admin-shell > admin-content > admin-scroll > [data-subnav] {
     border-inline-end: none;
     border-block-end: 1px solid var(--a-border-subtle);
   }
 }
-
-/* ── Main > footer (status bar) ──
-   Legacy pattern: last-child auto-pushed to trailing edge via
-   margin-inline-start: auto (works when authors use a simple
-   <span>…</span><span>version</span> shape).
-   Slot pattern: same icon / heading / description / action vocabulary
-   as > main > header (see comment block above). */
-admin-shell > main > :is(footer, footer-ui) {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  margin-top: auto;
-  gap: var(--page-header-gap);
-  min-height: var(--page-header-height);
-  padding: 0 var(--page-header-px);
-  border-top: var(--page-border);
-  font-size: var(--page-header-font);
-  color: var(--page-header-fg-muted);
-}
-
-/* Legacy: bare <span>…</span><span>version</span> shapes. Only kicks
-   in when NO slot="action" is present, so it doesn't fight the slot
-   rule below. */
-admin-shell > main > :is(footer, footer-ui):not(:has(> [slot="action"])) > :last-child {
-  margin-inline-start: auto;
-}
-
-admin-shell > main > :is(footer, footer-ui) > [slot="icon"] {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--page-header-fg-muted);
-}
-admin-shell > main > :is(footer, footer-ui) > [slot="heading"] {
-  font-weight: var(--a-weight-medium);
-  color: var(--a-fg);
-}
-admin-shell > main > :is(footer, footer-ui) > [slot="description"] {
-  color: var(--page-header-fg-muted);
-  font-size: var(--a-ui-sm);
-}
-admin-shell > main > :is(footer, footer-ui) > [slot="action"] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-admin-shell > main > :is(footer, footer-ui) > [slot="action"] ~ [slot="action"] {
-  margin-inline-start: 0;
-}
-/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
-admin-shell > main > :is(footer, footer-ui) > [slot="action-leading"] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-  flex-shrink: 0;
-  margin-inline-end: auto;
-}

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

@@ -1,32 +1,27 @@
 /* ═══════════════════════════════════════════════════════════════
    App Shell — Root layout + modes
 
-   Structure (legacy raw-HTML form; slot-vocabulary equivalents in parens):
-     admin-shell                                                       — root shell (flex row, fixed viewport)
-       asideadmin-sidebar[slot="leading"]   (or admin-sidebar[slot="leading"])    — nav sidebar (resizable, collapsible)
-       main                                                             — center column (topbar + scroll + footer)
-         header                        (or header-ui)                   — topbar
-         section                       (or section-ui)                  — scroll container
-           article[data-content-root]                                   — page wrapper (sticky bands + centered body)
-             div[data-content-header] > header                          — sticky page title + tabs
-             div[data-content-body] > section                           — centered reading column
-         footer                        (or footer-ui)                   — status bar
-       asideadmin-sidebar[slot="trailing"]  (or admin-sidebar[slot="trailing"])   — inspector sidebar
-       dialog[data-command]                                             — command palette
+   Structure (canonical bespoke shape, post-ADR-0032 v0.6.12):
+     admin-shell                                                   — root shell (flex row, fixed viewport)
+       admin-sidebar[slot="leading"]                               — nav sidebar (resizable, collapsible)
+       admin-content                                               — center column (topbar + scroll + statusbar)
+         admin-topbar                                              — topbar
+         admin-scroll                                              — scroll container
+           admin-page                                              — page wrapper (sticky bands + centered body)
+             admin-page-header > header                            — sticky page title + tabs
+             admin-page-body > section                             — centered reading column
+         admin-statusbar                                           — status bar
+       admin-sidebar[slot="trailing"]                              — inspector sidebar
+       admin-command                                               — command palette
 
-   Both authoring shapes are valid simultaneously. The CSS uses
-   :is(legacy, slot-ui) lifts so raw-HTML and slot-primitive
-   composers render identically.
+  Modes (space-separated on mode attribute):
+    "rounded"    — border-radius on scroll section
+    "borderless" — removes chrome borders (content borders persist)
+  ═══════════════════════════════════════════════════════════════ */
 
-   Modes (space-separated on mode attribute):
-     "rounded"    — border-radius on scroll section
-     "borderless" — removes chrome borders (content borders persist)
-   ═══════════════════════════════════════════════════════════════ */
-
-/* ── Page modes ── */
-admin-shell[mode~="rounded"] > main > :is(section, section-ui) {
-  border-radius: var(--page-content-radius);
-}
+/* ── Page modes ──
+   Rounded-mode border-radius for the scroll container lives in
+   admin-shell.bespoke.css (`admin-shell[mode~="rounded"] > admin-content > admin-scroll`). */
 
 admin-shell[mode~="borderless"] {
   --page-main-border: none;

package/shell/admin-shell/css/admin-shell.templates.css

@@ -1,106 +1,65 @@
 /* ═══════════════════════════════════════════════════════════════
    admin-shell — Page templates (headers, body layouts, form sections)
 
-   Structure:
-     <article data-content-root>
-       [data-content-header]   — sticky top band, border-bottom
-         <header>...</header>  — centered column (padding + max-width)
-       [data-content-body]     — scrollable flex column (size only)
-         <section>...</section> — centered column (padding + max-width + gap)
-       [data-content-footer]   — sticky bottom band, border-top
-         <footer>...</footer>  — centered column (padding + max-width)
-
-   The outer `[data-*]` wrapper owns full-width concerns (sticky
-   position, border, background, scroll sizing). The inner semantic
-   element (<header>/<section>/<footer>) owns the centered reading
-   column (max-width, gutter, rhythm). Full-bleed content (iframes,
-   split panes) can skip <section> and sit directly in
-   [data-content-body] to opt out of the column.
+   Structure (post-ADR-0032, v0.6.12):
+     <admin-page>
+       <admin-page-header>          — sticky top band, border-bottom
+         <header>...</header>       — centered column (padding + max-width)
+       <admin-page-body>            — scrollable flex column (size only)
+         <section>...</section>     — centered column (padding + max-width + gap)
+
+   The bespoke wrapper owns full-width concerns (sticky position, border,
+   background, scroll sizing) — see admin-shell.bespoke.css for those
+   rules. The inner semantic element (<header>/<section>) owns the
+   centered reading column (max-width, gutter, rhythm) — that's what
+   this file covers. Full-bleed content (iframes, split panes) can skip
+   <section> and sit directly in <admin-page-body> to opt out of the
+   column.
+
+   Note: pre-v0.6.12 legacy attribute hooks (data-content-root,
+   data-content-header, data-content-body, data-content-footer) were
+   retired in ADR-0032. See git history prior to v0.6.12 for the legacy
+   selector lists.
    ═══════════════════════════════════════════════════════════════ */
 
-/* ── Content root ──
-   `<article data-content-root>` provides an inline-size query container
-   named `page-content` so descendants can adapt to the *available content
-   width* (sidebars expanded vs collapsed) instead of the viewport.
-
-   Breakpoint scale (mirrored in `:where(admin-shell) { --page-content-bp-* }`):
-     sm   480px   — phone / very narrow rail
-     md   720px   — tablet / 2-col → 1-col flip for [data-section]
-     lg  1024px   — wide content (no current rule; reserved)
-   Container queries can't read custom properties as thresholds, so the
-   numbers below are duplicated — keep them in lockstep with the tokens. */
-[data-content-root] {
-  position: relative;
-  isolation: isolate;
-  min-block-size: 100%;
-  container-type: inline-size;
-  container-name: page-content;
-}
-
-/* Fill-mode: when the body contains only an iframe (or explicit opt-in),
-   make the root a flex column that stretches to the scroll section's
-   visible height, so [data-content-body] flex: 1 resolves against a real
-   size and the iframe's block-size: 100% can fill. Prose pages (natural
-   root height + section scroll) are unaffected. */
-[data-content-root]:has(> [data-content-body] > iframe:only-child),
-[data-content-root][data-fill] {
-  display: flex;
-  flex-direction: column;
-  block-size: 100%;
-  min-block-size: 0;
-}
-
 /* ── Scaffold content columns ─────────────────────────────────────
    Max-width + centering + horizontal inset are properties of the
-   NAMED inner semantic elements, not the [data-*] wrappers.
+   NAMED inner semantic elements, not the bespoke wrappers.
 
    Who owns what:
-     • [data-content-header] / [data-content-footer]
-         — own sticky position, border, background (full-width band).
-     • [data-content-body]
-         — owns flex sizing + scroll; no padding, no max-width.
-     • Inner <header> / <section> / <footer>
-         — own max-width, margin-inline: auto, padding (centered column).
+     • <admin-page-header>
+         — sticky position, border, background (see bespoke.css).
+     • <admin-page-body>
+         — flex sizing + scroll; no padding, no max-width (see bespoke.css).
+     • Inner <header> / <section>
+         — max-width, margin-inline: auto, padding (centered column).
      • Cards / modals / drawers
          — own margin/padding via their own CSS; never inherit this.
    ─────────────────────────────────────────────────────────────── */
-[data-content-header] > :is(header, header-ui),
-[data-content-body] > :is(section, section-ui),
-[data-content-footer] > :is(footer, footer-ui) {
+admin-page-header > :is(header, header-ui),
+admin-page-body > :is(section, section-ui) {
   max-width: var(--page-content-max-width);
   margin-inline: auto;
   width: 100%;
   box-sizing: border-box;
 }
 
-[data-content-header] > :is(header, header-ui),
-[data-content-footer] > :is(footer, footer-ui) {
+admin-page-header > :is(header, header-ui) {
   padding-inline: var(--page-content-inset);
 }
 
-/* Full-width escape hatch — stretch the centered column to 100%. */
-[data-content-full] [data-content-header] > :is(header, header-ui),
-[data-content-full] [data-content-body] > :is(section, section-ui),
-[data-content-full] [data-content-footer] > :is(footer, footer-ui),
-[data-content-header][data-content-full] > :is(header, header-ui),
-[data-content-body][data-content-full] > :is(section, section-ui),
-[data-content-footer][data-content-full] > :is(footer, footer-ui),
-[data-content-header] > :is(header, header-ui)[data-content-full],
-[data-content-body] > :is(section, section-ui)[data-content-full],
-[data-content-footer] > :is(footer, footer-ui)[data-content-full] {
+/* Full-width escape hatch — stretch the centered column to 100%.
+   [data-content-full] can land on the bespoke wrapper or its inner
+   semantic element. */
+admin-page-header[data-content-full] > :is(header, header-ui),
+admin-page-body[data-content-full] > :is(section, section-ui),
+admin-page-header > :is(header, header-ui)[data-content-full],
+admin-page-body > :is(section, section-ui)[data-content-full] {
   max-width: 100%;
 }
 
-/* ── Content header — sticky top, border-bottom ── */
-[data-content-header] {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  border-bottom: var(--page-content-border);
-  background: var(--page-content-bg);
-}
-
-[data-content-header] > :is(header, header-ui) {
+/* ── Content header inner layout ── */
+admin-page-header > :is(header, header-ui) {
   display: flex;
   flex-direction: column;
   gap: var(--page-header-gap);
@@ -108,24 +67,24 @@
 }
 
 /* When tabs are present, remove bottom padding so tabs sit flush against border */
-[data-content-header] > :is(header, header-ui):has(tabs-ui) {
+admin-page-header > :is(header, header-ui):has(tabs-ui) {
   padding-bottom: 0;
 }
 
 /* Variant: non-sticky, no border, transparent bg */
-[data-content-header]:has(> :is(header, header-ui)[data-flush]) {
+admin-page-header:has(> :is(header, header-ui)[data-flush]) {
   position: static;
   border-bottom: none;
   background: none;
 }
 
 /* Variant: compact padding (for dense headers) */
-[data-content-header] > :is(header, header-ui)[data-compact] {
+admin-page-header > :is(header, header-ui)[data-compact] {
   padding-block: var(--page-header-px);
 }
 
 /* Title row: h1 left, actions right */
-[data-content-header] > :is(header, header-ui) > div:first-child {
+admin-page-header > :is(header, header-ui) > div:first-child {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -133,27 +92,20 @@
 }
 
 /* h1 + description — typography handled by [variant] attribute */
-[data-content-header] h1 { margin: 0; }
-[data-content-header] > :is(header, header-ui) > p { margin: 0; }
+admin-page-header h1 { margin: 0; }
+admin-page-header > :is(header, header-ui) > p { margin: 0; }
 
-/* ── Content body ──
+/* ── Content body — flex column inner layout ──
    Wrapper: flex column that fills the scroll section. No padding,
    no max-width — those live on the inner <section>. Non-section
-   children (iframes, split panes) go full-bleed. */
-[data-content-body] {
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-}
+   children (iframes, split panes) go full-bleed.
+   (Wrapper geometry — flex, min-height, width — lives in bespoke.css.) */
 
 /* Inner <section> (or <section-ui>) — the centered reading column.
    Owns gutter and section-to-section rhythm. Stacks with flex gap
    so direct children (<card-ui>, <grid-ui>, nested <section>, …)
    have zero wrapper margin. */
-[data-content-body] > :is(section, section-ui) {
+admin-page-body > :is(section, section-ui) {
   padding: var(--page-content-inset);
   display: flex;
   flex-direction: column;
@@ -162,7 +114,7 @@
 
 /* iframe-as-page-content: fill the body.
    display: block kills the 4-5px inline-descender gap. */
-[data-content-body] > iframe {
+admin-page-body > iframe {
   display: block;
   inline-size: 100%;
   block-size: 100%;
@@ -170,19 +122,6 @@
   flex: 1;
 }
 
-/* ── Content footer — sticky bottom, border-top ── */
-[data-content-footer] {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-  border-top: var(--page-content-border);
-  background: var(--page-content-bg);
-}
-
-[data-content-footer] > footer {
-  padding: var(--page-content-inset);
-}
-
 /* ── Tab content ──
    Marker for the active tab's form sections. Gutter/padding is
    owned by the <article> wrapper. */
@@ -239,12 +178,11 @@
 
 /* Tighten the content gutter when the article is genuinely narrow. */
 @container page-content (max-width: 480px) {
-  [data-content-header] > :is(header, header-ui),
-  [data-content-body] > :is(section, section-ui),
-  [data-content-footer] > :is(footer, footer-ui) {
+  admin-page-header > :is(header, header-ui),
+  admin-page-body > :is(section, section-ui) {
     padding-inline: var(--a-space-4);
   }
-  [data-content-body] > :is(section, section-ui) {
+  admin-page-body > :is(section, section-ui) {
     padding-block: var(--a-space-4);
   }
 }

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

@@ -44,7 +44,7 @@
   --page-content-border:    1px solid var(--a-border-subtle); /* content dividers (persists in "borderless") */
   --page-content-shadow:    var(--a-shadow-sm);      /* soft lift on the content surface */
 
-  /* Content breakpoint scale — `[data-content-root]` is a `page-content`
+  /* Content breakpoint scale — `<admin-page>` is a `page-content`
      container query provider (admin-shell.templates.css). These tokens
      are the documented thresholds; @container queries can't read custom
      properties for thresholds, so the numbers are duplicated in CSS. */