@adia-ai/web-components 0.8.48 → 0.8.50

package/components/theme-provider/theme-provider.class.js

@@ -28,12 +28,11 @@
  *
  * Scope (v1): the provider supplies the FOUNDATION only — design tokens, resets,
  * page-frame, and every primitive's CSS. OS light/dark resolves automatically
- * (the tokens are `light-dark()`-based). Named themes (`[theme]`) and the
- * `verse` / `prose` context registers live in OPT-IN layers (themes.css /
- * verse.css / prose.css) that are NOT in the foundation bundle, so setting
- * `theme` / `verse` on the wrapper does nothing until those layers are also
- * adopted — a planned `theme=` / `verse` provider option (the token-root selector
- * is pre-wired for it; see .brain/notes/theme-provider-design-2026-06-04.md).
+ * (the tokens are `light-dark()`-based). Named themes (`[theme]`) live in an
+ * OPT-IN layer (themes.css) that is NOT in the foundation bundle, so setting
+ * `theme` on the wrapper does nothing until that layer is also adopted — a
+ * planned `theme=` provider option (the token-root selector is pre-wired for
+ * it; see .brain/notes/theme-provider-design-2026-06-04.md).
  *
  * Deliberately NOT in the all-in-one `@adia-ai/web-components` barrel — it's
  * opt-in infra (it carries the whole foundation). Import it explicitly:
@@ -58,19 +57,17 @@ function provideFoundation() {
   }
 }
 
-// Opt-in context registers — themes (named `[theme]` presets), and the `verse` /
-// `prose` `scale` registers. Each is its own constructable-sheet twin (built by
+// Opt-in context registers — themes (named `[theme]` presets) and the `scale`
+// register. Each is its own constructable-sheet twin (built by
 // scripts/build/bundle-css.mjs, byte-identical to its .min.css). Adopted on demand
 // the first time a provider needs one, deduped by sheet identity. Dynamic-imported
 // (static paths, so bundlers can code-split) so the element stays lean — a provider
 // that does no theming never pulls these in.
-const TWIN_LOADED = { themes: false, verse: false, prose: false, scale: false };
+const TWIN_LOADED = { themes: false, scale: false };
 function loadTwin(name) {
   switch (name) {
     case 'themes': return import('../../dist/themes.sheet.js');
     case 'scale': return import('../../dist/scale.sheet.js');
-    case 'verse': return import('../../dist/verse.sheet.js');
-    case 'prose': return import('../../dist/prose.sheet.js');
     default: return null;
   }
 }
@@ -100,8 +97,6 @@ export class UIThemeProvider extends UIElement {
     // Sizing register — one of the six [scale] tiers (ui-sm | ui-md | ui-lg |
     // content-sm | content-md | content-lg). Reflected, so the attribute IS the
     // `[scale="…"]` CSS hook in scale.css (the `theme` prop's mechanism).
-    // DEPRECATED aliases: "verse" (→ ui-sm) and "prose" (→ content-md) still
-    // map onto the legacy [verse]/[prose] attributes; removed at v1.0.
     scale: { type: String, reflect: true },
   };
   static template = () => null;
@@ -128,15 +123,7 @@ export class UIThemeProvider extends UIElement {
     if (this.theme) ensureTwin('themes');
 
     const scale = this.scale;
-    this.toggleAttribute('verse', scale === 'verse');
-    this.toggleAttribute('prose', scale === 'prose');
-    if (scale === 'verse' || scale === 'prose') {
-      // Legacy register aliases — the reflected scale="verse|prose" attribute
-      // matches no scale.css tier selector, so only the toggled [verse]/[prose]
-      // attribute has CSS effect. Removed at v1.0.
-      warnDeprecatedScaleAlias(scale);
-      ensureTwin(scale);
-    } else if (SCALE_TIERS.has(scale)) {
+    if (SCALE_TIERS.has(scale)) {
       // Tier names match [scale="…"] in scale.css directly via reflection.
       ensureTwin('scale');
     }
@@ -144,11 +131,3 @@ export class UIThemeProvider extends UIElement {
 }
 
 const SCALE_TIERS = new Set(['ui-sm', 'ui-md', 'ui-lg', 'content-sm', 'content-md', 'content-lg']);
-
-const warnedAliases = new Set();
-function warnDeprecatedScaleAlias(alias) {
-  if (warnedAliases.has(alias)) return;
-  warnedAliases.add(alias);
-  const tier = alias === 'verse' ? 'ui-sm' : 'content-md';
-  console.warn(`[theme-provider] scale="${alias}" is deprecated — use scale="${tier}" (removed at v1.0).`);
-}

package/components/theme-provider/theme-provider.d.ts

@@ -18,9 +18,7 @@ Theming: the base foundation is OS light/dark via light-dark() tokens. Two opt-i
 attributes adopt their layer on demand — theme="ocean|forest|slate|…" applies a
 named preset (adopts the themes layer; matches the [theme] hook) and
 scale="ui-sm|ui-md|ui-lg|content-sm|content-md|content-lg" sets the sizing
-register (adopts the matching register layer). Deprecated aliases "verse"
-(→ ui-sm) and "prose" (→ content-md) still map onto the legacy
-[verse]/[prose] attributes; removed at v1.0. Each layer is fetched only
+register (adopts the matching register layer). Each layer is fetched only
 when its attribute is set, so a bare provider stays lean.
 Opt-in infra: NOT in the all-in-one @adia-ai/web-components barrel (it carries
 the whole foundation); import @adia-ai/web-components/components/theme-provider
@@ -42,6 +40,6 @@ import { UIElement } from '../../core/element.js';
 export class UIThemeProvider extends UIElement {
   /** Named theme preset for the wrapped subtree (default, ocean, forest, sunset, lavender, rose, slate, midnight). Adopts the themes layer on demand + matches the [theme="…"] hook. */
   theme: string;
-  /** 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. */
-  scale: 'ui-sm' | 'ui-md' | 'ui-lg' | 'content-sm' | 'content-md' | 'content-lg' | 'verse' | 'prose';
+  /** 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. */
+  scale: 'ui-sm' | 'ui-md' | 'ui-lg' | 'content-sm' | 'content-md' | 'content-lg';
 }

package/components/theme-provider/theme-provider.yaml

@@ -26,9 +26,7 @@ description: |
   attributes adopt their layer on demand — theme="ocean|forest|slate|…" applies a
   named preset (adopts the themes layer; matches the [theme] hook) and
   scale="ui-sm|ui-md|ui-lg|content-sm|content-md|content-lg" sets the sizing
-  register (adopts the matching register layer). Deprecated aliases "verse"
-  (→ ui-sm) and "prose" (→ content-md) still map onto the legacy
-  [verse]/[prose] attributes; removed at v1.0. Each layer is fetched only
+  register (adopts the matching register layer). Each layer is fetched only
   when its attribute is set, so a bare provider stays lean.
   Opt-in infra: NOT in the all-in-one @adia-ai/web-components barrel (it carries
   the whole foundation); import @adia-ai/web-components/components/theme-provider
@@ -41,7 +39,7 @@ props:
     default: ""
     reflect: true
   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
     default: ""
     enum:
@@ -51,8 +49,6 @@ props:
       - content-sm
       - content-md
       - content-lg
-      - verse
-      - prose
     reflect: true
 events: {}
 slots: {}
@@ -67,8 +63,8 @@ a2ui:
       reason: 'Adopts the foundation bundle into the document from anywhere in the tree (document.adoptedStyleSheets).'
     - rule: 'For multi-page / top-level pages, prefer a render-blocking <link rel="stylesheet" href=".../web-components.min.css"> in <head> instead — cacheable across navigations, styled on the first frame. <theme-provider> and the link deliver byte-identical CSS, so they coexist.'
       reason: 'Link for multi-page (no flash); provider for SPA/embedded (no head access).'
-    - rule: 'Theme the wrapped subtree with theme="ocean" (a named preset) and/or scale="verse|prose" (compact / long-form register) — the provider adopts the matching opt-in layer on demand. The base foundation is OS light/dark automatically. Keep <theme-provider> at/near the mount root — display:contents means an ancestor "> " child selector will not reach its children.'
-      reason: 'theme/scale each fetch + adopt their layer (themes.css / verse.css / prose.css) on demand; display:contents preserves custom-property inheritance but not child-combinator reach (Light DOM, ADR-0033).'
+    - rule: 'Theme the wrapped subtree with theme="ocean" (a named preset) and/or scale="content-md" (a sizing register tier) — the provider adopts the matching opt-in layer on demand. The base foundation is OS light/dark automatically. Keep <theme-provider> at/near the mount root — display:contents means an ancestor "> " child selector will not reach its children.'
+      reason: 'theme/scale each fetch + adopt their layer (themes.css / scale.css) on demand; display:contents preserves custom-property inheritance but not child-combinator reach (Light DOM, ADR-0033).'
 anti_patterns: []
 examples:
   - name: spa-root

package/core/element.js

@@ -85,9 +85,22 @@ const NOOP_INTERNALS = Object.freeze({
 });
 
 function reflect(el, a, v, t) {
-  t === Boolean
-    ? v ? el.setAttribute(a, '') : el.removeAttribute(a)
-    : v == null ? el.removeAttribute(a) : el.setAttribute(a, String(v));
+  if (t === Boolean) {
+    v ? el.setAttribute(a, '') : el.removeAttribute(a);
+    return;
+  }
+  // gh#1895 — a Number-typed reflected prop set from an unparseable sentinel
+  // attribute (e.g. `range-total="?"`, ADR-0082 Amendment's open/unproven-
+  // total grammar) coerces to NaN. Writing `String(NaN)` back would stomp
+  // the author's sentinel with the literal string "NaN" on the very next
+  // render, so a non-finite Number value is deliberately left unreflected —
+  // the attribute keeps whatever the author wrote (or stays absent, for a
+  // NaN assigned straight from JS with no attribute yet). This mirrors how
+  // `null` already skips straight to removeAttribute below instead of
+  // stringifying: NaN gets its own no-write branch rather than one more
+  // Number.isFinite check duplicated at every "?"-sentinel call site.
+  if (t === Number && v != null && !Number.isFinite(v)) return;
+  v == null ? el.removeAttribute(a) : el.setAttribute(a, String(v));
 }
 
 const parseAttr = (v, t) =>

package/custom-elements.json

@@ -8245,7 +8245,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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",
           "name": "UISearch",
           "tagName": "search-ui",
           "superclass": {
@@ -9217,7 +9217,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "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."
             },
             {
               "name": "band",
@@ -9225,7 +9225,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "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."
             }
           ],
           "slots": [
@@ -10223,6 +10223,10 @@
             {
               "name": "actions",
               "description": "Trailing action area — primary buttons (e.g. \"New row\") rendered after the search input, [slot=\"actions-leading\"], and the page-size select."
+            },
+            {
+              "name": "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."
             }
           ],
           "events": [
@@ -10378,7 +10382,7 @@
                 "text": "[number, string]"
               },
               "default": "0",
-              "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\")."
             },
             {
               "name": "filteredCount",
@@ -11191,7 +11195,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Foundation-providing wrapper — adopts the AdiaUI foundation (design tokens + resets + page-frame + every primitive's CSS) into the document from anywhere in the DOM, so a surface renders fully-styled WITHOUT a hand-wired <link rel=\"stylesheet\"> in <head>. Layout-transparent (display: contents): the element owns no box; children lay out as if it weren't there. Mechanism: it imports the constructable-stylesheet twin of web-components.min.css (byte-identical to the CDN bundle, emitted from the same build buffer) and adopts it once into document.adoptedStyleSheets, deduped — adoption fires at module load, before paint. Coexists with the render-blocking <link> path; both deliver the same bytes. Use a <link> (-> the CDN web-components.min.css) for multi-page / top-level surfaces (cacheable across navigations, zero flash); use <theme-provider> for SPA roots, embedded apps, and dynamic mounts where you do not control <head> (e.g. <embed-shell>, an A2UI surface, a micro-frontend). Theming: the base foundation is OS light/dark via light-dark() tokens. Two opt-in attributes adopt their layer on demand — theme=\"ocean|forest|slate|…\" applies a named preset (adopts the themes layer; matches the [theme] hook) and scale=\"ui-sm|ui-md|ui-lg|content-sm|content-md|content-lg\" sets the sizing register (adopts the matching register layer). Deprecated aliases \"verse\" (→ ui-sm) and \"prose\" (→ content-md) still map onto the legacy [verse]/[prose] attributes; removed at v1.0. Each layer is fetched only when its attribute is set, so a bare provider stays lean. Opt-in infra: NOT in the all-in-one @adia-ai/web-components barrel (it carries the whole foundation); import @adia-ai/web-components/components/theme-provider explicitly. Distinct from <frame-ui> (a layout skeleton, owns no CSS delivery) and the page shells (chrome over the same foundation).",
+          "description": "Foundation-providing wrapper — adopts the AdiaUI foundation (design tokens + resets + page-frame + every primitive's CSS) into the document from anywhere in the DOM, so a surface renders fully-styled WITHOUT a hand-wired <link rel=\"stylesheet\"> in <head>. Layout-transparent (display: contents): the element owns no box; children lay out as if it weren't there. Mechanism: it imports the constructable-stylesheet twin of web-components.min.css (byte-identical to the CDN bundle, emitted from the same build buffer) and adopts it once into document.adoptedStyleSheets, deduped — adoption fires at module load, before paint. Coexists with the render-blocking <link> path; both deliver the same bytes. Use a <link> (-> the CDN web-components.min.css) for multi-page / top-level surfaces (cacheable across navigations, zero flash); use <theme-provider> for SPA roots, embedded apps, and dynamic mounts where you do not control <head> (e.g. <embed-shell>, an A2UI surface, a micro-frontend). Theming: the base foundation is OS light/dark via light-dark() tokens. Two opt-in attributes adopt their layer on demand — theme=\"ocean|forest|slate|…\" applies a named preset (adopts the themes layer; matches the [theme] hook) and scale=\"ui-sm|ui-md|ui-lg|content-sm|content-md|content-lg\" sets the sizing register (adopts the matching register layer). Each layer is fetched only when its attribute is set, so a bare provider stays lean. Opt-in infra: NOT in the all-in-one @adia-ai/web-components barrel (it carries the whole foundation); import @adia-ai/web-components/components/theme-provider explicitly. Distinct from <frame-ui> (a layout skeleton, owns no CSS delivery) and the page shells (chrome over the same foundation).",
           "name": "UIThemeProvider",
           "tagName": "theme-provider",
           "superclass": {
@@ -11211,7 +11215,7 @@
               "type": {
                 "text": "string"
               },
-              "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."
             }
           ]
         }