@adia-ai/web-components 0.6.48 → 0.6.49

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.49] — 2026-05-30
+
+### Changed — card-ui header slot sweep + `nav-group-ui` fixes (demos)
+
+- **`patterns/*` + catalog demo HTML** — card-ui header anatomy swept to the canonical `<header>` slot grammar across admin-dashboard + 5 catalog patterns; `nav-group-ui` `label=` → `text=` + icon fixes. Demo/corpus-facing; absorbed into the chunk corpus regen.
+- **31 module demos** — `<!-- design-plan -->` blocks retrofitted across the composite-demo-protocol campaign (Phase 1+3 artifacts embedded).
+
+### Maintenance
+
+- **`dist/web-components.min.js` + `dist/icons-manifest.js`** — bundle rebuild reflecting the calendar-grid `month` prop + date-range-picker class changes.
+
+### Fixed — `<date-range-picker>` showed the same month in both panes
+
+- **`components/calendar-grid/calendar-grid.{class.js,yaml}`** — new `month`
+  attribute (`YYYY-MM`): sets the displayed month when no `value` is selected, so
+  a consumer can show a specific month independent of selection. A selected value
+  always takes precedence.
+- **`components/date-range-picker/date-range-picker.class.js`** — the end pane now
+  defaults to **one month after** the start pane (via the new `month` hint), so a
+  fresh range picker shows two consecutive months (e.g. May + June) instead of the
+  current month twice. A selected `to` date still drives its own pane. Propagates
+  to `<date-range-selector>` (embeds the picker).
+
+### Fixed — `drop-target` demo card-structure violation
+
+- **`traits/drop-target/drop-target.examples.html`** — the 4 `<card-ui>` drop
+  surfaces held `<text-ui>` / `<col-ui>` directly (bypassing the card body slot),
+  failing `check:card-structure` (a `check`-chain gate). Wrapped each in
+  `<section bleed style="display:grid;place-items:center">` — clears the gate while
+  keeping the centered drop-zone appearance. `audit:card-structure` now clean.
+
 ## [0.6.48] — 2026-05-29
 
 ### Demos — library-wide consolidation sweep (HTML-first)

package/components/calendar-grid/calendar-grid.a2ui.json

@@ -31,6 +31,11 @@
       "type": "string",
       "default": ""
     },
+    "month": {
+      "description": "Displayed month (YYYY-MM) used when no value is selected — shows a specific month independent of selection. A selected value always takes precedence. Used by date-range-picker to show its end pane one month ahead of the start.",
+      "type": "string",
+      "default": ""
+    },
     "rangeEnd": {
       "description": "End of a date range (ISO YYYY-MM-DD). See `rangeStart` for the full contract.",
       "type": "string",

package/components/calendar-grid/calendar-grid.class.js

@@ -61,6 +61,10 @@ export class UICalendarGrid extends UIElement {
 
   static properties = {
     value:    { type: String,  default: '', reflect: true },
+    // Displayed month (`YYYY-MM`) when no `value` is selected — lets a consumer
+    // show a specific month independent of selection (e.g. a date-range picker
+    // showing its end pane one month ahead of the start pane). Selection wins.
+    month:    { type: String,  default: '', reflect: true },
     min:      { type: String,  default: '', reflect: true },
     max:      { type: String,  default: '', reflect: true },
     disabled: { type: Boolean, default: false, reflect: true },
@@ -90,11 +94,14 @@ export class UICalendarGrid extends UIElement {
     this.setAttribute('role', 'group');
     if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', 'Calendar');
 
-    // Initialize view to selected date or today.
+    // Initialize view to selected date, else the [month] hint, else today.
     const sel = parseISO(this.value);
     if (sel) {
       this.#viewYear = sel.getFullYear();
       this.#viewMonth = sel.getMonth();
+    } else {
+      const vm = /^(\d{4})-(\d{2})$/.exec(String(this.month || '').trim());
+      if (vm) { this.#viewYear = +vm[1]; this.#viewMonth = +vm[2] - 1; }
     }
 
     if (!this.#bound) {

package/components/calendar-grid/calendar-grid.d.ts

@@ -22,6 +22,8 @@ export class UICalendarGrid extends UIElement {
   max: string;
   /** Minimum selectable date in ISO format (YYYY-MM-DD). */
   min: string;
+  /** Displayed month (YYYY-MM) used when no value is selected — shows a specific month independent of selection. A selected value always takes precedence. Used by date-range-picker to show its end pane one month ahead of the start. */
+  month: string;
   /** End of a date range (ISO YYYY-MM-DD). See `rangeStart` for the full contract. */
   rangeEnd: string;
   /** Start of a date range (ISO YYYY-MM-DD). When both rangeStart and rangeEnd are set + ordered, day cells strictly between the endpoints get `[data-in-range]` stamped for visual continuity. Used by `<date-range-picker-ui>` which pushes the same from/to onto both calendar panes. Endpoints themselves render via the `value` prop's `[data-selected]` state. */

package/components/calendar-grid/calendar-grid.yaml

@@ -22,6 +22,14 @@ props:
     type: string
     default: ''
     reflect: true
+  month:
+    description: >-
+      Displayed month (YYYY-MM) used when no value is selected — shows a specific
+      month independent of selection. A selected value always takes precedence.
+      Used by date-range-picker to show its end pane one month ahead of the start.
+    type: string
+    default: ''
+    reflect: true
   min:
     description: Minimum selectable date in ISO format (YYYY-MM-DD).
     type: string

package/components/date-range-picker/date-range-picker.class.js

@@ -411,6 +411,15 @@ export class UIDateRangePicker extends UIFormElement {
     }
     if (!calArea.querySelector(':scope > [data-cal-to]')) {
       const calTo = this.constructor._pp.calTo.cloneNode(true);
+      // Default the end pane to one month after the start pane so a fresh range
+      // picker shows two consecutive months (not the same month twice). A `to`
+      // value, once selected, overrides this hint inside the grid.
+      const fromISO = parseRange(this.value)?.from;
+      let y, mo; // mo: 0-based month
+      if (fromISO) { const [yy, mm] = fromISO.split('-').map(Number); y = yy; mo = mm - 1; }
+      else { const now = new Date(); y = now.getFullYear(); mo = now.getMonth(); }
+      mo += 1; if (mo > 11) { mo = 0; y += 1; }
+      calTo.setAttribute('month', `${y}-${pad(mo + 1)}`);
       calArea.appendChild(calTo);
     }
     this.#calFromRef = calArea.querySelector(':scope > [data-cal-from]');

package/components/field/field.test.js

@@ -227,9 +227,14 @@ describe('field-ui', () => {
     expect(scopeBlock[0]).not.toMatch(/row-gap\s*:/);
   });
 
-  it('CSS source contract: `:scope:has(> [slot="hint"], > [slot="error"])` declares row-gap', () => {
+  it('CSS source contract: `:scope:has([slot="hint"], [slot="error"])` declares row-gap', () => {
+    // The `>` direct-child combinator is OPTIONAL — field.css uses the
+    // descendant form `:has([slot="hint"], [slot="error"])` (v0.6.x); either
+    // satisfies the FB-54 row-gap-presence-guard contract.
     expect(FIELD_CSS).toMatch(
-      /:scope:has\(>\s*\[slot="hint"\]\s*,\s*>\s*\[slot="error"\]\)\s*\{[^}]*row-gap:\s*var\(--field-gap\)/
+      // `var(--field-gap[,)]` accepts both the bare token and the override-aware
+      // `var(--field-gap, var(--field-gap-default))` chain (OD-5 token-shadowing).
+      /:scope:has\((?:>\s*)?\[slot="hint"\]\s*,\s*(?:>\s*)?\[slot="error"\]\)\s*\{[^}]*row-gap:\s*var\(--field-gap[,)]/
     );
   });
 });