@adia-ai/web-components 0.8.21 → 0.8.23

package/package.json

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

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

@@ -24,7 +24,10 @@
   <p data-note>The standard access-denied state (cross-ref 36d) augmented with a "Request access" primary action. <code>alert-ui variant="warning"</code> carries the explanation; the CTA opens the request form.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="access denied with request">
-      <card-ui data-chunk="access-denied-with-request" style="max-width: 480px;">
+      <card-ui data-chunk="access-denied-with-request" data-chunk-kind="block"
+        data-chunk-domain="auth"
+        data-chunk-description="Access-denied card — 'You don't have access to this' heading, warning alert naming the restricted resource and its owner, and a footer with Go back plus a primary Request access action."
+        data-chunk-keywords="access denied restricted permission locked request access owner resource warning alert forbidden gate go-back 403" style="max-width: 480px;">
         <header>
           <span slot="heading" variant="section">You don't have access to this</span>
         </header>
@@ -50,7 +53,10 @@
   <p data-note>The form the requester fills. Pre-fills the resource being requested; user picks the role they need + optional reason. Submit fires a notification to the owner.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="access request form">
-      <card-ui data-chunk="access-request-form" style="max-width: 560px;">
+      <card-ui data-chunk="access-request-form" data-chunk-kind="block"
+        data-chunk-domain="auth"
+        data-chunk-description="Request-access form card — readonly resource field, required role select (viewer / commenter / editor), and an optional justification textarea; the owner is notified on submit."
+        data-chunk-keywords="request access form role viewer commenter editor permission justification reason resource select textarea notify owner grant" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Request access</span>
           <text-ui slot="description" color="subtle">Avery Chen will be notified</text-ui>
@@ -86,7 +92,10 @@
   <p data-note>The state the requester sees after submission. <code>alert-ui variant="info"</code> with the reviewer name + reasonable ETA. "Cancel request" + "View other resources" actions.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="access request pending">
-      <card-ui data-chunk="access-request-pending" style="max-width: 480px;">
+      <card-ui data-chunk="access-request-pending" data-chunk-kind="block"
+        data-chunk-domain="auth"
+        data-chunk-description="Request-sent confirmation card — Pending status tag, info alert saying the owner was notified with expected response time, and footer actions to cancel the request or view other resources."
+        data-chunk-keywords="access request sent pending confirmation notified approve decline waiting status tag info alert cancel request email" style="max-width: 480px;">
         <header>
           <span slot="heading" variant="section">Request sent</span>
           <tag-ui slot="action" variant="warning">Pending</tag-ui>

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

@@ -26,7 +26,10 @@
   <p data-note>The active-keys list. Each row carries a name, prefix (last 4 chars only — never the full secret), scope tag, last-used time, and a kebab menu (Rotate / Revoke). "Create key" header action.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="api keys list">
-      <card-ui data-chunk="api-keys-list">
+      <card-ui data-chunk="api-keys-list" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="API keys list card — active keys as rows with key icon, masked secret and last-used time, scope tags (read / write), and a Create-key header action."
+        data-chunk-keywords="api keys list secret token masked scope read write rotate developer settings create revoke production credentials">
         <header>
           <span slot="heading" variant="section">API keys</span>
           <text-ui slot="description" color="subtle">3 active · last rotated 12 days ago</text-ui>
@@ -70,7 +73,10 @@
   <p data-note>The just-created key shown once. After this view closes, the secret is not retrievable; only the prefix shows in the list. Copy button + alert explaining the one-shot semantics.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="key one-time reveal">
-      <card-ui data-chunk="api-keys-create" style="max-width: 560px;">
+      <card-ui data-chunk="api-keys-create" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="New API key reveal card — one-time display of the freshly created key in a readonly copy field, with a warning alert that the key won't be shown again."
+        data-chunk-keywords="api key created new reveal copy one-time secret readonly warning show-once credentials developer settings" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Your new API key</span>
           <text-ui slot="description" color="subtle">Copy it now — it won't be shown again</text-ui>
@@ -101,7 +107,10 @@
   <p data-note>Endpoints + the events they subscribe to + last delivery status. Failed deliveries surface as a danger tag with a "Retry" affordance per row.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="webhooks list">
-      <card-ui data-chunk="webhooks-list">
+      <card-ui data-chunk="webhooks-list" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Webhooks list card — endpoint URLs as rows with event counts, last-delivery time, and per-endpoint status tags (200 OK / failing), plus an Add-endpoint header action."
+        data-chunk-keywords="webhooks endpoints list url events delivery status failing 200 add integration developer settings callbacks">
         <header>
           <span slot="heading" variant="section">Webhooks</span>
           <text-ui slot="description" color="subtle">2 endpoints · 1 failing</text-ui>
@@ -138,7 +147,10 @@
   <p data-note>Compliance / portability flow. User picks scope (full workspace vs. just my data) + format, the system queues the job, an email arrives with a download link. Async, not synchronous.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="data export request">
-      <card-ui data-chunk="data-export-request" style="max-width: 560px;">
+      <card-ui data-chunk="data-export-request" data-chunk-kind="block"
+        data-chunk-domain="data-management"
+        data-chunk-description="Data-export request card — scope select (just my data / entire workspace, GDPR Article 15) and format choice; the archive link arrives by email when ready."
+        data-chunk-keywords="data export request archive download gdpr scope workspace format json csv email compliance backup takeout" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Export your data</span>
           <text-ui slot="description" color="subtle">We'll email you when the archive is ready</text-ui>
@@ -180,7 +192,10 @@
   <p data-note>The user's recent export jobs. Status tags (Queued / Running / Ready / Expired). "Ready" rows show a Download button until the link expires; expired rows are still visible for audit but disabled.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="export history">
-      <card-ui data-chunk="data-export-history">
+      <card-ui data-chunk="data-export-history" data-chunk-kind="block"
+        data-chunk-domain="data-management"
+        data-chunk-description="Recent exports history card — past export jobs as rows with download icon, scope and format, requested time and record count, and status tags (Running / Ready / Expired)."
+        data-chunk-keywords="export history recent jobs download archive status running ready expired records list gdpr audit">
         <header>
           <span slot="heading" variant="section">Recent exports</span>
         </header>

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

@@ -25,7 +25,10 @@
   <p data-note>Compact footer for the chat thread. Tokens + cost + duration. Uses <code>tag-ui</code> in a row; subtle text color so it doesn't compete with replies.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="inline cost indicator">
-      <row-ui data-chunk="agent-cost-inline" gap="2" align="center" padding="2" style="max-width: 560px;">
+      <row-ui data-chunk="agent-cost-inline" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Inline agent-cost strip — compact tag row showing per-response cost, token count, and latency, with the model name right-aligned. Rides under an agent reply as a usage footer."
+        data-chunk-keywords="agent cost tokens latency model usage inline strip tags price per-response footer telemetry llm" gap="2" align="center" padding="2" style="max-width: 560px;">
         <tag-ui icon="coins" size="sm">$0.014</tag-ui>
         <tag-ui icon="hash" size="sm">2,184 tok</tag-ui>
         <tag-ui icon="timer" size="sm">3.2s</tag-ui>
@@ -41,7 +44,10 @@
   <p data-note>Full breakdown for a billing or admin view. Stat tiles for the headline numbers; <code>description-list-ui</code> for the per-channel decomposition (input / output / cache).</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="cost breakdown card">
-      <card-ui data-chunk="agent-cost-detailed" style="max-width: 560px;">
+      <card-ui data-chunk="agent-cost-detailed" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Agent usage breakdown card — 'Today's usage' with a 3-up stat grid (cost, tokens, calls, with trend deltas) and an inline description-list decomposing input / output / cache token spend."
+        data-chunk-keywords="agent usage cost tokens calls breakdown billing admin stats trend input output cache spend daily llm metering" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Today's usage</span>
           <text-ui slot="description" color="subtle">Apr 29 · across all sessions</text-ui>
@@ -75,7 +81,10 @@
   <p data-note>Soft warning when the user is approaching a rate-limit. <code>alert-ui variant="warning"</code> with a <code>progress-ui</code> showing remaining headroom. Action button offers upgrade or wait-time.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="rate-limit warning">
-      <alert-ui data-chunk="agent-rate-limit" variant="warning" icon="warning" style="max-width: 560px;">
+      <alert-ui data-chunk="agent-rate-limit" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Rate-limit warning alert — 'Approaching token limit' with used-of-allowance text, reset countdown, a progress bar at 87%, and Wait / Upgrade plan actions."
+        data-chunk-keywords="rate limit token allowance quota warning alert progress reset countdown upgrade plan usage cap throttle llm" variant="warning" icon="warning" style="max-width: 560px;">
         <col-ui slot="content" gap="2">
           <text-ui strong>Approaching token limit</text-ui>
           <text-ui>You've used 870k of your 1M daily token allowance. Resets at midnight UTC (in 4h 12m).</text-ui>

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

@@ -25,7 +25,10 @@
   <p data-note>Read-only inventory grouped by source (user / workspace / session). Each row carries a one-line fact, source tag, and last-updated time. Click-through opens the detail view.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="memory list">
-      <card-ui data-chunk="agent-memory-list" style="max-width: 640px;">
+      <card-ui data-chunk="agent-memory-list" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Agent memory list card — remembered facts as list rows with source provenance descriptions and scope tags (user / workspace), plus an Add-memory header action."
+        data-chunk-keywords="agent memory list facts remembered entries source provenance scope user workspace tags add personalization context" style="max-width: 640px;">
         <header>
           <span slot="heading" variant="section">Agent memory</span>
           <text-ui slot="description" color="subtle">14 entries across 3 sources</text-ui>
@@ -64,7 +67,10 @@
   <p data-note>Single-entry view. <code>description-list-ui</code> for metadata; <code>code-ui</code> for any structured payload (e.g. JSON facts). Footer carries delete + edit actions.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="memory detail">
-      <card-ui data-chunk="agent-memory-detail" style="max-width: 560px;">
+      <card-ui data-chunk="agent-memory-detail" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Agent memory detail card — a single remembered fact as the heading with scope tag, and a description-list of source, first seen, last referenced, and times applied."
+        data-chunk-keywords="agent memory detail fact source first-seen last-referenced times-applied provenance scope workspace metadata inspect" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Uses OKLCH tokens, never raw hex</span>
           <tag-ui slot="action" variant="accent">workspace</tag-ui>
@@ -103,7 +109,10 @@
   <p data-note>Inline drawer pop the agent fires when proposing a memory. Three controls: a <code>textarea-ui</code> for the fact, a <code>radio-ui</code> for scope, and primary/ghost actions in the footer. Errors carry through <code>field-ui</code>'s error slot.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="memory editor">
-      <card-ui data-chunk="agent-memory-editor" style="max-width: 560px;">
+      <card-ui data-chunk="agent-memory-editor" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Save-as-memory proposal card — 'Save this as a memory?' with an editable fact textarea and a scope radio group (just me / my workspace), for confirming an agent-proposed fact."
+        data-chunk-keywords="agent memory save proposal fact edit textarea scope radio user workspace confirm remember consent" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Save this as a memory?</span>
           <text-ui slot="description" color="subtle">The agent proposed a fact during this conversation.</text-ui>

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

@@ -25,7 +25,10 @@
   <p data-note>Full library route. <code>search-ui</code> at the top, <code>tag-ui</code> filter chips, <code>grid-ui columns="2"</code> of prompt cards. Empty state when search returns nothing.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="prompt library grid">
-      <card-ui data-chunk="agent-prompt-library-grid" style="max-width: 720px;">
+      <card-ui data-chunk="agent-prompt-library-grid" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Prompt library card — search bar with filter button over a grid of saved prompt tiles (title, preview text, category tag), plus a New-prompt header action."
+        data-chunk-keywords="prompt library saved prompts grid search filter categories templates snippets agent reuse new-prompt tiles" style="max-width: 720px;">
         <header>
           <span slot="heading" variant="section">Prompt library</span>
           <text-ui slot="description" color="subtle">12 prompts · 4 categories</text-ui>
@@ -74,7 +77,10 @@
   <p data-note>Compact popover surface fired from a chat input slash-command (<code>/</code> or <code>Cmd+J</code>). <code>menu-ui</code> with the prompt name + first 80 characters of body as the description. Recent prompts at the top.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="prompt picker">
-      <card-ui data-chunk="agent-prompt-picker" raw style="max-width: 420px;" data-shape="popover">
+      <card-ui data-chunk="agent-prompt-picker" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Prompt picker popover — Recent and Pinned groups of prompt rows (icon, title, one-line preview) for inserting a saved prompt into a chat composer."
+        data-chunk-keywords="prompt picker popover recent pinned insert composer saved prompts quick-select slash-command agent templates" raw style="max-width: 420px;" data-shape="popover">
         <section>
           <col-ui gap="3">
             <col-ui gap="1">
@@ -130,7 +136,10 @@
   <p data-note>The single prompt as a self-contained card. Header with name + tags; body with the full prompt text; footer with run / edit / delete. Reused inside the grid and the slash-menu detail.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="prompt card">
-      <card-ui data-chunk="agent-prompt-card" style="max-width: 560px;">
+      <card-ui data-chunk="agent-prompt-card" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Single prompt card — prompt title with Pinned and category tags, the full prompt text, and usage metadata; the detail view of one library entry."
+        data-chunk-keywords="prompt card detail pinned category tags text template agent library entry edit run" style="max-width: 560px;">
         <header>
           <span slot="heading" variant="section">Code review</span>
           <row-ui slot="action" gap="1">

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

@@ -25,7 +25,10 @@
   <p data-note>In-progress invocation. <code>tone="neutral"</code> with a <code>progress-ui</code> indeterminate strip in the body. No action buttons until the call resolves.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="running tool call">
-      <agent-artifact-ui data-chunk="agent-tool-call-running" title="search_web" kind="TOOL" icon="magnifying-glass" tone="neutral" style="max-width: 560px;">
+      <agent-artifact-ui data-chunk="agent-tool-call-running" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Running tool-call artifact — TOOL-kind card showing the JSON arguments and an indeterminate progress bar with 'Running…' while the call is in flight."
+        data-chunk-keywords="agent tool call running in-progress artifact json arguments progress indeterminate search_web live streaming" title="search_web" kind="TOOL" icon="magnifying-glass" tone="neutral" style="max-width: 560px;">
         <col-ui gap="2">
           <code-ui language="json">{ "query": "claude opus tool use latency", "max_results": 5 }</code-ui>
           <row-ui align="center" gap="2">
@@ -43,7 +46,10 @@
   <p data-note><code>tone="accent"</code> on resolution. Body shows the call args + a result preview (truncated when long). Secondary slot carries copy / open-in-new-tab actions.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="successful tool call">
-      <agent-artifact-ui data-chunk="agent-tool-call-success" title="search_web" kind="TOOL" icon="check-circle" tone="accent" style="max-width: 560px;">
+      <agent-artifact-ui data-chunk="agent-tool-call-success" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Successful tool-call artifact — TOOL-kind card with query and result-count summary in an inline description list, the JSON result payload, and a Copy-result action."
+        data-chunk-keywords="agent tool call success result artifact json query sources copy summary completed output" title="search_web" kind="TOOL" icon="check-circle" tone="accent" style="max-width: 560px;">
         <button-ui slot="secondary" text="Copy result" icon="copy" variant="ghost" size="sm"></button-ui>
         <col-ui gap="2" style="min-width: 0;">
           <description-list-ui layout="inline" align="between">
@@ -65,7 +71,10 @@
   <p data-note><code>tone="danger"</code> with a clear next-step. The body carries the call args plus the error message in an <code>alert-ui</code>; secondary slot offers retry.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="failed tool call">
-      <agent-artifact-ui data-chunk="agent-tool-call-error" title="fetch_invoice" kind="TOOL" icon="warning" tone="danger" style="max-width: 560px;">
+      <agent-artifact-ui data-chunk="agent-tool-call-error" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Failed tool-call artifact — danger-tone TOOL card with the JSON arguments, a danger alert carrying the error (404 Not Found) with a remediation hint, and a Retry action."
+        data-chunk-keywords="agent tool call error failed artifact 404 retry danger alert json arguments remediation exception" title="fetch_invoice" kind="TOOL" icon="warning" tone="danger" style="max-width: 560px;">
         <button-ui slot="secondary" text="Retry" icon="arrow-clockwise" variant="outline" size="sm"></button-ui>
         <col-ui gap="2" style="min-width: 0;">
           <code-ui language="json" style="min-width: 0;">{ "invoice_id": "inv_8421", "format": "pdf" }</code-ui>
@@ -86,7 +95,10 @@
   <p data-note>Default state inside a long thread — the agent has many tool calls and most don't need detail. Header carries the tool name + result count or status; body expands on click. Use <code>collapsed</code> attribute.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="collapsed tool call summary">
-      <col-ui data-chunk="agent-tool-call-collapsed" gap="2" style="max-width: 560px;">
+      <col-ui data-chunk="agent-tool-call-collapsed" data-chunk-kind="block"
+        data-chunk-domain="agent"
+        data-chunk-description="Collapsed tool-call stack — multiple completed tool calls as one-line collapsed artifacts (title carries tool name plus result summary), expandable to show payloads."
+        data-chunk-keywords="agent tool calls collapsed stack summary expandable multiple history transcript compact list" gap="2" style="max-width: 560px;">
         <agent-artifact-ui title="search_web · 5 results · 482 ms" kind="TOOL" icon="magnifying-glass" tone="accent" collapsed>
           <code-ui language="json">[ /* result list */ ]</code-ui>
         </agent-artifact-ui>

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

@@ -20,7 +20,10 @@
     <div data-artifact-item data-artifact-label="delete item — simple confirm">
       <button-ui data-chunk="alert-dialog-simple-trigger" text="Delete item" variant="outline"
         onclick="document.getElementById('alert-dialog-simple').open = true"></button-ui>
-      <modal-ui id="alert-dialog-simple" data-chunk="alert-dialog-simple" text="Delete this item?" role="alertdialog">
+      <modal-ui id="alert-dialog-simple" data-chunk="alert-dialog-simple" data-chunk-kind="block"
+        data-chunk-domain="overlay"
+        data-chunk-description="Simple destructive confirm dialog — 'Delete this item?' modal with cannot-be-undone body text and Cancel / danger Delete footer buttons."
+        data-chunk-keywords="alert dialog confirm delete destructive modal cannot-undo cancel danger permanent remove confirmation" text="Delete this item?" role="alertdialog">
         <p>This action cannot be undone. The item will be permanently removed from your workspace.</p>
         <div slot="footer" style="display:flex; gap:var(--a-space-2); justify-content:flex-end;">
           <button-ui text="Cancel" variant="ghost"
@@ -40,7 +43,10 @@
     <div data-artifact-item data-artifact-label="delete workspace — typed gate">
       <button-ui data-chunk="alert-dialog-typed-trigger" text="Delete workspace" variant="outline"
         onclick="document.getElementById('alert-dialog-typed').open = true"></button-ui>
-      <modal-ui id="alert-dialog-typed" data-chunk="alert-dialog-typed" text='Delete workspace "acme-prod"?' role="alertdialog">
+      <modal-ui id="alert-dialog-typed" data-chunk="alert-dialog-typed" data-chunk-kind="block"
+        data-chunk-domain="overlay"
+        data-chunk-description="Type-to-confirm destructive dialog — delete-workspace modal where the danger button stays disabled until the user types the workspace name to confirm."
+        data-chunk-keywords="alert dialog type-to-confirm delete workspace destructive modal irreversible name-match disabled danger safety confirmation" text='Delete workspace "acme-prod"?' role="alertdialog">
         <col-ui gap="3">
           <p>This will permanently delete the workspace, all members, all data, and all integrations. <strong>This cannot be undone.</strong></p>
           <field-ui label='Type "acme-prod" to confirm' required>
@@ -66,7 +72,10 @@
     <div data-artifact-item data-artifact-label="unsaved changes — discard or save">
       <button-ui data-chunk="alert-dialog-unsaved-trigger" text="Close editor" variant="outline"
         onclick="document.getElementById('alert-dialog-unsaved').open = true"></button-ui>
-      <modal-ui id="alert-dialog-unsaved" data-chunk="alert-dialog-unsaved" text="Discard unsaved changes?" role="alertdialog">
+      <modal-ui id="alert-dialog-unsaved" data-chunk="alert-dialog-unsaved" data-chunk-kind="block"
+        data-chunk-domain="overlay"
+        data-chunk-description="Unsaved-changes dialog — 'Discard unsaved changes?' modal with three-way footer: Cancel, outline-danger Discard, and primary Save & close."
+        data-chunk-keywords="alert dialog unsaved changes discard save close editor leave modal three-way confirm dirty-state" text="Discard unsaved changes?" role="alertdialog">
         <p>You have unsaved changes to this document. Leaving will lose them.</p>
         <div slot="footer" style="display:flex; gap:var(--a-space-2); justify-content:flex-end;">
           <button-ui text="Cancel" variant="ghost"

package/patterns/app-nav/app-nav.examples.html

@@ -101,7 +101,10 @@
   </p>
   <div data-artifact-container>
     <div data-demo data-artifact-item data-artifact-label="groups">
-      <nav-ui data-chunk="app-nav-groups">
+      <nav-ui data-chunk="app-nav-groups" data-chunk-kind="block"
+        data-chunk-domain="navigation"
+        data-chunk-description="Sidebar nav with collapsible groups — Settings group open (General selected, Security, Notifications) and a Team group with a rollup badge; groups collapse independently."
+        data-chunk-keywords="nav sidebar groups collapsible settings team nav-group nav-item selected badge navigation menu sections">
         <nav-group-ui icon="gear" text="Settings" open>
           <nav-item-ui text="General" value="general" selected></nav-item-ui>
           <nav-item-ui text="Security" value="security"></nav-item-ui>
@@ -126,7 +129,10 @@
   </p>
   <div data-artifact-container>
     <div data-demo data-artifact-item data-artifact-label="items">
-      <nav-ui data-chunk="app-nav-items">
+      <nav-ui data-chunk="app-nav-items" data-chunk-kind="block"
+        data-chunk-domain="navigation"
+        data-chunk-description="Flat sidebar nav — icon nav items (Dashboard selected, Analytics, Documentation, Support with a count badge) with no grouping; the minimal app nav."
+        data-chunk-keywords="nav sidebar flat items icons dashboard analytics docs support badge selected navigation menu simple">
         <nav-item-ui icon="house" text="Dashboard" value="dashboard" selected></nav-item-ui>
         <nav-item-ui icon="chart-bar" text="Analytics" value="analytics"></nav-item-ui>
         <nav-item-ui icon="book-open" text="Documentation" value="docs"></nav-item-ui>
@@ -154,7 +160,10 @@
   </p>
   <div data-artifact-container>
     <div data-demo data-artifact-item data-artifact-label="counts">
-      <nav-ui data-chunk="app-nav-badges-counts">
+      <nav-ui data-chunk="app-nav-badges-counts" data-chunk-kind="block"
+        data-chunk-domain="navigation"
+        data-chunk-description="Sidebar nav with unread-count badges — Inbox 12, Notifications 3, Mentions 1, Alerts 99+; numeric badges signal pending volume per destination."
+        data-chunk-keywords="nav sidebar badges counts unread inbox notifications mentions alerts numeric 99+ pending navigation menu">
         <nav-item-ui icon="tray" text="Inbox" value="inbox" badge="12" selected></nav-item-ui>
         <nav-item-ui icon="bell" text="Notifications" value="notifications" badge="3"></nav-item-ui>
         <nav-item-ui icon="envelope-open" text="Mentions" value="mentions" badge="1"></nav-item-ui>
@@ -170,7 +179,10 @@
   </p>
   <div data-artifact-container>
     <div data-demo data-artifact-item data-artifact-label="status callouts">
-      <nav-ui data-chunk="app-nav-badges-status-callouts">
+      <nav-ui data-chunk="app-nav-badges-status-callouts" data-chunk-kind="block"
+        data-chunk-domain="navigation"
+        data-chunk-description="Sidebar nav with status-callout badges — AI Assistant 'New', Experiments 'Beta', Real-time sync 'Soon'; word badges flag feature maturity, not counts."
+        data-chunk-keywords="nav sidebar badges status new beta soon feature callout maturity experiments assistant navigation menu">
         <nav-item-ui icon="sparkle" text="AI Assistant" value="assistant" badge="New"></nav-item-ui>
         <nav-item-ui icon="flask" text="Experiments" value="experiments" badge="Beta"></nav-item-ui>
         <nav-item-ui icon="hourglass" text="Real-time sync" value="rtsync" badge="Soon"></nav-item-ui>
@@ -187,7 +199,10 @@
   </p>
   <div data-artifact-container>
     <div data-demo data-artifact-item data-artifact-label="plan tiers">
-      <nav-ui data-chunk="app-nav-badges-plan-tiers">
+      <nav-ui data-chunk="app-nav-badges-plan-tiers" data-chunk-kind="block"
+        data-chunk-domain="navigation"
+        data-chunk-description="Sidebar nav with plan-tier badges — Forecasting 'Pro', Audit log 'Team', SSO 'Enterprise'; badges gate destinations by subscription tier as an upsell surface."
+        data-chunk-keywords="nav sidebar badges plan tiers pro team enterprise upsell gated subscription upgrade sso audit navigation">
         <nav-item-ui icon="house" text="Dashboard" value="dashboard"></nav-item-ui>
         <nav-item-ui icon="chart-line" text="Forecasting" value="forecasting" badge="Pro"></nav-item-ui>
         <nav-item-ui icon="users-three" text="Audit log" value="audit" badge="Team"></nav-item-ui>
@@ -205,7 +220,10 @@
   </p>
   <div data-artifact-container>
     <div data-demo data-artifact-item data-artifact-label="group rollup badges">
-      <nav-ui data-chunk="app-nav-badges-group-rollup-badges">
+      <nav-ui data-chunk="app-nav-badges-group-rollup-badges" data-chunk-kind="block"
+        data-chunk-domain="navigation"
+        data-chunk-description="Sidebar nav with group rollup badges — Inbox group badge 14 sums its children (Unread 12, Mentions 2); Team group carries a textual '3 invites' rollup."
+        data-chunk-keywords="nav sidebar groups rollup badges sum children inbox unread mentions invites aggregate navigation menu">
         <nav-group-ui icon="tray" text="Inbox" badge="14" open>
           <nav-item-ui text="Unread" value="unread" badge="12" selected></nav-item-ui>
           <nav-item-ui text="Mentions" value="mentions" badge="2"></nav-item-ui>
@@ -262,7 +280,10 @@
   </p>
   <div data-artifact-container>
     <div data-demo data-artifact-item data-artifact-label="labels and dividers">
-      <nav-ui data-chunk="app-nav-labels-and-dividers">
+      <nav-ui data-chunk="app-nav-labels-and-dividers" data-chunk-kind="block"
+        data-chunk-domain="navigation"
+        data-chunk-description="Sidebar nav sectioned by labels and dividers — 'Platform' label over Settings/Profile, a divider, then a 'Resources' label over Docs/Support."
+        data-chunk-keywords="nav sidebar labels dividers sections platform resources grouping headings navigation menu organize">
         <span data-nav-label>Platform</span>
         <nav-item-ui icon="gear" text="Settings" value="settings"></nav-item-ui>
         <nav-item-ui icon="user" text="Profile" value="profile"></nav-item-ui>
@@ -284,7 +305,10 @@
   </p>
   <div data-artifact-container>
     <div data-demo data-artifact-item data-artifact-label="spacer" data-nav-frame="md">
-      <nav-ui data-chunk="app-nav-spacer">
+      <nav-ui data-chunk="app-nav-spacer" data-chunk-kind="block"
+        data-chunk-domain="navigation"
+        data-chunk-description="Sidebar nav with a spacer pushing utility items to the bottom — main items on top, flexible spacer, then a divider and Help & Feedback pinned at the foot."
+        data-chunk-keywords="nav sidebar spacer bottom pinned help feedback utility footer push navigation menu layout">
         <nav-item-ui icon="house" text="Home" value="home" selected></nav-item-ui>
         <nav-item-ui icon="gear" text="Settings" value="settings"></nav-item-ui>
         <span data-nav-spacer></span>
@@ -333,7 +357,10 @@
   <p>A complete navigation sidebar as used in the admin pattern:</p>
   <div data-artifact-container>
     <div data-demo data-artifact-item data-artifact-label="full example" data-nav-frame="lg">
-      <nav-ui data-chunk="app-nav-full-example">
+      <nav-ui data-chunk="app-nav-full-example" data-chunk-kind="block"
+        data-chunk-domain="navigation"
+        data-chunk-description="Full sidebar nav recipe — Search item with a command-K keyboard shortcut, labeled sections with dividers, collapsible Settings group, badges, and bottom utility items combined in one nav."
+        data-chunk-keywords="nav sidebar full recipe search shortcut cmd-k sections groups badges dividers labels complete navigation menu app">
         <nav-item-ui icon="magnifying-glass" text="Search" value="search">
           <kbd slot="trailing">&#8984;K</kbd>
         </nav-item-ui>

package/patterns/approvals/approvals.examples.html

@@ -2,7 +2,7 @@
   <div>
     <h1>Approvals</h1>
     <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">list-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">avatar-ui</tag-ui>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">list-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
     </div>
   </div>
   <p>The queue + detail surface for items waiting on a human to approve, reject, or request changes — expense reports, PRs, access requests, content reviews. Always asynchronous; the approver sees a list and acts on each item independently.</p>
@@ -23,7 +23,10 @@
   <p data-note>List of pending items, most-urgent first. Each row carries the requester avatar + title + amount/scope + age + a pair of approve/reject buttons. Bulk select for batch approve.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="approval queue">
-      <card-ui data-chunk="approvals-queue">
+      <card-ui data-chunk="approvals-queue" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Approval queue card — 'Pending your approval' list of requests, each row with requester avatar, title with amount, a High priority tag leading the requester/department/age line, and inline Reject/Approve buttons; header carries an Approve-all bulk action."
+        data-chunk-keywords="approvals queue pending approve reject request review workflow expense budget vendor access travel bulk high priority list rows requester avatar inbox">
         <header>
           <span slot="heading" variant="section">Pending your approval</span>
           <text-ui slot="description" color="subtle">5 items · 2 high priority</text-ui>
@@ -32,15 +35,14 @@
         <section bleed>
           <!-- Canonical list-item rows: text + slot="description" + slot="icon" +
                slot="action". The action slot promotes the row to a 3-column grid
-               (icon | content | action) and right-aligns the action cluster, so
-               Reject/Approve land in a consistent trailing column across every
-               row regardless of the High badge. -->
+               (icon | content | action) and right-aligns the action cluster —
+               ACTIONS ONLY (gh#539, operator ruling 2026-07-30): the priority
+               tag is request CONTEXT and leads the description line instead. -->
           <list-ui divider contained>
             <list-item-ui text="Q2 onboarding budget — $48,000">
               <avatar-ui slot="icon" size="sm" text="Jordan Lee"></avatar-ui>
-              <span slot="description">Jordan Lee · Engineering · 2 hours ago</span>
+              <span slot="description"><tag-ui size="sm" variant="warning">High</tag-ui> Jordan Lee · Engineering · 2 hours ago</span>
               <row-ui slot="action" gap="2" align="center">
-                <tag-ui size="sm" variant="warning">High</tag-ui>
                 <button-ui text="Reject" variant="ghost" size="sm"></button-ui>
                 <button-ui text="Approve" variant="primary" size="sm" icon-leading="check"></button-ui>
               </row-ui>
@@ -55,9 +57,8 @@
             </list-item-ui>
             <list-item-ui text="Access request — production database">
               <avatar-ui slot="icon" size="sm" text="Sam Park"></avatar-ui>
-              <span slot="description">Sam Park · Data · 1 day ago</span>
+              <span slot="description"><tag-ui size="sm" variant="warning">High</tag-ui> Sam Park · Data · 1 day ago</span>
               <row-ui slot="action" gap="2" align="center">
-                <tag-ui size="sm" variant="warning">High</tag-ui>
                 <button-ui text="Reject" variant="ghost" size="sm"></button-ui>
                 <button-ui text="Approve" variant="primary" size="sm" icon-leading="check"></button-ui>
               </row-ui>
@@ -82,7 +83,10 @@
   <p data-note>The single-item review surface. Header carries the request title + status + reviewer chain. Body shows the request data (line items / diff / metadata). Footer is a primary Approve, a secondary Reject, and a "Request changes" path for fixable issues.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="approval detail">
-      <card-ui data-chunk="approvals-detail" style="max-width: 720px;">
+      <card-ui data-chunk="approvals-detail" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Approval detail card — single request review surface: title with amount, submitter and age, Pending-review status tag, description-list of requester / justification / budget breakdown / reviewer chain, and a footer with Reject, Request changes, and primary Approve."
+        data-chunk-keywords="approval detail review request pending approve reject request-changes reviewer chain justification budget breakdown description-list footer actions workflow single-item" style="max-width: 720px;">
         <header>
           <span slot="heading" variant="section">Q2 onboarding budget — $48,000</span>
           <text-ui slot="description" color="subtle">Submitted by Jordan Lee · 2 hours ago</text-ui>

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

@@ -18,7 +18,10 @@
   <p data-note>Standard layout: title + filters in the header, table in a bleed section, footer carrying status + pagination. Action column uses a tag-ui colored by verb severity (success/warning/danger). Resource column uses code-ui for monospace IDs.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="audit log — admin">
-      <card-ui data-chunk="audit-log-basic">
+      <card-ui data-chunk="audit-log-basic" data-chunk-kind="block"
+        data-chunk-domain="data"
+        data-chunk-description="Audit log card — admin action history with actor and action filter selects in the header and rows of who-did-what events (create / update / delete) with timestamps."
+        data-chunk-keywords="audit log history admin actions actor verb filter create update delete events timestamps compliance security trail">
         <header>
           <span slot="heading" variant="section">Audit log</span>
           <text-ui slot="description" color="subtle">Last 90 days · admin actions only</text-ui>
@@ -38,7 +41,7 @@
           </row-ui>
         </header>
         <section bleed>
-          <table-ui id="audit-log-table"></table-ui>
+          <table-ui frameless id="audit-log-table"></table-ui>
         </section>
         <footer divider>
           <text-ui color="subtle" size="sm">Showing 8 of 247 events</text-ui>