@adia-ai/a2ui-corpus 0.7.19 → 0.7.21

package/chunks/rating-stars-review-summary.json

@@ -0,0 +1,258 @@
+{
+  "name": "rating-stars-review-summary",
+  "kind": "block",
+  "primary": "section",
+  "page": "/catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<section>\n    <card-ui>\n      <header>\n        <text-ui strong>Customer reviews</text-ui>\n      </header>\n      <section>\n        <col-ui gap=\"4\">\n          <row-ui gap=\"4\" align=\"center\">\n            <col-ui gap=\"0\" align=\"center\">\n              <text-ui variant=\"display\" size=\"md\">4.6</text-ui>\n              <rating-ui value=\"4.5\" allow-half readonly></rating-ui>\n              <text-ui size=\"sm\" color=\"subtle\">1,284 reviews</text-ui>\n            </col-ui>\n            <col-ui gap=\"2\" style=\"flex: 1\">\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui size=\"sm\" color=\"subtle\">5★</text-ui>\n                <progress-ui value=\"72\" total=\"100\"></progress-ui>\n              </row-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui size=\"sm\" color=\"subtle\">4★</text-ui>\n                <progress-ui value=\"18\" total=\"100\"></progress-ui>\n              </row-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui size=\"sm\" color=\"subtle\">3★</text-ui>\n                <progress-ui value=\"6\" total=\"100\"></progress-ui>\n              </row-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui size=\"sm\" color=\"subtle\">2★</text-ui>\n                <progress-ui value=\"3\" total=\"100\"></progress-ui>\n              </row-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui size=\"sm\" color=\"subtle\">1★</text-ui>\n                <progress-ui value=\"1\" total=\"100\"></progress-ui>\n              </row-ui>\n            </col-ui>\n          </row-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n  </section>",
+  "source": "catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
+  "metadata": {
+    "domain": "display",
+    "description": "Rating review summary — a large average score beside a read-only star rating and total-review count, above a breakdown of star-level bars (5★ down to 1★) showing how many reviews fell at each level. The 'customer reviews / ratings overview' header on a product or listing page.",
+    "keywords": [
+      "rating",
+      "stars",
+      "review",
+      "summary",
+      "average",
+      "score",
+      "reviews",
+      "count",
+      "breakdown",
+      "distribution",
+      "feedback",
+      "testimonials",
+      "product",
+      "ratings",
+      "five",
+      "star",
+      "out",
+      "of",
+      "customer",
+      "reviews",
+      "overall",
+      "rating",
+      "bars",
+      "histogram",
+      "star",
+      "levels",
+      "review",
+      "score",
+      "reviews",
+      "overview",
+      "ratings",
+      "panel"
+    ]
+  },
+  "captured_at": "2026-06-10T19:45:40.486Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "strong": true,
+      "textContent": "Customer reviews"
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "children": [
+        "text"
+      ]
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "size": "md",
+      "variant": "display",
+      "textContent": "4.6"
+    },
+    {
+      "id": "rating",
+      "component": "Rating",
+      "readonly": true,
+      "value": 4.5
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "1,284 reviews"
+    },
+    {
+      "id": "column-2",
+      "component": "Column",
+      "align": "center",
+      "gap": "0",
+      "children": [
+        "text-2",
+        "rating",
+        "text-3"
+      ]
+    },
+    {
+      "id": "text-4",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "5★"
+    },
+    {
+      "id": "progress",
+      "component": "Progress",
+      "value": 72
+    },
+    {
+      "id": "row-2",
+      "component": "Row",
+      "align": "center",
+      "gap": "2",
+      "children": [
+        "text-4",
+        "progress"
+      ]
+    },
+    {
+      "id": "text-5",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "4★"
+    },
+    {
+      "id": "progress-2",
+      "component": "Progress",
+      "value": 18
+    },
+    {
+      "id": "row-3",
+      "component": "Row",
+      "align": "center",
+      "gap": "2",
+      "children": [
+        "text-5",
+        "progress-2"
+      ]
+    },
+    {
+      "id": "text-6",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "3★"
+    },
+    {
+      "id": "progress-3",
+      "component": "Progress",
+      "value": 6
+    },
+    {
+      "id": "row-4",
+      "component": "Row",
+      "align": "center",
+      "gap": "2",
+      "children": [
+        "text-6",
+        "progress-3"
+      ]
+    },
+    {
+      "id": "text-7",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "2★"
+    },
+    {
+      "id": "progress-4",
+      "component": "Progress",
+      "value": 3
+    },
+    {
+      "id": "row-5",
+      "component": "Row",
+      "align": "center",
+      "gap": "2",
+      "children": [
+        "text-7",
+        "progress-4"
+      ]
+    },
+    {
+      "id": "text-8",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "1★"
+    },
+    {
+      "id": "progress-5",
+      "component": "Progress",
+      "value": 1
+    },
+    {
+      "id": "row-6",
+      "component": "Row",
+      "align": "center",
+      "gap": "2",
+      "children": [
+        "text-8",
+        "progress-5"
+      ]
+    },
+    {
+      "id": "column-3",
+      "component": "Column",
+      "gap": "2",
+      "children": [
+        "row-2",
+        "row-3",
+        "row-4",
+        "row-5",
+        "row-6"
+      ]
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "align": "center",
+      "gap": "4",
+      "children": [
+        "column-2",
+        "column-3"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "4",
+      "children": [
+        "row"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "card",
+      "component": "Card",
+      "children": [
+        "header",
+        "section"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Section",
+      "children": [
+        "card"
+      ]
+    }
+  ]
+}

package/chunks/reg-step-shell.json

@@ -27,6 +27,7 @@
   ],
   "nested": [
     "reg-story-pane",
+    "extended-profile-form",
     "reg-step-header",
     "reg-extended-profile",
     "reg-step-footer",
@@ -36,7 +37,7 @@
     "data-reg": "",
     "prose": ""
   },
-  "html": "<main data-reg prose>\n      <aside data-reg-story data-chunk-slot=\"page-story\"><!-- nested: reg-story-pane --></aside>\n\n      <form data-reg-input action=\"/site/examples/registration/done\" method=\"get\">\n        <header data-reg-heading data-chunk-slot=\"page-header\"><!-- nested: reg-step-header --></header>\n\n        <section data-reg-form data-chunk-slot=\"page-content\"><!-- nested: reg-extended-profile --></section>\n\n        <footer data-chunk-slot=\"page-footer\"><!-- nested: reg-step-footer --></footer>\n      </form>\n    </main>",
+  "html": "<main data-reg prose>\n      <aside data-reg-story data-chunk-slot=\"page-story\"><!-- nested: reg-story-pane --></aside>\n\n      <form data-reg-input action=\"/site/examples/registration/done\" method=\"get\"><!-- nested: extended-profile-form --></form>\n    </main>",
   "source": "apps/user-flow/app/registration/personal/personal.contents.html",
   "metadata": {
     "domain": "onboarding",
@@ -64,7 +65,7 @@
       "layout": "page"
     }
   },
-  "captured_at": "2026-06-07T19:28:13.657Z",
+  "captured_at": "2026-06-10T14:28:57.979Z",
   "template": [
     {
       "id": "image",
@@ -571,7 +572,7 @@
       ]
     },
     {
-      "id": "form-container",
+      "id": "form-container-2",
       "component": "FormContainer",
       "data-reg-input": "",
       "children": [
@@ -580,6 +581,14 @@
         "footer"
       ]
     },
+    {
+      "id": "form-container",
+      "component": "FormContainer",
+      "data-reg-input": "",
+      "children": [
+        "form-container-2"
+      ]
+    },
     {
       "id": "root",
       "component": "Column",

package/chunks/responsive-shell-sidebar.json

@@ -0,0 +1,79 @@
+{
+  "name": "responsive-shell-sidebar",
+  "kind": "page",
+  "primary": "body",
+  "page": "/packages/web-components/patterns/responsive-shell-sidebar/responsive-shell-sidebar.examples.html",
+  "slots": [
+    {
+      "name": "leading-inline",
+      "tagName": "aside",
+      "html": "<pane-ui>\n        <header>\n          <h3>Tokens</h3>\n        </header>\n        <section>\n          <list-ui>\n            <list-item-ui>Primary</list-item-ui>\n            <list-item-ui>Secondary</list-item-ui>\n            <list-item-ui>Neutral</list-item-ui>\n            <list-item-ui>Surface</list-item-ui>\n          </list-ui>\n        </section>\n      </pane-ui>"
+    },
+    {
+      "name": "main",
+      "tagName": "main",
+      "html": "<!-- ═══ Narrow toolbar (drawer triggers) ═══ -->\n      <row-ui class=\"toolbar\" data-chunk-slot=\"narrow-toolbar\">\n        <button-ui id=\"open-leading\" text=\"Tokens\" icon=\"list\" variant=\"ghost\" size=\"sm\"></button-ui>\n        <button-ui id=\"open-trailing\" text=\"Settings\" icon=\"sliders\" variant=\"ghost\" size=\"sm\"></button-ui>\n      </row-ui>\n\n      <card-ui>\n        <header>\n          <h2>Responsive Shell Sidebar pattern</h2>\n        </header>\n        <section>\n          <text-ui>\n            Resize this viewport: at ≤900px the leading + trailing sidebars collapse\n            to drawers triggered by the toolbar buttons. Above 900px the sidebars are\n            inline. The same content is mounted in both surfaces; consumer signals\n            drive both copies via the parent template's re-read.\n          </text-ui>\n        </section>\n      </card-ui>\n\n      <div class=\"doc-body\">\n        <h2>The pattern</h2>\n        <p>Three pieces:</p>\n        <ol>\n          <li><strong>Inline mounts</strong> for the sidebars wrapped in <code>.wide-only</code> (display: contents at &gt;900px; display: none at ≤900px).</li>\n          <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>\n          <li><strong>MediaQueryList</strong> listener that auto-closes the drawers on viewport widening (the gap FEEDBACK-06 §3 explicitly flagged).</li>\n        </ol>\n\n        <h2>Dual-mount caveat</h2>\n        <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>\n        <ul>\n          <li>Native <code>&lt;input&gt;</code>/<code>&lt;textarea&gt;</code> with no signal binding</li>\n          <li>Components using <code>this.querySelector(...)</code> with imperative state</li>\n          <li>Scroll-position-sensitive containers (e.g. chat threads at a specific scroll)</li>\n        </ul>\n        <p>For these, either: (a) lift the state to a signal in the parent, or (b) document the unmount-on-resize edge.</p>\n\n        <h2>Auto-close on viewport widening</h2>\n        <code-ui language=\"javascript\">const mql = window.matchMedia('(max-width: 900px)');\nmql.addEventListener('change', (e) =&gt; {\n  if (!e.matches) {\n    // Viewport widened past breakpoint — close any open drawers\n    document.getElementById('leading-drawer').open = false;\n    document.getElementById('trailing-drawer').open = false;\n  }\n});</code-ui>\n\n        <h2>State sharing</h2>\n        <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>\n        <code-ui language=\"javascript\">import { signal } from '@adia-ai/web-components/core';\n\nconst activeToken = signal('primary');\n\nstatic template = () =&gt; {\n  const current = activeToken.value;  // dep read here\n  return html`\n    &lt;aside class=\"wide-only\"&gt;\n      &lt;list-ui&gt; ... .active=${current === 'primary'} ... &lt;/list-ui&gt;\n    &lt;/aside&gt;\n    &lt;drawer-ui id=\"leading-drawer\"&gt;\n      &lt;list-ui&gt; ... .active=${current === 'primary'} ... &lt;/list-ui&gt;\n    &lt;/drawer-ui&gt;\n  `;\n}</code-ui>\n\n        <h2>Future v0.6.0: built-in <code>responsive-breakpoint</code></h2>\n        <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>\n      </div>"
+    },
+    {
+      "name": "narrow-toolbar",
+      "tagName": "row-ui",
+      "html": "<button-ui id=\"open-leading\" text=\"Tokens\" icon=\"list\" variant=\"ghost\" size=\"sm\"></button-ui>\n        <button-ui id=\"open-trailing\" text=\"Settings\" icon=\"sliders\" variant=\"ghost\" size=\"sm\"></button-ui>"
+    },
+    {
+      "name": "trailing-inline",
+      "tagName": "aside",
+      "html": "<pane-ui>\n        <header>\n          <h3>Settings</h3>\n        </header>\n        <section>\n          <list-ui>\n            <list-item-ui>Lightness</list-item-ui>\n            <list-item-ui>Chroma</list-item-ui>\n            <list-item-ui>Hue</list-item-ui>\n          </list-ui>\n        </section>\n      </pane-ui>"
+    },
+    {
+      "name": "leading-drawer",
+      "tagName": "drawer-ui",
+      "html": "<header>\n      <h3>Tokens</h3>\n    </header>\n    <section>\n      <list-ui>\n        <list-item-ui>Primary</list-item-ui>\n        <list-item-ui>Secondary</list-item-ui>\n        <list-item-ui>Neutral</list-item-ui>\n        <list-item-ui>Surface</list-item-ui>\n      </list-ui>\n    </section>"
+    },
+    {
+      "name": "trailing-drawer",
+      "tagName": "drawer-ui",
+      "html": "<header>\n      <h3>Settings</h3>\n    </header>\n    <section>\n      <list-ui>\n        <list-item-ui>Lightness</list-item-ui>\n        <list-item-ui>Chroma</list-item-ui>\n        <list-item-ui>Hue</list-item-ui>\n      </list-ui>\n    </section>"
+    }
+  ],
+  "nested": [],
+  "attrs": {
+    "with": "",
+    "leading": "",
+    "trailing": "",
+    "sidebars": "",
+    "that": "",
+    "collapse": "",
+    "to": "",
+    "drawers": "",
+    "below": "",
+    "a": "",
+    "px": "",
+    "viewport": "",
+    "breakpoint": "",
+    "dual-mount": "",
+    "same": "",
+    "content": "",
+    "renders": "",
+    "inline": "",
+    "on": "",
+    "wide": "",
+    "viewports": "",
+    "inside": "",
+    "drawer-ui": ""
+  },
+  "html": "<body>\n\n  <!-- ═══ INLINE shell (wide-only) ═══ -->\n  <div class=\"shell\">\n    <!-- Leading sidebar — inline mount (wide-only) -->\n    <aside class=\"wide-only\" data-chunk-slot=\"leading-inline\">\n      <pane-ui>\n        <header>\n          <h3>Tokens</h3>\n        </header>\n        <section>\n          <list-ui>\n            <list-item-ui>Primary</list-item-ui>\n            <list-item-ui>Secondary</list-item-ui>\n            <list-item-ui>Neutral</list-item-ui>\n            <list-item-ui>Surface</list-item-ui>\n          </list-ui>\n        </section>\n      </pane-ui>\n    </aside>\n\n    <!-- Main content (always inline) -->\n    <main data-chunk-slot=\"main\">\n      <!-- ═══ Narrow toolbar (drawer triggers) ═══ -->\n      <row-ui class=\"toolbar\" data-chunk-slot=\"narrow-toolbar\">\n        <button-ui id=\"open-leading\" text=\"Tokens\" icon=\"list\" variant=\"ghost\" size=\"sm\"></button-ui>\n        <button-ui id=\"open-trailing\" text=\"Settings\" icon=\"sliders\" variant=\"ghost\" size=\"sm\"></button-ui>\n      </row-ui>\n\n      <card-ui>\n        <header>\n          <h2>Responsive Shell Sidebar pattern</h2>\n        </header>\n        <section>\n          <text-ui>\n            Resize this viewport: at ≤900px the leading + trailing sidebars collapse\n            to drawers triggered by the toolbar buttons. Above 900px the sidebars are\n            inline. The same content is mounted in both surfaces; consumer signals\n            drive both copies via the parent template's re-read.\n          </text-ui>\n        </section>\n      </card-ui>\n\n      <div class=\"doc-body\">\n        <h2>The pattern</h2>\n        <p>Three pieces:</p>\n        <ol>\n          <li><strong>Inline mounts</strong> for the sidebars wrapped in <code>.wide-only</code> (display: contents at &gt;900px; display: none at ≤900px).</li>\n          <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>\n          <li><strong>MediaQueryList</strong> listener that auto-closes the drawers on viewport widening (the gap FEEDBACK-06 §3 explicitly flagged).</li>\n        </ol>\n\n        <h2>Dual-mount caveat</h2>\n        <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>\n        <ul>\n          <li>Native <code>&lt;input&gt;</code>/<code>&lt;textarea&gt;</code> with no signal binding</li>\n          <li>Components using <code>this.querySelector(...)</code> with imperative state</li>\n          <li>Scroll-position-sensitive containers (e.g. chat threads at a specific scroll)</li>\n        </ul>\n        <p>For these, either: (a) lift the state to a signal in the parent, or (b) document the unmount-on-resize edge.</p>\n\n        <h2>Auto-close on viewport widening</h2>\n        <code-ui language=\"javascript\">const mql = window.matchMedia('(max-width: 900px)');\nmql.addEventListener('change', (e) =&gt; {\n  if (!e.matches) {\n    // Viewport widened past breakpoint — close any open drawers\n    document.getElementById('leading-drawer').open = false;\n    document.getElementById('trailing-drawer').open = false;\n  }\n});</code-ui>\n\n        <h2>State sharing</h2>\n        <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>\n        <code-ui language=\"javascript\">import { signal } from '@adia-ai/web-components/core';\n\nconst activeToken = signal('primary');\n\nstatic template = () =&gt; {\n  const current = activeToken.value;  // dep read here\n  return html`\n    &lt;aside class=\"wide-only\"&gt;\n      &lt;list-ui&gt; ... .active=${current === 'primary'} ... &lt;/list-ui&gt;\n    &lt;/aside&gt;\n    &lt;drawer-ui id=\"leading-drawer\"&gt;\n      &lt;list-ui&gt; ... .active=${current === 'primary'} ... &lt;/list-ui&gt;\n    &lt;/drawer-ui&gt;\n  `;\n}</code-ui>\n\n        <h2>Future v0.6.0: built-in <code>responsive-breakpoint</code></h2>\n        <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>\n      </div>\n    </main>\n\n    <!-- Trailing sidebar — inline mount (wide-only) -->\n    <aside class=\"wide-only\" data-chunk-slot=\"trailing-inline\">\n      <pane-ui>\n        <header>\n          <h3>Settings</h3>\n        </header>\n        <section>\n          <list-ui>\n            <list-item-ui>Lightness</list-item-ui>\n            <list-item-ui>Chroma</list-item-ui>\n            <list-item-ui>Hue</list-item-ui>\n          </list-ui>\n        </section>\n      </pane-ui>\n    </aside>\n  </div>\n\n  <!-- ═══ DRAWER twins (narrow-only) ═══ -->\n  <drawer-ui id=\"leading-drawer\" side=\"left\" size=\"sm\" data-chunk-slot=\"leading-drawer\">\n    <header>\n      <h3>Tokens</h3>\n    </header>\n    <section>\n      <list-ui>\n        <list-item-ui>Primary</list-item-ui>\n        <list-item-ui>Secondary</list-item-ui>\n        <list-item-ui>Neutral</list-item-ui>\n        <list-item-ui>Surface</list-item-ui>\n      </list-ui>\n    </section>\n  </drawer-ui>\n\n  <drawer-ui id=\"trailing-drawer\" side=\"right\" size=\"sm\" data-chunk-slot=\"trailing-drawer\">\n    <header>\n      <h3>Settings</h3>\n    </header>\n    <section>\n      <list-ui>\n        <list-item-ui>Lightness</list-item-ui>\n        <list-item-ui>Chroma</list-item-ui>\n        <list-item-ui>Hue</list-item-ui>\n      </list-ui>\n    </section>\n  </drawer-ui>\n\n  <script type=\"module\">\n    // Wire toolbar buttons to drawer triggers\n    document.getElementById('open-leading')?.addEventListener('press', () => {\n      document.getElementById('leading-drawer').open = true;\n    });\n    document.getElementById('open-trailing')?.addEventListener('press', () => {\n      document.getElementById('trailing-drawer').open = true;\n    });\n\n    // Auto-close drawers when viewport crosses breakpoint (widening)\n    const mql = window.matchMedia('(max-width: 900px)');\n    mql.addEventListener('change', (e) => {\n      if (!e.matches) {\n        document.getElementById('leading-drawer').open = false;\n        document.getElementById('trailing-drawer').open = false;\n      }\n    });\n  </script>\n</body>",
+  "source": "packages/web-components/patterns/responsive-shell-sidebar/responsive-shell-sidebar.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "\"Editor-shell"
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "root",
+      "component": "Text",
+      "textContent": "Tokens Primary Secondary Neutral Surface Responsive Shell Sidebar pattern 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. The pattern Three pieces: Inline mounts for the sidebars wrapped in .wide-only (display: contents at &gt;900px; display: none at ≤900px). Drawer twins with the same children, mounted outside the shell's named slots, controlled by toolbar buttons inside .narrow-only . MediaQueryList listener that auto-closes the drawers on viewport widening (the gap FEEDBACK-06 §3 explicitly flagged). Dual-mount caveat 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 (or vice versa). 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: Native &lt;input&gt; / &lt;textarea&gt; with no signal binding Components using this.querySelector(...) with imperative state Scroll-position-sensitive containers (e.g. chat threads at a specific scroll) For these, either: (a) lift the state to a signal in the parent, or (b) document the unmount-on-resize edge. Auto-close on viewport widening 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; } }); State sharing 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: 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; `; } Future v0.6.0: built-in responsive-breakpoint FEEDBACK-06 §3 Option A proposed a built-in &lt;editor-sidebar responsive-breakpoint=\"900\"&gt; 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 &lt;show-when breakpoint=\"...\"&gt; trait. Until then, the pattern above is the canonical recipe. Settings Lightness Chroma Hue Tokens Primary Secondary Neutral Surface Settings Lightness Chroma Hue // 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; } });",
+      "variant": "body"
+    }
+  ]
+}

package/chunks/row-action-cluster.json

@@ -0,0 +1,54 @@
+{
+  "name": "row-action-cluster",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/row/row.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "action cluster"
+  },
+  "html": "<row-ui gap=\"2\">\n        <button-ui text=\"Cancel\" variant=\"ghost\"></button-ui>\n        <button-ui text=\"Save changes\" variant=\"primary\"></button-ui>\n      </row-ui>",
+  "source": "packages/web-components/components/row/row.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Horizontal action cluster — button group in a row with gap. Default shape for cancel + submit.",
+    "keywords": [
+      "row",
+      "buttons",
+      "actions",
+      "cluster",
+      "inline",
+      "flex",
+      "gap",
+      "horizontal",
+      "cancel",
+      "submit"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "button",
+      "component": "Button",
+      "text": "Cancel",
+      "variant": "ghost"
+    },
+    {
+      "id": "button-2",
+      "component": "Button",
+      "text": "Save changes",
+      "variant": "primary"
+    },
+    {
+      "id": "root",
+      "component": "Row",
+      "gap": "2",
+      "children": [
+        "button",
+        "button-2"
+      ]
+    }
+  ]
+}

package/chunks/row-avatar-name-role.json

@@ -0,0 +1,71 @@
+{
+  "name": "row-avatar-name-role",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/row/row.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "avatar + name + role"
+  },
+  "html": "<row-ui gap=\"3\" align=\"center\">\n        <avatar-ui text=\"KG\" size=\"sm\"></avatar-ui>\n        <col-ui gap=\"0\">\n          <text-ui strong>Kim Granlund</text-ui>\n          <text-ui variant=\"caption\">Owner</text-ui>\n        </col-ui>\n      </row-ui>",
+  "source": "packages/web-components/components/row/row.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "User identity row — avatar beside name and role. Common in tables, sidebars, and user lists.",
+    "keywords": [
+      "row",
+      "avatar",
+      "name",
+      "role",
+      "user",
+      "identity",
+      "inline",
+      "person",
+      "member",
+      "team",
+      "horizontal"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "avatar",
+      "component": "Avatar",
+      "size": "sm",
+      "text": "KG"
+    },
+    {
+      "id": "text",
+      "component": "Text",
+      "strong": true,
+      "textContent": "Kim Granlund"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "Owner"
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "0",
+      "children": [
+        "text",
+        "text-2"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Row",
+      "align": "center",
+      "gap": "3",
+      "children": [
+        "avatar",
+        "column"
+      ]
+    }
+  ]
+}

package/chunks/row-icon-label.json

@@ -0,0 +1,52 @@
+{
+  "name": "row-icon-label",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/row/row.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "icon + label inline"
+  },
+  "html": "<row-ui gap=\"2\" align=\"center\">\n        <icon-ui name=\"check-circle\" style=\"color:var(--a-success)\"></icon-ui>\n        <text-ui>Payment confirmed</text-ui>\n      </row-ui>",
+  "source": "packages/web-components/components/row/row.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Icon beside text label — status indicator row with leading icon and text.",
+    "keywords": [
+      "row",
+      "icon",
+      "label",
+      "status",
+      "indicator",
+      "inline",
+      "leading",
+      "icon-text",
+      "horizontal"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "check-circle",
+      "component": "Icon",
+      "name": "check-circle"
+    },
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Payment confirmed"
+    },
+    {
+      "id": "root",
+      "component": "Row",
+      "align": "center",
+      "gap": "2",
+      "children": [
+        "check-circle",
+        "text"
+      ]
+    }
+  ]
+}

package/chunks/row-spread-label-value.json

@@ -0,0 +1,54 @@
+{
+  "name": "row-spread-label-value",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/row/row.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "spread — label + value"
+  },
+  "html": "<row-ui justify=\"space-between\" align=\"center\">\n        <text-ui>Monthly total</text-ui>\n        <text-ui strong>$12,400</text-ui>\n      </row-ui>",
+  "source": "packages/web-components/components/row/row.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Spread row — label pushed left, value pushed right via justify=space-between. Common in summary rows and list items.",
+    "keywords": [
+      "row",
+      "spread",
+      "justify",
+      "space-between",
+      "label",
+      "value",
+      "summary",
+      "stat",
+      "horizontal",
+      "flex"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Monthly total"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "strong": true,
+      "textContent": "$12,400"
+    },
+    {
+      "id": "root",
+      "component": "Row",
+      "align": "center",
+      "justify": "space-between",
+      "children": [
+        "text",
+        "text-2"
+      ]
+    }
+  ]
+}