@adia-ai/web-components 0.8.34 → 0.8.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.34",
+  "version": "0.8.35",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/patterns/access-requests/access-requests.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Access requests</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">alert-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>field-ui</code> <code>alert-ui</code> <code>tag-ui</code>
   </div>
   <p>The "Request access" path when a user lacks permission for a resource. Three connected surfaces: the access-denied state with a Request CTA, the request form, and the pending-status follow-up. Sub-flavor of approvals (13d) — same async-gate semantics, different entry point.</p>
 </header>

package/patterns/admin-keys-and-export/admin-keys-and-export.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>API keys, webhooks &amp; data export</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">input-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">alert-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>field-ui</code> <code>input-ui</code> <code>tag-ui</code> <code>button-ui</code> <code>alert-ui</code>
   </div>
   <p>Two adjacent admin surfaces: API key + webhook management (04g), and data-export / account-portability (04i). Both compose existing primitives — the patterns are in the wiring, the security copy, and the destructive-action flow.</p>
 </header>

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

@@ -1,10 +1,9 @@
 <header>
   <div>
     <h1>Admin Shell — Composition Pattern</h1>
-    <div data-actions>
-      <tag-ui size="sm">admin-shell</tag-ui>
-      <tag-ui size="sm" variant="ghost">cluster-namespaced</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>admin-shell</code> <code>cluster-namespaced</code>
   </div>
   <p>
     The canonical composition pattern for an admin / SaaS / dashboard

package/patterns/agent-cost/agent-cost.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Agent Cost &amp; Usage</h1>
-    <div data-actions>
-      <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">stat-ui</tag-ui> <tag-ui size="sm">alert-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>tag-ui</code> <code>stat-ui</code> <code>alert-ui</code>
   </div>
   <p>How an agent surfaces its own consumption: token usage, dollar cost, rate-limit headroom. Three shapes — an inline footer indicator, a detailed breakdown card for billing/admin pages, and a rate-limit alert for soft warnings.</p>
 </header>

package/patterns/agent-memory/agent-memory.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Agent Memory</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">list-ui</tag-ui> <tag-ui size="sm">description-list-ui</tag-ui> <tag-ui size="sm">code-ui</tag-ui> <tag-ui size="sm">drawer-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>list-ui</code> <code>description-list-ui</code> <code>code-ui</code> <code>drawer-ui</code>
   </div>
   <p>Surfaces for inspecting and editing what the agent remembers — facts the user has set ("call me Kim"), workspace context ("we use OKLCH for tokens"), and session-scoped state. Three shapes — a memory list, a single-entry detail view, and an editor for adding or revising.</p>
 </header>

package/patterns/agent-prompt-library/agent-prompt-library.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Agent Prompt Library</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">grid-ui</tag-ui> <tag-ui size="sm">search-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">menu-ui</tag-ui> <tag-ui size="sm">option-card-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>grid-ui</code> <code>search-ui</code> <code>tag-ui</code> <code>menu-ui</code> <code>option-card-ui</code>
   </div>
   <p>Saved prompts the user can recall instead of re-typing — recurring queries, formatted recipes, role-pinned starters. Three shapes — the full library page, a compact picker (popover or menu), and the prompt card itself.</p>
 </header>

package/patterns/agent-tool-call/agent-tool-call.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Agent Tool Call</h1>
-    <div data-actions>
-      <tag-ui size="sm">agent-artifact-ui</tag-ui> <tag-ui size="sm">code-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>agent-artifact-ui</code> <code>code-ui</code> <code>button-ui</code>
   </div>
   <p>The block an agent renders when it invokes a tool — search, calculation, API call, function. Four states cover the lifecycle: <strong>running</strong>, <strong>success</strong>, <strong>error</strong>, and the default <strong>collapsed</strong> summary. All four reuse <code>agent-artifact-ui</code> with the <code>kind="TOOL"</code> badge; tone shifts on outcome.</p>
 </header>

package/patterns/alert-dialog/alert-dialog.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Alert dialog</h1>
-    <div data-actions>
-      <tag-ui size="sm">modal-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>modal-ui</code> <code>field-ui</code> <code>button-ui</code>
   </div>
   <p>Demands acknowledgement before continuing (WAI-APG <a href="https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/">alertdialog</a>). modal-ui composed with destructive-confirm semantics: clear consequence prose, danger-colored primary action, Cancel as the safe default. Distinct from <code>&lt;modal-ui&gt;</code> bare (informational / form modal — role=dialog) and from <a href="/site/components/toast">toast-ui</a> with action (which is non-blocking).</p>
 </header>

package/patterns/app-nav/app-nav.examples.html

@@ -43,12 +43,12 @@
 <header>
     <div>
       <h1>App Nav</h1>
-      <div data-actions>
-        <tag-ui size="sm">nav-ui</tag-ui>
-      </div>
+    </div>
+    <div data-tags>
+      <code>nav-ui</code>
     </div>
     <p>Sidebar navigation pattern with groups, items, dividers, spacers, badges, and collapsed popover flyouts.</p>
-  </header>
+</header>
 
 <section data-section data-property="overview">
   <h2 variant="section">Overview</h2>

package/patterns/approvals/approvals.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Approvals</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">list-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>list-ui</code> <code>button-ui</code> <code>tag-ui</code>
   </div>
   <p>The queue + detail surface for items waiting on a human to approve, reject, or request changes — expense reports, PRs, access requests, content reviews. Always asynchronous; the approver sees a list and acts on each item independently.</p>
 </header>

package/patterns/audit-log/audit-log.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Audit log</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">table-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">select-ui</tag-ui> <tag-ui size="sm">input-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>table-ui</code> <code>tag-ui</code> <code>select-ui</code> <code>input-ui</code>
   </div>
   <p>Timestamped actor / action / resource rows for compliance, security review, and operational tracing. table-ui carries the rows; tag-ui carries the action verb's severity; the card header carries filters. Distinct from <a href="/site/components/timeline">timeline-ui</a> (single-actor chronological events) and from <a href="/site/components/feed">feed-ui</a> (notifications / posts surface).</p>
 </header>

package/patterns/bulk-action-toolbar/bulk-action-toolbar.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Bulk Action Toolbar</h1>
-    <div data-actions>
-      <tag-ui size="sm">table-toolbar-ui</tag-ui> <tag-ui size="sm">toolbar-ui</tag-ui> <tag-ui size="sm">table-ui</tag-ui> <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">anchor-bar-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>table-toolbar-ui</code> <code>toolbar-ui</code> <code>table-ui</code> <code>card-ui</code> <code>anchor-bar-ui</code>
   </div>
   <p>When a table has row selection, surface a contextual bulk-action bar. Two variants: swap the standard <code>&lt;table-toolbar-ui&gt;</code> for a bar at the same surface position, or float a card-like elevated bar at the bottom of the table's own scroll container. Selection count anchors the left, actions flow from the right, destructive action last.</p>
 </header>
@@ -49,7 +49,17 @@
            for the same fix applied at a smaller width. -->
       <toolbar-ui id="pat-bulk-actions" data-bulk-bar role="toolbar" aria-label="Bulk actions" align="space-between" hidden>
         <toolbar-group-ui>
-          <text-ui strong><span data-bulk-count>0</span> selected</text-ui>
+          <!-- Whole "N selected" phrase as ONE text-ui's own textContent —
+               NOT a nested <span data-bulk-count> + trailing " selected"
+               text node (gh#1106). The site's HTML→A2UI build transpile
+               (packages/a2ui/compose/transpiler/transpiler.js) defaults any
+               <span> to a block <p> AND reorders trailing loose text ahead
+               of a preceding element child when both live inside a text-ui
+               leaf — on the site route (not this standalone demo file) that
+               rendered "selected" stacked above "6" instead of one line.
+               Update the whole string via [data-bulk-count]'s textContent
+               instead of touching just a child span. -->
+          <text-ui strong data-bulk-count>0 selected</text-ui>
         </toolbar-group-ui>
         <toolbar-group-ui>
           <button-ui text="Archive" icon="archive" variant="ghost" size="sm" data-bulk-action="archive"></button-ui>
@@ -99,7 +109,7 @@
                do the pushing keeps the reflow's width sum accurate. -->
           <toolbar-ui role="toolbar" aria-label="Bulk actions" align="space-between">
             <toolbar-group-ui>
-              <text-ui strong aria-live="polite"><span data-bulk-float-count>0</span> selected</text-ui>
+              <text-ui strong aria-live="polite" data-bulk-float-count>0 selected</text-ui>
               <span data-bulk-controls></span>
             </toolbar-group-ui>
             <toolbar-group-ui>
@@ -130,7 +140,7 @@
          (not a flex-grow spacer — see Rules) pushes the action group right. --&gt;
     &lt;toolbar-ui data-bulk-bar hidden role="toolbar" aria-label="Bulk actions" align="space-between"&gt;
       &lt;toolbar-group-ui&gt;
-        &lt;text-ui strong&gt;&lt;span data-bulk-count&gt;0&lt;/span&gt; selected&lt;/text-ui&gt;
+        &lt;text-ui strong data-bulk-count&gt;0 selected&lt;/text-ui&gt;
       &lt;/toolbar-group-ui&gt;
       &lt;toolbar-group-ui&gt;
         &lt;button-ui text="Archive" icon="archive" variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
@@ -152,7 +162,7 @@ const countEl = bulk.querySelector('[data-bulk-count]');
 
 table.addEventListener('select', (e) =&gt; {
   const n = e.detail.selected?.length ?? 0;
-  countEl.textContent = String(n);
+  countEl.textContent = `${n} selected`;
   tbar.hidden  = n &gt; 0;
   bulk.hidden  = n === 0;
 });</code-ui>
@@ -192,7 +202,7 @@ table.addEventListener('select', (e) =&gt; {
            keeps the width sum accurate (see Rules). --&gt;
       &lt;toolbar-ui role="toolbar" aria-label="Bulk actions" align="space-between"&gt;
         &lt;toolbar-group-ui&gt;
-          &lt;text-ui strong aria-live="polite"&gt;&lt;span data-bulk-count&gt;0&lt;/span&gt; selected&lt;/text-ui&gt;
+          &lt;text-ui strong aria-live="polite" data-bulk-count&gt;0 selected&lt;/text-ui&gt;
           &lt;span data-bulk-controls&gt;&lt;/span&gt;  &lt;!-- optional per-flow controls, e.g. a shared-rationale input --&gt;
         &lt;/toolbar-group-ui&gt;
         &lt;toolbar-group-ui&gt;
@@ -222,7 +232,7 @@ table.addEventListener('select', (e) =&gt; {
 
 table.addEventListener('select', (e) =&gt; {
   const n = e.detail?.selected?.length ?? 0;
-  countEl.textContent = String(n);
+  countEl.textContent = `${n} selected`;
   bar.open = n &gt; 0;
 });
 

package/patterns/bulk-action-toolbar/bulk-action-toolbar.examples.js

@@ -75,7 +75,7 @@ function setupSwap(router) {
 
   table.addEventListener('select', (e) => {
     const n = e.detail?.selected?.length ?? 0;
-    if (countEl) countEl.textContent = String(n);
+    if (countEl) countEl.textContent = `${n} selected`;
     tbar.hidden = n > 0;
     bulk.hidden = n === 0;
   });
@@ -113,7 +113,7 @@ function setupFloating(router) {
   // scope here). No .focus() call anywhere — appearance never steals focus.
   table.addEventListener('select', (e) => {
     const n = e.detail?.selected?.length ?? 0;
-    if (countEl) countEl.textContent = String(n);
+    if (countEl) countEl.textContent = `${n} selected`;
     bar.open = n > 0;
   });
 

package/patterns/changelog-feed/changelog-feed.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Changelog feed</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">list-ui</tag-ui> <tag-ui size="sm">heading-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>tag-ui</code> <code>list-ui</code> <code>heading-ui</code>
   </div>
   <p>"What's new" in-app surface for product updates. Each release entry carries a version + date header, Added / Changed / Fixed / Deprecated section tags following <a href="https://keepachangelog.com/en/1.1.0/">Keep-a-Changelog</a>, and the bulleted change list. Use in admin-shell sidebars (the Changelog nav item), settings pages, or a dedicated /changelog route.</p>
 </header>

package/patterns/chart-in-card/chart-in-card.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Chart in Card</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">chart-ui</tag-ui> <tag-ui size="sm">stat-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>chart-ui</code> <code>stat-ui</code> <code>chart-legend-ui</code>
   </div>
   <p>Composition pattern: embed a chart inside a card so the chart reads as a dashboard tile, not as raw data. Header communicates the metric in words; chart shows the shape; footer adds context.</p>
 </header>
@@ -182,6 +182,38 @@
   </div>
 </section>
 
+<section data-section data-property="full-bleed-with-legend">
+  <h2 variant="section">Full-bleed chart + legend band</h2>
+  <p data-note>
+    <code>bleed</code> only earns true edge-to-edge treatment for bare plotted
+    marks — a sparkline, or another chart type with both <code>hide-grid</code>
+    and <code>hide-values</code> set (gh#1095). A multi-series chart still
+    needs a legend, so keep <code>&lt;chart-legend-ui&gt;</code> OUT of the
+    bled section — wire it to the chart via <code>[for]</code> in a normal
+    (inset) section below instead. It reads as its own band beneath the
+    plot, and never collides with the card's rounded corners.
+  </p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="bled multi-line + legend band">
+      <card-ui data-chunk="chart-in-card-full-bleed-legend" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Full-bleed multi-series chart with legend band — Revenue/Users/Churn multi-line chart bleeding edge-to-edge inside the card, paired with a chart-legend-ui mirroring its series in a normal-inset section below."
+        data-chunk-keywords="chart card multi-line legend bleed edge-to-edge revenue users churn dashboard analytics series toggle" style="max-width:520px;">
+        <header>
+          <span slot="heading"><h3>Growth metrics</h3></span>
+          <text-ui slot="description" color="subtle">Last 6 months</text-ui>
+        </header>
+        <section bleed>
+          <chart-ui id="pat-bleed-legend-chart" type="multi-line" x="month" y="revenue,users,churn" hide-grid hide-values></chart-ui>
+        </section>
+        <section>
+          <chart-legend-ui for="pat-bleed-legend-chart" shape="line"></chart-legend-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
 <section data-section data-property="anatomy">
   <h2 variant="section">Anatomy</h2>
   <code-ui language="html">&lt;card-ui&gt;
@@ -207,6 +239,8 @@
   <h2 variant="section">Rules</h2>
   <ul>
     <li>For sparklines, set <code>bleed</code> on the card's <code>&lt;section&gt;</code> so the line touches the edges.</li>
+    <li><code>bleed</code> is a bare-marks affordance, not a general "edge-to-edge chart" switch (gh#1095). It's safe for a sparkline, or for any other chart <code>type</code> that also sets both <code>hide-grid</code> and <code>hide-values</code> — i.e. nothing that renders axis ticks, gridlines, or value text. A chart that still shows guides or values needs the card's normal inset so that text doesn't collide with (and clip under) the card's rounded corners; card.css restores the inset automatically if it detects either case, so a forgotten <code>hide-grid</code>/<code>hide-values</code> fails safe rather than clipping silently.</li>
+    <li>Never put <code>&lt;chart-legend-ui&gt;</code> inside a <code>bleed</code> section — its badge rows need their own breathing room too. Place it in a plain <code>&lt;section&gt;</code> immediately after the chart's section, wired via <code>chart-legend-ui[for="&lt;chart id&gt;"]</code> (mirrors <code>.legendData</code>; see the "Full-bleed chart + legend band" example above and <a href="/site/components/chart-legend">chart-legend-ui</a>'s own <code>for</code> docs). card.css also restores the section's inset if a legend ends up inside a bled section anyway, so the fallback stays readable rather than edge-clipped.</li>
     <li>Put <code>hide-values</code> on bar/line charts inside cards — the stat in the header already shows the current number.</li>
     <li>Use <code>&lt;stat-ui&gt;</code> in the heading slot only when the card's primary metric is a single number; otherwise use <code>&lt;h3&gt;</code> + description.</li>
     <li>Keep breakdowns shallow — 3–4 stats max. More belongs in a full section, not inside a tile.</li>

package/patterns/chart-in-card/chart-in-card.examples.js

@@ -16,6 +16,15 @@ const sessions = [
   { day: 'Sun', sessions: 360 },
 ];
 
+const growthMetrics = [
+  { month: 'Jan', revenue: 32, users: 18, churn: 4 },
+  { month: 'Feb', revenue: 41, users: 24, churn: 3 },
+  { month: 'Mar', revenue: 38, users: 27, churn: 5 },
+  { month: 'Apr', revenue: 52, users: 33, churn: 3 },
+  { month: 'May', revenue: 58, users: 39, churn: 2 },
+  { month: 'Jun', revenue: 67, users: 45, churn: 3 },
+];
+
 const sparkline = (vals) => vals.map((v, i) => ({ d: i, v }));
 
 export default function setup(router) {
@@ -43,4 +52,7 @@ export default function setup(router) {
 
   const filterSess = router.querySelector('#pat-filter-sessions');
   if (filterSess) filterSess.data = sessions;
+
+  const bleedLegend = router.querySelector('#pat-bleed-legend-chart');
+  if (bleedLegend) bleedLegend.data = growthMetrics;
 }

package/patterns/chart-in-card/chart-in-card.html

@@ -10,28 +10,34 @@
   <link rel="stylesheet" href="../../styles/tokens.css">
 
   <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/badge/badge.css">
   <link rel="stylesheet" href="../../components/button/button.css">
   <link rel="stylesheet" href="../../components/card/card.css">
   <link rel="stylesheet" href="../../components/chart/chart.css">
+  <link rel="stylesheet" href="../../components/chart-legend/chart-legend.css">
   <link rel="stylesheet" href="../../components/code/code.css">
   <link rel="stylesheet" href="../../components/col/col.css">
   <link rel="stylesheet" href="../../components/grid/grid.css">
   <link rel="stylesheet" href="../../components/segment/segment.css">
   <link rel="stylesheet" href="../../components/segmented/segmented.css">
   <link rel="stylesheet" href="../../components/stat/stat.css">
+  <link rel="stylesheet" href="../../components/swatch/swatch.css">
   <link rel="stylesheet" href="../../components/tag/tag.css">
   <link rel="stylesheet" href="../../components/text/text.css">
 
   <!-- Component JS -->
+  <script type="module" src="../../components/badge/badge.js"></script>
   <script type="module" src="../../components/button/button.js"></script>
   <script type="module" src="../../components/card/card.js"></script>
   <script type="module" src="../../components/chart/chart.js"></script>
+  <script type="module" src="../../components/chart-legend/chart-legend.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/grid/grid.js"></script>
   <script type="module" src="../../components/segment/segment.js"></script>
   <script type="module" src="../../components/segmented/segmented.js"></script>
   <script type="module" src="../../components/stat/stat.js"></script>
+  <script type="module" src="../../components/swatch/swatch.js"></script>
   <script type="module" src="../../components/tag/tag.js"></script>
   <script type="module" src="../../components/text/text.js"></script>
 

package/patterns/chat-shell/chat-shell.examples.html

@@ -1,10 +1,9 @@
 <header>
   <div>
     <h1>Chat Shell — Composition Pattern</h1>
-    <div data-actions>
-      <tag-ui size="sm">chat-shell</tag-ui>
-      <tag-ui size="sm" variant="ghost">cluster-namespaced</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>chat-shell</code> <code>cluster-namespaced</code>
   </div>
   <p>
     The canonical composition pattern for an LLM chat surface. Built from

package/patterns/comments-and-collaboration/comments-and-collaboration.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Comments &amp; Collaboration</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">avatar-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">menu-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>avatar-ui</code> <code>field-ui</code> <code>menu-ui</code> <code>tag-ui</code> <code>button-ui</code>
   </div>
   <p>The substrate for comments threads, @-mentions, and emoji reactions on any first-class object — docs, tasks, designs, code reviews. Composed entirely from existing primitives; the pattern is in the wiring, not in new components.</p>
 </header>

package/patterns/conversion-funnel/conversion-funnel.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Conversion Funnel</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">progress-row-ui</tag-ui> <tag-ui size="sm">row-ui</tag-ui> <tag-ui size="sm">col-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>progress-row-ui</code> <code>row-ui</code> <code>col-ui</code>
   </div>
   <p>Composition pattern: render a multi-step drop-off funnel without a dedicated funnel component. Uses <code>progress-row-ui</code> for each step so the bar, label, and meta text stay aligned to the card-ui content rhythm.</p>
 </header>

package/patterns/data-tables-inline-edit-and-tree/data-tables-inline-edit-and-tree.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Inline-edit grids &amp; tree tables</h1>
-    <div data-actions>
-      <tag-ui size="sm">table-ui</tag-ui> <tag-ui size="sm">tree-ui</tag-ui> <tag-ui size="sm">input-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>table-ui</code> <code>tree-ui</code> <code>input-ui</code> <code>field-ui</code> <code>tag-ui</code>
   </div>
   <p>Two adjacent advanced data-table patterns: spreadsheet-style cells the user can edit inline (06i) and hierarchical rows with expand/collapse (06j). Both compose existing primitives — `&lt;table-ui&gt;` for the grid, `&lt;tree-ui&gt;` for the hierarchy.</p>
 </header>

package/patterns/diff-review/diff-review.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Diff &amp; Review</h1>
-    <div data-actions>
-      <tag-ui size="sm">code-ui</tag-ui> <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">text-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>code-ui</code> <code>card-ui</code> <code>text-ui</code> <code>tag-ui</code>
   </div>
   <p>The before/after viewer that surfaces every change. Three shapes: code diff (side-by-side or inline), prose diff (rendered text with markup), and structured diff (field-level deltas on a record).</p>
 </header>

package/patterns/editor-shell/editor-shell.examples.html

@@ -1,10 +1,9 @@
 <header>
   <div>
     <h1>Editor Shell — Composition Pattern</h1>
-    <div data-actions>
-      <tag-ui size="sm">editor-shell</tag-ui>
-      <tag-ui size="sm" variant="ghost">cluster-namespaced</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>editor-shell</code> <code>cluster-namespaced</code>
   </div>
   <p>
     The canonical composition pattern for design-tool / code-editor /

package/patterns/export-flow/export-flow.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Export flow</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">select-ui</tag-ui> <tag-ui size="sm">radio-ui</tag-ui> <tag-ui size="sm">check-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">alert-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>field-ui</code> <code>select-ui</code> <code>radio-ui</code> <code>check-ui</code> <code>button-ui</code> <code>alert-ui</code>
   </div>
   <p>Generic export-request form. User picks scope, format, and delivery (download or email), then submits. Distilled from the data-export-request flow in <a href="/site/patterns/admin-keys-and-export">admin-keys-and-export</a> — use this when an export form lives standalone (settings panel, admin shell, in-context "Export…" affordance).</p>
 </header>

package/patterns/filter-bar/filter-bar.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Filter Bar</h1>
-    <div data-actions>
-      <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">popover-ui</tag-ui> <tag-ui size="sm">action-list-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>tag-ui</code> <code>popover-ui</code> <code>action-list-ui</code>
   </div>
   <p>Row of active filters above a table or list. Each filter is a removable chip; a trailing "Add filter" button opens a popover of available facets. Distinct from full-text search, which stays in the toolbar.</p>
 </header>

package/patterns/form-drawer/form-drawer.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Form Drawer</h1>
-    <div data-actions>
-      <tag-ui size="sm">drawer-ui</tag-ui> <tag-ui size="sm">header</tag-ui> <tag-ui size="sm">body</tag-ui> <tag-ui size="sm">footer</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>drawer-ui</code> <code>header</code> <code>body</code> <code>footer</code>
   </div>
   <p>Side-opening drawer with a sticky action row. The most common drawer shape in admin tools: header names the task, body scrolls the form, footer pins Cancel/Save so they stay reachable without scrolling.</p>
 </header>

package/patterns/forms-conditional-and-autocomplete/forms-conditional-and-autocomplete.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Conditional fields &amp; address autocomplete</h1>
-    <div data-actions>
-      <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">input-ui</tag-ui> <tag-ui size="sm">select-ui</tag-ui> <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">radio-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>field-ui</code> <code>input-ui</code> <code>select-ui</code> <code>card-ui</code> <code>radio-ui</code>
   </div>
   <p>Two adjacent form patterns: revealing fields based on prior answers (07i) and address-input that resolves a free-text query into structured fields (07j). Both compose existing form primitives — the pattern is in the wiring, not in new components.</p>
 </header>

package/patterns/inline-dialog/inline-dialog.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Inline dialog</h1>
-    <div data-actions>
-      <tag-ui size="sm">popover-ui</tag-ui> <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>popover-ui</code> <code>card-ui</code> <code>field-ui</code> <code>button-ui</code>
   </div>
   <p>Anchored, non-modal dialog — popover-ui content given dialog semantics (heading + body + actions). Atlassian-style affordance for in-context decisions that don't warrant blocking the page. Distinct from <a href="/site/components/modal">modal-ui</a> (page-blocking, focus-trapped, role=dialog) and <a href="/site/components/popover">popover-ui</a> bare (general anchored surface).</p>
 </header>

package/patterns/kanban-board/kanban-board.examples.html

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Kanban board &amp; sortable lists</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">grid-ui</tag-ui> <tag-ui size="sm">list-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">avatar-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>grid-ui</code> <code>list-ui</code> <code>tag-ui</code> <code>avatar-ui</code>
   </div>
   <p>The drag-to-reorder + drag-between-columns surface. Two patterns share the same primitives: a single sortable list (priority queue, playlist) and a multi-column kanban (status swimlanes, sprint board, pipeline). Both compose <code>card-ui</code>s in containers with HTML5 drag-and-drop wiring.</p>
 </header>

package/patterns/layout/layout.examples.html

@@ -1,15 +1,12 @@
 <header>
     <div>
       <h1>Layout</h1>
-      <div data-actions>
-        <tag-ui size="sm">col-ui</tag-ui>
-        <tag-ui size="sm">row-ui</tag-ui>
-        <tag-ui size="sm">grid-ui</tag-ui>
-        <tag-ui size="sm">stack-ui</tag-ui>
-      </div>
+    </div>
+    <div data-tags>
+      <code>col-ui</code> <code>row-ui</code> <code>grid-ui</code> <code>stack-ui</code>
     </div>
     <p>Layout primitives — flex columns, flex rows, CSS grids, and stacked overlays — each with consistent gap, alignment, and justification controls.</p>
-  </header>
+</header>
 
 
 <section data-section data-property="col">