@adia-ai/web-components 0.6.47 → 0.6.49

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # 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)
+
+- **`components/**/*.examples.html` + `traits/**/*.examples.html`** — Usage-section consolidation across 83 components + 45 traits: every example now shows its own auto-stamped HTML, so the standalone Usage cheat-sheet was redundant. Per-page consolidations (text, card, drawer) + implemented-matrix depth fills. See the root CHANGELOG for the full campaign.
+
+### Changed — foundation styles reorganized by dimension × layer (ADR-0035)
+
+- **`styles/`** — the foundation token surface is now organized by **dimension × layer**. `tokens.css`, `typography.css`, and `colors/semantics.css` remain as **compat barrels** at their published paths (the `@adia-ai/web-components/styles/*` export map and the `<link>` surface are unchanged); their content moved to single-responsibility files — `foundation/{space,size,radius,motion,elevation}.css`, `type/{scale,roles,elements}.css`, `colors/semantics/{core,buckets,features,data-viz,aliases}.css` — and the global attribute API to `api/{sizing,text,layout}.css`. New `styles/index.css` is the real barrel; the package-root `index.css` re-exports it. **Behavior-neutral** — identical custom-property declaration multiset in the minified bundle (see ADR-0035). Fixed in passing: the dead `--ui-focus` reference in the global `:focus-visible` fallback, and element-typography defaults consolidated into `type/elements.css`.
+- **`scripts/release/check-foundation-layer-placement.mjs`** — new audit (wired into `npm run check`) enforcing the layout: header tags present, primitives free of attribute selectors, the global attribute API confined to `api/`, no orphan files.
+- **`dist/web-components.min.css`** — bundle rebuild reflecting the reorg (no behavioral change).
+
+### Fixed — `<date-range-picker>` popover clipped its second month
+
+- **`core/anchor.js`** — the anchored-popover viewport-safety cap was a hard
+  `max-width: min(100vw - 1rem, 32rem)`. It's now `min(100vw - 1rem,
+  var(--popover-max-width, 32rem))`, so a wide-content popover can raise the
+  32rem cap by setting `--popover-max-width` on the popover element (default
+  unchanged → ordinary popovers like `popover-ui` / `menu-ui` / `select-ui` keep
+  the 512px cap). Viewport safety still wins.
+- **`components/date-range-picker/date-range-picker.css`** — the preset rail plus
+  two side-by-side month panes need ~656px, but the 32rem (512px) cap clipped the
+  second month inside the popover. The popover now opts into
+  `--popover-max-width: 48rem` (new `--date-range-picker-popover-max-width` token),
+  and `[data-calendar-area]` gains `flex-wrap: wrap` so the second pane wraps below
+  the first when the viewport clamps the popover narrower than two months (instead
+  of clipping). Fixes `<date-range-selector>` too (it embeds the picker). 32/32
+  picker tests pass; no regression on other popovers.
+
+### Changed — `<preview-ui>` (docs primitive)
+
+- **Side-by-side is the default + self-correcting.** A bare `<preview-ui>` stamps
+  `layout="split"` (render | code); a render cell wider than its half-width cell
+  downgrades to stacked after layout (rAF + `ResizeObserver`: `split`→`layout="stack"`,
+  or a row gains `[data-stack]`), and `overflow-x:auto` lets a page-scale composite
+  scroll rather than clip. New `layout="stack"` enum value + CSS.
+- **`dedent` indentation fix** — measures the common indent from the body (lines
+  after the first) so markup captured with the opening tag at column 0 no longer
+  renders its children deeply over-indented.
+- **`[data-preview-unwrap]`** — multi-element rows show their children's markup, not
+  the throwaway layout wrapper, in the code pane.
+
 ## [0.6.47] — 2026-05-29
 
 ### Added — `<card-ui>` `[grow]` section attribute

package/components/badge/badge.d.ts

@@ -29,6 +29,20 @@ export class UIBadge extends UIElement {
   text: string;
   /** Badge display text. Renderer routes this to the `text` attribute via CSS attr(text) on ::after. */
   textContent: string;
+  /** Fill style — orthogonal to [variant]. Badge defaults to `muted`
+(quiet metadata is the primitive's identity — counts, IDs, status
+pills in dense rows). Three values:
+  - `muted` (default) — tinted bg + scheme-paired text. Same as
+    the existing family-variant rules.
+  - `solid` — saturated bg + on-strong text. Use for hero badges
+    where the badge IS the state (e.g. a single inline error). The
+    existing `primary` variant is a shortcut for accent + solid.
+  - `outline` — transparent bg + family-colored border + family-
+    colored text. Lightest visual weight; good in dense data rows.
+Vocabulary mirrors `<tag-ui>` (which defaults to solid, given its
+different role as filter / autocomplete chip).
+ */
+  tone: 'muted' | 'solid' | 'outline';
   /** Semantic color variant. */
   variant: 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'primary' | 'muted' | 'neutral';
 }

package/components/button/button.a2ui.json

@@ -88,10 +88,7 @@
         "solid",
         "outline",
         "ghost",
-        "primary",
-        "secondary",
-        "soft",
-        "current"
+        "primary"
       ],
       "default": "solid"
     }

package/components/button/button.d.ts

@@ -33,7 +33,7 @@ export class UIButton extends UIElement {
   textContent: string;
   /** Visual style — `solid` (default fill), `outline`, `ghost`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color="…"] alongside.
 For **inline navigation** (Terms of Service, Privacy Policy, footer links, "Sign in" / "Sign up" cross-page affordances) use `<link-ui>` instead — it carries proper `<a href>` semantics, keyboard handling (Enter only, no Space), middle-click open-new-tab, and screen-reader announces "link" instead of "button". Mixing navigation and action affordances under the same primitive is a category error fixed at this junction. */
-  variant: 'default' | 'solid' | 'outline' | 'ghost' | 'primary' | 'secondary' | 'soft' | 'current';
+  variant: 'default' | 'solid' | 'outline' | 'ghost' | 'primary';
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,

package/components/button/button.yaml

@@ -80,9 +80,6 @@ props:
       - outline
       - ghost
       - primary
-      - secondary
-      - soft
-      - current
   color:
     description: >-
       Semantic intent — composes with [variant]. `<button-ui variant="solid" color="danger">`

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.css

@@ -15,9 +15,12 @@
 @scope (calendar-grid-ui) {
   /* ── Block 1 — TOKENS ── */
   :where(:scope) {
-    /* Layout */
+    /* Layout
+       Width derives from the day-cell size so the grid scales with the
+       universal [size] system (sm/md/lg) exactly like select/input/button:
+       7 columns at --a-size + 6 inter-cell gaps' worth of breathing room. */
     --calendar-grid-gap-default:                var(--a-space-1);
-    --calendar-grid-width-default:              16rem;
+    --calendar-grid-width-default:              calc(7 * var(--a-size) + 6 * var(--a-space-1));
 
     /* Header */
     --calendar-grid-header-gap-default:         var(--a-space-1);
@@ -26,26 +29,32 @@
     --calendar-grid-title-size-default:         var(--a-ui-size);
     --calendar-grid-title-weight-default:       var(--a-weight-medium);
 
-    /* Nav buttons (prev/next) */
-    --calendar-grid-nav-size-default:           1.5rem;
+    /* Nav buttons (prev/next) — secondary chrome at one notch below the
+       control height (mirrors select's `calc(height - gap)` idiom); icon
+       is a directional chevron sized from the universal --a-caret-size. */
+    --calendar-grid-nav-size-default:           calc(var(--a-size) - var(--a-space-2));
     --calendar-grid-nav-radius-default:         var(--a-radius-sm);
     --calendar-grid-nav-bg-default:             transparent;
     --calendar-grid-nav-bg-hover-default:       var(--a-bg-muted);
     --calendar-grid-nav-fg-default:             var(--a-fg-muted);
     --calendar-grid-nav-fg-hover-default:       var(--a-fg);
-    --calendar-grid-nav-icon-size-default:      0.75rem;
+    --calendar-grid-nav-icon-size-default:      var(--a-caret-size);
 
-    /* Weekday header */
+    /* Weekday header — row height tracks the control height (one notch
+       below, like nav); label font scales with the tier via --a-ui-size
+       (de-emphasis comes from color + weight, not a frozen small size). */
     --calendar-grid-weekday-fg-default:         var(--a-fg-muted);
-    --calendar-grid-weekday-size-default:       var(--a-ui-sm);
+    --calendar-grid-weekday-size-default:       var(--a-ui-size);
     --calendar-grid-weekday-weight-default:     var(--a-weight-medium);
-    --calendar-grid-weekday-height-default:     1.5rem;
+    --calendar-grid-weekday-height-default:     calc(var(--a-size) - var(--a-space-2));
     --calendar-grid-weekday-mb-default:         var(--a-space-1);
 
-    /* Day cells */
-    --calendar-grid-day-size-default:           2rem;
+    /* Day cells — the interactive targets size from --a-size (control
+       height) and scale their digits with --a-ui-size, exactly like a
+       button/select row. */
+    --calendar-grid-day-size-default:           var(--a-size);
     --calendar-grid-day-radius-default:         var(--a-radius);
-    --calendar-grid-day-font-size-default:      var(--a-ui-sm);
+    --calendar-grid-day-font-size-default:      var(--a-ui-size);
     --calendar-grid-day-bg-default:             transparent;
     --calendar-grid-day-fg-default:             var(--a-fg-subtle);
     --calendar-grid-day-bg-hover-default:       var(--a-bg-hover);

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/calendar-picker/calendar-picker.css

@@ -30,7 +30,10 @@
     --calendar-picker-popover-radius-default:         var(--a-radius-lg);
     --calendar-picker-popover-shadow-default:         var(--a-shadow-lg);
     --calendar-picker-popover-padding-default:        var(--a-space-2);
-    --calendar-picker-popover-width-default:          16rem;
+    /* Width derives from the day-grid so the popover scales with [size]:
+       7 columns at --a-size + inter-cell breathing + popover padding both
+       sides (border-box). Matches calendar-grid-ui's width formula. */
+    --calendar-picker-popover-width-default:          calc(7 * var(--a-size) + 6 * var(--a-space-1) + 2 * var(--a-space-2));
     --calendar-picker-popover-fg-default:             var(--a-fg);
 
     /* Header */
@@ -40,26 +43,32 @@
     --calendar-picker-title-size-default:             var(--a-ui-size);
     --calendar-picker-title-weight-default:           var(--a-weight-medium);
 
-    /* Nav buttons (prev/next) */
-    --calendar-picker-nav-size-default:               1.5rem;
+    /* Nav buttons (prev/next) — secondary chrome at one notch below the
+       control height (mirrors select's `calc(height - gap)` idiom); icon
+       is a directional chevron sized from the universal --a-caret-size. */
+    --calendar-picker-nav-size-default:               calc(var(--a-size) - var(--a-space-2));
     --calendar-picker-nav-radius-default:             var(--a-radius-sm);
     --calendar-picker-nav-bg-default:                 transparent;
     --calendar-picker-nav-bg-hover-default:           var(--a-bg-muted);
     --calendar-picker-nav-fg-default:                 var(--a-fg-muted);
     --calendar-picker-nav-fg-hover-default:           var(--a-fg);
-    --calendar-picker-nav-icon-size-default:          0.75rem;
+    --calendar-picker-nav-icon-size-default:          var(--a-caret-size);
 
-    /* Weekday header */
+    /* Weekday header — row height tracks the control height (one notch
+       below, like nav); label font scales with the tier via --a-ui-size
+       (de-emphasis comes from color + weight, not a frozen small size). */
     --calendar-picker-weekday-fg-default:             var(--a-fg-muted);
-    --calendar-picker-weekday-size-default:           var(--a-ui-sm);
+    --calendar-picker-weekday-size-default:           var(--a-ui-size);
     --calendar-picker-weekday-weight-default:         var(--a-weight-medium);
-    --calendar-picker-weekday-height-default:         1.5rem;
+    --calendar-picker-weekday-height-default:         calc(var(--a-size) - var(--a-space-2));
     --calendar-picker-weekday-mb-default:             var(--a-space-1);
 
-    /* Day cells */
-    --calendar-picker-day-size-default:               2rem;
+    /* Day cells — the interactive targets size from --a-size (control
+       height) and scale their digits with --a-ui-size, exactly like a
+       button/select row. */
+    --calendar-picker-day-size-default:               var(--a-size);
     --calendar-picker-day-radius-default:             var(--a-radius);
-    --calendar-picker-day-font-size-default:          var(--a-ui-sm);
+    --calendar-picker-day-font-size-default:          var(--a-ui-size);
     --calendar-picker-day-bg-default:                 transparent;
     --calendar-picker-day-fg-default:                 var(--a-fg-subtle);
     --calendar-picker-day-bg-hover-default:           var(--a-bg-hover);

package/components/card/card.a2ui.json

@@ -53,17 +53,14 @@
       "default": ""
     },
     "variant": {
-      "description": "Visual style. `outline` is an alias for `outlined`; `flat` removes shadow; `soft`/`primary` apply tinted surfaces.",
+      "description": "Visual style. `outlined` (alias `outline`) draws a border with no shadow; `filled` uses a tinted canvas surface; `ghost` drops border + shadow.",
       "type": "string",
       "enum": [
         "default",
         "outlined",
         "outline",
         "filled",
-        "ghost",
-        "flat",
-        "soft",
-        "primary"
+        "ghost"
       ],
       "default": "default"
     }

package/components/card/card.css

@@ -66,7 +66,9 @@
 
   /* ═══════ Variants — token-only overrides ═══════ */
 
-  :scope[variant="outlined"] {
+  /* `outline` is a documented alias for `outlined` (yaml). */
+  :scope[variant="outlined"],
+  :scope[variant="outline"] {
     --card-bg-default: transparent;
     --card-shadow-default: none;
     --card-border-default: 1px solid var(--a-border);

package/components/card/card.d.ts

@@ -23,6 +23,6 @@ export class UICard extends UIElement {
   raw: boolean;
   /** Card scale. Controls inset, radius, gap, and font sizes. Default (empty) = md. */
   size: 'sm' | 'md' | 'lg';
-  /** Visual style. `outline` is an alias for `outlined`; `flat` removes shadow; `soft`/`primary` apply tinted surfaces. */
-  variant: 'default' | 'outlined' | 'outline' | 'filled' | 'ghost' | 'flat' | 'soft' | 'primary';
+  /** Visual style. `outlined` (alias `outline`) draws a border with no shadow; `filled` uses a tinted canvas surface; `ghost` drops border + shadow. */
+  variant: 'default' | 'outlined' | 'outline' | 'filled' | 'ghost';
 }

package/components/card/card.yaml

@@ -44,8 +44,8 @@ props:
     - md
     - lg
   variant:
-    description: Visual style. `outline` is an alias for `outlined`; `flat` removes shadow; `soft`/`primary` apply tinted
-      surfaces.
+    description: Visual style. `outlined` (alias `outline`) draws a border with no
+      shadow; `filled` uses a tinted canvas surface; `ghost` drops border + shadow.
     type: string
     default: default
     enum:
@@ -54,9 +54,6 @@ props:
     - outline
     - filled
     - ghost
-    - flat
-    - soft
-    - primary
 events: {}
 slots:
   icon:

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/date-range-picker/date-range-picker.css

@@ -21,6 +21,9 @@
     --date-range-picker-popover-shadow-default:   var(--a-shadow-lg);
     --date-range-picker-popover-padding-default:  var(--a-space-3);
     --date-range-picker-popover-gap-default:      var(--a-space-3);
+    /* Wide enough for the preset rail + two side-by-side month panes; raises
+       anchor.js's default 32rem cap (which clipped the second month). */
+    --date-range-picker-popover-max-width-default: 48rem;
 
     /* Preset rail */
     --date-range-picker-preset-bg-default:        transparent;
@@ -132,6 +135,9 @@
    the popover-ui pattern that uses `:not(:popover-open) { display: none }`. */
 date-range-picker-ui [slot="popover"] {
   margin: 0;
+  /* Opt into a wider anchor.js max-width cap so both month panes fit side-by-side
+     (the 32rem default clipped the second month). Viewport safety still applies. */
+  --popover-max-width: var(--date-range-picker-popover-max-width, var(--date-range-picker-popover-max-width-default));
   padding: var(--date-range-picker-py, var(--date-range-picker-py-default)) var(--date-range-picker-px, var(--date-range-picker-px-default));
   border: 1px solid var(--date-range-picker-popover-border, var(--date-range-picker-popover-border-default));
   border-radius: var(--date-range-picker-popover-radius, var(--date-range-picker-popover-radius-default));
@@ -188,10 +194,13 @@ date-range-picker-ui [data-preset-rail] button-ui {
   justify-content: flex-start;
 }
 
-/* Calendar area — horizontal layout of two calendar panes. */
+/* Calendar area — horizontal layout of two calendar panes. Wraps the second
+   pane below the first when the popover is viewport-clamped narrower than two
+   months (instead of clipping it past the popover's right edge). */
 date-range-picker-ui [data-calendar-area] {
   grid-column: 2;
   display: flex;
+  flex-wrap: wrap;
   gap: var(--a-space-3);
   align-items: flex-start;
 }

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[,)]/
     );
   });
 });

package/components/heatmap/heatmap.a2ui.json

@@ -39,6 +39,8 @@
         "accent",
         "success",
         "warning",
+        "danger",
+        "info",
         "data-ramp"
       ],
       "default": "data-ramp"

package/components/heatmap/heatmap.d.ts

@@ -24,7 +24,7 @@ export class UIHeatmap extends UIElement {
   /** Aspect ratio */
   aspect: 'square' | 'wide';
   /** Color ramp */
-  colorScheme: 'accent' | 'success' | 'warning' | 'data-ramp';
+  colorScheme: 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'data-ramp';
   /** Column count */
   cols: number;
   /** Hide the Less/More legend strip */

package/components/heatmap/heatmap.yaml

@@ -33,6 +33,8 @@ props:
       - accent
       - success
       - warning
+      - danger
+      - info
       - data-ramp
     attribute: color-scheme
   cols:

package/components/index.js

@@ -87,6 +87,7 @@ export { UITableOfContents } from './toc/toc.js';
 export { UIQRCode } from './qr-code/qr-code.js';
 export { UIPagination } from './pagination/pagination.js';
 export { UICode } from './code/code.js';
+export { UIPreview } from './preview/preview.js';
 export { UIList, UIListItem } from './list/list.js';
 export { UIListWindow } from './list-window/list-window.js';
 export { UIMenu, UIMenuItem, UIMenuDivider } from './menu/menu.js';

package/components/preview/preview.a2ui.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Preview.json",
+  "title": "Preview",
+  "description": "Live code + render in one frame, from a single source. Wrap any authored AdiaUI markup: the same HTML renders LIVE in a stage and appears beside (or below) it as escaped, syntax-highlighted, copyable source via a nested <code-ui>. The code can never drift from the render — it IS the render's source. Batteries-included + HTML-first by construction: write one block of HTML, no inline styles, no JS wiring, and both panes appear. Use it for every component/recipe example so the primary snippet is always real, copyable HTML shown next to the working component.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "codeFirst": {
+      "description": "Show the code pane before (above / left of) the render pane. Default is render-first.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Preview"
+    },
+    "language": {
+      "description": "Language hint forwarded to the nested <code-ui> for syntax highlighting. Demos are HTML, so this defaults to `html`.",
+      "type": "string",
+      "default": "html"
+    },
+    "layout": {
+      "description": "Pane arrangement. Defaults to `split` — render and code side-by-side in a responsive 2-column grid that collapses to stacked on narrow widths (a bare `<preview-ui>` stamps `layout=\"split\"` on connect). Use `stack` to force the render stacked above the code; the docs auto-apply `stack` to wide self-framing demos (card / shell / table) that read cramped at half width. The `rows` attribute is a separate gallery mode and overrides this.",
+      "type": "string",
+      "enum": [
+        "split",
+        "stack"
+      ],
+      "default": ""
+    },
+    "rows": {
+      "description": "Gallery mode — treat each direct child as a SEPARATE example and lay each out as its own `[render | code]` row (live sample left, its own source right), stacked with dividers. Without `rows`, the whole slotted markup is one render + one code block. An optional `data-preview-label` on a child surfaces a caption above that row's sample.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "composes": [],
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "preview",
+      "example",
+      "demo",
+      "code-preview",
+      "live-preview",
+      "playground",
+      "codepen"
+    ],
+    "name": "UIPreview",
+    "related": [
+      "Code",
+      "Card"
+    ],
+    "slots": {
+      "default": {
+        "description": "The authored markup to preview. Captured verbatim on connect: re-parsed into the live render stage AND shown literally in the code pane. Any valid AdiaUI HTML — one element or many siblings."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, the only state.",
+        "name": "idle"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "preview": [
+        "example",
+        "demo",
+        "sandbox",
+        "live-preview"
+      ]
+    },
+    "tag": "preview-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}