@adia-ai/web-components 0.8.13 → 0.8.15

package/components/display-field/display-field.examples.md

@@ -1,44 +1,19 @@
 # display-field — Examples
 
-A display-only labeled value. No input semantics (no focus, no
-contenteditable, no form participation). For an editable field use
-`field-ui` + `input-ui`; for a metric use `stat-ui`; for many read-only
-pairs use `description-list-ui`.
-
-## Basic
+## basic
 
 ```html
 <display-field-ui label="Account ID" value="acct_1Q9xK2"></display-field-ui>
 ```
 
-## Masked value
-
-```html
-<display-field-ui
-  label="Card on file"
-  value="•••• •••• •••• 4242"
-  variant="masked"></display-field-ui>
-```
-
-## With a leading icon and a hint
+## variant="masked"
 
 ```html
-<display-field-ui
-  label="Card on file"
-  value="•••• 4242"
-  variant="masked"
-  icon="lock"
-  hint="Expires 12/26"></display-field-ui>
+<display-field-ui label="Card on file" value="•••• •••• •••• 4242" variant="masked"></display-field-ui>
 ```
 
-## Hosting a third-party element (Stripe Element)
-
-Slot the foreign element as the default child; it takes the value region
-under the label. The host's `role="group"` + `aria-labelledby` names it for
-assistive tech.
+## icon + hint
 
 ```html
-<display-field-ui label="Card number">
-  <div id="card-element"><!-- stripe.elements().create('card').mount('#card-element') --></div>
-</display-field-ui>
+<display-field-ui label="Card on file" value="•••• 4242" variant="masked" icon="lock" hint="Expires 12/26"></display-field-ui>
 ```

package/components/drawer/drawer.examples.md

@@ -1,42 +1,16 @@
 # drawer — Examples
 
-## Authoring
-
-```html
-<drawer-ui side="right" size="md">
-  <header>
-    <span slot="icon">
-      <avatar-ui icon="user"></avatar-ui>
-    </span>
-    <span slot="heading">
-      <text-ui strong>Profile</text-ui>
-      <badge-ui text="Pro" variant="accent"></badge-ui>
-    </span>
-    <span slot="description">
-      <text-ui color="subtle" size="sm">Update your account</text-ui>
-    </span>
-  </header>
-  <section>...</section>
-  <footer>
-    <grid-ui>
-      <button-ui text="Cancel" variant="ghost"></button-ui>
-      <button-ui text="Save" variant="primary"></button-ui>
-    </grid-ui>
-  </footer>
-</drawer-ui>
-```
-
 ## side
 
 ```html
 <button-ui text="Left" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
 <drawer-ui text="Navigation" side="left" size="sm">
-  <section>
-    <col-ui gap="1">
-      <button-ui text="Dashboard" icon="house" variant="ghost"></button-ui>
-      <button-ui text="Projects" icon="folder" variant="ghost"></button-ui>
-      <button-ui text="Settings" icon="gear" variant="ghost"></button-ui>
-    </col-ui>
+  <section bleed>
+    <nav-ui>
+      <nav-item-ui icon="house" text="Dashboard" value="dashboard"></nav-item-ui>
+      <nav-item-ui icon="folder" text="Projects" value="projects"></nav-item-ui>
+      <nav-item-ui icon="gear" text="Settings" value="settings"></nav-item-ui>
+    </nav-ui>
   </section>
 </drawer-ui>
 ```
@@ -61,3 +35,14 @@
   </section>
 </drawer-ui>
 ```
+
+## text
+
+```html
+<button-ui text="text=&quot;Settings&quot;" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+<drawer-ui text="Settings" side="right">
+  <section>
+    <text-ui color="subtle">No header authored — the drawer stamps the title from the text attribute.</text-ui>
+  </section>
+</drawer-ui>
+```

package/components/field/field.examples.md

@@ -8,22 +8,41 @@
 </field-ui>
 ```
 
-## Inline layout
+## Typography registers
 
 ```html
-<field-ui inline label="Search">
-  <input-ui type="search" placeholder="Type a command…"></input-ui>
-</field-ui>
+<row-ui gap="6" align="start" wrap>
+  <col-ui gap="2">
+    <text-ui variant="caption" color="muted">verse</text-ui>
+    <div verse style="width:220px">
+      <field-ui label="Email">
+        <input-ui type="email" placeholder="you@example.com"></input-ui>
+      </field-ui>
+    </div>
+  </col-ui>
+  <col-ui gap="2">
+    <text-ui variant="caption" color="muted">regular</text-ui>
+    <div style="width:220px">
+      <field-ui label="Email">
+        <input-ui type="email" placeholder="you@example.com"></input-ui>
+      </field-ui>
+    </div>
+  </col-ui>
+  <col-ui gap="2">
+    <text-ui variant="caption" color="muted">prose</text-ui>
+    <div prose style="width:220px">
+      <field-ui label="Email">
+        <input-ui type="email" placeholder="you@example.com"></input-ui>
+      </field-ui>
+    </div>
+  </col-ui>
+</row-ui>
 ```
 
-## Any form control
+## Inline layout
 
 ```html
-<field-ui label="Priority">
-  <select-ui>
-    <option value="low">Low</option>
-    <option value="med" selected>Medium</option>
-    <option value="high">High</option>
-  </select-ui>
+<field-ui inline label="Search">
+  <input-ui type="search" placeholder="Type a command…"></input-ui>
 </field-ui>
 ```

package/components/grid/grid.examples.md

@@ -19,3 +19,30 @@
   <card-ui>Side panel</card-ui>
 </grid-ui>
 ```
+
+## Rendered demos
+
+```html
+<grid-ui columns="4" gap="3">
+  <card-ui>
+    <section>
+      <stat-ui label="Revenue" value="$12,400" change="+8.4%" trend="up" icon="currency-dollar"></stat-ui>
+    </section>
+  </card-ui>
+  <card-ui>
+    <section>
+      <stat-ui label="Users" value="2,840" change="+12%" trend="up" icon="users"></stat-ui>
+    </section>
+  </card-ui>
+  <card-ui>
+    <section>
+      <stat-ui label="Conversion" value="3.2%" change="-0.3%" trend="down" icon="chart-line"></stat-ui>
+    </section>
+  </card-ui>
+  <card-ui>
+    <section>
+      <stat-ui label="Avg. Order" value="$87" change="+$4" trend="up" icon="receipt"></stat-ui>
+    </section>
+  </card-ui>
+</grid-ui>
+```

package/components/heatmap/heatmap.examples.md

@@ -12,8 +12,8 @@
 <heatmap-ui id="hm-matrix" type="matrix" rows="7" cols="12" color-scheme="accent"></heatmap-ui>
 ```
 
-## Data stream (data-stream-*)
+## color-scheme
 
 ```html
-<heatmap-ui type="matrix" rows="5" cols="4" color-scheme="accent" aria-label="Commit activity from activity.json" data-stream-src="/site/mock/activity.json"></heatmap-ui>
+<heatmap-ui type="matrix" rows="7" cols="12" color-scheme="warning"></heatmap-ui>
 ```

package/components/inline-edit/inline-edit.examples.md

@@ -0,0 +1,32 @@
+# inline-edit — Examples
+
+## Basic click-to-edit
+
+```html
+<col-ui gap="2">
+  <text-ui size="sm" color="subtle">Draft document title</text-ui>
+  <h2 style="margin: 0;">
+    <inline-edit-ui value="Quarterly revenue report — Q4 2025"></inline-edit-ui>
+  </h2>
+</col-ui>
+```
+
+## Empty + placeholder
+
+```html
+<col-ui gap="2">
+  <text-ui size="sm" color="subtle">Untitled item</text-ui>
+  <h3 style="margin: 0;">
+    <inline-edit-ui placeholder="Click to name this draft"></inline-edit-ui>
+  </h3>
+</col-ui>
+```
+
+## Commit policy
+
+```html
+<col-ui gap="2">
+  <text-ui size="sm" color="subtle">commit="blur" — default</text-ui>
+  <inline-edit-ui value="Click outside to save" commit="blur"></inline-edit-ui>
+</col-ui>
+```

package/components/integration-card/integration-card.examples.md

@@ -1,41 +1,24 @@
 # integration-card — Examples
 
-## Available (default)
+## status
 
 ```html
-<integration-card-ui
-  provider="slack"
-  name="Slack"
-  logo="/integrations/slack.svg"
-  description="Send AI replies and notifications to channels."
-  status="available">
-</integration-card-ui>
+<integration-card-ui provider="slack" name="Slack" description="Send AI replies and notifications to channels." status="available"></integration-card-ui>
 ```
 
-## Connected — overflow menu
+## logo
 
 ```html
-<integration-card-ui provider="github" name="GitHub" status="connected"
-                      logo="/integrations/github.svg"
-                      description="Sync issues and pull requests.">
-  <menu-ui slot="actions" label="More" trigger-icon="dots-three" trigger-variant="ghost">
-    <menu-item-ui action="reauth">Re-authenticate</menu-item-ui>
-    <menu-item-ui action="disconnect" variant="danger">Disconnect</menu-item-ui>
-  </menu-ui>
-</integration-card-ui>
+<integration-card-ui provider="webhook" name="Webhook" description="POST events to a custom endpoint." logo="lightning" status="available"></integration-card-ui>
 ```
 
-## Error — Retry
+## actions slot
 
 ```html
-<integration-card-ui provider="stripe" name="Stripe" status="error"
-                      error-message="Token expired — re-authenticate.">
-</integration-card-ui>
-```
-
-## Coming soon (non-interactive)
-
-```html
-<integration-card-ui provider="zapier" name="Zapier" status="coming-soon">
+<integration-card-ui provider="github" name="GitHub" description="Sync issues and pull requests." status="connected">
+  <menu-ui slot="actions" label="More" trigger-icon="dots-three" trigger-variant="ghost">
+    <menu-item-ui action="reauth">Re-authenticate</menu-item-ui>
+    <menu-item-ui action="disconnect" variant="danger">Disconnect</menu-item-ui>
+  </menu-ui>
 </integration-card-ui>
 ```

package/components/list-window/list-window.examples.md

@@ -1,73 +1,19 @@
 # list-window — Examples
 
-## basic — fixed-size rows
+## basic — fixed-size rows, 1000 items
 
 ```html
-<list-window-ui item-size="40" overscan="3" style="height:320px">
-</list-window-ui>
-<script>
-  const el = document.querySelector('list-window-ui');
-  el.renderRow = (item) => {
-    const row = document.createElement('list-item-ui');
-    row.setAttribute('text', item.text);
-    return row;
-  };
-  el.items = Array.from({ length: 1000 }, (_, i) => ({
-    id: `b-${i}`,
-    text: `Row ${i + 1}`,
-  }));
-</script>
+<list-window-ui id="lw-basic" item-size="40" overscan="3" style="height: 320px; border: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: var(--a-radius-md);"></list-window-ui>
 ```
 
 ## 10,000 rows
 
 ```html
-<list-window-ui item-size="32" overscan="5" style="height:320px">
-</list-window-ui>
-<script>
-  const el = document.querySelector('list-window-ui');
-  el.items = Array.from({ length: 10_000 }, (_, i) => ({
-    id: `lg-${i}`,
-    text: `Log line ${i}`,
-  }));
-</script>
+<list-window-ui id="lw-large" item-size="32" overscan="5" style="height: 320px; border: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: var(--a-radius-md); font-family: var(--a-font-mono);"></list-window-ui>
 ```
 
-## pin-bottom — chat-thread / log-tail
+## variable-height — feed-card rows
 
 ```html
-<list-window-ui item-size="28" pin-bottom style="height:240px">
-</list-window-ui>
-<script>
-  const el = document.querySelector('list-window-ui');
-  el.items = initialMessages;
-  // Appending keeps scroll pinned at the bottom.
-  el.items = [...el.items, ...newMessages];
-</script>
-```
-
-## variable-height — feed cards
-
-```html
-<list-window-ui estimated-size="120" overscan="2" style="height:360px">
-</list-window-ui>
-<script>
-  const el = document.querySelector('list-window-ui');
-  el.renderRow = (item) => buildCardElement(item);
-  el.items = cards;
-</script>
-```
-
-## loading state
-
-```html
-<list-window-ui item-size="48" loading style="height:240px"></list-window-ui>
-```
-
-## empty state
-
-```html
-<list-window-ui item-size="40" style="height:160px">
-  <div slot="empty">No items to display.</div>
-</list-window-ui>
+<list-window-ui id="lw-variable" estimated-size="120" overscan="2" style="height: 360px; border: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: var(--a-radius-md);"></list-window-ui>
 ```

package/components/loading-overlay/loading-overlay.examples.md

@@ -1,50 +1,33 @@
 # loading-overlay — Examples
 
-## Default (auto-stamped spinner)
-
-The host parent must be positioned (`position: relative` or similar);
-the overlay does not mutate parent layout. When the default slot is
-empty, a centered `<spinner-ui size="lg">` is auto-stamped.
-
-```html
-<card-ui style="position: relative;">
-  <section>
-    <table-ui id="orders" data-stream-src="/api/orders"></table-ui>
-    <loading-overlay-ui active label="Loading orders…"></loading-overlay-ui>
-  </section>
-</card-ui>
-```
-
-## Skeleton placeholder
-
-Pair `variant="transparent"` with a slotted skeleton stack to render
-shape-of-content placeholders instead of a centered spinner.
+## Default
 
 ```html
-<div style="position: relative;">
-  <loading-overlay-ui active variant="transparent" label="Loading content">
-    <stack-ui>
-      <skeleton-ui width="100%" height="1rem"></skeleton-ui>
-      <skeleton-ui width="80%"  height="1rem"></skeleton-ui>
-      <skeleton-ui width="60%"  height="1rem"></skeleton-ui>
-    </stack-ui>
-  </loading-overlay-ui>
+<div style="position:relative; width:240px; height:180px; padding:var(--a-space-4); border:1px solid var(--md-sys-color-neutral-outline-variant); border-radius:var(--a-radius-md);">
+  <p style="margin:0;">Card content the overlay is covering.</p>
+  <loading-overlay-ui active label="Loading…" delay="0"></loading-overlay-ui>
 </div>
 ```
 
-## Fast-load (no flash)
-
-The default 200 ms grace window suppresses paint on fast-resolving
-loads. If the underlying work resolves before the timer fires, the
-overlay never paints.
+## variant
 
 ```html
-<loading-overlay-ui active delay="200"></loading-overlay-ui>
+<div style="position:relative; width:200px; height:140px; padding:var(--a-space-4); border:1px solid var(--md-sys-color-neutral-outline-variant); border-radius:var(--a-radius-md);">
+  <p style="margin:0;">Content</p>
+  <loading-overlay-ui active variant="default" label="Loading" delay="0"></loading-overlay-ui>
+</div>
 ```
 
-For known-slow operations (server-side jobs, large uploads) opt out
-with `delay="0"`:
+## Skeleton placeholder
 
 ```html
-<loading-overlay-ui active delay="0" label="Generating report…"></loading-overlay-ui>
+<div style="position:relative; width:280px; height:200px; padding:var(--a-space-4); border:1px solid var(--md-sys-color-neutral-outline-variant); border-radius:var(--a-radius-md);">
+  <loading-overlay-ui active variant="transparent" label="Loading content" delay="0">
+    <div style="display:flex; flex-direction:column; gap:var(--a-space-2); width:100%; padding:var(--a-space-4); box-sizing:border-box;">
+      <skeleton-ui width="100%" height="1.2rem"></skeleton-ui>
+      <skeleton-ui width="80%" height="1rem"></skeleton-ui>
+      <skeleton-ui width="60%" height="1rem"></skeleton-ui>
+    </div>
+  </loading-overlay-ui>
+</div>
 ```

package/components/mark/mark.examples.md

@@ -0,0 +1,62 @@
+# mark — Examples
+
+## Search-result match
+
+```html
+<col-ui gap="3">
+  <text-ui size="lg">
+    Quarterly
+    <mark-ui>revenue</mark-ui>
+    report — Q4 2025
+  </text-ui>
+  <text-ui size="lg">
+    Annual
+    <mark-ui>revenue</mark-ui>
+    projections — 2026 outlook
+  </text-ui>
+  <text-ui size="lg">
+    Marketing spend vs
+    <mark-ui>revenue</mark-ui>
+    attribution
+  </text-ui>
+</col-ui>
+```
+
+## Variants
+
+```html
+<col-ui gap="2">
+  <text-ui>
+    <mark-ui>warning</mark-ui>
+    — the default; classic highlighter yellow.
+  </text-ui>
+  <text-ui>
+    <mark-ui variant="info">info</mark-ui>
+    — brand-color emphasis.
+  </text-ui>
+  <text-ui>
+    <mark-ui variant="success">success</mark-ui>
+    — added line, "new since".
+  </text-ui>
+  <text-ui>
+    <mark-ui variant="danger">danger</mark-ui>
+    — removed line, conflict.
+  </text-ui>
+  <text-ui>
+    <mark-ui variant="muted">muted</mark-ui>
+    — neutral emphasis.
+  </text-ui>
+</col-ui>
+```
+
+## Diff prose (success / danger)
+
+```html
+<text-ui>
+  We now ship
+  <mark-ui variant="success">light-DOM web components</mark-ui>
+  for theme-aware rendering, replacing the previous
+  <mark-ui variant="danger">shadow-DOM module system</mark-ui>
+  . The migration is incremental.
+</text-ui>
+```

package/components/menu/menu.css

@@ -3,7 +3,11 @@
     --menu-popover-padding:    var(--a-space-1);
     --menu-popover-border:     var(--md-sys-color-neutral-outline-variant);
     --menu-popover-radius:     var(--a-radius-lg);
-    --menu-popover-bg:         var(--a-bg-subtle);
+    /* surface-bright — the one elevated-overlay plane shared with
+       select-ui's dropdown, popover-ui, and context-menu-ui. Was
+       --a-bg-subtle (--md-sys-color-neutral-surface), i.e. page level, so a
+       menu floating over the page read flat against it in dark mode. */
+    --menu-popover-bg:         var(--md-sys-color-neutral-surface-bright);
     --menu-popover-shadow:     var(--a-shadow-lg);
     --menu-popover-min-width:  10rem;
     --menu-popover-font-size:  var(--a-ui-size);
@@ -49,7 +53,9 @@ menu-ui [data-menu-popover] {
   padding: var(--a-space-1);
   border: 1px solid var(--md-sys-color-neutral-outline-variant);
   border-radius: var(--a-radius-lg);
-  background: var(--a-bg-subtle);
+  /* Keep in sync with --menu-popover-bg above — the top-layer element can't
+     inherit the scoped token (see the note at this block's head). */
+  background: var(--md-sys-color-neutral-surface-bright);
   box-shadow: var(--a-shadow-lg);
   min-width: 10rem;
   font-family: var(--menu-font-family, var(--a-font-family-ui));

package/components/nav/nav.examples.md

@@ -3,7 +3,7 @@
 ## variant — primary
 
 ```html
-<nav-ui style="width:240px;height:280px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+<nav-ui style="width:240px;height:280px;border:1px solid var(--md-sys-color-neutral-outline);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
   <nav-item-ui text="Dashboard" icon="house" value="dashboard" selected></nav-item-ui>
   <nav-item-ui text="Reports" icon="chart-bar" value="reports"></nav-item-ui>
   <nav-group-ui text="Settings" icon="gear">
@@ -28,7 +28,7 @@
 ## collapsed
 
 ```html
-<nav-ui collapsed style="width:64px;height:280px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+<nav-ui collapsed style="width:64px;height:280px;border:1px solid var(--md-sys-color-neutral-outline);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
   <nav-item-ui text="Dashboard" icon="house" value="dashboard" selected></nav-item-ui>
   <nav-item-ui text="Reports" icon="chart-bar" value="reports"></nav-item-ui>
   <nav-group-ui text="Settings" icon="gear">

package/components/nav-group/nav-group.examples.md

@@ -3,7 +3,7 @@
 ## text + icon
 
 ```html
-<nav-ui style="width:240px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+<nav-ui style="width:240px;border:1px solid var(--md-sys-color-neutral-outline);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
   <nav-group-ui text="Settings" icon="gear">
     <nav-item-ui text="Profile" value="settings/profile"></nav-item-ui>
     <nav-item-ui text="Billing" value="settings/billing"></nav-item-ui>
@@ -14,7 +14,7 @@
 ## badge
 
 ```html
-<nav-ui style="width:240px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+<nav-ui style="width:240px;border:1px solid var(--md-sys-color-neutral-outline);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
   <nav-group-ui text="Notifications" icon="bell" badge="3" open>
     <nav-item-ui text="Mentions" value="notif/mentions"></nav-item-ui>
     <nav-item-ui text="Follows" value="notif/follows"></nav-item-ui>

package/components/nav-item/nav-item.css

@@ -45,8 +45,21 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
     --nav-item-fg-selected:     var(--a-ui-text-selected);
     --nav-item-icon-fg:         var(--a-ui-text-muted);
     --nav-item-icon-fg-selected: var(--nav-item-accent);
-    --nav-item-bg-hover:        var(--a-ui-bg-hover);
-    --nav-item-bg-selected:     var(--a-ui-bg-selected);
+    /* Two real container roles, one mechanism — no opacity synth.
+       hover    = --a-bg-muted    (--md-sys-color-neutral-container-low),
+                  matching nav-group-ui's own --nav-group-bg-hover exactly.
+       selected = --a-bg-selected (--md-sys-color-neutral-container-active),
+                  a visibly deeper fill so selected still reads as selected
+                  under the cursor.
+       Hover was --a-ui-bg-hover (--a-canvas-0-scrim, an opacity synth the
+       token laws forbid); that is what v0.8.14 removed. Collapsing BOTH to
+       container-low made hover and selected pixel-identical wherever no
+       other selected affordance shows — a section-variant item with no icon
+       (the docs-site subnav) suppresses the accent bar and reads
+       --a-ui-text-selected == --a-ui-text-hover == --a-fg-strong, so the
+       fill was the only signal left. */
+    --nav-item-bg-hover:        var(--a-bg-muted);
+    --nav-item-bg-selected:     var(--a-bg-selected);
     --nav-item-icon-size:       calc(var(--nav-item-row-height) - var(--a-space-2));
     --nav-item-badge-size:      var(--a-ui-sm);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
@@ -185,10 +198,12 @@ nav-ui[variant="section"] nav-item-ui:not([variant]) [slot="icon"]:not(:empty) {
   height: 1em;
 }
 
-/* Selected indicator — section variant relies on the row-level
-   background fill + text color + medium weight (no left-edge bar,
-   no in-icon accent). Suppress the in-icon accent that the primary
-   variant paints into the empty icon slot. */
+/* Selected indicator — section variant relies on the row-level background
+   fill (--nav-item-bg-selected, a deeper container role than hover's) plus
+   the icon accent when an icon IS present. No left-edge bar, and no weight
+   change (an earlier version of this comment claimed a medium weight that
+   no rule ever set). Suppress only the in-icon accent the primary variant
+   paints into an EMPTY icon slot. */
 nav-item-ui[variant="section"][selected] [slot="icon"]:empty::before,
 nav-ui[variant="section"] nav-item-ui:not([variant])[selected] [slot="icon"]:empty::before {
   content: none;