@adia-ai/web-components 0.8.40 → 0.8.42

package/components/card/card.examples.md

@@ -16,10 +16,10 @@
 </card-ui>
 ```
 
-## elevation
+## padding
 
 ```html
-<card-ui elevation="0">
-  <section>No shadow</section>
+<card-ui padding="none">
+  <section>No interior padding</section>
 </card-ui>
 ```

package/components/card/card.yaml

@@ -12,11 +12,35 @@ description: Bordered container with header, body, and footer sections. The nest
   a [slot="description"] + [slot="action"] space-between pattern; multiple <section> siblings stack as the body.
 props:
   padding:
-    description: Interior padding scale (overrides --card-padding). Accepts the named scale (none/xs/sm/md/lg/xl) or a numeric
-      rung ("1"…"16").
+    description: Interior padding scale — overrides --card-inset (the header/section/footer inset token) for the whole
+      card. Accepts the named scale (none/xs/sm/md/lg/xl — the parametric --a-padding-* tokens, same vocabulary as
+      block-ui's [padding]) or a literal space rung ("0"/"1"…"10"/"12"/"16", mapped to --a-space-N). Empty (default)
+      defers to the ambient --card-inset (context/[size]-driven) — unchanged behavior for the many existing cards
+      that never set this attribute.
     type: string
-    default: md
-    reflect: false  # declarative presentational attribute — CSS/author-time read, non-reactive by design
+    default: ''
+    enum:
+    - ''
+    - none
+    - xs
+    - sm
+    - md
+    - lg
+    - xl
+    - '0'
+    - '1'
+    - '2'
+    - '3'
+    - '4'
+    - '5'
+    - '6'
+    - '7'
+    - '8'
+    - '9'
+    - '10'
+    - '12'
+    - '16'
+    reflect: true
   draggable:
     description: Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end.
     type: boolean

package/components/chart/chart.a2ui.json

@@ -55,7 +55,10 @@
     },
     "cornerRadius": {
       "description": "Bar corner radius in px (null = let CSS tokens decide)",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "data": {
@@ -85,17 +88,17 @@
       "default": "abbr"
     },
     "hideAverage": {
-      "description": "When true, suppress the overlaid average line",
+      "description": "DEPRECATED (ADR-0063, gh#1563) — use `noAverage` instead. Same meaning, same default; 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
     },
     "hideGrid": {
-      "description": "Hide gridlines",
+      "description": "DEPRECATED (ADR-0063, gh#1563) — use `noGrid` instead. Same meaning, same default; 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
     },
     "hideValues": {
-      "description": "Hide value labels",
+      "description": "DEPRECATED (ADR-0063, gh#1563) — use `noValues` instead. Same meaning, same default; 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
     },
@@ -104,6 +107,21 @@
       "type": "boolean",
       "default": false
     },
+    "noAverage": {
+      "description": "When true, suppress the overlaid average line. Canonical spelling (ADR-0063, gh#1563) replacing `hideAverage`.",
+      "type": "boolean",
+      "default": false
+    },
+    "noGrid": {
+      "description": "Hide gridlines. Canonical spelling (ADR-0063, gh#1563) replacing `hideGrid`.",
+      "type": "boolean",
+      "default": false
+    },
+    "noValues": {
+      "description": "Hide value labels. Canonical spelling (ADR-0063, gh#1563) replacing `hideValues`.",
+      "type": "boolean",
+      "default": false
+    },
     "seriesEmphasis": {
       "description": "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.",
       "type": "string",
@@ -191,6 +209,7 @@
       "poll"
     ],
     "name": "UIChart",
+    "parts": {},
     "related": [
       "button",
       "grid",
@@ -204,7 +223,7 @@
         "description": "Chart rendering area"
       },
       "empty": {
-        "description": "Shown in place of the SVG when `.data` is empty or missing. Typically an `<empty-state-ui>` with icon + heading + description + optional action. Visibility is CSS-toggled via `[data-has-data]` on the host — authors don't need to manage it imperatively."
+        "description": "Shown in place of the SVG when `.data` is empty or missing. Typically an `<empty-state-ui>` with icon + heading + description + optional action. Visibility is CSS-toggled via `[has-data]` on the host — authors don't need to manage it imperatively."
       }
     },
     "states": [
@@ -213,8 +232,9 @@
         "name": "idle"
       },
       {
-        "description": "No data — the empty slot (if provided) is rendered; otherwise the chart area renders nothing. Host carries [data-has-data] only when data is present.",
-        "name": "empty"
+        "description": "No data — the empty slot (if provided) is rendered; otherwise the chart area renders nothing. Host carries [has-data] only when data is present (gh#1332 Category A — converged off the private [data-has-data] mirror).",
+        "name": "empty",
+        "selector": ":not([has-data])"
       }
     ],
     "status": "stable",

package/components/chart/chart.class.js

@@ -21,10 +21,11 @@
  *   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).
+ *                  `hide-average` is a deprecated dual-read alias (ADR-0063, gh#1563).
  *   color        — accent/success/warning/danger/info
- *   hide-grid    — hide gridlines
- *   hide-values  — hide value labels
+ *   no-grid      — hide gridlines. `hide-grid` is a deprecated dual-read alias (ADR-0063, gh#1563).
+ *   no-values    — hide value labels. `hide-values` is a deprecated dual-read alias (ADR-0063, gh#1563).
  *   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 +216,19 @@ export class UIChart extends UIElement {
     type:        { type: String,  default: 'bar',    reflect: true },
     x:           { type: String,  default: '',       reflect: true },
     y:           { type: String,  default: '',       reflect: true },
+    // ADR-0063 (gh#1563) — `no-*` is the ratified negation prefix; `hide-*`
+    // retires. `hideAverage`/`hideGrid`/`hideValues` stay declared (dual-
+    // read compat, 0.8.42) so old markup keeps reflecting; `#resolveNoAttr()`
+    // (called from connected()) mirrors an old-only value onto the new prop
+    // + warns once per attribute. Every internal render usage reads the
+    // canonical `noAverage`/`noGrid`/`noValues` below.
     hideAverage: { type: Boolean, default: false,    reflect: true, attribute: 'hide-average' },
+    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' },
+    noGrid:      { type: Boolean, default: false,    reflect: true, attribute: 'no-grid' },
     hideValues:  { type: Boolean, default: false,    reflect: true, attribute: 'hide-values' },
+    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 },
@@ -241,6 +251,32 @@ export class UIChart extends UIElement {
 
   static template = () => null;
 
+  // ADR-0063 (gh#1563) compat-shim warn-once flags — one per renamed
+  // attribute (not collapsed into one flag; each fires independently the
+  // first time its own old attribute resolves). Per-class, matching
+  // toggle-group.class.js's #deprecationWarned idiom.
+  static #warned = { hideAverage: false, hideGrid: false, hideValues: false };
+
+  /** Dual-read resolution for one `hide-*` → `no-*` rename (ADR-0063).
+   *  New-name precedence: if `newAttr` is present, the old attribute is
+   *  ignored outright (no mirror, no warn) — the new prop already reflects
+   *  its own attribute normally. Otherwise, when only the old attribute is
+   *  present, mirror its (always-true, boolean-presence) value onto the
+   *  new prop and warn once per class. */
+  #resolveNoAttr(oldAttr, newAttr, newProp, warnKey) {
+    if (this.hasAttribute(newAttr)) return;
+    if (!this.hasAttribute(oldAttr)) return;
+    this[newProp] = true;
+    if (!UIChart.#warned[warnKey]) {
+      UIChart.#warned[warnKey] = true;
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[AdiaUI] <chart-ui [${oldAttr}]> is deprecated — use [${newAttr}] ` +
+        `instead (ADR-0063, gh#1563). Kept working as-is; no behavior change.`,
+      );
+    }
+  }
+
   #data = [];
   #shapeWarned = false;  // FEEDBACK-24: one-shot wrong-.data-shape warning
   #resizeObs = null;
@@ -317,6 +353,12 @@ export class UIChart extends UIElement {
   }
 
   connected() {
+    // ADR-0063 (gh#1563) compat shims — resolve BEFORE the first render so
+    // there's no wrong-then-right flash; see #resolveNoAttr() above.
+    this.#resolveNoAttr('hide-average', 'no-average', 'noAverage', 'hideAverage');
+    this.#resolveNoAttr('hide-grid',    'no-grid',    'noGrid',    'hideGrid');
+    this.#resolveNoAttr('hide-values',  'no-values',  'noValues',  'hideValues');
+
     if (!this.hasAttribute('role'))       this.setAttribute('role', 'img');
     if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', `${this.type} chart`);
 
@@ -439,13 +481,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,
     };
 
@@ -467,7 +509,7 @@ export class UIChart extends UIElement {
        author-provided <* slot="empty"> into a template; subsequent renders
        restore it so data-empty → data-present → data-empty transitions
        don't lose the slotted empty-state-ui. Visibility is CSS-toggled via
-       [data-has-data] on the host. */
+       [has-data] on the host. */
     const existingEmpty = this.querySelector(':scope > [slot="empty"]');
     if (existingEmpty && !this.#emptySlotTemplate) {
       this.#emptySlotTemplate = existingEmpty.cloneNode(true);
@@ -477,10 +519,10 @@ export class UIChart extends UIElement {
     if (this.#emptySlotTemplate) this.appendChild(this.#emptySlotTemplate.cloneNode(true));
 
     if (!this.#data.length) {
-      this.removeAttribute('data-has-data');
+      this.removeAttribute('has-data');
       return;
     }
-    this.setAttribute('data-has-data', '');
+    this.setAttribute('has-data', '');
 
     /* gh#561 — the DOM this pointed at is about to be wiped; drop the
        reference so a stale node isn't held onto (its data-dot-active
@@ -1035,16 +1077,16 @@ 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) {
         const gy = p.top + (height - p.top - p.bottom) * (1 - (t - ticks[0]) / safeRange);
-        s += `<line data-grid x1="${p.left}" y1="${gy}" x2="${width - p.right}" y2="${gy}"/>`;
+        s += `<line data-chart-grid x1="${p.left}" y1="${gy}" x2="${width - p.right}" y2="${gy}"/>`;
       }
 
       /* Y-axis labels */
@@ -1094,8 +1136,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 +1197,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)) {
@@ -1315,7 +1357,7 @@ export class UIChart extends UIElement {
         ring += (i === 0 ? 'M' : 'L') + ` ${px} ${py}`;
       }
       ring += ' Z';
-      svg += `<path data-grid d="${ring}"/>`;
+      svg += `<path data-chart-grid d="${ring}"/>`;
     }
 
     /* Axis lines */
@@ -1323,7 +1365,7 @@ export class UIChart extends UIElement {
       const a = -Math.PI / 2 + angleStep * i;
       const px = cx + r * Math.cos(a);
       const py = cy + r * Math.sin(a);
-      svg += `<line data-grid x1="${cx}" y1="${cy}" x2="${px}" y2="${py}"/>`;
+      svg += `<line data-chart-grid x1="${cx}" y1="${cy}" x2="${px}" y2="${py}"/>`;
     }
 
     /* Data polygon + per-vertex hit targets */
@@ -2108,7 +2150,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.css

@@ -108,10 +108,12 @@
   [data-legend]      { flex: 0 0 auto; }
 
   /* Empty-state slot — author places <empty-state-ui slot="empty"> inside
-     chart-ui. CSS toggles visibility on [data-has-data] (set by chart.js
-     when .data is non-empty). No data ⇒ empty-state visible; data ⇒ hidden. */
+     chart-ui. CSS toggles visibility on [has-data] (set by chart.class.js
+     when .data is non-empty; gh#1332 Category A — converged off the
+     private [data-has-data] mirror). No data ⇒ empty-state visible;
+     data ⇒ hidden. */
   & > [slot="empty"] { display: none; }
-  :scope:not([data-has-data]) > [slot="empty"] {
+  :scope:not([has-data]) > [slot="empty"] {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
@@ -150,7 +152,7 @@
 
   /* ── Grid lines ── */
 
-  [data-grid] {
+  [data-chart-grid] {
     stroke: var(--chart-grid);
     stroke-width: 1;
     fill: none;

package/components/chart/chart.d.ts

@@ -23,21 +23,27 @@ export class UIChart extends UIElement {
   /** Color scheme */
   color: 'accent' | 'success' | 'warning' | 'danger' | 'info';
   /** Bar corner radius in px (null = let CSS tokens decide) */
-  cornerRadius: number;
+  cornerRadius: number | null;
   /** JS property (set programmatically — `el.data = [...]`). An array of plain objects; each object's keys are named by the `x` and `y` attributes — e.g. `<chart-ui x="month" y="revenue">` consumes `[{month:'Jan', revenue:3200}, {month:'Feb', revenue:4100}]`. The Chart.js `{labels, datasets}` envelope is NOT chart-ui's API — passing it (or any non-array value) renders an empty chart. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect. Custom accessor on the element class, not a reflected attribute. */
   data: string;
   /** Marker (dot) visibility for line and multi-line series. `all` draws a circle[data-dot] on every datum (default — matches pre-gh#561 behavior). `none` hides all dots so a dense series reads as a clean line. `hover` shows only the currently-hovered datum's dot. `last` shows only the terminal point per series (sparkline convention). Tooltip hit targets ([data-hit]) are a separate always-rendered layer — every mode keeps hover/click working along the whole line. */
   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 */
+  /** DEPRECATED (ADR-0063, gh#1563) — use `noAverage` instead. Same meaning, same default; kept working as a dual-read compat shim (one- time console.warn when it's the name that resolves). Removed in 0.9.0. */
   hideAverage: boolean;
-  /** Hide gridlines */
+  /** DEPRECATED (ADR-0063, gh#1563) — use `noGrid` instead. Same meaning, same default; kept working as a dual-read compat shim (one-time console.warn when it's the name that resolves). Removed in 0.9.0. */
   hideGrid: boolean;
-  /** Hide value labels */
+  /** DEPRECATED (ADR-0063, gh#1563) — use `noValues` instead. Same meaning, same default; kept working as a dual-read compat shim (one- time console.warn when it's the name that resolves). Removed in 0.9.0. */
   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) replacing `hideAverage`. */
+  noAverage: boolean;
+  /** Hide gridlines. Canonical spelling (ADR-0063, gh#1563) replacing `hideGrid`. */
+  noGrid: boolean;
+  /** Hide value labels. Canonical spelling (ADR-0063, gh#1563) replacing `hideValues`. */
+  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

@@ -62,20 +62,52 @@ props:
       - danger
       - info
   hideAverage:
-    description: When true, suppress the overlaid average line
+    description: >-
+      DEPRECATED (ADR-0063, gh#1563) — use `noAverage` instead. Same
+      meaning, same default; 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
     attribute: hide-average
+  noAverage:
+    description: >-
+      When true, suppress the overlaid average line. Canonical spelling
+      (ADR-0063, gh#1563) replacing `hideAverage`.
+    type: boolean
+    default: false
+    attribute: no-average
   hideGrid:
-    description: Hide gridlines
+    description: >-
+      DEPRECATED (ADR-0063, gh#1563) — use `noGrid` instead. Same meaning,
+      same default; 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
     attribute: hide-grid
+  noGrid:
+    description: >-
+      Hide gridlines. Canonical spelling (ADR-0063, gh#1563) replacing
+      `hideGrid`.
+    type: boolean
+    default: false
+    attribute: no-grid
   hideValues:
-    description: Hide value labels
+    description: >-
+      DEPRECATED (ADR-0063, gh#1563) — use `noValues` instead. Same
+      meaning, same default; 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
     attribute: hide-values
+  noValues:
+    description: >-
+      Hide value labels. Canonical spelling (ADR-0063, gh#1563) replacing
+      `hideValues`.
+    type: boolean
+    default: false
+    attribute: no-values
   cornerRadius:
     description: Bar corner radius in px (null = let CSS tokens decide)
     type: number
@@ -179,7 +211,7 @@ slots:
     description: >-
       Shown in place of the SVG when `.data` is empty or missing. Typically an
       `<empty-state-ui>` with icon + heading + description + optional action.
-      Visibility is CSS-toggled via `[data-has-data]` on the host — authors
+      Visibility is CSS-toggled via `[has-data]` on the host — authors
       don't need to manage it imperatively.
 states:
   - name: idle
@@ -187,8 +219,10 @@ states:
   - name: empty
     description: >-
       No data — the empty slot (if provided) is rendered; otherwise the chart
-      area renders nothing. Host carries [data-has-data] only when data
-      is present.
+      area renders nothing. Host carries [has-data] only when data
+      is present (gh#1332 Category A — converged off the private
+      [data-has-data] mirror).
+    selector: ":not([has-data])"
 traits: []
 tokens: {}
 a2ui:

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) 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).",
+      "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",
@@ -58,7 +63,7 @@
       "default": "dot"
     },
     "static": {
-      "description": "When set, rows are non-interactive <span>s (no click, no toggle).",
+      "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
     }
@@ -116,6 +121,7 @@
       "visualization"
     ],
     "name": "UIChartLegend",
+    "parts": {},
     "related": [
       "chart",
       "badge",

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

@@ -35,9 +35,12 @@
  *   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. `static` is a deprecated opt-out alias — when set
+ *                (and [interactive] is absent), rows render as
+ *                non-interactive badges (no role/tabindex/handlers).
  *   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].
@@ -58,17 +61,67 @@ 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 },
+    // ADR-0063 (gh#1563) — `static` (opt-out) is DEPRECATED; `interactive`
+    // (opt-in) is the canonical positively-named boolean. `static` stays
+    // declared (dual-read compat, 0.8.42). Deliberately does NOT flip the
+    // default here: `interactive` defaults `true` so a consumer naming
+    // NEITHER attribute keeps today's behavior (rows interactive)
+    // unchanged — the real default-inversion (interactive defaulting to
+    // `false`) is scheduled for 0.9.0 per the ADR's own consumer-scan
+    // requirement (every `<chart-legend-ui>` tag needs review first).
     static:   { type: Boolean, default: false,    reflect: true },
+    interactive: { type: Boolean, default: true,  reflect: true },
     onToggle: { type: String,  default: 'hide',   reflect: true, attribute: 'on-toggle' },
   };
 
   static template = () => null;
 
+  // ADR-0063 (gh#1563) one-shot-per-class deprecation warn for [static].
+  static #warnedStatic = false;
+
   #target = null;
   #targetListener = null;
   #hiddenKeys = new Set();
 
+  // ADR-0063 (gh#1563) — captured by overriding `connectedCallback()` to run
+  // BEFORE calling `super.connectedCallback()`. `interactive` defaults
+  // `true` (a reflected Boolean), and UIElement's own connectedCallback
+  // pre-sync loop stamps the attribute for any reflected Boolean prop whose
+  // value is already `true` and whose attribute is absent (gh#961) — that
+  // stamp happens INSIDE `super.connectedCallback()`, so a check made from
+  // `connected()` (which UIElement invokes AFTER its pre-sync loop) would
+  // see `[interactive]` present even when the author never wrote it.
+  // Capturing here, before the super call, reads only the AUTHORED markup —
+  // the constructor is too early (elements are constructed attribute-less
+  // then have each attribute set individually as the parser processes them;
+  // by connectedCallback time every authored attribute has already landed).
+  #authoredInteractive = false;
+  #authoredStatic = false;
+
+  connectedCallback() {
+    this.#authoredInteractive = this.hasAttribute('interactive');
+    this.#authoredStatic = this.hasAttribute('static');
+    super.connectedCallback();
+  }
+
   connected() {
+    // ADR-0063 (gh#1563) compat shim — resolve BEFORE the first render/paint
+    // so there's no wrong-then-right flash. New-name precedence: [interactive]
+    // wins outright when present, regardless of [static]; only fall back to
+    // (and mirror) [static] when [interactive] is absent from markup.
+    if (!this.#authoredInteractive && this.#authoredStatic) {
+      this.interactive = false;
+      if (!UIChartLegend.#warnedStatic) {
+        UIChartLegend.#warnedStatic = true;
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[AdiaUI] <chart-legend-ui [static]> is deprecated — use ' +
+          '[interactive] instead (ADR-0063, gh#1563). Note: [interactive] ' +
+          'still defaults to true until the 0.9.0 default-inversion cut. ' +
+          'Kept working as-is; no behavior change.',
+        );
+      }
+    }
     this.setAttribute('role', 'list');
     this.#resolveTarget();
     this.#paint();
@@ -152,11 +205,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 +234,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,13 +28,15 @@ 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) 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). */
+  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). */
+  /** 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;