@adia-ai/web-components 0.8.22 → 0.8.24

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

@@ -25,10 +25,13 @@
   <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>
+            <tag-ui size="sm" variant="default">v0.0.27 — out today</tag-ui>
             <text-ui variant="display" strong>Generative UI, deterministically.</text-ui>
             <text-ui variant="deck" color="subtle">AdiaUI emits A2UI JSON the runtime renders into Light-DOM web components. No model, no surprise.</text-ui>
             <row-ui gap="2">
@@ -47,11 +50,14 @@
   <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">
-              <tag-ui size="sm" variant="muted">For teams</tag-ui>
+              <tag-ui size="sm" variant="default">For teams</tag-ui>
               <text-ui variant="display" strong>Ship UI as fast as your model thinks.</text-ui>
               <text-ui variant="deck" color="subtle">A2UI is a typed JSON protocol your agent emits and the runtime renders. No React rebuild for every prompt.</text-ui>
               <row-ui gap="2">
@@ -64,7 +70,7 @@
                 <stat-ui label="Cost ratio" value="0.18×"></stat-ui>
               </row-ui>
             </col-ui>
-            <card-ui variant="soft">
+            <card-ui variant="filled">
               <section bleed>
                 <col-ui align="center" justify="center" padding="10">
                   <text-ui color="subtle">[ Product visual ]</text-ui>
@@ -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>
@@ -142,7 +154,7 @@
               <list-item-ui text="riley@example.com">
                 <avatar-ui slot="icon" size="sm" text="riley@example.com"></avatar-ui>
                 <span slot="description">Sent 1 month ago</span>
-                <tag-ui slot="action" size="sm" variant="muted">Pending</tag-ui>
+                <tag-ui slot="action" size="sm" variant="default">Pending</tag-ui>
               </list-item-ui>
             </list-ui>
           </col-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>
@@ -200,7 +215,7 @@
                   <text-ui variant="display" color="subtle">🏗️</text-ui>
                   <text-ui color="subtle" strong>Builder</text-ui>
                   <text-ui variant="caption" color="subtle">Ship 10 prompts</text-ui>
-                  <tag-ui size="sm" variant="muted">7 of 10</tag-ui>
+                  <tag-ui size="sm" variant="default">7 of 10</tag-ui>
                 </col-ui>
               </section>
             </card-ui>
@@ -210,7 +225,7 @@
                   <text-ui variant="display" color="subtle">🌟</text-ui>
                   <text-ui color="subtle" strong>30-day streak</text-ui>
                   <text-ui variant="caption" color="subtle">A month of daily use</text-ui>
-                  <tag-ui size="sm" variant="muted">12 of 30</tag-ui>
+                  <tag-ui size="sm" variant="default">12 of 30</tag-ui>
                 </col-ui>
               </section>
             </card-ui>
@@ -220,7 +235,7 @@
                   <text-ui variant="display" color="subtle">🤝</text-ui>
                   <text-ui color="subtle" strong>Connector</text-ui>
                   <text-ui variant="caption" color="subtle">Refer 5 friends</text-ui>
-                  <tag-ui size="sm" variant="muted">3 of 5</tag-ui>
+                  <tag-ui size="sm" variant="default">3 of 5</tag-ui>
                 </col-ui>
               </section>
             </card-ui>
@@ -236,11 +251,14 @@
   <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>
-            <tag-ui size="sm" variant="primary">Achievement unlocked</tag-ui>
+            <tag-ui size="sm" variant="accent">Achievement unlocked</tag-ui>
             <text-ui variant="display" strong>7-day streak</text-ui>
             <text-ui color="subtle">A full week of daily use. You've shipped 14 prompts and 23 chunks since you started.</text-ui>
           </col-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,11 +57,14 @@
   <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>
-            <tag-ui size="sm" variant="primary">3 new</tag-ui>
+            <tag-ui size="sm" variant="accent">3 new</tag-ui>
           </row-ui>
         </header>
         <section>
@@ -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>

package/patterns/permissions-role-picker/permissions-role-picker.examples.html

@@ -24,7 +24,10 @@
   <p data-note>Each role gets an <code>option-card-ui</code> with name, one-line description, and (optionally) a "recommended" badge. Default selection lands on the lowest-privilege role — promote-by-decision, not by accident.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="rich role picker">
-      <field-ui data-chunk="permissions-role-picker-radio" label="Role" hint="Members can be promoted to admin later by any owner.">
+      <field-ui data-chunk="permissions-role-picker-radio" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Role picker as option cards — Viewer / Member / Admin / Owner radio cards, each with a heading and a capability description, Admin tagged 'Recommended for leads'."
+        data-chunk-keywords="role picker option cards radio viewer member admin owner permissions capabilities choose select recommended" label="Role" hint="Members can be promoted to admin later by any owner.">
         <col-ui gap="2">
           <option-card-ui name="role" value="viewer" heading="Viewer" description="Can read everything; cannot edit, comment, or share."></option-card-ui>
           <option-card-ui name="role" value="member" heading="Member" description="Can edit content they own and comment on anything." checked></option-card-ui>
@@ -43,7 +46,10 @@
   <p data-note>Used inside a members table. The select replaces the static role tag on row-hover, or stays inline when the table is in edit mode. Falls back to a non-interactive <code>tag-ui</code> when the current user can't change roles.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="role select inline">
-      <row-ui data-chunk="permissions-role-picker-select" gap="3" align="center" padding="2" style="max-width: 480px;">
+      <row-ui data-chunk="permissions-role-picker-select" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Member row with role select — avatar, name and email, and a compact role dropdown (Viewer / Member / Admin) trailing; the per-member row of a members list."
+        data-chunk-keywords="member row role select dropdown avatar email permissions change assign compact inline list" gap="3" align="center" padding="2" style="max-width: 480px;">
         <avatar-ui size="sm" text="Kim Granlund"></avatar-ui>
         <col-ui gap="0" grow>
           <text-ui strong>Kim Granlund</text-ui>

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

@@ -25,7 +25,10 @@
   <p data-note>Four scopes as <code>option-card-ui</code> in a stacked radio group: Private, Link, Organization, Public. Each shows the audience and the action the user takes after picking.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="visibility scope picker">
-      <field-ui data-chunk="permissions-sharing-scopes" label="Who can access this dashboard?">
+      <field-ui data-chunk="permissions-sharing-scopes" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Sharing-scope picker — option cards for Private, Anyone with the link, Anyone in your workspace, and Public on the web (warning-tagged Indexable), each with an icon and consequence description."
+        data-chunk-keywords="sharing scope access private link workspace public option cards visibility permissions who-can-access indexable" label="Who can access this dashboard?">
         <col-ui gap="2">
           <option-card-ui name="scope" value="private" heading="Private" description="Only people you've added explicitly." icon="lock" checked></option-card-ui>
           <option-card-ui name="scope" value="link" heading="Anyone with the link" description="No sign-in required. Link can be revoked anytime." icon="link"></option-card-ui>
@@ -44,7 +47,10 @@
   <p data-note>Surfaces when the user picks Link or Public scope. Generated URL with copy button; <code>select-ui</code> for expiry; revoke button as a danger-tone secondary action.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="share link with expiry">
-      <card-ui data-chunk="permissions-share-link" style="max-width: 560px;">
+      <card-ui data-chunk="permissions-share-link" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Share-link card — readonly share URL with Copy button, current scope tag, and link options (permission level select, expiry); revoke action included."
+        data-chunk-keywords="share link copy url scope anyone expiry revoke permission level readonly collaborate" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Share link</span>
           <tag-ui slot="action" variant="accent" size="sm">Anyone with the link</tag-ui>
@@ -94,7 +100,10 @@
   <p data-note>Surfaces in the Private and Org scopes. Autocomplete <code>search-ui</code> for people; per-row <code>select-ui</code> for the access role; existing-shares list below the input.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="add people share">
-      <card-ui data-chunk="permissions-share-people" style="max-width: 560px;">
+      <card-ui data-chunk="permissions-share-people" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Share-with-people card — add-by-name-or-email search with a permission select beside it, over rows of people who already have access with per-person role dropdowns."
+        data-chunk-keywords="share people invite email search permission role viewer editor access list collaborate manage" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Share with people</span>
         </header>

package/patterns/profile-public-and-verification/profile-public-and-verification.examples.html

@@ -27,7 +27,10 @@
   <p data-note>Shareable user/team page. Header: large avatar, display name, optional verified badge, role/title, location, joined date. Body: bio, social links, stats grid (`stat-ui` × N), recent public work. The verified badge means identity-verified (16e), not "important user".</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="public profile">
-      <card-ui data-chunk="profile-public" style="max-width: 720px;">
+      <card-ui data-chunk="profile-public" data-chunk-kind="block"
+        data-chunk-domain="display"
+        data-chunk-description="Public profile card — large avatar, name with Verified seal tag, handle and bio, follower/following stats, skill tags, and Follow / Message actions."
+        data-chunk-keywords="profile public avatar verified bio handle stats followers skills tags follow message social card identity" style="max-width: 720px;">
         <section>
           <col-ui gap="4">
             <row-ui gap="4" align="start">
@@ -35,7 +38,7 @@
               <col-ui gap="1" grow>
                 <row-ui gap="2" align="center">
                   <text-ui strong size="lg">Kim Granlund</text-ui>
-                  <tag-ui size="sm" variant="primary" icon-leading="seal-check">Verified</tag-ui>
+                  <tag-ui size="sm" variant="accent" icon-leading="seal-check">Verified</tag-ui>
                 </row-ui>
                 <text-ui color="subtle">Founder · AdiaUI · Reykjavík, IS</text-ui>
                 <text-ui>Building the AdiaUI web-components library and the A2UI generative-UI runtime. Previously at Construct, before that at Modular.</text-ui>
@@ -86,7 +89,10 @@
   <p data-note>The progress indicator across the verification flow. Steps: Personal info → Document upload → Selfie → Review. Uses <code>stepper-ui</code> with completed states. Each step is a separate page (or drawer step), not a single long form.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="verification stepper">
-      <card-ui data-chunk="verification-stepper" style="max-width: 720px;">
+      <card-ui data-chunk="verification-stepper" data-chunk-kind="block"
+        data-chunk-domain="auth"
+        data-chunk-description="Identity-verification stepper card — 'Verify your identity' with a horizontal stepper (Personal info / Document / Review) showing progress through the KYC flow."
+        data-chunk-keywords="verification identity stepper kyc personal-info document review progress steps payouts compliance" style="max-width: 720px;">
         <header>
           <span slot="heading" variant="section">Verify your identity</span>
           <text-ui slot="description" color="subtle">Required for payouts and agent-driven transactions over $1,000</text-ui>
@@ -109,7 +115,10 @@
   <p data-note>The document-capture step. <code>upload-ui</code> with `accept="image/*,.pdf"`, hint about supported formats, and security copy explaining what happens to the file. Front + back uploads for ID cards.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="document upload">
-      <card-ui data-chunk="verification-document-upload" style="max-width: 640px;">
+      <card-ui data-chunk="verification-document-upload" data-chunk-kind="block"
+        data-chunk-domain="auth"
+        data-chunk-description="ID document upload card — document-type select (passport / driver's license / national ID) and front/back upload dropzones with acceptance hints."
+        data-chunk-keywords="verification document upload id passport license dropzone front back kyc identity file government" style="max-width: 640px;">
         <header>
           <span slot="heading" variant="section">Upload your government-issued ID</span>
           <text-ui slot="description" color="subtle">Passport, driver's license, or national ID card</text-ui>
@@ -147,7 +156,10 @@
   <p data-note>The post-submission states the user sees while the system reviews. Three flavors: pending review (clock), verified (seal-check primary), rejected (warning). Each is a card-ui with status alert + next-action.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="verification pending">
-      <card-ui data-chunk="verification-status" style="max-width: 480px;">
+      <card-ui data-chunk="verification-status" data-chunk-kind="block"
+        data-chunk-domain="auth"
+        data-chunk-description="Verification-submitted status card — info alert stating the review window (within 1 business day) and that email follows on approval or if more info is needed."
+        data-chunk-keywords="verification submitted status under-review pending email kyc identity waiting alert info" style="max-width: 480px;">
         <header>
           <span slot="heading" variant="section">Verification submitted</span>
         </header>
@@ -166,7 +178,7 @@
         <header>
           <span slot="heading" variant="section">
             You're verified
-            <tag-ui size="sm" variant="primary" icon-leading="seal-check">Verified</tag-ui>
+            <tag-ui size="sm" variant="accent" icon-leading="seal-check">Verified</tag-ui>
           </span>
         </header>
         <section>

package/patterns/record-detail-drawer/record-detail-drawer.examples.html

@@ -22,8 +22,11 @@
   <p data-note>Identity in the header, key/value properties in the body, primary action in the footer.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="simple detail">
-      <button-ui data-chunk="record-detail-drawer-simple-detail" text="View contact" icon="user" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
-      <drawer-ui side="right" size="md">
+      <button-ui text="View contact" icon="user" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+      <drawer-ui data-chunk="record-detail-drawer-simple-detail" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Record detail drawer — contact inspector with avatar, name, company and Active badge in the header, and a description-list body of the record's fields."
+        data-chunk-keywords="record detail drawer contact inspector avatar company badge fields description-list side panel view crm" side="right" size="md">
         <header slot="header">
           <row-ui gap="2" align="center" grow>
             <avatar-ui text="Olivia Martin" size="md"></avatar-ui>
@@ -61,8 +64,11 @@
   <p data-note>Tabs sit directly under the header so switching views doesn't require scrolling. Each tab's panel scrolls independently inside the body.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="tabbed detail">
-      <button-ui data-chunk="record-detail-drawer-tabbed-detail" text="Open issue" icon="bug" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
-      <drawer-ui side="right" size="lg">
+      <button-ui text="Open issue" icon="bug" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+      <drawer-ui data-chunk="record-detail-drawer-tabbed-detail" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Tabbed record detail drawer — issue inspector with id badge, title, and status/priority badges in the header, and tabs (Details / Activity / Comments) organizing the body."
+        data-chunk-keywords="record detail drawer tabbed issue inspector badges status priority tabs activity comments side panel tracker" side="right" size="lg">
         <header slot="header">
           <col-ui gap="1" grow>
             <row-ui gap="2" align="center">

package/patterns/retention-cohort/retention-cohort.examples.html

@@ -25,13 +25,16 @@
   <p data-note>Each week-column uses the same <code>formatPct</code> renderer, which wraps the number in a <code>badge-ui</code> whose variant is keyed to three buckets: ≥60% success, 30–60% warning, &lt;30% muted. Null values render blank so partial cohorts don't force fake zeros.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="retention by signup week">
-      <card-ui data-chunk="retention-cohort-default-retention">
+      <card-ui data-chunk="retention-cohort-default-retention" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Retention cohort table card — 'Retention by signup week' heatmap-style table of % still active in week N per cohort row."
+        data-chunk-keywords="retention cohort table heatmap signup week active percentage analytics churn matrix">
         <header>
           <h3>Retention by signup week</h3>
           <text-ui slot="description" color="subtle">% of users still active in week N</text-ui>
         </header>
         <section bleed>
-          <table-ui id="pat-retention-default"></table-ui>
+          <table-ui frameless id="pat-retention-default"></table-ui>
         </section>
       </card-ui>
     </div>
@@ -43,13 +46,16 @@
   <p data-note>For first-time viewers, pair the table with a tiny legend in the card footer so the buckets are decoded. The legend itself is three <code>badge-ui</code>s — same component the cells use — keeping the visual vocabulary tight.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="retention with legend">
-      <card-ui data-chunk="retention-cohort-with-legend">
+      <card-ui data-chunk="retention-cohort-with-legend" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Retention cohort table with legend footer — the cohort heatmap table plus a divider footer explaining the color scale and reading direction."
+        data-chunk-keywords="retention cohort table legend footer color scale heatmap signup week analytics explain">
         <header>
           <h3>Retention by signup week</h3>
           <text-ui slot="description" color="subtle">Percent of the cohort still active N weeks after signup</text-ui>
         </header>
         <section bleed>
-          <table-ui id="pat-retention-legend"></table-ui>
+          <table-ui frameless id="pat-retention-legend"></table-ui>
         </section>
         <footer divider>
           <small slot="description">Retention buckets:</small>
@@ -71,7 +77,10 @@
   <p data-note>When the cohort table is the only chart in a section, prepend a stat pair for the most important numbers — W4 (early signal) and W12 (sustained retention). Stops users having to scan every row to answer "is this healthy?"</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="retention with stats">
-      <card-ui data-chunk="retention-cohort-stat-pair">
+      <card-ui data-chunk="retention-cohort-stat-pair" data-chunk-kind="block"
+        data-chunk-domain="dashboard"
+        data-chunk-description="Retention stat pair — two side-by-side stat cards (week-1 and week-6 retention with deltas) summarizing the cohort table's headline numbers."
+        data-chunk-keywords="retention stats pair week-1 week-6 delta summary cards cohort headline analytics">
         <header>
           <h3>Retention</h3>
           <text-ui slot="description" color="subtle">New signups · rolling 6-week view</text-ui>
@@ -91,7 +100,7 @@
           </grid-ui>
         </section>
         <section bleed>
-          <table-ui id="pat-retention-stats"></table-ui>
+          <table-ui frameless id="pat-retention-stats"></table-ui>
         </section>
       </card-ui>
     </div>

package/patterns/search-discovery/search-discovery.examples.html

@@ -24,7 +24,10 @@
   <p data-note>Flat ranked list. Each row carries a title, snippet, meta (author / date / type), and an optional trailing action. <code>list-ui</code> + <code>list-item-ui</code> with <code>tag-ui</code> for the type.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="search results list">
-      <card-ui data-chunk="search-results-list">
+      <card-ui data-chunk="search-results-list" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Search results list card — result-count header ('42 results for …', sorted by relevance with timing) over rows of title plus matched-snippet descriptions."
+        data-chunk-keywords="search results list count relevance snippet matches query rows discovery find">
         <header>
           <span slot="heading" variant="section">42 results for "OKLCH tokens"</span>
           <text-ui slot="description" color="subtle">Sorted by relevance · 0.18s</text-ui>
@@ -63,7 +66,10 @@
   <p data-note>Sectioned by type when the catalog is heterogeneous (Documents / People / Projects). Each group shows top 3–5; "See all in {group}" links to a filtered view.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="grouped search results">
-      <card-ui data-chunk="search-results-grouped" style="max-width: 640px;">
+      <card-ui data-chunk="search-results-grouped" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Grouped search results card — one query across entity groups (People · Documents · Projects), each group with a subtle count header band over its result rows."
+        data-chunk-keywords="search results grouped entities people documents projects sections count global omnisearch discovery" style="max-width: 640px;">
         <header>
           <span slot="heading" variant="section">"kim"</span>
           <text-ui slot="description" color="subtle">Across people, documents, and projects</text-ui>
@@ -135,7 +141,10 @@
   <p data-note>Popover that appears when the search input is focused but empty. Recent queries with most-recent-first ordering, a "Clear" action in the footer. Each row reruns the query on click; trailing icon dismisses a single entry.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="recent searches menu">
-      <card-ui data-chunk="search-recents-menu" style="max-width: 360px;">
+      <card-ui data-chunk="search-recents-menu" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Recent searches menu — 'Recent' list of past queries with clock icons and per-row dismiss buttons, shown before the user types."
+        data-chunk-keywords="search recent history queries clock dismiss menu suggestions empty-query discovery" style="max-width: 360px;">
         <header>
           <span slot="heading" variant="section">Recent</span>
         </header>
@@ -172,7 +181,10 @@
   <p data-note>List of curated queries the user has named and pinned. Each row shows the view name, a short description (or active filter chips), last-run time, and edit/share/delete actions. Used for "My open issues", "Q2 customer escalations", etc.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="saved views list">
-      <card-ui data-chunk="search-saved-views">
+      <card-ui data-chunk="search-saved-views" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Saved searches card — named saved views as rows with query summary and result counts, plus a primary Save-current-view header action."
+        data-chunk-keywords="saved views searches named bookmark list rows counts save-current filters presets discovery">
         <header>
           <span slot="heading" variant="section">Saved views</span>
           <text-ui slot="description" color="subtle">5 views · last edited 2 days ago</text-ui>