@adia-ai/web-components 0.8.32 → 0.8.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.32",
+  "version": "0.8.34",
   "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/admin-keys-and-export/admin-keys-and-export.examples.html

@@ -41,7 +41,7 @@
               <icon-ui slot="icon" name="key" size="sm"></icon-ui>
               <span slot="description"><code>sk_live_…A4F2</code> · last used 4 minutes ago</span>
               <row-ui slot="action" gap="2" align="center">
-                <tag-ui size="sm" variant="accent">read · write</tag-ui>
+                <tag-ui size="sm" variant="primary">read · write</tag-ui>
                 <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
               </row-ui>
             </list-item-ui>

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

@@ -42,11 +42,11 @@
             </list-item-ui>
             <list-item-ui text="Uses OKLCH tokens, never raw hex">
               <span slot="description">From the AdiaUI styleguide</span>
-              <tag-ui slot="action" size="sm" variant="accent">workspace</tag-ui>
+              <tag-ui slot="action" size="sm" variant="primary">workspace</tag-ui>
             </list-item-ui>
             <list-item-ui text="Browser baseline: Chromium 125+, Safari 18.0+">
               <span slot="description">From AGENTS.md</span>
-              <tag-ui slot="action" size="sm" variant="accent">workspace</tag-ui>
+              <tag-ui slot="action" size="sm" variant="primary">workspace</tag-ui>
             </list-item-ui>
             <list-item-ui text="Working on Group 1 of skill expansion">
               <span slot="description">Current session</span>
@@ -73,7 +73,7 @@
         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>
+          <tag-ui slot="action" variant="primary">workspace</tag-ui>
         </header>
         <section>
           <col-ui gap="3">
@@ -118,7 +118,7 @@
           <text-ui slot="description" color="subtle">The agent proposed a fact during this conversation.</text-ui>
         </header>
         <section>
-          <form-container-ui>
+          <form>
             <col-ui gap="3">
               <field-ui label="Fact">
                 <textarea-ui rows="3" value="Browser baseline: Chromium 125+, Safari 18.0+, Firefox 129+"></textarea-ui>
@@ -135,7 +135,7 @@
               <button-ui text="Discard" variant="ghost"></button-ui>
               <button-ui text="Save memory" variant="primary"></button-ui>
             </row-ui>
-          </form-container-ui>
+          </form>
         </section>
       </card-ui>
     </div>

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

@@ -41,7 +41,7 @@
               <button-ui icon="funnel" variant="ghost" size="sm"></button-ui>
             </row-ui>
             <row-ui gap="2">
-              <tag-ui size="sm" variant="accent">All · 12</tag-ui>
+              <tag-ui size="sm" variant="primary">All · 12</tag-ui>
               <tag-ui size="sm">Code review · 4</tag-ui>
               <tag-ui size="sm">Drafts · 3</tag-ui>
               <tag-ui size="sm">Research · 3</tag-ui>
@@ -143,7 +143,7 @@
         <header>
           <span slot="heading" variant="section">Code review</span>
           <row-ui slot="action" gap="1">
-            <tag-ui size="sm" variant="accent">Pinned</tag-ui>
+            <tag-ui size="sm" variant="primary">Pinned</tag-ui>
             <tag-ui size="sm">Code review</tag-ui>
           </row-ui>
         </header>

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

@@ -1,14 +1,19 @@
 /** Audit-log pattern — populate table-ui via [columns] with col.render functions. */
 
+// `''` entries are family-less tags, rendered `tone="muted"` below —
+// `variant="muted"` was never a valid tag-ui value (tag's `variant` enum is
+// the semantic-family axis; `muted` only ever existed on `tone`, the fill-
+// style axis) — a pre-existing bug, fixed while migrating the adjacent
+// accent/muted vocabulary (variant/color/tone convention cut, gh#873/874).
 const VERB_TONE = {
   create:  'primary',
   update:  'primary',
   delete:  'danger',
   revoke:  'danger',
   rotate:  'warning',
-  export:  'muted',
-  read:    'muted',
-  login:   'muted',
+  export:  '',
+  read:    '',
+  login:   '',
 };
 
 const ROWS = [
@@ -44,8 +49,10 @@ export default function setup(router) {
     {
       key: 'verb', label: 'Action', align: 'left',
       render: (v) => {
-        const tone = VERB_TONE[v] || 'muted';
-        return `<tag-ui size="sm" variant="${tone}">${escape(v)}</tag-ui>`;
+        const tone = VERB_TONE[v] ?? '';
+        return tone
+          ? `<tag-ui size="sm" variant="${tone}">${escape(v)}</tag-ui>`
+          : `<tag-ui size="sm" tone="muted">${escape(v)}</tag-ui>`;
       },
     },
     {

package/patterns/bulk-action-toolbar/bulk-action-toolbar.examples.js

@@ -14,7 +14,10 @@ const columns = [
   { key: 'name',   label: 'Name',   sortable: true, flex: 2 },
   { key: 'owner',  label: 'Owner',  sortable: true, flex: 1 },
   { key: 'status', label: 'Status', sortable: true, flex: 1, render: (val) => {
-    const v = { Active: 'success', Draft: 'muted', Archived: 'warning' }[val] || '';
+    // `Draft` is a family-less badge, tone="muted" — `variant="muted"`
+    // retired (variant/color/tone convention cut, gh#873/874).
+    if (val === 'Draft') return `<badge-ui text="${val}" tone="muted"></badge-ui>`;
+    const v = { Active: 'success', Archived: 'warning' }[val] || '';
     return `<badge-ui text="${val}" variant="${v}"></badge-ui>`;
   }},
   { key: 'updated', label: 'Updated', sortable: true, flex: 1 },

package/patterns/changelog-feed/changelog-feed.examples.html

@@ -34,7 +34,7 @@
               <row-ui gap="2" align="baseline" justify="between">
                 <row-ui gap="2" align="baseline">
                   <text-ui strong size="lg">v2.3.0</text-ui>
-                  <tag-ui size="sm" variant="accent">Latest</tag-ui>
+                  <tag-ui size="sm" variant="primary">Latest</tag-ui>
                 </row-ui>
                 <text-ui color="subtle" size="sm">March 12, 2026</text-ui>
               </row-ui>

package/patterns/comments-and-collaboration/comments-and-collaboration.examples.html

@@ -175,7 +175,7 @@
         data-chunk-description="Reactions bar — emoji reaction tags with counts (thumbs-up 4, party 2, eyes 1, rocket 1; own reaction highlighted) plus an add-reaction button. Rides under a comment or message."
         data-chunk-keywords="reactions emoji bar counts thumbs-up party add react message comment collaboration engagement" gap="1">
         <tag-ui size="sm">👍 4</tag-ui>
-        <tag-ui size="sm" variant="accent">🎉 2</tag-ui>
+        <tag-ui size="sm" variant="primary">🎉 2</tag-ui>
         <tag-ui size="sm">👀 1</tag-ui>
         <tag-ui size="sm">🚀 1</tag-ui>
         <button-ui icon="plus" variant="ghost" size="sm" aria-label="Add reaction"></button-ui>

package/patterns/conversion-funnel/conversion-funnel.examples.html

@@ -124,7 +124,7 @@
               <span slot="meta">5,726 · 68% <badge-ui text="−32%" variant="warning"></badge-ui></span>
             </progress-row-ui>
             <progress-row-ui label="Workspace created" value="54">
-              <span slot="meta">4,547 · 54% <badge-ui text="−21%" variant="muted"></badge-ui></span>
+              <span slot="meta">4,547 · 54% <badge-ui text="−21%" tone="muted"></badge-ui></span>
             </progress-row-ui>
             <progress-row-ui label="Invited a teammate" value="22">
               <span slot="meta">1,852 · 22% <badge-ui text="−59%" variant="danger"></badge-ui></span>

package/patterns/diff-review/diff-review.examples.html

@@ -106,27 +106,27 @@
         </header>
         <section>
           <description-list-ui>
-            <description-term-ui>Workspace name</description-term-ui>
-            <description-detail-ui>
+            <dt>Workspace name</dt>
+            <dd>
               <row-ui gap="2" align="center">
                 <tag-ui size="sm" variant="danger" icon-leading="minus">Adia</tag-ui>
                 <tag-ui size="sm" variant="success" icon-leading="plus">Adia AI</tag-ui>
               </row-ui>
-            </description-detail-ui>
-            <description-term-ui>Default theme</description-term-ui>
-            <description-detail-ui>
+            </dd>
+            <dt>Default theme</dt>
+            <dd>
               <row-ui gap="2" align="center">
                 <tag-ui size="sm" variant="danger" icon-leading="minus">light</tag-ui>
                 <tag-ui size="sm" variant="success" icon-leading="plus">auto</tag-ui>
               </row-ui>
-            </description-detail-ui>
-            <description-term-ui>Member invites</description-term-ui>
-            <description-detail-ui>
+            </dd>
+            <dt>Member invites</dt>
+            <dd>
               <row-ui gap="2" align="center">
                 <tag-ui size="sm" variant="danger" icon-leading="minus">Admin only</tag-ui>
                 <tag-ui size="sm" variant="success" icon-leading="plus">Anyone with link</tag-ui>
               </row-ui>
-            </description-detail-ui>
+            </dd>
           </description-list-ui>
         </section>
       </card-ui>

package/patterns/filter-bar/filter-bar.examples.html

@@ -28,9 +28,9 @@
     <section>
       <row-ui gap="2" align="center" wrap>
         <text-ui color="subtle" weight="semibold">Filters:</text-ui>
-        <tag-ui text="Status: Active" removable></tag-ui>
-        <tag-ui text="Owner: Alex Chen" removable></tag-ui>
-        <tag-ui text="Updated: last 7 days" removable></tag-ui>
+        <tag-ui text="Status: Active" removable size="sm" tone="muted"></tag-ui>
+        <tag-ui text="Owner: Alex Chen" removable size="sm" tone="muted"></tag-ui>
+        <tag-ui text="Updated: last 7 days" removable size="sm" tone="muted"></tag-ui>
         <button-ui text="+ Add filter" variant="ghost" size="sm" popovertarget="pat-filter-menu"></button-ui>
         <span data-spacer></span>
         <button-ui text="Clear all" variant="ghost" size="sm"></button-ui>
@@ -58,8 +58,8 @@
     <section bleed>
       <toolbar-ui overflow="none" style="padding: var(--a-space-2) var(--a-space-3); border-block-end: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: 0;">
         <row-ui gap="2" align="center" grow>
-          <tag-ui text="Status: Active" removable></tag-ui>
-          <tag-ui text="Owner: Alex" removable></tag-ui>
+          <tag-ui text="Status: Active" removable size="sm" tone="muted"></tag-ui>
+          <tag-ui text="Owner: Alex" removable size="sm" tone="muted"></tag-ui>
           <button-ui text="+ Add filter" variant="ghost" size="sm"></button-ui>
         </row-ui>
         <search-ui placeholder="Search…" size="sm"></search-ui>
@@ -96,9 +96,12 @@
   <code-ui language="html">&lt;row-ui gap="2" align="center" wrap&gt;
   &lt;text-ui color="subtle" weight="semibold"&gt;Filters:&lt;/text-ui&gt;
 
-  &lt;!-- one removable chip per active filter --&gt;
-  &lt;tag-ui text="Status: Active" removable&gt;&lt;/tag-ui&gt;
-  &lt;tag-ui text="Owner: Alex Chen" removable&gt;&lt;/tag-ui&gt;
+  &lt;!-- one removable chip per active filter — size="sm" tone="muted"
+       keeps chips compact + quiet next to the ghost buttons (gh#841);
+       tag-ui's bare default is a solid high-contrast pill, too heavy
+       for a filter row --&gt;
+  &lt;tag-ui text="Status: Active" removable size="sm" tone="muted"&gt;&lt;/tag-ui&gt;
+  &lt;tag-ui text="Owner: Alex Chen" removable size="sm" tone="muted"&gt;&lt;/tag-ui&gt;
 
   &lt;!-- popover-anchored menu of facets --&gt;
   &lt;button-ui text="+ Add filter" variant="ghost"
@@ -117,6 +120,7 @@
   <h2 variant="section">Rules</h2>
   <ul>
     <li>One chip per active filter. If a filter has multiple values (e.g., Status in [Active, Draft]), collapse to <code>"Status: 2"</code> with the chip showing the count.</li>
+    <li>Filter chips are <code>size="sm" tone="muted"</code> — <code>tag-ui</code>'s bare default is a solid, high-contrast pill (the "chip IS the state" status-pill look); a filter row wants compact, quiet tokens that don't outweigh the ghost buttons beside them (gh#841).</li>
     <li>Filters modify the dataset. Search modifies the <em>match within</em> the dataset. Keep them visually distinct — filters left, search right.</li>
     <li>Clear-all only appears when ≥1 filter is active.</li>
     <li>Saved views and free-form chip filters are mutually exclusive. Pick one per surface — mixing both confuses "what state am I in?".</li>

package/patterns/filter-bar/filter-bar.examples.js

@@ -4,7 +4,10 @@ const columns = [
   { key: 'name',    label: 'Name' },
   { key: 'owner',   label: 'Owner' },
   { key: 'status',  label: 'Status', render: (val) => {
-    const v = { Active: 'success', Draft: 'muted' }[val] || '';
+    // `Draft` is a family-less badge, tone="muted" — `variant="muted"`
+    // retired (variant/color/tone convention cut, gh#873/874).
+    if (val === 'Draft') return `<badge-ui text="${val}" tone="muted"></badge-ui>`;
+    const v = { Active: 'success' }[val] || '';
     return `<badge-ui text="${val}" variant="${v}"></badge-ui>`;
   }},
   { key: 'updated', label: 'Updated' },

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

@@ -258,7 +258,7 @@
         <section>
           <col-ui gap="3" align="center" padding="6">
             <text-ui variant="display">🔥</text-ui>
-            <tag-ui size="sm" variant="accent">Achievement unlocked</tag-ui>
+            <tag-ui size="sm" variant="primary">Achievement unlocked</tag-ui>
             <text-ui variant="display" strong>7-day streak</text-ui>
             <text-ui color="subtle">A full week of daily use. You've shipped 14 prompts and 23 chunks since you started.</text-ui>
           </col-ui>

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

@@ -64,7 +64,7 @@
         <header>
           <row-ui slot="heading" align="center" gap="2">
             <text-ui strong>Notifications</text-ui>
-            <tag-ui size="sm" variant="accent">3 new</tag-ui>
+            <tag-ui size="sm" variant="primary">3 new</tag-ui>
           </row-ui>
         </header>
         <section>

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

@@ -55,7 +55,7 @@
         <header>
           <span slot="heading" variant="section">Admin</span>
           <text-ui slot="description" color="subtle">Built-in role · 3 members</text-ui>
-          <tag-ui slot="action" variant="accent" size="sm">Built-in</tag-ui>
+          <tag-ui slot="action" variant="primary" size="sm">Built-in</tag-ui>
         </header>
         <section>
           <description-list-ui>

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

@@ -53,7 +53,7 @@
         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>
+          <tag-ui slot="action" variant="primary" size="sm">Anyone with the link</tag-ui>
         </header>
         <section>
           <col-ui gap="3">

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

@@ -38,7 +38,7 @@
               <col-ui gap="1" grow>
                 <row-ui gap="2" align="center">
                   <text-ui strong size="lg">Kim Granlund</text-ui>
-                  <tag-ui size="sm" variant="accent" icon-leading="seal-check">Verified</tag-ui>
+                  <tag-ui size="sm" variant="primary" icon-leading="seal-check">Verified</tag-ui>
                 </row-ui>
                 <text-ui color="subtle">Founder · AdiaUI · Reykjavík, IS</text-ui>
                 <text-ui>Building the AdiaUI web-components library and the A2UI generative-UI runtime. Previously at Construct, before that at Modular.</text-ui>
@@ -178,7 +178,7 @@
         <header>
           <span slot="heading" variant="section">
             You're verified
-            <tag-ui size="sm" variant="accent" icon-leading="seal-check">Verified</tag-ui>
+            <tag-ui size="sm" variant="primary" icon-leading="seal-check">Verified</tag-ui>
           </span>
         </header>
         <section>

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

@@ -72,7 +72,7 @@
         <header slot="header">
           <col-ui gap="1" grow>
             <row-ui gap="2" align="center">
-              <badge-ui text="#142" variant="muted"></badge-ui>
+              <badge-ui text="#142" tone="muted"></badge-ui>
               <text-ui strong>Login button misaligned on Safari</text-ui>
             </row-ui>
             <row-ui gap="2" align="center">