@adia-ai/web-components 0.8.42 → 0.8.44

package/components/chart-legend/chart-legend.css

@@ -35,7 +35,11 @@
   }
 
   /* Position variants — drive flex-direction. DOM placement still wins for
-     actual layout; these tune the internal row direction. */
+     actual layout; these tune the internal row direction. Pre-ADR-0074
+     fallback: superseded below by a resolved [data-ratio-resolved] bucket
+     whenever one is in effect (an explicit [ratio] pin, or a [for]-bound
+     chart's own mirrored bucket) — a legend with neither keeps this exact
+     behavior, unchanged. */
   :scope[position="top"],
   :scope[position="bottom"] {
     flex-direction: row;
@@ -48,6 +52,32 @@
     align-items: flex-start;
   }
 
+  /* Ratio-resolved layout buckets (ADR-0074, gh#1624 plan step 5, REQ-R-005).
+     Same selector specificity as the [position] rules above — placed AFTER
+     them in source order so a resolved bucket always wins the cascade over
+     a stale/default [position] on the same element. */
+
+  /* 3:2 — horizontal row (beside/below the chart). */
+  :scope[data-ratio-resolved="3:2"] {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  /* 1:1 — wrapped 2-column grid. */
+  :scope[data-ratio-resolved="1:1"] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
+  }
+
+  /* 2:3 — vertical stacked list. */
+  :scope[data-ratio-resolved="2:3"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   /* Rows are <badge-ui> chips. We override badge-ui's default tokens
      to give them a quieter, click-to-toggle appearance — transparent
      bg by default (so they read as inline text not chips), highlighted
@@ -93,6 +123,16 @@
     opacity: 0.4;
   }
 
+  /* De-emphasized (REQ-R-007) rows — a mirrored chart's own muted series
+     (e.g. composed@1:1's secondary line). Distinct from :not([data-active])
+     above: this is the chart's OWN designed treatment for a still-visible
+     series, not a user-toggled-off one; the swatch color itself is set
+     inline per-row (matches the neutral token, not opacity) so only the
+     label's --badge-fg needs the muted tier here. */
+  badge-ui[data-row][data-deemphasized] {
+    --badge-fg: var(--chart-legend-fg-inactive);
+  }
+
   /* Swatch is composed via <swatch-ui shape="…">; per-shape styling
      lives in swatch.css. The legend just hands its [shape] attr through
      and writes --swatch-color inline. Pre-2026-05-01 this file owned a
@@ -101,3 +141,27 @@
      rule (cascade leak). Composing the primitive moves the styling to
      one place. */
 }
+
+/* ─────────────────────────────────────────────────────────────────
+   gh#1624 plan step 7 — full-bleed × legend horizontal breathing room.
+
+   Deliberately OUTSIDE `@scope (chart-legend-ui)`, same reason as
+   chart.css's own `card-ui[padding="none"] chart-ui` rule: this needs to
+   match an ANCESTOR of the scoping root. `--chart-legend-px` defaults to
+   0 because a legend normally sits inside a card section that already
+   supplies horizontal inset via `--card-inset` (card.css's own
+   margin-based section model); `card-ui[padding="none"]` zeroes that
+   inset CARD-WIDE (every section, not just the chart's), so a legend
+   paired with a full-bleed chart lost its own horizontal clearance too —
+   confirmed via browser probe: badge rows sat ~1px from the card's
+   rounded edge, at real risk of visual crowding against the corner-radius
+   `overflow: hidden` (card.css :scope). The chart itself doesn't need this
+   — its own internal plot margins (REQ-R-004) already supply clearance
+   regardless of the card's inset — but the legend's chip rows have no
+   equivalent internal margin of their own. Restoring `--chart-legend-px`
+   only (not `-py`, which the legend already carries unconditionally) is
+   the minimal fix: vertical spacing between the chart and legend sections
+   is unaffected, only the legend's own left/right clearance is restored. */
+card-ui[padding="none"] chart-legend-ui {
+  --chart-legend-px: var(--a-space-4);
+}

package/components/chart-legend/chart-legend.d.ts

@@ -24,20 +24,20 @@ export interface ChartLegendToggleEventDetail {
 export type ChartLegendToggleEvent = CustomEvent<ChartLegendToggleEventDetail>;
 
 export class UIChartLegend extends UIElement {
-  /** JSON array of {key, label, slot?, pct?} legend items. Takes precedence over [for] when both are provided. */
+  /** JSON array of {key, label, slot?, pct?, deemphasized?} legend items. Takes precedence over [for] when both are provided. `deemphasized` (REQ-R-007) mutes the row's swatch/label to the same muted-neutral tier chart-ui's own internal legend uses for a de-emphasized series (e.g. `composed@1:1`'s secondary line) — mirrored automatically from a `[for]`-bound chart's own `.legendData`, or settable explicitly here. */
   items: string;
   /** id-ref of a chart-ui / heatmap-ui to mirror series from. */
   for: string;
-  /** Canonical opt-in spelling (ADR-0063, gh#1563) replacing `static`'s opt-out polarity. Rows are interactive <button>-role badges by default — this default stays `true` in 0.8.42 (deliberately NOT flipped yet; the 0.9.0 cut inverts it to `false` after a full consumer scan of every `<chart-legend-ui>` tag per the ADR). */
+  /** Canonical opt-in spelling (ADR-0063, gh#1563) — the deprecated `static` opt-out alias was cut in 0.8.43 (gh#1617). Rows are interactive <button>-role badges by default — this default stays `true` (deliberately NOT flipped yet; the 0.9.0 cut inverts it to `false` after a full consumer scan of every `<chart-legend-ui>` tag per the ADR). */
   interactive: boolean;
   /** Series-toggle mode emitted via the `toggle` event. `hide` removes the series from the render; `opacity` fades it. Wired via [for] on chart-ui. */
   onToggle: 'hide' | 'opacity';
-  /** Layout hint — drives flex-direction. Actual placement follows DOM order. */
+  /** Layout hint — drives flex-direction. Actual placement follows DOM order. Superseded by a resolved `ratio` bucket (below) whenever one is in effect; this is the pre-ADR-0074 fallback for a legend with neither an explicit `ratio` nor a `[for]`-bound chart. */
   position: 'top' | 'bottom' | 'left' | 'right';
+  /** Chart 2.0 legend layout bucket (ADR-0074, gh#1624 plan step 5, REQ-R-005): 3:2 renders a horizontal row, 1:1 a wrapped 2-column grid, 2:3 a vertical stacked list. An explicit value PINS the bucket regardless of any bound chart. Unset (default) auto-mirrors the `[for]`-bound chart's own resolved `data-ratio-resolved` bucket — the legend never runs its own container-query classification, since its own box is typically a thin strip with no studied aspect of its own. With neither a pin nor a bound chart, no bucket resolves and `position`'s flex-direction rules apply unchanged. The resolved bucket reflects read-only onto the host as `data-ratio-resolved`, mirroring chart-ui's own convention. */
+  ratio: '3:2' | '1:1' | '2:3';
   /** Swatch shape. Maps to badge-ui's icon for dot/square variants. */
   shape: 'dot' | 'square' | 'line' | 'dashed';
-  /** DEPRECATED (ADR-0063, gh#1563) — use `interactive` instead. When set (and `interactive` is absent), rows are non-interactive <span>s (no click, no toggle). Kept working as a dual-read compat shim (one-time console.warn when it's the name that resolves). Removed in 0.9.0. */
-  static: boolean;
 
   addEventListener(type: 'toggle', listener: (ev: ChartLegendToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(

package/components/chart-legend/chart-legend.examples.md

@@ -12,11 +12,11 @@
 <chart-legend-ui id="legend-bottom" shape="dot" position="bottom" items='[{"key":"a","label":"Series A","slot":0},{"key":"b","label":"Series B","slot":1},{"key":"c","label":"Series C","slot":2}]'></chart-legend-ui>
 ```
 
-## for — mirror a chart's legendData
+## ratio — mirrors a bound chart's resolved ratio (ADR-0074)
 
 ```html
-<div style="display:flex; flex-direction:column; gap:var(--a-space-2);">
-  <chart-ui id="demo-chart" type="multi-line" x="month" y="revenue,users,churn"></chart-ui>
-  <chart-legend-ui id="legend-for" for="demo-chart" shape="line"></chart-legend-ui>
+<div style="display:flex; flex-direction:column; gap:var(--a-space-2); width:360px;">
+  <chart-ui id="ratio-chart-32" type="multi-line" ratio="3:2" x="month" y="revenue,users,churn"></chart-ui>
+  <chart-legend-ui id="ratio-legend-32" for="ratio-chart-32" shape="line"></chart-legend-ui>
 </div>
 ```

package/components/chart-legend/chart-legend.yaml

@@ -23,8 +23,12 @@ props:
     reflect: true
   items:
     description: >-
-      JSON array of {key, label, slot?, pct?} legend items. Takes precedence
-      over [for] when both are provided.
+      JSON array of {key, label, slot?, pct?, deemphasized?} legend items.
+      Takes precedence over [for] when both are provided. `deemphasized`
+      (REQ-R-007) mutes the row's swatch/label to the same muted-neutral
+      tier chart-ui's own internal legend uses for a de-emphasized series
+      (e.g. `composed@1:1`'s secondary line) — mirrored automatically from
+      a `[for]`-bound chart's own `.legendData`, or settable explicitly here.
     type: string
     default: ''
   shape:
@@ -38,7 +42,11 @@ props:
       - dashed
     reflect: true
   position:
-    description: Layout hint — drives flex-direction. Actual placement follows DOM order.
+    description: >-
+      Layout hint — drives flex-direction. Actual placement follows DOM
+      order. Superseded by a resolved `ratio` bucket (below) whenever one
+      is in effect; this is the pre-ADR-0074 fallback for a legend with
+      neither an explicit `ratio` nor a `[for]`-bound chart.
     type: string
     default: bottom
     enum:
@@ -47,22 +55,34 @@ props:
       - left
       - right
     reflect: true
-  static:
+  ratio:
     description: >-
-      DEPRECATED (ADR-0063, gh#1563) — use `interactive` instead. When set
-      (and `interactive` is absent), rows are non-interactive <span>s (no
-      click, no toggle). Kept working as a dual-read compat shim (one-time
-      console.warn when it's the name that resolves). Removed in 0.9.0.
-    type: boolean
-    default: false
+      Chart 2.0 legend layout bucket (ADR-0074, gh#1624 plan step 5,
+      REQ-R-005): 3:2 renders a horizontal row, 1:1 a wrapped 2-column
+      grid, 2:3 a vertical stacked list. An explicit value PINS the
+      bucket regardless of any bound chart. Unset (default) auto-mirrors
+      the `[for]`-bound chart's own resolved `data-ratio-resolved` bucket
+      — the legend never runs its own container-query classification,
+      since its own box is typically a thin strip with no studied aspect
+      of its own. With neither a pin nor a bound chart, no bucket
+      resolves and `position`'s flex-direction rules apply unchanged. The
+      resolved bucket reflects read-only onto the host as
+      `data-ratio-resolved`, mirroring chart-ui's own convention.
+    type: string
+    default: ""
+    enum:
+      - "3:2"
+      - "1:1"
+      - "2:3"
     reflect: true
   interactive:
     description: >-
-      Canonical opt-in spelling (ADR-0063, gh#1563) replacing `static`'s
-      opt-out polarity. Rows are interactive <button>-role badges by
-      default — this default stays `true` in 0.8.42 (deliberately NOT
-      flipped yet; the 0.9.0 cut inverts it to `false` after a full
-      consumer scan of every `<chart-legend-ui>` tag per the ADR).
+      Canonical opt-in spelling (ADR-0063, gh#1563) — the deprecated
+      `static` opt-out alias was cut in 0.8.43 (gh#1617). Rows are
+      interactive <button>-role badges by default — this default stays
+      `true` (deliberately NOT flipped yet; the 0.9.0 cut inverts it to
+      `false` after a full consumer scan of every `<chart-legend-ui>` tag
+      per the ADR).
     type: boolean
     default: true
     reflect: true
@@ -80,7 +100,7 @@ props:
 events:
   toggle:
     description: >-
-      Fires on row click (non-static). Detail: {key, active, mode}. `active` is
+      Fires on row click when interactive. Detail: {key, active, mode}. `active` is
       the new state (true=visible). Consumers (or chart-ui via [for]) wire
       this to series visibility.
     detail:
@@ -104,9 +124,7 @@ states:
   - name: idle
     description: Default, ready for interaction.
   - name: interactive
-    description: Rows are <button>s. Default unless [static].
-  - name: static
-    description: Rows are <span>s. No click handler, no toggle affordance.
+    description: Rows are <button>s (the default). When false, rows are <span>s — no click handler, no toggle affordance.
 traits: []
 tokens: {}
 a2ui:
@@ -115,8 +133,10 @@ a2ui:
       reason: 'Legend pattern.'
     - rule: 'Pairs with <chart-ui> via [for] id-ref (auto-bidirectional series toggling) or via items= for standalone use.'
       reason: 'Composition contract.'
-    - rule: 'position attribute (top|bottom|left|right) places legend relative to its chart; static= disables interactivity.'
+    - rule: 'position attribute (top|bottom|left|right) places legend relative to its chart; interactive="false" disables interactivity.'
       reason: 'Layout + interaction knobs.'
+    - rule: 'ratio attribute (3:2|1:1|2:3, ADR-0074) selects the legend layout shape (row/grid/list); left unset it auto-mirrors a [for]-bound chart''s own resolved ratio.'
+      reason: 'Ratio-responsive layout contract, gh#1624 plan step 5.'
 anti_patterns: []
 examples:
   - name: standalone-with-items
@@ -129,6 +149,16 @@ examples:
           "items": "[{\"key\":\"revenue\",\"label\":\"Revenue\",\"slot\":0},{\"key\":\"users\",\"label\":\"Users\",\"slot\":1}]"
         }
       ]
+  - name: ratio-pinned-grid
+    description: Standalone legend pinned to the 1:1 (2-col grid) layout bucket.
+    a2ui: >-
+      [
+        {
+          "id": "legend", "component": "ChartLegend",
+          "ratio": "1:1",
+          "items": "[{\"key\":\"revenue\",\"label\":\"Revenue\",\"slot\":0},{\"key\":\"users\",\"label\":\"Users\",\"slot\":1},{\"key\":\"churn\",\"label\":\"Churn\",\"slot\":2},{\"key\":\"nps\",\"label\":\"NPS\",\"slot\":3}]"
+        }
+      ]
   - name: mirror-chart-by-id
     description: Legend mirrors a named chart's series data.
     a2ui: >-

package/components/check/check.css

@@ -17,6 +17,14 @@ check-ui[indeterminate] [slot="box"] {
   background: var(--check-bg-checked);
   border-color: var(--check-border-checked);
 }
+/* gh#1596 — a checked/indeterminate box kept its full primary fill when
+   disabled (only the label fg dimmed); higher specificity (2 attrs) than
+   the rule above wins without reordering. */
+check-ui[checked][disabled] [slot="box"],
+check-ui[indeterminate][disabled] [slot="box"] {
+  background: var(--check-bg-checked-disabled);
+  border-color: var(--check-bg-checked-disabled);
+}
 check-ui[checked] {
   --_icon-w:         calc(var(--check-size) * 0.3);
   --_icon-h:         calc(var(--check-size) * 0.55);
@@ -61,6 +69,7 @@ check-ui[indeterminate] {
 
     /* ── State: disabled ── */
     --check-fg-disabled:      var(--a-ui-text-disabled);
+    --check-bg-checked-disabled: var(--a-ui-bg-disabled);
 
     /* ── Check icon (CSS border trick, no SVG) ── */
     --_icon-w:    0;

package/components/color-area/color-area.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/ColorArea.json",
   "title": "ColorArea",
-  "description": "OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated input emitting OKLCH color strings; canonical color authoring surface in the AdiaUI token system. Use for color input in design tools or theming UIs; for simple color swatches use <swatch-ui> or <color-input-ui> instead. Renamed from `<color-picker-ui>` (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger + popover composite shape; this is the inline substrate, mirroring <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` is now a thin deprecated alias subclassing this component.",
+  "description": "OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated input emitting OKLCH color strings; canonical color authoring surface in the AdiaUI token system. Use for color input in design tools or theming UIs; for simple color swatches use <swatch-ui> or <color-input-ui> instead. Renamed from `<color-picker-ui>` (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger + popover composite shape; this is the inline substrate, mirroring <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` was cut in 0.8.43 (gh#1617) — this is the sole tag now.",
   "type": "object",
   "allOf": [
     {

package/components/color-area/color-area.class.js

@@ -15,8 +15,8 @@
  * <color-area-ui value="#3b82f6" format="hex"></color-area-ui>
  *
  * OKLCH-native color picker with 2D area + H/C/L sliders (ADR-0063,
- * gh#1563 — renamed from `<color-picker-ui>`, which is now a thin
- * deprecated alias subclassing this class; see ../color-picker/color-picker.class.js).
+ * gh#1563 — renamed from `<color-picker-ui>`, which was cut in 0.8.43,
+ * gh#1617; this is the sole tag now).
  *
  * Layout:
  *   [═══════════ color area (chroma x lightness) ═══════════]

package/components/color-area/color-area.css

@@ -1,10 +1,7 @@
-/* ADR-0063 (gh#1563) — `@scope` matches by literal tag name, not JS
- * prototype chain: `<color-picker-ui>` subclasses `UIColorArea` (see
- * ../color-picker/color-picker.class.js) but needs its OWN tag named in
- * this scope root to actually receive the styling — same shape as
- * calendar-picker.css's `@scope (calendar-picker-ui, datetime-picker-ui)`
- * for its own deprecated alias. */
-@scope (color-area-ui, color-picker-ui) {
+/* ADR-0063 (gh#1563) — `color-picker-ui` was a thin alias subclassing
+ * `UIColorArea`; cut in 0.8.43 (gh#1617). `color-area-ui` is the sole tag
+ * now. */
+@scope (color-area-ui) {
   :where(:scope) {
     /* ── Tokens ── */
     --color-area-gap:              var(--a-space-2);

package/components/color-area/color-area.d.ts

@@ -1,5 +1,5 @@
 /**
- * `<color-area-ui>` — OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated input emitting OKLCH color strings; canonical color authoring surface in the AdiaUI token system. Use for color input in design tools or theming UIs; for simple color swatches use <swatch-ui> or <color-input-ui> instead. Renamed from `<color-picker-ui>` (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger + popover composite shape; this is the inline substrate, mirroring <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` is now a thin deprecated alias subclassing this component.
+ * `<color-area-ui>` — OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated input emitting OKLCH color strings; canonical color authoring surface in the AdiaUI token system. Use for color input in design tools or theming UIs; for simple color swatches use <swatch-ui> or <color-input-ui> instead. Renamed from `<color-picker-ui>` (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger + popover composite shape; this is the inline substrate, mirroring <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` was cut in 0.8.43 (gh#1617) — this is the sole tag now.
  *
  * @see https://ui-kit.exe.xyz/site/components/color-area
  *

package/components/color-area/color-area.yaml

@@ -15,8 +15,8 @@ description: >-
   or <color-input-ui> instead. Renamed from `<color-picker-ui>`
   (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger +
   popover composite shape; this is the inline substrate, mirroring
-  <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` is now a
-  thin deprecated alias subclassing this component.
+  <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` was cut in
+  0.8.43 (gh#1617) — this is the sole tag now.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
@@ -115,7 +115,7 @@ a2ui:
       reason: 'Canonical color-authoring surface.'
     - rule: 'For simple color swatches (read-only display) use <swatch-ui>; for hex/rgb text input use <color-input-ui>.'
       reason: 'Surface boundary.'
-    - rule: 'Renamed from <color-picker-ui> (ADR-0063, gh#1563); the old tag is a deprecated alias that still works — new generation should reach for ColorArea directly.'
+    - rule: 'Renamed from <color-picker-ui> (ADR-0063, gh#1563); the old tag was cut in 0.8.43 (gh#1617) — ColorArea is the sole tag now.'
       reason: 'Picker-naming convention: -picker names the outer trigger+popover composite, never the inline substrate.'
     - rule: 'Output format defaults to oklch(); set format= to override (hex, rgb, hsl).'
       reason: 'Format knob.'

package/components/color-input/color-input.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/ColorInput.json",
   "title": "ColorInput",
-  "description": "Compact form-bearing color input — opens a popover-anchored\n`<color-area-ui>` from an inline swatch button. §302 (v0.5.12,\nFEEDBACK-29 re-bucket from v0.6.0). Canonicalizes the USAGE.md §221f\nOption B recipe (popover + button + color-area) into a single\nform-associated tag for inline form contexts (settings drawer \"source\ncolor\" field, swatch-row inline-edit, etc.). Composes `<color-area-ui>`\n(ADR-0063, gh#1563 — renamed from `<color-picker-ui>`, which is now a\ndeprecated alias); `color-input-ui`'s own tag/name is unaffected.",
+  "description": "Compact form-bearing color input — opens a popover-anchored\n`<color-area-ui>` from an inline swatch button. §302 (v0.5.12,\nFEEDBACK-29 re-bucket from v0.6.0). Canonicalizes the USAGE.md §221f\nOption B recipe (popover + button + color-area) into a single\nform-associated tag for inline form contexts (settings drawer \"source\ncolor\" field, swatch-row inline-edit, etc.). Composes `<color-area-ui>`\n(ADR-0063, gh#1563 — renamed from `<color-picker-ui>`, cut in 0.8.43,\ngh#1617); `color-input-ui`'s own tag/name is unaffected.",
   "type": "object",
   "allOf": [
     {

package/components/color-input/color-input.class.js

@@ -32,7 +32,7 @@
  *   </color-input-ui>
  *
  * Composes `<color-area-ui>` (ADR-0063, gh#1563 — renamed from
- * `<color-picker-ui>`, which is now a deprecated alias).
+ * `<color-picker-ui>`, cut in 0.8.43, gh#1617).
  *
  * Form-associated via UIFormElement + ElementInternals.
  */

package/components/color-input/color-input.yaml

@@ -12,8 +12,8 @@ description: |-
   Option B recipe (popover + button + color-area) into a single
   form-associated tag for inline form contexts (settings drawer "source
   color" field, swatch-row inline-edit, etc.). Composes `<color-area-ui>`
-  (ADR-0063, gh#1563 — renamed from `<color-picker-ui>`, which is now a
-  deprecated alias); `color-input-ui`'s own tag/name is unaffected.
+  (ADR-0063, gh#1563 — renamed from `<color-picker-ui>`, cut in 0.8.43,
+  gh#1617); `color-input-ui`'s own tag/name is unaffected.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. The consumer (or demo shell) explicitly imports
 # the composed primitives. This element creates `<button-ui>` +

package/components/combobox/combobox.a2ui.json

@@ -339,6 +339,9 @@
       "--combobox-match-bg": {
         "description": "Background for `<mark>` spans that highlight matched substrings"
       },
+      "--combobox-min-width": {
+        "description": "Intrinsic min-width floor on the host (default `20ch`, matching input-ui's own `--input-min-width` UA-baseline derivation) so a combobox in a shrinking flex/grid cell doesn't crush to unusable width. Set to `0` to opt back into full collapse (gh#1633)."
+      },
       "--combobox-option-bg-active": {
         "description": "Background for the currently active (arrow-navigated) option"
       },

package/components/combobox/combobox.class.js

@@ -41,6 +41,7 @@ import { UIFormElement } from '../../core/form.js';
 import { anchorPopover } from '../../core/anchor.js';
 import { untracked } from '../../core/signals.js';
 import { logicalSlotted } from '../../core/logical-children.js';
+import { syncAutoAriaLabel } from '../../core/a11y.js';
 
 function escapeHTML(s) {
   return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -103,6 +104,10 @@ export class UICombobox extends UIFormElement {
   #anchorCleanup = null;
   #rafId = null;
   #instanceId = `combobox-${++cbInstanceSeq}`;
+  // gh#1647: tracks the aria-label VALUE this element itself last derived
+  // from `placeholder` (undefined when none) — value-tracking guard
+  // ported from tag.class.js/select.class.js (gh#1644/#1646).
+  #lastAutoAriaLabel = undefined;
 
   // ── Stable handler refs (so removeEventListener finds them) ──
   #onInputEvent = () => this.#handleInput();
@@ -176,14 +181,10 @@ export class UICombobox extends UIFormElement {
       this.#labelEl.style.display = this.label ? '' : 'none';
     }
 
-    // aria-label fallback when no [label] is set.
-    if (this.label) {
-      this.removeAttribute('aria-label');
-    } else if (this.placeholder) {
-      this.setAttribute('aria-label', this.placeholder);
-    } else {
-      this.removeAttribute('aria-label');
-    }
+    // aria-label fallback when no [label] is set (gh#1647) — never clobber
+    // a consumer's own aria-label (value-tracking guard, gh#1644/#1646).
+    const ariaSource = this.label ? '' : (this.placeholder || '');
+    this.#lastAutoAriaLabel = syncAutoAriaLabel(this, this.#lastAutoAriaLabel, ariaSource);
 
     // Toggle clear-button visibility when [clearable].
     if (this.#clearBtn) {

package/components/combobox/combobox.css

@@ -6,6 +6,15 @@
     --combobox-height:              var(--a-size);
     --combobox-px:                  var(--a-ui-px);
     --combobox-radius:              var(--a-radius);
+    /* gh#1633 / ADIA2-9136 (adiav2#12791) — the host's own `min-width: 0`
+       below (the ellipsis-reset trick, kept for [data-input] inside this
+       floor) had no intrinsic lower bound, so a combobox in a shrinking
+       flex/grid cell crushed to unusable width — the same gap already
+       fixed on --input-min-width (this family's reference; see input.css,
+       gh#781) and on --select-min-width (same fix, select.css). Same
+       ch-based UA-baseline derivation. Override to 0 to opt back into
+       full collapse. */
+    --combobox-min-width:           20ch;
 
     /* ── Typography ── */
     --combobox-font-size:           var(--a-ui-size);
@@ -62,7 +71,11 @@
     flex-direction: column;
     gap: var(--combobox-gap);
     position: relative;
-    min-width: 0;
+    /* Floored, not zeroed — see --combobox-min-width above (gh#1633).
+       [data-input]'s own `min-width: 0` further down stays 0: that one
+       exists so its value text can ellipsis-truncate INSIDE this floor,
+       not to guard the host's own collapse. */
+    min-width: var(--combobox-min-width);
     /* font-family floor on the host — internal input/options inherit it. */
     font-family: var(--combobox-font-family, var(--a-font-family-ui));
     font-size: var(--combobox-font-size);
@@ -326,9 +339,17 @@ combobox-ui [data-listbox] [role="group"] [data-group-label] {
   white-space: nowrap;
 }
 
-combobox-ui [data-empty],
-combobox-ui [data-loading],
-combobox-ui [data-footer] {
+/* Scoped to `[data-listbox]`'s own markers — gh#1700, same shape as
+   gh#1697/#1698. The input span (`[data-input]`) toggles the SAME
+   `data-empty` attribute for an unrelated reason (gating its own
+   `::before` placeholder pseudo) — a bare, unscoped `combobox-ui
+   [data-empty]` selector matched BOTH uses, and (being (0,1,1)) outranked
+   `[data-input]`'s own (0,1,0) padding/color/font-size, one property away
+   from repeating the command-ui leak. Scoping to the listbox container
+   removes the collision at its root. */
+combobox-ui [data-listbox] [data-empty],
+combobox-ui [data-listbox] [data-loading],
+combobox-ui [data-listbox] [data-footer] {
   padding: var(--a-space-2) var(--a-ui-px);
   color: var(--a-ui-text-muted);
   font-size: var(--a-ui-size);

package/components/combobox/combobox.yaml

@@ -257,6 +257,12 @@ tokens:
       tinted selected row.
   --combobox-match-bg:
     description: Background for `<mark>` spans that highlight matched substrings
+  --combobox-min-width:
+    description: >-
+      Intrinsic min-width floor on the host (default `20ch`, matching
+      input-ui's own `--input-min-width` UA-baseline derivation) so a
+      combobox in a shrinking flex/grid cell doesn't crush to unusable
+      width. Set to `0` to opt back into full collapse (gh#1633).
 requiredIcons:
   - caret-down
   - x-circle

package/components/command/command.css

@@ -221,7 +221,23 @@
   }
 
   /* ── Empty state ── */
-  [data-empty] {
+  /* Scoped to `[slot="list"]`'s own `[data-empty]` — gh#1697. The search
+     input (`& > header [slot="input"]`) toggles the SAME `data-empty`
+     attribute for an unrelated reason (gating its own `::before`
+     placeholder pseudo, per REQ above) — a bare, unscoped `[data-empty]`
+     selector matched BOTH uses, so this rule's `text-align: center` leaked
+     onto the input span whenever it was empty, centering the placeholder
+     (and, structurally, any text a consumer's own script inserted while
+     the attribute was still present). `padding`/`color` never leaked in
+     practice — `& > header [slot="input"]`'s own compound selector
+     (header-descendant + attribute, (0,1,1)) already outranks the bare
+     `[data-empty]` (0,1,0) for those two properties — but `text-align` had
+     no competing declaration anywhere else in this file, so the leaked
+     value won by default with nothing to lose against. Scoping the
+     selector to the list container removes the collision at its root
+     instead of only patching the one property a screenshot happened to
+     catch. */
+  [slot="list"] [data-empty] {
     padding: var(--command-py) var(--command-px);
     color: var(--command-empty-fg);
     text-align: center;

package/components/context-menu/context-menu.d.ts

@@ -56,6 +56,8 @@ export type ContextMenuSelectEvent = CustomEvent<ContextMenuSelectEventDetail>;
 export class UIContextMenu extends UIElement {
   /** CSS selector(s) for target element(s). Empty = use default-slot child. */
   for: string;
+  /** Long-press duration (ms) on touch devices to open the menu. */
+  longPressMs: number;
   /** Programmatic open state. Set true to open at target center. */
   open: boolean;
 

package/components/drilldown/drilldown.a2ui.json

@@ -236,6 +236,9 @@
       "--drilldown-row-px": {
         "description": "Inline padding of each row."
       },
+      "--drilldown-row-py": {
+        "description": "Block padding of each row (grows a row past --drilldown-row-height once content, e.g. a two-line label+meta row, exceeds it)."
+      },
       "--drilldown-row-radius": {
         "description": "Border radius of each row."
       }

package/components/drilldown/drilldown.css

@@ -4,6 +4,7 @@
     --drilldown-row-height:  var(--a-size, 2.25rem);
     --drilldown-row-radius:  var(--a-radius-sm);
     --drilldown-row-px:      var(--a-space-2);
+    --drilldown-row-py:      var(--a-space-1-5);
     --drilldown-row-gap:     var(--a-space-2);
     --drilldown-header-px:   var(--a-space-3);
     --drilldown-header-py:   var(--a-space-2);
@@ -189,13 +190,19 @@
     to   { transform: none; opacity: 1; }
   }
 
-  /* ── Rows ── */
+  /* ── Rows ──
+     min-height sets the single-line floor; padding-block (--drilldown-row-py,
+     matching menu-item-ui/action-item-ui's own row-density token) only grows
+     the row once content (e.g. a two-line label+meta row, gh#1591) exceeds
+     that floor — the two never stack into a taller one-liner because a
+     single-line row's content-box is shorter than the min-height already. */
   [role="option"] {
     display: flex;
     align-items: center;
     gap: var(--drilldown-row-gap);
     min-height: var(--drilldown-row-height);
     padding-inline: var(--drilldown-row-px);
+    padding-block: var(--drilldown-row-py);
     border-radius: var(--drilldown-row-radius);
     cursor: pointer;
     outline: none;

package/components/drilldown/drilldown.yaml

@@ -194,6 +194,8 @@ tokens:
     description: Border radius of each row.
   --drilldown-row-px:
     description: Inline padding of each row.
+  --drilldown-row-py:
+    description: Block padding of each row (grows a row past --drilldown-row-height once content, e.g. a two-line label+meta row, exceeds it).
   --drilldown-row-gap:
     description: Gap between row elements (dot / main / counts / chevron).
   --drilldown-bg-hover:

package/components/field/field.class.js

@@ -279,11 +279,11 @@ export class UIField extends UIElement {
     'input-ui', 'textarea-ui', 'select-ui', 'combobox-ui', 'search-ui',
     'check-ui', 'radio-ui', 'switch-ui', 'slider-ui', 'range-ui',
     'otp-input-ui', 'tags-input-ui', 'chat-input-ui', 'autocomplete-input-ui',
-    'datetime-picker-ui', 'date-range-picker-ui', 'calendar-picker-ui',
-    // ADR-0063 (gh#1563) — color-picker-ui's real implementation moved to
-    // color-area-ui; color-picker-ui is now a thin deprecated alias. Both
-    // tags need to resolve here since either may be the one actually used.
-    'color-area-ui', 'color-picker-ui', 'upload-ui', 'rating-ui', 'segmented-ui',
+    'date-range-picker-ui', 'calendar-picker-ui',
+    // datetime-picker-ui / color-picker-ui cut in 0.8.43 (gh#1617,
+    // ADR-0063/gh#1372) — calendar-picker-ui / color-area-ui are the
+    // sole tags now.
+    'color-area-ui', 'upload-ui', 'rating-ui', 'segmented-ui',
     'input', 'textarea', 'select',
   ]);
 

package/components/heatmap/heatmap.a2ui.json

@@ -53,6 +53,11 @@
     "component": {
       "const": "Heatmap"
     },
+    "data": {
+      "description": "Cell data as a JSON array of `{ r, c, v, label? }` objects, or set the `.data` property directly with an already-parsed array. Parsed on connect if the attribute is present and `.data` hasn't already been set programmatically.",
+      "type": "string",
+      "default": ""
+    },
     "noLegend": {
       "description": "Hide the Less/More legend strip",
       "type": "boolean",

package/components/heatmap/heatmap.d.ts

@@ -27,6 +27,8 @@ export class UIHeatmap extends UIElement {
   colorScheme: 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'data-ramp';
   /** Column count */
   cols: number;
+  /** Cell data as a JSON array of `{ r, c, v, label? }` objects, or set the `.data` property directly with an already-parsed array. Parsed on connect if the attribute is present and `.data` hasn't already been set programmatically. */
+  data: string;
   /** Hide the Less/More legend strip */
   noLegend: boolean;
   /** Row count */