@adia-ai/web-modules 0.8.40 → 0.8.41

package/billing/invoice-history/invoice-history.a2ui.json

@@ -27,14 +27,14 @@
       "default": ""
     },
     "density": {
-      "description": "Row density, forwarded to <table-ui>. `compact` for dense lists,\n`standard` for default rows, `comfortable` for spacious rows.\n",
+      "description": "Row density, forwarded to <table-ui>. `compact` for dense lists,\n`spacious` for airier rows, unset (default) for standard rows.\nConverged onto the global `[density]` Enum·preset vocabulary\n(gh#1335) — `standard` retired (never a real state) and\n`comfortable` renamed to `spacious` (ADR-0054's own migration\nmapping).\n",
       "type": "string",
       "enum": [
+        "",
         "compact",
-        "standard",
-        "comfortable"
+        "spacious"
       ],
-      "default": "standard"
+      "default": ""
     },
     "exportable": {
       "description": "When set, the default toolbar carries an \"Export CSV\" button.\nConsumers overriding the toolbar via slot=\"toolbar\" can omit\nthis and stamp their own export affordance.\n",
@@ -96,6 +96,8 @@
     "composes": [
       "table-ui",
       "table-toolbar-ui",
+      "card-ui",
+      "row-ui",
       "badge-ui",
       "button-ui",
       "empty-state-ui",
@@ -210,6 +212,7 @@
       "export-invoices"
     ],
     "name": "InvoiceHistory",
+    "parts": {},
     "related": [
       "Table",
       "TableToolbar",

package/billing/invoice-history/invoice-history.class.js

@@ -12,9 +12,12 @@
  *
  * Architecture (light-DOM, ADR-0033):
  *   This composite stamps a three-region skeleton once on first connect:
- *     [data-toolbar] (slot toolbar / default toolbar)
- *     [data-table]   (the <table-ui>)
- *     [data-empty]   (default <empty-state-ui> branch)
+ *     [data-toolbar]    (slot toolbar / default toolbar; filter chips
+ *                        live in a <row-ui data-invoice-filter>)
+ *     [data-table-host] (a <card-ui> wrapping <section bleed> wrapping
+ *                        the <table-ui> — the canonical invoices-card
+ *                        grammar from billing.contents.html, gh#1519)
+ *     [data-empty]      (default <empty-state-ui> branch)
  *   Then mutates the table's `.data` / `.columns` on every render. The
  *   table primitive owns row stamping; this composite only wires its
  *   inputs and converts cell renderers.
@@ -121,15 +124,14 @@ function csvEscape(val) {
 }
 
 /**
- * Translate invoice-history-ui's own `density` vocabulary (compact/standard/
- * comfortable, unchanged public API) onto table-ui's global [density]
- * grammar (ADR-0054): compact stays compact, standard is the absent
- * attribute, comfortable becomes spacious. Returns null for "no attribute".
+ * Translate invoice-history-ui's own `density` onto table-ui's global
+ * [density] grammar (ADR-0054). gh#1335 — the vocabulary now IS the
+ * global one (compact/spacious/unset): identity passthrough for a real
+ * value, anything else is the absent attribute. Returns null for "no
+ * attribute".
  */
 function mapDensity(density) {
-  if (density === 'compact') return 'compact';
-  if (density === 'comfortable') return 'spacious';
-  return null;
+  return density === 'compact' || density === 'spacious' ? density : null;
 }
 
 function forwardDensity(tableEl, density) {
@@ -142,7 +144,7 @@ export class InvoiceHistory extends UIElement {
   static properties = {
     invoices:    { type: Array,   default: [] },
     currency:    { type: String,  default: 'USD',                   reflect: true },
-    density:     { type: String,  default: 'standard',              reflect: true },
+    density:     { type: String,  default: '',                      reflect: true },
     loading:     { type: Boolean, default: false,                   reflect: true },
     selectable:  { type: Boolean, default: false,                   reflect: true },
     hrefPattern: { type: String,  default: '/invoices/{number}',    reflect: true, attribute: 'href-pattern' },
@@ -163,10 +165,10 @@ export class InvoiceHistory extends UIElement {
   #cleanups = [];
   #toolbarHost = null;       // <div data-toolbar>
   #defaultToolbar = null;    // <table-toolbar-ui> (when no slot=toolbar provided)
-  #filterChipsHost = null;   // <div data-invoice-filter>
+  #filterChipsHost = null;   // <row-ui data-invoice-filter>
   #exportBtn = null;         // <button-ui data-export>
-  #tableHost = null;         // <div data-table-host>
-  #table = null;             // <table-ui>
+  #tableHost = null;         // <card-ui data-table-host>
+  #table = null;             // <table-ui> (inside <section bleed>)
   #emptyHost = null;         // <empty-state-ui data-empty>
   #internalUpdate = false;
   #loadCount = 0;            // monotonic guard against stale fetches
@@ -377,9 +379,12 @@ export class InvoiceHistory extends UIElement {
       tt.setAttribute('data-default-toolbar', '');
       tt.setAttribute('text', 'Invoices');
       // Status-filter chips live in the [slot="actions"] region so they
-      // sit alongside the toolbar's title + search affordances.
-      const chips = document.createElement('div');
+      // sit alongside the toolbar's title + search affordances. The
+      // cluster is a <row-ui> (framework layout primitive, gh#1519).
+      const chips = document.createElement('row-ui');
       chips.setAttribute('data-invoice-filter', '');
+      chips.setAttribute('gap', '2');
+      chips.setAttribute('wrap', '');
       chips.setAttribute('role', 'group');
       chips.setAttribute('aria-label', 'Filter invoices by status');
       chips.setAttribute('slot', 'actions');
@@ -401,16 +406,22 @@ export class InvoiceHistory extends UIElement {
     }
 
     // ── Table region ───────────────────────────────────────────────
-    const tableHost = document.createElement('div');
+    // Canonical invoices-card grammar (billing.contents.html):
+    //   <card-ui><section bleed><table-ui sortable></table-ui></section></card-ui>
+    const tableHost = document.createElement('card-ui');
     tableHost.setAttribute('data-table-host', '');
     this.appendChild(tableHost);
     this.#tableHost = tableHost;
 
+    const tableSection = document.createElement('section');
+    tableSection.setAttribute('bleed', '');
+    tableHost.appendChild(tableSection);
+
     const table = document.createElement('table-ui');
     table.id = this.id ? `${this.id}__table` : `invoice-history-${Math.random().toString(36).slice(2, 8)}`;
     table.setAttribute('data-invoice-table', '');
     table.setAttribute('sortable', '');
-    tableHost.appendChild(table);
+    tableSection.appendChild(table);
     this.#table = table;
 
     // Wire the default toolbar to this table by id.

package/billing/invoice-history/invoice-history.css

@@ -1,10 +1,12 @@
 /* ═══════════════════════════════════════════════════════════════
    <invoice-history-ui> — Canonical billing-list composite.
 
-   Composite over <table-ui> + <table-toolbar-ui> + <badge-ui> +
-   <button-ui> + <empty-state-ui>. The host stacks three regions in
-   DOM order: toolbar · table · empty-state. Each row in the table
-   is owned by <table-ui>; this composite only styles its own
+   Composite over <table-ui> + <table-toolbar-ui> + <card-ui> +
+   <row-ui> + <badge-ui> + <button-ui> + <empty-state-ui>. The host
+   stacks three regions in DOM order: toolbar · table card · empty-
+   state. The table card is the canonical invoices grammar —
+   <card-ui><section bleed><table-ui> (gh#1519). Each row in the
+   table is owned by <table-ui>; this composite only styles its own
    region scaffolding + cell-internal billing chrome (status badge,
    amount alignment, action cluster).
 
@@ -40,9 +42,10 @@ invoice-history-ui {
     background: var(--invoice-history-bg);
   }
 
-  /* ── Region stacking (toolbar · table · empty) ── */
+  /* ── Region stacking (toolbar · table card · empty) ──
+     [data-table-host] is a <card-ui> since gh#1519 — card-ui's own
+     @scope owns its display/chrome; don't override it here. */
   :scope > [data-toolbar],
-  :scope > [data-table-host],
   :scope > [data-empty] {
     display: block;
   }
@@ -51,12 +54,11 @@ invoice-history-ui {
     margin-block-end: var(--invoice-history-gap);
   }
 
-  /* Status-filter chip cluster lives in the toolbar's actions slot. */
+  /* Status-filter chip cluster — a <row-ui wrap> in the toolbar's
+     actions slot; forward this composite's gap token into row-ui's
+     own contract. */
   :scope [data-invoice-filter] {
-    display: inline-flex;
-    flex-wrap: wrap;
-    gap: var(--invoice-history-filter-gap);
-    align-items: center;
+    --row-gap: var(--invoice-history-filter-gap);
   }
 
   /* ── Underlying table cascade ── */
@@ -64,7 +66,7 @@ invoice-history-ui {
      @scope assigns `display: grid` + sets `grid-template-columns` via
      JS; overriding the display collapses the grid into a single
      column. (Caught in v0.6.34 dogfood-sweep visual probe.) */
-  :scope > [data-table-host] > table-ui {
+  :scope > [data-table-host] table-ui {
     --table-row-h: var(--invoice-history-row-min-height);
     width: 100%;
   }
@@ -120,11 +122,12 @@ invoice-history-ui {
     --empty-state-icon-fg: var(--a-danger-strong, var(--md-sys-color-danger));
   }
 
-  /* ── Compact density forwards to the table primitive ── */
+  /* ── Density forwards to the table primitive (gh#1335 — `comfortable`
+     renamed to `spacious`, converged onto the global [density] grammar) ── */
   :scope[density="compact"] {
     --invoice-history-row-min-height: var(--table-row-h-compact, 2.25rem);
   }
-  :scope[density="comfortable"] {
-    --invoice-history-row-min-height: var(--table-row-h-comfortable, 3.5rem);
+  :scope[density="spacious"] {
+    --invoice-history-row-min-height: var(--table-row-h-spacious, 3.5rem);
   }
 }

package/billing/invoice-history/invoice-history.yaml

@@ -31,6 +31,8 @@ description: |
 composes:
   - table-ui
   - table-toolbar-ui
+  - card-ui
+  - row-ui
   - badge-ui
   - button-ui
   - empty-state-ui
@@ -59,13 +61,17 @@ props:
   density:
     description: |
       Row density, forwarded to <table-ui>. `compact` for dense lists,
-      `standard` for default rows, `comfortable` for spacious rows.
+      `spacious` for airier rows, unset (default) for standard rows.
+      Converged onto the global `[density]` Enum·preset vocabulary
+      (gh#1335) — `standard` retired (never a real state) and
+      `comfortable` renamed to `spacious` (ADR-0054's own migration
+      mapping).
     type: string
-    default: standard
+    default: ""
     enum:
+      - ""
       - compact
-      - standard
-      - comfortable
+      - spacious
     reflect: true
 
   loading:

package/billing/payment-method-form/payment-method-form.a2ui.json

@@ -195,6 +195,7 @@
       "add-card"
     ],
     "name": "UIPaymentMethodForm",
+    "parts": {},
     "related": [
       "Form",
       "Field",

package/billing/payment-method-form/payment-method-form.class.js

@@ -22,7 +22,7 @@
  *
  * Architecture (light-DOM, ADR-0033):
  *   Stamps a fixed skeleton once on first connect:
- *     [data-alert] · [data-summary] · [data-grid > field rows] · [data-legal]
+ *     [data-alert] · [data-summary] · [data-field-grid > field rows] · [data-legal]
  *   Mutates per-field state via reflected attributes on each sub-control.
  *   No template rebuilds across renders — field nodes keep identity so
  *   focus + IME composition state survive.
@@ -207,7 +207,7 @@ export class UIPaymentMethodForm extends UIFormElement {
   #alertHost = null;       // <alert-ui data-alert>
   #summaryHost = null;     // <div data-summary>
   #editButton = null;      // <button-ui> inside summary
-  #gridHost = null;        // <div data-grid>
+  #gridHost = null;        // <div data-field-grid>
 
   // Per-row <field-ui> hosts (keyed by field name).
   #fields = {
@@ -434,7 +434,7 @@ export class UIPaymentMethodForm extends UIFormElement {
 
     // Grid host.
     const grid = document.createElement('div');
-    grid.setAttribute('data-grid', '');
+    grid.setAttribute('data-field-grid', '');
     this.appendChild(grid);
     this.#gridHost = grid;
 

package/billing/payment-method-form/payment-method-form.css

@@ -82,23 +82,23 @@ payment-method-form-ui {
   }
 
   /* ── Field grid ── */
-  :scope > [data-grid] {
+  :scope > [data-field-grid] {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-areas: var(--payment-method-form-grid-template);
     gap: var(--payment-method-form-gap);
   }
-  :scope > [data-grid][hidden] {
+  :scope > [data-field-grid][hidden] {
     display: none;
   }
 
-  :scope[require-billing-address] > [data-grid] {
+  :scope[require-billing-address] > [data-field-grid] {
     grid-template-areas: var(--payment-method-form-grid-template-billing);
   }
 
   /* Hidden rows (address lines when require-billing-address is unset)
      collapse out of the grid without affecting sibling cell flow. */
-  :scope > [data-grid] > field-ui[hidden] {
+  :scope > [data-field-grid] > field-ui[hidden] {
     display: none;
   }
 

package/billing/payment-method-list/payment-method-list.a2ui.json

@@ -80,6 +80,9 @@
     "category": "input",
     "composes": [
       "card-ui",
+      "col-ui",
+      "row-ui",
+      "divider-ui",
       "button-ui",
       "icon-ui",
       "tag-ui",
@@ -161,6 +164,7 @@
       "method-list"
     ],
     "name": "PaymentMethodList",
+    "parts": {},
     "related": [
       "PlanPicker",
       "Card",

package/billing/payment-method-list/payment-method-list.class.js

@@ -12,9 +12,12 @@
  * Sibling: <plan-picker-ui> (same id-keyed-diff pattern)
  *
  * Architecture (light-DOM, ADR-0033):
- *   This composite stamps a three-region skeleton once on first
- *   connect:
- *     [data-rows] · [data-empty] · [data-add]
+ *   This composite stamps a region skeleton once on first connect:
+ *     [data-rows] (a <col-ui> stack) · [data-empty] ·
+ *     [data-add-divider] · [data-add] (a <row-ui>)
+ *   The rows host and add row are framework layout primitives
+ *   (col-ui / row-ui / divider-ui — gh#1519), mirroring the canonical
+ *   billing page's layout-primitive grammar instead of raw divs.
  *   Then mutates per-row DOM by id-keyed in-place diff on every
  *   `methods` / `value` write. The diff preserves identity across
  *   re-renders (id-keyed map) so focus survives unrelated row updates.
@@ -162,9 +165,10 @@ export class PaymentMethodList extends UIFormElement {
   // ── Field refs ────────────────────────────────────────────────────
   #stamped = false;
   #cleanups = [];
-  #rowsHost = null;           // <div data-rows role=presentation>
+  #rowsHost = null;           // <col-ui data-rows role=presentation>
   #emptyHost = null;          // <empty-state-ui data-empty>
-  #addHost = null;            // <div data-add>
+  #addHost = null;            // <row-ui data-add>
+  #addDivider = null;         // <divider-ui data-add-divider>
   #addButton = null;          // <button-ui> inside #addHost
   #rowsById = new Map();      // id → <card-ui>
   #internalUpdate = false;
@@ -288,10 +292,14 @@ export class PaymentMethodList extends UIFormElement {
       this.removeAttribute('empty');
     }
 
-    // Add-CTA visibility.
+    // Add-CTA visibility (the divider tracks the add row, and also
+    // hides when the rows list is empty — nothing to divide).
     if (this.#addHost) {
       this.#addHost.hidden = !!this['no-add'];
     }
+    if (this.#addDivider) {
+      this.#addDivider.hidden = !!this['no-add'] || methods.length === 0;
+    }
     if (this.#addButton) {
       this.#addButton.setAttribute('text', this['add-label'] || 'Add payment method');
       const icon = this['add-icon'] || 'plus';
@@ -332,10 +340,12 @@ export class PaymentMethodList extends UIFormElement {
   }
 
   #stamp() {
-    // Rows host — the radiogroup container for the method cards.
-    // role="presentation" because the outer host carries radiogroup.
-    const rows = document.createElement('div');
+    // Rows host — a <col-ui> stack (framework layout primitive) that
+    // the method cards live in as DIRECT children. role="presentation"
+    // because the outer host carries radiogroup.
+    const rows = document.createElement('col-ui');
     rows.setAttribute('data-rows', '');
+    rows.setAttribute('gap', '2');
     rows.setAttribute('role', 'presentation');
     this.appendChild(rows);
     this.#rowsHost = rows;
@@ -351,9 +361,19 @@ export class PaymentMethodList extends UIFormElement {
       this.#emptyHost = empty;
     }
 
-    // Add CTA host — overridable via slot="add".
-    const addHost = document.createElement('div');
+    // Divider between the rows list and the add CTA — the canonical
+    // grammar divides a list from its trailing action group
+    // (billing.contents.html drawer footers). Hidden alongside the
+    // add row via CSS ([empty] / [no-add]).
+    const addDivider = document.createElement('divider-ui');
+    addDivider.setAttribute('data-add-divider', '');
+    this.appendChild(addDivider);
+    this.#addDivider = addDivider;
+
+    // Add CTA host — a <row-ui>; overridable via slot="add".
+    const addHost = document.createElement('row-ui');
     addHost.setAttribute('data-add', '');
+    addHost.setAttribute('gap', '2');
     this.appendChild(addHost);
     this.#addHost = addHost;
 

package/billing/payment-method-list/payment-method-list.css

@@ -2,8 +2,9 @@
    <payment-method-list-ui> — Saved payment methods (cards / bank /
    wallet) rendered as a 1-of-N radiogroup list.
 
-   Composite over <card-ui> + <icon-ui> + <tag-ui> + <button-ui> +
-   <empty-state-ui>. Each row is a <card-ui data-row> with a single
+   Composite over <card-ui> + <col-ui> + <row-ui> + <divider-ui> +
+   <icon-ui> + <tag-ui> + <button-ui> + <empty-state-ui>. Each row is
+   a <card-ui data-row> with a single
    <header> child carrying the canonical card-ui slot composition:
      slot=icon       brand mark
      slot=heading    "Visa ···· 4242" + inline <tag-ui> when default
@@ -43,11 +44,10 @@ payment-method-list-ui {
     background: var(--payment-method-list-bg);
   }
 
-  /* ── Rows host — column stack of <card-ui> rows ── */
+  /* ── Rows host — a <col-ui> stack of <card-ui> rows; forward this
+        composite's gap token into col-ui's own contract. ── */
   :scope > [data-rows] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--payment-method-list-gap);
+    --col-gap: var(--payment-method-list-gap);
   }
 
   /* ── Per-row card — chrome only; card-ui owns layout via <header>. ── */
@@ -87,12 +87,15 @@ payment-method-list-ui {
     display: none;
   }
 
-  /* ── Add CTA row ── */
+  /* ── Add CTA row — a <row-ui>; forward the justify token. ── */
   :scope > [data-add] {
-    display: flex;
-    justify-content: var(--payment-method-list-add-justify);
+    --row-justify: var(--payment-method-list-add-justify);
+  }
+  :scope > [data-add][hidden],
+  :scope > [data-add-divider][hidden] {
+    display: none;
   }
-  :scope > [data-add][hidden] {
+  :scope[empty] > [data-add-divider] {
     display: none;
   }
 

package/billing/payment-method-list/payment-method-list.yaml

@@ -27,6 +27,9 @@ description: |
 # .html demo shell) must explicitly side-effect-import each one.
 composes:
   - card-ui
+  - col-ui
+  - row-ui
+  - divider-ui
   - button-ui
   - icon-ui
   - tag-ui

package/billing/plan-picker/plan-picker.a2ui.json

@@ -100,6 +100,11 @@
       "option-card-ui",
       "segmented-ui",
       "segment-ui",
+      "field-ui",
+      "grid-ui",
+      "col-ui",
+      "row-ui",
+      "divider-ui",
       "button-ui",
       "icon-ui",
       "text-ui",
@@ -201,6 +206,7 @@
       "plan-selection"
     ],
     "name": "PlanPicker",
+    "parts": {},
     "related": [
       "OptionCard",
       "Segmented",

package/billing/plan-picker/plan-picker.class.js

@@ -5,15 +5,25 @@
  * marketing pricing page (SPEC-012). Each plan card is composed from
  * <option-card-ui> (radio semantics) decorated with a price block,
  * feature list, and CTA button derived from the plan record. The
- * optional cycle toggle is a <segmented-ui> that swaps monthly /
- * annual prices in place across every card.
+ * optional cycle toggle is a <field-ui label="Billing interval">
+ * wrapping a <segmented-ui> — the canonical billing-interval chain
+ * from apps/saas/app/billing/billing.contents.html — that swaps
+ * monthly / annual prices in place across every card.
+ *
+ * Internal layout composes the framework layout primitives (gh#1519):
+ * the plans host is a <grid-ui columns="auto-fit">, each card body is
+ * a <col-ui> of <row-ui data-price-row> + <divider-ui> + a
+ * <col-ui data-features> of <row-ui> feature lines — mirroring the
+ * canonical's col-ui/row-ui feature-list grammar instead of raw
+ * div/ul/li.
  *
  * SPEC: .claude/docs/specs/implementation-ready/SPEC-011-plan-picker-in-app-upgrade.md
  * WAI-APG: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  *
  * Architecture (light-DOM, ADR-0033):
- *   This composite stamps a four-region skeleton once on first connect:
- *     [data-toggle] · [data-plans] · [data-skeleton] · [data-empty]
+ *   This composite stamps a region skeleton once on first connect:
+ *     [data-toggle] · [data-toggle-divider] · [data-plans] ·
+ *     [data-skeleton] · [data-empty]
  *   Then mutates per-card DOM by id-keyed in-place diff on every
  *   `plans` / `value` / `current` / `cycle` change. The diff preserves
  *   focus-within during re-render (replacing children would break the
@@ -116,8 +126,10 @@ export class PlanPicker extends UIFormElement {
   #stamped = false;
   #cleanups = [];
   #toggleHost = null;        // <div data-toggle> wrapper
-  #toggleSegmented = null;   // <segmented-ui> inside toggle host
-  #plansHost = null;         // <div data-plans role=radiogroup>
+  #toggleField = null;       // <field-ui> inside toggle host (canonical chain)
+  #toggleSegmented = null;   // <segmented-ui> inside the field
+  #toggleDivider = null;     // <divider-ui data-toggle-divider> after the toggle
+  #plansHost = null;         // <grid-ui data-plans role=presentation>
   #skeletonHost = null;      // <div data-skeleton>
   #emptyHost = null;         // <empty-state-ui data-empty>
   #cardsById = new Map();    // id → <option-card-ui>
@@ -285,10 +297,11 @@ export class PlanPicker extends UIFormElement {
       this.removeAttribute('empty');
     }
 
-    // Toggle visibility / contents.
+    // Toggle visibility / contents (divider tracks the toggle).
     if (this.#toggleHost) {
       const show = this.cycleToggle && plans.length > 0;
       this.#toggleHost.hidden = !show;
+      if (this.#toggleDivider) this.#toggleDivider.hidden = !show;
       if (show) this.#renderToggle();
     }
 
@@ -321,12 +334,24 @@ export class PlanPicker extends UIFormElement {
     this.appendChild(toggle);
     this.#toggleHost = toggle;
 
-    // Plans host — the radiogroup container the option-card-ui kids
-    // live in. We give it role="presentation" because the OUTER host
-    // already carries role="radiogroup" and nesting two radiogroups
-    // would confuse AT.
-    const plansHost = document.createElement('div');
+    // Divider between the interval toggle and the plan list — the
+    // canonical change-plan grammar separates the two groups with a
+    // <divider-ui> (billing.contents.html drawer). Visible only when
+    // the toggle is.
+    const toggleDivider = document.createElement('divider-ui');
+    toggleDivider.setAttribute('data-toggle-divider', '');
+    toggleDivider.hidden = true;
+    this.appendChild(toggleDivider);
+    this.#toggleDivider = toggleDivider;
+
+    // Plans host — a <grid-ui> (the framework grid primitive; the
+    // [layout] mode overrides its columns via plan-picker.css) that
+    // the option-card-ui kids live in as DIRECT children. We give it
+    // role="presentation" because the OUTER host already carries
+    // role="radiogroup" and nesting two radiogroups would confuse AT.
+    const plansHost = document.createElement('grid-ui');
     plansHost.setAttribute('data-plans', '');
+    plansHost.setAttribute('columns', 'auto-fit');
     plansHost.setAttribute('role', 'presentation');
     this.appendChild(plansHost);
     this.#plansHost = plansHost;
@@ -354,9 +379,16 @@ export class PlanPicker extends UIFormElement {
     if (!this.#toggleHost) return;
     let seg = this.#toggleSegmented;
     if (!seg) {
+      // Canonical billing-interval chain: <field-ui label="Billing
+      // interval"> wrapping the <segmented-ui> (billing.contents.html
+      // "Current plan" region).
+      const field = document.createElement('field-ui');
+      field.setAttribute('label', 'Billing interval');
       seg = document.createElement('segmented-ui');
       seg.setAttribute('aria-label', 'Billing cycle');
-      this.#toggleHost.appendChild(seg);
+      field.appendChild(seg);
+      this.#toggleHost.appendChild(field);
+      this.#toggleField = field;
       this.#toggleSegmented = seg;
       // Stamp segments — known cycles in display order.
       for (const cycleKey of ['monthly', 'annual']) {
@@ -443,8 +475,9 @@ export class PlanPicker extends UIFormElement {
     // bodies show always.
     let body = card.querySelector(':scope > [data-plan-body]');
     if (!body) {
-      body = document.createElement('div');
+      body = document.createElement('col-ui');
       body.setAttribute('data-plan-body', '');
+      body.setAttribute('gap', '3');
       card.appendChild(body);
     }
     this.#decorateBody(body, plan);
@@ -478,9 +511,11 @@ export class PlanPicker extends UIFormElement {
     // Wipe + restamp body (small DOM; cycle / feature-list / cta).
     body.replaceChildren();
 
-    // Price row.
-    const priceRow = document.createElement('div');
+    // Price row — <row-ui> per the canonical inline-cluster grammar.
+    const priceRow = document.createElement('row-ui');
     priceRow.setAttribute('data-price-row', '');
+    priceRow.setAttribute('gap', '1');
+    priceRow.setAttribute('align', 'baseline');
     const cycle = KNOWN_CYCLES.has(this.cycle) ? this.cycle : 'monthly';
     const prices = plan.prices || {};
     const priceRec = prices[cycle] || prices.monthly || null;
@@ -513,20 +548,33 @@ export class PlanPicker extends UIFormElement {
       body.appendChild(note);
     }
 
-    // Feature list.
+    // Feature list — the canonical feature-line grammar:
+    // <col-ui gap="1"> of <row-ui gap="2"><icon-ui/><span/></row-ui>
+    // (billing.contents.html trial-banner / what's-included blocks),
+    // separated from the price block by a <divider-ui>.
     if (Array.isArray(plan.features) && plan.features.length) {
-      const list = document.createElement('ul');
+      const divider = document.createElement('divider-ui');
+      divider.setAttribute('data-body-divider', '');
+      body.appendChild(divider);
+
+      const list = document.createElement('col-ui');
       list.setAttribute('data-features', '');
+      list.setAttribute('gap', '1');
+      list.setAttribute('role', 'list');
       for (const feature of plan.features) {
-        const li = document.createElement('li');
+        const line = document.createElement('row-ui');
+        line.setAttribute('data-feature', '');
+        line.setAttribute('gap', '2');
+        line.setAttribute('align', 'start');
+        line.setAttribute('role', 'listitem');
         const icon = document.createElement('icon-ui');
         icon.setAttribute('name', 'check');
         icon.setAttribute('aria-hidden', 'true');
-        li.appendChild(icon);
+        line.appendChild(icon);
         const label = document.createElement('span');
         label.textContent = String(feature);
-        li.appendChild(label);
-        list.appendChild(li);
+        line.appendChild(label);
+        list.appendChild(line);
       }
       body.appendChild(list);
     }