@adia-ai/web-modules 0.8.40 → 0.8.41

package/billing/plan-picker/plan-picker.css

@@ -53,7 +53,8 @@ plan-picker-ui {
     background: var(--plan-picker-bg);
   }
 
-  /* ── Toggle row ── */
+  /* ── Toggle row — <field-ui label="Billing interval"> wrapping the
+        <segmented-ui> (canonical billing-interval chain). ── */
   :scope > [data-toggle] {
     display: flex;
     justify-content: var(--plan-picker-toggle-justify);
@@ -61,19 +62,21 @@ plan-picker-ui {
   :scope > [data-toggle][hidden] {
     display: none;
   }
+  :scope > [data-toggle-divider][hidden] {
+    display: none;
+  }
 
-  /* ── Plans grid ── */
+  /* ── Plans grid — a <grid-ui columns="auto-fit"> primitive; we only
+        forward this composite's min/gap tokens into grid-ui's own
+        contract (--grid-min-col / --grid-gap). ── */
   :scope > [data-plans] {
-    display: grid;
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(var(--plan-picker-grid-min), 1fr)
-    );
-    gap: var(--plan-picker-grid-gap);
+    --grid-min-col: var(--plan-picker-grid-min);
+    --grid-gap: var(--plan-picker-grid-gap);
     align-items: stretch;
   }
 
-  /* List layout — single-column rows for in-app settings. */
+  /* List layout — single-column rows for in-app settings (mode
+     attribute; overrides grid-ui's auto-fit template). */
   :scope[layout="list"] > [data-plans] {
     grid-template-columns: 1fr;
   }
@@ -131,12 +134,8 @@ plan-picker-ui {
     display: none;
   }
 
-  /* ── Price row ── */
-  :scope [data-price-row] {
-    display: flex;
-    align-items: baseline;
-    gap: var(--a-space-1);
-  }
+  /* ── Price row — a <row-ui gap="1" align="baseline">; the primitive
+        owns the flex geometry, we style only the text chrome. ── */
   :scope [data-price] {
     font-size: var(--plan-picker-price-size);
     color: var(--plan-picker-price-fg);
@@ -152,39 +151,23 @@ plan-picker-ui {
     color: var(--plan-picker-cycle-fg);
   }
 
-  /* ── Features list ── */
-  :scope ul[data-features] {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--plan-picker-features-gap);
+  /* ── Features list — <col-ui data-features> of <row-ui data-feature>
+        lines (canonical feature-line grammar); the layout primitives own
+        the stack/row geometry, we forward gap + text/icon chrome. ── */
+  :scope [data-features] {
+    --col-gap: var(--plan-picker-features-gap);
   }
-  :scope ul[data-features] > li {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--a-space-2);
-    /* Override the docs feature-list indent (site.css adds
-       `padding-left: 24px` + a ::before checkmark to ul[data-features] li);
-       the slotted <icon-ui> IS our bullet, so the row aligns flush-left. */
-    padding-inline-start: 0;
+  :scope [data-features] > [data-feature] {
     color: var(--md-sys-color-neutral-on-surface);
     font-size: var(--a-text-sm, 0.875rem);
     line-height: 1.4;
   }
-  :scope ul[data-features] > li > icon-ui {
+  :scope [data-features] > [data-feature] > icon-ui {
     flex-shrink: 0;
     color: var(--plan-picker-feature-icon-fg);
     --a-icon-size: 1rem;
     margin-block-start: 0.125rem;
   }
-  /* The feature check is the slotted <icon-ui>. Suppress any inherited
-     ::before checkmark (the docs admin-page feature-list style adds a green
-     "✓" to every ul[data-features] li) so the bullet doesn't double up. */
-  :scope ul[data-features] > li::before {
-    content: none;
-  }
 
   /* ── CTA button — full-width, anchored to the body's bottom edge so a
         row of cards keeps their CTAs aligned regardless of feature count. ── */

package/billing/plan-picker/plan-picker.yaml

@@ -34,6 +34,11 @@ composes:
   - option-card-ui
   - segmented-ui
   - segment-ui
+  - field-ui
+  - grid-ui
+  - col-ui
+  - row-ui
+  - divider-ui
   - button-ui
   - icon-ui
   - text-ui

package/chat/chat-composer/chat-composer.a2ui.json

@@ -48,6 +48,7 @@
       "conversation-input"
     ],
     "name": "ChatComposer",
+    "parts": {},
     "related": [
       "ChatShell",
       "ChatThread",

package/chat/chat-empty/chat-empty.a2ui.json

@@ -22,6 +22,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedParents": [
+      "ChatThread"
+    ],
     "anti_patterns": [],
     "category": "feedback",
     "composes": [],
@@ -34,6 +37,7 @@
       "no-messages"
     ],
     "name": "ChatEmpty",
+    "parts": {},
     "related": [
       "ChatShell",
       "ChatThread",

package/chat/chat-empty/chat-empty.yaml

@@ -39,6 +39,8 @@ states:
 traits: []
 
 a2ui:
+  allowedParents:
+    - ChatThread
   rules:
     - >-
       chat-empty is the bespoke replacement for legacy

package/chat/chat-header/chat-header.a2ui.json

@@ -22,6 +22,10 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedParents": [
+      "ChatShell",
+      "ChatSidebar"
+    ],
     "anti_patterns": [],
     "category": "layout",
     "composes": [],
@@ -34,6 +38,7 @@
       "app-header"
     ],
     "name": "ChatHeader",
+    "parts": {},
     "related": [
       "ChatShell",
       "ChatStatus",

package/chat/chat-header/chat-header.yaml

@@ -47,6 +47,9 @@ states:
 traits: []
 
 a2ui:
+  allowedParents:
+    - ChatShell
+    - ChatSidebar
   rules:
     - >-
       chat-header replaces the legacy <header> chrome bar inside

package/chat/chat-shell/chat-shell.a2ui.json

@@ -52,6 +52,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedParents": [
+      "Surface"
+    ],
     "anti_patterns": [],
     "category": "container",
     "composes": [
@@ -118,6 +121,7 @@
       "assistant"
     ],
     "name": "ChatShell",
+    "parts": {},
     "related": [
       "ChatThread",
       "ChatComposer",

package/chat/chat-shell/chat-shell.yaml

@@ -126,6 +126,8 @@ states:
 traits: []
 
 a2ui:
+  allowedParents:
+    - Surface
   rules:
     - >-
       chat-shell takes bespoke chat-* children only. The canonical

package/chat/chat-sidebar/chat-sidebar.a2ui.json

@@ -52,6 +52,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedParents": [
+      "ChatShell"
+    ],
     "anti_patterns": [],
     "category": "layout",
     "composes": [],
@@ -83,6 +86,7 @@
       "inspector"
     ],
     "name": "ChatSidebar",
+    "parts": {},
     "related": [
       "ChatShell",
       "ChatComposer",

package/chat/chat-sidebar/chat-sidebar.yaml

@@ -108,6 +108,8 @@ states:
 traits: []
 
 a2ui:
+  allowedParents:
+    - ChatShell
   rules:
     - >-
       chat-sidebar is the bespoke replacement for legacy

package/chat/chat-status/chat-status.a2ui.json

@@ -22,6 +22,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedParents": [
+      "ChatHeader"
+    ],
     "anti_patterns": [],
     "category": "feedback",
     "composes": [],
@@ -34,6 +37,7 @@
       "streaming-indicator"
     ],
     "name": "ChatStatus",
+    "parts": {},
     "related": [
       "ChatShell",
       "ChatHeader",

package/chat/chat-status/chat-status.yaml

@@ -32,6 +32,8 @@ states:
 traits: []
 
 a2ui:
+  allowedParents:
+    - ChatHeader
   rules:
     - >-
       chat-status replaces legacy <span data-chat-status> for the

package/chat/chat-thread/chat-thread.a2ui.json

@@ -32,6 +32,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedParents": [
+      "ChatShell"
+    ],
     "anti_patterns": [],
     "category": "container",
     "composes": [],
@@ -45,6 +48,7 @@
       "scroll-surface"
     ],
     "name": "ChatThread",
+    "parts": {},
     "related": [
       "ChatShell",
       "ChatEmpty",

package/chat/chat-thread/chat-thread.yaml

@@ -58,6 +58,8 @@ states:
   description: Zero message children — empty state visible.
 traits: []
 a2ui:
+  allowedParents:
+    - ChatShell
   rules:
   - chat-thread is the bespoke replacement for legacy <section data-chat-messages> inside <chat-shell>. Use it for the message
     scroll surface; the host appends dynamic message divs as children.

package/dashboard/dashboard-layout/dashboard-layout.a2ui.json

@@ -13,6 +13,11 @@
     }
   ],
   "properties": {
+    "bandGap": {
+      "description": "Override band-to-band vertical gap. Empty string = the\ndensity-modulated default. Numeric `1`..`6` selects the\ncorresponding --a-space-N step. Renamed from `[gap]` (gh#1335) —\nthis attribute set the component-local `--dashboard-layout-gap`\ntoken directly, never composing with the ambient\n`[size]`→`--a-gap` cascade the global Scale-grammar `[gap]`\nattribute uses, and covers a narrower numeric range (1-6 vs. the\nglobal 0-16) — a genuinely distinct, band-scoped concept kept\nunder its own namespaced name rather than converged.\n",
+      "type": "string",
+      "default": ""
+    },
     "chart-split": {
       "description": "Chart-band column split. Empty string = single full-width chart;\n`2` = two equal columns; `2:1` / `3:2` / `3:1` = asymmetric\nratios. Collapses to single column at narrow widths (≤48em).\n",
       "type": "string",
@@ -29,21 +34,15 @@
       "const": "DashboardLayout"
     },
     "density": {
-      "description": "Spacing scale — propagates --a-density to descendant primitives\nvia CSS custom-property cascade. Empty string inherits whatever\ndensity is in effect on an ancestor (the default — respects an\napp-level density theme). `compact` / `comfortable` / `spacious`\nexplicitly override.\n",
+      "description": "Spacing scale — propagates --a-density to descendant primitives\nvia CSS custom-property cascade. Empty string inherits whatever\ndensity is in effect on an ancestor (the default — respects an\napp-level density theme). `compact` / `spacious` explicitly\noverride. `comfortable` retired (gh#1335) — verified dead code:\nit set `--a-density: 1` with no gap-token override, functionally\nidentical to the \"\" (unset/ambient) state, not to `spacious`\n(`--a-density: 1.15` + wider gap tokens) — so it converges onto\n\"\" (the closest matching real behavior) rather than a\n`comfortable`→`spacious` rename, which would have silently\nchanged behavior for any existing consumer.\n",
       "type": "string",
       "enum": [
         "",
-        "comfortable",
         "compact",
         "spacious"
       ],
       "default": ""
     },
-    "gap": {
-      "description": "Override band-to-band vertical gap. Empty string = the\ndensity-modulated default (--a-space-4 at comfortable). Numeric\n`1`..`6` selects the corresponding --a-space-N step.\n",
-      "type": "string",
-      "default": ""
-    },
     "kpi-columns": {
       "description": "Target column count for the KPI band at desktop width. Range 2-6;\nout-of-range values fall back to 4. Container-query collapse\nreduces this at narrower widths (≤48em → 2; ≤32em → 1).\n",
       "type": "string",
@@ -101,7 +100,7 @@
         "description": "Fired when [density] changes (programmatic or via setDensity()).\nBubbles; detail.density carries the new value.\n",
         "detail": {
           "density": {
-            "description": "The new density value (comfortable / compact / spacious).",
+            "description": "The new density value (\"\" / compact / spacious).",
             "type": "string"
           }
         }
@@ -146,6 +145,7 @@
       "layout-container"
     ],
     "name": "UIDashboardLayout",
+    "parts": {},
     "related": [
       "AdminPageBody",
       "AdminPage",

package/dashboard/dashboard-layout/dashboard-layout.css

@@ -119,10 +119,10 @@ dashboard-layout-ui {
 
   /* ── Density variants — override TOKEN values only ──
      Per the contract: variants change tokens; modes change layout.
-     Density is a token-override, not a layout-shape change. */
-  :scope[density="comfortable"] {
-    --a-density: 1;
-  }
+     Density is a token-override, not a layout-shape change.
+     `comfortable` retired (gh#1335) — verified dead code: it set only
+     --a-density:1 with no gap-token override, functionally identical
+     to the unset/"" state below (no selector needed), not to `spacious`. */
   :scope[density="compact"] {
     --dashboard-layout-gap:     var(--dashboard-layout-gap-compact);
     --dashboard-layout-kpi-gap: var(--dashboard-layout-kpi-gap-compact);

package/dashboard/dashboard-layout/dashboard-layout.js

@@ -30,7 +30,7 @@ import { untracked } from '@adia-ai/web-components/core/signals';
 
 // ── Validation tables ────────────────────────────────────────────
 
-const VALID_DENSITIES   = new Set(['', 'comfortable', 'compact', 'spacious']);
+const VALID_DENSITIES   = new Set(['', 'compact', 'spacious']);
 const VALID_KPI_COLUMNS = new Set(['2', '3', '4', '5', '6']);
 const VALID_CHART_SPLIT = new Set(['', '2', '2:1', '3:2', '3:1']);
 const REGION_SLOTS      = ['toolbar', 'kpis', 'charts', 'table', 'aside'];
@@ -44,7 +44,7 @@ export class UIDashboardLayout extends UIElement {
       'kpi-columns': { type: String,  default: '4',    reflect: true, attribute: 'kpi-columns' },
       'chart-split': { type: String,  default: '',     reflect: true, attribute: 'chart-split' },
       loading:       { type: Boolean, default: false,  reflect: true },
-      gap:           { type: String,  default: '',     reflect: true },
+      bandGap:       { type: String,  default: '',     reflect: true, attribute: 'band-gap' },
     };
   }
 
@@ -76,7 +76,7 @@ export class UIDashboardLayout extends UIElement {
    * Programmatic equivalent of setting the [density] attribute.
    * Fires `density-change` once with the new value.
    *
-   * @param {string} value — '' | 'comfortable' | 'compact' | 'spacious'
+   * @param {string} value — '' | 'compact' | 'spacious'
    */
   setDensity(value) {
     const next = VALID_DENSITIES.has(value) ? value : '';
@@ -118,7 +118,7 @@ export class UIDashboardLayout extends UIElement {
     // changes flow through attributeChangedCallback below.
     this.#syncAriaBusy();
 
-    // Apply the [gap] override → public token if set.
+    // Apply the [band-gap] override → public token if set.
     this.#applyGapAttr();
 
     // Watch for region-empty transitions. Children are arbitrary
@@ -195,7 +195,7 @@ export class UIDashboardLayout extends UIElement {
       return;
     }
 
-    if (name === 'gap' && oldVal !== newVal) {
+    if (name === 'band-gap' && oldVal !== newVal) {
       this.#applyGapAttr();
       return;
     }
@@ -237,12 +237,13 @@ export class UIDashboardLayout extends UIElement {
   }
 
   /**
-   * Map the [gap="N"] attribute to the public --dashboard-layout-gap
-   * custom property. The CSS reads `var(--dashboard-layout-gap, …)`
-   * so empty / unset falls back to the density-modulated default.
+   * Map the [band-gap="N"] attribute (renamed from [gap], gh#1335) to the
+   * public --dashboard-layout-gap custom property. The CSS reads
+   * `var(--dashboard-layout-gap, …)` so empty / unset falls back to the
+   * density-modulated default.
    */
   #applyGapAttr() {
-    const g = (this.gap || '').trim();
+    const g = (this.bandGap || '').trim();
     if (g === '') {
       this.style.removeProperty('--dashboard-layout-gap');
       return;

package/dashboard/dashboard-layout/dashboard-layout.yaml

@@ -40,13 +40,18 @@ props:
       Spacing scale — propagates --a-density to descendant primitives
       via CSS custom-property cascade. Empty string inherits whatever
       density is in effect on an ancestor (the default — respects an
-      app-level density theme). `compact` / `comfortable` / `spacious`
-      explicitly override.
+      app-level density theme). `compact` / `spacious` explicitly
+      override. `comfortable` retired (gh#1335) — verified dead code:
+      it set `--a-density: 1` with no gap-token override, functionally
+      identical to the "" (unset/ambient) state, not to `spacious`
+      (`--a-density: 1.15` + wider gap tokens) — so it converges onto
+      "" (the closest matching real behavior) rather than a
+      `comfortable`→`spacious` rename, which would have silently
+      changed behavior for any existing consumer.
     type: string
     default: ""
     enum:
       - ""
-      - comfortable
       - compact
       - spacious
     reflect: true
@@ -91,13 +96,20 @@ props:
     default: false
     reflect: true
 
-  gap:
+  bandGap:
     description: |
       Override band-to-band vertical gap. Empty string = the
-      density-modulated default (--a-space-4 at comfortable). Numeric
-      `1`..`6` selects the corresponding --a-space-N step.
+      density-modulated default. Numeric `1`..`6` selects the
+      corresponding --a-space-N step. Renamed from `[gap]` (gh#1335) —
+      this attribute set the component-local `--dashboard-layout-gap`
+      token directly, never composing with the ambient
+      `[size]`→`--a-gap` cascade the global Scale-grammar `[gap]`
+      attribute uses, and covers a narrower numeric range (1-6 vs. the
+      global 0-16) — a genuinely distinct, band-scoped concept kept
+      under its own namespaced name rather than converged.
     type: string
     default: ""
+    attribute: band-gap
     reflect: true
 
 events:
@@ -108,7 +120,7 @@ events:
     detail:
       density:
         type: string
-        description: The new density value (comfortable / compact / spacious).
+        description: The new density value ("" / compact / spacious).
 
   region-empty:
     description: |

package/dashboard/date-range-selector/date-range-selector.a2ui.json

@@ -72,9 +72,9 @@
         "wrong": "<date-range-selector-ui broadcast=\"document\"></date-range-selector-ui>\n<date-range-selector-ui broadcast=\"document\"></date-range-selector-ui>\n"
       },
       {
-        "description": "Using DateRangeSelector for single-date selection. The composite\nresolves a range; the picker UI exposes two-pane selection. For\nsingle-date use <input-ui type=\"date\"> or <calendar-picker-ui>.\n",
-        "right": "<input-ui type=\"date\" name=\"d\"></input-ui>\n",
-        "rule": "Range chooser → DateRangeSelector. Single-date chooser → input-ui\ntype=date or calendar-picker-ui.\n",
+        "description": "Using DateRangeSelector for single-date selection. The composite\nresolves a range; the picker UI exposes two-pane selection. For\nsingle-date use <calendar-picker-ui> — input-ui's `type=\"date\"`\nwas removed (gh#1381, gh#1363 B10); it never rendered a\nnative date affordance.\n",
+        "right": "<calendar-picker-ui name=\"d\"></calendar-picker-ui>\n",
+        "rule": "Range chooser → DateRangeSelector. Single-date chooser →\ncalendar-picker-ui.\n",
         "wrong": "<date-range-selector-ui value=\"today\"></date-range-selector-ui>\n<!-- The selector still resolves a range (from=today, to=today). -->\n"
       },
       {
@@ -147,6 +147,7 @@
       "timeframe"
     ],
     "name": "DateRangeSelector",
+    "parts": {},
     "related": [
       "DateRangePicker",
       "Segmented",

package/dashboard/date-range-selector/date-range-selector.yaml

@@ -249,15 +249,17 @@ anti_patterns:
   - description: |
       Using DateRangeSelector for single-date selection. The composite
       resolves a range; the picker UI exposes two-pane selection. For
-      single-date use <input-ui type="date"> or <calendar-picker-ui>.
+      single-date use <calendar-picker-ui> — input-ui's `type="date"`
+      was removed (gh#1381, gh#1363 B10); it never rendered a
+      native date affordance.
     wrong: |
       <date-range-selector-ui value="today"></date-range-selector-ui>
       <!-- The selector still resolves a range (from=today, to=today). -->
     right: |
-      <input-ui type="date" name="d"></input-ui>
+      <calendar-picker-ui name="d"></calendar-picker-ui>
     rule: |
-      Range chooser → DateRangeSelector. Single-date chooser → input-ui
-      type=date or calendar-picker-ui.
+      Range chooser → DateRangeSelector. Single-date chooser →
+      calendar-picker-ui.
 
   - description: |
       Custom selected with no from/to. The composite falls back to the