@adia-ai/web-components 0.8.21 → 0.8.23

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>
@@ -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,7 +170,10 @@
   <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">👀 1</tag-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>
@@ -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>

package/patterns/marketing-engagement/marketing-engagement.examples.html

@@ -25,7 +25,10 @@
   <p data-note>The minimal hero. Centered display headline, subtitle, primary CTA + secondary "Learn more" ghost. No supporting image — works when the headline carries the weight.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="simple hero">
-      <card-ui data-chunk="hero-cta-simple" raw>
+      <card-ui data-chunk="hero-cta-simple" data-chunk-kind="block"
+        data-chunk-domain="marketing"
+        data-chunk-description="Centered hero CTA — release tag, display headline, deck subhead, and a primary Get-started / ghost See-demos button pair, all center-aligned."
+        data-chunk-keywords="hero cta centered headline display deck subhead get-started buttons landing marketing banner launch" raw>
         <section bleed>
           <col-ui gap="3" align="center" padding="10">
             <tag-ui size="sm" variant="muted">v0.0.27 — out today</tag-ui>
@@ -47,7 +50,10 @@
   <p data-note>Two-column hero. Headline + subtitle + CTA on the left, supporting visual on the right. The visual is a placeholder card here; in production it's a screenshot, animation, or video poster.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="split hero">
-      <card-ui data-chunk="hero-cta-split" raw>
+      <card-ui data-chunk="hero-cta-split" data-chunk-kind="block"
+        data-chunk-domain="marketing"
+        data-chunk-description="Split hero CTA — two-column hero with tag, display headline, deck copy and CTA buttons on the left, and a product visual / proof panel on the right."
+        data-chunk-keywords="hero cta split two-column headline visual proof buttons start-free landing marketing grid feature" raw>
         <section bleed>
           <grid-ui columns="2" gap="6" align="center" padding="8">
             <col-ui gap="4" align="start">
@@ -83,7 +89,10 @@
   <p data-note>Read-only input prefilled with the user's referral URL + Copy button. Below it: per-channel share buttons (email, X, LinkedIn). Reward copy describes what referrer + referee get ("$10 credit each").</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="referral share link">
-      <card-ui data-chunk="referral-share-link">
+      <card-ui data-chunk="referral-share-link" data-chunk-kind="block"
+        data-chunk-domain="marketing"
+        data-chunk-description="Referral share card — 'Invite a friend, both get $10' with a readonly referral-link copy field and share buttons for email and social channels."
+        data-chunk-keywords="referral invite friend share link copy credit reward email social growth program" >
         <header>
           <span slot="heading" variant="section">Invite a friend, both get $10</span>
           <text-ui slot="description" color="subtle">When they sign up and verify, $10 in credit lands in both your accounts.</text-ui>
@@ -111,7 +120,10 @@
   <p data-note>The user's referral history. Stats grid (referrals sent / converted / credits earned), then a list of per-referral rows with avatar + status tag. Pending = invite sent, no signup; Joined = signed up, no verify; Verified = credit earned.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="referral status">
-      <card-ui data-chunk="referral-status">
+      <card-ui data-chunk="referral-status" data-chunk-kind="block"
+        data-chunk-domain="marketing"
+        data-chunk-description="Referral status card — earned-credit summary with a 3-up stat grid (Sent / Joined / Credit) and a list of invited friends with per-invite status tags."
+        data-chunk-keywords="referral status credit earned stats sent joined friends invites pending verified rewards tracking" >
         <header>
           <span slot="heading" variant="section">Your referrals</span>
           <text-ui slot="description" color="subtle">$30 credit earned · 3 friends joined</text-ui>
@@ -157,7 +169,10 @@
   <p data-note>Grid of earned + locked badges. Each card shows the icon, name, description, and earn-date. Earned badges carry the date as a <code>success</code> tag; locked badges show progress as a <code>muted</code> tag and live in a <code>ghost</code> card so they read as quieter without raw opacity.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="achievement badges">
-      <card-ui data-chunk="achievement-badges">
+      <card-ui data-chunk="achievement-badges" data-chunk-kind="block"
+        data-chunk-domain="marketing"
+        data-chunk-description="Achievement badges card — '5 of 12 unlocked' grid of badge tiles, unlocked ones with emoji icon, name and earned date, locked ones dimmed with progress hints."
+        data-chunk-keywords="achievements badges unlocked locked grid gamification streak milestones progress rewards engagement" >
         <header>
           <span slot="heading" variant="section">Achievements</span>
           <text-ui slot="description" color="subtle">5 of 12 unlocked</text-ui>
@@ -236,7 +251,10 @@
   <p data-note>The just-earned achievement card — usually appears as a toast or modal moment. Big icon, "You earned…" header, description, and a CTA to share or keep going. This is the dopamine hit; don't make it dismissive.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="achievement unlock">
-      <card-ui data-chunk="achievement-unlock">
+      <card-ui data-chunk="achievement-unlock" data-chunk-kind="block"
+        data-chunk-domain="marketing"
+        data-chunk-description="Achievement-unlocked celebration card — big emoji, 'Achievement unlocked' tag, display-size achievement name (7-day streak), and a stats-recap line, center-aligned."
+        data-chunk-keywords="achievement unlocked celebration streak emoji milestone gamification congratulations reward moment" >
         <section>
           <col-ui gap="3" align="center" padding="6">
             <text-ui variant="display">🔥</text-ui>

package/patterns/notifications-bell-and-digest/notifications-bell-and-digest.examples.html

@@ -26,7 +26,10 @@
   <p data-note>Default state when there are no unread notifications. Uses an empty-state-ui in the menu body so the popover doesn't feel broken; "View all" footer links to the full feed.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="bell menu empty">
-      <card-ui data-chunk="bell-menu-empty" style="max-width: 360px;" data-shape="popover">
+      <card-ui data-chunk="bell-menu-empty" data-chunk-kind="block"
+        data-chunk-domain="display"
+        data-chunk-description="Empty notifications menu — bell popover showing an 'All caught up' empty state with a bell-slash icon and no unread items."
+        data-chunk-keywords="notifications bell menu empty state caught-up popover zero none inbox" style="max-width: 360px;" data-shape="popover">
         <header>
           <text-ui slot="heading" strong>Notifications</text-ui>
         </header>
@@ -54,7 +57,10 @@
   <p data-note>Each row carries an avatar (or icon for system events), a one-line summary, a timestamp, and a small unread-dot. Clicking a row marks it read and navigates to the source. "Mark all read" + "View all activity" in the footer.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="bell menu with unread">
-      <card-ui data-chunk="bell-menu-unread" style="max-width: 380px;" data-shape="popover">
+      <card-ui data-chunk="bell-menu-unread" data-chunk-kind="block"
+        data-chunk-domain="display"
+        data-chunk-description="Notifications bell menu — '3 new' header tag over notification rows (avatar or icon, message, relative time; unread emphasized) with mark-all-read and view-all footer actions."
+        data-chunk-keywords="notifications bell menu unread new rows avatar time mark-read view-all popover inbox alerts" style="max-width: 380px;" data-shape="popover">
         <header>
           <row-ui slot="heading" align="center" gap="2">
             <text-ui strong>Notifications</text-ui>
@@ -125,7 +131,10 @@
   <p data-note>The in-app rendering of the digest email — frequency header, "What's in this digest" summary, sectioned content. Used inside notification prefs so the user can see exactly what a daily/weekly digest will look like before opting in.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="email digest preview">
-      <card-ui data-chunk="digest-email-preview" style="max-width: 640px;">
+      <card-ui data-chunk="digest-email-preview" data-chunk-kind="block"
+        data-chunk-domain="display"
+        data-chunk-description="Weekly digest preview card — grouped summary of the week's activity (mentions, updates, stats) as it will appear in the Monday email, with a Send-test header action."
+        data-chunk-keywords="digest weekly email preview summary activity grouped mentions updates send-test notifications batch" style="max-width: 640px;">
         <header>
           <span slot="heading" variant="section">Weekly digest preview</span>
           <text-ui slot="description" color="subtle">This is what your Monday morning email will contain</text-ui>

package/patterns/permissions-matrix/permissions-matrix.examples.html

@@ -23,14 +23,17 @@
   <p data-note>Capability per row, role per column, <code>check-ui</code> in each cell. Built-in roles (Viewer / Member / Admin / Owner) render <code>disabled</code> — they reflect the role's permissions but can't be edited from this surface. The <em>Custom</em> column is the authoring affordance: cells there toggle freely and save on change.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="permission matrix grid">
-      <card-ui data-chunk="permissions-matrix-grid" data-perm-card>
+      <card-ui data-chunk="permissions-matrix-grid" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Permissions matrix card — capabilities-by-role table with auto-save note and an Add-custom-role header action; each cell toggles a capability for a role."
+        data-chunk-keywords="permissions matrix roles capabilities table grid toggle custom role admin rbac access-control checkboxes" data-perm-card>
         <header>
           <span slot="heading" variant="section">Permissions</span>
           <text-ui slot="description" color="subtle">Changes save automatically</text-ui>
           <button-ui slot="action" text="Add custom role" variant="ghost" size="sm" icon-leading="plus"></button-ui>
         </header>
         <section bleed>
-          <table-ui id="pat-perm-matrix"></table-ui>
+          <table-ui frameless id="pat-perm-matrix"></table-ui>
         </section>
         <footer divider>
           <text-ui slot="description" color="subtle" size="sm">Built-in roles are read-only. The Custom column is editable.</text-ui>
@@ -45,7 +48,10 @@
   <p data-note>One card per role; <code>description-list-ui</code> with capability category as term, list of capabilities as description. Inline tag indicates whether the role is built-in or custom.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="role summary card">
-      <card-ui data-chunk="permissions-matrix-summary" data-perm-summary>
+      <card-ui data-chunk="permissions-matrix-summary" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Role summary card — a single role (Admin, Built-in, 3 members) with a description list of its capability groups and what each allows."
+        data-chunk-keywords="role summary admin built-in members capabilities description permissions detail rbac card" data-perm-summary>
         <header>
           <span slot="heading" variant="section">Admin</span>
           <text-ui slot="description" color="subtle">Built-in role · 3 members</text-ui>