@adia-ai/web-components 0.8.24 → 0.8.26

package/components/tooltip/tooltip.class.js

@@ -192,22 +192,28 @@ export class UITooltip extends UIElement {
   /* Copy per-series `--color-{key}` custom properties from the target chart
      to the popover so inner rows can reference them. The popover lives in
      the top layer and does NOT inherit custom properties from the host,
-     so we bridge them explicitly at show time. */
+     so we bridge them explicitly at show time.
+
+     gh#561 — chart-ui no longer writes `--color-{key}` as an inline style
+     on itself (that shadowed ancestor overrides — the bug this issue
+     fixed). Resolve each declared series key's *effective* value via
+     getComputedStyle instead, which correctly picks up a value set on
+     the chart itself OR any ancestor. `legendData` (chart-ui's public
+     getter) enumerates every declared series key; targets without it
+     (non-chart-ui `for` targets, or charts with no y-keys) have nothing
+     to copy. */
   #copySeriesColorsFromTarget() {
     if (!this.#target || !this.#popover) return;
-    /* Prefer inline style on the target (what chart-ui's #injectSeriesColors
-       writes). Fall back to computed style resolution for any --color-* vars
-       the author set on ancestors. */
-    const inline = this.#target.style;
-    for (let i = 0; i < inline.length; i++) {
-      const name = inline[i];
-      if (name.startsWith('--color-')) {
-        this.#popover.style.setProperty(name, inline.getPropertyValue(name));
-      }
+    const cs = getComputedStyle(this.#target);
+    const keys = Array.isArray(this.#target.legendData)
+      ? this.#target.legendData.map((it) => it.key).filter(Boolean)
+      : [];
+    for (const key of keys) {
+      const v = cs.getPropertyValue(`--color-${key}`).trim();
+      if (v) this.#popover.style.setProperty(`--color-${key}`, v);
     }
     /* Also copy the 10 categorical palette slots so the fallback
        `var(--color-{key}, var(--chart-{slot}))` resolves. */
-    const cs = getComputedStyle(this.#target);
     for (let i = 0; i < 10; i++) {
       const v = cs.getPropertyValue(`--chart-${i}`).trim();
       if (v) this.#popover.style.setProperty(`--chart-${i}`, v);