@adia-ai/web-components 0.8.43 → 0.8.45

package/package.json

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

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

@@ -41,7 +41,7 @@
         </section>
         <footer divider>
           <button-ui slot="action" text="Go back" variant="ghost"></button-ui>
-          <button-ui slot="action" text="Request access" variant="primary" icon-leading="paper-plane-tilt"></button-ui>
+          <button-ui slot="action" text="Request access" variant="primary" icon="paper-plane-tilt"></button-ui>
         </footer>
       </card-ui>
     </div>

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

@@ -33,13 +33,13 @@
         <header>
           <span slot="heading" variant="section">API keys</span>
           <text-ui slot="description" color="subtle">3 active · last rotated 12 days ago</text-ui>
-          <button-ui slot="action" text="Create key" variant="primary" size="sm" icon-leading="plus"></button-ui>
+          <button-ui slot="action" text="Create key" variant="primary" size="sm" icon="plus"></button-ui>
         </header>
         <section bleed>
           <list-ui divider contained>
             <list-item-ui text="Production — backend">
               <icon-ui slot="icon" name="key" size="sm"></icon-ui>
-              <span slot="description"><code>sk_live_…A4F2</code> · last used 4 minutes ago</span>
+              <span slot="description"><code>sk_test_…A4F2</code> · last used 4 minutes ago</span>
               <row-ui slot="action" gap="2" align="center">
                 <tag-ui variant="primary">read · write</tag-ui>
                 <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
@@ -47,7 +47,7 @@
             </list-item-ui>
             <list-item-ui text="CI — read-only">
               <icon-ui slot="icon" name="key" size="sm"></icon-ui>
-              <span slot="description"><code>sk_live_…9821</code> · last used 2 hours ago</span>
+              <span slot="description"><code>sk_test_…9821</code> · last used 2 hours ago</span>
               <row-ui slot="action" gap="2" align="center">
                 <tag-ui>read</tag-ui>
                 <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
@@ -84,7 +84,7 @@
         <section>
           <col-ui gap="3">
             <field-ui label="Production — backend">
-              <input-ui name="api_key" value="sk_live_4f8b2e7c91d2a48fA4F2" readonly icon-trailing="copy"></input-ui>
+              <input-ui name="api_key" value="sk_test_FAKEDEMOKEY0000A4F2" readonly suffix="copy"></input-ui>
             </field-ui>
             <alert-ui variant="warning" icon="warning">
               <col-ui slot="content" gap="0-5">
@@ -114,7 +114,7 @@
         <header>
           <span slot="heading" variant="section">Webhooks</span>
           <text-ui slot="description" color="subtle">2 endpoints · 1 failing</text-ui>
-          <button-ui slot="action" text="Add endpoint" variant="primary" size="sm" icon-leading="plus"></button-ui>
+          <button-ui slot="action" text="Add endpoint" variant="primary" size="sm" icon="plus"></button-ui>
         </header>
         <section bleed>
           <list-ui divider contained>
@@ -211,7 +211,7 @@
               <span slot="description">Ready 2 hours ago · 4.2 MB · expires in 6 days</span>
               <row-ui slot="action" gap="2" align="center">
                 <tag-ui variant="success">Ready</tag-ui>
-                <button-ui text="Download" variant="primary" size="sm" icon-leading="download-simple"></button-ui>
+                <button-ui text="Download" variant="primary" size="sm" icon="download-simple"></button-ui>
               </row-ui>
             </list-item-ui>
             <list-item-ui text="Workspace · JSON">
@@ -229,7 +229,7 @@
 <section data-section data-property="composition">
   <h2 variant="section">Composition rules</h2>
   <ul>
-    <li><strong>Show the prefix, never the full key</strong> — the list view always renders <code>sk_live_…A4F2</code>. The full secret only ever appears in the one-time reveal card; if the user lost it, they have to revoke + recreate. Storing the full key in the DB plaintext is the smell this convention prevents.</li>
+    <li><strong>Show the prefix, never the full key</strong> — the list view always renders <code>sk_test_…A4F2</code>. The full secret only ever appears in the one-time reveal card; if the user lost it, they have to revoke + recreate. Storing the full key in the DB plaintext is the smell this convention prevents.</li>
     <li><strong>One-time reveal needs a confirmation gate</strong> — the "I've stored it safely" button is the user's acknowledgment that they grabbed the key. Closing the modal/page without clicking it should still hide the secret (security default).</li>
     <li><strong>Webhook failures are first-class</strong> — a 503 tag + Retry button is the canonical row. Hiding failures in a sub-page guarantees they get ignored.</li>
     <li><strong>Data export is async, not sync</strong> — never block the UI on a "Generate now" call. Queue the job; email the link. Users with 1M-record workspaces shouldn't see a spinner.</li>

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

@@ -29,9 +29,9 @@
         data-chunk-domain="agent"
         data-chunk-description="Inline agent-cost strip — compact tag row showing per-response cost, token count, and latency, with the model name right-aligned. Rides under an agent reply as a usage footer."
         data-chunk-keywords="agent cost tokens latency model usage inline strip tags price per-response footer telemetry llm" gap="2" align="center" padding="2" style="max-width: 560px;">
-        <tag-ui icon="coins">$0.014</tag-ui>
-        <tag-ui icon="hash">2,184 tok</tag-ui>
-        <tag-ui icon="timer">3.2s</tag-ui>
+        <tag-ui>$0.014</tag-ui>
+        <tag-ui>2,184 tok</tag-ui>
+        <tag-ui>3.2s</tag-ui>
         <row-ui grow></row-ui>
         <text-ui color="subtle" size="sm">claude-opus-4-7</text-ui>
       </row-ui>
@@ -55,8 +55,8 @@
         <section>
           <col-ui gap="3">
             <grid-ui columns="3" gap="2">
-              <stat-ui label="Cost" value="$2.41" trend="up" delta="+18%"></stat-ui>
-              <stat-ui label="Tokens" value="184k" trend="up" delta="+12%"></stat-ui>
+              <stat-ui label="Cost" value="$2.41" trend="up" change="+18%"></stat-ui>
+              <stat-ui label="Tokens" value="184k" trend="up" change="+12%"></stat-ui>
               <stat-ui label="Calls" value="47" trend="flat"></stat-ui>
             </grid-ui>
             <description-list-ui layout="inline" align="between">
@@ -69,7 +69,7 @@
         </section>
         <footer divider>
           <text-ui slot="description" color="subtle" size="sm">Plan limit: 1M tokens / day</text-ui>
-          <button-ui slot="action" text="View invoice" variant="ghost" size="sm" icon-leading="receipt"></button-ui>
+          <button-ui slot="action" text="View invoice" variant="ghost" size="sm" icon="receipt"></button-ui>
         </footer>
       </card-ui>
     </div>

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

@@ -32,7 +32,7 @@
         <header>
           <span slot="heading" variant="section">Agent memory</span>
           <text-ui slot="description" color="subtle">14 entries across 3 sources</text-ui>
-          <button-ui slot="action" text="Add memory" variant="ghost" size="sm" icon-leading="plus"></button-ui>
+          <button-ui slot="action" text="Add memory" variant="ghost" size="sm" icon="plus"></button-ui>
         </header>
         <section bleed>
           <list-ui divider contained>
@@ -96,8 +96,8 @@
           </col-ui>
         </section>
         <footer divider>
-          <button-ui slot="action" text="Delete" variant="ghost" color="danger" size="sm" icon-leading="trash"></button-ui>
-          <button-ui slot="action" text="Edit" variant="outline" size="sm" icon-leading="pencil"></button-ui>
+          <button-ui slot="action" text="Delete" variant="ghost" color="danger" size="sm" icon="trash"></button-ui>
+          <button-ui slot="action" text="Edit" variant="outline" size="sm" icon="pencil"></button-ui>
         </footer>
       </card-ui>
     </div>

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

@@ -32,7 +32,7 @@
         <header>
           <span slot="heading" variant="section">Prompt library</span>
           <text-ui slot="description" color="subtle">12 prompts · 4 categories</text-ui>
-          <button-ui slot="action" text="New prompt" variant="primary" size="sm" icon-leading="plus"></button-ui>
+          <button-ui slot="action" text="New prompt" variant="primary" size="sm" icon="plus"></button-ui>
         </header>
         <section>
           <col-ui gap="3">
@@ -48,19 +48,19 @@
               <tag-ui>Personal · 2</tag-ui>
             </row-ui>
             <grid-ui columns="2" gap="2">
-              <card-ui compact>
+              <card-ui size="sm">
                 <header><span slot="heading">Code review</span><tag-ui slot="action">Pinned</tag-ui></header>
                 <section><text-ui color="subtle" size="sm">Review the diff for security, perf, and naming. Flag with file:line. Suggest fixes inline.</text-ui></section>
               </card-ui>
-              <card-ui compact>
+              <card-ui size="sm">
                 <header><span slot="heading">Standup draft</span></header>
                 <section><text-ui color="subtle" size="sm">Summarize what I did yesterday from my git log. Group by repo. End with today's plan.</text-ui></section>
               </card-ui>
-              <card-ui compact>
+              <card-ui size="sm">
                 <header><span slot="heading">Spec from notes</span></header>
                 <section><text-ui color="subtle" size="sm">Turn these notes into a spec doc with sections: problem, design, alternatives, open questions.</text-ui></section>
               </card-ui>
-              <card-ui compact>
+              <card-ui size="sm">
                 <header><span slot="heading">Bug repro</span></header>
                 <section><text-ui color="subtle" size="sm">Given this stack trace, propose three hypotheses ordered by likelihood. Show the test that would falsify each.</text-ui></section>
               </card-ui>
@@ -159,9 +159,9 @@
           </col-ui>
         </section>
         <footer divider>
-          <button-ui slot="action" text="Delete" variant="ghost" color="danger" size="sm" icon-leading="trash"></button-ui>
-          <button-ui slot="action" text="Edit" variant="ghost" size="sm" icon-leading="pencil"></button-ui>
-          <button-ui slot="action" text="Run" variant="primary" size="sm" icon-leading="play"></button-ui>
+          <button-ui slot="action" text="Delete" variant="ghost" color="danger" size="sm" icon="trash"></button-ui>
+          <button-ui slot="action" text="Edit" variant="ghost" size="sm" icon="pencil"></button-ui>
+          <button-ui slot="action" text="Run" variant="primary" size="sm" icon="play"></button-ui>
         </footer>
       </card-ui>
     </div>

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

@@ -32,7 +32,7 @@
         <col-ui gap="2">
           <code-ui language="json">{ "query": "claude opus tool use latency", "max_results": 5 }</code-ui>
           <row-ui align="center" gap="2">
-            <progress-ui indeterminate size="sm" style="flex: 1;"></progress-ui>
+            <progress-ui size="sm" style="flex: 1;"></progress-ui>
             <text-ui color="subtle" size="sm">Running…</text-ui>
           </row-ui>
         </col-ui>

package/patterns/approvals/approvals.examples.html

@@ -30,7 +30,7 @@
         <header>
           <span slot="heading" variant="section">Pending your approval</span>
           <text-ui slot="description" color="subtle">5 items · 2 high priority</text-ui>
-          <button-ui slot="action" text="Approve all" variant="ghost" size="sm" icon-leading="check"></button-ui>
+          <button-ui slot="action" text="Approve all" variant="ghost" size="sm" icon="check"></button-ui>
         </header>
         <section bleed>
           <!-- Canonical list-item rows: text + slot="description" + slot="icon" +
@@ -44,7 +44,7 @@
               <span slot="description"><tag-ui variant="warning">High</tag-ui> Jordan Lee · Engineering · 2 hours ago</span>
               <row-ui slot="action" gap="2" align="center">
                 <button-ui text="Reject" variant="ghost" size="sm"></button-ui>
-                <button-ui text="Approve" variant="primary" size="sm" icon-leading="check"></button-ui>
+                <button-ui text="Approve" variant="primary" size="sm" icon="check"></button-ui>
               </row-ui>
             </list-item-ui>
             <list-item-ui text="Vendor contract — Adobe Creative Cloud">
@@ -52,7 +52,7 @@
               <span slot="description">Avery Chen · Design · 5 hours ago</span>
               <row-ui slot="action" gap="2" align="center">
                 <button-ui text="Reject" variant="ghost" size="sm"></button-ui>
-                <button-ui text="Approve" variant="primary" size="sm" icon-leading="check"></button-ui>
+                <button-ui text="Approve" variant="primary" size="sm" icon="check"></button-ui>
               </row-ui>
             </list-item-ui>
             <list-item-ui text="Access request — production database">
@@ -60,7 +60,7 @@
               <span slot="description"><tag-ui variant="warning">High</tag-ui> Sam Park · Data · 1 day ago</span>
               <row-ui slot="action" gap="2" align="center">
                 <button-ui text="Reject" variant="ghost" size="sm"></button-ui>
-                <button-ui text="Approve" variant="primary" size="sm" icon-leading="check"></button-ui>
+                <button-ui text="Approve" variant="primary" size="sm" icon="check"></button-ui>
               </row-ui>
             </list-item-ui>
             <list-item-ui text="Travel — SF → NYC, May 12–14">
@@ -68,7 +68,7 @@
               <span slot="description">Riley Tan · Sales · 2 days ago</span>
               <row-ui slot="action" gap="2" align="center">
                 <button-ui text="Reject" variant="ghost" size="sm"></button-ui>
-                <button-ui text="Approve" variant="primary" size="sm" icon-leading="check"></button-ui>
+                <button-ui text="Approve" variant="primary" size="sm" icon="check"></button-ui>
               </row-ui>
             </list-item-ui>
           </list-ui>
@@ -105,7 +105,7 @@
         <footer divider>
           <button-ui slot="action" text="Reject" variant="ghost"></button-ui>
           <button-ui slot="action" text="Request changes" variant="ghost"></button-ui>
-          <button-ui slot="action" text="Approve" variant="primary" icon-leading="check"></button-ui>
+          <button-ui slot="action" text="Approve" variant="primary" icon="check"></button-ui>
         </footer>
       </card-ui>
     </div>

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

@@ -46,7 +46,7 @@
         <footer divider>
           <text-ui color="subtle" size="sm">Showing 8 of 247 events</text-ui>
           <row-ui slot="action" gap="2">
-            <button-ui text="Export" variant="ghost" size="sm" icon-leading="download-simple"></button-ui>
+            <button-ui text="Export" variant="ghost" size="sm" icon="download-simple"></button-ui>
             <button-ui text="Load older" variant="ghost" size="sm"></button-ui>
           </row-ui>
         </footer>

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

@@ -113,11 +113,11 @@
               <span data-bulk-controls></span>
             </toolbar-group-ui>
             <toolbar-group-ui>
-              <button-ui icon="archive" icon-only aria-label="Archive" variant="ghost" size="sm" data-bulk-action="archive"></button-ui>
-              <button-ui icon="download-simple" icon-only aria-label="Export" variant="ghost" size="sm" data-bulk-action="export"></button-ui>
-              <button-ui icon="folder-simple" icon-only aria-label="Move" variant="ghost" size="sm" data-bulk-action="move"></button-ui>
+              <button-ui icon="archive" aria-label="Archive" variant="ghost" size="sm" data-bulk-action="archive"></button-ui>
+              <button-ui icon="download-simple" aria-label="Export" variant="ghost" size="sm" data-bulk-action="export"></button-ui>
+              <button-ui icon="folder-simple" aria-label="Move" variant="ghost" size="sm" data-bulk-action="move"></button-ui>
               <divider-ui vertical></divider-ui>
-              <button-ui icon="trash" icon-only aria-label="Delete" variant="ghost" size="sm" data-bulk-action="delete"></button-ui>
+              <button-ui icon="trash" aria-label="Delete" variant="ghost" size="sm" data-bulk-action="delete"></button-ui>
               <divider-ui vertical></divider-ui>
               <button-ui text="Clear" variant="ghost" size="sm" data-bulk-clear></button-ui>
             </toolbar-group-ui>

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

@@ -214,6 +214,120 @@
   </div>
 </section>
 
+<section data-section data-property="full-bleed-card-padding-none">
+  <h2 variant="section">Full-bleed via card padding="none" (Chart 2.0)</h2>
+  <p data-note>
+    Chart 2.0's own full-bleed mechanism (<a href="/site/docs/adr/adr-0074">ADR-0074</a>'s
+    <code>ratio</code> grammar + <a href="/site/docs/spec/spec-charts-2-0-ratio-and-surface">the
+    ratio-and-surface SPEC</a>'s REQ-R-001) is <strong>not</strong> the same affordance as
+    <code>section[bleed]</code> above — <code>&lt;card-ui padding="none"&gt;</code> zeroes the
+    CARD's own outer inset while the chart keeps its own internal plot margins (axis-label
+    gutters, computed per-ratio — REQ-R-004), so axis ticks and value labels render normally
+    with no clipping risk; <code>[bleed]</code> instead asks the chart itself to render bare
+    marks (hence its own <code>no-grid</code>/<code>no-values</code> requirement above). Pick
+    <code>padding="none"</code> for a premium edge-to-edge card tile that still shows a full
+    axis; pick <code>[bleed]</code> for a truly bare sparkline-style mark.
+  </p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="full-bleed bar, 3:2 (wide)">
+      <card-ui padding="none" data-chunk="chart-in-card-full-bleed-bar-wide" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Full-bleed bar chart card pinned to the 3:2 wide ratio — Revenue by month, edge-to-edge against the card's own quiet container-low background, no outer card padding."
+        data-chunk-keywords="chart card bar full-bleed edge-to-edge revenue wide ratio padding none dashboard analytics premium" style="max-width:420px;">
+        <section>
+          <chart-ui id="pat-bleed-bar-wide" type="bar" ratio="3:2" x="month" y="revenue"></chart-ui>
+        </section>
+      </card-ui>
+    </div>
+    <div data-artifact-item data-artifact-label="full-bleed line, 1:1 (square)">
+      <card-ui padding="none" data-chunk="chart-in-card-full-bleed-line-square" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Full-bleed line chart card pinned to the 1:1 square ratio — Users trend, edge-to-edge against the card's own quiet container-low background, no outer card padding."
+        data-chunk-keywords="chart card line full-bleed edge-to-edge users square ratio padding none dashboard analytics premium" style="max-width:320px;">
+        <section>
+          <chart-ui id="pat-bleed-line-square" type="line" ratio="1:1" x="month" y="users" smooth="0.4"></chart-ui>
+        </section>
+      </card-ui>
+    </div>
+    <div data-artifact-item data-artifact-label="full-bleed bar, 2:3 (tall)">
+      <card-ui padding="none" data-chunk="chart-in-card-full-bleed-bar-tall" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Full-bleed bar chart card pinned to the 2:3 tall ratio — Sessions by day, rendered in horizontal-bar orientation (category on Y) for the narrow column, edge-to-edge against the card's own quiet container-low background."
+        data-chunk-keywords="chart card bar full-bleed edge-to-edge sessions tall ratio horizontal padding none dashboard analytics premium" style="max-width:220px;">
+        <section>
+          <chart-ui id="pat-bleed-bar-tall" type="bar" ratio="2:3" x="day" y="sessions"></chart-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="full-bleed-ratio-legend">
+  <h2 variant="section">Full-bleed + ratio + legend, together (plan step 7)</h2>
+  <p data-note>
+    The full-bleed proof above (bar/line/bar) uses single-series, no-legend
+    types — REQ-R-006's own ≥3-instance floor. This trio completes the
+    pattern for the more common multi-series case: a full-bleed
+    (<code>card-ui padding="none"</code>) chart pinned to a studied ratio,
+    paired with a <code>&lt;chart-legend-ui for&gt;</code> that mirrors the
+    same resolved bucket (<a href="/site/components/chart-legend">step 5</a>,
+    REQ-R-005) rather than running its own classification. The legend sits
+    in a plain <code>&lt;section&gt;</code> below the chart's — its own
+    internal row padding (<code>--chart-legend-py</code>) supplies the
+    breathing room a zero-inset card no longer provides.
+  </p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="full-bleed stacked-bar + row legend, 3:2 (wide)">
+      <card-ui padding="none" data-chunk="chart-in-card-full-bleed-legend-stacked-wide" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Full-bleed stacked-bar chart card pinned to the 3:2 wide ratio with a mirrored horizontal-row legend below — Sessions by device segment, edge-to-edge against the card's own quiet container-low background."
+        data-chunk-keywords="chart card stacked-bar full-bleed edge-to-edge legend row wide ratio segments sessions device dashboard analytics premium" style="max-width:420px;">
+        <header>
+          <span slot="heading"><h3>Sessions by device</h3></span>
+        </header>
+        <section>
+          <chart-ui id="pat-fb-legend-32-chart" type="stacked-bar" ratio="3:2" x="quarter" y="desktop,mobile,tablet"></chart-ui>
+        </section>
+        <section>
+          <chart-legend-ui for="pat-fb-legend-32-chart"></chart-legend-ui>
+        </section>
+      </card-ui>
+    </div>
+    <div data-artifact-item data-artifact-label="full-bleed composed + grid legend, 1:1 (square, deemphasized secondary)">
+      <card-ui padding="none" data-chunk="chart-in-card-full-bleed-legend-composed-square" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Full-bleed composed bar+line chart card pinned to the 1:1 square ratio with a mirrored 2-column grid legend below — Revenue bars with a de-emphasized Growth line overlay, edge-to-edge against the card's own quiet container-low background."
+        data-chunk-keywords="chart card composed full-bleed edge-to-edge legend grid square ratio revenue growth deemphasized dashboard analytics premium" style="max-width:320px;">
+        <header>
+          <span slot="heading"><h3>Revenue vs. growth</h3></span>
+        </header>
+        <section>
+          <chart-ui id="pat-fb-legend-11-chart" type="composed" ratio="1:1" x="quarter" y="revenue,growth"></chart-ui>
+        </section>
+        <section>
+          <chart-legend-ui for="pat-fb-legend-11-chart"></chart-legend-ui>
+        </section>
+      </card-ui>
+    </div>
+    <div data-artifact-item data-artifact-label="full-bleed grouped-bar + list legend, 2:3 (tall)">
+      <card-ui padding="none" data-chunk="chart-in-card-full-bleed-legend-grouped-tall" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Full-bleed grouped-bar chart card pinned to the 2:3 tall ratio with a mirrored vertical-list legend below — Desktop vs Mobile signups by quarter, rotated to horizontal bars for the narrow column, edge-to-edge against the card's own quiet container-low background."
+        data-chunk-keywords="chart card grouped-bar full-bleed edge-to-edge legend list tall ratio desktop mobile signups quarter dashboard analytics premium" style="max-width:220px;">
+        <header>
+          <span slot="heading"><h3>Signups by platform</h3></span>
+        </header>
+        <section>
+          <chart-ui id="pat-fb-legend-23-chart" type="grouped-bar" ratio="2:3" x="quarter" y="desktop,mobile"></chart-ui>
+        </section>
+        <section>
+          <chart-legend-ui for="pat-fb-legend-23-chart"></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;

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

@@ -55,4 +55,41 @@ export default function setup(router) {
 
   const bleedLegend = router.querySelector('#pat-bleed-legend-chart');
   if (bleedLegend) bleedLegend.data = growthMetrics;
+
+  // Wave A (gh#1624 plan step 2) — full-bleed `card-ui[padding="none"]`
+  // proof set, one instance per ratio bucket.
+  const bleedBarWide = router.querySelector('#pat-bleed-bar-wide');
+  if (bleedBarWide) bleedBarWide.data = monthlyRevenue;
+
+  const bleedLineSquare = router.querySelector('#pat-bleed-line-square');
+  if (bleedLineSquare) bleedLineSquare.data = monthlyRevenue.map(d => ({ month: d.month, users: Math.round(d.revenue / 3) }));
+
+  const bleedBarTall = router.querySelector('#pat-bleed-bar-tall');
+  if (bleedBarTall) bleedBarTall.data = sessions;
+
+  // Step 7 (gh#1624 plan step 7) — full-bleed × ratio × chart-legend-ui
+  // mirroring, together, across three multi-series types (one per ratio).
+  const fbLegendStacked = router.querySelector('#pat-fb-legend-32-chart');
+  if (fbLegendStacked) fbLegendStacked.data = [
+    { quarter: 'Q1', desktop: 1200, mobile: 640, tablet: 180 },
+    { quarter: 'Q2', desktop: 1350, mobile: 780, tablet: 210 },
+    { quarter: 'Q3', desktop: 1180, mobile: 860, tablet: 195 },
+    { quarter: 'Q4', desktop: 1420, mobile: 910, tablet: 230 },
+  ];
+
+  const fbLegendComposed = router.querySelector('#pat-fb-legend-11-chart');
+  if (fbLegendComposed) fbLegendComposed.data = [
+    { quarter: 'Q1', revenue: 40, growth: 60 },
+    { quarter: 'Q2', revenue: 55, growth: 70 },
+    { quarter: 'Q3', revenue: 45, growth: 58 },
+    { quarter: 'Q4', revenue: 70, growth: 82 },
+  ];
+
+  const fbLegendGrouped = router.querySelector('#pat-fb-legend-23-chart');
+  if (fbLegendGrouped) fbLegendGrouped.data = [
+    { quarter: 'Q1', desktop: 820, mobile: 640 },
+    { quarter: 'Q2', desktop: 910, mobile: 780 },
+    { quarter: 'Q3', desktop: 860, mobile: 890 },
+    { quarter: 'Q4', desktop: 1020, mobile: 950 },
+  ];
 }

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

@@ -31,7 +31,7 @@
         <header>
           <span slot="heading" variant="section">Discussion</span>
           <text-ui slot="description" color="subtle">3 comments · 2 participants</text-ui>
-          <button-ui slot="action" text="Resolve" variant="ghost" size="sm" icon-leading="check"></button-ui>
+          <button-ui slot="action" text="Resolve" variant="ghost" size="sm" icon="check"></button-ui>
         </header>
         <section>
           <col-ui gap="3">
@@ -44,8 +44,8 @@
                 </row-ui>
                 <text-ui>Should the OKLCH ramp here use the chrome or the data scale? <text-ui color="accent">@Kim</text-ui> what's the convention?</text-ui>
                 <row-ui gap="1">
-                  <tag-ui icon-leading="thumbs-up">2</tag-ui>
-                  <tag-ui icon-leading="eyes">1</tag-ui>
+                  <tag-ui>2</tag-ui>
+                  <tag-ui>1</tag-ui>
                   <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
                 </row-ui>
               </col-ui>
@@ -59,7 +59,7 @@
                 </row-ui>
                 <text-ui>Chrome — the data scale is reserved for visualization series. Spec at <text-ui color="accent">.claude/docs/specs/component-token-contract.md</text-ui>.</text-ui>
                 <row-ui gap="1">
-                  <tag-ui icon-leading="thumbs-up">3</tag-ui>
+                  <tag-ui>3</tag-ui>
                   <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
                 </row-ui>
               </col-ui>
@@ -196,7 +196,7 @@
         <section>
           <col-ui gap="2">
             <field-ui>
-              <input-ui placeholder="Search emoji…" icon-leading="magnifying-glass"></input-ui>
+              <input-ui placeholder="Search emoji…" prefix="magnifying-glass"></input-ui>
             </field-ui>
             <col-ui gap="1">
               <text-ui strong size="sm" color="subtle">Frequently used</text-ui>

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

@@ -33,7 +33,7 @@
         <header>
           <span slot="heading" variant="section">Pricing matrix</span>
           <text-ui slot="description" color="subtle">12 rows · 1 unsaved</text-ui>
-          <button-ui slot="action" text="Add row" variant="ghost" size="sm" icon-leading="plus"></button-ui>
+          <button-ui slot="action" text="Add row" variant="ghost" size="sm" icon="plus"></button-ui>
         </header>
         <section bleed>
           <!-- A real <table> in <table-ui frameless raw> (consumer-owns-body mode) gives
@@ -90,7 +90,7 @@
           <span slot="heading" variant="section">Inventory — Q4 forecast</span>
           <text-ui slot="description" color="subtle">Auto-saving · 3 cells dirty</text-ui>
           <row-ui slot="action" gap="2">
-            <button-ui text="Undo" variant="ghost" size="sm" icon-leading="arrow-counter-clockwise"></button-ui>
+            <button-ui text="Undo" variant="ghost" size="sm" icon="arrow-counter-clockwise"></button-ui>
             <button-ui text="Save now" variant="primary" size="sm"></button-ui>
           </row-ui>
         </header>

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

@@ -109,22 +109,22 @@
             <dt>Workspace name</dt>
             <dd>
               <row-ui gap="2" align="center">
-                <tag-ui variant="danger" icon-leading="minus">Adia</tag-ui>
-                <tag-ui variant="success" icon-leading="plus">Adia AI</tag-ui>
+                <tag-ui variant="danger">Adia</tag-ui>
+                <tag-ui variant="success">Adia AI</tag-ui>
               </row-ui>
             </dd>
             <dt>Default theme</dt>
             <dd>
               <row-ui gap="2" align="center">
-                <tag-ui variant="danger" icon-leading="minus">light</tag-ui>
-                <tag-ui variant="success" icon-leading="plus">auto</tag-ui>
+                <tag-ui variant="danger">light</tag-ui>
+                <tag-ui variant="success">auto</tag-ui>
               </row-ui>
             </dd>
             <dt>Member invites</dt>
             <dd>
               <row-ui gap="2" align="center">
-                <tag-ui variant="danger" icon-leading="minus">Admin only</tag-ui>
-                <tag-ui variant="success" icon-leading="plus">Anyone with link</tag-ui>
+                <tag-ui variant="danger">Admin only</tag-ui>
+                <tag-ui variant="success">Anyone with link</tag-ui>
               </row-ui>
             </dd>
           </description-list-ui>

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

@@ -45,7 +45,7 @@
         </section>
         <footer divider>
           <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
-          <button-ui id="export-sync-submit" slot="action" text="Download CSV" variant="primary" icon-leading="download-simple"></button-ui>
+          <button-ui id="export-sync-submit" slot="action" text="Download CSV" variant="primary" icon="download-simple"></button-ui>
         </footer>
       </card-ui>
     </div>
@@ -134,7 +134,7 @@
         </section>
         <footer divider>
           <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
-          <button-ui id="export-delivery-submit" slot="action" text="Download PDF" variant="primary" icon-leading="download-simple"></button-ui>
+          <button-ui id="export-delivery-submit" slot="action" text="Download PDF" variant="primary" icon="download-simple"></button-ui>
         </footer>
       </card-ui>
     </div>

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

@@ -35,7 +35,7 @@
         <span data-spacer></span>
         <button-ui text="Clear all" variant="ghost" size="sm"></button-ui>
       </row-ui>
-      <popover-ui id="pat-filter-menu" anchor="previous">
+      <popover-ui id="pat-filter-menu">
         <action-list-ui>
           <action-item-ui icon="flag" text="Status" value="status"></action-item-ui>
           <action-item-ui icon="user" text="Owner" value="owner"></action-item-ui>
@@ -111,7 +111,7 @@
   &lt;button-ui text="Clear all" variant="ghost"&gt;&lt;/button-ui&gt;
 &lt;/row-ui&gt;
 
-&lt;popover-ui id="filter-menu" anchor="previous"&gt;
+&lt;popover-ui id="filter-menu"&gt;
   &lt;action-list-ui&gt;...facets...&lt;/action-list-ui&gt;
 &lt;/popover-ui&gt;</code-ui>
 </section>

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

@@ -81,7 +81,7 @@
         <section>
           <col-ui gap="2">
             <field-ui label="Search address" hint="Start typing — we'll suggest matches">
-              <input-ui name="address_query" placeholder="123 Main St" icon-leading="map-pin" value="500 market"></input-ui>
+              <input-ui name="address_query" placeholder="123 Main St" prefix="map-pin" value="500 market"></input-ui>
             </field-ui>
             <card-ui raw style="max-width: 100%;" data-shape="popover">
               <section>
@@ -133,7 +133,7 @@
         data-chunk-keywords="address fields street apt suite city state zip postal form expanded manual billing shipping layout" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Address details</span>
-          <button-ui slot="action" text="Search again" variant="ghost" size="sm" icon-leading="arrow-counter-clockwise"></button-ui>
+          <button-ui slot="action" text="Search again" variant="ghost" size="sm" icon="arrow-counter-clockwise"></button-ui>
         </header>
         <section>
           <col-ui gap="3">

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

@@ -25,7 +25,7 @@
           data-chunk-domain="overlay"
           data-chunk-description="Inline rename popover — a Rename trigger opens an anchored mini-dialog card with a new-name input and Cancel / Save actions; no modal needed for a one-field edit."
           data-chunk-keywords="inline dialog rename popover anchored file name input save cancel mini one-field edit quick" placement="bottom-start">
-          <button-ui slot="trigger" text="Rename" variant="ghost" size="sm" icon-leading="pencil-simple"></button-ui>
+          <button-ui slot="trigger" text="Rename" variant="ghost" size="sm" icon="pencil-simple"></button-ui>
           <card-ui slot="content" style="min-width: 320px;">
             <header>
               <span slot="heading" variant="section">Rename file</span>
@@ -120,7 +120,7 @@
             </section>
             <footer divider>
               <button-ui slot="action" text="Cancel" variant="ghost" data-popover-close></button-ui>
-              <button-ui slot="action" text="Schedule" variant="primary" icon-leading="clock"></button-ui>
+              <button-ui slot="action" text="Schedule" variant="primary" icon="clock"></button-ui>
             </footer>
           </card-ui>
         </popover-ui>