@adia-ai/web-modules 0.3.3 → 0.3.4

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

@@ -0,0 +1,51 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdminScroll
+tag: admin-scroll
+component: AdminScroll
+category: layout
+version: 1
+description: |
+  Module-tier shell scroll surface. CSS-only — no behavior, no JS.
+  Sits inside <admin-content> as the central scrollable region.
+  Single-axis scroll (vertical), scroll-contained so wheel/touch
+  events don't propagate to the document.
+
+  Replaces the legacy <section> child of <main> at shell-tier per
+  ADR-0023.
+
+props: {}
+
+events: {}
+
+slots:
+  default:
+    description: >-
+      Scrollable content — typically <admin-page> wrapping the
+      page-tier sticky bands + body.
+
+states:
+  - name: idle
+    description: Default, the only state.
+
+traits: []
+
+a2ui:
+  rules:
+    - >-
+      admin-scroll is the bespoke replacement for the legacy <section>
+      child of <main> inside admin-shell. Single child convention —
+      typically wraps an <admin-page> for sticky-band layout.
+
+keywords:
+  - admin-scroll
+  - scroll-region
+  - scroll-container
+
+synonyms:
+  scroll-region: [scroll-area, viewport-content]
+
+related:
+  - AdminShell
+  - AdminContent
+  - AdminPage

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

@@ -97,16 +97,6 @@
       {
         "description": "Default, interactive shell.",
         "name": "idle"
-      },
-      {
-        "description": "Leading sidebar is collapsed; content expands.",
-        "attribute": "data-sidebar-leading-collapsed",
-        "name": "collapsed-leading"
-      },
-      {
-        "description": "Trailing sidebar (inspector) is collapsed.",
-        "attribute": "data-sidebar-trailing-collapsed",
-        "name": "collapsed-trailing"
       }
     ],
     "synonyms": {

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

@@ -12,3 +12,4 @@
 @import "./css/admin-shell.collapsed.css";
 @import "./css/admin-shell.templates.css";
 @import "./css/admin-shell.helpers.css";
+@import "./css/admin-shell.bespoke.css";

package/shell/admin-shell/admin-shell.examples.html

@@ -9,8 +9,8 @@
   </header>
 
 <section data-section>
-  <h2 variant="section">Basic shape</h2>
-  <p data-note>Author supplies the DOM (sidebars + main column + optional command dialog); the shell binds the interactions.</p>
+  <h2 variant="section">Basic shape (legacy)</h2>
+  <p data-note>Author supplies the DOM (sidebars + main column + optional command dialog); the shell binds the interactions. This is the original raw-HTML authoring shape — still fully supported.</p>
   <code-ui language="html">&lt;admin-shell mode="rounded"&gt;
   &lt;aside data-sidebar="leading"&gt;
     &lt;header&gt;…&lt;/header&gt;
@@ -40,6 +40,62 @@
 &lt;/admin-shell&gt;</code-ui>
 </section>
 
+<section data-section>
+  <h2 variant="section">Basic shape (bespoke — recommended)</h2>
+  <p data-note>The bespoke shape uses module-namespaced custom elements (<code>&lt;admin-sidebar&gt;</code>, <code>&lt;admin-content&gt;</code>, etc.) per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>. Each child owns its own behavior + state attributes; queryable from outside via <code>:has(admin-sidebar[collapsed])</code>.</p>
+  <code-ui language="html">&lt;admin-shell mode="rounded"&gt;
+  &lt;admin-sidebar slot="leading" resizable collapsible&gt;
+    &lt;admin-topbar slot="header"&gt;
+      &lt;span slot="heading"&gt;Workspace&lt;/span&gt;
+    &lt;/admin-topbar&gt;
+    &lt;nav-ui&gt;…&lt;/nav-ui&gt;
+    &lt;admin-statusbar slot="footer"&gt;
+      &lt;span&gt;User&lt;/span&gt;
+    &lt;/admin-statusbar&gt;
+    &lt;div data-resize&gt;&lt;/div&gt;
+  &lt;/admin-sidebar&gt;
+
+  &lt;admin-content&gt;
+    &lt;admin-topbar slot="header"&gt;
+      &lt;button-ui data-sidebar-toggle="leading" icon="sidebar" variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
+      &lt;breadcrumb-ui slot="heading"&gt;…&lt;/breadcrumb-ui&gt;
+    &lt;/admin-topbar&gt;
+    &lt;admin-scroll&gt;
+      &lt;admin-page&gt;
+        &lt;admin-page-header&gt;
+          &lt;header-ui&gt;&lt;span slot="heading"&gt;Page Title&lt;/span&gt;&lt;/header-ui&gt;
+        &lt;/admin-page-header&gt;
+        &lt;admin-page-body&gt;
+          &lt;section-ui&gt;…content…&lt;/section-ui&gt;
+        &lt;/admin-page-body&gt;
+      &lt;/admin-page&gt;
+    &lt;/admin-scroll&gt;
+    &lt;admin-statusbar slot="footer"&gt;
+      &lt;span&gt;Status&lt;/span&gt;
+    &lt;/admin-statusbar&gt;
+  &lt;/admin-content&gt;
+
+  &lt;admin-command&gt;
+    &lt;command-ui placeholder="Search..."&gt;&lt;/command-ui&gt;
+  &lt;/admin-command&gt;
+&lt;/admin-shell&gt;</code-ui>
+</section>
+
+<section data-section>
+  <h2 variant="section">State as attribute</h2>
+  <p>Every queryable state is reflected on the relevant child element. Style cross-cuts via <code>:has()</code>:</p>
+  <code-ui language="css">/* Theme tweak when leading sidebar is collapsed */
+admin-shell:has(admin-sidebar[slot="leading"][collapsed]) admin-content {
+  /* … */
+}
+
+/* Show focus indicator while command palette is open */
+admin-shell:has(admin-command[open]) {
+  /* … */
+}</code-ui>
+  <p data-note>JS reads the same attribute: <code>shell.querySelector('admin-sidebar[slot="leading"]').hasAttribute('collapsed')</code>. No threshold math, no <code>getBoundingClientRect</code>.</p>
+</section>
+
 <section data-section>
   <h2 variant="section">Properties</h2>
   <table>
@@ -55,9 +111,9 @@
   <table>
     <thead><tr><th>Affordance</th><th>Author markup</th><th>What the shell does</th></tr></thead>
     <tbody>
-      <tr><td>Sidebar toggle</td><td><code>[data-sidebar-toggle="leading"]</code> / <code>[data-sidebar-toggle="trailing"]</code></td><td>Click flips <code>[data-collapsed]</code> on the corresponding aside. Persists in <code>localStorage</code>.</td></tr>
-      <tr><td>Sidebar resize</td><td><code>&lt;div data-resize&gt;&lt;/div&gt;</code> inside the sidebar</td><td>Pointer-drag resizes the aside; bounded by <code>leading-min/max-width</code> attrs. Snaps below threshold to collapsed.</td></tr>
-      <tr><td>Command palette</td><td><code>&lt;dialog data-command&gt;</code> + shell <code>[cmd-k]</code></td><td><code>Cmd+K</code> / <code>Ctrl+K</code> calls <code>showModal()</code>. Forwards <code>command-select</code> events from the inner <code>&lt;command-ui&gt;</code>.</td></tr>
+      <tr><td>Sidebar toggle</td><td><code>[data-sidebar-toggle="leading"]</code> / <code>[data-sidebar-toggle="trailing"]</code></td><td>Click flips <code>[collapsed]</code> on the corresponding sidebar. Persists in <code>localStorage</code>.</td></tr>
+      <tr><td>Sidebar resize</td><td><code>&lt;div data-resize&gt;&lt;/div&gt;</code> inside the sidebar</td><td>Pointer-drag resizes the aside; bounded by <code>--page-sidebar-min-width</code> / <code>--page-sidebar-max-width</code> CSS custom properties. Snaps below threshold to collapsed.</td></tr>
+      <tr><td>Command palette</td><td><code>&lt;dialog data-command&gt;</code> as a child of the shell</td><td><code>Cmd+K</code> / <code>Ctrl+K</code> calls <code>showModal()</code> on the inner dialog. Forwards <code>command-select</code> events from the inner <code>&lt;command-ui&gt;</code>.</td></tr>
       <tr><td>Responsive collapse</td><td>(automatic)</td><td>ResizeObserver collapses sidebars when viewport drops below the breakpoint; restores on widen.</td></tr>
     </tbody>
   </table>

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

@@ -1,31 +1,35 @@
 /**
  * <admin-shell mode="rounded borderless">
- *   <aside data-sidebar="leading">...</aside>     (or <aside-ui slot="leading">)
- *   <main>...</main>
- *   <aside data-sidebar="trailing">...</aside>    (or <aside-ui slot="trailing">)
- *   <dialog data-command>...</dialog>
+ *   <admin-sidebar slot="leading" resizable collapsible>…</admin-sidebar>
+ *   <admin-content>…</admin-content>
+ *   <admin-sidebar slot="trailing" resizable collapsible>…</admin-sidebar>
+ *   <admin-command><command-ui></command-ui></admin-command>
  * </admin-shell>
  *
- * Behavior-only app shell. Stamps no HTML — the page author writes the
- * structure using semantic elements + data attributes. Both the legacy
- * `aside[data-sidebar]` and the slot-vocabulary `aside-ui[slot]`
- * authoring shapes are recognised; #sidebarName() reads from either.
- * The component auto-wires four JS behaviors that CSS can't handle:
+ * 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>).
  *
- *   1. Sidebar resize (drag handle with snap thresholds)
- *   2. Sidebar toggle (collapse/restore width)
- *   3. Command palette (Cmd+K keyboard shortcut)
- *   4. ResizeObserver (select placement in narrow sidebars)
+ * 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.
  *
- * CSS handles everything else: layout, collapse, container queries,
- * sticky headers, scroll containment, mode composition.
+ * 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)
  */
 
 import { UIElement } from '../../../web-components/core/element.js';
 
-const SNAP_THRESHOLD = 96;
-const SNAP_MIN_USABLE = 160;
-
 class AdminShell extends UIElement {
   static properties = {
     mode: { type: String, default: '', reflect: true },
@@ -33,107 +37,161 @@ class AdminShell extends UIElement {
 
   static template = () => null;
 
-  #sidebarWidths = new Map();
-  #resizeCleanups = [];
-  #sidebarRO = null;
   #cmdKeyHandler = null;
+  #legacyResizeCleanups = [];
+  #legacySidebarRO = null;
+  #legacySidebarWidths = new Map();
 
   connected() {
-    this.#setupToggles();
-    this.#setupResizeHandles();
-    this.#setupCommandPalette();
-    this.#setupResizeObserver();
+    this.#wireToggleButtons();
+    this.#wireCommandTriggers();
+    this.#setupLegacyShapes();
   }
 
   disconnected() {
-    // Clean up resize handles
-    for (const cleanup of this.#resizeCleanups) cleanup();
-    this.#resizeCleanups = [];
-
-    // Clean up ResizeObserver
-    this.#sidebarRO?.disconnect();
-    this.#sidebarRO = null;
-
-    // Clean up Cmd+K
+    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;
     }
   }
 
-  // ── Sidebar persistence ────────────────────────────────────
+  // 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"])';
 
-  // Selector that matches both legacy raw-HTML and slot-vocabulary forms.
-  static #SIDEBAR_SEL = ':is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"])';
-
-  // Helper: read sidebar name from either authoring shape.
   #sidebarName(el) {
-    return el.getAttribute('data-sidebar') ?? el.getAttribute('slot');
+    return (
+      el.getAttribute('name') ??
+      el.getAttribute('data-sidebar') ??
+      el.getAttribute('slot')
+    );
   }
 
-  #persistSidebar(sidebarName, width) {
-    try { localStorage.setItem(`adia-sidebar-${sidebarName}`, width); } catch {}
+  #findSidebar(name) {
+    return this.querySelector(
+      ':is(' +
+        `admin-sidebar[slot="${name}"], admin-sidebar[name="${name}"], ` +
+        `[data-sidebar="${name}"], aside-ui[slot="${name}"]` +
+      ')'
+    );
   }
 
-  #restoreSidebars() {
-    for (const sidebar of this.querySelectorAll(AdminShell.#SIDEBAR_SEL)) {
+  // ── 1. Toggle buttons — works for bespoke + legacy ──
+
+  #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);
+      });
+    }
+  }
+
+  // ── 2. Command triggers — works for bespoke + legacy ──
+
+  #wireCommandTriggers() {
+    const command = this.querySelector('admin-command');
+    const legacyDialog = command ? null : this.querySelector('dialog[data-command]');
+
+    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;
+    }
+
+    // Legacy path: replicate the old wiring around <dialog data-command>
+    this.#wireLegacyCommand(legacyDialog);
+  }
+
+  #wireCommandSelectToNav(command) {
+    const nav = this.querySelector('nav-ui');
+    if (!nav) return;
+    command.addEventListener('command-select', (e) => {
+      const item = nav.querySelector(`nav-item-ui[value="${e.detail.value}"]`);
+      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;
-          // Only store as the "previous expanded width" if it's actually expanded.
-          // If collapsed, keep the default expanded width so toggle can restore it.
           const w = parseFloat(saved);
-          if (isNaN(w) || w > SNAP_THRESHOLD) {
-            this.#sidebarWidths.set(name, saved);
+          if (!isNaN(w) && w > 96) {
+            this.#legacySidebarWidths.set(name, saved);
           }
         }
       } catch {}
     }
   }
 
-  // ── 1. Sidebar toggle ──────────────────────────────────────
-
-  #setupToggles() {
-    this.#restoreSidebars();
-
-    for (const btn of this.querySelectorAll('[data-sidebar-toggle]')) {
-      const sidebarName = btn.getAttribute('data-sidebar-toggle');
-      btn.addEventListener('click', () => {
-        const sidebar = this.querySelector(`:is([data-sidebar="${sidebarName}"], aside-ui[slot="${sidebarName}"])`);
-        if (!sidebar) return;
-
-        const isCollapsed = sidebar.getBoundingClientRect().width <= SNAP_THRESHOLD;
-
-        if (isCollapsed) {
-          // Expand: restore previous width
-          const prev = this.#sidebarWidths.get(sidebarName);
-          sidebar.style.width = prev || '';
-          this.#persistSidebar(sidebarName, prev || '');
-        } else {
-          // Collapse: save current width, set to min
-          this.#sidebarWidths.set(sidebarName, sidebar.style.width || getComputedStyle(sidebar).width);
-          const minW = getComputedStyle(sidebar).minWidth;
-          sidebar.style.width = minW;
-          this.#persistSidebar(sidebarName, minW);
-        }
-
-        this.dispatchEvent(new CustomEvent('sidebar-toggle', {
-          bubbles: true,
-          detail: { sidebar: sidebarName, expanded: !isCollapsed },
-        }));
-      });
+  #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 },
+    }));
   }
 
-  // ── 2. Sidebar resize handles ──────────────────────────────
-
-  #setupResizeHandles() {
-    for (const handle of this.querySelectorAll(`${AdminShell.#SIDEBAR_SEL} > [data-resize]`)) {
-      const sidebar = handle.parentElement;
-      const sidebarName = this.#sidebarName(sidebar);
-      const isLeading = sidebarName === 'leading';
+  #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();
@@ -156,18 +214,17 @@ class AdminShell extends UIElement {
           handle.removeEventListener('pointermove', onMove);
           handle.removeEventListener('pointerup', onUp);
 
-          // Snap logic
           const w = sidebar.getBoundingClientRect().width;
-          if (w <= SNAP_THRESHOLD) {
+          if (w <= 96) {
             sidebar.style.width = getComputedStyle(sidebar).minWidth;
-          } else if (w < SNAP_MIN_USABLE) {
-            sidebar.style.width = `${SNAP_MIN_USABLE}px`;
+          } else if (w < 160) {
+            sidebar.style.width = '160px';
           }
+          try { localStorage.setItem(`adia-sidebar-${name}`, sidebar.style.width); } catch {}
 
-          this.#persistSidebar(sidebarName, sidebar.style.width);
           this.dispatchEvent(new CustomEvent('sidebar-resize', {
             bubbles: true,
-            detail: { sidebar: sidebarName, width: sidebar.getBoundingClientRect().width },
+            detail: { sidebar: name, name, width: sidebar.getBoundingClientRect().width },
           }));
         };
 
@@ -176,16 +233,24 @@ class AdminShell extends UIElement {
       };
 
       handle.addEventListener('pointerdown', onPointerDown);
-      this.#resizeCleanups.push(() => handle.removeEventListener('pointerdown', onPointerDown));
+      this.#legacyResizeCleanups.push(() => handle.removeEventListener('pointerdown', onPointerDown));
     }
   }
 
-  // ── 3. Command palette ─────────────────────────────────────
-
-  #setupCommandPalette() {
-    const dialog = this.querySelector('dialog[data-command]');
-    if (!dialog) return;
+  #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');
 
@@ -193,13 +258,11 @@ class AdminShell extends UIElement {
       dialog.showModal();
       if (cmdEl) { cmdEl.open = true; cmdEl.value = ''; cmdEl.focus(); }
     };
-
     const closeCmd = () => {
       dialog.close();
       if (cmdEl) cmdEl.open = false;
     };
 
-    // Trigger elements
     for (const trigger of this.querySelectorAll('[data-command-trigger]')) {
       trigger.addEventListener('click', (e) => {
         e.stopPropagation();
@@ -207,12 +270,10 @@ class AdminShell extends UIElement {
       });
     }
 
-    // Backdrop click closes
     dialog.addEventListener('click', (e) => {
       if (e.target === dialog) closeCmd();
     });
 
-    // Command-n events
     if (cmdEl) {
       cmdEl.addEventListener('dismiss', closeCmd);
       cmdEl.addEventListener('select', (e) => {
@@ -228,7 +289,8 @@ class AdminShell extends UIElement {
       });
     }
 
-    // Cmd+K / Ctrl+K
+    // 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();
@@ -237,24 +299,6 @@ class AdminShell extends UIElement {
     };
     document.addEventListener('keydown', this.#cmdKeyHandler);
   }
-
-  // ── 4. ResizeObserver for select placement ─────────────────
-
-  #setupResizeObserver() {
-    this.#sidebarRO = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const sidebar = entry.target;
-        const narrow = entry.contentBoxSize[0].inlineSize <= SNAP_THRESHOLD;
-        for (const sel of sidebar.querySelectorAll('select-ui')) {
-          sel.setAttribute('placement', narrow ? 'right' : 'bottom-start');
-        }
-      }
-    });
-
-    for (const sb of this.querySelectorAll(AdminShell.#SIDEBAR_SEL)) {
-      this.#sidebarRO.observe(sb);
-    }
-  }
 }
 
 customElements.define('admin-shell', AdminShell);

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

@@ -66,12 +66,12 @@ slots:
 states:
   - name: idle
     description: Default, interactive shell.
-  - name: collapsed-leading
-    attribute: data-sidebar-leading-collapsed
-    description: Leading sidebar is collapsed; content expands.
-  - name: collapsed-trailing
-    attribute: data-sidebar-trailing-collapsed
-    description: Trailing sidebar (inspector) is collapsed.
+
+# Note: collapsed state has moved to <admin-sidebar>'s [collapsed]
+# reflected attribute (per ADR-0023). External consumers should query
+# admin-sidebar[slot="leading"][collapsed] / [slot="trailing"][collapsed]
+# directly. The previous data-sidebar-{name}-collapsed attributes on
+# <admin-shell> are not set; new code should style via :has().
 
 traits: []