@adia-ai/web-components 0.8.42 → 0.8.44

package/index.d.ts

@@ -107,16 +107,6 @@ export type {
   ColorAreaConstraintClampEventDetail,
 } from './components/color-area/color-area.js';
 
-export type {
-  UIColorPicker,
-  ColorPickerChangeEvent,
-  ColorPickerInputEvent,
-  ColorPickerChangeEventDetail,
-  ColorPickerClampRecord,
-  ColorPickerConstraintClampEvent,
-  ColorPickerConstraintClampEventDetail,
-} from './components/color-picker/color-picker.js';
-
 export type {
   UIRating,
   RatingChangeEvent,
@@ -201,7 +191,6 @@ export * from './components/pane/pane.js';
 export * from './components/pipeline-status/pipeline-status.js';
 export * from './components/popover/popover.js';
 export * from './components/progress/progress.js';
-export * from './components/progress-row/progress-row.js';
 export * from './components/richtext/richtext.js';
 export * from './components/row/row.js';
 export * from './components/segment/segment.js';
@@ -219,7 +208,6 @@ export * from './components/tag/tag.js';
 export * from './components/text/text.js';
 export * from './components/timeline/timeline.js';
 export * from './components/toast/toast.js';
-export * from './components/toggle-group/toggle-group.js';
 export * from './components/toggle-scheme/toggle-scheme.js';
 export * from './components/toolbar/toolbar.js';
 export * from './components/tooltip/tooltip.js';
@@ -251,7 +239,6 @@ declare global {
     'otp-input-ui':       import('./components/otp-input/otp-input.js').UIOtpInput;
     'option-card-ui':     import('./components/option-card/option-card.js').UIOptionCard;
     'color-area-ui':      import('./components/color-area/color-area.js').UIColorArea;
-    'color-picker-ui':    import('./components/color-picker/color-picker.js').UIColorPicker;
     'rating-ui':          import('./components/rating/rating.js').UIRating;
     'code-ui':            import('./components/code/code.js').UICode;
     'calendar-picker-ui': import('./components/calendar-picker/calendar-picker.js').UICalendarPicker;
@@ -307,7 +294,6 @@ declare global {
     'pipeline-status-ui': import('./components/pipeline-status/pipeline-status.js').UIPipelineStatus;
     'popover-ui':         import('./components/popover/popover.js').UIPopover;
     'progress-ui':        import('./components/progress/progress.js').UIProgress;
-    'progress-row-ui':    import('./components/progress-row/progress-row.js').UIProgressRow;
     'richtext-ui':        import('./components/richtext/richtext.js').UIRichText;
     'row-ui':             import('./components/row/row.js').UIRow;
     'segment-ui':         import('./components/segment/segment.js').UISegment;
@@ -325,7 +311,6 @@ declare global {
     'text-ui':            import('./components/text/text.js').UIText;
     'timeline-ui':        import('./components/timeline/timeline.js').UITimeline;
     'toast-ui':           import('./components/toast/toast.js').UIToast;
-    'toggle-group-ui':    import('./components/toggle-group/toggle-group.js').UIToggleGroup;
     'toggle-scheme-ui':   import('./components/toggle-scheme/toggle-scheme.js').UIToggleScheme;
     'toolbar-ui':         import('./components/toolbar/toolbar.js').UIToolbar;
     'tooltip-ui':         import('./components/tooltip/tooltip.js').UITooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.42",
+  "version": "0.8.44",
   "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

@@ -52,7 +52,7 @@
           <text-ui slot="description" color="subtle">Last 12 months</text-ui>
         </header>
         <section>
-          <chart-ui id="pat-revenue" type="bar" x="month" y="revenue" hide-values></chart-ui>
+          <chart-ui id="pat-revenue" type="bar" x="month" y="revenue" no-values></chart-ui>
         </section>
         <footer>
           <button-ui text="View report" variant="outline" stretch></button-ui>
@@ -77,7 +77,7 @@
           </span>
         </header>
         <section>
-          <chart-ui id="pat-mrr" type="line" x="month" y="revenue" smooth="0.4" hide-values></chart-ui>
+          <chart-ui id="pat-mrr" type="line" x="month" y="revenue" smooth="0.4" no-values></chart-ui>
         </section>
       </card-ui>
     </div>
@@ -99,7 +99,7 @@
         </header>
         <section>
           <col-ui gap="3">
-            <chart-ui id="pat-sessions" type="bar" x="day" y="sessions" hide-values></chart-ui>
+            <chart-ui id="pat-sessions" type="bar" x="day" y="sessions" no-values></chart-ui>
             <grid-ui columns="3" gap="2">
               <card-ui><section><stat-ui label="Desktop" value="2,840"></stat-ui></section></card-ui>
               <card-ui><section><stat-ui label="Mobile" value="1,590"></stat-ui></section></card-ui>
@@ -126,7 +126,7 @@
           <text-ui slot="description" color="subtle">January – March 2024</text-ui>
         </header>
         <section>
-          <chart-ui id="pat-trend-revenue" type="area" x="month" y="revenue" hide-values></chart-ui>
+          <chart-ui id="pat-trend-revenue" type="area" x="month" y="revenue" no-values></chart-ui>
         </section>
         <footer>
           <span slot="heading">Trending up by 5.2% this month</span>
@@ -175,7 +175,7 @@
           </segmented-ui>
         </header>
         <section>
-          <chart-ui id="pat-filter-sessions" type="line" x="day" y="sessions" hide-values></chart-ui>
+          <chart-ui id="pat-filter-sessions" type="line" x="day" y="sessions" no-values></chart-ui>
         </section>
       </card-ui>
     </div>
@@ -186,8 +186,8 @@
   <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
+    marks — a sparkline, or another chart type with both <code>no-grid</code>
+    and <code>no-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
@@ -204,7 +204,7 @@
           <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>
+          <chart-ui id="pat-bleed-legend-chart" type="multi-line" x="month" y="revenue,users,churn" no-grid no-values></chart-ui>
         </section>
         <section>
           <chart-legend-ui for="pat-bleed-legend-chart" shape="line"></chart-legend-ui>
@@ -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;
@@ -239,9 +353,9 @@
   <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><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>no-grid</code> and <code>no-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>no-grid</code>/<code>no-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>Put <code>no-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>
   </ul>

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>