@adia-ai/web-modules 0.8.39 → 0.8.41

package/billing/invoice-detail/invoice-detail.yaml

@@ -86,13 +86,18 @@ props:
   density:
     description: |
       Line-items table row density. `compact` for tightly-packed
-      invoices with many line items; `standard` for typical invoices.
-      Forwarded to the embedded <table-ui density>.
+      invoices with many line items; unset (default) for typical
+      invoices. Forwarded to the embedded <table-ui density>.
+      Converged onto the global `[density]` Enum·preset vocabulary
+      (gh#1335) — `standard` retired (it was never a real state; the
+      forwarding logic already treated it as unset) and `spacious`
+      added for parity with the global grammar.
     type: string
-    default: "standard"
+    default: ""
     enum:
+      - ""
       - compact
-      - standard
+      - spacious
     reflect: true
 
   loading:

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.
@@ -120,11 +123,28 @@ function csvEscape(val) {
   return str;
 }
 
+/**
+ * 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) {
+  return density === 'compact' || density === 'spacious' ? density : null;
+}
+
+function forwardDensity(tableEl, density) {
+  const attr = mapDensity(density);
+  if (attr) tableEl.setAttribute('density', attr);
+  else tableEl.removeAttribute('density');
+}
+
 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' },
@@ -145,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
@@ -301,7 +321,11 @@ export class InvoiceHistory extends UIElement {
       // cross-element subscription; invoice-detail.class.js avoids the same
       // hazard by comparing via getAttribute() instead.
       untracked(() => {
-        if (this.#table.density !== this.density) this.#table.density = this.density;
+        // table-ui has no local `density` prop (ADR-0054) — forward via
+        // attribute, translated through the global grammar.
+        if (this.#table.getAttribute('density') !== mapDensity(this.density)) {
+          forwardDensity(this.#table, this.density);
+        }
         if (!!this.#table.loading !== !!this.loading) this.#table.loading = !!this.loading;
         if (Number(this.#table.paginate || 0) !== Number(this.paginate || 0)) {
           this.#table.paginate = Number(this.paginate || 0);
@@ -355,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');
@@ -379,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",