@adia-ai/a2ui-corpus 0.7.23 → 0.7.25

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog — @adia-ai/a2ui-corpus
 
+## [0.7.25] — 2026-07-03
+
+### Changed
+- **`catalog-a2ui_0_9.json` regenerated — registers `accordion-ui`'s new `variant` prop.** The generator catalog was rebuilt from the component yaml SoT after `accordion.yaml` + `accordion-item.yaml` gained the `variant="flat|contained"` attribute, so the published catalog exposes it to the gen-UI pipeline. Chunks + `chunk-embeddings.json` byte-stable — the 3 new `accordion-variant-*` `data-chunk` markers on the primitive's own demo page are bare (no `data-chunk-domain`), so the harvester's `annotatedOnly` gate correctly excludes them as dev-overlay-only, not corpus content (verified: `chunks/_index.json` unique_names unchanged at 394, no re-embed needed). Substantive v0.7.25 work shipped in `@adia-ai/web-components` — see `packages/web-components/CHANGELOG.md#0725--2026-07-03`.
+
+### Maintenance
+- **Doc-comment path reference corrected** (`docs/specs/...` → `.claude/docs/specs/...`) in `scripts/chunk-library.js` — propagated from the repo-wide `docs/` → `.claude/docs/` migration (2026-07-01); no functional change.
+
+## [0.7.24] — 2026-07-01
+
+### Changed
+- **`catalog-a2ui_0_9.json` + `catalog-a2ui_0_9_rules.txt` regenerated — registers `display-field-ui`.** The generator catalog was rebuilt from the component yaml SoT after the new `display-field/display-field.yaml` landed, so the published catalog exposes `display-field-ui` (120 → 121 components) to the gen-UI pipeline. Chunks + `chunk-embeddings.json` byte-stable (no new annotated chunks; no re-embed). Substantive v0.7.24 work shipped in `@adia-ai/web-components` — see `packages/web-components/CHANGELOG.md#0724--2026-07-01`.
+
 ## [0.7.23] — 2026-06-30
 
 ### Changed
@@ -405,7 +418,7 @@ Patterns shipped: card-ui header/section/footer anatomy; row-ui header pattern;
 - **`chunk-embeddings.json` regenerated to match the re-harvested chunks.** 230 chunks re-embedded (1536-d `text-embedding-3-small`); restores `check:embeddings-fresh` to green — the retrieval index had drifted 6.6 days stale relative to `chunks/_index.json`, predating this cut but surfaced by the dashboard chunk re-harvest above.
 
 ### Maintenance
-- **Lockstep version bump only for non-dashboard chunks.** No other source changes in this package; bumped to maintain the 9-package version coherence enforced by `scripts/release/check-lockstep.mjs`. Substantive v0.6.15 work also shipped in `@adia-ai/web-components` — `installIconLoaders` shape-detects malformed flat globs (FB-07), `icons-phosphor.js` surfaces silent-fail diagnostics (FB-08), and docs/skill examples corrected (FB-09). See `packages/web-components/CHANGELOG.md#0615--2026-05-21` for details.
+- **Lockstep version bump only for non-dashboard chunks.** No other source changes in this package; bumped to maintain the 9-package version coherence enforced by `scripts/release/check-lockstep.mjs`. Substantive v0.6.15 work also shipped in `@adia-ai/web-components` — `installIconLoaders` shape-detects malformed flat globs (FB-07), `icons-phosphor.js` surfaces silent-fail diagnostics (FB-08), and .claude/docs/skill examples corrected (FB-09). See `packages/web-components/CHANGELOG.md#0615--2026-05-21` for details.
 
 ## [0.6.14] — 2026-05-21
 
@@ -734,7 +747,7 @@ Corpus regen via `npm run harvest:chunks`: 222 → 230 chunks (+8); chunk index
 
 Expected impact: Haiku free-form coverage on the 100-intent held-out set lifts from 91% (post-v0.5.2 §125+§126) → ~98-99% (matching Opus's §127 ceiling). Empirical verification in v0.5.3 §145 rebaseline check (paired re-eval).
 
-Per the §127 verdict report (`docs/reports/free-form-haiku-vs-opus-2026-05-13.md`) — closing the coverage gap via chunk authoring is the right lever; model swap to Opus (5× cost) was rejected by the §127 decision rule. §143 ships the rejected-Opus's path-forward.
+Per the §127 verdict report (`.claude/docs/reports/free-form-haiku-vs-opus-2026-05-13.md`) — closing the coverage gap via chunk authoring is the right lever; model swap to Opus (5× cost) was rejected by the §127 decision rule. §143 ships the rejected-Opus's path-forward.
 ## [0.5.2] - 2026-05-13
 
 ### Changed — Catalog-text structural sweep on 5 under-substituted chunks (§125, v0.5.2)
@@ -824,7 +837,7 @@ Hand-authored `corpus/patterns/<domain>/*.{json,yaml}` (~225 files) and `corpus/
 - **`scripts/ingest.js`** retired — pattern-ingestion phase of the legacy pipeline; chunks-only post-§64.
 - **`scripts/build-pattern-index.mjs`** retired — produced the `patterns/_index.json` files no consumer reads post-§64.
 
-Companion docs link-rot fix in `docs/journal/2026/04/2026-04-27.md` (one markdown link to `scripts/run-pipeline.mjs` unwrapped to plain text with retired-2026-05-12 annotation).
+Companion docs link-rot fix in `.claude/docs/journal/2026/04/2026-04-27.md` (one markdown link to `scripts/run-pipeline.mjs` unwrapped to plain text with retired-2026-05-12 annotation).
 
 ### Added — `settings-admin-page` chunk + Mode A annotation (§63, v0.4.6)
 
@@ -935,7 +948,7 @@ The harvester is repo-tooling (`scripts/build/`), not a corpus package member, b
 - **§42 nested-expand-then-transpile pass** — after collection, recursively expands `<!-- nested: <name> -->` placeholders in annotated chunks, then transpiles the expanded HTML to A2UI templates via `transpileHTML(html, { mode: 'instant' })`.
 - **§45 source-aware tier-1 expansion fix** — replaces §42's "first wins" canonical-html rule with directory-aware selection. **Bug**: `auth-card-content` has 24 instances; the 404 page sorted alphabetically first, so EVERY auth chunk silently inlined 404 page content from §41 landing through §45 discovery (smoke tests only checked retrieval strategy, not template content). **Fix**: Tier 1 exact directory match → Tier 2 deepest common directory prefix → Tier 3 alphabetical. Without it, `apps/user-flow/app/auth/sign-in/` shares depth with `apps/user-flow/app/auth/sign-in/mfa/` and tie-break would pick wrong sibling.
 
-See root [CHANGELOG.md `[Unreleased]`](../../../CHANGELOG.md) for the cross-cutting arc narrative + [docs/journal/2026/05/2026-05-12.md](../../../docs/journal/2026/05/2026-05-12.md) §§ 36-51 for per-§ details.
+See root [CHANGELOG.md `[Unreleased]`](../../../CHANGELOG.md) for the cross-cutting arc narrative + [.claude/docs/journal/2026/05/2026-05-12.md](../../../.claude/docs/journal/2026/05/2026-05-12.md) §§ 36-51 for per-§ details.
 ## [0.4.3] - 2026-05-11
 
 ### Changed
@@ -961,7 +974,7 @@ See root [CHANGELOG.md `[Unreleased]`](../../../CHANGELOG.md) for the cross-cutt
 
 ### Lockstep
 
-9-package coordinated PATCH cut to v0.4.2 (per [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy)). Internal `@adia-ai/*` dep ranges stay at `^0.4.0` (patch-cut asymmetry — `^0.4.0` covers `0.4.x` under semver). Rides alongside `@adia-ai/web-components@0.4.2` (input-ui type=number rewrite) and `@adia-ai/web-modules@0.4.2` (editor-sidebar width mirror). See root [CHANGELOG.md `## [0.4.2]`](../../../CHANGELOG.md) for the cut narrative.
+9-package coordinated PATCH cut to v0.4.2 (per [`.claude/docs/specs/package-architecture.md` § 15](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy)). Internal `@adia-ai/*` dep ranges stay at `^0.4.0` (patch-cut asymmetry — `^0.4.0` covers `0.4.x` under semver). Rides alongside `@adia-ai/web-components@0.4.2` (input-ui type=number rewrite) and `@adia-ai/web-modules@0.4.2` (editor-sidebar width mirror). See root [CHANGELOG.md `## [0.4.2]`](../../../CHANGELOG.md) for the cut narrative.
 ## [0.4.1] - 2026-05-10
 
 ### Changed
@@ -972,7 +985,7 @@ See root [CHANGELOG.md `[Unreleased]`](../../../CHANGELOG.md) for the cross-cutt
 
 ### Added
 
-- `docs/reports/chunk-reconcile-triage-2026-05-10.md` — triage doc documenting that all current `audit:chunk-reconcile` findings (9 fingerprint collisions + 19 near-duplicates + 10 cross-source) are intentional outcomes of the onb/reg alignment work + foundational shared chunks.
+- `.claude/docs/reports/chunk-reconcile-triage-2026-05-10.md` — triage doc documenting that all current `audit:chunk-reconcile` findings (9 fingerprint collisions + 19 near-duplicates + 10 cross-source) are intentional outcomes of the onb/reg alignment work + foundational shared chunks.
 ## [0.4.0] - 2026-05-10
 
 ### Ride-along (no corpus changes)
@@ -1032,7 +1045,7 @@ The catalog is consumed by `@adia-ai/a2ui-retrieval` for protocol-vocabulary com
 Corpus chunks, fragments, compositions, and patterns are byte-identical to v0.3.3. The only change is the regenerated catalog manifest.
 ## [0.3.3] - 2026-05-07
 
-**Lockstep cut.** All 9 published `@adia-ai/*` packages now share version `0.3.3`, governed by [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy). Internal `@adia-ai/*` ranges stay at `^0.3.0` (patch-cut asymmetry — caret floats `0.3.x`).
+**Lockstep cut.** All 9 published `@adia-ai/*` packages now share version `0.3.3`, governed by [`.claude/docs/specs/package-architecture.md` § 15](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy). Internal `@adia-ai/*` ranges stay at `^0.3.0` (patch-cut asymmetry — caret floats `0.3.x`).
 
 ### Added
 
@@ -1067,7 +1080,7 @@ Corpus chunks, fragments, compositions, and patterns are byte-identical to v0.3.
 ## [0.3.2] - 2026-05-06
 
 **9-package lockstep patch cut to v0.3.2.** All lockstep members share
-one version per [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy).
+one version per [`.claude/docs/specs/package-architecture.md` § 15](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy).
 Internal `@adia-ai/*` dep ranges unchanged at `^0.3.0`.
 
 ### Added
@@ -1094,7 +1107,7 @@ Internal `@adia-ai/*` dep ranges unchanged at `^0.3.0`.
 - `version`: `0.3.1` → `0.3.2`.
 ## [0.3.1] - 2026-05-06
 
-**9-package lockstep patch cut.** All 9 published `@adia-ai/*` packages bump 0.3.0 → 0.3.1 per [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy). Internal `@adia-ai/*` dep ranges remain at `^0.3.0` (covers `0.3.1` under semver — patch-cut asymmetry).
+**9-package lockstep patch cut.** All 9 published `@adia-ai/*` packages bump 0.3.0 → 0.3.1 per [`.claude/docs/specs/package-architecture.md` § 15](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy). Internal `@adia-ai/*` dep ranges remain at `^0.3.0` (covers `0.3.1` under semver — patch-cut asymmetry).
 
 This package itself ships **no source changes** in v0.3.1. The cut bumps version only — substantive content lives in [`@adia-ai/web-components`](https://github.com/adiahealth/gen-ui-kit/releases/tag/web-components-v0.3.1) (folder-per-trait restructure; barrel API unchanged).
 
@@ -1104,7 +1117,7 @@ This package itself ships **no source changes** in v0.3.1. The cut bumps version
 - Internal `@adia-ai/*` dep ranges: unchanged at `^0.3.0` (covers `0.3.1` under semver — patch-cut asymmetry).
 ## [0.3.0] - 2026-05-05
 
-**9-package lockstep cut.** All 9 published `@adia-ai/*` packages bump 0.2.5 → 0.3.0 per [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy). Internal `@adia-ai/*` dep ranges bump `^0.2.0` → `^0.3.0`.
+**9-package lockstep cut.** All 9 published `@adia-ai/*` packages bump 0.2.5 → 0.3.0 per [`.claude/docs/specs/package-architecture.md` § 15](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy). Internal `@adia-ai/*` dep ranges bump `^0.2.0` → `^0.3.0`.
 
 The lockstep policy expanded from 8 to 9 packages with this cut — `@adia-ai/llm` joins as a 9th member, and `@adia-ai/a2ui-utils` was renamed to `@adia-ai/a2ui-runtime`. Both are BREAKING for npm consumers (acceptable under pre-1.0 semver).
 
@@ -1119,7 +1132,7 @@ This package itself ships **no source changes** in v0.3.0. The cut bumps version
 `a2ui-corpus` source is byte-identical to `0.2.5`. The cut bumps version only — corpus has no `@adia-ai/*` dependencies so no dep-range updates either.
 ## [0.2.5] - 2026-05-04
 
-**Lockstep cut + catalog regen for `<fields-ui>` primitive.** All 8 published `@adia-ai/*` packages bump 0.2.4 → 0.2.5 per [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy). Patch cut — **no BREAKING changes**.
+**Lockstep cut + catalog regen for `<fields-ui>` primitive.** All 8 published `@adia-ai/*` packages bump 0.2.4 → 0.2.5 per [`.claude/docs/specs/package-architecture.md` § 15](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy). Patch cut — **no BREAKING changes**.
 
 ### Changed
 
@@ -1128,7 +1141,7 @@ This package itself ships **no source changes** in v0.3.0. The cut bumps version
 - Per-element `fields/fields.a2ui.json` written by `scripts/build/components.mjs`.
 ## [0.2.4] - 2026-05-04
 
-**Lockstep cut + catalog regen for `<demo-toggle-ui>` primitive.** All 8 published `@adia-ai/*` packages bump 0.2.3 → 0.2.4 per [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy). Patch cut — no breaking changes.
+**Lockstep cut + catalog regen for `<demo-toggle-ui>` primitive.** All 8 published `@adia-ai/*` packages bump 0.2.3 → 0.2.4 per [`.claude/docs/specs/package-architecture.md` § 15](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy). Patch cut — no breaking changes.
 
 ### Changed
 
@@ -1150,7 +1163,7 @@ the generated `_catalog.json` consumed by
 
 **Lockstep cut.** All 8 published `@adia-ai/*` packages bump
 0.2.2 → 0.2.3 per
-[`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy).
+[`.claude/docs/specs/package-architecture.md` § 15](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy).
 Patch cut — no breaking changes.
 
 ### Changed
@@ -1162,7 +1175,7 @@ Patch cut — no breaking changes.
 `@adia-ai/a2ui-corpus` source is byte-identical to `0.2.2`. The cut bumps version only.
 ## [0.2.2] - 2026-05-02
 
-**Lockstep cut.** All 8 published `@adia-ai/*` packages bump 0.2.1 → 0.2.2 per [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy). Patch cut — no breaking changes.
+**Lockstep cut.** All 8 published `@adia-ai/*` packages bump 0.2.1 → 0.2.2 per [`.claude/docs/specs/package-architecture.md` § 15](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy). Patch cut — no breaking changes.
 
 ### Changed
 
@@ -1175,7 +1188,7 @@ Patch cut — no breaking changes.
 ---
 ## [0.2.1] - 2026-05-02
 
-**Lockstep cut + chunk-corpus reorganization mega-arc + trait registry regenerated from web-components SoT.** All 8 published `@adia-ai/*` packages bump 0.2.0 → 0.2.1 per [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy). Patch cut — no breaking changes.
+**Lockstep cut + chunk-corpus reorganization mega-arc + trait registry regenerated from web-components SoT.** All 8 published `@adia-ai/*` packages bump 0.2.0 → 0.2.1 per [`.claude/docs/specs/package-architecture.md` § 15](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy). Patch cut — no breaking changes.
 
 ### Changed
 
@@ -1236,12 +1249,12 @@ New `scripts/build/under-harvest-audit.mjs` flags pages under `site/pages/{patte
 - **`patterns/layout/weather-widget.json`** — renamed `Metric` → `Stat` (no `<metric-ui>` exists; `Stat` is the canonical metric/value/change/trend primitive).
 - Smoke side-effect: zettel score bumped 91 → 92; smoke validation flipped from `valid=false score=98/91` → `valid=true score=100/92`. The registry gaps were tripping validation upstream.
 
-Per-finding triage in [`docs/reports/playground-examples-review-2026-05-02.md`](../../../docs/reports/playground-examples-review-2026-05-02.md).
+Per-finding triage in [`.claude/docs/reports/playground-examples-review-2026-05-02.md`](../../../.claude/docs/reports/playground-examples-review-2026-05-02.md).
 ## [0.2.0] - 2026-05-02
 
 **Lockstep cut.** All 8 published `@adia-ai/*` packages now share one
-version, governed by [`docs/specs/package-architecture.md` § 15
-(Versioning Policy)](../../../docs/specs/package-architecture.md#15-versioning-policy).
+version, governed by [`.claude/docs/specs/package-architecture.md` § 15
+(Versioning Policy)](../../../.claude/docs/specs/package-architecture.md#15-versioning-policy).
 
 This release also formalizes corpus's role as **the catalog's home** —
 spec § 3 first-principle 3 was rewritten in v0.6.0 of the spec to
@@ -1489,11 +1502,11 @@ existing pattern/fragment/composition surface unchanged.
 
 ### Convention reference
 
-- Spec: [`docs/specs/genui-chunk-marker.md`](../../../docs/specs/genui-chunk-marker.md)
+- Spec: [`.claude/docs/specs/genui-chunk-marker.md`](../../../.claude/docs/specs/genui-chunk-marker.md)
   (Draft v0.1.0) — three attributes (`data-chunk`, `data-chunk-kind`,
   `data-chunk-slot`); naming conventions per cluster; visual marker
   rules; harvester contract.
-- Inventory: [`docs/specs/genui-chunk-inventory-001.md`](../../../docs/specs/genui-chunk-inventory-001.md)
+- Inventory: [`.claude/docs/specs/genui-chunk-inventory-001.md`](../../../.claude/docs/specs/genui-chunk-inventory-001.md)
   — full list with intent labels + review status.
 ## [0.0.2] - 2026-04-27
 

package/README.md

@@ -61,7 +61,7 @@ hand-authored ungrounded JSON lives in `corpus/`.
 > retrievable equivalents were either (a) already represented in the
 > chunks corpus via annotated `data-chunk-*` regions, or (b) deemed
 > non-grounded under the locked rule and DELETE'd in §73 Mode-C triage
-> (target for v0.4.7). See [`docs/journal/2026/05/2026-05-12.md`](../../../docs/journal/2026/05/2026-05-12.md)
+> (target for v0.4.7). See [`.claude/docs/journal/2026/05/2026-05-12.md`](../../../.claude/docs/journal/2026/05/2026-05-12.md)
 > §§ 36-§42, §65, §72 for the multi-arc retirement narrative.
 
 ## Layout
@@ -243,7 +243,7 @@ When adding coverage for a new intent:
 2. **Tag the reusable region** — add `data-chunk="<slug>"` +
    `data-chunk-kind="<kind>"` (block / page / panel / field) on the
    element. The harvester extracts the bounding HTML on the next
-   build. See `docs/specs/genui-chunk-marker.md` for the marker
+   build. See `.claude/docs/specs/genui-chunk-marker.md` for the marker
    convention.
 3. **Harvest + ingest** — `npm run harvest:chunks` writes
    `chunks/<slug>.json` and refreshes `_index.json`. `npm run pipeline`

package/catalog-a2ui_0_9.json

@@ -156,6 +156,15 @@
           "description": "Allow multiple panels to be open simultaneously",
           "type": "boolean",
           "default": false
+        },
+        "variant": {
+          "description": "Visual posture, inherited by child accordion-item-ui elements unless a\nchild sets its own [variant]. `flat` (default) renders items with no\nchrome — settings pages, FAQ blocks, anywhere the accordion sits\ndirectly on the page canvas. `contained` gives every item a bounded\nsurface (background + border + radius spanning header and open body,\nplus a divider between them when open) — the composition to reach for\nwhen nesting the accordion inside <card-ui>.",
+          "type": "string",
+          "enum": [
+            "flat",
+            "contained"
+          ],
+          "default": "flat"
         }
       },
       "required": [
@@ -297,6 +306,15 @@
         "text": {
           "description": "Header text — the clickable label that toggles the section.",
           "type": "string"
+        },
+        "variant": {
+          "description": "Per-item posture override. Items normally inherit their host\naccordion-ui's [variant] — set this directly on ONE item only to\nopt it out of (`flat`) or into (`contained`) the host's posture.",
+          "type": "string",
+          "enum": [
+            "flat",
+            "contained"
+          ],
+          "default": "flat"
         }
       },
       "required": [
@@ -339,6 +357,9 @@
           "body": {
             "description": "The section's collapsible content. Renders below the header; hidden when `[open]` is unset. Author-fills with prose, lists, embedded forms, or any rich markup the panel needs."
           },
+          "caret": {
+            "description": "The disclosure indicator icon. Auto-stamped (a caret-down icon-ui)\nwhen absent — under BOTH the default header and an authored\n[slot=\"header\"]. Author your own [slot=\"caret\"] element (even empty)\nto opt out of the auto-stamp; no separate attribute needed."
+          },
           "header": {
             "description": "Custom header content. By default `[text]` renders as a plain header\nlabel, but a `[slot=\"header\"]` override lets consumers author rich\nheaders (icon + title + action buttons + caret)."
           }
@@ -354,7 +375,24 @@
           ]
         },
         "tag": "accordion-item-ui",
-        "tokens": {},
+        "tokens": {
+          "--accordion-item-bg": {
+            "description": "Item surface background.",
+            "default": "transparent"
+          },
+          "--accordion-item-body-pt": {
+            "description": "Open body top padding.",
+            "default": 0
+          },
+          "--accordion-item-border": {
+            "description": "Item surface border (full shorthand — mirrors --card-border).",
+            "default": "none"
+          },
+          "--accordion-item-divider": {
+            "description": "Border between header and open body when expanded.",
+            "default": "none"
+          }
+        },
         "traits": [],
         "version": 1
       }
@@ -3006,7 +3044,7 @@
     },
     "BillingOverview": {
       "title": "BillingOverview",
-      "description": "Module-tier billing dashboard that stitches the seven Wave A+B\nbilling primitives into the canonical \"all-billing-on-one-page\"\nsurface — current plan + status header, a KPI strip (monthly\nspend · seats · next invoice), an optional dunning banner when the\naccount is past-due, a plan-picker section for in-app plan changes,\na payment-method-list section, and an invoice-history section.\n\nData-driven via the `account` property — an aggregate snapshot of\nthe customer's billing state ({plan, status, billingCycle,\ncurrentSpend, seats, nextInvoiceDate, paymentMethods[],\ninvoices[], dunning?}). The composite stamps a fixed five-region\nskeleton once on first connect — header · kpis · dunning ·\nplan-picker · payment-methods · invoice-history — then mutates\nper-region nodes via id-keyed in-place diff on every property\nchange. Children primitives (plan-picker, payment-method-list,\ninvoice-history, alert-ui) are stamped as composed tags; this\ncomposite owns the orchestration, not the row chrome.\n\nHigher-level account-action event surfaces consumer-actionable\nintents from descendant primitives. Children carrying\n[data-account-action=\"X\"] or descendant events\n(`plan-action`, `payment-action`, `invoice-action`, `dunning-action`)\nare normalised into a single `account-action` event with\n`detail.action` ∈ {change-plan, add-payment-method, pay-now,\ndownload-invoice, update-card, retry, custom}. The composite\ndoes NOT mutate the data source; consumers wire `account-action`\nagainst their billing backend.\n\nDisplay surface. Extends UIElement, not UIFormElement — child\nprimitives are individually form-bearing (plan-picker,\npayment-method-list) while the host is not.\n\nSpec: docs/specs/implementation-ready/SPEC-004-billing-overview.md.\n",
+      "description": "Module-tier billing dashboard that stitches the seven Wave A+B\nbilling primitives into the canonical \"all-billing-on-one-page\"\nsurface — current plan + status header, a KPI strip (monthly\nspend · seats · next invoice), an optional dunning banner when the\naccount is past-due, a plan-picker section for in-app plan changes,\na payment-method-list section, and an invoice-history section.\n\nData-driven via the `account` property — an aggregate snapshot of\nthe customer's billing state ({plan, status, billingCycle,\ncurrentSpend, seats, nextInvoiceDate, paymentMethods[],\ninvoices[], dunning?}). The composite stamps a fixed five-region\nskeleton once on first connect — header · kpis · dunning ·\nplan-picker · payment-methods · invoice-history — then mutates\nper-region nodes via id-keyed in-place diff on every property\nchange. Children primitives (plan-picker, payment-method-list,\ninvoice-history, alert-ui) are stamped as composed tags; this\ncomposite owns the orchestration, not the row chrome.\n\nHigher-level account-action event surfaces consumer-actionable\nintents from descendant primitives. Children carrying\n[data-account-action=\"X\"] or descendant events\n(`plan-action`, `payment-action`, `invoice-action`, `dunning-action`)\nare normalised into a single `account-action` event with\n`detail.action` ∈ {change-plan, add-payment-method, pay-now,\ndownload-invoice, update-card, retry, custom}. The composite\ndoes NOT mutate the data source; consumers wire `account-action`\nagainst their billing backend.\n\nDisplay surface. Extends UIElement, not UIFormElement — child\nprimitives are individually form-bearing (plan-picker,\npayment-method-list) while the host is not.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-004-billing-overview.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -7317,7 +7355,7 @@
     },
     "ConfirmDialog": {
       "title": "ConfirmDialog",
-      "description": "Non-destructive yes/no confirmation dialog — a thin composite over\n<modal-ui> that pre-stamps the canonical confirm shape: header (title\n+ optional icon), body (description + optional rich slot), and\nfooter (cancel + confirm buttons). Wires Cancel-default focus,\nconfirm / cancel / close events, and the [loading] in-flight state.\n\nUse confirm-dialog-ui for benign questions: \"Save changes?\", \"Switch\ntheme?\", \"Apply preset?\". For irreversible destructive operations\n(delete account, drop database, deploy to prod) use <alert-dialog-ui>\ninstead — it carries role=\"alertdialog\", danger chrome, and the\noptional typed-name speed-bump.\n\nComposed primitive: <modal-ui> owns the native <dialog>, focus trap,\nbackdrop, and Escape-dismiss. confirm-dialog-ui decorates; it does\nnot reimplement.\n\nSpec: docs/specs/implementation-ready/SPEC-049-confirm-dialog-yes-no.md.\n",
+      "description": "Non-destructive yes/no confirmation dialog — a thin composite over\n<modal-ui> that pre-stamps the canonical confirm shape: header (title\n+ optional icon), body (description + optional rich slot), and\nfooter (cancel + confirm buttons). Wires Cancel-default focus,\nconfirm / cancel / close events, and the [loading] in-flight state.\n\nUse confirm-dialog-ui for benign questions: \"Save changes?\", \"Switch\ntheme?\", \"Apply preset?\". For irreversible destructive operations\n(delete account, drop database, deploy to prod) use <alert-dialog-ui>\ninstead — it carries role=\"alertdialog\", danger chrome, and the\noptional typed-name speed-bump.\n\nComposed primitive: <modal-ui> owns the native <dialog>, focus trap,\nbackdrop, and Escape-dismiss. confirm-dialog-ui decorates; it does\nnot reimplement.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-049-confirm-dialog-yes-no.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -7678,7 +7716,7 @@
     },
     "DashboardLayout": {
       "title": "DashboardLayout",
-      "description": "Module-tier dashboard-body composite. Crystallizes the recurring\n\"toolbar + KPI grid + chart area + table\" dashboard layout into a\nsingle primitive with four named regions (toolbar / kpis / charts /\ntable) plus an optional aside column. Each region is filled by\nconsumer-supplied <card-ui>s; the composite owns band sizing,\nresponsive breakpoints, and a [density] knob that propagates to\nevery descendant primitive via the parametric --a-density cascade.\n\nSits inside an <admin-page-body>; replaces the hand-rolled\n<col-ui gap=\"4\"> + nested <grid-ui> + <card-ui> chains every\nanalytics consumer reinvents today. Per ADR-0033 (Light-DOM\nsubstrate) — slot= attributes are decorative metadata; CSS rules\nmatch `:scope > [slot=\"X\"]` to position bands in DOM order.\n\nSpec: docs/specs/implementation-ready/SPEC-018-dashboard-layout.md.\n",
+      "description": "Module-tier dashboard-body composite. Crystallizes the recurring\n\"toolbar + KPI grid + chart area + table\" dashboard layout into a\nsingle primitive with four named regions (toolbar / kpis / charts /\ntable) plus an optional aside column. Each region is filled by\nconsumer-supplied <card-ui>s; the composite owns band sizing,\nresponsive breakpoints, and a [density] knob that propagates to\nevery descendant primitive via the parametric --a-density cascade.\n\nSits inside an <admin-page-body>; replaces the hand-rolled\n<col-ui gap=\"4\"> + nested <grid-ui> + <card-ui> chains every\nanalytics consumer reinvents today. Per ADR-0033 (Light-DOM\nsubstrate) — slot= attributes are decorative metadata; CSS rules\nmatch `:scope > [slot=\"X\"]` to position bands in DOM order.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-018-dashboard-layout.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -8243,7 +8281,7 @@
     },
     "DateRangeSelector": {
       "title": "DateRangeSelector",
-      "description": "Page-level \"current time window\" chooser for dashboards. A module-tier\ncomposite that pairs a preset chip-row (Today / 7d / 30d / 90d / QTD /\nYTD / Custom) with an embedded <date-range-picker-ui> and broadcasts\nthe active range to every range-aware panel on the page.\n\nOne chooser, one event bus, every panel follows. The composite owns\nthe range value, resolves preset keys to ISO 8601 from/to pairs, and\nemits a `range-change` CustomEvent on the configured broadcast target\n(default `document`). It also writes `data-range-from` /\n`data-range-to` to that target so CSS-only subscribers can match\nattribute selectors.\n\nUse for dashboard toolbars (typically <dashboard-layout-ui slot=\"toolbar\">\nor <admin-page-header slot=\"action\">). For card-local per-panel\ncomparison overlays, set [broadcast=\"self\"] so the secondary instance\nscopes to its host.\n\nSpec: docs/specs/implementation-ready/SPEC-019-date-range-selector-global.md.\n",
+      "description": "Page-level \"current time window\" chooser for dashboards. A module-tier\ncomposite that pairs a preset chip-row (Today / 7d / 30d / 90d / QTD /\nYTD / Custom) with an embedded <date-range-picker-ui> and broadcasts\nthe active range to every range-aware panel on the page.\n\nOne chooser, one event bus, every panel follows. The composite owns\nthe range value, resolves preset keys to ISO 8601 from/to pairs, and\nemits a `range-change` CustomEvent on the configured broadcast target\n(default `document`). It also writes `data-range-from` /\n`data-range-to` to that target so CSS-only subscribers can match\nattribute selectors.\n\nUse for dashboard toolbars (typically <dashboard-layout-ui slot=\"toolbar\">\nor <admin-page-header slot=\"action\">). For card-local per-panel\ncomparison overlays, set [broadcast=\"self\"] so the secondary instance\nscopes to its host.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-019-date-range-selector-global.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -9053,6 +9091,189 @@
         "version": 1
       }
     },
+    "DisplayField": {
+      "title": "DisplayField",
+      "description": "Display-only labeled value — a field-shaped read-out for a static or masked value (e.g. a card on file \"•••• 4242\"), or a labeled slot that hosts a third-party element (a Stripe Element iframe) under a proper caption. Unlike field-ui it wraps NO interactive control: no focus, no contenteditable, no form participation, no [for]/id-minting. The label names the whole field for assistive tech via role=\"group\" + aria-labelledby, so a slotted foreign element (iframe) is announced with its caption. Reach for field-ui + input-ui when the value is EDITABLE; stat-ui for a prominent metric/KPI; description-list-ui for many read-only key/value pairs at once.",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "component": {
+          "const": "DisplayField"
+        },
+        "hint": {
+          "description": "Optional caption rendered below the value in subtle style (e.g. \"Expires 12/26\"). Wired into the field's aria-describedby.",
+          "type": "string",
+          "default": ""
+        },
+        "icon": {
+          "description": "Optional leading icon name shown beside the value (e.g. a lock or card-brand glyph). Lazily creates a single icon-ui child.",
+          "type": "string",
+          "default": ""
+        },
+        "label": {
+          "description": "The field caption. Names the whole field for assistive tech.",
+          "type": "string",
+          "default": ""
+        },
+        "value": {
+          "description": "The static value text to display (e.g. \"•••• 4242\"). Ignored when the default slot already carries content — slot a foreign element OR set value=, not both.",
+          "type": "string",
+          "default": ""
+        },
+        "variant": {
+          "description": "Cosmetic value treatment. `default` renders the value in the UI font; `masked` switches to the code/mono family with tabular numerals and light letter-spacing so masked strings (\"•••• 4242\") align cleanly. Tokens only — no layout change.",
+          "type": "string",
+          "enum": [
+            "default",
+            "masked"
+          ],
+          "default": "default"
+        }
+      },
+      "required": [
+        "component",
+        "label"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "description": "Using input-ui[readonly] to render a static masked value. A readonly input still carries contenteditable/focus semantics and tab-stops; a display read-out should not be a control.",
+            "right": "<display-field-ui label=\"Card on file\" value=\"•••• 4242\" variant=\"masked\"></display-field-ui>\n",
+            "rule": "A non-editable masked value is display-field-ui, not a readonly input.",
+            "wrong": "<input-ui readonly value=\"•••• 4242\"></input-ui>\n"
+          }
+        ],
+        "category": "form",
+        "composes": [
+          "icon-ui"
+        ],
+        "events": {},
+        "examples": [
+          {
+            "description": "A masked \"card on file\" read-out with a leading lock icon and an expiry hint.",
+            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"DisplayField\",\n    \"label\": \"Card on file\",\n    \"value\": \"•••• •••• •••• 4242\",\n    \"variant\": \"masked\",\n    \"icon\": \"lock\",\n    \"hint\": \"Expires 12/26\"\n  }\n]",
+            "name": "card-on-file"
+          },
+          {
+            "description": "A labeled slot hosting a third-party element (e.g. a Stripe Element mount).",
+            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"DisplayField\",\n    \"label\": \"Card number\",\n    \"children\": [\"mount\"]\n  },\n  { \"id\": \"mount\", \"component\": \"Text\", \"text\": \"[Stripe Element mounts here]\" }\n]",
+            "name": "foreign-element-slot"
+          }
+        ],
+        "keywords": [
+          "display field",
+          "readonly",
+          "read-only",
+          "masked",
+          "mask",
+          "static value",
+          "card on file",
+          "last four",
+          "value",
+          "readout",
+          "stripe element",
+          "iframe slot",
+          "non-editable"
+        ],
+        "name": "UIDisplayField",
+        "related": [
+          "field",
+          "input",
+          "stat",
+          "description-list"
+        ],
+        "slots": {
+          "default": {
+            "description": "The value content. Slot a third-party element here — a Stripe Element iframe mount, or rich markup — and it takes the value region under the label, replacing the [value] attribute. The host's role=\"group\" + aria-labelledby names it for assistive tech."
+          },
+          "hint": {
+            "description": "The hint caption below the value. Auto-stamped from the [hint] attribute; wired into aria-describedby."
+          },
+          "icon": {
+            "description": "The leading icon (a single icon-ui). Auto-stamped from the [icon] attribute."
+          },
+          "label": {
+            "description": "The caption element. Auto-stamped from the [label] attribute; slot your own [slot=\"label\"] child to override with richer markup. It is the group's accessible name (the aria-labelledby target)."
+          },
+          "value": {
+            "description": "The static value element. Auto-stamped from the [value] attribute; suppressed when the default slot carries foreign content."
+          }
+        },
+        "states": [
+          {
+            "description": "Default, non-interactive read-out.",
+            "name": "idle"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "masked": [
+            "display field",
+            "field",
+            "value"
+          ],
+          "readout": [
+            "display field",
+            "stat",
+            "field"
+          ],
+          "value": [
+            "display field",
+            "field",
+            "stat"
+          ]
+        },
+        "tag": "display-field-ui",
+        "tokens": {
+          "--display-field-gap": {
+            "description": "Vertical gap between the label, value, and hint rows."
+          },
+          "--display-field-hint-color": {
+            "description": "Hint foreground color."
+          },
+          "--display-field-hint-size": {
+            "description": "Hint font size."
+          },
+          "--display-field-icon-gap": {
+            "description": "Horizontal gap between the leading icon and the value."
+          },
+          "--display-field-label-color": {
+            "description": "Label foreground color."
+          },
+          "--display-field-label-size": {
+            "description": "Label font size."
+          },
+          "--display-field-label-weight": {
+            "description": "Label font weight."
+          },
+          "--display-field-masked-font": {
+            "description": "Font family applied to a masked value."
+          },
+          "--display-field-masked-tracking": {
+            "description": "Letter-spacing applied to a masked value."
+          },
+          "--display-field-value-color": {
+            "description": "Value foreground color."
+          },
+          "--display-field-value-size": {
+            "description": "Value font size."
+          },
+          "--display-field-value-weight": {
+            "description": "Value font weight."
+          }
+        },
+        "traits": [],
+        "version": 1
+      }
+    },
     "Divider": {
       "title": "Divider",
       "description": "Horizontal or vertical divider with optional label — a semantic\nrule between content groups. Set [vertical] for column dividers\n(typically inside <row-ui>); set [label] for a labeled-rule pattern\nwhere the divider carries a short caption (e.g. \"OR\" between auth\nmethods, \"Today\" between message groups). Distinct from\n<hr data-nav-divider> (which is a CSS hook used by <nav-ui> for nav\nsection separation, not a primitive).\n",
@@ -10290,7 +10511,7 @@
     },
     "Feed": {
       "title": "Feed",
-      "description": "Shared top-layer feed channel. Per docs/specs/feed-channel.md (SPEC-FEED-CHANNEL-001). Per-position singletons mounted lazily into document.body via Popover API; consumers post via the static API (`UIFeed.post()`) or the global 'feed' CustomEvent.",
+      "description": "Shared top-layer feed channel. Per .claude/docs/specs/feed-channel.md (SPEC-FEED-CHANNEL-001). Per-position singletons mounted lazily into document.body via Popover API; consumers post via the static API (`UIFeed.post()`) or the global 'feed' CustomEvent.",
       "type": "object",
       "allOf": [
         {
@@ -12801,7 +13022,7 @@
     },
     "IntegrationsPage": {
       "title": "IntegrationsPage",
-      "description": "Module-tier Settings page composite — a searchable, category-grouped\ngrid of <integration-card-ui> tiles (SPEC-062). Owns the\n`integrations` array, the search-filter state, the category /\nstatus grouping, the responsive grid breakpoints, and the empty-state\ncopy. Card-level events (`connect` / `configure` / `disconnect` /\n`retry`) bubble up unchanged with `provider` in detail; the page also\nemits `search` (debounced) and a top-bar `filter-change` when the\nuser picks a status chip.\n\nLives in `packages/web-modules/settings/integrations-page/` per the\nthree-tier architecture — composes multiple primitives, holds layout\nresponsibility, consumed by the settings shell. Replaces the\nhand-rolled `settings/integrations` HTML template per consumer.\n\nSpec: docs/specs/implementation-ready/SPEC-063-integrations-page.md\n",
+      "description": "Module-tier Settings page composite — a searchable, category-grouped\ngrid of <integration-card-ui> tiles (SPEC-062). Owns the\n`integrations` array, the search-filter state, the category /\nstatus grouping, the responsive grid breakpoints, and the empty-state\ncopy. Card-level events (`connect` / `configure` / `disconnect` /\n`retry`) bubble up unchanged with `provider` in detail; the page also\nemits `search` (debounced) and a top-bar `filter-change` when the\nuser picks a status chip.\n\nLives in `packages/web-modules/settings/integrations-page/` per the\nthree-tier architecture — composes multiple primitives, holds layout\nresponsibility, consumed by the settings shell. Replaces the\nhand-rolled `settings/integrations` HTML template per consumer.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-063-integrations-page.md\n",
       "type": "object",
       "allOf": [
         {
@@ -13073,7 +13294,7 @@
     },
     "InvoiceDetail": {
       "title": "InvoiceDetail",
-      "description": "Module-tier page composite that renders a single invoice — header\n(number + status badge + dates), line-items table, totals block,\ncustomer + remit-to blocks, and a slot-driven action toolbar.\nThe canonical invoice layout shared by billing-enabled products\nso totals math, status-badge color mapping, and action-toolbar\norder do not drift across surfaces.\n\nData-driven via the `invoice` property OR a `data-stream-src`\nendpoint. The composite stamps a six-region skeleton once on\nfirst connect — header · meta · parties · lines · totals ·\nfooter — then mutates per-region nodes via id-keyed in-place\ndiff on every property change. The status badge color maps\nfrom `invoice.status` (paid → success, past-due → warning,\nvoid → muted, open/draft → default). Action buttons are\nconsumer-slotted into `header-actions` per spec OD-002 (always\nslot, never stamp a default toolbar).\n\nPrint-friendly: an internal `@media print` branch hides the\naction toolbar + zeroes the page padding. The composite is a\ndisplay surface — extends UIElement, not UIFormElement.\n\nSpec: docs/specs/implementation-ready/SPEC-007-invoice-detail-page.md.\n",
+      "description": "Module-tier page composite that renders a single invoice — header\n(number + status badge + dates), line-items table, totals block,\ncustomer + remit-to blocks, and a slot-driven action toolbar.\nThe canonical invoice layout shared by billing-enabled products\nso totals math, status-badge color mapping, and action-toolbar\norder do not drift across surfaces.\n\nData-driven via the `invoice` property OR a `data-stream-src`\nendpoint. The composite stamps a six-region skeleton once on\nfirst connect — header · meta · parties · lines · totals ·\nfooter — then mutates per-region nodes via id-keyed in-place\ndiff on every property change. The status badge color maps\nfrom `invoice.status` (paid → success, past-due → warning,\nvoid → muted, open/draft → default). Action buttons are\nconsumer-slotted into `header-actions` per spec OD-002 (always\nslot, never stamp a default toolbar).\n\nPrint-friendly: an internal `@media print` branch hides the\naction toolbar + zeroes the page padding. The composite is a\ndisplay surface — extends UIElement, not UIFormElement.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-007-invoice-detail-page.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -13347,7 +13568,7 @@
     },
     "InvoiceHistory": {
       "title": "InvoiceHistory",
-      "description": "Canonical billing-list composite — a pre-configured <table-ui> with\ninvoice-shaped columns (number, issued, due, amount, status, actions),\nstatus-badge cell renderer (paid/open/past-due/void/draft → semantic\nbadge variant), currency cell renderer, optional search + filter\nchips via <table-toolbar-ui>, and a row-click that navigates to the\ninvoice detail page.\n\nWraps <table-ui> with billing-shaped columns + cell renderers + a\nCSV-export toolbar. Consumer passes invoices[]; the composite owns\ncolumn shape, status-to-badge mapping, currency formatting, date\nformatting, and navigation. Sibling to SPEC-007 (invoice detail).\n\nEach invoice record: {id, number, status, issuedAt, dueAt, amount,\ncurrency}. status MUST be one of \"draft\" | \"open\" | \"paid\" |\n\"past-due\" | \"void\"; unknown values fall back to a neutral badge.\n\nSpec: docs/specs/implementation-ready/SPEC-008-invoice-history-table.md.\n",
+      "description": "Canonical billing-list composite — a pre-configured <table-ui> with\ninvoice-shaped columns (number, issued, due, amount, status, actions),\nstatus-badge cell renderer (paid/open/past-due/void/draft → semantic\nbadge variant), currency cell renderer, optional search + filter\nchips via <table-toolbar-ui>, and a row-click that navigates to the\ninvoice detail page.\n\nWraps <table-ui> with billing-shaped columns + cell renderers + a\nCSV-export toolbar. Consumer passes invoices[]; the composite owns\ncolumn shape, status-to-badge mapping, currency formatting, date\nformatting, and navigation. Sibling to SPEC-007 (invoice detail).\n\nEach invoice record: {id, number, status, issuedAt, dueAt, amount,\ncurrency}. status MUST be one of \"draft\" | \"open\" | \"paid\" |\n\"past-due\" | \"void\"; unknown values fall back to a neutral badge.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-008-invoice-history-table.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -15797,7 +16018,7 @@
     },
     "NotificationPreferences": {
       "title": "NotificationPreferences",
-      "description": "Page-level Settings composite: a matrix of notification types (rows)\n× delivery channels (columns: in-app, email, SMS) with a binary\n<check-ui> in each cell and an optional <switch-ui> column-header\nmaster toggle for bulk-flipping a channel across every row.\n\nForm-bearing — the composite extends UIFormElement and serializes its\ncurrent preferences shape as JSON on `value`. Per first-principle #2\n(\"save is the consumer's job\"), the composite does NOT mutate the\npassed-in `preferences` array; it emits a typed `change` event per\ncell toggle and a `bulk-toggle` event per column-header switch, and\nexposes the staged JSON via the form value so a host <form> submit\ncarries it through ElementInternals.\n\nChannels are columns; types are rows (the smaller-set / larger-set\ninvariant — channels are 3-5 in the wild, types are 10-50). Layout\nrenders as a semantic ARIA grid (`role=\"table\"`/`row`/`cell`/\n`rowheader`/`columnheader`) — NOT native `<table>` (per the HTML\nparser strip rule, table-content tags would foster-parent out of a\ncustom-element subtree).\n\nSpec: docs/specs/implementation-ready/SPEC-064-notification-preferences.md.\n",
+      "description": "Page-level Settings composite: a matrix of notification types (rows)\n× delivery channels (columns: in-app, email, SMS) with a binary\n<check-ui> in each cell and an optional <switch-ui> column-header\nmaster toggle for bulk-flipping a channel across every row.\n\nForm-bearing — the composite extends UIFormElement and serializes its\ncurrent preferences shape as JSON on `value`. Per first-principle #2\n(\"save is the consumer's job\"), the composite does NOT mutate the\npassed-in `preferences` array; it emits a typed `change` event per\ncell toggle and a `bulk-toggle` event per column-header switch, and\nexposes the staged JSON via the form value so a host <form> submit\ncarries it through ElementInternals.\n\nChannels are columns; types are rows (the smaller-set / larger-set\ninvariant — channels are 3-5 in the wild, types are 10-50). Layout\nrenders as a semantic ARIA grid (`role=\"table\"`/`row`/`cell`/\n`rowheader`/`columnheader`) — NOT native `<table>` (per the HTML\nparser strip rule, table-content tags would foster-parent out of a\ncustom-element subtree).\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-064-notification-preferences.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -17382,7 +17603,7 @@
     },
     "PaymentMethodForm": {
       "title": "PaymentMethodForm",
-      "description": "Form-participating composite for capturing a payment method —\ncard number, expiry, CVC, name on card, billing address (optional),\nand country. The form chrome + structured validation + a single\nnormalized emit event; it does NOT integrate with Stripe Elements\nor a tokenization SDK directly (consumer responsibility).\n\nEach sub-field is a <field-ui> wrapper around an <input-ui> (or\n<select-ui> for country). Card number is Luhn-validated; expiry is\nparsed as MM/YY with month + year bounds; CVC is 3-4 digits.\nBrand detection (visa / mastercard / amex / discover) runs against\na small regex map and surfaces via the `change` event detail.\n\nForm value is a JSON-encoded payload of normalized field values\nserialized through ElementInternals under [name] (default\n\"paymentMethod\"). On submit, the host fires\n`submit-payment-method` with a flat detail\n`{ token, last4, brand, expMonth, expYear, name, country }`.\n`token` is a synthetic local-mode token (sha-like opaque string);\nconsumers integrating with a real processor handle tokenization\nin their own submit listener using `last4` / `brand` / etc.\n\nSpec: docs/specs/implementation-ready/SPEC-009-payment-method-form.md.\n",
+      "description": "Form-participating composite for capturing a payment method —\ncard number, expiry, CVC, name on card, billing address (optional),\nand country. The form chrome + structured validation + a single\nnormalized emit event; it does NOT integrate with Stripe Elements\nor a tokenization SDK directly (consumer responsibility).\n\nEach sub-field is a <field-ui> wrapper around an <input-ui> (or\n<select-ui> for country). Card number is Luhn-validated; expiry is\nparsed as MM/YY with month + year bounds; CVC is 3-4 digits.\nBrand detection (visa / mastercard / amex / discover) runs against\na small regex map and surfaces via the `change` event detail.\n\nForm value is a JSON-encoded payload of normalized field values\nserialized through ElementInternals under [name] (default\n\"paymentMethod\"). On submit, the host fires\n`submit-payment-method` with a flat detail\n`{ token, last4, brand, expMonth, expYear, name, country }`.\n`token` is a synthetic local-mode token (sha-like opaque string);\nconsumers integrating with a real processor handle tokenization\nin their own submit listener using `last4` / `brand` / etc.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-009-payment-method-form.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -17685,7 +17906,7 @@
     },
     "PaymentMethodList": {
       "title": "PaymentMethodList",
-      "description": "Compound billing primitive that renders the user's saved payment\nmethods (cards, bank accounts, wallets) as a vertical list with one\nrow designated as the default. Each row shows a brand mark, the\nlast-4 / account identifier, an optional expiry, and per-row actions\n(set-default / edit / remove). A trailing \"Add payment method\" CTA\nemits `add` so consumers can route the consumer flow.\n\nDefault is a strict 1-of-N radiogroup — exactly one row carries the\ndefault state when the list is non-empty. The primitive does NOT\nmutate the data source; all changes flow as events (`change`,\n`add`, `remove`, `select`) and the consumer applies the side\neffect against their billing API.\n\nSpec: docs/specs/implementation-ready/SPEC-010-payment-method-list.md.\n",
+      "description": "Compound billing primitive that renders the user's saved payment\nmethods (cards, bank accounts, wallets) as a vertical list with one\nrow designated as the default. Each row shows a brand mark, the\nlast-4 / account identifier, an optional expiry, and per-row actions\n(set-default / edit / remove). A trailing \"Add payment method\" CTA\nemits `add` so consumers can route the consumer flow.\n\nDefault is a strict 1-of-N radiogroup — exactly one row carries the\ndefault state when the list is non-empty. The primitive does NOT\nmutate the data source; all changes flow as events (`change`,\n`add`, `remove`, `select`) and the consumer applies the side\neffect against their billing API.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-010-payment-method-list.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -18066,7 +18287,7 @@
     },
     "PlanPicker": {
       "title": "PlanPicker",
-      "description": "A form-participating chooser of one of N billing plans. The canonical\nplan-card grid used by both in-app upgrade modals and marketing\npricing pages (SPEC-012 composes this primitive as its core), so\nbenefit copy, pricing strings, recommendation highlighting, and the\nbilling-cycle toggle never drift between surfaces.\n\nEach plan record carries a stable id, name, optional tagline + icon,\na per-cycle price object, a feature list, and optional flags\n(recommended, rank, disabled). One plan may carry recommended:true\n(accent border + tinted bg + shadow); a host-level `current` id\nmarks the user's current plan (muted bg, \"Current plan\" tag, no\nChoose CTA, contextual \"Upgrade\"/\"Downgrade\" labels on siblings).\n\nLayout is grid by default (marketing surfaces) and `layout=\"list\"`\nfor in-app settings panels. The optional `cycle-toggle` boolean\nrenders an internal <segmented-ui> that swaps prices between\nmonthly and annual cycles in place across every card.\n\nSpec: docs/specs/implementation-ready/SPEC-011-plan-picker-in-app-upgrade.md.\n",
+      "description": "A form-participating chooser of one of N billing plans. The canonical\nplan-card grid used by both in-app upgrade modals and marketing\npricing pages (SPEC-012 composes this primitive as its core), so\nbenefit copy, pricing strings, recommendation highlighting, and the\nbilling-cycle toggle never drift between surfaces.\n\nEach plan record carries a stable id, name, optional tagline + icon,\na per-cycle price object, a feature list, and optional flags\n(recommended, rank, disabled). One plan may carry recommended:true\n(accent border + tinted bg + shadow); a host-level `current` id\nmarks the user's current plan (muted bg, \"Current plan\" tag, no\nChoose CTA, contextual \"Upgrade\"/\"Downgrade\" labels on siblings).\n\nLayout is grid by default (marketing surfaces) and `layout=\"list\"`\nfor in-app settings panels. The optional `cycle-toggle` boolean\nrenders an internal <segmented-ui> that swaps prices between\nmonthly and annual cycles in place across every card.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-011-plan-picker-in-app-upgrade.md.\n",
       "type": "object",
       "allOf": [
         {
@@ -24838,7 +25059,7 @@
     },
     "ThemePanel": {
       "title": "ThemePanel",
-      "description": "Module-tier appearance-preferences control surface. Owns the three knobs\nof the AdiaUI theming contract: [theme=<slug>] named themes,\n--a-density / --a-radius-k parametric overrides, and color-scheme\nlight/dark switching, plus optional localStorage persistence behind a\nsmall attribute API.\n\nDrops into any consumer's <popover-ui slot=\"content\"> (the canonical\ncomposition) or directly into a sidebar section. Eight named themes\nship by default; section visibility flips on/off via boolean attributes\n([parametric], [presets], [scheme-toggle]).\n\nPromoted from the duplicated <div id=\"theme-panel\"> block in site/ and\nplaygrounds/admin-shell/ — see docs/specs/theme-panel-module.md.\n",
+      "description": "Module-tier appearance-preferences control surface. Owns the three knobs\nof the AdiaUI theming contract: [theme=<slug>] named themes,\n--a-density / --a-radius-k parametric overrides, and color-scheme\nlight/dark switching, plus optional localStorage persistence behind a\nsmall attribute API.\n\nDrops into any consumer's <popover-ui slot=\"content\"> (the canonical\ncomposition) or directly into a sidebar section. Eight named themes\nship by default; section visibility flips on/off via boolean attributes\n([parametric], [presets], [scheme-toggle]).\n\nPromoted from the duplicated <div id=\"theme-panel\"> block in site/ and\nplaygrounds/admin-shell/ — see .claude/docs/specs/theme-panel-module.md.\n",
       "type": "object",
       "allOf": [
         {

package/catalog-a2ui_0_9_rules.txt

@@ -8,11 +8,13 @@
 - Child of <accordion-ui> — places one collapsible section with header + body.
 - Toggle behavior: click anywhere on the row toggles, unless inside [slot='actions'] or [data-no-toggle].
 - For single-button disclosures (one expanding panel without a list) use <details>/<summary> or compose <button-ui> + <section-ui>.
+- An item inherits its host accordion-ui's [variant]; set variant="flat" or variant="contained" directly on ONE item to override just that item against the host.
 
 ## Accordion
 - Hosts <accordion-item-ui> children. One or more sections may be open simultaneously (set single= to enforce only-one-open).
 - For tab-switched panels (always exactly one open) use <tabs-ui>; accordion supports zero-open and multi-open.
 - Item ordering is DOM-order; no auto-sort.
+- Set variant="contained" for a bounded per-item surface (background, border, radius, and an open-state divider) — the composition to reach for when nesting inside <card-ui>. Default variant="flat" (no chrome) suits settings pages and FAQ blocks sitting on the page canvas.
 
 ## ActionItem
 - Child of <action-list-ui> — one inline-action row with icon + label + optional shortcut + optional sublabel.
@@ -229,6 +231,11 @@
 - Do not use for editable forms — use <fields-ui> instead.
 - Pairs render as label + value on the same row by default; use vertical variant for narrow panes.
 
+## DisplayField
+- Use for a display-ONLY labeled value — a masked card number, a 'card on file' read-out, an account id — anywhere a value reads as a field but must not be editable.
+- To host a third-party element (a Stripe Element iframe) under a label, slot it as the default child instead of setting value=. The label names it via role=group + aria-labelledby.
+- For an editable field use field-ui + input-ui; for a prominent KPI use stat-ui; for many read-only pairs at once use description-list-ui.
+
 ## Divider
 - Use to separate visually distinct sections within a container; horizontal default, vertical via orientation='vertical'.
 - Inside menus / popovers use <menu-divider-ui> instead; it has menu-specific token spacing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/a2ui-corpus",
-  "version": "0.7.23",
+  "version": "0.7.25",
   "type": "module",
   "description": "AdiaUI A2UI training corpus \u2014 canonical v0.9 catalog + chunks + eval fixtures + feedback + gap registry. Consumed by the compose engine's retrieval layer + the MCP pipeline.",
   "exports": {

package/scripts/chunk-library.js

@@ -8,7 +8,7 @@
  *   - packages/a2ui/mcp/server.js — exposes search_chunks / get_chunk / lookup_chunk tools
  *   - packages/a2ui/compose/strategies/zettel/chunk-synthesizer.js — Phase C.2
  *
- * Spec: docs/specs/genui-chunk-marker.md (Draft v0.1.0).
+ * Spec: .claude/docs/specs/genui-chunk-marker.md (Draft v0.1.0).
  */
 
 import { readFileSync, readdirSync, existsSync } from 'node:fs';