@adia-ai/web-components 0.8.47 → 0.8.50

package/components/search/search.class.js

@@ -55,6 +55,21 @@ export class UISearch extends UIFormElement {
 
   static template = () => null;
 
+  // ADR-0077 / spec-form-control-sizing-posture — `[inline]` is a CSS-only
+  // universal layout attribute (ADR-0037 §2: no yaml, no static properties
+  // entry on THIS host). But search-ui composes input-ui via light-DOM
+  // child stamping (connected()'s innerHTML below), so a plain CSS
+  // `:scope[inline]` on input-ui's own @scope can't reach across that
+  // composition boundary — the host's `[inline]` has to be forwarded onto
+  // the internal <input-ui> in JS. Hand-rolled `observedAttributes` +
+  // `attributeChangedCallback`, same shape as tags-input.class.js's `value`
+  // and drilldown.class.js's `path` — a non-declared-property attribute
+  // that still needs a JS reaction.
+  static get observedAttributes() {
+    const base = super.observedAttributes;
+    return base.includes('inline') ? base : [...base, 'inline'];
+  }
+
   #inputEl = null;
   #suffixEl = null;
   #timer = null;
@@ -77,6 +92,7 @@ export class UISearch extends UIFormElement {
         suffix="x-circle"
         placeholder="${this.placeholder}"
         ${this.disabled ? 'disabled' : ''}
+        ${this.hasAttribute('inline') ? 'inline' : ''}
         ${size ? `size="${size}"` : ''}
       ></input-ui>`;
     }
@@ -106,11 +122,38 @@ export class UISearch extends UIFormElement {
     setAttrIfChanged(this.#inputEl, 'placeholder', this.placeholder);
     if (this.disabled) setAttrIfChanged(this.#inputEl, 'disabled', '');
     else removeAttrIfPresent(this.#inputEl, 'disabled');
+    this.#syncInline();
 
     // Reflect value for CSS (clear button visibility)
     setAttrIfChanged(this, 'value', this.value || '');
   }
 
+  /**
+   * Forward this host's own `[inline]` (a CSS-only universal attribute,
+   * ADR-0037 §2 — never a declared property) onto the internal <input-ui>.
+   * Same idempotent-write shape as the placeholder/disabled sync above
+   * (gh#1755): setAttrIfChanged/removeAttrIfPresent so a byte-identical
+   * SSR-rendered child survives upgrade with zero attribute mutations.
+   */
+  #syncInline() {
+    if (!this.#inputEl) return;
+    if (this.hasAttribute('inline')) setAttrIfChanged(this.#inputEl, 'inline', '');
+    else removeAttrIfPresent(this.#inputEl, 'inline');
+  }
+
+  /**
+   * `[inline]` isn't a declared property (see `observedAttributes` above),
+   * so a post-connect `el.setAttribute('inline', '')` wouldn't otherwise
+   * trigger a re-render — render()'s effect only tracks this element's own
+   * reactive signals. Sync it directly here so a later toggle still
+   * propagates to the already-created child, same guarantee `.disabled =`
+   * gets for free from the declared-property/render-effect path.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === 'inline') this.#syncInline();
+  }
+
   #onInput = () => {
     this.value = this.#inputEl.value;
     this.syncValue(this.value);

package/components/search/search.css

@@ -9,6 +9,34 @@
 
   :scope {
     display: block;
+    /* ADR-0077 / spec-form-control-sizing-posture REQ-P-001/REQ-R-001
+       (search-ui row): fill by default, matching input-ui's own posture
+       (input.css). `display: block` alone gives no width once this host
+       becomes a flex item (row-ui) — flex items size from content, not
+       display type — so the fill is explicit. The inner <input-ui> (see
+       the `input-ui` override rule below) carries the matching
+       `width: 100%` already shipped on its own default :scope, so it
+       fills THIS now-100%-wide
+       host in turn — two widths, one contract. No host floor here: no
+       `--search-min-width` token is minted (REQ-F-003's documented
+       build-time choice) because the inner input's own hug-state floor
+       (input.css's --input-min-width, forwarded via [inline] below)
+       already delivers the family's legibility guarantee. */
+    width: 100%;
+  }
+
+  /* ADR-0077 / spec-form-control-sizing-posture REQ-P-003 (hug, via
+     [inline]): ADR-0037 §2 display-flip mechanics + `width: fit-content`
+     (not the mere absence of the fill rule — a grid item is blockified/
+     stretch-aligned by default, so hug needs the explicit rule to win
+     there too). search.class.js forwards this host's own `[inline]`
+     attribute onto the internal <input-ui> (light-DOM composition — CSS
+     `:scope[inline]` can't reach across that boundary on its own), so the
+     inner input's own :scope[inline] floor (--input-min-width, 20ch)
+     becomes this control's visible hug-state legibility floor. */
+  :scope[inline] {
+    display: inline-block;
+    width: fit-content;
   }
 
   /* Hide clear icon when empty */

package/components/search/search.yaml

@@ -7,7 +7,10 @@ status: stable
 component: Search
 category: input
 version: 1
-description: Search input with magnifying-glass icon, clear button, and debounced search event.
+description: Search input with magnifying-glass icon, clear button, and debounced search event. Fills its
+  container's available inline width by default (ADR-0077 / spec-form-control-sizing-posture) — in a flex row
+  (row-ui) or grid track it tracks the container all the way down. `[inline]` opts into the old shrink-wrap
+  behavior and forwards onto the internal input-ui so its 20ch legibility floor applies.
 props:
   name:
     description: Form field name

package/components/select/select.class.js

@@ -755,7 +755,10 @@ export class UISelect extends UIFormElement {
     if (!opt) return '';
     if (opt.mark) return `<adia-mark-ui data-select-mark size="sm"></adia-mark-ui>`;
     if (opt.avatar) return `<img data-option-avatar src="${escapeHTML(opt.avatar)}" alt="" />`;
-    if (opt.icon) return `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>`;
+    // gh#1857 — data-select-icon mirrors data-select-mark: a marker the
+    // trigger/option-row icon-sizing rule (select.css) keys off, so this
+    // stamped leading icon renders at the same 1.25rem diameter as the mark.
+    if (opt.icon) return `<icon-ui data-select-icon name="${escapeHTML(opt.icon)}"></icon-ui>`;
     return '';
   }
 

package/components/select/select.css

@@ -622,3 +622,16 @@ select-ui adia-mark-ui[data-select-leading][size],
 select-ui adia-mark-ui[data-select-mark][size] {
   --adia-mark-size: 1.25rem;
 }
+
+/* gh#1857 — stamped leading icons match the mark's 1.25rem diameter above
+   (visual parity between the two leading-visual kinds). The trigger's
+   icon-ui already carries [data-select-leading] (shared with mark/avatar,
+   select.class.js #syncLeading()); the option-row icon-ui carries the
+   parallel [data-select-icon] marker (#optionLeadHTML()). Both selectors
+   add the [role="option"] / tag qualifiers needed to strictly outspecify
+   the generic `select-ui [role="option"] icon-ui` (--a-ui-size) default
+   above without relying on source order. */
+select-ui icon-ui[data-select-leading],
+select-ui [role="option"] icon-ui[data-select-icon] {
+  --a-icon-size: 1.25rem;
+}

package/components/stat/stat.a2ui.json

@@ -14,12 +14,12 @@
   ],
   "properties": {
     "band": {
-      "description": "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.",
+      "description": "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.",
       "type": "boolean",
       "default": false
     },
     "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.",
+      "description": "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
     },
@@ -76,6 +76,11 @@
         "description": "Basic Stat usage",
         "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Stat\",\n    \"label\": \"Example Stat\",\n    \"value\": \"\"\n  }\n]",
         "name": "basic-stat"
+      },
+      {
+        "description": "KPI tile — band bleed with an overlaid delta chip (ADR-0083)",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Stat\",\n    \"band\": true,\n    \"bleed\": true,\n    \"label\": \"Sessions\",\n    \"value\": \"84,232\",\n    \"change\": \"+57%\",\n    \"trend\": \"up\",\n    \"children\": [\n      \"chart\"\n    ]\n  },\n  {\n    \"id\": \"chart\",\n    \"component\": \"Chart\",\n    \"slot\": \"chart\",\n    \"type\": \"area\",\n    \"x\": \"d\",\n    \"y\": \"v\",\n    \"noGrid\": true,\n    \"noValues\": true,\n    \"data\": [\n      { \"d\": \"Mon\", \"v\": 12 },\n      { \"d\": \"Tue\", \"v\": 18 },\n      { \"d\": \"Wed\", \"v\": 15 },\n      { \"d\": \"Thu\", \"v\": 27 },\n      { \"d\": \"Fri\", \"v\": 22 },\n      { \"d\": \"Sat\", \"v\": 31 },\n      { \"d\": \"Sun\", \"v\": 29 }\n    ]\n  }\n]",
+        "name": "tile"
       }
     ],
     "keywords": [
@@ -96,7 +101,8 @@
       "telemetry",
       "observability",
       "performance",
-      "scoreboard"
+      "scoreboard",
+      "tile"
     ],
     "name": "UIStat",
     "parts": {},
@@ -236,6 +242,27 @@
     },
     "tag": "stat-ui",
     "tokens": {
+      "--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-font-size": {
+        "description": "Font size of the `band bleed` tile's change chip. Falls back to `chart-ui`'s `--chart-chip-font-size`."
+      },
+      "--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-radius": {
+        "description": "Corner radius of the `band bleed` tile's change chip. Falls back to `chart-ui`'s `--chart-chip-radius`."
+      },
+      "--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-size": {
         "description": "Font size for the change badge"
       },

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,8 +60,11 @@
       "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.",
-      "type": "number",
+      "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"
+      ],
       "default": 0
     },
     "raw": {

package/components/table/table.class.js

@@ -41,6 +41,16 @@
  *                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 for its count-only label.
+ *   range-total="?" — gh#1877/ADR-0082 Amendment (2026-08-22) — the OPEN/
+ *                unproven-total state: server mode with no known total yet
+ *                (cursor/hasMore paging). Still presence-gated into server
+ *                mode like any other [range-total] value; #pageCount stays
+ *                one page ahead of the current page (never a fixed number)
+ *                so the pager's `next` stays enabled indefinitely, and
+ *                pagination visibility no longer requires a positive
+ *                #safeRangeTotal() while open. Resolves to a normal finite
+ *                server-mode table the moment a real range-total replaces
+ *                the "?".
  *   loading    — show loading overlay
  *   search     — global search filter string
  *
@@ -326,6 +336,20 @@ export class UITable extends UIElement {
   // reset-suppression call sites for why that widened scope is safe).
   get #serverMode() { return this.hasAttribute('range-total'); }
 
+  // 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. 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
   // `Number(x) || 0` accepts negative and non-finite values verbatim (both
   // are truthy), which can drive #pageCount/the footer's own range text
@@ -933,6 +957,13 @@ export class UITable extends UIElement {
     // derived, not the loaded page's own length (the exact dual-math drift
     // gh#1754's evidence quoted — this is now the ONE calc site;
     // #renderPagination reads this getter instead of recomputing).
+    // gh#1877/ADR-0082 Amendment — open/unproven total: no real total to
+    // derive from, so pageCount stays exactly one page ahead of wherever
+    // the pager currently is. That keeps `next` enabled indefinitely
+    // (never a false "last page") without inventing a fake total; the
+    // moment range-total resolves to a real number, this branch stops
+    // firing and the real ceil(...) math above takes over.
+    if (this.#rangeOpen) return this.#page + 2;
     if (this.#serverMode) return Math.max(1, Math.ceil(this.#safeRangeTotal() / this.paginate));
     // pageCount should reflect filtered data, not raw data
     const filteredCount = this.#getProcessedIndices().length;
@@ -1054,8 +1085,12 @@ export class UITable extends UIElement {
     // `data.length > 0` term: an in-flight fetch (momentarily empty `.data`)
     // must not flicker the pager away, so visibility gates on `range-total`
     // instead.
+    // gh#1877/ADR-0082 Amendment — an open/unproven total (REQ-D-003
+    // widened) always shows the pager while server mode is active: there's
+    // no confirmed-zero signal to gate on yet, and hiding it would read as
+    // "no more rows" when the real answer is "unknown, keep going".
     const showPagination = this.paginate > 0 && !this.noPager
-      && (this.#serverMode ? this.#safeRangeTotal() > 0 : this.#data.length > 0);
+      && (this.#serverMode ? (this.#rangeOpen || this.#safeRangeTotal() > 0) : this.#data.length > 0);
     let footer = this.querySelector(':scope > [data-footer]');
 
     if (showPagination) {

package/components/table/table.d.ts

@@ -104,8 +104,8 @@ 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. */
-  rangeTotal: 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: 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;
   /** Global search/filter string. Filters visible rows across all columns using case-insensitive substring matching. Does NOT reset the current page (verified against source at the gh#1754/ADR-0082 build — unlike setFilter()/clearFilters(), no internal page reset ever ran for a search change; this description previously claimed "resets to page 1 on change," which the source never did). Aligning the doc to observed behavior here, not a behavior change — a page reset on search, if wanted, is a separate client-mode ticket. */

package/components/table/table.yaml

@@ -98,7 +98,23 @@ props:
       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.
-    type: number
+      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]
     default: 0
     reflect: true
   filteredCount: