@adia-ai/web-components 0.8.34 → 0.8.35

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Marketing &amp; engagement</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">stat-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>button-ui</code> <code>tag-ui</code> <code>stat-ui</code> <code>field-ui</code>
   </div>
   <p>Three adjacent marketing-side surfaces: hero/CTA blocks (14c) for landing pages, referral and invite flows (14f) for word-of-mouth growth, and achievement/milestone moments (14g) for ongoing engagement. All compose existing primitives — heroes are layout-heavy card-ui, referrals are field-ui + tag-ui status, achievements are tag-ui + stat-ui + progress-ui.</p>
 </header>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Bell menu &amp; digest preview</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">empty-state-ui</tag-ui> <tag-ui size="sm">avatar-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">row-ui</tag-ui> <tag-ui size="sm">col-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>empty-state-ui</code> <code>avatar-ui</code> <code>tag-ui</code> <code>row-ui</code> <code>col-ui</code>
   </div>
   <p>Two adjacent notification surfaces: the bell-icon popover that opens from the app shell (15d) and the email-digest preview that shows a user what their daily/weekly summary will contain (15e). Both compose existing primitives — `menu-ui` + per-row `list-item-ui` shapes.</p>
 </header>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Permissions Matrix</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">table-ui</tag-ui> <tag-ui size="sm">check-ui</tag-ui> <tag-ui size="sm">description-list-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>table-ui</code> <code>check-ui</code> <code>description-list-ui</code> <code>tag-ui</code>
   </div>
   <p>The full RBAC grid — capabilities (rows) × roles (columns), check-mark cells indicating which role grants which capability. Two shapes: an editable grid for custom roles (admin authoring), and a read-only summary card showing one role's permissions in plain language.</p>
 </header>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Permissions Role Picker</h1>
-    <div data-actions>
-      <tag-ui size="sm">option-card-ui</tag-ui> <tag-ui size="sm">radio-ui</tag-ui> <tag-ui size="sm">select-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>option-card-ui</code> <code>radio-ui</code> <code>select-ui</code> <code>field-ui</code>
   </div>
   <p>Surface for assigning a role — at invite time, when promoting an existing member, or when editing a row in a members table. Two shapes: a rich radio group with role descriptions (settings-page or invite flow), and a compact select for inline edits inside a member row.</p>
 </header>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Permissions Sharing</h1>
-    <div data-actions>
-      <tag-ui size="sm">option-card-ui</tag-ui> <tag-ui size="sm">search-ui</tag-ui> <tag-ui size="sm">select-ui</tag-ui> <tag-ui size="sm">description-list-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>option-card-ui</code> <code>search-ui</code> <code>select-ui</code> <code>description-list-ui</code> <code>button-ui</code>
   </div>
   <p>Surfaces for sharing a resource (doc, dashboard, project) with people outside its default audience. Three shapes — visibility scope picker (private / link / org / public), generated share link with expiry, and add-people autocomplete with per-person role.</p>
 </header>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Public profile &amp; identity verification</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">avatar-ui</tag-ui> <tag-ui size="sm">stat-ui</tag-ui> <tag-ui size="sm">upload-ui</tag-ui> <tag-ui size="sm">stepper-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>avatar-ui</code> <code>stat-ui</code> <code>upload-ui</code> <code>stepper-ui</code> <code>tag-ui</code>
   </div>
   <p>Two adjacent profile surfaces: the externally-shareable public page (16d) and the KYC/identity-verification flow (16e). Both compose card-ui shells around primitives — no new components needed.</p>
 </header>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Record Detail Drawer</h1>
-    <div data-actions>
-      <tag-ui size="sm">drawer-ui</tag-ui> <tag-ui size="sm">tabs-ui</tag-ui> <tag-ui size="sm">description-list-ui</tag-ui> <tag-ui size="sm">timeline-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>drawer-ui</code> <code>tabs-ui</code> <code>description-list-ui</code> <code>timeline-ui</code>
   </div>
   <p>Side drawer that shows the details of a selected row without navigating away from the list. Header carries the subject (avatar + name + status); body uses tabs to switch between Properties, Activity, and Comments.</p>
 </header>

package/patterns/responsive-shell-sidebar/responsive-shell-sidebar.examples.html

@@ -36,9 +36,9 @@
 <header>
   <div>
     <h1>Responsive Shell Sidebar</h1>
-    <div data-actions>
-      <tag-ui size="sm">drawer-ui</tag-ui> <tag-ui size="sm">pane-ui</tag-ui> <tag-ui size="sm">list-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>drawer-ui</code> <code>pane-ui</code> <code>list-ui</code> <code>button-ui</code>
   </div>
   <p>Editor-shell with leading + trailing sidebars that collapse to drawers below a 900px viewport breakpoint. Dual-mount: the same content renders inline on wide viewports and inside <code>&lt;drawer-ui&gt;</code> twins on narrow; state is shared via a single signal source consumed by both mount points.</p>
 </header>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Retention Cohort</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">table-ui</tag-ui> <tag-ui size="sm">badge-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>table-ui</code> <code>badge-ui</code>
   </div>
   <p>Composition pattern: render a retention cohort "heatmap" using a regular <code>table-ui</code> with a badge-based cell renderer. Each cell is a <code>badge-ui</code> variant tinted by the retention bucket, so the table still sorts, paginates, and copies to clipboard like any other data table.</p>
 </header>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Search &amp; Discovery</h1>
-    <div data-actions>
-      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">search-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">avatar-ui</tag-ui> <tag-ui size="sm">row-ui</tag-ui> <tag-ui size="sm">col-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>card-ui</code> <code>search-ui</code> <code>tag-ui</code> <code>avatar-ui</code> <code>row-ui</code> <code>col-ui</code>
   </div>
   <p>The surfaces that surround a search input — what shows up below it. Result lists (flat and grouped), recent-searches menu, and saved-views list. Compose around <code>search-ui</code>; the input itself lives in its component demo.</p>
 </header>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>System &amp; App Banners</h1>
-    <div data-actions>
-      <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>
+  <div data-tags>
+    <code>alert-ui</code> <code>button-ui</code> <code>text-ui</code>
   </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. 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>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Time-zone selector</h1>
-    <div data-actions>
-      <tag-ui size="sm">select-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>select-ui</code> <code>field-ui</code>
   </div>
   <p>IANA timezone picker — searchable select-ui populated from <code>Intl.supportedValuesOf('timeZone')</code> (browser-native, ~400 zones, zero-deps). Each option renders as <code>America/Los_Angeles · UTC-8</code> so users can scan by offset or search by city / region.</p>
 </header>

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

@@ -1,9 +1,9 @@
 <header>
   <div>
     <h1>Wizard Drawer</h1>
-    <div data-actions>
-      <tag-ui size="sm">drawer-ui</tag-ui> <tag-ui size="sm">stepper-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui>
-    </div>
+  </div>
+  <div data-tags>
+    <code>drawer-ui</code> <code>stepper-ui</code> <code>button-ui</code>
   </div>
   <p>Multi-step form in a drawer. Stepper in the header tracks progress; body swaps content per step; footer pins Back / Next, with a primary finish on the last step. The canonical onboarding-inside-an-app shape.</p>
 </header>