@adia-ai/web-components 0.8.48 → 0.8.50

package/components/stat/stat.css

@@ -19,6 +19,19 @@
 
     /* ── Chart-band mode ── */
     --stat-chart-band-height: 3rem;
+
+    /* ── Tile mode (band + bleed, ADR-0083) — change-chip overlay ──
+       Stat-scoped aliases falling back to the exact rung chart.css
+       resolves the corresponding --chart-chip-* token to, so an
+       ancestor override re-themes both chart axis chips and this delta
+       chip in one stroke (ADR-0083 decision 3). */
+    --stat-change-inset:          var(--a-space-2);
+    --stat-change-chip-bg:        var(--chart-chip-bg,        var(--md-sys-color-neutral-container-high));
+    --stat-change-chip-fg:        var(--chart-chip-fg,        var(--md-sys-color-neutral-on-surface));
+    --stat-change-chip-radius:    var(--chart-chip-radius,    var(--a-radius-sm));
+    --stat-change-chip-pad-x:     var(--chart-chip-pad-x,     var(--a-space-1-5));
+    --stat-change-chip-pad-y:     var(--chart-chip-pad-y,     var(--a-space-1));
+    --stat-change-chip-font-size: var(--chart-chip-font-size, var(--a-ui-tiny));
 }
 
   :scope {
@@ -166,6 +179,81 @@
     aspect-ratio: auto;
   }
 
+  /* ── Tile layout: band + bleed together (ADR-0083) ──
+     The chart-band from `[band]` above, generalized to bleed three edges
+     (inline-start, inline-end, block-end) the way `[bleed]` already
+     bleeds horizontally, with the `change` delta overlaid as a chip
+     inside the band instead of stacking below it. Declared AFTER the
+     shipped `[band]` block above so it wins the equal-specificity tie
+     the undefined `band bleed` combination used to lose — `[band]`'s
+     grid-template-areas is replaced wholesale (the `change` row is
+     removed; the chip lives in the chart grid area instead). Host
+     precondition (author-controlled, undetected — the same posture
+     gh#1801 ratified for `section[bleed]`): this stat-ui must be the
+     last content before the card's block-end edge, no trailing
+     footer/section — a following region would collide with the
+     negative block-end margin below. Compose inside a card section:
+       <stat-ui band bleed value=… label=… change=… trend=…>
+         <chart-ui slot="chart" type="area" …></chart-ui>
+       </stat-ui>  */
+  :scope[band][bleed]:has([slot="chart"]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label  icon"
+      "value  value"
+      "chart  chart";
+    align-items: baseline;
+  }
+  :scope[band][bleed] [slot="chart"] {
+    grid-area: chart;
+    align-self: stretch;
+    height: var(--stat-chart-band-height);
+    aspect-ratio: auto;
+    /* Three-edge bleed via the --card-inset negative-extent technique
+       [bleed] already uses horizontally (see the horizontal-bleed block
+       above for the width/margin-block rationale — chart-ui pins its own
+       width:100%, so the box is explicitly sized rather than stretched). */
+    margin-inline: calc(-1 * var(--card-inset, 0px));
+    margin-block-end: calc(-1 * var(--card-inset, 0px));
+    width: calc(100% + 2 * var(--card-inset, 0px));
+    min-width: 0;
+  }
+  /* Change chip: overlaid in the chart's own grid area, above it in
+     paint order, anchored block-start / inline-end of the band (logical
+     properties — RTL mirrors for free). Corner clearance from the
+     card's rounded corners is structural: the band's rounded corners are
+     block-end only (its block-start edge is mid-card, square), so a
+     block-start-anchored chip can never meet one. pointer-events: none —
+     it's text, not a control, so it never blocks the chart's own
+     hover/tooltip hit-testing beneath it. */
+  :scope[band][bleed] [slot="change"] {
+    grid-area: chart;
+    justify-self: end;
+    align-self: start;
+    z-index: 1;
+    inset-block-start: var(--stat-change-inset);
+    inset-inline-end: var(--stat-change-inset);
+    position: relative;
+    pointer-events: none;
+    background: var(--stat-change-chip-bg);
+    border-radius: var(--stat-change-chip-radius);
+    padding: var(--stat-change-chip-pad-y) var(--stat-change-chip-pad-x);
+    font-size: var(--stat-change-chip-font-size);
+  }
+  /* Chip text fallback — deliberately LOW specificity via :where() (0,1,0,
+     same as the generic [slot="change"] rule below it) so the
+     [trend="up"/"down"] rules further down this file (0,2,0 — they win
+     regardless of source order) keep painting the chip's text + arrow
+     whenever a canonical trend is set. --stat-change-chip-fg applies only
+     when no trend is set — the fallback, not an override. Splitting this
+     one declaration out of the block above (which stays 0,3,0 for its
+     geometry/surface properties, none of which trend re-paints) is the
+     only way to give color a lower specificity than the rest of that
+     block while keeping this selector, not a shape-widening rewrite. */
+  :where(:scope[band][bleed]) [slot="change"] {
+    color: var(--stat-change-chip-fg);
+  }
+
   /* ── Label (eyebrow) ── */
   [slot="label"] {
     grid-area: label;

package/components/stat/stat.d.ts

@@ -13,9 +13,9 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIStat extends UIElement {
-  /** Chart-band KPI layout. With a `slot="chart"` child, label / value / change stack full width top to bottom and the chart forms a short full-width band between the value and the change row (the Gmail/Vercel/shadcn stat-card shape). Composes with `icon` exactly as the base layout does. No effect without a chart slot. */
+  /** Chart-band KPI layout. With a `slot="chart"` child, label / value / change stack full width top to bottom and the chart forms a short full-width band between the value and the change row (the Gmail/Vercel/shadcn stat-card shape). Composes with `icon` exactly as the base layout does. Set together with `bleed` (`band bleed`) for the KPI tile: the band bleeds to the card's inline-start, inline-end, and block-end edges, and the `change` delta overlays it as a chip instead of stacking below it (ADR-0083) — the tile's `stat-ui` must be the card's last content (no trailing footer/section). No effect without a chart slot. */
   band: boolean;
-  /** Horizontal-bleed KPI layout. With a `slot="chart"` child, the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). No effect without a chart slot. */
+  /** The chart reaches the card's edges — which edges depends on `band`: a column bleeding top/right/bottom without it, a three-edge (inline-start, inline-end, block-end) bottom band with it. With `slot="chart"` alone (no `band`), the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). Set together with `band` for the full-bleed KPI tile — see `band`. No effect without a chart slot. */
   bleed: boolean;
   /** Change indicator text (e.g. '+12%', '-3%') */
   change: string;

package/components/stat/stat.yaml

@@ -51,11 +51,14 @@ props:
     default: ""
   bleed:
     description: >-
-      Horizontal-bleed KPI layout. With a `slot="chart"` child, the value /
-      label / change stack on the left while the chart fills the right column
-      at full height and bleeds to the card's top / right / bottom edges (the
-      horizontal counterpart to a chart in a card `<section bleed>`). No effect
-      without a chart slot.
+      The chart reaches the card's edges — which edges depends on `band`: a
+      column bleeding top/right/bottom without it, a three-edge (inline-start,
+      inline-end, block-end) bottom band with it. With `slot="chart"` alone
+      (no `band`), the value / label / change stack on the left while the
+      chart fills the right column at full height and bleeds to the card's
+      top / right / bottom edges (the horizontal counterpart to a chart in a
+      card `<section bleed>`). Set together with `band` for the full-bleed KPI
+      tile — see `band`. No effect without a chart slot.
     type: boolean
     default: false
   band:
@@ -64,7 +67,12 @@ props:
       change stack full width top to bottom and the chart forms a short
       full-width band between the value and the change row (the
       Gmail/Vercel/shadcn stat-card shape). Composes with `icon` exactly as
-      the base layout does. No effect without a chart slot.
+      the base layout does. Set together with `bleed` (`band bleed`) for the
+      KPI tile: the band bleeds to the card's inline-start, inline-end, and
+      block-end edges, and the `change` delta overlays it as a chip instead
+      of stacking below it (ADR-0083) — the tile's `stat-ui` must be the
+      card's last content (no trailing footer/section). No effect without a
+      chart slot.
     type: boolean
     default: false
 events: {}
@@ -112,6 +120,37 @@ tokens:
     description: Font size for the primary value
   --stat-value-weight:
     description: Font weight for the primary value
+  --stat-change-inset:
+    description: >-
+      Clearance of the `band bleed` tile's change chip from the chart band's
+      edges. Aliases the same ladder rung as `chart-ui`'s
+      `--chart-chrome-inset`.
+  --stat-change-chip-bg:
+    description: >-
+      Background of the `band bleed` tile's change chip. Falls back to
+      `chart-ui`'s `--chart-chip-bg`, so an ancestor override re-themes chart
+      axis chips and this delta chip together.
+  --stat-change-chip-fg:
+    description: >-
+      Text color of the `band bleed` tile's change chip when no canonical
+      `trend` is set (a set `trend` keeps painting via `--stat-up-fg` /
+      `--stat-down-fg`). Falls back to `chart-ui`'s `--chart-chip-fg`.
+  --stat-change-chip-radius:
+    description: >-
+      Corner radius of the `band bleed` tile's change chip. Falls back to
+      `chart-ui`'s `--chart-chip-radius`.
+  --stat-change-chip-pad-x:
+    description: >-
+      Inline padding of the `band bleed` tile's change chip. Falls back to
+      `chart-ui`'s `--chart-chip-pad-x`.
+  --stat-change-chip-pad-y:
+    description: >-
+      Block padding of the `band bleed` tile's change chip. Falls back to
+      `chart-ui`'s `--chart-chip-pad-y`.
+  --stat-change-chip-font-size:
+    description: >-
+      Font size of the `band bleed` tile's change chip. Falls back to
+      `chart-ui`'s `--chart-chip-font-size`.
 requiredIcons:
   - arrow-up
   - arrow-down
@@ -123,6 +162,8 @@ a2ui:
       reason: 'Different visual + semantic role.'
     - rule: 'Delta indicator uses positive/negative semantic tokens; pass change= attribute with sign.'
       reason: 'Built-in trend coloring; no manual styling needed.'
+    - rule: 'For the KPI tile — big value over a full-bleed sparkline/area band with the delta as a chip — set `band bleed` together on the stat-ui; the tile must be the card''s last content.'
+      reason: 'band bleed composes the shipped chart-band and horizontal-bleed layouts into the full-bleed tile with the change delta overlaid inside the band as a chip (ADR-0083); a trailing footer/section after it collides with the band''s negative block-end margin.'
 anti_patterns: []
 examples:
   - name: basic-stat
@@ -150,6 +191,57 @@ examples:
           "value": ""
         }
       ]
+  - name: tile
+    description: KPI tile — band bleed with an overlaid delta chip (ADR-0083)
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Stat",
+          "band": true,
+          "bleed": true,
+          "label": "Sessions",
+          "value": "84,232",
+          "change": "+57%",
+          "trend": "up",
+          "children": [
+            "chart"
+          ]
+        },
+        {
+          "id": "chart",
+          "component": "Chart",
+          "slot": "chart",
+          "type": "area",
+          "x": "d",
+          "y": "v",
+          "noGrid": true,
+          "noValues": true,
+          "data": [
+            { "d": "Mon", "v": 12 },
+            { "d": "Tue", "v": 18 },
+            { "d": "Wed", "v": 15 },
+            { "d": "Thu", "v": 27 },
+            { "d": "Fri", "v": 22 },
+            { "d": "Sat", "v": 31 },
+            { "d": "Sun", "v": 29 }
+          ]
+        }
+      ]
 keywords:
   - stat
   - stats
@@ -169,6 +261,7 @@ keywords:
   - observability
   - performance
   - scoreboard
+  - tile
 synonyms:
   analytics:
     - chart

package/components/table/table.a2ui.json

@@ -60,7 +60,7 @@
       "default": 0
     },
     "range-total": {
-      "description": "Total row count across ALL server pages (gh#1754, ADR-0082) — the table-authoritative server-mode data contract. Presence-gated: the attribute's PRESENCE, not its value, is the mode switch (checked via hasAttribute, never the coerced value alone — the same discipline table-footer-ui's own [range-total] ships). Absent (the default) means client mode: today's behavior exactly, [paginate] slices `.data` as always. Present with [paginate] > 0 means server mode: no local slicing (`.data` IS the current page and renders whole, after local search/sort/filter), the internal pager's page count becomes `max(1, ceil(range-total / paginate))` (one calc site, consolidated), and the internal page-reset sites (`data` set, `setFilter`, `clearFilters`) are suppressed so a fetch write-back never fights the pager back to page 0 — page state then moves only via pager interaction, the `footer-page` command, or `setState()`. The existing `page` event (0-based, unchanged) becomes the fetch trigger: the consumer listens for it, fetches that server page, and writes `.data` back. Explicit `range-total=\"0\"` is server-confirmed empty (pager hidden), never conflated with absent. With [paginate] absent/0, [range-total] is inert for this table's own rendering but stays readable by a bound table-footer-ui (REQ-W-006 branch 2) for its count-only label — see the footer-authoritative shape below, which remains lawful and is unaffected by this attribute. Named identically to table-toolbar-ui's and table-footer-ui's own [range-total] (rows, never `pagination-ui[total]`'s pages — the ADR-0063 B5 collision rule); a third instance of one name for one concept. Explicit `range-total=\"?\"` (gh#1877, ADR-0082 Amendment) is the OPEN/unproven-total state — cursor/hasMore server paging with no known row count yet: still server mode (still presence-gated), but the internal pager's page count stays exactly one page ahead of wherever the pager currently sits (never a fixed ceil(...) total), keeping `next` enabled indefinitely instead of hiding the pager the way a confirmed `range-total=\"0\"` would. Resolves to the normal finite server-mode behavior the instant a real number replaces the \"?\" — every reader downstream (table-toolbar-ui, table-footer-ui) shares this same distinction. Note: since this prop is Number-typed and reflected, the framework's own attribute-reflection immediately rewrites the DOM attribute to the literal string \"NaN\" once \"?\" is parsed (`+\"?\"` → NaN, then stringified back onto the attribute) — the coerced numeric PROPERTY is what carries the open/unproven signal (non-finite), never a literal \"?\" surviving as the live DOM attribute value.",
+      "description": "Total row count across ALL server pages (gh#1754, ADR-0082) — the table-authoritative server-mode data contract. Presence-gated: the attribute's PRESENCE, not its value, is the mode switch (checked via hasAttribute, never the coerced value alone — the same discipline table-footer-ui's own [range-total] ships). Absent (the default) means client mode: today's behavior exactly, [paginate] slices `.data` as always. Present with [paginate] > 0 means server mode: no local slicing (`.data` IS the current page and renders whole, after local search/sort/filter), the internal pager's page count becomes `max(1, ceil(range-total / paginate))` (one calc site, consolidated), and the internal page-reset sites (`data` set, `setFilter`, `clearFilters`) are suppressed so a fetch write-back never fights the pager back to page 0 — page state then moves only via pager interaction, the `footer-page` command, or `setState()`. The existing `page` event (0-based, unchanged) becomes the fetch trigger: the consumer listens for it, fetches that server page, and writes `.data` back. Explicit `range-total=\"0\"` is server-confirmed empty (pager hidden), never conflated with absent. With [paginate] absent/0, [range-total] is inert for this table's own rendering but stays readable by a bound table-footer-ui (REQ-W-006 branch 2) for its count-only label — see the footer-authoritative shape below, which remains lawful and is unaffected by this attribute. Named identically to table-toolbar-ui's and table-footer-ui's own [range-total] (rows, never `pagination-ui[total]`'s pages — the ADR-0063 B5 collision rule); a third instance of one name for one concept. Explicit `range-total=\"?\"` (gh#1877, ADR-0082 Amendment) is the OPEN/unproven-total state — cursor/hasMore server paging with no known row count yet: still server mode (still presence-gated), but the internal pager's page count stays exactly one page ahead of wherever the pager currently sits (never a fixed ceil(...) total), keeping `next` enabled indefinitely instead of hiding the pager the way a confirmed `range-total=\"0\"` would. Resolves to the normal finite server-mode behavior the instant a real number replaces the \"?\" — every reader downstream (table-toolbar-ui, table-footer-ui) shares this same distinction. Note: this prop is Number-typed and reflected; \"?\" parses to NaN (`+\"?\"`), and the coerced numeric PROPERTY is what carries the open/unproven signal (non-finite) — every reader checks the property, never `getAttribute(...) === '?'`. The DOM attribute itself keeps the authored \"?\" (gh#1895 — the framework's attribute-reflection leaves a non-finite Number value unwritten rather than stringifying it back as the literal \"NaN\").",
       "type": [
         "number",
         "string"

package/components/table/table.class.js

@@ -339,15 +339,15 @@ export class UITable extends UIElement {
   // gh#1877/ADR-0082 Amendment — the open/unproven-total state. NOT keyed
   // on the raw attribute string: `rangeTotal` is a Number-typed reflected
   // prop (installProps in core/element.js), so setting range-total="?" is
-  // parsed via `+"?"` → NaN and immediately reflected straight back onto
-  // the DOM attribute as the literal string "NaN" (reflect() in
-  // element.js stringifies any non-null coerced value) — by the time
-  // #draw()/render() runs, `getAttribute('range-total')` already reads
-  // "NaN", never the authored "?". The coerced PROPERTY still holds NaN
-  // stably, though (Object.is(NaN, NaN) is true, so the reflect's own
-  // re-parse never re-writes it) — that's the one signal that survives,
-  // and it's what #pageCount/showPagination below need to tell "no total
-  // yet" apart from "confirmed empty" (range-total="0", a finite 0).
+  // parsed via `+"?"` → NaN. gh#1895 — reflect() (core/element.js) leaves
+  // a non-finite Number value unwritten instead of stringifying it back
+  // onto the attribute, so by the time #draw()/render() runs,
+  // `getAttribute('range-total')` still reads the authored "?". The
+  // coerced PROPERTY still holds NaN stably, though (Object.is(NaN, NaN)
+  // is true, so re-parsing the unchanged attribute never re-triggers a
+  // write either) — that's what #pageCount/showPagination below need to
+  // tell "no total yet" apart from "confirmed empty" (range-total="0", a
+  // finite 0).
   get #rangeOpen() { return this.#serverMode && !Number.isFinite(Number(this.rangeTotal)); }
 
   // gh#1754/ADR-0082 REQ-D-003 (CodeRabbit, PR #1828) — a raw

package/components/table/table.d.ts

@@ -104,7 +104,7 @@ export class UITable extends UIElement {
   noPager: boolean;
   /** Rows per page. 0 = show all rows without pagination. When > 0, renders the internal pagination bar below the table — UNLESS [no-pager] is also set (gh#1807, ADR-0080), which keeps [paginate]'s slicing/page-state/`page`-event/`footer-page`-listener behavior but suppresses only the bar itself (the anti-doubled-pager path for a table-footer-ui composition). When [range-total] is also set (gh#1754, ADR-0082), [paginate] becomes purely presentational — it supplies only the page-size for pager math; no local slicing runs. */
   paginate: number;
-  /** Total row count across ALL server pages (gh#1754, ADR-0082) — the table-authoritative server-mode data contract. Presence-gated: the attribute's PRESENCE, not its value, is the mode switch (checked via hasAttribute, never the coerced value alone — the same discipline table-footer-ui's own [range-total] ships). Absent (the default) means client mode: today's behavior exactly, [paginate] slices `.data` as always. Present with [paginate] > 0 means server mode: no local slicing (`.data` IS the current page and renders whole, after local search/sort/filter), the internal pager's page count becomes `max(1, ceil(range-total / paginate))` (one calc site, consolidated), and the internal page-reset sites (`data` set, `setFilter`, `clearFilters`) are suppressed so a fetch write-back never fights the pager back to page 0 — page state then moves only via pager interaction, the `footer-page` command, or `setState()`. The existing `page` event (0-based, unchanged) becomes the fetch trigger: the consumer listens for it, fetches that server page, and writes `.data` back. Explicit `range-total="0"` is server-confirmed empty (pager hidden), never conflated with absent. With [paginate] absent/0, [range-total] is inert for this table's own rendering but stays readable by a bound table-footer-ui (REQ-W-006 branch 2) for its count-only label — see the footer-authoritative shape below, which remains lawful and is unaffected by this attribute. Named identically to table-toolbar-ui's and table-footer-ui's own [range-total] (rows, never `pagination-ui[total]`'s pages — the ADR-0063 B5 collision rule); a third instance of one name for one concept. Explicit `range-total="?"` (gh#1877, ADR-0082 Amendment) is the OPEN/unproven-total state — cursor/hasMore server paging with no known row count yet: still server mode (still presence-gated), but the internal pager's page count stays exactly one page ahead of wherever the pager currently sits (never a fixed ceil(...) total), keeping `next` enabled indefinitely instead of hiding the pager the way a confirmed `range-total="0"` would. Resolves to the normal finite server-mode behavior the instant a real number replaces the "?" — every reader downstream (table-toolbar-ui, table-footer-ui) shares this same distinction. Note: since this prop is Number-typed and reflected, the framework's own attribute-reflection immediately rewrites the DOM attribute to the literal string "NaN" once "?" is parsed (`+"?"` → NaN, then stringified back onto the attribute) — the coerced numeric PROPERTY is what carries the open/unproven signal (non-finite), never a literal "?" surviving as the live DOM attribute value. */
+  /** Total row count across ALL server pages (gh#1754, ADR-0082) — the table-authoritative server-mode data contract. Presence-gated: the attribute's PRESENCE, not its value, is the mode switch (checked via hasAttribute, never the coerced value alone — the same discipline table-footer-ui's own [range-total] ships). Absent (the default) means client mode: today's behavior exactly, [paginate] slices `.data` as always. Present with [paginate] > 0 means server mode: no local slicing (`.data` IS the current page and renders whole, after local search/sort/filter), the internal pager's page count becomes `max(1, ceil(range-total / paginate))` (one calc site, consolidated), and the internal page-reset sites (`data` set, `setFilter`, `clearFilters`) are suppressed so a fetch write-back never fights the pager back to page 0 — page state then moves only via pager interaction, the `footer-page` command, or `setState()`. The existing `page` event (0-based, unchanged) becomes the fetch trigger: the consumer listens for it, fetches that server page, and writes `.data` back. Explicit `range-total="0"` is server-confirmed empty (pager hidden), never conflated with absent. With [paginate] absent/0, [range-total] is inert for this table's own rendering but stays readable by a bound table-footer-ui (REQ-W-006 branch 2) for its count-only label — see the footer-authoritative shape below, which remains lawful and is unaffected by this attribute. Named identically to table-toolbar-ui's and table-footer-ui's own [range-total] (rows, never `pagination-ui[total]`'s pages — the ADR-0063 B5 collision rule); a third instance of one name for one concept. Explicit `range-total="?"` (gh#1877, ADR-0082 Amendment) is the OPEN/unproven-total state — cursor/hasMore server paging with no known row count yet: still server mode (still presence-gated), but the internal pager's page count stays exactly one page ahead of wherever the pager currently sits (never a fixed ceil(...) total), keeping `next` enabled indefinitely instead of hiding the pager the way a confirmed `range-total="0"` would. Resolves to the normal finite server-mode behavior the instant a real number replaces the "?" — every reader downstream (table-toolbar-ui, table-footer-ui) shares this same distinction. Note: this prop is Number-typed and reflected; "?" parses to NaN (`+"?"`), and the coerced numeric PROPERTY is what carries the open/unproven signal (non-finite) — every reader checks the property, never `getAttribute(...) === '?'`. The DOM attribute itself keeps the authored "?" (gh#1895 — the framework's attribute-reflection leaves a non-finite Number value unwritten rather than stringifying it back as the literal "NaN"). */
   rangeTotal: number | string;
   /** Visual-only passthrough — applies `<table-ui>`'s chrome reset (background / border / border-radius all transparent) AND short-circuits the data lifecycle entirely. The consumer owns the body shape: no header injection, no row reconciliation from `.data`, no empty-state / loading overlays, no aggregation or pagination footers. Use raw when embedding `<table-ui>` inside surfaces that supply their own chrome (e.g. `<card-ui><section bleed>`), or when wrapping a consumer-authored native `<table>` for design-token styling without the framework's data semantics. Note: a `<table-ui>` placed directly inside `<card-ui><section bleed>` drops the table's visual chrome automatically (card.css, gh#796) even without `raw` — `raw` is still required to also short-circuit the data lifecycle. Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle still ran — wrapping a `.data`-unset native table produced a phantom "No data" overlay. v0.6.33+ matches the documented contract. */
   raw: boolean;

package/components/table/table.yaml

@@ -107,13 +107,13 @@ props:
       way a confirmed `range-total="0"` would. Resolves to the normal
       finite server-mode behavior the instant a real number replaces the
       "?" — every reader downstream (table-toolbar-ui, table-footer-ui)
-      shares this same distinction. Note: since this prop is Number-typed
-      and reflected, the framework's own attribute-reflection immediately
-      rewrites the DOM attribute to the literal string "NaN" once "?" is
-      parsed (`+"?"` → NaN, then stringified back onto the attribute) —
-      the coerced numeric PROPERTY is what carries the open/unproven
-      signal (non-finite), never a literal "?" surviving as the live DOM
-      attribute value.
+      shares this same distinction. Note: this prop is Number-typed and
+      reflected; "?" parses to NaN (`+"?"`), and the coerced numeric
+      PROPERTY is what carries the open/unproven signal (non-finite) —
+      every reader checks the property, never `getAttribute(...) === '?'`.
+      The DOM attribute itself keeps the authored "?" (gh#1895 — the
+      framework's attribute-reflection leaves a non-finite Number value
+      unwritten rather than stringifying it back as the literal "NaN").
     type: [number, string]
     default: 0
     reflect: true

package/components/table-footer/table-footer.class.js

@@ -340,13 +340,13 @@ export class UITableFooter extends UIElement {
     // resolved source of range-total (local attribute if set, else the
     // server-mode target's own) coerces to a non-finite number. NOT keyed
     // on the raw attribute string — rangeTotal is a Number-typed reflected
-    // prop, so range-total="?" parses via `+"?"` → NaN and the property
-    // setter's own reflect() immediately rewrites the DOM attribute to the
-    // literal string "NaN" (core/element.js) before this ever runs;
-    // getAttribute('range-total') would read "NaN", never "?". The
+    // prop, so range-total="?" parses via `+"?"` → NaN. gh#1895 — reflect()
+    // (core/element.js) now leaves a non-finite Number value unwritten
+    // instead of stomping the sentinel with the literal string "NaN", so
+    // getAttribute('range-total') keeps reading "?" as authored. The
     // coerced PROPERTY still holds NaN stably (Object.is(NaN, NaN) is
-    // true, so the reflect's re-parse never re-writes it) — that's the
-    // one signal that survives, and what tells "unknown yet" apart from
+    // true, so re-parsing the unchanged attribute never re-triggers a
+    // write either) — that's what tells "unknown yet" apart from
     // "confirmed zero" (a finite 0) once safeRangeTotal has clamped both
     // to 0.
     const rangeOpen = hasRangeTotal

package/components/table-toolbar/table-toolbar.a2ui.json

@@ -239,6 +239,9 @@
       },
       "scope": {
         "description": "Leading region rendered BEFORE the [text]/[count] title cluster — e.g. a scope/view-switcher menu (an org's teams, a saved view). Positioning is CSS by DOM order, mirroring how [slot=\"actions\"] is a real, author-fillable insertion point rather than template-stamped content."
+      },
+      "summary": {
+        "description": "gh#1883 — trailing, text-tier cluster for an aggregate datum that belongs with the table but has no home in the range summary or the actions area (e.g. batch-detail's line-items Subtotal: `<span slot=\"summary\">Subtotal <strong>$1,240.00</strong></span>`). Rendered in the same flex row, after [slot=\"actions-leading\"] and before the page-size select / [slot=\"actions\"] — closer to the trailing edge than [slot=\"scope\"]/[range-*], since it reads as a result/total rather than pagination or view-switching context. Text sized via [--table-toolbar-summary-size] (shared with the \"Showing X–Y of N\" range summary — both are the same text tier). Plain author-supplied markup, same real-insertion-point pattern as every other table-toolbar slot — no forced typography beyond the font-size token. Stays visible at every ADR-0076 compaction stage: it is DATA (an aggregate figure the consumer chose to show), not chrome, so it is never dropped or compacted the way the range summary/ controls are — a consumer needing narrower-container behavior owns that via its own slotted content, not a component-side compaction rule. Empty (the default) has zero footprint on existing consumers."
       }
     },
     "states": [

package/components/table-toolbar/table-toolbar.class.js

@@ -683,6 +683,26 @@ export class UITableToolbar extends UIElement {
       }
     }
 
+    // Summary slot passthrough (gh#1883) — a real insertion point (ADR-0067),
+    // same pattern as [slot="scope"]/[slot="actions-leading"]/[slot="actions"]
+    // above, for a trailing aggregate/total datum (e.g. line-items Subtotal)
+    // that belongs with the table but isn't pagination context. Rendered
+    // AFTER [slot="actions-leading"] and BEFORE the page-size select /
+    // [slot="actions"] — closer to the trailing edge than the range summary,
+    // controls, or search, since it reads as a result rather than view
+    // chrome. Deliberately NOT named [data-summary] — that marker already
+    // belongs to the "Showing X–Y of N" range-summary cluster stamped above;
+    // reusing it here would collide with every existing #updateSummary()/CSS
+    // selector keyed on that attribute.
+    const summarySlot = document.createElement('div');
+    summarySlot.setAttribute('data-summary-slot', '');
+    for (const node of [...this.children]) {
+      if (node === root) continue;
+      if (node.getAttribute?.('slot') === 'summary') {
+        summarySlot.appendChild(node);
+      }
+    }
+
     // Actions slot passthrough — we move any pre-existing [slot="actions"] children here
     const actionsSlot = document.createElement('div');
     actionsSlot.setAttribute('data-actions', '');
@@ -699,6 +719,7 @@ export class UITableToolbar extends UIElement {
     root.appendChild(controls);
     root.appendChild(search);
     root.appendChild(actionsLeadingSlot);
+    root.appendChild(summarySlot);
     root.appendChild(pageSize);
     root.appendChild(actionsSlot);
 
@@ -865,12 +886,13 @@ export class UITableToolbar extends UIElement {
     // gh#1877/ADR-0082 Amendment — same open/unproven-total discipline as
     // table-footer-ui's own #draw(): NOT keyed on the raw attribute
     // string. rangeTotal is a Number-typed reflected prop, so
-    // range-total="?" parses via `+"?"` → NaN and the property setter's
-    // own reflect() immediately rewrites the DOM attribute to the literal
-    // string "NaN" (core/element.js) — getAttribute('range-total') would
-    // read "NaN", never "?". The coerced PROPERTY still holds NaN stably
-    // (Object.is(NaN, NaN) is true, so the reflect's re-parse never
-    // re-writes it), and that's what tells "unknown yet" apart from a
+    // range-total="?" parses via `+"?"` → NaN. gh#1895 — reflect()
+    // (core/element.js) leaves a non-finite Number value unwritten instead
+    // of stomping the sentinel with the literal string "NaN", so
+    // getAttribute('range-total') keeps reading "?" as authored. The
+    // coerced PROPERTY still holds NaN stably (Object.is(NaN, NaN) is
+    // true, so re-parsing the unchanged attribute never re-triggers a
+    // write either), and that's what tells "unknown yet" apart from a
     // confirmed range-total="0" (a finite 0).
     const rangeOpen = !Number.isFinite(Number(this.rangeTotal));
     // gh#1877/ADR-0082 Amendment — additive suffixes onto the normal

package/components/table-toolbar/table-toolbar.css

@@ -526,6 +526,36 @@
 
   [data-actions-leading]:empty { display: none; }
 
+  /* ═══════ Summary slot ═══════ (gh#1883 — trailing aggregate/total datum,
+     e.g. line-items Subtotal, rendered AFTER [slot="actions-leading"] and
+     BEFORE the page-size select / [slot="actions"]. Text-tier sized via
+     --table-toolbar-summary-size — the SAME token the range summary
+     ([data-summary-text]/[data-summary-compact]) already uses, since both
+     read as the same "small figure next to the toolbar chrome" tier;
+     color is NOT forced (unlike the range summary, which paints its own
+     generated text) — this slot holds plain author-supplied markup that
+     may want its own emphasis, e.g. a bold `<strong>` total.
+     Deliberately carries no margin-inline-start:auto of its own: it sits
+     between [data-actions-leading] and [data-page-size], both of which
+     already push the trailing group to the far edge, so a third auto
+     margin here would only ever be a no-op (the first unclaimed-space
+     sibling already claims it) — see [data-page-size]'s own comment below.
+     No compaction-stage hide/compact rule at any breakpoint or [stage]
+     pin, unlike [data-summary] above — this is DATA the consumer chose to
+     show, not chrome; a consumer needing narrower-container behavior owns
+     that via its own slotted content. */
+
+  [data-summary-slot] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--table-toolbar-cluster-gap);
+    flex: 0 0 auto;
+    font-size: var(--table-toolbar-summary-size);
+    line-height: var(--a-font-leading-snug);
+  }
+
+  [data-summary-slot]:empty { display: none; }
+
   /* ═══════ Page-size select ═══════ (gh#1615)
      Carries the SAME margin-inline-start:auto as [data-search] so the
      trailing group (controls/search/page-size/actions) still pushes to the

package/components/table-toolbar/table-toolbar.yaml

@@ -317,6 +317,26 @@ slots:
       stamp. Empty (the default) has zero footprint on existing consumers.
   actions:
     description: Trailing action area — primary buttons (e.g. "New row") rendered after the search input, [slot="actions-leading"], and the page-size select.
+  summary:
+    description: >-
+      gh#1883 — trailing, text-tier cluster for an aggregate datum that
+      belongs with the table but has no home in the range summary or the
+      actions area (e.g. batch-detail's line-items Subtotal:
+      `<span slot="summary">Subtotal <strong>$1,240.00</strong></span>`).
+      Rendered in the same flex row, after [slot="actions-leading"] and
+      before the page-size select / [slot="actions"] — closer to the
+      trailing edge than [slot="scope"]/[range-*], since it reads as a
+      result/total rather than pagination or view-switching context. Text
+      sized via [--table-toolbar-summary-size] (shared with the
+      "Showing X–Y of N" range summary — both are the same text tier).
+      Plain author-supplied markup, same real-insertion-point pattern as
+      every other table-toolbar slot — no forced typography beyond the
+      font-size token. Stays visible at every ADR-0076 compaction stage: it
+      is DATA (an aggregate figure the consumer chose to show), not chrome,
+      so it is never dropped or compacted the way the range summary/
+      controls are — a consumer needing narrower-container behavior owns
+      that via its own slotted content, not a component-side compaction
+      rule. Empty (the default) has zero footprint on existing consumers.
 states:
   - name: idle
     description: Default, ready for interaction.
@@ -354,29 +374,40 @@ a2ui:
     - >-
       Pair <table-toolbar-ui> with <table-ui> via [for="<table-id>"]
       (or rely on first-sibling fallback when both are inside the
-      same parent). One toolbar per table. The doubled-chrome hazard is
-      a TITLE COLLISION, not a blanket card-header ban (gh#1807, SPEC
-      REQ-C-004): a toolbar carrying [text] must not share a card with
-      a heading-slotted <card-ui> <header> — that pairing doubles the
-      title row. A title-less toolbar (no [text]) inside a card whose
-      <header> owns the title is the canonical table-in-card
-      composition (see the table-in-card pattern) and is NOT doubled
-      chrome — the toolbar renders only its count/search/filter/sort/
-      columns cluster, with the title living in the card header alone.
+      same parent). One toolbar per table. <table-toolbar-ui> MAY sit
+      as <card-ui>'s <header>'s sole child — verified in a rendered
+      browser to lay out full-width identically to the
+      sibling-above-card pattern (gh#1807/#1884, ADR-0080) — but do
+      NOT also give that same <header> a slot="heading"/slot="action"
+      child: card.css's grid mode then shrinks the toolbar to its own
+      content width and collapses its flex-row layout. The
+      doubled-chrome hazard is a TITLE COLLISION, not a blanket
+      card-header ban (SPEC REQ-C-004): a toolbar carrying [text] must
+      not share a card with a separately heading-slotted <card-ui>
+      <header> — that pairing doubles the title row. As the header's
+      sole child, the toolbar's own [text]/[count] cluster IS the
+      card's title; there is no separate heading to collide with.
     - >-
       All four affordances (search, filter, sort, columns) default ON.
       Opt out individually via [no-search] / [no-filter] / [no-sort]
       / [no-columns]. The previous [searchable] / [filterable]
       attributes are deprecated — do NOT emit them.
     - >-
-      Three legitimate placements: ABOVE the <card-ui> containing the
-      table-ui; standing alone outside a card-ui parent with
-      [variant="card"] (wraps the toolbar in card-style chrome); or
-      INSIDE the card, in its own plain (non-bleed) <section> between
-      the card header and the bleed table section — the canonical
-      table-in-card shape (gh#1807) — title-less (no [text]) since the
-      card header already owns the title (see the title-collision rule
-      above).
+      Two legitimate in-card placements, chosen by whether the card
+      header needs content beyond the toolbar: ABOVE the <card-ui>
+      (sibling, typically wrapped with the table in a <col-ui>) when
+      the header carries its own slot="heading"/slot="action" content
+      alongside the toolbar; or AS <card-ui>'s <header> sole child —
+      the canonical in-card shape (gh#1807/#1884, ADR-0080) — when the
+      toolbar IS the header and no separate title/action row is
+      needed. A toolbar can also stand alone outside any card-ui
+      parent with [variant="card"], which wraps it in card-style
+      chrome. The previous plain (non-bleed) <section> placement
+      between the card header and the bleed table section — a
+      title-less toolbar leaving the title to a separately-slotted
+      header — is retired: no live demo or pattern documents it, and
+      the header-child shape supersedes it as the canonical in-card
+      composition.
     - >-
       Use slot="action" (or [slot="actions"]) for trailing primary
       buttons (Invite, Export, +New). Use [text] / [count] props for
@@ -433,6 +464,15 @@ a2ui:
       and [range-noun] to stop hand-painting the per-slice noun ("of 80
       users"). Same three attributes, same names, on table-footer-ui
       (ADR-0082 §"same name on both companions").
+    - >-
+      Use [slot="summary"] (gh#1883) for a trailing aggregate/total datum
+      that belongs with the table but isn't pagination context — e.g.
+      batch-detail's line-items Subtotal:
+      `<span slot="summary">Subtotal <strong>$1,240.00</strong></span>`.
+      Renders after [slot="actions-leading"] and before the page-size
+      select / [slot="actions"]. Always visible — it is data, never
+      collapsed or hidden by the compaction stages that reduce
+      Filter/Sort/Columns/search or the range summary.
     - >-
       A plain <button-ui> slotted into [slot="actions-leading"] (e.g. the
       app-owned Filter/Columns triggers above) already collapses to

package/components/theme-provider/theme-provider.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/ThemeProvider.json",
   "title": "ThemeProvider",
-  "description": "Foundation-providing wrapper — adopts the AdiaUI foundation (design tokens +\nresets + page-frame + every primitive's CSS) into the document from anywhere\nin the DOM, so a surface renders fully-styled WITHOUT a hand-wired\n<link rel=\"stylesheet\"> in <head>. Layout-transparent (display: contents): the\nelement owns no box; children lay out as if it weren't there.\n\nMechanism: it imports the constructable-stylesheet twin of web-components.min.css\n(byte-identical to the CDN bundle, emitted from the same build buffer) and\nadopts it once into document.adoptedStyleSheets, deduped — adoption fires at\nmodule load, before paint. Coexists with the render-blocking <link> path; both\ndeliver the same bytes. Use a <link> (-> the CDN web-components.min.css) for\nmulti-page / top-level surfaces (cacheable across navigations, zero flash); use\n<theme-provider> for SPA roots, embedded apps, and dynamic mounts where you do\nnot control <head> (e.g. <embed-shell>, an A2UI surface, a micro-frontend).\n\nTheming: the base foundation is OS light/dark via light-dark() tokens. Two opt-in\nattributes adopt their layer on demand — theme=\"ocean|forest|slate|…\" applies a\nnamed preset (adopts the themes layer; matches the [theme] hook) and\nscale=\"ui-sm|ui-md|ui-lg|content-sm|content-md|content-lg\" sets the sizing\nregister (adopts the matching register layer). Deprecated aliases \"verse\"\n(→ ui-sm) and \"prose\" (→ content-md) still map onto the legacy\n[verse]/[prose] attributes; removed at v1.0. Each layer is fetched only\nwhen its attribute is set, so a bare provider stays lean.\nOpt-in infra: NOT in the all-in-one @adia-ai/web-components barrel (it carries\nthe whole foundation); import @adia-ai/web-components/components/theme-provider\nexplicitly. Distinct from <frame-ui> (a layout skeleton, owns no CSS delivery)\nand the page shells (chrome over the same foundation).\n",
+  "description": "Foundation-providing wrapper — adopts the AdiaUI foundation (design tokens +\nresets + page-frame + every primitive's CSS) into the document from anywhere\nin the DOM, so a surface renders fully-styled WITHOUT a hand-wired\n<link rel=\"stylesheet\"> in <head>. Layout-transparent (display: contents): the\nelement owns no box; children lay out as if it weren't there.\n\nMechanism: it imports the constructable-stylesheet twin of web-components.min.css\n(byte-identical to the CDN bundle, emitted from the same build buffer) and\nadopts it once into document.adoptedStyleSheets, deduped — adoption fires at\nmodule load, before paint. Coexists with the render-blocking <link> path; both\ndeliver the same bytes. Use a <link> (-> the CDN web-components.min.css) for\nmulti-page / top-level surfaces (cacheable across navigations, zero flash); use\n<theme-provider> for SPA roots, embedded apps, and dynamic mounts where you do\nnot control <head> (e.g. <embed-shell>, an A2UI surface, a micro-frontend).\n\nTheming: the base foundation is OS light/dark via light-dark() tokens. Two opt-in\nattributes adopt their layer on demand — theme=\"ocean|forest|slate|…\" applies a\nnamed preset (adopts the themes layer; matches the [theme] hook) and\nscale=\"ui-sm|ui-md|ui-lg|content-sm|content-md|content-lg\" sets the sizing\nregister (adopts the matching register layer). Each layer is fetched only\nwhen its attribute is set, so a bare provider stays lean.\nOpt-in infra: NOT in the all-in-one @adia-ai/web-components barrel (it carries\nthe whole foundation); import @adia-ai/web-components/components/theme-provider\nexplicitly. Distinct from <frame-ui> (a layout skeleton, owns no CSS delivery)\nand the page shells (chrome over the same foundation).\n",
   "type": "object",
   "allOf": [
     {
@@ -22,7 +22,7 @@
       "const": "ThemeProvider"
     },
     "scale": {
-      "description": "Sizing register for the subtree — one of the six [scale] tiers: ui-sm (dense product UI), ui-md (base), ui-lg (touch/presentation), content-sm (compact article), content-md (long-form), content-lg (hero/marketing). Adopts the scale layer on demand; the reflected attribute is the [scale=\"…\"] CSS hook. Deprecated aliases \"verse\" (→ ui-sm) and \"prose\" (→ content-md) still map onto the legacy [verse]/[prose] attributes; removed at v1.0.",
+      "description": "Sizing register for the subtree — one of the six [scale] tiers: ui-sm (dense product UI), ui-md (base), ui-lg (touch/presentation), content-sm (compact article), content-md (long-form), content-lg (hero/marketing). Adopts the scale layer on demand; the reflected attribute is the [scale=\"…\"] CSS hook.",
       "type": "string",
       "enum": [
         "ui-sm",
@@ -30,9 +30,7 @@
         "ui-lg",
         "content-sm",
         "content-md",
-        "content-lg",
-        "verse",
-        "prose"
+        "content-lg"
       ],
       "default": ""
     }