@adia-ai/web-components 0.8.6 → 0.8.8

package/patterns/record-detail-drawer/record-detail-drawer.examples.html

@@ -0,0 +1,164 @@
+<header>
+  <div>
+    <h1>Record Detail Drawer</h1>
+    <div data-actions>
+      <tag-ui size="sm">drawer-ui</tag-ui> <tag-ui size="sm">tabs-ui</tag-ui> <tag-ui size="sm">description-list-ui</tag-ui> <tag-ui size="sm">timeline-ui</tag-ui>
+    </div>
+  </div>
+  <p>Side drawer that shows the details of a selected row without navigating away from the list. Header carries the subject (avatar + name + status); body uses tabs to switch between Properties, Activity, and Comments.</p>
+</header>
+
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    List-detail workflows where the user bounces between records quickly: CRM contacts,
+    issues in a tracker, orders in an e-commerce admin. A drawer preserves the list's
+    scroll position and filters, unlike navigating to a detail route.
+  </p>
+</section>
+
+<section data-section data-property="simple-detail">
+  <h2 variant="section">Simple record detail</h2>
+  <p data-note>Identity in the header, key/value properties in the body, primary action in the footer.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="simple detail">
+      <button-ui data-chunk="record-detail-drawer-simple-detail" text="View contact" icon="user" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+      <drawer-ui side="right" size="md">
+        <header slot="header">
+          <row-ui gap="2" align="center" grow>
+            <avatar-ui text="Olivia Martin" size="md"></avatar-ui>
+            <col-ui gap="0" grow>
+              <text-ui strong>Olivia Martin</text-ui>
+              <text-ui color="subtle">Acme Corp · Engineering</text-ui>
+            </col-ui>
+            <badge-ui text="Active" variant="success"></badge-ui>
+          </row-ui>
+        </header>
+        <section slot="body">
+          <description-list-ui>
+            <dt>Email</dt><dd>olivia.martin@acme.com</dd>
+            <dt>Phone</dt><dd>+1 (555) 234-5678</dd>
+            <dt>Location</dt><dd>San Francisco, CA</dd>
+            <dt>Joined</dt><dd>March 12, 2024</dd>
+            <dt>Last active</dt><dd>2 hours ago</dd>
+          </description-list-ui>
+        </section>
+        <footer slot="footer">
+          <span slot="action-leading">
+            <button-ui text="Archive" icon="archive" variant="ghost"></button-ui>
+          </span>
+          <span slot="action">
+            <button-ui text="Edit" variant="primary"></button-ui>
+          </span>
+        </footer>
+      </drawer-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="tabbed-detail">
+  <h2 variant="section">Tabbed detail (Properties · Activity · Comments)</h2>
+  <p data-note>Tabs sit directly under the header so switching views doesn't require scrolling. Each tab's panel scrolls independently inside the body.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="tabbed detail">
+      <button-ui data-chunk="record-detail-drawer-tabbed-detail" text="Open issue" icon="bug" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+      <drawer-ui side="right" size="lg">
+        <header slot="header">
+          <col-ui gap="1" grow>
+            <row-ui gap="2" align="center">
+              <badge-ui text="#142" variant="muted"></badge-ui>
+              <text-ui strong>Login button misaligned on Safari</text-ui>
+            </row-ui>
+            <row-ui gap="2" align="center">
+              <badge-ui text="Open" variant="success"></badge-ui>
+              <badge-ui text="High" variant="warning"></badge-ui>
+              <text-ui color="subtle">Opened by Alex Chen · 2 days ago</text-ui>
+            </row-ui>
+          </col-ui>
+        </header>
+        <section slot="body">
+          <col-ui gap="4">
+            <tabs-ui value="properties">
+              <tab-ui value="properties" text="Properties"></tab-ui>
+              <tab-ui value="activity"   text="Activity"></tab-ui>
+              <tab-ui value="comments"   text="Comments"></tab-ui>
+            </tabs-ui>
+            <description-list-ui>
+              <dt>Assignee</dt><dd>Sarah Miller</dd>
+              <dt>Reporter</dt><dd>Alex Chen</dd>
+              <dt>Priority</dt><dd>High</dd>
+              <dt>Component</dt><dd>Auth UI</dd>
+              <dt>Browser</dt><dd>Safari 17.2</dd>
+              <dt>Labels</dt><dd>regression, ui, safari-only</dd>
+            </description-list-ui>
+            <col-ui gap="2">
+              <h4>Recent activity</h4>
+              <timeline-ui>
+                <timeline-item-ui text="Opened by Alex Chen" time="2 days ago" icon="plus" status="completed"></timeline-item-ui>
+                <timeline-item-ui text="Assigned to Sarah Miller" time="1 day ago" icon="user" status="completed"></timeline-item-ui>
+                <timeline-item-ui text="Priority raised to High" time="6h ago" icon="arrow-up" status="completed"></timeline-item-ui>
+                <timeline-item-ui text="Investigating Safari-specific CSS" time="now" icon="magnifying-glass" status="active"></timeline-item-ui>
+              </timeline-ui>
+            </col-ui>
+          </col-ui>
+        </section>
+        <footer slot="footer">
+          <span slot="action-leading">
+            <button-ui text="Close issue" variant="ghost"></button-ui>
+          </span>
+          <span slot="action">
+            <button-ui text="Assign" icon="user" variant="outline"></button-ui>
+            <button-ui text="Comment" icon="chat" variant="primary"></button-ui>
+          </span>
+        </footer>
+      </drawer-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="anatomy">
+  <h2 variant="section">Anatomy</h2>
+  <code-ui language="html">&lt;drawer-ui side="right" size="lg"&gt;
+
+  &lt;!-- identity --&gt;
+  &lt;header slot="header"&gt;
+    &lt;row-ui gap="2" align="center" grow&gt;
+      &lt;avatar-ui text="Olivia Martin"&gt;&lt;/avatar-ui&gt;
+      &lt;col-ui grow&gt;
+        &lt;text-ui weight="semibold"&gt;Olivia Martin&lt;/text-ui&gt;
+        &lt;text-ui color="subtle"&gt;Acme Corp&lt;/text-ui&gt;
+      &lt;/col-ui&gt;
+      &lt;badge-ui text="Active" variant="success"&gt;&lt;/badge-ui&gt;
+    &lt;/row-ui&gt;
+  &lt;/header&gt;
+
+  &lt;!-- tabs + content --&gt;
+  &lt;section slot="body"&gt;
+    &lt;tabs-ui value="properties"&gt; ...tabs... &lt;/tabs-ui&gt;
+    &lt;description-list-ui&gt; ...props... &lt;/description-list-ui&gt;
+    &lt;timeline-ui&gt; ...events... &lt;/timeline-ui&gt;
+  &lt;/section&gt;
+
+  &lt;!-- actions — archive on the leading edge, primary on the trailing --&gt;
+  &lt;footer slot="footer"&gt;
+    &lt;span slot="action-leading"&gt;
+      &lt;button-ui text="Archive" variant="ghost"&gt;&lt;/button-ui&gt;
+    &lt;/span&gt;
+    &lt;span slot="action"&gt;
+      &lt;button-ui text="Edit" variant="primary"&gt;&lt;/button-ui&gt;
+    &lt;/span&gt;
+  &lt;/footer&gt;
+
+&lt;/drawer-ui&gt;</code-ui>
+</section>
+
+<section data-section data-property="rules">
+  <h2 variant="section">Rules</h2>
+  <ul>
+    <li>Header shows <em>who/what</em> this record is — avatar, name, status. Don't repeat it in the body.</li>
+    <li>Use <code>&lt;description-list-ui&gt;</code> for structured properties, not ad-hoc row/col pairs. Semantic <code>dt/dd</code> pairs read better for screen readers.</li>
+    <li>If the record has meaningful history, include a <code>&lt;timeline-ui&gt;</code>. One timeline per drawer is enough — collapse older events.</li>
+    <li>Footer actions: destructive left, primary right. Same convention as form drawer.</li>
+    <li>When the drawer is triggered from a table row, pass the row's id as <code>data-record-id</code> on the drawer so consumers can fetch fresh data on open.</li>
+  </ul>
+</section>

package/patterns/record-detail-drawer/record-detail-drawer.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Record Detail Drawer (pattern) — AdiaUI</title>
+
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/avatar/avatar.css">
+  <link rel="stylesheet" href="../../components/badge/badge.css">
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/code/code.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/description-list/description-list.css">
+  <link rel="stylesheet" href="../../components/drawer/drawer.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/tabs/tabs.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <link rel="stylesheet" href="../../components/timeline/timeline.css">
+
+  <!-- Component JS -->
+  <script type="module" src="../../components/avatar/avatar.js"></script>
+  <script type="module" src="../../components/badge/badge.js"></script>
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/code/code.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/description-list/description-list.js"></script>
+  <script type="module" src="../../components/drawer/drawer.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/tabs/tabs.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <script type="module" src="../../components/timeline/timeline.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./record-detail-drawer.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load record-detail-drawer.examples.html — ${err.message}</p>`;
+      console.error('[record-detail-drawer.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/patterns/responsive-shell-sidebar/README.md

@@ -0,0 +1,37 @@
+# responsive-shell-sidebar
+
+> **Pattern** — Editor-shell with leading + trailing sidebars that collapse to a drawer below a viewport breakpoint. Documented in v0.5.3 §157 per FEEDBACK-06 §3.
+
+## The problem
+
+Every responsive editor-shell app (Figma, Linear, VSCode, Notion) needs sidebars that work at all viewport widths. On wide viewports the sidebars are inline panels; below ~900px they collapse to a drawer triggered by a toolbar button. This pattern hand-rolls the dual-mount across consumers — same content rendered in two surfaces, only one visible at a time.
+
+FEEDBACK-06 §3 reported color-app needing ~40 LOC of CSS + state plumbing to land this pattern in Tokens Studio. This pattern doc standardizes the recipe so future consumers don't re-derive it.
+
+## What's in the pattern
+
+1. **CSS convention**: `.wide-only` (`display: contents` at `>900px`, `display: none` at `≤900px`) + `.narrow-only` (inverse).
+2. **Dual mounts**: inline sidebars wrapped in `.wide-only`; drawer twins outside the shell's slots.
+3. **Toolbar triggers**: buttons inside `.narrow-only` open the drawer twins.
+4. **MediaQueryList listener**: auto-closes the drawers when the viewport widens past the breakpoint (the gap FEEDBACK-06 §3 explicitly flagged).
+5. **Signal-based state sharing**: parent template reads signals once and passes extracted values to both mount points.
+
+## Caveat: components with local DOM state
+
+Components with **local DOM state** (uncontrolled form inputs, scroll position, focused element) will lose state when the viewport crosses the breakpoint — the inline copy unmounts and the drawer copy mounts. **Signal-bound components are safe** because their state lives in the signal, not the DOM. Most AdiaUI primitives are signal-backed; the affected cases are documented in the examples.
+
+## Files
+
+- `responsive-shell-sidebar.html` — pattern shell page (iframes the examples).
+- `responsive-shell-sidebar.examples.html` — full working dual-mount example with auto-close MQL.
+- `responsive-shell-sidebar.css` — the `.wide-only` / `.narrow-only` + breakpoint shell grid.
+
+## Future graduation (v0.6.0)
+
+FEEDBACK-06 §3 Option A proposed a built-in `<editor-sidebar responsive-breakpoint="900">` attribute that auto-stamps the drawer twin. Deferred to v0.6.0 — requires editor-shell + pane-ui semantics audit (focus handoff at the inline↔drawer transition, dual-mount event-listener deduplication, etc.). Pairs with a `<show-when breakpoint="...">` trait. Until then, this pattern is the canonical recipe.
+
+## References
+
+- FEEDBACK-06 §3 — author's recipe + Option A vs Option B trade-off
+- RESPONSE-06 ✅ #3 verdict — Option B chosen (this pattern)
+- .claude/docs/plans/0.5.3-release-plan.md §157

package/patterns/responsive-shell-sidebar/responsive-shell-sidebar.css

@@ -0,0 +1,39 @@
+/* responsive-shell-sidebar pattern — §157 (v0.5.3) per FEEDBACK-06 §3 */
+
+/* Breakpoint: 900px. Below → drawer mode; above → inline mode. */
+.wide-only { display: contents; }
+.narrow-only { display: none; }
+
+@media (max-width: 900px) {
+  .wide-only { display: none; }
+  .narrow-only { display: block; }
+}
+
+/* Pattern shell — replace with your app's grid */
+.shell {
+  display: grid;
+  grid-template-columns: 240px 1fr 320px;
+  gap: var(--a-space-3);
+  height: 100vh;
+  padding: var(--a-space-3);
+  box-sizing: border-box;
+}
+
+@media (max-width: 900px) {
+  .shell {
+    grid-template-columns: 1fr;
+  }
+}
+
+.toolbar {
+  display: none;
+}
+
+@media (max-width: 900px) {
+  .toolbar {
+    display: flex;
+    gap: var(--a-space-2);
+    padding-bottom: var(--a-space-2);
+    border-bottom: 1px solid var(--md-sys-color-neutral-outline);
+  }
+}

package/patterns/responsive-shell-sidebar/responsive-shell-sidebar.examples.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Responsive Shell Sidebar — examples</title>
+
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/drawer/drawer.css">
+  <link rel="stylesheet" href="../../components/icon/icon.css">
+  <link rel="stylesheet" href="../../components/list/list.css">
+  <link rel="stylesheet" href="../../components/pane/pane.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/drawer/drawer.js"></script>
+  <script type="module" src="../../components/icon/icon.js"></script>
+  <script type="module" src="../../components/list/list.js"></script>
+  <script type="module" src="../../components/pane/pane.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+
+  <script type="module" src="../../core/icons-phosphor.js"></script>
+
+  <link rel="stylesheet" href="responsive-shell-sidebar.css">
+
+  <style>
+    body { margin: 0; }
+    h1, h2, h3 { margin: 0; }
+    .doc-body { max-width: 800px; margin: 0 auto; padding: var(--a-space-4); }
+    .doc-body h2 { margin-top: var(--a-space-6); }
+    .doc-body pre {
+      background: var(--a-bg-muted);
+      padding: var(--a-space-3);
+      border-radius: var(--a-radius);
+      overflow-x: auto;
+      font-size: 13px;
+    }
+  </style>
+</head>
+<body data-chunk="responsive-shell-sidebar" data-chunk-kind="page" data-chunk-domain="layout"
+      data-chunk-description="Editor-shell with leading + trailing sidebars that collapse to drawers below a 900px viewport breakpoint. Dual-mount: same content renders inline on wide viewports + inside <drawer-ui> twins on narrow. State shared via single signal source consumed by both mount points.">
+
+  <!-- ═══ INLINE shell (wide-only) ═══ -->
+  <div class="shell">
+    <!-- Leading sidebar — inline mount (wide-only) -->
+    <aside class="wide-only" data-chunk-slot="leading-inline">
+      <pane-ui>
+        <header>
+          <h3>Tokens</h3>
+        </header>
+        <section>
+          <list-ui>
+            <list-item-ui>Primary</list-item-ui>
+            <list-item-ui>Secondary</list-item-ui>
+            <list-item-ui>Neutral</list-item-ui>
+            <list-item-ui>Surface</list-item-ui>
+          </list-ui>
+        </section>
+      </pane-ui>
+    </aside>
+
+    <!-- Main content (always inline) -->
+    <main data-chunk-slot="main">
+      <!-- ═══ Narrow toolbar (drawer triggers) ═══ -->
+      <row-ui class="toolbar" data-chunk-slot="narrow-toolbar">
+        <button-ui id="open-leading" text="Tokens" icon="list" variant="ghost" size="sm"></button-ui>
+        <button-ui id="open-trailing" text="Settings" icon="sliders" variant="ghost" size="sm"></button-ui>
+      </row-ui>
+
+      <card-ui>
+        <header>
+          <h2>Responsive Shell Sidebar pattern</h2>
+        </header>
+        <section>
+          <text-ui>
+            Resize this viewport: at ≤900px the leading + trailing sidebars collapse
+            to drawers triggered by the toolbar buttons. Above 900px the sidebars are
+            inline. The same content is mounted in both surfaces; consumer signals
+            drive both copies via the parent template's re-read.
+          </text-ui>
+        </section>
+      </card-ui>
+
+      <div class="doc-body">
+        <h2>The pattern</h2>
+        <p>Three pieces:</p>
+        <ol>
+          <li><strong>Inline mounts</strong> for the sidebars wrapped in <code>.wide-only</code> (display: contents at &gt;900px; display: none at ≤900px).</li>
+          <li><strong>Drawer twins</strong> with the same children, mounted outside the shell's named slots, controlled by toolbar buttons inside <code>.narrow-only</code>.</li>
+          <li><strong>MediaQueryList</strong> listener that auto-closes the drawers on viewport widening (the gap FEEDBACK-06 §3 explicitly flagged).</li>
+        </ol>
+
+        <h2>Dual-mount caveat</h2>
+        <p>Components with <strong>local DOM state</strong> (uncontrolled form inputs, scroll position, focused element) will lose state when the viewport crosses the breakpoint — the inline copy unmounts and the drawer copy mounts (or vice versa). <strong>Signal-bound components are safe</strong> because their state lives in the signal, not the DOM. Most AdiaUI primitives are signal-backed; the affected cases are:</p>
+        <ul>
+          <li>Native <code>&lt;input&gt;</code>/<code>&lt;textarea&gt;</code> with no signal binding</li>
+          <li>Components using <code>this.querySelector(...)</code> with imperative state</li>
+          <li>Scroll-position-sensitive containers (e.g. chat threads at a specific scroll)</li>
+        </ul>
+        <p>For these, either: (a) lift the state to a signal in the parent, or (b) document the unmount-on-resize edge.</p>
+
+        <h2>Auto-close on viewport widening</h2>
+        <code-ui language="javascript">const mql = window.matchMedia('(max-width: 900px)');
+mql.addEventListener('change', (e) =&gt; {
+  if (!e.matches) {
+    // Viewport widened past breakpoint — close any open drawers
+    document.getElementById('leading-drawer').open = false;
+    document.getElementById('trailing-drawer').open = false;
+  }
+});</code-ui>
+
+        <h2>State sharing</h2>
+        <p>Single signal source consumed by both copies. The parent template reads the signal once and passes the extracted value to both the inline mount AND the drawer mount; on signal change the parent re-renders both:</p>
+        <code-ui language="javascript">import { signal } from '@adia-ai/web-components/core';
+
+const activeToken = signal('primary');
+
+static template = () =&gt; {
+  const current = activeToken.value;  // dep read here
+  return html`
+    &lt;aside class="wide-only"&gt;
+      &lt;list-ui&gt; ... .active=${current === 'primary'} ... &lt;/list-ui&gt;
+    &lt;/aside&gt;
+    &lt;drawer-ui id="leading-drawer"&gt;
+      &lt;list-ui&gt; ... .active=${current === 'primary'} ... &lt;/list-ui&gt;
+    &lt;/drawer-ui&gt;
+  `;
+}</code-ui>
+
+        <h2>Future v0.6.0: built-in <code>responsive-breakpoint</code></h2>
+        <p>FEEDBACK-06 §3 Option A proposed a built-in <code>&lt;editor-sidebar responsive-breakpoint="900"&gt;</code> attribute that auto-stamps the drawer twin. Deferred to v0.6.0 — requires editor-shell + pane-ui semantics audit (focus handoff at the inline↔drawer transition, dual-mount event-listener deduplication, etc.). Pairs with a <code>&lt;show-when breakpoint="..."&gt;</code> trait. Until then, the pattern above is the canonical recipe.</p>
+      </div>
+    </main>
+
+    <!-- Trailing sidebar — inline mount (wide-only) -->
+    <aside class="wide-only" data-chunk-slot="trailing-inline">
+      <pane-ui>
+        <header>
+          <h3>Settings</h3>
+        </header>
+        <section>
+          <list-ui>
+            <list-item-ui>Lightness</list-item-ui>
+            <list-item-ui>Chroma</list-item-ui>
+            <list-item-ui>Hue</list-item-ui>
+          </list-ui>
+        </section>
+      </pane-ui>
+    </aside>
+  </div>
+
+  <!-- ═══ DRAWER twins (narrow-only) ═══ -->
+  <drawer-ui id="leading-drawer" side="left" size="sm" data-chunk-slot="leading-drawer">
+    <header>
+      <h3>Tokens</h3>
+    </header>
+    <section>
+      <list-ui>
+        <list-item-ui>Primary</list-item-ui>
+        <list-item-ui>Secondary</list-item-ui>
+        <list-item-ui>Neutral</list-item-ui>
+        <list-item-ui>Surface</list-item-ui>
+      </list-ui>
+    </section>
+  </drawer-ui>
+
+  <drawer-ui id="trailing-drawer" side="right" size="sm" data-chunk-slot="trailing-drawer">
+    <header>
+      <h3>Settings</h3>
+    </header>
+    <section>
+      <list-ui>
+        <list-item-ui>Lightness</list-item-ui>
+        <list-item-ui>Chroma</list-item-ui>
+        <list-item-ui>Hue</list-item-ui>
+      </list-ui>
+    </section>
+  </drawer-ui>
+
+  <script type="module">
+    // Wire toolbar buttons to drawer triggers
+    document.getElementById('open-leading')?.addEventListener('press', () => {
+      document.getElementById('leading-drawer').open = true;
+    });
+    document.getElementById('open-trailing')?.addEventListener('press', () => {
+      document.getElementById('trailing-drawer').open = true;
+    });
+
+    // Auto-close drawers when viewport crosses breakpoint (widening)
+    const mql = window.matchMedia('(max-width: 900px)');
+    mql.addEventListener('change', (e) => {
+      if (!e.matches) {
+        document.getElementById('leading-drawer').open = false;
+        document.getElementById('trailing-drawer').open = false;
+      }
+    });
+  </script>
+</body>
+</html>

package/patterns/responsive-shell-sidebar/responsive-shell-sidebar.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Responsive Shell Sidebar (pattern) — AdiaUI</title>
+
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/drawer/drawer.css">
+  <link rel="stylesheet" href="../../components/icon/icon.css">
+  <link rel="stylesheet" href="../../components/list/list.css">
+  <link rel="stylesheet" href="../../components/pane/pane.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+
+  <!-- Component JS -->
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/drawer/drawer.js"></script>
+  <script type="module" src="../../components/icon/icon.js"></script>
+  <script type="module" src="../../components/list/list.js"></script>
+  <script type="module" src="../../components/pane/pane.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+
+  <!-- Phosphor icon registry -->
+  <script type="module" src="../../core/icons-phosphor.js"></script>
+
+  <link rel="stylesheet" href="responsive-shell-sidebar.css">
+</head>
+<body>
+  <main>
+    <h1>Responsive Shell Sidebar</h1>
+    <p>Dual-mount editor-shell sidebars that collapse to a drawer below a viewport breakpoint. The same content renders inline on wide viewports + inside a drawer on narrow viewports. Documented in v0.5.3 §157 per FEEDBACK-06 §3.</p>
+
+    <iframe src="responsive-shell-sidebar.examples.html" style="width:100%; height:90vh; border:1px solid var(--md-sys-color-neutral-outline)"></iframe>
+  </main>
+</body>
+</html>