@adia-ai/web-components 0.8.22 → 0.8.24

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

@@ -22,7 +22,10 @@
   <p data-note>KPI + trend shape. Used in overview rows to show 4–6 metrics side-by-side.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="sparkline tile">
-      <card-ui data-chunk="chart-in-card-sparkline-tile" style="max-width:320px;">
+      <card-ui data-chunk="chart-in-card-sparkline-tile" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Sparkline metric tile — compact card with metric name, big current value (Page Views 84,232), and an edge-to-edge sparkline chart bleeding below."
+        data-chunk-keywords="sparkline tile metric card page-views value chart compact dashboard kpi trend mini analytics" style="max-width:320px;">
         <header>
           <span slot="heading"><h2>Page Views</h2></span>
           <text-ui slot="description" variant="title">84,232</text-ui>
@@ -40,7 +43,10 @@
   <p data-note>Chart as primary content. Header names the metric; footer adds a supporting action.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="full chart">
-      <card-ui data-chunk="chart-in-card-full-chart" style="max-width:520px;">
+      <card-ui data-chunk="chart-in-card-full-chart" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Full chart card — Revenue bar chart over the last 12 months with title and range description in the header and a stretch View-report footer button."
+        data-chunk-keywords="chart card bar revenue months report full analytics dashboard footer button range" style="max-width:520px;">
         <header>
           <span slot="heading"><h3>Revenue</h3></span>
           <text-ui slot="description" color="subtle">Last 12 months</text-ui>
@@ -61,7 +67,10 @@
   <p data-note>Stat in header pairs with the chart so the current value is legible before the chart renders.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="chart plus stat">
-      <card-ui data-chunk="chart-in-card-chart-plus-stat" style="max-width:520px;">
+      <card-ui data-chunk="chart-in-card-chart-plus-stat" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Stat-headed chart card — an MRR stat with change delta and trend arrow as the card header, over a smooth line chart of the metric's history."
+        data-chunk-keywords="chart stat card mrr line smooth trend delta header metric history dashboard analytics revenue" style="max-width:520px;">
         <header>
           <span slot="heading">
             <stat-ui label="MRR" value="$48,290" change="+12.4%" trend="up"></stat-ui>
@@ -80,7 +89,10 @@
   <p data-note>Chart shows aggregate; breakdown beneath gives the composition. Most SaaS "Overview" tiles follow this shape.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="chart plus breakdown">
-      <card-ui data-chunk="chart-in-card-chart-plus-breakdown" style="max-width:520px;">
+      <card-ui data-chunk="chart-in-card-chart-plus-breakdown" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Chart with breakdown card — Sessions bar chart for the week over a 3-up grid of stat tiles decomposing the total by segment (Desktop / Mobile / Tablet)."
+        data-chunk-keywords="chart breakdown card sessions bar stats grid desktop mobile tablet segments decomposition dashboard analytics" style="max-width:520px;">
         <header>
           <span slot="heading"><h3>Sessions</h3></span>
           <text-ui slot="description" color="subtle">This week</text-ui>
@@ -105,7 +117,10 @@
   <p data-note>Footer carries trend narrative + period caption using the new footer <code>heading</code> / <code>description</code> slot routing (symmetric with header). Shadcn-style revenue card translated to AdiaUI primitives.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="area chart + trend footer">
-      <card-ui data-chunk="chart-in-card-trend-footer" style="max-width:520px;">
+      <card-ui data-chunk="chart-in-card-trend-footer" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Area chart card with trend footer — Revenue area chart for a date range, footer states the takeaway ('Trending up by 5.2% this month') with a data-scope caption."
+        data-chunk-keywords="chart area card trend footer takeaway revenue range summary insight dashboard analytics" style="max-width:520px;">
         <header>
           <span slot="heading"><h3>Revenue</h3></span>
           <text-ui slot="description" color="subtle">January – March 2024</text-ui>
@@ -127,7 +142,10 @@
   <p data-note>Stat-ui's <code>chart</code> slot positions a sparkline to the right of the hero number — KPI and its trajectory as one visual unit.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="stat with sparkline slot">
-      <card-ui data-chunk="chart-in-card-stat-with-sparkline" style="max-width:320px;">
+      <card-ui data-chunk="chart-in-card-stat-with-sparkline" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Stat with inline sparkline — a single stat (Revenue $48.2k, +12.5% up) carrying a sparkline in its chart slot; the smallest chart-bearing KPI tile."
+        data-chunk-keywords="stat sparkline kpi tile revenue change trend inline chart slot compact dashboard metric" style="max-width:320px;">
         <section>
           <stat-ui label="Revenue" value="$48.2k" change="+12.5%" trend="up">
             <chart-ui id="pat-stat-spark" slot="chart" type="sparkline" x="month" y="value"></chart-ui>
@@ -143,7 +161,10 @@
   <p data-note>A <code>segmented-ui</code> in the header's <code>action</code> slot drives a time-range selection. Wire its <code>value</code> to refetch / slice the chart's <code>.data</code> via a controller.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="chart with 1w / 2w / 1m / 3m pills">
-      <card-ui data-chunk="chart-in-card-chart-with-filter-pills" style="max-width:520px;">
+      <card-ui data-chunk="chart-in-card-chart-with-filter-pills" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Chart card with range picker — Sessions chart whose header action is a segmented control of time ranges (1w / 2w / 1m / 3m) that filters the plotted window."
+        data-chunk-keywords="chart card segmented range picker filter pills time window sessions week month dashboard analytics toggle" style="max-width:520px;">
         <header>
           <span slot="heading"><h3>Sessions</h3></span>
           <segmented-ui slot="action" value="1m">

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

@@ -24,7 +24,10 @@
   <p data-note>A vertical stack of comments anchored to a parent object. Each row carries author avatar + name + timestamp + body + reactions strip + reply action. Threaded replies indent one level — deeper nesting collapses to "X replies" by default.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="comment thread">
-      <card-ui data-chunk="comments-thread" style="max-width: 640px;">
+      <card-ui data-chunk="comments-thread" data-chunk-kind="block"
+        data-chunk-domain="content"
+        data-chunk-description="Comment thread card — 'Discussion' with comment count and participants, avatar-led comment rows with author, timestamp and body, and a Resolve header action."
+        data-chunk-keywords="comments thread discussion collaboration avatar author timestamp reply resolve participants conversation review feedback" style="max-width: 640px;">
         <header>
           <span slot="heading" variant="section">Discussion</span>
           <text-ui slot="description" color="subtle">3 comments · 2 participants</text-ui>
@@ -39,7 +42,7 @@
                   <text-ui strong>Avery Chen</text-ui>
                   <text-ui color="subtle" size="sm">2 hours ago</text-ui>
                 </row-ui>
-                <text-ui>Should the OKLCH ramp here use the chrome or the data scale? <text-ui color="primary">@Kim</text-ui> what's the convention?</text-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 size="sm" icon-leading="thumbs-up">2</tag-ui>
                   <tag-ui size="sm" icon-leading="eyes">1</tag-ui>
@@ -54,7 +57,7 @@
                   <text-ui strong>Kim Granlund</text-ui>
                   <text-ui color="subtle" size="sm">1 hour ago</text-ui>
                 </row-ui>
-                <text-ui>Chrome — the data scale is reserved for visualization series. Spec at <text-ui color="primary">.claude/docs/specs/component-token-contract.md</text-ui>.</text-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 size="sm" icon-leading="thumbs-up">3</tag-ui>
                   <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
@@ -68,7 +71,7 @@
                   <text-ui strong>Jordan Lee</text-ui>
                   <text-ui color="subtle" size="sm">12 minutes ago</text-ui>
                 </row-ui>
-                <text-ui>Filed a follow-up — adding a lint rule so this doesn't happen again. <text-ui color="primary">#linter</text-ui></text-ui>
+                <text-ui>Filed a follow-up — adding a lint rule so this doesn't happen again. <text-ui color="accent">#linter</text-ui></text-ui>
                 <row-ui gap="1">
                   <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
                 </row-ui>
@@ -86,7 +89,10 @@
   <p data-note>The input field below a thread. Multiline, with attach + mention + emoji affordances inline, and Send / Cancel actions. Submits on Cmd/Ctrl+Enter; Enter inserts a newline.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="comment composer">
-      <card-ui data-chunk="comments-composer" style="max-width: 640px;">
+      <card-ui data-chunk="comments-composer" data-chunk-kind="block"
+        data-chunk-domain="content"
+        data-chunk-description="Comment composer — avatar beside a write-a-comment textarea with attach / mention / emoji ghost buttons, a Cmd+Enter-to-send hint, and a primary Comment button."
+        data-chunk-keywords="comment composer write textarea mention attach emoji send cmd-enter reply input collaboration post" style="max-width: 640px;">
         <section>
           <row-ui gap="3" align="start">
             <avatar-ui size="sm" text="You"></avatar-ui>
@@ -114,7 +120,10 @@
   <p data-note>Popover that opens after the user types <code>@</code>. Shows team members + recently-mentioned at top, fuzzy-filtered by query. Each row carries avatar + name + handle + role tag. Arrow keys navigate; Enter inserts; Esc closes without inserting.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="mention picker menu">
-      <card-ui data-chunk="comments-mention-menu" raw style="max-width: 320px;" data-shape="popover">
+      <card-ui data-chunk="comments-mention-menu" data-chunk-kind="block"
+        data-chunk-domain="content"
+        data-chunk-description="@-mention picker popover — 'Mention' list of people rows with avatar, name, handle and role, filtered as the user types after @ in a composer."
+        data-chunk-keywords="mention picker popover at-mention people avatar handle role autocomplete suggest composer collaboration tag-user" raw style="max-width: 320px;" data-shape="popover">
         <section>
           <col-ui gap="2">
             <text-ui strong size="sm" color="subtle">Mention</text-ui>
@@ -161,9 +170,12 @@
   <p data-note>The strip of reaction tags under a comment or message. Each tag shows emoji + count; the user's own reaction is highlighted. A trailing "+" opens the picker. Click a count to toggle the user's own reaction; long-press shows who reacted.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="reactions bar">
-      <row-ui data-chunk="reactions-bar" gap="1">
+      <row-ui data-chunk="reactions-bar" data-chunk-kind="block"
+        data-chunk-domain="content"
+        data-chunk-description="Reactions bar — emoji reaction tags with counts (thumbs-up 4, party 2, eyes 1, rocket 1; own reaction highlighted) plus an add-reaction button. Rides under a comment or message."
+        data-chunk-keywords="reactions emoji bar counts thumbs-up party add react message comment collaboration engagement" gap="1">
         <tag-ui size="sm">👍 4</tag-ui>
-        <tag-ui size="sm" variant="primary">🎉 2</tag-ui>
+        <tag-ui size="sm" variant="accent">🎉 2</tag-ui>
         <tag-ui size="sm">👀 1</tag-ui>
         <tag-ui size="sm">🚀 1</tag-ui>
         <button-ui icon="plus" variant="ghost" size="sm" aria-label="Add reaction"></button-ui>
@@ -177,7 +189,10 @@
   <p data-note>The emoji-grid popover that opens from the "+" button. Recent + frequent emojis at top; full categorical grid below; search input above. Arrow + Enter for keyboard; click for pointer.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="reactions picker">
-      <card-ui data-chunk="reactions-picker" style="max-width: 360px;">
+      <card-ui data-chunk="reactions-picker" data-chunk-kind="block"
+        data-chunk-domain="content"
+        data-chunk-description="Emoji reaction picker — search-emoji input over a 'Frequently used' wrap of emoji buttons for adding a reaction to a message or comment."
+        data-chunk-keywords="reactions picker emoji search frequently-used popover add react message comment collaboration" style="max-width: 360px;">
         <section>
           <col-ui gap="2">
             <field-ui>

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

@@ -24,7 +24,10 @@
   <p data-note>Top step is an explicit 100% baseline (no progress bar — it's the anchor). Subsequent steps use <code>progress-row-ui</code> with the count + percentage in the meta slot.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="conversion funnel">
-      <card-ui data-chunk="conversion-funnel-4-step-funnel" style="max-width: 560px;">
+      <card-ui data-chunk="conversion-funnel-4-step-funnel" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="4-step conversion funnel card — Visit → Sign up → Activate → Convert as rows with step name, visitor count, progress bar, and step-over-step percentage."
+        data-chunk-keywords="conversion funnel steps visit signup activate convert progress percentage drop-off analytics marketing pipeline" style="max-width: 560px;">
         <header>
           <h3>Conversion funnel</h3>
           <text-ui slot="description" color="subtle">Visit → Sign up → Activate → Convert</text-ui>
@@ -53,7 +56,10 @@
   <p data-note>Pair the funnel card with a segmented control in <code>slot="action"</code> so users can switch between cohorts (e.g. new-vs-returning, mobile-vs-desktop). Swap the <code>value</code> + <code>meta</code> attributes in setup.js on segment change.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="funnel with cohort toggle">
-      <card-ui data-chunk="conversion-funnel-with-segment-compare" style="max-width: 560px;">
+      <card-ui data-chunk="conversion-funnel-with-segment-compare" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Checkout funnel with segment compare — funnel step rows plus a header segmented toggle (New / Returning) that switches which cohort's numbers are shown."
+        data-chunk-keywords="conversion funnel checkout segment compare new returning cohort toggle segmented analytics drop-off" style="max-width: 560px;">
         <header>
           <h3>Checkout funnel</h3>
           <text-ui slot="description" color="subtle">Last 30 days · by first-time vs returning</text-ui>
@@ -94,7 +100,10 @@
   <p data-note>For board reporting, combine the funnel with a step-over-step delta column so stakeholders can see exactly where the biggest drop-off happens. Delta is a <code>badge-ui</code> colored by severity.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="funnel with step-over-step">
-      <card-ui data-chunk="conversion-funnel-wide-summary" style="max-width: 640px;">
+      <card-ui data-chunk="conversion-funnel-wide-summary" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Signup funnel with summary stats — step rows with counts and conversion bars, closed by a stat band summarizing overall conversion and biggest drop-off."
+        data-chunk-keywords="conversion funnel signup summary stats overall drop-off steps bars analytics wide report" style="max-width: 640px;">
         <header>
           <h3>Signup funnel</h3>
           <text-ui slot="description" color="subtle">Step-over-step conversion, last 7 days</text-ui>
@@ -108,18 +117,18 @@
               </col-ui>
               <text-ui strong>100%</text-ui>
             </row-ui>
-            <row-ui align="center" gap="3">
-              <progress-row-ui label="Email verified" value="68" meta="5,726 · 68%" grow></progress-row-ui>
-              <badge-ui text="−32%" variant="warning"></badge-ui>
-            </row-ui>
-            <row-ui align="center" gap="3">
-              <progress-row-ui label="Workspace created" value="54" meta="4,547 · 54%" grow></progress-row-ui>
-              <badge-ui text="−21%" variant="muted"></badge-ui>
-            </row-ui>
-            <row-ui align="center" gap="3">
-              <progress-row-ui label="Invited a teammate" value="22" meta="1,852 · 22%" grow></progress-row-ui>
-              <badge-ui text="−59%" variant="danger"></badge-ui>
-            </row-ui>
+            <!-- Delta badge rides INSIDE the meta slot (gh#502): authored
+                 [slot="meta"] keeps text + badge on the meta text line,
+                 instead of a sibling column centered against the whole row. -->
+            <progress-row-ui label="Email verified" value="68">
+              <span slot="meta">5,726 · 68% <badge-ui text="−32%" variant="warning"></badge-ui></span>
+            </progress-row-ui>
+            <progress-row-ui label="Workspace created" value="54">
+              <span slot="meta">4,547 · 54% <badge-ui text="−21%" variant="muted"></badge-ui></span>
+            </progress-row-ui>
+            <progress-row-ui label="Invited a teammate" value="22">
+              <span slot="meta">1,852 · 22% <badge-ui text="−59%" variant="danger"></badge-ui></span>
+            </progress-row-ui>
           </col-ui>
         </section>
       </card-ui>

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

@@ -26,17 +26,20 @@
   <p data-note>The most common shape: a normal table where one row at a time enters edit mode (double-click or pencil button). Cells become `&lt;input-ui&gt;` / `&lt;select-ui&gt;` / etc.; Save / Cancel actions appear in the row's trailing column.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="single editing row">
-      <card-ui data-chunk="table-inline-edit-row">
+      <card-ui data-chunk="table-inline-edit-row" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Table with inline row editing — pricing matrix where the editing row swaps its cells for inputs with save/cancel, unsaved count in the header, plus an Add-row action."
+        data-chunk-keywords="table inline edit row editing pricing inputs save cancel unsaved add-row data grid">
         <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>
         </header>
         <section bleed>
-          <!-- A real <table> in <table-ui raw> (consumer-owns-body mode) gives
+          <!-- A real <table> in <table-ui frameless raw> (consumer-owns-body mode) gives
                true column alignment; the editing row (Pro) swaps its Price/Limits
                cells for <input-ui> and its action cell for Save/Cancel. -->
-          <table-ui raw>
+          <table-ui frameless raw>
             <table>
               <thead>
                 <tr><th>Plan</th><th>Price</th><th>Limits</th><th></th></tr>
@@ -79,7 +82,10 @@
   <p data-note>The full Excel-style shape: every cell renders an `&lt;input-ui&gt;` (or typed equivalent — number, select, date). Tab moves to the next cell, Enter commits + moves down. Saves are auto-debounced; the dirty state surfaces as a per-row tag.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="spreadsheet cells">
-      <card-ui data-chunk="table-spreadsheet-cells">
+      <card-ui data-chunk="table-spreadsheet-cells" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Spreadsheet-style editable table — per-cell editing with dirty-cell highlighting, auto-saving status in the header, and Undo / Save-now actions."
+        data-chunk-keywords="table spreadsheet cells editable dirty auto-save undo save forecast inventory grid excel">
         <header>
           <span slot="heading" variant="section">Inventory — Q4 forecast</span>
           <text-ui slot="description" color="subtle">Auto-saving · 3 cells dirty</text-ui>
@@ -92,7 +98,7 @@
           <!-- Every cell is an <input-ui>; a real <table> gives the Excel-style
                column alignment the list-item flex layout couldn't. The per-row
                dirty/clean state sits in its own Status column. -->
-          <table-ui raw>
+          <table-ui frameless raw>
             <table>
               <thead>
                 <tr><th>Item</th><th>Oct</th><th>Nov</th><th>Dec</th><th>Status</th></tr>
@@ -103,7 +109,7 @@
                   <td><input-ui type="number" value="124" size="sm"></input-ui></td>
                   <td><input-ui type="number" value="98" size="sm"></input-ui></td>
                   <td><input-ui type="number" value="156" size="sm"></input-ui></td>
-                  <td><tag-ui size="sm" variant="muted">clean</tag-ui></td>
+                  <td><tag-ui size="sm" variant="default">clean</tag-ui></td>
                 </tr>
                 <tr>
                   <td><text-ui strong>Widget B</text-ui></td>
@@ -124,7 +130,7 @@
                   <td><input-ui type="number" value="200" size="sm"></input-ui></td>
                   <td><input-ui type="number" value="245" size="sm"></input-ui></td>
                   <td><input-ui type="number" value="280" size="sm"></input-ui></td>
-                  <td><tag-ui size="sm" variant="muted">clean</tag-ui></td>
+                  <td><tag-ui size="sm" variant="default">clean</tag-ui></td>
                 </tr>
               </tbody>
             </table>
@@ -140,7 +146,10 @@
   <p data-note>Use <code>&lt;tree-ui&gt;</code> for the recursion. Each <code>&lt;tree-item-ui&gt;</code> renders the chevron + indent automatically; nested items go inside the parent's default slot. Common in budgets, org charts, file browsers.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="tree table">
-      <card-ui data-chunk="tree-table-basic">
+      <card-ui data-chunk="tree-table-basic" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Tree table card — hierarchical budget rollup (departments expand into categories, each row carrying its amount) with the grand total in the header."
+        data-chunk-keywords="tree table hierarchy budget departments categories expand collapse rollup total nested amounts">
         <header>
           <span slot="heading" variant="section">Q4 budget — by department</span>
           <text-ui slot="description" color="subtle">Total: $1.24M · 4 departments · 12 categories</text-ui>

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

@@ -25,7 +25,10 @@
   <p data-note>Two-column view with the old version on the left and the new on the right. Removed lines tinted danger; added lines tinted success. Compose two <code>code-ui line-numbers</code> blocks side-by-side; per-line tint comes from a <code>data-line-states</code> CSV (one entry per line: <code>unchanged</code>, <code>added</code>, or <code>removed</code>).</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="side-by-side diff">
-      <card-ui data-chunk="diff-side-by-side">
+      <card-ui data-chunk="diff-side-by-side" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Side-by-side diff card — filename header with +3 −2 change stats and an Inline / Side-by-side view toggle, over a two-column before/after code comparison."
+        data-chunk-keywords="diff side-by-side code review compare before after columns changes additions deletions toggle file" >
         <header>
           <span slot="heading" variant="section">tokens.css</span>
           <text-ui slot="description" color="subtle">+3 −2 · 5 lines changed</text-ui>
@@ -63,7 +66,10 @@
   <p data-note>Single-column view with `+` and `−` line markers. Better for narrow columns and quick scan-reading. Compose <code>code-ui language="diff" line-numbers</code>; the `+`/`−`/space prefix on each line auto-resolves to <code>added</code> / <code>removed</code> / <code>unchanged</code> tint.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="inline unified diff">
-      <card-ui data-chunk="diff-inline" style="max-width: 640px;">
+      <card-ui data-chunk="diff-inline" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Inline diff card — filename header with change stats over a unified diff code block with line numbers, minus/plus lines marked."
+        data-chunk-keywords="diff inline unified code review changes line-numbers additions deletions patch file" style="max-width: 640px;">
         <header>
           <span slot="heading" variant="section">tokens.css — inline diff</span>
           <text-ui slot="description" color="subtle">+3 −2</text-ui>
@@ -90,7 +96,10 @@
   <p data-note>For settings or records where the underlying shape is a key-value object, not lines of text. Each row shows the field name + old → new value pair. <code>description-list-ui</code> for layout; <code>tag-ui</code> with diff variants for the value pair.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="structured field diff">
-      <card-ui data-chunk="diff-structured" style="max-width: 640px;">
+      <card-ui data-chunk="diff-structured" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Structured field diff card — settings change preview as a description list where each changed field shows a danger old-value tag and a success new-value tag."
+        data-chunk-keywords="diff structured fields change preview settings old new values tags before after review confirm" style="max-width: 640px;">
         <header>
           <span slot="heading" variant="section">Workspace settings — change preview</span>
           <text-ui slot="description" color="subtle">3 fields changed</text-ui>

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

@@ -18,7 +18,10 @@
   <p data-note>Small datasets (&lt; 10 k rows). User picks format, browser downloads on click. Submit button copy = the verb ("Download CSV"); format-picker change updates the button label.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="download now">
-      <card-ui data-chunk="export-flow-sync" style="max-width: 480px;">
+      <card-ui data-chunk="export-flow-sync" data-chunk-kind="block"
+        data-chunk-domain="data-management"
+        data-chunk-description="Synchronous export card — 'Export users' with row count and applied-filter note, format select (CSV / JSON), column scope options, and an immediate Download button."
+        data-chunk-keywords="export sync download users csv json format columns filter rows immediate file data" style="max-width: 480px;">
         <header>
           <span slot="heading" variant="section">Export users</span>
           <text-ui slot="description" color="subtle">428 rows · current filter applied</text-ui>
@@ -54,7 +57,10 @@
   <p data-note>Large datasets (≥ 10 k rows / known-slow exports). Submit queues a job; the user gets an email with a download link when the archive is ready. The form acknowledges the latency up front in an info alert + uses the verb "Request" instead of "Download".</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="request email export">
-      <card-ui data-chunk="export-flow-async" style="max-width: 480px;">
+      <card-ui data-chunk="export-flow-async" data-chunk-kind="block"
+        data-chunk-domain="data-management"
+        data-chunk-description="Async export card — large dataset export (~1.4M events) with date-range and format selects and an email-when-ready flow instead of a blocking download."
+        data-chunk-keywords="export async large dataset events date-range format email notify background job analytics queue" style="max-width: 480px;">
         <header>
           <span slot="heading" variant="section">Export analytics</span>
           <text-ui slot="description" color="subtle">~1.4M events · last 90 days</text-ui>
@@ -101,7 +107,10 @@
   <p data-note>When both make sense (medium datasets, user preference matters). Radio choice up top toggles which submit verb fires; email field hides when "download" is selected.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="delivery picker">
-      <card-ui data-chunk="export-flow-delivery" style="max-width: 480px;">
+      <card-ui data-chunk="export-flow-delivery" data-chunk-kind="block"
+        data-chunk-domain="data-management"
+        data-chunk-description="Export with delivery options card — invoice export offering format (PDF bundle / ZIP) and delivery destination choices (download, email, cloud storage)."
+        data-chunk-keywords="export delivery invoices pdf zip email cloud storage destination format fiscal download options" style="max-width: 480px;">
         <header>
           <span slot="heading" variant="section">Export invoices</span>
           <text-ui slot="description" color="subtle">2024 fiscal year · 1,247 invoices</text-ui>

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

@@ -18,7 +18,10 @@
   </p>
 </section>
 
-<section data-section data-property="active-filters" data-chunk="filter-bar-active-filters">
+<section data-section data-property="active-filters" data-chunk="filter-bar-active-filters" data-chunk-kind="block"
+  data-chunk-domain="data"
+  data-chunk-description="Active-filters bar — removable chips for each applied filter (Status: Active, Owner, Updated range) with a trailing + Add filter button opening a facet popover."
+  data-chunk-keywords="filters active chips removable add-filter facets popover status owner updated bar refine query tags">
   <h2 variant="section">Active filters + Add filter</h2>
   <p data-note>Chips show each active filter. The trailing button opens a popover of available facets.</p>
   <card-ui>
@@ -45,7 +48,10 @@
   </card-ui>
 </section>
 
-<section data-section data-property="filter-bar-with-table" data-chunk="filter-bar-filter-bar-with-table">
+<section data-section data-property="filter-bar-with-table" data-chunk="filter-bar-filter-bar-with-table" data-chunk-kind="block"
+  data-chunk-domain="data"
+  data-chunk-description="Filter bar over a table — removable filter chips and an Add-filter button in a toolbar directly above the table inside one card, so filters read as modifying the rows below."
+  data-chunk-keywords="filter bar table chips toolbar card rows data refine composition list results query">
   <h2 variant="section">Filter bar + table</h2>
   <p data-note>The common composition: filters sit above the table inside one card surface so they read as modifying the same data.</p>
   <card-ui>
@@ -58,12 +64,15 @@
         </row-ui>
         <search-ui placeholder="Search…" size="sm"></search-ui>
       </toolbar-ui>
-      <table-ui id="pat-filter-table" sortable striped></table-ui>
+      <table-ui frameless id="pat-filter-table" sortable striped></table-ui>
     </section>
   </card-ui>
 </section>
 
-<section data-section data-property="saved-views" data-chunk="filter-bar-saved-views">
+<section data-section data-property="saved-views" data-chunk="filter-bar-saved-views" data-chunk-kind="block"
+  data-chunk-domain="data"
+  data-chunk-description="Saved views bar — segmented control of named filter combinations (All / My open / Team / Archived) replacing chip-by-chip filtering with one-tap views."
+  data-chunk-keywords="saved views segmented filters named all my-open team archived presets quick-switch bar data">
   <h2 variant="section">Saved views</h2>
   <p data-note>Named combinations of filters. Segmented control replaces the active-filter chips while a view is applied.</p>
   <card-ui>

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

@@ -22,8 +22,11 @@
   <p data-note>3–5 fields with primary + cancel actions. The default shape for "+ New X" triggers.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="create form">
-      <button-ui data-chunk="form-drawer-simple-form" text="+ New project" variant="primary" onclick="this.nextElementSibling.open=true"></button-ui>
-      <drawer-ui text="New project" side="right" size="md">
+      <button-ui text="+ New project" variant="primary" onclick="this.nextElementSibling.open=true"></button-ui>
+      <drawer-ui data-chunk="form-drawer-simple-form" data-chunk-kind="block"
+        data-chunk-domain="forms"
+        data-chunk-description="Create-form drawer — 'New project' right-side drawer with name input, description textarea, and visibility select in the body, and Cancel / Create footer actions."
+        data-chunk-keywords="drawer form create new project name description visibility right-side panel cancel save quick-create" text="New project" side="right" size="md">
         <section slot="body">
           <col-ui gap="3">
             <field-ui label="Name">
@@ -57,8 +60,11 @@
   <p data-note>Edit drawers pair a primary action with a destructive one in the footer. Delete sits on the left, Save on the right — separated by the spacer.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="edit form">
-      <button-ui data-chunk="form-drawer-edit-form" text="Edit project" icon="pencil" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
-      <drawer-ui text="Edit project" side="right" size="md">
+      <button-ui text="Edit project" icon="pencil" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+      <drawer-ui data-chunk="form-drawer-edit-form" data-chunk-kind="block"
+        data-chunk-domain="forms"
+        data-chunk-description="Edit-form drawer — right-side drawer pre-filled with the record's current values (name, description, status) for quick edits without leaving the page."
+        data-chunk-keywords="drawer form edit prefilled record name description status update quick-edit panel inspector save" text="Edit project" side="right" size="md">
         <section slot="body">
           <col-ui gap="3">
             <field-ui label="Name">
@@ -97,8 +103,11 @@
   <p data-note>The footer stays visible even when the form body overflows. This is why the sticky-footer pattern matters — users shouldn't have to scroll to find "Save".</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="long form">
-      <button-ui data-chunk="form-drawer-tall-form" text="Advanced settings" icon="gear" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
-      <drawer-ui text="Advanced settings" side="right" size="lg">
+      <button-ui text="Advanced settings" icon="gear" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+      <drawer-ui data-chunk="form-drawer-tall-form" data-chunk-kind="block"
+        data-chunk-domain="forms"
+        data-chunk-description="Tall sectioned form drawer — large right-side drawer whose body groups fields under headings (General, then advanced sections) with a scrolling body and pinned footer."
+        data-chunk-keywords="drawer form tall sections advanced settings general slug headings scroll long panel grouped fields" text="Advanced settings" side="right" size="lg">
         <section slot="body">
           <col-ui gap="4">
             <col-ui gap="3">

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

@@ -307,7 +307,10 @@ emailField.syncValue('new@example.com');</code-ui>
   <p>Try submitting the form below without filling in the fields to see auto-validation in action:</p>
   <div data-artifact-container>
   <div data-artifact-item data-artifact-label="form">
-    <form data-chunk="form-system-live-demo" style="display:flex; flex-direction:column; gap:var(--a-space-3); max-width:400px;" onsubmit="event.preventDefault();">
+    <form data-chunk="form-system-live-demo" data-chunk-kind="block"
+      data-chunk-domain="forms"
+      data-chunk-description="Validated form — full name and email fields with required / minlength / pattern rules and custom per-rule error messages, submitted with native constraint validation."
+      data-chunk-keywords="form validation required pattern minlength error messages name email constraint submit live inline" style="display:flex; flex-direction:column; gap:var(--a-space-3); max-width:400px;" onsubmit="event.preventDefault();">
           <field-ui label="Full Name">
             <input-ui name="fullname" required minlength="2" data-msg-required="Please enter your name" data-msg-minlength="Name must be at least 2 characters">
           </input-ui>

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

@@ -24,7 +24,10 @@
   <p data-note>A select or radio determines which sub-fields render. Hidden fields are not just `display: none` — they're removed from the form so they don't submit. When revealed, they animate in and the form's height grows; focus moves to the first revealed field.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="conditional fields">
-      <card-ui data-chunk="forms-conditional-reveal" style="max-width: 560px;">
+      <card-ui data-chunk="forms-conditional-reveal" data-chunk-kind="block"
+        data-chunk-domain="forms"
+        data-chunk-description="Conditional-reveal form card — an account-type select (Personal / Business) that reveals the business-only fields (company name, VAT id) when Business is chosen."
+        data-chunk-keywords="form conditional reveal account type personal business company vat dependent fields show hide branch dynamic" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Account type</span>
           <text-ui slot="description" color="subtle">We'll show the fields you need based on this</text-ui>
@@ -68,7 +71,10 @@
   <p data-note>Single input that opens a `menu-ui` of suggestions as the user types. Each suggestion shows the formatted address with the matched portion highlighted. Selecting a suggestion fills the structured fields below; clicking "Enter manually" reveals the structured fields directly.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="address autocomplete">
-      <card-ui data-chunk="forms-address-autocomplete" style="max-width: 560px;">
+      <card-ui data-chunk="forms-address-autocomplete" data-chunk-kind="block"
+        data-chunk-domain="forms"
+        data-chunk-description="Address autocomplete card — search-address input with map-pin icon and a suggestions dropdown of matching addresses, plus an enter-manually escape hatch."
+        data-chunk-keywords="address autocomplete search suggestions dropdown billing street map-pin manual lookup typeahead form" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Billing address</span>
         </header>
@@ -121,7 +127,10 @@
   <p data-note>After a suggestion is picked (or the user chose "Enter manually"), the structured fields appear, prefilled. The user can correct any line. Country drives the field set — US postal codes are different shape from CA, UK, etc.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="resolved address fields">
-      <card-ui data-chunk="forms-address-fields" style="max-width: 560px;">
+      <card-ui data-chunk="forms-address-fields" data-chunk-kind="block"
+        data-chunk-domain="forms"
+        data-chunk-description="Expanded address fields card — street, apt/suite, city, state and ZIP in a proper field layout after autocomplete, with a Search-again header action."
+        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>

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

@@ -21,7 +21,10 @@
       <row-ui gap="3" align="center" style="padding: var(--a-space-4); border: 1px solid var(--md-sys-color-neutral-outline); border-radius: var(--a-radius-md); background: var(--md-sys-color-neutral-background);">
         <icon-ui name="file-text" size="sm"></icon-ui>
         <text-ui strong style="flex: 1;">Q4-budget-draft.xlsx</text-ui>
-        <popover-ui data-chunk="inline-dialog-rename" placement="bottom-start">
+        <popover-ui data-chunk="inline-dialog-rename" data-chunk-kind="block"
+          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>
           <card-ui slot="content" style="min-width: 320px;">
             <header>
@@ -50,7 +53,10 @@
     <div data-artifact-item data-artifact-label="status picker dialog">
       <row-ui gap="3" align="center" style="padding: var(--a-space-4); border: 1px solid var(--md-sys-color-neutral-outline); border-radius: var(--a-radius-md); background: var(--md-sys-color-neutral-background);">
         <text-ui strong style="flex: 1;">PR #3247 — Add cursor pagination</text-ui>
-        <popover-ui data-chunk="inline-dialog-status" placement="bottom-start">
+        <popover-ui data-chunk="inline-dialog-status" data-chunk-kind="block"
+          data-chunk-domain="overlay"
+          data-chunk-description="Status-change popover — the current status tag is the trigger; the anchored card offers the status options with descriptions and an optional note field."
+          data-chunk-keywords="inline dialog status change popover anchored tag trigger options workflow state transition note quick" placement="bottom-start">
           <button-ui slot="trigger" variant="outline" size="sm">
             <tag-ui slot="leading" size="sm" variant="warning">In review</tag-ui>
             <icon-ui slot="trailing" name="caret-down" size="sm"></icon-ui>
@@ -92,7 +98,10 @@
     <div data-artifact-item data-artifact-label="schedule send dialog">
       <row-ui gap="0" align="center" style="padding: var(--a-space-4); background: var(--md-sys-color-neutral-background);">
         <button-ui text="Send now" variant="primary" size="sm"></button-ui>
-        <popover-ui data-chunk="inline-dialog-schedule" placement="bottom-start">
+        <popover-ui data-chunk="inline-dialog-schedule" data-chunk-kind="block"
+          data-chunk-domain="overlay"
+          data-chunk-description="Schedule-send popover — split-button caret opens an anchored card with date and time fields (timezone-aware hint) and a Schedule action."
+          data-chunk-keywords="inline dialog schedule send popover date time timezone split-button email later anchored quick" placement="bottom-start">
           <button-ui slot="trigger" icon="caret-down" variant="primary" size="sm" aria-label="More send options"></button-ui>
           <card-ui slot="content" style="min-width: 320px;">
             <header>

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

@@ -24,7 +24,10 @@
   <p data-note>Single-column list where the row order is the data. Each row carries a leading drag handle (`dots-six-vertical`), the body content, and trailing meta. Hover reveals the handle; drag picks up the row with a shadow + ghost.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="sortable list">
-      <card-ui data-chunk="sortable-list" style="max-width: 560px;">
+      <card-ui data-chunk="sortable-list" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Sortable priority list card — 'Sprint priority' rows with drag handles, rank numbers, task titles and tags; drag to reorder."
+        data-chunk-keywords="sortable list drag reorder priority sprint rank handle tasks order manual arrange backlog" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Sprint priority</span>
           <text-ui slot="description" color="subtle">Drag to reorder · 4 items</text-ui>