@adia-ai/web-modules 0.3.5 → 0.4.0

package/editor/editor-toolbar/editor-toolbar.test.js

@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import '../../../web-components/core/element.js';
+import './editor-toolbar.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('editor-toolbar', () => {
+  it('registers editor-toolbar as a custom element', () => {
+    expect(customElements.get('editor-toolbar')).toBeDefined();
+  });
+
+  it('defaults to fullScreen=false', () => {
+    const t = mount('<editor-toolbar></editor-toolbar>');
+    expect(t.fullScreen).toBe(false);
+  });
+
+  it('reflects [full-screen] via property assignment', async () => {
+    const t = mount('<editor-toolbar></editor-toolbar>');
+    t.fullScreen = true;
+    await tick();
+    expect(t.hasAttribute('full-screen')).toBe(true);
+  });
+
+  it('honors initial [full-screen] attribute on connect', () => {
+    const t = mount('<editor-toolbar full-screen></editor-toolbar>');
+    expect(t.fullScreen).toBe(true);
+  });
+
+  it('bubbles toolbar-action event from [data-toolbar-action] children', async () => {
+    const wrap = document.createElement('div');
+    wrap.innerHTML = `<editor-toolbar>
+      <button data-toolbar-action="save">Save</button>
+      <button data-toolbar-action="undo">Undo</button>
+    </editor-toolbar>`;
+    document.body.appendChild(wrap);
+    const toolbar = wrap.firstElementChild;
+    const saveBtn = toolbar.querySelector('[data-toolbar-action="save"]');
+
+    const onAction = vi.fn();
+    toolbar.addEventListener('toolbar-action', onAction);
+
+    saveBtn.click();
+    await tick();
+
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(onAction.mock.calls[0][0].detail).toEqual({ name: 'save' });
+  });
+
+  it('does not fire toolbar-action for clicks outside [data-toolbar-action]', async () => {
+    const wrap = document.createElement('div');
+    wrap.innerHTML = `<editor-toolbar>
+      <span>Title</span>
+      <button>Plain button</button>
+    </editor-toolbar>`;
+    document.body.appendChild(wrap);
+    const toolbar = wrap.firstElementChild;
+    const plainBtn = toolbar.querySelector('button');
+
+    const onAction = vi.fn();
+    toolbar.addEventListener('toolbar-action', onAction);
+
+    plainBtn.click();
+    await tick();
+
+    expect(onAction).not.toHaveBeenCalled();
+  });
+
+  it('cleanup on disconnect — removes click listener', () => {
+    const t = mount('<editor-toolbar></editor-toolbar>');
+    const removeSpy = vi.spyOn(t, 'removeEventListener');
+    t.remove();
+    const removedTypes = removeSpy.mock.calls.map((args) => args[0]);
+    expect(removedTypes).toContain('click');
+  });
+
+  it('event bubbles up beyond the toolbar', async () => {
+    const outer = document.createElement('div');
+    document.body.appendChild(outer);
+    outer.innerHTML = `<editor-toolbar>
+      <button data-toolbar-action="settings"></button>
+    </editor-toolbar>`;
+    const onOuterAction = vi.fn();
+    outer.addEventListener('toolbar-action', onOuterAction);
+    outer.querySelector('button').click();
+    await tick();
+    expect(onOuterAction).toHaveBeenCalled();
+  });
+});

package/editor/editor-toolbar/editor-toolbar.yaml

@@ -0,0 +1,81 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: EditorToolbar
+tag: editor-toolbar
+component: EditorToolbar
+category: layout
+version: 1
+description: |
+  Module-tier editor toolbar — replaces legacy <header> chrome bar
+  inside <editor-shell> per ADR-0023. Owns the [full-screen] reflected
+  attribute (set when host enters focus mode), click-bubble for
+  [data-toolbar-action] buttons, and slot vocabulary routing.
+
+  Sits at the top of <editor-shell>. Authors compose actions + status
+  via slot vocabulary. The host (<editor-shell>) reads either
+  <editor-toolbar> or <header> via :is() selector for backwards compat.
+
+props:
+  fullScreen:
+    description: Reflected — set when editor is in distraction-free / focus mode.
+    type: boolean
+    default: false
+    reflect: true
+    attribute: full-screen
+
+events:
+  toolbar-action:
+    description: >-
+      Bubbles when a child element with [data-toolbar-action] is clicked.
+      Detail carries the action name from the clicked element's attribute.
+    detail:
+      name: string
+
+slots:
+  default:
+    description: Default — ad-hoc inline content (legacy positional layout).
+  title:
+    description: Editor / document title cluster.
+  status:
+    description: Status indicator (saving, dirty, synced, etc.).
+  action:
+    description: Trailing action cluster (settings, share, more).
+  action-leading:
+    description: Leading action cluster (back, switcher, undo/redo).
+
+states:
+  - name: idle
+    description: Default editor mode.
+  - name: full-screen
+    attribute: full-screen
+    description: Distraction-free / focus mode active.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      editor-toolbar replaces legacy <header> chrome bar inside
+      <editor-shell>. Use named slots (title / status / action /
+      action-leading) for canonical clusters; ad-hoc inline content
+      goes in the default slot.
+    - >-
+      Buttons that should trigger named actions get
+      [data-toolbar-action="<name>"]. The toolbar bubbles a single
+      'toolbar-action' event up to the host with the name in detail.
+
+keywords:
+  - editor-toolbar
+  - editor-titlebar
+  - editor-chrome
+  - app-header
+  - editor-actions
+
+synonyms:
+  editor-toolbar: [editor-header, app-header, navbar, titlebar]
+
+related:
+  - EditorShell
+  - EditorCanvas
+  - EditorSidebar
+  - EditorStatusbar

package/editor/index.js

@@ -1 +1,4 @@
 export { EditorShell } from './editor-shell/editor-shell.js';
+export { EditorToolbar } from './editor-toolbar/editor-toolbar.js';
+export { EditorCanvas } from './editor-canvas/editor-canvas.js';
+export { EditorSidebar } from './editor-sidebar/editor-sidebar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "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": {
@@ -33,9 +33,9 @@
     "./runtime/**/*.js"
   ],
   "peerDependencies": {
-    "@adia-ai/web-components": "^0.3.0",
-    "@adia-ai/a2ui-runtime": "^0.3.0",
-    "@adia-ai/llm": "^0.3.0"
+    "@adia-ai/web-components": "^0.4.0",
+    "@adia-ai/a2ui-runtime": "^0.4.0",
+    "@adia-ai/llm": "^0.4.0"
   },
   "publishConfig": {
     "access": "public",

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

@@ -7,25 +7,21 @@
  * </admin-shell>
  *
  * Module-tier app shell. Coordinates bespoke shell-tier children;
- * does NOT centralize their behavior. Each child owns its own
- * concern (resize/collapse on <admin-sidebar>, palette wiring on
- * <admin-command>).
+ * does NOT centralize their behavior. Each child owns its own concern
+ * (resize/collapse on <admin-sidebar>, palette wiring on <admin-command>).
  *
- * Backwards compatibility: legacy authoring shapes still work —
- * <aside data-sidebar="leading"> and <dialog data-command> are
- * recognized + wired the same as their bespoke equivalents. Mixed
- * markup (some bespoke, some legacy) renders identically. See
- * ADR-0023 for the migration window.
+ * **Bespoke-only since v0.4.0** (ADR-0023 Phase 3 + ADR-0024). The
+ * legacy authoring shapes (`<aside data-sidebar>`, `<dialog data-command>`,
+ * `[data-resize]`, `<aside-ui slot>`) are no longer recognized — consumers
+ * MUST use the bespoke vocabulary. The v0.3.x line carried backwards
+ * compat reads; see git history for the legacy paths.
  *
  * Host responsibilities (the only behavior that stays here):
  *   1. [mode] reflection — "rounded", "borderless", or both
- *   2. [data-sidebar-toggle="leading|trailing"] click forwarding to
- *      the matching sidebar's .toggle() (works for bespoke + legacy)
- *   3. [data-command-trigger] click forwarding to the inner palette's
- *      .show() (works for bespoke + legacy)
- *   4. Re-emit child events as host events for backwards compat
- *      (sidebar-toggle, sidebar-resize, command-select all bubble
- *      already, but consumers who listened on the host get them)
+ *   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()
+ *   4. command-select re-emit + nav routing when a <nav-ui> is present
  */
 
 import { UIElement } from '../../../web-components/core/element.js';
@@ -37,100 +33,49 @@ class AdminShell extends UIElement {
 
   static template = () => null;
 
-  #cmdKeyHandler = null;
-  #legacyResizeCleanups = [];
-  #legacySidebarRO = null;
-  #legacySidebarWidths = new Map();
-
   connected() {
     this.#wireToggleButtons();
     this.#wireCommandTriggers();
-    this.#setupLegacyShapes();
-  }
-
-  disconnected() {
-    for (const cleanup of this.#legacyResizeCleanups) cleanup();
-    this.#legacyResizeCleanups = [];
-    this.#legacySidebarRO?.disconnect();
-    this.#legacySidebarRO = null;
-    if (this.#cmdKeyHandler) {
-      document.removeEventListener('keydown', this.#cmdKeyHandler);
-      this.#cmdKeyHandler = null;
-    }
   }
 
-  // Selector that matches BOTH bespoke <admin-sidebar slot> AND legacy
-  // shapes. Used by toggle-button wiring + ResizeObserver setup.
-  static #SIDEBAR_SEL =
-    ':is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"], ' +
-    '[data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"])';
-
-  #sidebarName(el) {
-    return (
-      el.getAttribute('name') ??
-      el.getAttribute('data-sidebar') ??
-      el.getAttribute('slot')
-    );
-  }
+  // No #disconnected — children own their own cleanup; the host registers
+  // no document-level listeners and no observers. Element-level listeners
+  // are auto-cleaned when the element disconnects.
 
   #findSidebar(name) {
     return this.querySelector(
-      ':is(' +
-        `admin-sidebar[slot="${name}"], admin-sidebar[name="${name}"], ` +
-        `[data-sidebar="${name}"], aside-ui[slot="${name}"]` +
-      ')'
+      `admin-sidebar[slot="${name}"], admin-sidebar[name="${name}"]`
     );
   }
 
-  // ── 1. Toggle buttons — works for bespoke + legacy ──
+  // ── 1. Toggle buttons — forward clicks to <admin-sidebar>.toggle() ──
 
   #wireToggleButtons() {
     for (const btn of this.querySelectorAll('[data-sidebar-toggle]')) {
       const name = btn.getAttribute('data-sidebar-toggle');
       btn.addEventListener('click', () => {
         const sidebar = this.#findSidebar(name);
-        if (!sidebar) return;
-
-        // Bespoke <admin-sidebar> has a public toggle() method
-        if (typeof sidebar.toggle === 'function') {
-          sidebar.toggle();
-          return;
-        }
-
-        // Legacy: replicate the old in-place toggle on raw HTML
-        this.#legacyToggle(sidebar, name);
+        sidebar?.toggle?.();
       });
     }
   }
 
-  // ── 2. Command triggers — works for bespoke + legacy ──
+  // ── 2. Command triggers — forward clicks to <admin-command>.show() ──
 
   #wireCommandTriggers() {
     const command = this.querySelector('admin-command');
-    const legacyDialog = command ? null : this.querySelector('dialog[data-command]');
+    if (!command) return;
 
-    if (!command && !legacyDialog) return;
-
-    // Bespoke path: trigger calls .show() on <admin-command>
-    if (command) {
-      for (const trigger of this.querySelectorAll('[data-command-trigger]')) {
-        trigger.addEventListener('click', (e) => {
-          e.stopPropagation();
-          command.show();
-        });
-      }
-      // <admin-command> owns its own keyboard shortcut; nothing more
-      // for the host to wire. We DO re-listen for command-select to
-      // wire navigation if a <nav-ui> is present.
-      this.#wireCommandSelectToNav(command);
-      return;
+    for (const trigger of this.querySelectorAll('[data-command-trigger]')) {
+      trigger.addEventListener('click', (e) => {
+        e.stopPropagation();
+        command.show();
+      });
     }
 
-    // Legacy path: replicate the old wiring around <dialog data-command>
-    this.#wireLegacyCommand(legacyDialog);
-  }
-
-  #wireCommandSelectToNav(command) {
+    // <admin-command> owns its own Cmd+K listener. The host only wires
+    // command-select → nav routing if a <nav-ui> is present (so clicking
+    // a result in the palette navigates to that route).
     const nav = this.querySelector('nav-ui');
     if (!nav) return;
     command.addEventListener('command-select', (e) => {
@@ -138,167 +83,6 @@ class AdminShell extends UIElement {
       if (item) nav.select(item);
     });
   }
-
-  // ── 3. Legacy shape wiring (raw <aside data-sidebar>, <dialog data-command>) ──
-
-  #setupLegacyShapes() {
-    const legacySidebars = this.querySelectorAll(
-      ':is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"])'
-    );
-    if (legacySidebars.length === 0) return;
-
-    this.#restoreLegacyWidths(legacySidebars);
-    this.#setupLegacyResizeHandles(legacySidebars);
-    this.#setupLegacyResizeObserver(legacySidebars);
-  }
-
-  #restoreLegacyWidths(sidebars) {
-    for (const sidebar of sidebars) {
-      const name = this.#sidebarName(sidebar);
-      try {
-        const saved = localStorage.getItem(`adia-sidebar-${name}`);
-        if (saved) {
-          sidebar.style.width = saved;
-          const w = parseFloat(saved);
-          if (!isNaN(w) && w > 96) {
-            this.#legacySidebarWidths.set(name, saved);
-          }
-        }
-      } catch {}
-    }
-  }
-
-  #legacyToggle(sidebar, name) {
-    const isCollapsed = sidebar.getBoundingClientRect().width <= 96;
-    if (isCollapsed) {
-      const prev = this.#legacySidebarWidths.get(name);
-      sidebar.style.width = prev || '';
-      try { localStorage.setItem(`adia-sidebar-${name}`, prev || ''); } catch {}
-    } else {
-      this.#legacySidebarWidths.set(name, sidebar.style.width || getComputedStyle(sidebar).width);
-      const minW = getComputedStyle(sidebar).minWidth;
-      sidebar.style.width = minW;
-      try { localStorage.setItem(`adia-sidebar-${name}`, minW); } catch {}
-    }
-    this.dispatchEvent(new CustomEvent('sidebar-toggle', {
-      bubbles: true,
-      detail: { sidebar: name, name, expanded: !isCollapsed },
-    }));
-  }
-
-  #setupLegacyResizeHandles(sidebars) {
-    for (const sidebar of sidebars) {
-      const handle = sidebar.querySelector(':scope > [data-resize]');
-      if (!handle) continue;
-      const name = this.#sidebarName(sidebar);
-      const isLeading = name === 'leading';
-
-      const onPointerDown = (e) => {
-        e.preventDefault();
-        handle.setPointerCapture(e.pointerId);
-        const startX = e.clientX;
-        const startW = sidebar.getBoundingClientRect().width;
-        sidebar.setAttribute('data-resizing', '');
-        document.documentElement.style.cursor = 'col-resize';
-
-        const onMove = (e) => {
-          const dx = e.clientX - startX;
-          const max = parseInt(getComputedStyle(sidebar).getPropertyValue('max-width')) || 480;
-          const w = Math.max(48, Math.min(max, startW + (isLeading ? dx : -dx)));
-          sidebar.style.width = `${w}px`;
-        };
-
-        const onUp = () => {
-          sidebar.removeAttribute('data-resizing');
-          document.documentElement.style.cursor = '';
-          handle.removeEventListener('pointermove', onMove);
-          handle.removeEventListener('pointerup', onUp);
-
-          const w = sidebar.getBoundingClientRect().width;
-          if (w <= 96) {
-            sidebar.style.width = getComputedStyle(sidebar).minWidth;
-          } else if (w < 160) {
-            sidebar.style.width = '160px';
-          }
-          try { localStorage.setItem(`adia-sidebar-${name}`, sidebar.style.width); } catch {}
-
-          this.dispatchEvent(new CustomEvent('sidebar-resize', {
-            bubbles: true,
-            detail: { sidebar: name, name, width: sidebar.getBoundingClientRect().width },
-          }));
-        };
-
-        handle.addEventListener('pointermove', onMove);
-        handle.addEventListener('pointerup', onUp);
-      };
-
-      handle.addEventListener('pointerdown', onPointerDown);
-      this.#legacyResizeCleanups.push(() => handle.removeEventListener('pointerdown', onPointerDown));
-    }
-  }
-
-  #setupLegacyResizeObserver(sidebars) {
-    this.#legacySidebarRO = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const sidebar = entry.target;
-        const narrow = entry.contentBoxSize[0].inlineSize <= 96;
-        for (const sel of sidebar.querySelectorAll('select-ui')) {
-          sel.setAttribute('placement', narrow ? 'right' : 'bottom-start');
-        }
-      }
-    });
-    for (const sb of sidebars) this.#legacySidebarRO.observe(sb);
-  }
-
-  #wireLegacyCommand(dialog) {
-    const cmdEl = dialog.querySelector('command-ui');
-    const nav = this.querySelector('nav-ui');
-
-    const openCmd = () => {
-      dialog.showModal();
-      if (cmdEl) { cmdEl.open = true; cmdEl.value = ''; cmdEl.focus(); }
-    };
-    const closeCmd = () => {
-      dialog.close();
-      if (cmdEl) cmdEl.open = false;
-    };
-
-    for (const trigger of this.querySelectorAll('[data-command-trigger]')) {
-      trigger.addEventListener('click', (e) => {
-        e.stopPropagation();
-        openCmd();
-      });
-    }
-
-    dialog.addEventListener('click', (e) => {
-      if (e.target === dialog) closeCmd();
-    });
-
-    if (cmdEl) {
-      cmdEl.addEventListener('dismiss', closeCmd);
-      cmdEl.addEventListener('select', (e) => {
-        closeCmd();
-        if (nav) {
-          const item = nav.querySelector(`nav-item-ui[value="${e.detail.value}"]`);
-          if (item) nav.select(item);
-        }
-        this.dispatchEvent(new CustomEvent('command-select', {
-          bubbles: true,
-          detail: e.detail,
-        }));
-      });
-    }
-
-    // Cmd+K listener — only for legacy shape (bespoke <admin-command>
-    // owns its own listener)
-    this.#cmdKeyHandler = (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        dialog.open ? closeCmd() : openCmd();
-      }
-    };
-    document.addEventListener('keydown', this.#cmdKeyHandler);
-  }
 }
 
 customElements.define('admin-shell', AdminShell);

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

@@ -1,20 +1,16 @@
 /* ═══════════════════════════════════════════════════════════════
-   admin-shell — Bespoke shell-tier children (Phase 2 of ADR-0023)
-
-   The admin-* CSS-only structural children are styled by SHARING the
-   same CSS rules as their legacy raw-HTML counterparts. This file
-   re-applies the existing selectors (main / section / header / footer)
-   to the new bespoke tags via display + structural mappings.
-
-   Rather than duplicate every rule in main.css / sidebar.css /
-   templates.css, we declare the bespoke tags as `display: contents` or
-   the relevant layout box, then let the existing selectors (which
-   already use :is() lifts for legacy + slot-vocabulary) match.
-
-   For Phase 2, the simplest map: each bespoke tag mimics its legacy
-   counterpart's display behavior. The host shell.css already handles
-   admin-shell flex layout; main.css handles main-as-column; sidebar.css
-   handles sidebar geometry.
+   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:
+   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.
    ═══════════════════════════════════════════════════════════════ */
 
 /* ── admin-content ≡ <main> ── */
@@ -30,7 +26,7 @@ admin-shell > admin-content {
 /* ── admin-topbar ≡ <header-ui> at shell tier ── */
 admin-content > admin-topbar,
 admin-shell > admin-topbar,
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"], admin-sidebar) > admin-topbar {
+admin-sidebar > admin-topbar {
   display: flex;
   align-items: center;
   gap: var(--page-header-gap);
@@ -44,7 +40,7 @@ admin-shell > admin-topbar,
 /* ── admin-statusbar ≡ <footer-ui> at shell tier ── */
 admin-content > admin-statusbar,
 admin-shell > admin-statusbar,
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"], admin-sidebar) > admin-statusbar {
+admin-sidebar > admin-statusbar {
   display: flex;
   align-items: center;
   gap: var(--page-header-gap);
@@ -98,13 +94,13 @@ admin-page > admin-page-body {
   flex-direction: column;
 }
 
-/* ── admin-sidebar — bridge to existing sidebar.css selectors ──
-   Rather than expand every :is([data-sidebar], aside-ui[slot=…], …)
-   selector in sidebar.css with `, admin-sidebar[slot=…]`, we apply the
-   core sidebar geometry + container query rules here. The remaining
-   slot-routing rules in sidebar.css (header/footer chrome, section,
-   nav-ui colors) match by descendant selector rather than parent
-   tag, so they pick up admin-sidebar children automatically. */
+/* ── admin-sidebar — geometry + resize handle + container queries ──
+   Canonical styling for <admin-sidebar> per ADR-0023. Pre-v0.4.0 this
+   bridged to legacy <aside-ui slot> / <aside data-sidebar> selectors;
+   in v0.4.0 those layered-CSS legacy lifts were stripped, so this block
+   now carries the full sidebar styling. The descendant rules in
+   sidebar.css (header/footer chrome, section, nav-ui colors) still
+   match via tag-name descendant selectors. */
 
 :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) {
   display: flex;
@@ -131,7 +127,7 @@ admin-sidebar[slot="trailing"] {
   border-left: var(--page-border);
 }
 
-/* Resize handle — same shape as legacy [data-sidebar] > [data-resize] */
+/* Resize handle */
 :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > [data-resize] {
   position: absolute;
   top: 0;

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

@@ -36,7 +36,7 @@ admin-shell > main {
    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(aside[data-sidebar="trailing"], aside-ui[slot="trailing"]):not([hidden]))) > main > :is(section, section-ui) {
+admin-shell:not(:has(> :is(asideadmin-sidebar[slot="trailing"], admin-sidebar[slot="trailing"]):not([hidden]))) > main > :is(section, section-ui) {
   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) {
@@ -49,7 +49,7 @@ admin-shell:not(:has(> :is(footer, footer-ui):not([hidden]), > main > :is(footer
 /* ── Main > header (topbar) ──
    Contains: sidebar toggle, breadcrumb, spacer, action buttons.
 
-   Slot contract (shared with > main > footer and [data-sidebar] >
+   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

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

@@ -3,7 +3,7 @@
 
    Structure (legacy raw-HTML form; slot-vocabulary equivalents in parens):
      admin-shell                                                       — root shell (flex row, fixed viewport)
-       aside[data-sidebar="leading"]   (or aside-ui[slot="leading"])    — nav sidebar (resizable, collapsible)
+       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
@@ -11,7 +11,7 @@
              div[data-content-header] > header                          — sticky page title + tabs
              div[data-content-body] > section                           — centered reading column
          footer                        (or footer-ui)                   — status bar
-       aside[data-sidebar="trailing"]  (or aside-ui[slot="trailing"])   — inspector sidebar
+       asideadmin-sidebar[slot="trailing"]  (or admin-sidebar[slot="trailing"])   — inspector sidebar
        dialog[data-command]                                             — command palette
 
    Both authoring shapes are valid simultaneously. The CSS uses