@adia-ai/web-components 0.8.21 → 0.8.23

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">
@@ -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>

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>

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

@@ -5,7 +5,7 @@
       <tag-ui size="sm">alert-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">text-ui</tag-ui>
     </div>
   </div>
-  <p>Persistent strip-shaped surfaces above the app shell. System banners (offline, maintenance, update available), live-update banners ("new since you opened this"), and announcement banners (beta callouts, promos). All three are <code>alert-ui</code> compositions; the variant + dismiss + CTA pattern is what differs.</p>
+  <p>Persistent strip-shaped surfaces above the app shell. System banners (offline, maintenance, update available), live-update banners ("new since you opened this"), and announcement banners (beta callouts, promos). All three are <code>alert-ui</code> compositions; the variant + dismiss + CTA pattern is what differs. Content uses alert-ui's sectioned anatomy (gh#507) — semantic <code>header</code> / <code>section</code> / <code>footer</code> children inside <code>slot="content"</code>; the component owns the gaps, so banner spacing balances without per-banner layout improvisation.</p>
 </header>
 
 <section data-section data-property="when-to-use">
@@ -25,11 +25,14 @@
   <p data-note><code>variant="warning"</code> with a network-slash icon. Non-dismissible while the connection is down. The banner disappears on its own when the network returns; users don't dismiss it manually.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="offline banner">
-      <alert-ui data-chunk="banner-system-offline" variant="warning" icon="wifi-slash">
-        <col-ui slot="content" gap="1">
-          <text-ui strong>You're offline.</text-ui>
-          <text-ui>Changes will sync when the connection returns. Some features are unavailable.</text-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-system-offline" data-chunk-kind="block"
+        data-chunk-domain="error"
+        data-chunk-description="Offline banner — warning alert with wifi-slash icon: 'You're offline', changes sync when the connection returns, some features unavailable."
+        data-chunk-keywords="offline banner connection lost sync warning network unavailable degraded system status" variant="warning" icon="wifi-slash">
+        <div slot="content">
+          <header>You're offline.</header>
+          <section>Changes will sync when the connection returns. Some features are unavailable.</section>
+        </div>
       </alert-ui>
     </div>
   </div>
@@ -40,14 +43,15 @@
   <p data-note><code>variant="info"</code> with a wrench icon. Posted ahead of a planned outage. Carries the start time and an optional "Learn more" link to a status page. Not dismissible — users need to know.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="maintenance banner">
-      <alert-ui data-chunk="banner-system-maintenance" variant="info" icon="wrench">
-        <col-ui slot="content" gap="1">
-          <text-ui strong>Scheduled maintenance — Sunday, 2:00–4:00 AM UTC.</text-ui>
-          <text-ui>The service will be read-only during this window.</text-ui>
-          <row-ui gap="2" justify="end">
-            <button-ui text="Status page" variant="ghost" size="sm" icon-trailing="arrow-up-right"></button-ui>
-          </row-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-system-maintenance" data-chunk-kind="block"
+        data-chunk-domain="error"
+        data-chunk-description="Scheduled-maintenance banner — info alert announcing the maintenance window (read-only during it) with a Status-page link action."
+        data-chunk-keywords="maintenance banner scheduled window read-only status page downtime info system announce" variant="info" icon="wrench">
+        <div slot="content">
+          <header>Scheduled maintenance — Sunday, 2:00–4:00 AM UTC.</header>
+          <section>The service will be read-only during this window.</section>
+          <footer><button-ui text="Status page" variant="ghost" size="sm" icon-trailing="arrow-up-right"></button-ui></footer>
+        </div>
       </alert-ui>
     </div>
   </div>
@@ -58,14 +62,15 @@
   <p data-note><code>variant="info"</code> with an arrow-clockwise icon and a primary "Refresh" CTA. Appears when the client detects a newer build. Dismissible (user is in the middle of something) but reappears on next session start.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="update available banner">
-      <alert-ui data-chunk="banner-system-update" variant="info" icon="arrow-clockwise" closable>
-        <col-ui slot="content" gap="1">
-          <text-ui strong>A new version is available.</text-ui>
-          <text-ui>Refresh to get the latest features and fixes.</text-ui>
-          <row-ui gap="2" justify="end">
-            <button-ui text="Refresh" variant="primary" size="sm"></button-ui>
-          </row-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-system-update" data-chunk-kind="block"
+        data-chunk-domain="error"
+        data-chunk-description="New-version banner — closable info alert saying a new version is available with a primary Refresh action to load it."
+        data-chunk-keywords="update banner new version refresh available closable deploy reload system notice" variant="info" icon="arrow-clockwise" closable>
+        <div slot="content">
+          <header>A new version is available.</header>
+          <section>Refresh to get the latest features and fixes.</section>
+          <footer><button-ui text="Refresh" variant="primary" size="sm"></button-ui></footer>
+        </div>
       </alert-ui>
     </div>
   </div>
@@ -76,16 +81,15 @@
   <p data-note><code>variant="info"</code> with a count + a "Show new" CTA. Sits above a list / feed / table to signal that the underlying data has new rows the user hasn't seen yet. Clicking the CTA scrolls the new items in and dismisses the banner. Companion to the <code>data-stream</code> trait.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="live update banner">
-      <alert-ui data-chunk="banner-live-update" variant="info" icon="arrow-up">
-        <col-ui slot="content" gap="1">
-          <row-ui gap="2" align="baseline" wrap>
-            <text-ui strong>12 new items</text-ui>
-            <text-ui color="subtle">since you opened this view 4 minutes ago.</text-ui>
-          </row-ui>
-          <row-ui gap="2" justify="end">
-            <button-ui text="Show new" variant="primary" size="sm" icon-trailing="arrow-up"></button-ui>
-          </row-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-live-update" data-chunk-kind="block"
+        data-chunk-domain="display"
+        data-chunk-description="Live-update banner — '12 new items since you opened this view' info alert with a Show-new action that jumps to the fresh content."
+        data-chunk-keywords="live update banner new items feed refresh show-new realtime stale view arrived" variant="info" icon="arrow-up">
+        <div slot="content">
+          <header>12 new items</header>
+          <section><text-ui color="subtle">since you opened this view 4 minutes ago.</text-ui></section>
+          <footer><button-ui text="Show new" variant="primary" size="sm" icon-trailing="arrow-up"></button-ui></footer>
+        </div>
       </alert-ui>
     </div>
   </div>
@@ -96,14 +100,15 @@
   <p data-note><code>variant="info"</code> or <code>variant="muted"</code> with a sparkle / flask icon. Promotes a new feature to opted-in users; carries a "Try it" CTA + dismiss. Once dismissed, persists per-user — don't show twice.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="beta announcement banner">
-      <alert-ui data-chunk="banner-announcement-beta" variant="muted" icon="sparkle" closable>
-        <col-ui slot="content" gap="1">
-          <text-ui strong>New: Saved views.</text-ui>
-          <text-ui>Curate filter sets and reuse them across the workspace. Now in beta.</text-ui>
-          <row-ui gap="2" justify="end">
-            <button-ui text="Try it" variant="primary" size="sm"></button-ui>
-          </row-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-announcement-beta" data-chunk-kind="block"
+        data-chunk-domain="marketing"
+        data-chunk-description="Feature-announcement banner — closable muted alert introducing a beta feature ('New: Saved views') with a Try-it action."
+        data-chunk-keywords="announcement banner feature beta new try-it closable launch in-app promote" variant="muted" icon="sparkle" closable>
+        <div slot="content">
+          <header>New: Saved views.</header>
+          <section>Curate filter sets and reuse them across the workspace. Now in beta.</section>
+          <footer><button-ui text="Try it" variant="primary" size="sm"></button-ui></footer>
+        </div>
       </alert-ui>
     </div>
   </div>
@@ -114,14 +119,15 @@
   <p data-note><code>variant="info"</code> with a megaphone or calendar icon. Time-boxed (event date, promo end). Dismiss persists for the campaign window. CTA goes to the landing page or signup flow.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="promo announcement banner">
-      <alert-ui data-chunk="banner-announcement-promo" variant="info" icon="megaphone-simple" closable>
-        <col-ui slot="content" gap="1">
-          <text-ui strong>UIConf 2026 — May 22, virtual.</text-ui>
-          <text-ui>Two days of sessions on generative UI, A2UI internals, and the road ahead.</text-ui>
-          <row-ui gap="2" justify="end">
-            <button-ui text="Save your seat" variant="primary" size="sm" icon-trailing="arrow-up-right"></button-ui>
-          </row-ui>
-        </col-ui>
+      <alert-ui data-chunk="banner-announcement-promo" data-chunk-kind="block"
+        data-chunk-domain="marketing"
+        data-chunk-description="Event-promo banner — closable info alert with megaphone icon promoting an event (date, one-line pitch) and a Save-your-seat CTA."
+        data-chunk-keywords="promo banner event conference announcement cta save-seat megaphone marketing closable" variant="info" icon="megaphone-simple" closable>
+        <div slot="content">
+          <header>UIConf 2026 — May 22, virtual.</header>
+          <section>Two days of sessions on generative UI, A2UI internals, and the road ahead.</section>
+          <footer><button-ui text="Save your seat" variant="primary" size="sm" icon-trailing="arrow-up-right"></button-ui></footer>
+        </div>
       </alert-ui>
     </div>
   </div>

package/patterns/timezone-selector/timezone-selector.examples.html

@@ -18,7 +18,10 @@
   <p data-note>Type to filter by city, region, or offset. Default value resolved from the browser's locale; the current-tz hint sits under the input. Composes select-ui[searchable] with no new primitive.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="timezone picker">
-      <card-ui data-chunk="timezone-selector-basic" style="max-width: 480px;">
+      <card-ui data-chunk="timezone-selector-basic" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Time-zone selector card — searchable select of time zones (search by city or region) used for log timestamps, reports and meeting times."
+        data-chunk-keywords="timezone selector searchable select city region utc offset settings locale timestamps display" style="max-width: 480px;">
         <header>
           <span slot="heading" variant="section">Display time zone</span>
           <text-ui slot="description" color="subtle">Used for log timestamps, scheduled reports, and meeting times</text-ui>
@@ -41,7 +44,10 @@
   <p data-note>The chosen zone's current local time updates in the description as the user changes the picker. Useful for "Send at" / "Schedule report" forms where the time-in-target matters more than the offset.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="timezone picker with preview">
-      <card-ui data-chunk="timezone-selector-preview" style="max-width: 480px;">
+      <card-ui data-chunk="timezone-selector-preview" data-chunk-kind="block"
+        data-chunk-domain="settings"
+        data-chunk-description="Schedule with time-zone preview — searchable time-zone select plus a time field, and a live preview line showing the equivalent local times for recipients."
+        data-chunk-keywords="timezone selector schedule report preview local time equivalent recipients searchable convert" style="max-width: 480px;">
         <header>
           <span slot="heading" variant="section">Schedule report</span>
         </header>

package/patterns/timezone-selector/timezone-selector.examples.js

@@ -36,7 +36,9 @@ function timezoneOptions() {
   }
   return zones.map(tz => ({
     value: tz,
-    label: `${tz} · ${offsetLabel(tz)}`,
+    // Display drops the IANA underscores (gh#538) — "America/Los Angeles"
+    // reads human and matches a spaced query; value keeps the exact id.
+    label: `${tz.replace(/_/g, ' ')} · ${offsetLabel(tz)}`,
   }));
 }
 

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

@@ -22,19 +22,23 @@
   <p data-note>Stepper header, step body, Back/Next footer. The interactive buttons below advance the stepper and switch the body panel.</p>
   <div data-artifact-container>
     <div data-artifact-item data-artifact-label="wizard">
-      <button-ui data-chunk="wizard-drawer-three-step-wizard" text="Create workspace" icon="plus" variant="primary" onclick="this.nextElementSibling.open=true"></button-ui>
-      <drawer-ui id="pat-wizard" side="right" size="lg">
+      <button-ui id="pat-wizard-open" text="Create workspace" icon="plus" variant="primary"></button-ui>
+      <drawer-ui data-chunk="wizard-drawer-three-step-wizard" data-chunk-kind="block"
+        data-chunk-domain="onboarding"
+        data-chunk-description="Three-step wizard drawer — 'Create workspace' with a stepper (Details / Members / Review) in the header, per-step form bodies, and Back / Next footer navigation."
+        data-chunk-keywords="wizard drawer steps stepper create workspace details members review multi-step back next flow setup" id="pat-wizard" side="right" size="lg">
         <header slot="header">
-          <col-ui gap="2" grow>
-            <text-ui strong>Create workspace</text-ui>
-            <stepper-ui id="pat-wizard-stepper" step="0">
-              <stepper-item-ui text="Details"></stepper-item-ui>
-              <stepper-item-ui text="Members"></stepper-item-ui>
-              <stepper-item-ui text="Review"></stepper-item-ui>
-            </stepper-ui>
-          </col-ui>
+          <text-ui strong>Create workspace</text-ui>
         </header>
         <section slot="body">
+          <!-- Stepper is a CONTENT block above the step panels, not header
+               chrome (operator ruling 2026-07-30): header / content(stepper)
+               / content / footer. -->
+          <stepper-ui id="pat-wizard-stepper" step="0">
+            <stepper-item-ui text="Details"></stepper-item-ui>
+            <stepper-item-ui text="Members"></stepper-item-ui>
+            <stepper-item-ui text="Review"></stepper-item-ui>
+          </stepper-ui>
           <div data-wizard-step="0">
             <col-ui gap="3">
               <h4>Workspace details</h4>
@@ -71,7 +75,7 @@
             <col-ui gap="3">
               <h4>Review and create</h4>
               <alert-ui text="Your workspace will be created and team members will be invited by email." variant="info" icon="info"></alert-ui>
-              <description-list-ui>
+              <description-list-ui layout="inline">
                 <dt>Name</dt><dd>Acme Team</dd>
                 <dt>Slug</dt><dd>/acme-team</dd>
                 <dt>Members</dt><dd>2 invited</dd>
@@ -85,7 +89,7 @@
             <button-ui id="pat-wizard-back" text="Back" variant="ghost" disabled></button-ui>
           </span>
           <span slot="action">
-            <button-ui text="Cancel" variant="ghost" onclick="this.closest('drawer-ui').open=false"></button-ui>
+            <button-ui id="pat-wizard-cancel" text="Cancel" variant="ghost"></button-ui>
             <button-ui id="pat-wizard-next" text="Next" variant="primary"></button-ui>
           </span>
         </footer>
@@ -98,20 +102,18 @@
   <h2 variant="section">Anatomy</h2>
   <code-ui language="html">&lt;drawer-ui side="right" size="lg"&gt;
 
-  &lt;!-- stepper in header tracks progress --&gt;
+  &lt;!-- header carries the title only --&gt;
   &lt;header slot="header"&gt;
-    &lt;col-ui gap="2" grow&gt;
-      &lt;text-ui weight="semibold"&gt;Create workspace&lt;/text-ui&gt;
-      &lt;stepper-ui step="0"&gt;
-        &lt;stepper-item-ui text="Details"&gt;&lt;/stepper-item-ui&gt;
-        &lt;stepper-item-ui text="Members"&gt;&lt;/stepper-item-ui&gt;
-        &lt;stepper-item-ui text="Review"&gt;&lt;/stepper-item-ui&gt;
-      &lt;/stepper-ui&gt;
-    &lt;/col-ui&gt;
+    &lt;text-ui weight="semibold"&gt;Create workspace&lt;/text-ui&gt;
   &lt;/header&gt;
 
-  &lt;!-- one panel per step, toggled via hidden attr --&gt;
+  &lt;!-- stepper is the FIRST content block, then one panel per step --&gt;
   &lt;section slot="body"&gt;
+    &lt;stepper-ui step="0"&gt;
+      &lt;stepper-item-ui text="Details"&gt;&lt;/stepper-item-ui&gt;
+      &lt;stepper-item-ui text="Members"&gt;&lt;/stepper-item-ui&gt;
+      &lt;stepper-item-ui text="Review"&gt;&lt;/stepper-item-ui&gt;
+    &lt;/stepper-ui&gt;
     &lt;div data-wizard-step="0"&gt; ...details... &lt;/div&gt;
     &lt;div data-wizard-step="1" hidden&gt; ...members... &lt;/div&gt;
     &lt;div data-wizard-step="2" hidden&gt; ...review... &lt;/div&gt;
@@ -134,7 +136,7 @@
 <section data-section data-property="rules">
   <h2 variant="section">Rules</h2>
   <ul>
-    <li>Stepper is in the <strong>header</strong>, not the body. The user always sees progress even when the body scrolls.</li>
+    <li>Stepper is the <strong>first content block</strong> of the body — <code>header / content (stepper) / content / footer</code> (operator ruling 2026-07-30); the header carries the title only. Review steps use <code>description-list-ui layout="inline"</code>, the responsive two-column property|value settings layout.</li>
     <li>Use <code>stepper-ui.step</code> (numeric) as the source of truth. Toggle <code>hidden</code> on <code>[data-wizard-step="N"]</code> to swap panels.</li>
     <li>The primary action label changes on the last step: "Next" → "Create" / "Finish". Back button is disabled on step 0.</li>
     <li>Every step validates independently before advancing. Advance triggers <code>.next()</code> on the stepper AND unhides the next panel.</li>

package/patterns/wizard-drawer/wizard-drawer.examples.js

@@ -1,12 +1,23 @@
-/** Wizard drawer pattern — wire stepper to step-panel swap */
+/** Wizard drawer pattern — wire stepper to step-panel swap.
+ *
+ * ALL interactivity lives here, none inline (gh#506): the site route
+ * renders the markup through the A2UI pipeline, which does not execute
+ * inline onclick handlers — an onclick-opened drawer demo is dead on
+ * /site/patterns/wizard-drawer. The route's `setup` module (this file)
+ * DOES run there, so the open/cancel triggers wire here like Back/Next. */
 
 export default function setup(router) {
   const stepper = router.querySelector('#pat-wizard-stepper');
   const backBtn = router.querySelector('#pat-wizard-back');
   const nextBtn = router.querySelector('#pat-wizard-next');
   const drawer  = router.querySelector('#pat-wizard');
+  const openBtn   = router.querySelector('#pat-wizard-open');
+  const cancelBtn = router.querySelector('#pat-wizard-cancel');
   if (!stepper || !backBtn || !nextBtn || !drawer) return;
 
+  openBtn?.addEventListener('press', () => { drawer.open = true; });
+  cancelBtn?.addEventListener('press', () => { drawer.open = false; });
+
   const total = 3;
   let step = 0;
 

package/styles/foundation/radius.css

@@ -11,8 +11,8 @@
 }
 
 :root {
-  --a-radius-min: 0.25rem;
-  --a-radius-max: 1.25rem;
+  --a-radius-min: 0.375rem; /* 6px — operator ruling 2026-07-30 */
+  --a-radius-max: 0.875rem; /* 14px */
   /* §230-bundle (v0.5.9): xs scale notch added for badge / sub-tile / inline-pill use cases needing smaller radius than `sm`. */
   --a-radius-xs-k: 0.166;
   --a-radius-sm-k: 0.333;

package/styles/scale.css

@@ -115,8 +115,8 @@
     --a-gap-xl: calc(var(--a-space-4)   * var(--a-gap-k)); /* 16px @k=1 */
     --a-gap: var(--a-gap-md);
 
-    --a-radius-min: 0.25rem;
-    --a-radius-max: 1.25rem;
+    --a-radius-min: 0.375rem; /* 6px — operator ruling 2026-07-30; byte-copy of foundation/radius.css */
+    --a-radius-max: 0.875rem; /* 14px */
     --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
     --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
     --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));