@adia-ai/web-components 0.8.41 → 0.8.43

package/components/calendar-picker/calendar-picker.css

@@ -1,9 +1,7 @@
-/* gh#1372, #1363 C3c — datetime-picker-ui is now a thin UICalendarPicker
-   subclass (see ../datetime-picker/datetime-picker.class.js); its own CSS
-   file no longer carries independent rules. The scope root below covers
-   BOTH tags so a <datetime-picker-ui> host renders identically to
-   <calendar-picker-ui precision="minute">. */
-@scope (calendar-picker-ui, datetime-picker-ui) {
+/* gh#1372, #1363 C3c — datetime-picker-ui was a thin UICalendarPicker
+   subclass folding datetime mode into this component's widened precision
+   axis; cut in 0.8.43 (gh#1617). calendar-picker-ui is the sole tag now. */
+@scope (calendar-picker-ui) {
   :where(:scope) {
     /* ── Tokens ── */
 
@@ -192,7 +190,7 @@
 /* ── Calendar popover (outside @scope — popover lives in top layer) ── */
 /* Custom properties inherit from the host, so --calendar-picker-* tokens are available here. */
 
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] {
+calendar-picker-ui [slot="popover"] {
   margin: 0;
   padding: var(--calendar-picker-popover-padding);
   border: 1px solid var(--calendar-picker-popover-border);
@@ -211,7 +209,7 @@
               translate var(--a-duration-fast) var(--a-easing-out);
 }
 
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:popover-open {
+calendar-picker-ui [slot="popover"]:popover-open {
   @starting-style {
     opacity: 0;
     translate: 0 -4px;
@@ -219,7 +217,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] { transition: none; }
+  calendar-picker-ui [slot="popover"] { transition: none; }
 }
 
 /* ── Substrate grid (gh#1371, #1363 C3a) ──
@@ -231,7 +229,7 @@
    so an existing consumer override keeps working unchanged (non-breaking —
    ADR-0055 precedent) and mirrors date-range-picker's own
    `date-range-picker-ui calendar-grid-ui { --calendar-grid-*: … }` pattern. */
-:is(calendar-picker-ui, datetime-picker-ui) calendar-grid-ui {
+calendar-picker-ui calendar-grid-ui {
   --calendar-grid-header-gap:           var(--calendar-picker-header-gap);
   --calendar-grid-header-mb:            var(--calendar-picker-header-mb);
   --calendar-grid-title-fg:             var(--calendar-picker-title-fg);
@@ -281,11 +279,11 @@
    single-pane (date-only, default) popover keeps its original fixed-width
    block layout unchanged. Ported near-verbatim from the former
    datetime-picker.css. */
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:has([data-time-pane]) {
+calendar-picker-ui [slot="popover"]:has([data-time-pane]) {
   width: auto;
 }
 
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:has([data-time-pane]):popover-open {
+calendar-picker-ui [slot="popover"]:has([data-time-pane]):popover-open {
   display: grid;
   grid-template-columns: auto auto auto;
   grid-template-areas: "cal divider time";
@@ -293,22 +291,22 @@
   align-items: start;
 }
 
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > calendar-grid-ui {
+calendar-picker-ui [slot="popover"] > calendar-grid-ui {
   grid-area: cal;
 }
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > [data-pane-divider] {
+calendar-picker-ui [slot="popover"] > [data-pane-divider] {
   grid-area: divider;
   align-self: stretch;
   --divider-color: var(--calendar-picker-divider);
 }
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > [data-time-pane] {
+calendar-picker-ui [slot="popover"] > [data-time-pane] {
   grid-area: time;
   align-self: start;
 }
 
 /* Footer area (consumer-supplied [slot="footer"]) — spans all columns
    under the pane(s), in either single- or two-pane mode. */
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] [slot="footer"] {
+calendar-picker-ui [slot="popover"] [slot="footer"] {
   grid-column: 1 / -1;
   display: flex;
   justify-content: flex-end;
@@ -320,14 +318,14 @@
 /* Narrow surfaces (e.g. inside a card on mobile): stack the panes
    vertically and replace the vertical divider with a horizontal rule. */
 @container (max-width: 32rem) {
-  :is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:has([data-time-pane]):popover-open {
+  calendar-picker-ui [slot="popover"]:has([data-time-pane]):popover-open {
     grid-template-columns: 1fr;
     grid-template-areas:
       "cal"
       "divider"
       "time";
   }
-  :is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > [data-pane-divider] {
+  calendar-picker-ui [slot="popover"] > [data-pane-divider] {
     align-self: auto;
   }
 }

package/components/calendar-picker/calendar-picker.yaml

@@ -13,8 +13,8 @@ description: >-
   single-datetime input in forms; for date ranges use
   <date-range-picker-ui> instead of composing two calendar-picker
   instances. gh#1372 (#1363 C3c) folded <datetime-picker-ui>'s surface into
-  this widened `precision` axis — see the deprecated
-  <datetime-picker-ui> alias.
+  this widened `precision` axis — that thin alias component was cut in
+  0.8.43 (gh#1617); this is the sole tag now.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # in their render() do NOT auto-import them. Consumer (or demo shell) must
 # explicitly import each composed primitive.

package/components/card/card.css

@@ -431,7 +431,7 @@
      only collision-free for the bare-marks case: a sparkline (its
      renderer never emits axis ticks, gridlines, value labels, or a
      legend — chart.class.js #renderSparkline), or any other chart-ui
-     type with BOTH [hide-grid] and [hide-values] set (the author opted
+     type with BOTH [no-grid] and [no-values] set (the author opted
      out of every text element). A chart that still draws guides or
      value text — or is paired with a <chart-legend-ui> — needs
      clearance from the card's frame, or that text collides with the
@@ -444,8 +444,8 @@
      section below, wired via chart-legend-ui[for="<chart id>"], which
      never enters this selector (see chart-in-card.examples.html's
      "Full-bleed chart + legend band" example). */
-  & > section[bleed]:has(> chart-ui:not([type="sparkline"]):not([hide-grid])),
-  & > section[bleed]:has(> chart-ui:not([type="sparkline"]):not([hide-values])),
+  & > section[bleed]:has(> chart-ui:not([type="sparkline"]):not([no-grid])),
+  & > section[bleed]:has(> chart-ui:not([type="sparkline"]):not([no-values])),
   & > section[bleed]:has(> chart-legend-ui) {
     margin: var(--card-inset);
     padding: 0;

package/components/chart/chart.a2ui.json

@@ -87,23 +87,23 @@
       ],
       "default": "abbr"
     },
-    "hideAverage": {
-      "description": "When true, suppress the overlaid average line",
+    "loading": {
+      "description": "Show a skeleton placeholder instead of the chart body. Set to true while data is being fetched; clear once data arrives. Preserves the element's aspect-ratio dimensions so the skeleton occupies the same space the chart will fill. Parity with stat-ui[loading] and table-ui[loading] (§FB-12, v0.6.27).",
       "type": "boolean",
       "default": false
     },
-    "hideGrid": {
-      "description": "Hide gridlines",
+    "noAverage": {
+      "description": "When true, suppress the overlaid average line. Canonical spelling (ADR-0063, gh#1563) — the deprecated `hideAverage` dual-read shim was cut in 0.8.43 (gh#1617).",
       "type": "boolean",
       "default": false
     },
-    "hideValues": {
-      "description": "Hide value labels",
+    "noGrid": {
+      "description": "Hide gridlines. Canonical spelling (ADR-0063, gh#1563) — the deprecated `hideGrid` dual-read shim was cut in 0.8.43 (gh#1617).",
       "type": "boolean",
       "default": false
     },
-    "loading": {
-      "description": "Show a skeleton placeholder instead of the chart body. Set to true while data is being fetched; clear once data arrives. Preserves the element's aspect-ratio dimensions so the skeleton occupies the same space the chart will fill. Parity with stat-ui[loading] and table-ui[loading] (§FB-12, v0.6.27).",
+    "noValues": {
+      "description": "Hide value labels. Canonical spelling (ADR-0063, gh#1563) — the deprecated `hideValues` dual-read shim was cut in 0.8.43 (gh#1617).",
       "type": "boolean",
       "default": false
     },

package/components/chart/chart.class.js

@@ -21,10 +21,10 @@
  *   type         — chart type (default: 'bar')
  *   x            — key for X-axis data
  *   y            — key(s) for Y-axis, comma-separated for multi-series
- *   hide-average — suppress the overlaid average line on bar/line (default: false — line shown)
+ *   no-average   — suppress the overlaid average line on bar/line (default: false — line shown).
  *   color        — accent/success/warning/danger/info
- *   hide-grid    — hide gridlines
- *   hide-values  — hide value labels
+ *   no-grid      — hide gridlines.
+ *   no-values    — hide value labels.
  *   corner-radius — bar corner radius in px (default: null, falls back to --a-radius)
  *   dots         — line/multi-line marker visibility: all|none|hover|last (default: all)
  *   series-emphasis — multi-line: series key that keeps full area+line treatment; others render line-only, dimmed
@@ -215,10 +215,12 @@ export class UIChart extends UIElement {
     type:        { type: String,  default: 'bar',    reflect: true },
     x:           { type: String,  default: '',       reflect: true },
     y:           { type: String,  default: '',       reflect: true },
-    hideAverage: { type: Boolean, default: false,    reflect: true, attribute: 'hide-average' },
+    // ADR-0063 (gh#1563) — `no-*` is the ratified negation prefix; the
+    // deprecated `hide-*` dual-read shim was cut in 0.8.43 (gh#1617).
+    noAverage:   { type: Boolean, default: false,    reflect: true, attribute: 'no-average' },
     color:       { type: String,  default: '',       reflect: true },
-    hideGrid:    { type: Boolean, default: false,    reflect: true, attribute: 'hide-grid' },
-    hideValues:  { type: Boolean, default: false,    reflect: true, attribute: 'hide-values' },
+    noGrid:      { type: Boolean, default: false,    reflect: true, attribute: 'no-grid' },
+    noValues:    { type: Boolean, default: false,    reflect: true, attribute: 'no-values' },
     cornerRadius: { type: Number, default: null,     reflect: true, attribute: 'corner-radius' },
     smooth:      { type: Number,  default: 0.4,      reflect: true },
     size:        { type: String,  default: '',       reflect: true },
@@ -439,13 +441,13 @@ export class UIChart extends UIElement {
     // When the grid is hidden (in-card sparkline-like use) we can zero
     // out the Y-axis label gutter entirely — otherwise the plot area
     // collapses at small sizes.
-    const hideGrid = this.hideGrid;
-    const yLabelW = hideGrid ? 0 : fontSize * 3.2;
+    const noGrid = this.noGrid;
+    const yLabelW = noGrid ? 0 : fontSize * 3.2;
     const hasXLabels = !!this.x;
     const pad = {
-      top:    hideGrid ? 2 : fontSize * 1.6,
-      right:  hideGrid ? 2 : fontSize * 1.2,
-      bottom: !hasXLabels || hideGrid ? 2 : fontSize * 2.2,
+      top:    noGrid ? 2 : fontSize * 1.6,
+      right:  noGrid ? 2 : fontSize * 1.2,
+      bottom: !hasXLabels || noGrid ? 2 : fontSize * 2.2,
       left:   yLabelW,
     };
 
@@ -1035,11 +1037,11 @@ export class UIChart extends UIElement {
       displayTicks = ticks.filter((_, i) => i % 2 === 0 || i === ticks.length - 1);
     }
 
-    // hideGrid suppresses both gridlines AND axis labels — callers who
-    // want labels without gridlines can omit hide-grid and rely on token
+    // noGrid suppresses both gridlines AND axis labels — callers who
+    // want labels without gridlines can omit no-grid and rely on token
     // overrides to make gridlines transparent. This keeps compact in-card
     // charts visually clean.
-    if (!this.hideGrid) {
+    if (!this.noGrid) {
       const tickRange = ticks[ticks.length - 1] - ticks[0];
       const safeRange = tickRange || 1; // Prevent division by zero
       for (const t of displayTicks) {
@@ -1094,8 +1096,8 @@ export class UIChart extends UIElement {
     let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
 
     // At sm auto-hide value labels (they overlap at narrow widths).
-    const showValues = !this.hideValues && dims.sizeClass !== 'sm';
-    const showAverage = !this.hideAverage && vals.length > 1 && dims.sizeClass !== 'sm' && !this.hideGrid;
+    const showValues = !this.noValues && dims.sizeClass !== 'sm';
+    const showAverage = !this.noAverage && vals.length > 1 && dims.sizeClass !== 'sm' && !this.noGrid;
 
     for (let i = 0; i < data.length; i++) {
       const v = vals[i];
@@ -1155,8 +1157,8 @@ export class UIChart extends UIElement {
     const isSm = dims.sizeClass === 'sm';
     const dotR = isSm ? 1.5 : 3;
     const hitR = Math.max(dotR, 10);  // invisible hit-target for tooltip
-    const showValues = !this.hideValues && !isSm;
-    const showAverage = !this.hideAverage && vals.length > 1 && !isSm && !this.hideGrid;
+    const showValues = !this.noValues && !isSm;
+    const showAverage = !this.noAverage && vals.length > 1 && !isSm && !this.noGrid;
 
     points.forEach((p, i) => {
       if (this.#shouldRenderDot(i, points.length)) {
@@ -2108,7 +2110,7 @@ export class UIChart extends UIElement {
         const by = pad.top + plotH - barH;
         svg += `<path${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })} d="${topRoundedBarPath(bx, by, subBarW, barH, this.#resolveRadius())}"/>`;
 
-        if (!this.hideValues) {
+        if (!this.noValues) {
           svg += `<text data-value x="${bx + subBarW / 2}" y="${by - 4}" text-anchor="middle" font-size="${dims.valueSize}">${this.#fmtValue(v)}</text>`;
         }
       }

package/components/chart/chart.d.ts

@@ -30,14 +30,14 @@ export class UIChart extends UIElement {
   dots: 'all' | 'none' | 'hover' | 'last';
   /** Number-format mode applied to axis labels + value overlays + donut total + gauge value + treemap value + funnel value + internal tooltip. `abbr` is the legacy 1.2K / 3M format; `decimal` fixes 2 decimals; `currency` prefixes via `--chart-currency-prefix` token (default "$"); `percent` multiplies × 100 and adds a % suffix. */
   format: 'abbr' | 'decimal' | 'currency' | 'percent';
-  /** When true, suppress the overlaid average line */
-  hideAverage: boolean;
-  /** Hide gridlines */
-  hideGrid: boolean;
-  /** Hide value labels */
-  hideValues: boolean;
   /** Show a skeleton placeholder instead of the chart body. Set to true while data is being fetched; clear once data arrives. Preserves the element's aspect-ratio dimensions so the skeleton occupies the same space the chart will fill. Parity with stat-ui[loading] and table-ui[loading] (§FB-12, v0.6.27). */
   loading: boolean;
+  /** When true, suppress the overlaid average line. Canonical spelling (ADR-0063, gh#1563) — the deprecated `hideAverage` dual-read shim was cut in 0.8.43 (gh#1617). */
+  noAverage: boolean;
+  /** Hide gridlines. Canonical spelling (ADR-0063, gh#1563) — the deprecated `hideGrid` dual-read shim was cut in 0.8.43 (gh#1617). */
+  noGrid: boolean;
+  /** Hide value labels. Canonical spelling (ADR-0063, gh#1563) — the deprecated `hideValues` dual-read shim was cut in 0.8.43 (gh#1617). */
+  noValues: boolean;
   /** Multi-line only. Names one series key (matching a `y` key) to render at full strength — area fill + full-opacity line. Every other series drops its area fill and renders line-only at --chart-deemphasized-opacity. Empty (default) applies full treatment to every series, unchanged from pre-gh#561 behavior. */
   seriesEmphasis: string;
   /** Chart size */

package/components/chart/chart.yaml

@@ -61,21 +61,28 @@ props:
       - warning
       - danger
       - info
-  hideAverage:
-    description: When true, suppress the overlaid average line
+  noAverage:
+    description: >-
+      When true, suppress the overlaid average line. Canonical spelling
+      (ADR-0063, gh#1563) — the deprecated `hideAverage` dual-read shim
+      was cut in 0.8.43 (gh#1617).
     type: boolean
     default: false
-    attribute: hide-average
-  hideGrid:
-    description: Hide gridlines
+    attribute: no-average
+  noGrid:
+    description: >-
+      Hide gridlines. Canonical spelling (ADR-0063, gh#1563) — the
+      deprecated `hideGrid` dual-read shim was cut in 0.8.43 (gh#1617).
     type: boolean
     default: false
-    attribute: hide-grid
-  hideValues:
-    description: Hide value labels
+    attribute: no-grid
+  noValues:
+    description: >-
+      Hide value labels. Canonical spelling (ADR-0063, gh#1563) — the
+      deprecated `hideValues` dual-read shim was cut in 0.8.43 (gh#1617).
     type: boolean
     default: false
-    attribute: hide-values
+    attribute: no-values
   cornerRadius:
     description: Bar corner radius in px (null = let CSS tokens decide)
     type: number

package/components/chart-legend/chart-legend.a2ui.json

@@ -26,6 +26,11 @@
       "type": "string",
       "default": ""
     },
+    "interactive": {
+      "description": "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
+    },
     "onToggle": {
       "description": "Series-toggle mode emitted via the `toggle` event. `hide` removes the series from the render; `opacity` fades it. Wired via [for] on chart-ui.",
       "type": "string",
@@ -56,11 +61,6 @@
         "dashed"
       ],
       "default": "dot"
-    },
-    "static": {
-      "description": "When set, rows are non-interactive <span>s (no click, no toggle).",
-      "type": "boolean",
-      "default": false
     }
   },
   "required": [
@@ -76,7 +76,7 @@
     ],
     "events": {
       "toggle": {
-        "description": "Fires on row click (non-static). Detail: {key, active, mode}. `active` is the new state (true=visible). Consumers (or chart-ui via [for]) wire this to series visibility.",
+        "description": "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": {
           "active": {
             "description": "New visibility state (true = visible).",
@@ -133,12 +133,8 @@
         "name": "idle"
       },
       {
-        "description": "Rows are <button>s. Default unless [static].",
+        "description": "Rows are <button>s (the default). When false, rows are <span>s — no click handler, no toggle affordance.",
         "name": "interactive"
-      },
-      {
-        "description": "Rows are <span>s. No click handler, no toggle affordance.",
-        "name": "static"
       }
     ],
     "status": "stable",

package/components/chart-legend/chart-legend.class.js

@@ -35,16 +35,18 @@
  *   position   — top | bottom | left | right. Layout hint; actual placement
  *                is where the element is placed in the DOM. Drives
  *                flex-direction.
- *   static     — when set, rows render as non-interactive badges (no
- *                role/tabindex/handlers). Default is interactive
- *                `role="button"` badges that toggle on click + Enter/Space.
+ *   interactive — canonical opt-in spelling (ADR-0063, gh#1563). Rows
+ *                default interactive (`role="button"` badges that toggle
+ *                on click + Enter/Space) until the 0.9.0 default-inversion
+ *                cut. The deprecated `static` opt-out alias was cut in
+ *                0.8.43 (gh#1617).
  *   on-toggle  — hide | opacity. Default hide. Escape hatch per OD-CHART-09.
  *                Reported via the `toggle` event detail; chart-ui reads it
  *                when wired via [for].
  *
  * Events:
  *   toggle — detail: {key, active, mode}. Fires on row click when
- *            not [static]. `active` is the new state (true=visible).
+ *            interactive. `active` is the new state (true=visible).
  */
 
 import { UIElement } from '../../core/element.js';
@@ -58,7 +60,14 @@ export class UIChartLegend extends UIElement {
     items:    { type: String,  default: '',       reflect: false },
     shape:    { type: String,  default: 'dot',    reflect: true },
     position: { type: String,  default: 'bottom', reflect: true },
-    static:   { type: Boolean, default: false,    reflect: true },
+    // ADR-0063 (gh#1563) — `interactive` (opt-in) is the canonical
+    // positively-named boolean; the deprecated `static` opt-out alias was
+    // cut in 0.8.43 (gh#1617). Deliberately keeps its `true` default:
+    // the real default-inversion (interactive defaulting to `false`) is
+    // still scheduled for 0.9.0 per the ADR's own consumer-scan
+    // requirement (every `<chart-legend-ui>` tag needs review first) —
+    // out of this ticket's scope, which only cuts the `static` alias.
+    interactive: { type: Boolean, default: true,  reflect: true },
     onToggle: { type: String,  default: 'hide',   reflect: true, attribute: 'on-toggle' },
   };
 
@@ -152,11 +161,11 @@ export class UIChartLegend extends UIElement {
          keyboard-operable without a wrapping <button>. */
       const row = document.createElement('badge-ui');
       row.setAttribute('data-row', '');
-      row.setAttribute('role', this.static ? 'listitem' : 'button');
+      row.setAttribute('role', this.interactive ? 'button' : 'listitem');
       row.setAttribute('text', label);
       if (key) row.setAttribute('data-key', key);
       if (active) row.setAttribute('data-active', '');
-      if (!this.static) {
+      if (this.interactive) {
         row.setAttribute('tabindex', '0');
         row.setAttribute('aria-pressed', active ? 'true' : 'false');
       }
@@ -181,7 +190,7 @@ export class UIChartLegend extends UIElement {
       swatch.style.setProperty('--swatch-color', swatchColor);
       row.appendChild(swatch);
 
-      if (!this.static) {
+      if (this.interactive) {
         row.addEventListener('click', (e) => this.#onRowToggle(e, key));
         row.addEventListener('keydown', (e) => {
           if (e.key === 'Enter' || e.key === ' ') {

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

@@ -66,8 +66,11 @@
                 color var(--a-duration-fast) var(--a-easing);
   }
 
-  /* Static rows — no interaction */
-  :scope[static] badge-ui[data-row] {
+  /* Non-interactive rows. ADR-0063 (gh#1563): `:not([interactive])` covers
+     both today's opt-out spelling (`[static]` mirrors onto `[interactive]`
+     being removed, in chart-legend.class.js's connected()) and the eventual
+     0.9.0 default-inversion, in one selector. */
+  :scope:not([interactive]) badge-ui[data-row] {
     cursor: default;
   }
 

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

@@ -28,14 +28,14 @@ export class UIChartLegend extends UIElement {
   items: string;
   /** id-ref of a chart-ui / heatmap-ui to mirror series from. */
   for: string;
+  /** 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. */
   position: 'top' | 'bottom' | 'left' | 'right';
   /** Swatch shape. Maps to badge-ui's icon for dot/square variants. */
   shape: 'dot' | 'square' | 'line' | 'dashed';
-  /** When set, rows are non-interactive <span>s (no click, no toggle). */
-  static: boolean;
 
   addEventListener(type: 'toggle', listener: (ev: ChartLegendToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(

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

@@ -47,10 +47,16 @@ props:
       - left
       - right
     reflect: true
-  static:
-    description: When set, rows are non-interactive <span>s (no click, no toggle).
+  interactive:
+    description: >-
+      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: false
+    default: true
     reflect: true
   onToggle:
     description: >-
@@ -66,7 +72,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:
@@ -90,9 +96,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:
@@ -101,7 +105,7 @@ 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.'
 anti_patterns: []
 examples:

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-picker/color-picker.a2ui.json → color-area/color-area.a2ui.json}

@@ -1,8 +1,8 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/ColorPicker.json",
-  "title": "ColorPicker",
-  "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.",
+  "$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>` was cut in 0.8.43 (gh#1617) — this is the sole tag now.",
   "type": "object",
   "allOf": [
     {
@@ -19,7 +19,7 @@
       "default": "NaN"
     },
     "component": {
-      "const": "ColorPicker"
+      "const": "ColorArea"
     },
     "disabled": {
       "description": "Disables all interaction",
@@ -96,22 +96,24 @@
     "examples": [
       {
         "description": "Color picker card with a color picker component for selecting colors with swatches.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"cp\"\n    ]\n  },\n  {\n    \"id\": \"cp\",\n    \"component\": \"ColorPicker\",\n    \"value\": \"#6366f1\"\n  }\n]",
-        "name": "color-picker-demo"
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"cp\"\n    ]\n  },\n  {\n    \"id\": \"cp\",\n    \"component\": \"ColorArea\",\n    \"value\": \"#6366f1\"\n  }\n]",
+        "name": "color-area-demo"
       },
       {
         "description": "Color picker with swatch selection in a card.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"cp\"\n    ]\n  },\n  {\n    \"id\": \"cp\",\n    \"component\": \"ColorPicker\",\n    \"value\": \"#3b82f6\"\n  }\n]",
-        "name": "color-picker-panel"
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"cp\"\n    ]\n  },\n  {\n    \"id\": \"cp\",\n    \"component\": \"ColorArea\",\n    \"value\": \"#3b82f6\"\n  }\n]",
+        "name": "color-area-panel"
       }
     ],
     "keywords": [
+      "colorarea",
+      "color-area",
       "colorpicker",
       "color-picker",
       "color",
       "picker"
     ],
-    "name": "UIColorPicker",
+    "name": "UIColorArea",
     "parts": {},
     "related": [
       "grid",
@@ -131,13 +133,14 @@
     ],
     "status": "stable",
     "synonyms": {
-      "color-picker": [
+      "color-area": [
         "color-canvas",
         "color-surface",
-        "swatch-picker"
+        "swatch-picker",
+        "color-picker"
       ]
     },
-    "tag": "color-picker-ui",
+    "tag": "color-area-ui",
     "tokens": {},
     "traits": [],
     "version": 1