@adia-ai/web-modules 0.3.6 → 0.4.1

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

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

@@ -5,12 +5,14 @@
    Acts as a CSS container query provider (container-name: sidebar)
    so children can adapt to collapsed width via @container.
 
-   Authoring shapes (both styled identically):
-     - Legacy: <aside data-sidebar="leading|trailing">
-     - Slot vocabulary: <aside-ui slot="leading|trailing">
+   Canonical authoring shape (since v0.4.0, ADR-0023 Phase 3):
+     <admin-sidebar slot="leading|trailing" resizable collapsible>
+
+   Pre-v0.4.0 legacy shapes (<aside data-sidebar>, <aside-ui slot>)
+   were retired; see ADR-0024 + git history for the migration recipe.
    ═══════════════════════════════════════════════════════════════ */
 
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -27,7 +29,7 @@
 /* ── Resize handle ──
    6px invisible hit area straddling the sidebar edge.
    Accent color on hover/drag. */
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > [data-resize] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > [data-resize] {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -38,29 +40,29 @@
   z-index: 2;
 }
 
-:is([data-sidebar="leading"], aside-ui[slot="leading"]) > [data-resize] { right: -3px; }
-:is([data-sidebar="trailing"], aside-ui[slot="trailing"]) > [data-resize] { left: -3px; }
+admin-sidebar[slot="leading"] > [data-resize] { right: -3px; }
+admin-sidebar[slot="trailing"] > [data-resize] { left: -3px; }
 
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > [data-resize]:hover {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > [data-resize]:hover {
   background: var(--page-sidebar-resize-accent);
 }
 
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"])[data-resizing] > [data-resize] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"])[data-resizing] > [data-resize] {
   background: var(--page-sidebar-resize-accent);
 }
 
 /* During drag: disable transition + text selection */
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"])[data-resizing] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"])[data-resizing] {
   user-select: none;
   transition: none;
 }
 
 /* ── Sidebar widths ── */
-:is([data-sidebar="leading"], aside-ui[slot="leading"]) {
+admin-sidebar[slot="leading"] {
   width: var(--page-sidebar-width-leading);
 }
 
-:is([data-sidebar="trailing"], aside-ui[slot="trailing"]) {
+admin-sidebar[slot="trailing"] {
   width: var(--page-sidebar-width-trailing);
 }
 
@@ -71,8 +73,8 @@
    (a workspace-select or user-select) so the slot rules rarely come
    into play — but they stay consistent for authors that compose
    richer sidebar chromes. */
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui),
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui),
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) {
   display: flex;
   align-items: center;
   gap: var(--page-sidebar-gap);
@@ -82,49 +84,49 @@
   min-width: 0;
 }
 
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) {
   min-height: var(--page-header-height);
   border-bottom: var(--page-border);
 }
 
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) {
   min-height: var(--page-header-height);
   margin-top: auto;
   border-top: var(--page-border);
 }
 
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="icon"],
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="icon"] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="icon"],
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="icon"] {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   color: var(--page-header-fg-muted);
 }
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="heading"],
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="heading"] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="heading"],
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="heading"] {
   font-weight: var(--a-weight-medium);
   color: var(--a-fg);
 }
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="description"],
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="description"] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="description"],
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="description"] {
   color: var(--page-header-fg-muted);
   font-size: var(--a-ui-sm);
 }
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="action"],
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="action"] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="action"],
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="action"] {
   display: flex;
   align-items: center;
   gap: var(--page-actions-gap);
   flex-shrink: 0;
   margin-inline-start: auto;
 }
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="action"] ~ [slot="action"],
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="action"] ~ [slot="action"] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="action"] ~ [slot="action"],
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="action"] ~ [slot="action"] {
   margin-inline-start: 0;
 }
 /* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="action-leading"],
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="action-leading"] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="action-leading"],
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="action-leading"] {
   display: flex;
   align-items: center;
   gap: var(--page-actions-gap);
@@ -133,7 +135,7 @@
 }
 
 /* ── Sidebar section (scrollable body) ── */
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(section, section-ui) {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(section, section-ui) {
   flex: 1;
   overflow-y: auto;
   padding: var(--page-sidebar-px);
@@ -141,23 +143,23 @@
   scrollbar-width: none;
 }
 
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(section, section-ui)::-webkit-scrollbar { display: none; }
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(section, section-ui)::-webkit-scrollbar { display: none; }
 
 /* span[slot="pad"] — opt-in padding wrapper for sidebar content
    that needs inset (e.g. trailing sidebar inspector fields) */
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) span[slot="pad"] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) span[slot="pad"] {
   display: block;
   padding: var(--page-sidebar-px);
 }
 
 /* Reset nav-ui border/padding inside sidebars */
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) nav-ui {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) nav-ui {
   border: none;
   padding: 0;
 }
 
 /* Sidebar-level divider (outside nav-ui scope) */
-:is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(section, section-ui) > hr[data-nav-divider] {
+:is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(section, section-ui) > hr[data-nav-divider] {
   border: none;
   height: 1px;
   background: var(--page-sidebar-divider-bg);

package/simple/index.js

@@ -0,0 +1,2 @@
+export { SimpleShell } from './simple-shell/simple-shell.js';
+// simple-content and simple-hero are CSS-only — no JS export needed.