@adia-ai/web-components 0.8.23 → 0.8.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.23",
+  "version": "0.8.25",
   "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="primary">read · write</tag-ui>
+                <tag-ui size="sm" variant="accent">read · write</tag-ui>
                 <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
               </row-ui>
             </list-item-ui>
@@ -57,7 +57,7 @@
               <icon-ui slot="icon" name="key" size="sm"></icon-ui>
               <span slot="description"><code>sk_test_…7f0e</code> · last used 18 days ago</span>
               <row-ui slot="action" gap="2" align="center">
-                <tag-ui size="sm" variant="muted">test</tag-ui>
+                <tag-ui size="sm" variant="default">test</tag-ui>
                 <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
               </row-ui>
             </list-item-ui>
@@ -217,7 +217,7 @@
             <list-item-ui text="Workspace · JSON">
               <icon-ui slot="icon" name="download-simple" size="sm"></icon-ui>
               <span slot="description">Ready 14 days ago · link expired</span>
-              <tag-ui slot="action" size="sm" variant="muted">Expired</tag-ui>
+              <tag-ui slot="action" size="sm" variant="default">Expired</tag-ui>
             </list-item-ui>
           </list-ui>
         </section>

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

@@ -2,7 +2,7 @@
   <div>
     <h1>Bulk Action Toolbar</h1>
     <div data-actions>
-      <tag-ui size="sm">table-toolbar-ui</tag-ui> <tag-ui size="sm">toolbar-ui</tag-ui> <tag-ui size="sm">table-ui</tag-ui> <tag-ui size="sm">card-ui</tag-ui>
+      <tag-ui size="sm">table-toolbar-ui</tag-ui> <tag-ui size="sm">toolbar-ui</tag-ui> <tag-ui size="sm">table-ui</tag-ui> <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">anchor-bar-ui</tag-ui>
     </div>
   </div>
   <p>When a table has row selection, surface a contextual bulk-action bar. Two variants: swap the standard <code>&lt;table-toolbar-ui&gt;</code> for a bar at the same surface position, or float a card-like elevated bar at the bottom of the table's own scroll container. Selection count anchors the left, actions flow from the right, destructive action last.</p>
@@ -67,7 +67,7 @@
 
 <section data-section data-property="floating-variant" data-chunk="bulk-action-toolbar-floating" data-chunk-kind="block"
   data-chunk-domain="data"
-  data-chunk-description="Floating bottom-anchored bulk-action bar — a card-like elevated toolbar (elevation 3) that appears sticky to the bottom of a table's own scroll container (not the browser viewport) when rows are selected, with selection count, an optional per-flow controls slot, actions with destructive last, and an explicit Clear button. Composes table-ui's select event with card-ui + toolbar-ui; no focus steal on appearance, Escape clears selection when the bar owns focus, count is aria-live=polite."
+  data-chunk-description="Floating bottom-anchored bulk-action bar — an anchor-bar-ui elevated toolbar that appears sticky to the bottom of a table's own scroll container (not the browser viewport) when rows are selected, with selection count, an optional per-flow controls slot, actions with destructive last, and an explicit Clear button. Composes table-ui's select event with anchor-bar-ui + toolbar-ui; no focus steal on appearance, Escape clears selection when the bar owns focus, count is aria-live=polite."
   data-chunk-keywords="floating bulk action bar bottom anchored sticky selection toolbar card elevated table scroll container escape clear aria-live gmail linear notion">
   <h2 variant="section">Floating (bottom-anchored)</h2>
   <p data-note>
@@ -83,38 +83,36 @@
       <div data-table-scroll>
         <table-ui frameless id="pat-bulk-float-table" selectable sortable striped></table-ui>
 
-        <card-ui id="pat-bulk-float-bar" elevation="3" data-bulk-bar-floating>
-          <section>
-            <!-- align="space-between" pushes the trailing group right —
-                 NOT a flex-grow spacer span or an auto margin on a content
-                 item. toolbar-ui's overflow reflow sums each top-level
-                 child's RENDERED width to decide what fits; any child that
-                 absorbs free space (flex-grow, or an auto margin resolved
-                 to real pixels post-layout) has already expanded to fill
-                 that space by the time it's measured, so the sum always
-                 reads "full" and spuriously spills content. `justify-content`
-                 only repositions flex items — it doesn't touch their
-                 individual widths (toolbar-ui's own CSS pins every direct
-                 child at `flex: 0 0 auto`) — so grouping into two
-                 `<toolbar-group-ui>` atoms and letting `align="space-between"`
-                 do the pushing keeps the reflow's width sum accurate. -->
-            <toolbar-ui role="toolbar" aria-label="Bulk actions" align="space-between">
-              <toolbar-group-ui>
-                <text-ui strong aria-live="polite"><span data-bulk-float-count>0</span> selected</text-ui>
-                <span data-bulk-controls></span>
-              </toolbar-group-ui>
-              <toolbar-group-ui>
-                <button-ui icon="archive" icon-only aria-label="Archive" variant="ghost" size="sm" data-bulk-action="archive"></button-ui>
-                <button-ui icon="download-simple" icon-only aria-label="Export" variant="ghost" size="sm" data-bulk-action="export"></button-ui>
-                <button-ui icon="folder-simple" icon-only aria-label="Move" variant="ghost" size="sm" data-bulk-action="move"></button-ui>
-                <divider-ui vertical></divider-ui>
-                <button-ui icon="trash" icon-only aria-label="Delete" variant="ghost" size="sm" data-bulk-action="delete"></button-ui>
-                <divider-ui vertical></divider-ui>
-                <button-ui text="Clear" variant="ghost" size="sm" data-bulk-clear></button-ui>
-              </toolbar-group-ui>
-            </toolbar-ui>
-          </section>
-        </card-ui>
+        <anchor-bar-ui id="pat-bulk-float-bar" anchor="bottom">
+          <!-- align="space-between" pushes the trailing group right —
+               NOT a flex-grow spacer span or an auto margin on a content
+               item. toolbar-ui's overflow reflow sums each top-level
+               child's RENDERED width to decide what fits; any child that
+               absorbs free space (flex-grow, or an auto margin resolved
+               to real pixels post-layout) has already expanded to fill
+               that space by the time it's measured, so the sum always
+               reads "full" and spuriously spills content. `justify-content`
+               only repositions flex items — it doesn't touch their
+               individual widths (toolbar-ui's own CSS pins every direct
+               child at `flex: 0 0 auto`) — so grouping into two
+               `<toolbar-group-ui>` atoms and letting `align="space-between"`
+               do the pushing keeps the reflow's width sum accurate. -->
+          <toolbar-ui role="toolbar" aria-label="Bulk actions" align="space-between">
+            <toolbar-group-ui>
+              <text-ui strong aria-live="polite"><span data-bulk-float-count>0</span> selected</text-ui>
+              <span data-bulk-controls></span>
+            </toolbar-group-ui>
+            <toolbar-group-ui>
+              <button-ui icon="archive" icon-only aria-label="Archive" variant="ghost" size="sm" data-bulk-action="archive"></button-ui>
+              <button-ui icon="download-simple" icon-only aria-label="Export" variant="ghost" size="sm" data-bulk-action="export"></button-ui>
+              <button-ui icon="folder-simple" icon-only aria-label="Move" variant="ghost" size="sm" data-bulk-action="move"></button-ui>
+              <divider-ui vertical></divider-ui>
+              <button-ui icon="trash" icon-only aria-label="Delete" variant="ghost" size="sm" data-bulk-action="delete"></button-ui>
+              <divider-ui vertical></divider-ui>
+              <button-ui text="Clear" variant="ghost" size="sm" data-bulk-clear></button-ui>
+            </toolbar-group-ui>
+          </toolbar-ui>
+        </anchor-bar-ui>
       </div>
     </section>
   </card-ui>
@@ -165,10 +163,12 @@ table.addEventListener('select', (e) =&gt; {
   <p data-note>
     <code>[data-table-scroll]</code> wraps the table and IS its scroll container (bounded height +
     <code>overflow: auto</code>); the floating bar is a sibling of <code>&lt;table-ui&gt;</code>
-    inside it, positioned with <code>position: sticky</code> so it pins to that box's bottom edge
+    inside it. The bar is an <code>&lt;anchor-bar-ui anchor="bottom"&gt;</code> (gh#495) — its
+    default mode positions with <code>position: sticky</code> so it pins to that box's bottom edge
     — never the browser viewport, and never a child of <code>&lt;table-ui&gt;</code> (it owns its
-    own light DOM). The bar is a <code>&lt;card-ui elevation="3"&gt;</code> for the card-like
-    elevated container, holding a standard <code>&lt;toolbar-ui&gt;</code>.
+    own light DOM) — holding a standard <code>&lt;toolbar-ui&gt;</code>. <code>anchor-bar-ui</code>
+    owns the elevated-surface chrome (bg/border/radius/shadow) directly; no wrapping
+    <code>&lt;card-ui&gt;</code> needed.
   </p>
   <code-ui language="html">&lt;section bleed&gt;
   &lt;table-toolbar-ui for="resources" text="Resources" count="12"&gt;&lt;/table-toolbar-ui&gt;
@@ -176,66 +176,54 @@ table.addEventListener('select', (e) =&gt; {
   &lt;div data-table-scroll&gt;   &lt;!-- position: relative; overflow: auto; max-height: … --&gt;
     &lt;table-ui id="resources" selectable sortable&gt;&lt;/table-ui&gt;
 
-    &lt;!-- Floating bar — position: sticky; bottom: … in the pattern's CSS.
-         No [hidden]/display:none toggle — see the pattern's CSS comment
-         on why (toolbar-ui's overflow measurement gets stuck at 0px). --&gt;
-    &lt;card-ui elevation="3" data-bulk-bar-floating&gt;
-      &lt;section&gt;
-        &lt;!-- align="space-between" pushes the action group right — NOT a
-             flex-grow spacer span or an auto margin on a content item.
-             toolbar-ui's overflow reflow sums each top-level child's
-             RENDERED width to decide what fits; anything that absorbs free
-             space has already expanded to fill it by the time it's
-             measured, so the sum always reads "full" and spuriously spills
-             content. Two &lt;toolbar-group-ui&gt; atoms + align="space-between"
-             keeps the width sum accurate (see Rules). --&gt;
-        &lt;toolbar-ui role="toolbar" aria-label="Bulk actions" align="space-between"&gt;
-          &lt;toolbar-group-ui&gt;
-            &lt;text-ui strong aria-live="polite"&gt;&lt;span data-bulk-count&gt;0&lt;/span&gt; selected&lt;/text-ui&gt;
-            &lt;span data-bulk-controls&gt;&lt;/span&gt;  &lt;!-- optional per-flow controls, e.g. a shared-rationale input --&gt;
-          &lt;/toolbar-group-ui&gt;
-          &lt;toolbar-group-ui&gt;
-            &lt;!-- Icon-only (icon-only + aria-label) — a compact floating
-                 pill has less width to spend than the full-width top-swap
-                 bar. --&gt;
-            &lt;button-ui icon="archive" icon-only aria-label="Archive" variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
-            &lt;button-ui icon="download-simple" icon-only aria-label="Export" variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
-            &lt;button-ui icon="folder-simple"   icon-only aria-label="Move"   variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
-            &lt;divider-ui vertical&gt;&lt;/divider-ui&gt;
-            &lt;button-ui icon="trash" icon-only aria-label="Delete" variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
-            &lt;divider-ui vertical&gt;&lt;/divider-ui&gt;
-            &lt;button-ui text="Clear" variant="ghost" size="sm" data-bulk-clear&gt;&lt;/button-ui&gt;
-          &lt;/toolbar-group-ui&gt;
-        &lt;/toolbar-ui&gt;
-      &lt;/section&gt;
-    &lt;/card-ui&gt;
+    &lt;!-- Floating bar — anchor-bar-ui's default mode is position:sticky
+         within the nearest scroll container. [open] controls visibility
+         via opacity/visibility, never [hidden]/display:none — see the
+         pattern's CSS comment on why (toolbar-ui's overflow measurement
+         gets stuck at 0px). --&gt;
+    &lt;anchor-bar-ui anchor="bottom"&gt;
+      &lt;!-- align="space-between" pushes the action group right — NOT a
+           flex-grow spacer span or an auto margin on a content item.
+           toolbar-ui's overflow reflow sums each top-level child's
+           RENDERED width to decide what fits; anything that absorbs free
+           space has already expanded to fill it by the time it's
+           measured, so the sum always reads "full" and spuriously spills
+           content. Two &lt;toolbar-group-ui&gt; atoms + align="space-between"
+           keeps the width sum accurate (see Rules). --&gt;
+      &lt;toolbar-ui role="toolbar" aria-label="Bulk actions" align="space-between"&gt;
+        &lt;toolbar-group-ui&gt;
+          &lt;text-ui strong aria-live="polite"&gt;&lt;span data-bulk-count&gt;0&lt;/span&gt; selected&lt;/text-ui&gt;
+          &lt;span data-bulk-controls&gt;&lt;/span&gt;  &lt;!-- optional per-flow controls, e.g. a shared-rationale input --&gt;
+        &lt;/toolbar-group-ui&gt;
+        &lt;toolbar-group-ui&gt;
+          &lt;!-- Icon-only (icon-only + aria-label) — a compact floating
+               pill has less width to spend than the full-width top-swap
+               bar. --&gt;
+          &lt;button-ui icon="archive" icon-only aria-label="Archive" variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
+          &lt;button-ui icon="download-simple" icon-only aria-label="Export" variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
+          &lt;button-ui icon="folder-simple"   icon-only aria-label="Move"   variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
+          &lt;divider-ui vertical&gt;&lt;/divider-ui&gt;
+          &lt;button-ui icon="trash" icon-only aria-label="Delete" variant="ghost" size="sm"&gt;&lt;/button-ui&gt;
+          &lt;divider-ui vertical&gt;&lt;/divider-ui&gt;
+          &lt;button-ui text="Clear" variant="ghost" size="sm" data-bulk-clear&gt;&lt;/button-ui&gt;
+        &lt;/toolbar-group-ui&gt;
+      &lt;/toolbar-ui&gt;
+    &lt;/anchor-bar-ui&gt;
   &lt;/div&gt;
 &lt;/section&gt;</code-ui>
-  <code-ui language="javascript">// Enter/exit toggles [data-open]/[data-closing]; the CSS does the rest —
-// including the delayed `visibility: hidden` on close (see the pattern's
-// own &lt;style&gt; block). No [hidden]/display:none toggle: toolbar-ui's
-// spillover system measures its own width via ResizeObserver on first
-// connect, and a display:none ancestor at that moment gives it a 0px
-// reading it does not reliably re-measure later — items it moved to the
-// "more" overflow menu at that 0px reading stay stuck there even once the
-// bar has real width. `visibility` keeps the box laid out (real width,
-// always measurable) while still pulling it out of the a11y tree, tab
-// order, and click target when closed.
-
-function showBar(bar) {
-  bar.removeAttribute('data-closing');
-  bar.setAttribute('data-open', '');   // no .focus() — never steal focus on appearance
-}
-
-function hideBar(bar) {
-  bar.setAttribute('data-closing', '');
-  bar.removeAttribute('data-open');
-}
+  <code-ui language="javascript">// anchor-bar-ui's [open] IS the visibility state — no [hidden]/display:none
+// toggle: toolbar-ui's spillover system measures its own width via
+// ResizeObserver on first connect, and a display:none ancestor at that
+// moment gives it a 0px reading it does not reliably re-measure later —
+// items it moved to the "more" overflow menu at that 0px reading stay
+// stuck there even once the bar has real width. anchor-bar-ui's own CSS
+// handles the enter/exit opacity/visibility transition; no .focus() call
+// anywhere — appearance never steals focus.
 
 table.addEventListener('select', (e) =&gt; {
   const n = e.detail?.selected?.length ?? 0;
   countEl.textContent = String(n);
-  n &gt; 0 ? showBar(bar) : hideBar(bar);
+  bar.open = n &gt; 0;
 });
 
 // Escape clears selection ONLY when the bar owns focus (listener lives
@@ -258,10 +246,10 @@ bar.addEventListener('press', (e) =&gt; {
     <li>Default state uses <code>&lt;table-toolbar-ui&gt;</code> — the modern foundation. It already wires Filter / Sort / Columns / Search to the table via <code>[for]</code>; don't hand-roll those. The floating variant keeps it visible at all times (it doesn't swap).</li>
     <li>Every bulk bar uses <code>&lt;toolbar-ui&gt;</code> with <code>role="toolbar"</code> and <code>aria-label="Bulk actions"</code>.</li>
     <li><strong>Toolbar swap:</strong> match its <code>--toolbar-py</code> / <code>--toolbar-px</code> to <code>--table-toolbar-py</code> / <code>--table-toolbar-px</code> so the swap is seamless; both toolbars sit inside the same <code>&lt;section bleed&gt;</code> as the table, flush with the first table cell.</li>
-    <li><strong>Floating:</strong> wrap the bar in <code>&lt;card-ui elevation="3"&gt;</code> for the card-like elevated surface (tokens only — <code>--a-shadow-*</code> via <code>[elevation]</code>, never a raw color/shadow); position it with <code>position: sticky</code> inside a <code>[data-table-scroll]</code> wrapper that IS the table's own scroll container (bounded height + <code>overflow: auto</code>) — never <code>position: fixed</code> to the viewport, and never a child of <code>&lt;table-ui&gt;</code> itself (it owns its own light DOM).</li>
+    <li><strong>Floating:</strong> use <code>&lt;anchor-bar-ui anchor="bottom"&gt;</code> (gh#495) for the elevated-surface chrome — its default mode is <code>position: sticky</code> inside a <code>[data-table-scroll]</code> wrapper that IS the table's own scroll container (bounded height + <code>overflow: auto</code>) — never a child of <code>&lt;table-ui&gt;</code> itself (it owns its own light DOM). Don't set <code>[viewport]</code> here — that opts into <code>position: fixed</code> to the browser viewport, which this pattern deliberately avoids.</li>
     <li>Selection count leads every bar. Group the count (+ optional controls) and the action buttons into two <code>&lt;toolbar-group-ui&gt;</code> atoms and set <code>&lt;toolbar-ui align="space-between"&gt;</code> to push the action group right — <strong>not</strong> a flex-grow <code>&lt;span&gt;</code> spacer or an auto margin on a content item. <code>&lt;toolbar-ui&gt;</code>'s overflow reflow sums each top-level child's rendered width to decide what fits; anything that absorbs free space (flex-grow, or an auto margin resolved to real pixels post-layout) has already expanded to fill that space by the time it's measured, so the sum always reads "full" and spuriously spills the trailing action(s) into an unreachable "more" menu — this is a real, previously-shipped bug in this pattern's own swap-variant demo (Delete was silently unreachable), fixed alongside the floating variant (gh#494 audit finding). <code>justify-content</code> only repositions flex items, never their widths, so it doesn't trip the same measurement. On the floating bar the count sits in an <code>aria-live="polite"</code> element so screen readers hear the running total; an optional <code>&lt;span data-bulk-controls&gt;</code> slot follows it for per-flow controls (e.g. a shared-rationale input) — empty by default.</li>
     <li>Destructive actions go last and are visually separated with a <code>&lt;divider-ui vertical&gt;</code>. The floating bar additionally ends with an explicit Clear button (its own divider before it) — don't make "untick every row" the only way to dismiss it.</li>
     <li>Keep bulk actions to 3–5; overflow belongs in a <code>&lt;popover-ui&gt;</code> "More" menu trailing the divider.</li>
-    <li>Drive both variants from the table's <code>select</code> event (<code>detail.selected: number[]</code>) — don't unmount. The toolbar swap toggles <code>hidden</code>. The floating bar toggles <code>[data-open]</code>/<code>[data-closing]</code> instead — never <code>[hidden]</code>/<code>display:none</code>, which resets <code>&lt;toolbar-ui&gt;</code>'s overflow measurement to 0px and strands items in its "more" menu even once the bar has real width again. The floating bar additionally: never calls <code>.focus()</code> on appearance (no focus steal), and its <code>keydown</code> listener lives on the bar itself so Escape only clears selection while the bar owns focus.</li>
+    <li>Drive both variants from the table's <code>select</code> event (<code>detail.selected: number[]</code>) — don't unmount. The toolbar swap toggles <code>hidden</code>. The floating bar sets <code>anchor-bar-ui</code>'s <code>[open]</code> property instead — never <code>[hidden]</code>/<code>display:none</code>, which resets <code>&lt;toolbar-ui&gt;</code>'s overflow measurement to 0px and strands items in its "more" menu even once the bar has real width again. The floating bar additionally: never calls <code>.focus()</code> on appearance (no focus steal — <code>anchor-bar-ui</code> doesn't either), and its <code>keydown</code> listener lives on the bar itself so Escape only clears selection while the bar owns focus.</li>
   </ul>
 </section>

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

@@ -6,8 +6,8 @@
  * Default state shows <table-toolbar-ui> (Filter/Sort/Columns/Search,
  * wired via [for]). When rows are selected: the swap variant hides it
  * for <toolbar-ui data-bulk-bar>; the floating variant leaves it
- * visible and rises a <card-ui elevation="3"> bar from the bottom of
- * the table's own scroll container.
+ * visible and rises an <anchor-bar-ui anchor="bottom"> (gh#495) from the
+ * bottom of the table's own scroll container.
  */
 
 const columns = [
@@ -99,32 +99,19 @@ function setupFloating(router) {
   table.columns = columns;
   table.data    = floatData;
 
-  // Enter/exit toggles [data-open]/[data-closing]; the CSS does the rest
-  // (packages/web-components/patterns/bulk-action-toolbar/bulk-action-toolbar.html),
-  // including the delayed `visibility: hidden` on close. Deliberately NOT
-  // [hidden]/display:none: toolbar-ui's spillover system measures its own
-  // width via ResizeObserver on first connect, and a display:none ancestor
-  // at that moment gives it a 0px reading it does not reliably re-measure
-  // later — items it moves to the "more" overflow menu at that 0px reading
-  // stay stuck there even once the bar has real width (found composing
-  // this pattern; not a toolbar-ui fix in scope here). `visibility` keeps
-  // the box laid out (real, measurable width) while still pulling it out
-  // of the a11y tree, tab order, and click target when closed. No
-  // .focus() call anywhere — appearance never steals focus.
-  function showBar() {
-    bar.removeAttribute('data-closing');
-    bar.setAttribute('data-open', '');
-  }
-
-  function hideBar() {
-    bar.setAttribute('data-closing', '');
-    bar.removeAttribute('data-open');
-  }
-
+  // anchor-bar-ui's [open] property IS the visibility state (gh#495) — its
+  // own CSS handles the opacity/visibility enter/exit transition.
+  // Deliberately never [hidden]/display:none: toolbar-ui's spillover
+  // system measures its own width via ResizeObserver on first connect,
+  // and a display:none ancestor at that moment gives it a 0px reading it
+  // does not reliably re-measure later — items it moves to the "more"
+  // overflow menu at that 0px reading stay stuck there even once the bar
+  // has real width (found composing this pattern; not a toolbar-ui fix in
+  // scope here). No .focus() call anywhere — appearance never steals focus.
   table.addEventListener('select', (e) => {
     const n = e.detail?.selected?.length ?? 0;
     if (countEl) countEl.textContent = String(n);
-    if (n > 0) showBar(); else hideBar();
+    bar.open = n > 0;
   });
 
   // Escape clears selection ONLY when the bar owns focus — the listener

package/patterns/bulk-action-toolbar/bulk-action-toolbar.html

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="../../styles/tokens.css">
 
   <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/anchor-bar/anchor-bar.css">
   <link rel="stylesheet" href="../../components/badge/badge.css">
   <link rel="stylesheet" href="../../components/button/button.css">
   <link rel="stylesheet" href="../../components/card/card.css">
@@ -24,6 +25,7 @@
   <link rel="stylesheet" href="../../components/toolbar/toolbar.css">
 
   <!-- Component JS -->
+  <script type="module" src="../../components/anchor-bar/anchor-bar.js"></script>
   <script type="module" src="../../components/badge/badge.js"></script>
   <script type="module" src="../../components/button/button.js"></script>
   <script type="module" src="../../components/card/card.js"></script>
@@ -45,63 +47,17 @@
 
     /* ── Floating bulk-action bar (gh#494) ──
        [data-table-scroll] IS the table's scroll container — bounded
-       height + overflow: auto — so `position: sticky` on the floating
-       bar pins it to THAT box's bottom edge, never the browser viewport.
-       This is the compose-from-primitives shape gh#495's anchored-surface
-       primitive would eventually own; card-ui + toolbar-ui + sticky
-       positioning gets there without it. */
+       height + overflow: auto — so anchor-bar-ui's default (non-
+       [viewport]) `position: sticky` pins it to THAT box's bottom edge,
+       never the browser viewport. This used to be a hand-rolled
+       card-ui + position:sticky recipe; gh#495 promoted it to
+       <anchor-bar-ui>'s own default mode (see anchor-bar.css) — this
+       pattern is now that primitive's canonical consumer. */
     [data-table-scroll] {
       position: relative;
       overflow: auto;
       max-height: 16rem;
     }
-    /* `width: fit-content` here would create a circular sizing trap:
-       toolbar-ui's own overflow reflow measures ITS available width from
-       this box, but this box's fit-content size would in turn be derived
-       from the toolbar's (possibly already-collapsed) rendered content —
-       a self-reinforcing collapse the first time reflow ever runs while
-       hidden (0 available width) spills items into the overflow popover.
-       A fixed `max-width` breaks the loop: the box's width is deterministic
-       (bounded by the scroll container, capped at 40rem), independent of
-       the toolbar's own spillover state. */
-    [data-bulk-bar-floating] {
-      position: sticky;
-      bottom: var(--a-space-3);
-      z-index: 1;
-      margin-inline: auto;
-      width: 100%;
-      max-width: min(46rem, calc(100% - var(--a-space-6)));
-      opacity: 0;
-      transform: translateY(0.75rem);
-      transition: opacity var(--a-duration) var(--a-easing-out),
-                  transform var(--a-duration) var(--a-easing-out),
-                  visibility 0s linear var(--a-duration);
-      /* `visibility`, not `[hidden]`/`display:none` — closed state still
-         has box + layout, kept out of the a11y tree + tab order + click
-         target instead. toolbar-ui's spillover system measures its own
-         width via ResizeObserver on first connect; a `display:none`
-         ancestor at that moment gives it a 0px reading it never reliably
-         re-measures after unhiding (observed empirically: items it moved
-         to the "more" overflow menu at that 0px reading stayed stuck
-         there even once the bar had 700px+ to work with). Never toggling
-         display avoids the trap entirely — no toolbar-ui change needed. */
-      visibility: hidden;
-    }
-    [data-bulk-bar-floating][data-open] {
-      opacity: 1;
-      transform: translateY(0);
-      visibility: visible;
-      transition: opacity var(--a-duration) var(--a-easing-out),
-                  transform var(--a-duration) var(--a-easing-out);
-    }
-    [data-bulk-bar-floating][data-closing] {
-      opacity: 0;
-      transform: translateY(0.75rem);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      [data-bulk-bar-floating] { transition: none; }
-    }
   </style>
 </head>
 <body>

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

@@ -34,13 +34,13 @@
               <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="primary">Latest</tag-ui>
+                  <tag-ui size="sm" variant="accent">Latest</tag-ui>
                 </row-ui>
                 <text-ui color="subtle" size="sm">March 12, 2026</text-ui>
               </row-ui>
 
               <col-ui gap="2" data-section="added">
-                <text-ui variant="kicker" color="primary">Added</text-ui>
+                <text-ui variant="kicker" color="accent">Added</text-ui>
                 <ul class="changelog-bullets">
                   <li>Bulk-edit mode for the data-table — multi-select rows, then update column values in one pass.</li>
                   <li>CSV export now respects the visible-columns filter.</li>
@@ -83,7 +83,7 @@
               </row-ui>
 
               <col-ui gap="2" data-section="added">
-                <text-ui variant="kicker" color="primary">Added</text-ui>
+                <text-ui variant="kicker" color="accent">Added</text-ui>
                 <ul class="changelog-bullets">
                   <li>Workspace-level audit log — see who did what across all members.</li>
                 </ul>

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

@@ -42,7 +42,7 @@
                   <text-ui strong>Avery Chen</text-ui>
                   <text-ui color="subtle" size="sm">2 hours ago</text-ui>
                 </row-ui>
-                <text-ui>Should the OKLCH ramp here use the chrome or the data scale? <text-ui color="primary">@Kim</text-ui> what's the convention?</text-ui>
+                <text-ui>Should the OKLCH ramp here use the chrome or the data scale? <text-ui color="accent">@Kim</text-ui> what's the convention?</text-ui>
                 <row-ui gap="1">
                   <tag-ui size="sm" icon-leading="thumbs-up">2</tag-ui>
                   <tag-ui size="sm" icon-leading="eyes">1</tag-ui>
@@ -57,7 +57,7 @@
                   <text-ui strong>Kim Granlund</text-ui>
                   <text-ui color="subtle" size="sm">1 hour ago</text-ui>
                 </row-ui>
-                <text-ui>Chrome — the data scale is reserved for visualization series. Spec at <text-ui color="primary">.claude/docs/specs/component-token-contract.md</text-ui>.</text-ui>
+                <text-ui>Chrome — the data scale is reserved for visualization series. Spec at <text-ui color="accent">.claude/docs/specs/component-token-contract.md</text-ui>.</text-ui>
                 <row-ui gap="1">
                   <tag-ui size="sm" icon-leading="thumbs-up">3</tag-ui>
                   <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
@@ -71,7 +71,7 @@
                   <text-ui strong>Jordan Lee</text-ui>
                   <text-ui color="subtle" size="sm">12 minutes ago</text-ui>
                 </row-ui>
-                <text-ui>Filed a follow-up — adding a lint rule so this doesn't happen again. <text-ui color="primary">#linter</text-ui></text-ui>
+                <text-ui>Filed a follow-up — adding a lint rule so this doesn't happen again. <text-ui color="accent">#linter</text-ui></text-ui>
                 <row-ui gap="1">
                   <button-ui text="Reply" variant="ghost" size="sm"></button-ui>
                 </row-ui>
@@ -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="primary">🎉 2</tag-ui>
+        <tag-ui size="sm" variant="accent">🎉 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/data-tables-inline-edit-and-tree/data-tables-inline-edit-and-tree.examples.html

@@ -109,7 +109,7 @@
                   <td><input-ui type="number" value="124" size="sm"></input-ui></td>
                   <td><input-ui type="number" value="98" size="sm"></input-ui></td>
                   <td><input-ui type="number" value="156" size="sm"></input-ui></td>
-                  <td><tag-ui size="sm" variant="muted">clean</tag-ui></td>
+                  <td><tag-ui size="sm" variant="default">clean</tag-ui></td>
                 </tr>
                 <tr>
                   <td><text-ui strong>Widget B</text-ui></td>
@@ -130,7 +130,7 @@
                   <td><input-ui type="number" value="200" size="sm"></input-ui></td>
                   <td><input-ui type="number" value="245" size="sm"></input-ui></td>
                   <td><input-ui type="number" value="280" size="sm"></input-ui></td>
-                  <td><tag-ui size="sm" variant="muted">clean</tag-ui></td>
+                  <td><tag-ui size="sm" variant="default">clean</tag-ui></td>
                 </tr>
               </tbody>
             </table>

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

@@ -31,7 +31,7 @@
         data-chunk-keywords="hero cta centered headline display deck subhead get-started buttons landing marketing banner launch" raw>
         <section bleed>
           <col-ui gap="3" align="center" padding="10">
-            <tag-ui size="sm" variant="muted">v0.0.27 — out today</tag-ui>
+            <tag-ui size="sm" variant="default">v0.0.27 — out today</tag-ui>
             <text-ui variant="display" strong>Generative UI, deterministically.</text-ui>
             <text-ui variant="deck" color="subtle">AdiaUI emits A2UI JSON the runtime renders into Light-DOM web components. No model, no surprise.</text-ui>
             <row-ui gap="2">
@@ -57,7 +57,7 @@
         <section bleed>
           <grid-ui columns="2" gap="6" align="center" padding="8">
             <col-ui gap="4" align="start">
-              <tag-ui size="sm" variant="muted">For teams</tag-ui>
+              <tag-ui size="sm" variant="default">For teams</tag-ui>
               <text-ui variant="display" strong>Ship UI as fast as your model thinks.</text-ui>
               <text-ui variant="deck" color="subtle">A2UI is a typed JSON protocol your agent emits and the runtime renders. No React rebuild for every prompt.</text-ui>
               <row-ui gap="2">
@@ -70,7 +70,7 @@
                 <stat-ui label="Cost ratio" value="0.18×"></stat-ui>
               </row-ui>
             </col-ui>
-            <card-ui variant="soft">
+            <card-ui variant="filled">
               <section bleed>
                 <col-ui align="center" justify="center" padding="10">
                   <text-ui color="subtle">[ Product visual ]</text-ui>
@@ -154,7 +154,7 @@
               <list-item-ui text="riley@example.com">
                 <avatar-ui slot="icon" size="sm" text="riley@example.com"></avatar-ui>
                 <span slot="description">Sent 1 month ago</span>
-                <tag-ui slot="action" size="sm" variant="muted">Pending</tag-ui>
+                <tag-ui slot="action" size="sm" variant="default">Pending</tag-ui>
               </list-item-ui>
             </list-ui>
           </col-ui>
@@ -215,7 +215,7 @@
                   <text-ui variant="display" color="subtle">🏗️</text-ui>
                   <text-ui color="subtle" strong>Builder</text-ui>
                   <text-ui variant="caption" color="subtle">Ship 10 prompts</text-ui>
-                  <tag-ui size="sm" variant="muted">7 of 10</tag-ui>
+                  <tag-ui size="sm" variant="default">7 of 10</tag-ui>
                 </col-ui>
               </section>
             </card-ui>
@@ -225,7 +225,7 @@
                   <text-ui variant="display" color="subtle">🌟</text-ui>
                   <text-ui color="subtle" strong>30-day streak</text-ui>
                   <text-ui variant="caption" color="subtle">A month of daily use</text-ui>
-                  <tag-ui size="sm" variant="muted">12 of 30</tag-ui>
+                  <tag-ui size="sm" variant="default">12 of 30</tag-ui>
                 </col-ui>
               </section>
             </card-ui>
@@ -235,7 +235,7 @@
                   <text-ui variant="display" color="subtle">🤝</text-ui>
                   <text-ui color="subtle" strong>Connector</text-ui>
                   <text-ui variant="caption" color="subtle">Refer 5 friends</text-ui>
-                  <tag-ui size="sm" variant="muted">3 of 5</tag-ui>
+                  <tag-ui size="sm" variant="default">3 of 5</tag-ui>
                 </col-ui>
               </section>
             </card-ui>
@@ -258,7 +258,7 @@
         <section>
           <col-ui gap="3" align="center" padding="6">
             <text-ui variant="display">🔥</text-ui>
-            <tag-ui size="sm" variant="primary">Achievement unlocked</tag-ui>
+            <tag-ui size="sm" variant="accent">Achievement unlocked</tag-ui>
             <text-ui variant="display" strong>7-day streak</text-ui>
             <text-ui color="subtle">A full week of daily use. You've shipped 14 prompts and 23 chunks since you started.</text-ui>
           </col-ui>

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

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