@seed-ship/mcp-ui-solid 6.23.0 → 6.25.1

package/dist/components/ChartJSRenderer.cjs

@@ -26,12 +26,188 @@ const web = require("solid-js/web");
 const solidJs = require("solid-js");
 const ExpandableWrapper = require("./ExpandableWrapper.cjs");
 const DegradedFallback = require("./DegradedFallback.cjs");
+const MissingValue = require("./MissingValue.cjs");
 const chartDataTable = require("./chart-data-table.cjs");
+const chartMissingPlugin = require("./chart-missing-plugin.cjs");
+const missingValue = require("../utils/missing-value.cjs");
 const MCPUITelemetryContext = require("../context/MCPUITelemetryContext.cjs");
 const MCPUIConfigContext = require("../context/MCPUIConfigContext.cjs");
 const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
+const theme = require("../utils/theme.cjs");
 const formatString = require("../utils/format-string.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="inline-flex items-center gap-1"><button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6"></path></svg></button><button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6"></path></svg></button><!$><!/>`), _tmpl$4 = /* @__PURE__ */ web.template(`<button type=button class="opacity-0 group-hover:opacity-60 hover:!opacity-100 disabled:!opacity-30 disabled:cursor-not-allowed px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">`), _tmpl$5 = /* @__PURE__ */ web.template(`<tr><td class="px-3 py-6 text-center text-gray-500 dark:text-gray-400">`), _tmpl$6 = /* @__PURE__ */ web.template(`<div><table class="w-full border-collapse text-left text-sm"><caption class=sr-only><!$><!/> — <!$><!/></caption><thead class="bg-gray-50 dark:bg-gray-900/40"><tr></tr></thead><tbody><!$><!/><!$><!/>`), _tmpl$7 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div><span class="text-sm text-gray-500 dark:text-gray-400">`), _tmpl$8 = /* @__PURE__ */ web.template(`<div><div class="flex items-center justify-between gap-3 mb-3 flex-shrink-0"><div class=min-w-0></div><div class="flex items-center gap-2"><div class="inline-flex rounded-md border border-gray-200 p-0.5 dark:border-gray-600"role=group><button type=button></button><button type=button></button></div><!$><!/><!$><!/></div></div><p class=sr-only><!$><!/>. <!$><!/></p><!$><!/><!$><!/><div><canvas role=img></canvas><!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<th scope=col class="px-3 py-2 font-medium text-gray-900 dark:text-gray-100">`), _tmpl$0 = /* @__PURE__ */ web.template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$1 = /* @__PURE__ */ web.template(`<td class="px-3 py-2 text-gray-700 dark:text-gray-300">`);
+var _tmpl$ = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]"><svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="inline-flex items-center gap-1"><button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]"><svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6"></path></svg></button><button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]"><svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6"></path></svg></button><!$><!/>`), _tmpl$4 = /* @__PURE__ */ web.template(`<button type=button class="opacity-0 group-hover:opacity-60 hover:!opacity-100 disabled:!opacity-30 disabled:cursor-not-allowed px-2 py-1 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-all shadow-[var(--mcp-ui-shadow,var(--shadow-sm))]"><svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">`), _tmpl$5 = /* @__PURE__ */ web.template(`<tr><td class="px-3 py-6 text-center text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">`), _tmpl$6 = /* @__PURE__ */ web.template(`<div><table class="w-full border-collapse text-left text-sm"><caption class=sr-only><!$><!/> — <!$><!/></caption><thead class="bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface,color-mix(in_oklab,var(--color-gray-900,#111827)_40%,transparent))]"><tr></tr></thead><tbody><!$><!/><!$><!/>`), _tmpl$7 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center bg-[color:var(--mcp-ui-surface,color-mix(in_oklab,var(--color-white,#fff)_80%,transparent))] dark:bg-[color:var(--mcp-ui-surface,color-mix(in_oklab,var(--color-gray-800,#1f2937)_80%,transparent))]"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[color:var(--mcp-ui-accent-border,var(--color-blue-600))]"></div><span class="text-sm text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">`), _tmpl$8 = /* @__PURE__ */ web.template(`<p>`), _tmpl$9 = /* @__PURE__ */ web.template(`<p data-mcp-chart-note=no-data>`), _tmpl$0 = /* @__PURE__ */ web.template(`<div data-mcp-chart-notes class="mt-2 space-y-0.5 text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ web.template(`<div><div class="flex items-center justify-between gap-3 mb-3 flex-shrink-0"><div class=min-w-0></div><div class="flex items-center gap-2"><div class="inline-flex rounded-md border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] p-0.5 dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))]"role=group><button type=button></button><button type=button></button></div><!$><!/><!$><!/></div></div><p class=sr-only><!$><!/>. <!$><!/></p><!$><!/><!$><!/><div><canvas role=img></canvas><!$><!/></div><!$><!/>`), _tmpl$10 = /* @__PURE__ */ web.template(`<th scope=col class="px-3 py-2 font-medium text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-100,#f3f4f6))]">`), _tmpl$11 = /* @__PURE__ */ web.template(`<tr class="border-t border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]">`), _tmpl$12 = /* @__PURE__ */ web.template(`<td class="px-3 py-2 text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))]">`);
+const CHART_THEME_TOKENS = [...Array.from({
+  length: 8
+}, (_, i) => `--mcp-ui-chart-${i + 1}`), "--mcp-ui-chart-grid", "--mcp-ui-chart-axis", "--mcp-ui-chart-label", "--mcp-ui-surface", "--mcp-ui-fg", "--mcp-ui-border"];
+function createChartTheme(params, baseOptions, root, chartConfig) {
+  let tokens = theme.readThemeTokens(root, CHART_THEME_TOKENS);
+  const originalDatasets = params.data.datasets.map((dataset) => ({
+    ...dataset
+  }));
+  let engineColors;
+  const sharedPaintOptions = /* @__PURE__ */ new WeakMap();
+  const paths = [{
+    path: ["plugins", "legend", "labels", "color"],
+    token: "--mcp-ui-chart-label"
+  }, {
+    path: ["plugins", "tooltip", "backgroundColor"],
+    token: "--mcp-ui-surface"
+  }, {
+    path: ["plugins", "tooltip", "titleColor"],
+    token: "--mcp-ui-fg"
+  }, {
+    path: ["plugins", "tooltip", "bodyColor"],
+    token: "--mcp-ui-fg"
+  }, {
+    path: ["plugins", "tooltip", "footerColor"],
+    token: "--mcp-ui-fg"
+  }, {
+    path: ["plugins", "tooltip", "borderColor"],
+    token: "--mcp-ui-border"
+  }];
+  const configuredScales = Object.keys(baseOptions.scales ?? {});
+  const scales = configuredScales.length ? configuredScales : params.type === "radar" || params.type === "polarArea" ? ["r"] : params.type === "pie" || params.type === "doughnut" ? [] : ["x", "y"];
+  const knownScales = /* @__PURE__ */ new Set();
+  const addScalePaths = (names) => {
+    for (const scale of names) {
+      if (knownScales.has(scale)) continue;
+      knownScales.add(scale);
+      for (const [part, token] of [["grid", "--mcp-ui-chart-grid"], ["border", "--mcp-ui-chart-axis"], ["ticks", "--mcp-ui-chart-label"], ["title", "--mcp-ui-chart-label"], ...scale === "r" ? [["angleLines", "--mcp-ui-chart-grid"], ["pointLabels", "--mcp-ui-chart-label"]] : []]) paths.push({
+        path: ["scales", scale, part, "color"],
+        token
+      });
+    }
+  };
+  addScalePaths(scales);
+  const read = (value, path) => path.reduce((part, key) => part == null ? void 0 : part[key], value);
+  const owned = /* @__PURE__ */ new Set();
+  const applyOptions = (options) => {
+    var _a;
+    for (const {
+      path,
+      token
+    } of paths) {
+      if (read(baseOptions, path) !== void 0) continue;
+      if (token === "--mcp-ui-chart-label" && ((_a = params.options) == null ? void 0 : _a.color) !== void 0) continue;
+      let blocked = false;
+      for (let i = 1; i < path.length; i++) {
+        const part = read(baseOptions, path.slice(0, i));
+        if (part === false || part === null) blocked = true;
+      }
+      if (blocked) continue;
+      const key = path.join(".");
+      const color = tokens[token];
+      if (!color && !owned.has(key)) continue;
+      let target = options;
+      for (const part of path.slice(0, -1)) {
+        target[part] = {
+          ...target[part]
+        };
+        target = target[part];
+      }
+      if (color) {
+        target[path.at(-1)] = color;
+        owned.add(key);
+      } else {
+        delete target[path.at(-1)];
+        owned.delete(key);
+      }
+    }
+  };
+  const plugin = {
+    id: "mcp-ui-theme",
+    beforeInit(chart) {
+      addScalePaths(Object.keys(chart.config.options.scales ?? {}));
+      applyOptions(chart.config.options);
+    },
+    // Global Colors runs first. Capture its actual output rather than copying
+    // a version-specific 7-color palette (or changing its opt-out semantics).
+    beforeLayout(chart) {
+      const datasets = chart.data.datasets;
+      engineColors ?? (engineColors = datasets.map((dataset) => ({
+        backgroundColor: Array.isArray(dataset.backgroundColor) ? [...dataset.backgroundColor] : dataset.backgroundColor,
+        borderColor: Array.isArray(dataset.borderColor) ? [...dataset.borderColor] : dataset.borderColor
+      })));
+      const callerOptions = params.options;
+      let pointOffset = 0;
+      datasets.forEach((dataset, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+        const original = originalDatasets[index];
+        const baseline = engineColors[index];
+        if (!original || !baseline) return;
+        const datasetType = original.type ?? params.type;
+        const perPoint = ["pie", "doughnut", "polarArea"].includes(datasetType);
+        const lineWithPoints = datasetType === "line" || datasetType === "radar";
+        const elementKinds = datasetType === "bar" ? ["bar"] : perPoint ? ["arc"] : lineWithPoints ? ["line"] : ["point"];
+        const hasSeriesToken = perPoint ? dataset.data.some((_, i) => tokens[`--mcp-ui-chart-${(pointOffset + i) % 8 + 1}`]) : Boolean(tokens[`--mcp-ui-chart-${index % 8 + 1}`]);
+        for (const field of ["backgroundColor", "borderColor"]) {
+          if (original[field] !== void 0) continue;
+          const callerDatasetColor = (_b = (_a = callerOptions == null ? void 0 : callerOptions.datasets) == null ? void 0 : _a[datasetType]) == null ? void 0 : _b[field];
+          if (callerDatasetColor !== void 0) {
+            const color = hasSeriesToken ? callerDatasetColor : baseline[field];
+            if (color !== void 0) dataset[field] = color;
+            else delete dataset[field];
+            continue;
+          }
+          if ((callerOptions == null ? void 0 : callerOptions[field]) !== void 0 || elementKinds.some((kind) => {
+            var _a2, _b2;
+            return ((_b2 = (_a2 = callerOptions == null ? void 0 : callerOptions.elements) == null ? void 0 : _a2[kind]) == null ? void 0 : _b2[field]) !== void 0;
+          })) continue;
+          if (lineWithPoints && hasSeriesToken) {
+            const pointField = field === "borderColor" ? "pointBorderColor" : "pointBackgroundColor";
+            const scopedPointPaint = (_f = (_e = (_d = (_c = callerOptions == null ? void 0 : callerOptions.datasets) == null ? void 0 : _c[datasetType]) == null ? void 0 : _d.elements) == null ? void 0 : _e.point) == null ? void 0 : _f[field];
+            const pointPaint = scopedPointPaint !== void 0 ? scopedPointPaint : (_h = (_g = callerOptions == null ? void 0 : callerOptions.elements) == null ? void 0 : _g.point) == null ? void 0 : _h[field];
+            if (original[pointField] === void 0 && ((_j = (_i = callerOptions == null ? void 0 : callerOptions.datasets) == null ? void 0 : _i[datasetType]) == null ? void 0 : _j[pointField]) === void 0 && (callerOptions == null ? void 0 : callerOptions[pointField]) === void 0 && pointPaint !== void 0) {
+              dataset[pointField] = pointPaint;
+            }
+          }
+          if (perPoint && field === "borderColor") continue;
+          if (perPoint) {
+            const previous = baseline[field];
+            const colors = dataset.data.map((_, i) => tokens[`--mcp-ui-chart-${(pointOffset + i) % 8 + 1}`] ?? (Array.isArray(previous) ? previous[i % previous.length] : previous));
+            dataset[field] = colors.some((_, i) => tokens[`--mcp-ui-chart-${(pointOffset + i) % 8 + 1}`]) ? colors : previous;
+          } else {
+            const color = tokens[`--mcp-ui-chart-${index % 8 + 1}`];
+            if (color || baseline[field] !== void 0) dataset[field] = color ?? baseline[field];
+            else delete dataset[field];
+          }
+        }
+        if (perPoint) pointOffset += dataset.data.length;
+      });
+    },
+    afterDatasetUpdate(_chart, args) {
+      var _a, _b;
+      const meta = args.meta;
+      if (!((_a = meta == null ? void 0 : meta.data) == null ? void 0 : _a.length) || typeof ((_b = meta.controller) == null ? void 0 : _b.getStyle) !== "function") return;
+      const index = meta.data.findIndex((element) => {
+        var _a2;
+        return ((_a2 = element.options) == null ? void 0 : _a2.$shared) && !element.active;
+      });
+      if (index >= 0 && !Object.isFrozen(meta.data[index].options)) {
+        sharedPaintOptions.set(meta.controller, meta.data[index].options);
+      }
+      if (args.mode !== "none") return;
+      const shared = sharedPaintOptions.get(meta.controller);
+      if (!shared) return;
+      const resolved = meta.controller.getStyle(index >= 0 ? index : 0, false);
+      if (!resolved.$shared) return;
+      shared.backgroundColor = resolved.backgroundColor;
+      shared.borderColor = resolved.borderColor;
+    }
+  };
+  chartConfig.plugins = [...chartConfig.plugins ?? [], plugin];
+  return {
+    applyOptions,
+    refresh(chart) {
+      const next = theme.readThemeTokens(root, CHART_THEME_TOKENS);
+      if (CHART_THEME_TOKENS.every((name) => next[name] === tokens[name])) return;
+      tokens = next;
+      addScalePaths(Object.keys(chart.scales ?? chart.config.options.scales ?? {}));
+      applyOptions(chart.config.options);
+      chart.update("none");
+    }
+  };
+}
 let ChartJS = null;
 let chartJSLoadPromise = null;
 const loadChartJS = async () => {
@@ -122,8 +298,18 @@ const ChartJSRenderer = (props) => {
   const [zoomPlugin, setZoomPlugin] = solidJs.createSignal(null);
   const [isZoomed, setIsZoomed] = solidJs.createSignal(false);
   let canvasRef;
+  let themeRoot;
   let chartInstance;
+  let chartTheme;
   let renderVersion = 0;
+  solidJs.onMount(() => {
+    if (themeRoot) {
+      const stop = theme.observeTheme(themeRoot, () => {
+        if (chartInstance) chartTheme == null ? void 0 : chartTheme.refresh(chartInstance);
+      });
+      solidJs.onCleanup(stop);
+    }
+  });
   const params = () => props.component.params;
   const telemetry = MCPUITelemetryContext.useTelemetry();
   const config = MCPUIConfigContext.useMCPUIConfig();
@@ -132,9 +318,33 @@ const ChartJSRenderer = (props) => {
     series: strings.chartTableSeries,
     point: strings.chartTablePoint,
     label: strings.degradedColLabel,
-    seriesName: strings.degradedSeries
+    seriesName: strings.degradedSeries,
+    withUnit: strings.chartLabelWithUnit
   }));
+  const missingSummary = solidJs.createMemo(() => missingValue.summarizeChartMissing(params()));
+  const unit = () => {
+    const value = params().unit;
+    return typeof value === "string" && value !== "" ? value : void 0;
+  };
+  const anyMissingCell = () => tableData().missing.some((row) => row.some(Boolean));
+  const notesShown = () => missingSummary().hasMissing && !missingValue.PART_TO_WHOLE_CHART_TYPES.has(params().type) && activeView() === "chart" && !error();
+  const noteKind = () => chartMissingPlugin.missingNoteKind(params().type, params().options);
+  const conventionNoteShown = () => noteKind() === "bars" ? missingSummary().hasMissing : missingSummary().partiallyMissing.some(Boolean);
+  const noDataSeries = () => {
+    var _a;
+    const names = (((_a = params().data) == null ? void 0 : _a.datasets) ?? []).map((dataset, index) => missingSummary().fullyMissing[index] ? (dataset == null ? void 0 : dataset.label) || formatString.formatMCPUIString(strings.degradedSeries, {
+      n: index + 1
+    }) : null).filter((name) => name !== null);
+    try {
+      return new Intl.ListFormat(strings.locale, {
+        type: "conjunction"
+      }).format(names);
+    } catch {
+      return names.join(", ");
+    }
+  };
   const descriptionId = solidJs.createUniqueId();
+  const notesId = solidJs.createUniqueId();
   const title = () => params().title || strings.chartView;
   const exportEnabled = () => params().exportable !== false;
   const copyDataJSON = () => JSON.stringify({
@@ -204,9 +414,11 @@ const ChartJSRenderer = (props) => {
     a.click();
   };
   solidJs.createEffect(async () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
     if (!canvasRef) return;
     const chartParams = params();
+    const chartMissing = missingSummary();
+    const chartUnit = unit();
     const zoom = zoomOptions();
     const version = ++renderVersion;
     setIsLoading(true);
@@ -218,6 +430,9 @@ const ChartJSRenderer = (props) => {
         chartInstance.destroy();
         chartInstance = null;
       }
+      if (chartMissing.hasMissing && missingValue.PART_TO_WHOLE_CHART_TYPES.has(chartParams.type)) {
+        throw new Error(strings.chartMissingUnsupported);
+      }
       const hostZoomOptions = (_b = (_a = chartParams.options) == null ? void 0 : _a.plugins) == null ? void 0 : _b.zoom;
       const baseOptions = {
         responsive: true,
@@ -263,11 +478,71 @@ const ChartJSRenderer = (props) => {
           }
         };
       }
-      chartInstance = new Chart(canvasRef, {
+      chartMissingPlugin.applyUnitAxisTitle(baseOptions, chartParams.type, chartUnit);
+      const chartConfig = {
         type: chartParams.type,
-        data: chartParams.data,
+        // The Colors plugin writes its generated palette onto datasets. Never
+        // let that turn a shared payload into caller-supplied colors for the
+        // next renderer, nor mutate data owned by a host application.
+        data: {
+          ...chartParams.data,
+          datasets: chartParams.data.datasets.map((dataset) => ({
+            ...dataset
+          }))
+        },
         options: baseOptions
-      });
+      };
+      if (chartUnit !== void 0 || chartMissing.hasMissing) {
+        const tooltip = baseOptions.plugins.tooltip;
+        if (tooltip !== false && tooltip !== null && !((_g = tooltip == null ? void 0 : tooltip.callbacks) == null ? void 0 : _g.label)) {
+          baseOptions.plugins.tooltip = {
+            ...tooltip,
+            callbacks: {
+              ...tooltip == null ? void 0 : tooltip.callbacks,
+              label: chartMissingPlugin.createTooltipLabel(() => strings, chartUnit, chartParams.type)
+            }
+          };
+        }
+      }
+      if (chartMissing.hasMissing) {
+        chartConfig.data = chartMissingPlugin.withDatasetsNoGapSpan(chartParams.data);
+        const defaultGenerate = ((_i = (_h = baseOptions.plugins.legend) == null ? void 0 : _h.labels) == null ? void 0 : _i.generateLabels) ?? ((_m = (_l = (_k = (_j = Chart == null ? void 0 : Chart.defaults) == null ? void 0 : _j.plugins) == null ? void 0 : _k.legend) == null ? void 0 : _l.labels) == null ? void 0 : _m.generateLabels);
+        if (typeof defaultGenerate === "function") {
+          baseOptions.plugins.legend = {
+            ...baseOptions.plugins.legend,
+            labels: {
+              ...(_n = baseOptions.plugins.legend) == null ? void 0 : _n.labels,
+              generateLabels: chartMissingPlugin.createMissingLegendGenerator(defaultGenerate, chartMissing.fullyMissing, () => strings)
+            }
+          };
+        }
+        chartConfig.plugins = [chartMissingPlugin.createMissingValuesPlugin({
+          allMissing: chartMissing.allMissing,
+          getNoDataText: () => strings.chartNoData,
+          getFontFamily: () => {
+            var _a2, _b2;
+            return (_b2 = (_a2 = Chart == null ? void 0 : Chart.defaults) == null ? void 0 : _a2.font) == null ? void 0 : _b2.family;
+          },
+          getTextColor: () => {
+            var _a2;
+            return ((_a2 = chartParams.options) == null ? void 0 : _a2.color) ?? theme.readThemeTokens(themeRoot, ["--mcp-ui-chart-label"])["--mcp-ui-chart-label"];
+          }
+        })];
+      }
+      if (themeRoot) {
+        const originalOptions = {
+          ...baseOptions,
+          plugins: {
+            ...baseOptions.plugins
+          },
+          scales: baseOptions.scales ? {
+            ...baseOptions.scales
+          } : void 0
+        };
+        chartTheme = createChartTheme(chartParams, originalOptions, themeRoot, chartConfig);
+        chartTheme.applyOptions(baseOptions);
+      }
+      chartInstance = new Chart(canvasRef, chartConfig);
       setIsZoomed(false);
       setIsLoading(false);
     } catch (err) {
@@ -278,11 +553,11 @@ const ChartJSRenderer = (props) => {
       telemetry == null ? void 0 : telemetry.dispatch({
         type: "render:error",
         errorMessage: error2.message,
-        id: ((_g = props.component) == null ? void 0 : _g.id) ?? "",
+        id: ((_o = props.component) == null ? void 0 : _o.id) ?? "",
         componentType: "chart",
         ts: Date.now()
       });
-      (_h = props.onError) == null ? void 0 : _h.call(props, error2);
+      (_p = props.onError) == null ? void 0 : _p.call(props, error2);
     }
   });
   solidJs.createEffect(() => {
@@ -316,7 +591,9 @@ const ChartJSRenderer = (props) => {
     get children() {
       return web.createComponent(ContextAwareChartLayout, {
         render: (isExpanded2) => (() => {
-          var _el$ = web.getNextElement(_tmpl$8), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$14 = _el$6.nextSibling, [_el$15, _co$2] = web.getNextMarker(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$3] = web.getNextMarker(_el$16.nextSibling), _el$18 = _el$2.nextSibling, _el$20 = _el$18.firstChild, [_el$21, _co$4] = web.getNextMarker(_el$20.nextSibling), _el$19 = _el$21.nextSibling, _el$22 = _el$19.nextSibling, [_el$23, _co$5] = web.getNextMarker(_el$22.nextSibling), _el$49 = _el$18.nextSibling, [_el$50, _co$1] = web.getNextMarker(_el$49.nextSibling), _el$51 = _el$50.nextSibling, [_el$52, _co$10] = web.getNextMarker(_el$51.nextSibling), _el$41 = _el$52.nextSibling, _el$42 = _el$41.firstChild, _el$47 = _el$42.nextSibling, [_el$48, _co$0] = web.getNextMarker(_el$47.nextSibling);
+          var _el$ = web.getNextElement(_tmpl$1), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$14 = _el$6.nextSibling, [_el$15, _co$2] = web.getNextMarker(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$3] = web.getNextMarker(_el$16.nextSibling), _el$18 = _el$2.nextSibling, _el$20 = _el$18.firstChild, [_el$21, _co$4] = web.getNextMarker(_el$20.nextSibling), _el$19 = _el$21.nextSibling, _el$22 = _el$19.nextSibling, [_el$23, _co$5] = web.getNextMarker(_el$22.nextSibling), _el$56 = _el$18.nextSibling, [_el$57, _co$11] = web.getNextMarker(_el$56.nextSibling), _el$58 = _el$57.nextSibling, [_el$59, _co$12] = web.getNextMarker(_el$58.nextSibling), _el$41 = _el$59.nextSibling, _el$42 = _el$41.firstChild, _el$47 = _el$42.nextSibling, [_el$48, _co$0] = web.getNextMarker(_el$47.nextSibling), _el$60 = _el$41.nextSibling, [_el$61, _co$13] = web.getNextMarker(_el$60.nextSibling);
+          var _ref$ = themeRoot;
+          typeof _ref$ === "function" ? web.use(_ref$, _el$) : themeRoot = _el$;
           web.insert(_el$3, web.createComponent(solidJs.Show, {
             get when() {
               return params().title;
@@ -417,73 +694,94 @@ const ChartJSRenderer = (props) => {
                 }
               }, tableData));
             }
-          }), _el$50, _co$1);
+          }), _el$57, _co$11);
           web.insert(_el$, web.createComponent(solidJs.Show, {
             get when() {
               return activeView() === "data";
             },
             get children() {
-              var _el$24 = web.getNextElement(_tmpl$6), _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$28 = _el$26.firstChild, [_el$29, _co$6] = web.getNextMarker(_el$28.nextSibling), _el$27 = _el$29.nextSibling, _el$30 = _el$27.nextSibling, [_el$31, _co$7] = web.getNextMarker(_el$30.nextSibling), _el$32 = _el$26.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$32.nextSibling, _el$37 = _el$34.firstChild, [_el$38, _co$8] = web.getNextMarker(_el$37.nextSibling), _el$39 = _el$38.nextSibling, [_el$40, _co$9] = web.getNextMarker(_el$39.nextSibling);
-              web.insert(_el$26, title, _el$29, _co$6);
-              web.insert(_el$26, () => strings.chartDataTable, _el$31, _co$7);
-              web.insert(_el$33, web.createComponent(solidJs.For, {
-                get each() {
-                  return tableData().columns;
-                },
-                children: (column) => (() => {
-                  var _el$53 = web.getNextElement(_tmpl$9);
-                  web.insert(_el$53, column);
-                  return _el$53;
-                })()
-              }));
-              web.insert(_el$34, web.createComponent(solidJs.For, {
-                get each() {
-                  return tableData().rows;
-                },
-                children: (row) => (() => {
-                  var _el$54 = web.getNextElement(_tmpl$0);
-                  web.insert(_el$54, web.createComponent(solidJs.For, {
-                    get each() {
-                      return tableData().columns;
-                    },
-                    children: (_column, index) => (() => {
-                      var _el$55 = web.getNextElement(_tmpl$1);
-                      web.insert(_el$55, () => String(row[index()] ?? ""));
-                      return _el$55;
-                    })()
-                  }));
-                  return _el$54;
-                })()
-              }), _el$38, _co$8);
-              web.insert(_el$34, web.createComponent(solidJs.Show, {
+              return [(() => {
+                var _el$24 = web.getNextElement(_tmpl$6), _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$28 = _el$26.firstChild, [_el$29, _co$6] = web.getNextMarker(_el$28.nextSibling), _el$27 = _el$29.nextSibling, _el$30 = _el$27.nextSibling, [_el$31, _co$7] = web.getNextMarker(_el$30.nextSibling), _el$32 = _el$26.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$32.nextSibling, _el$37 = _el$34.firstChild, [_el$38, _co$8] = web.getNextMarker(_el$37.nextSibling), _el$39 = _el$38.nextSibling, [_el$40, _co$9] = web.getNextMarker(_el$39.nextSibling);
+                web.insert(_el$26, title, _el$29, _co$6);
+                web.insert(_el$26, () => strings.chartDataTable, _el$31, _co$7);
+                web.insert(_el$33, web.createComponent(solidJs.For, {
+                  get each() {
+                    return tableData().columns;
+                  },
+                  children: (column) => (() => {
+                    var _el$62 = web.getNextElement(_tmpl$10);
+                    web.insert(_el$62, column);
+                    return _el$62;
+                  })()
+                }));
+                web.insert(_el$34, web.createComponent(solidJs.For, {
+                  get each() {
+                    return tableData().rows;
+                  },
+                  children: (row, rowIndex) => (() => {
+                    var _el$63 = web.getNextElement(_tmpl$11);
+                    web.insert(_el$63, web.createComponent(solidJs.For, {
+                      get each() {
+                        return tableData().columns;
+                      },
+                      children: (_column, index) => (() => {
+                        var _el$64 = web.getNextElement(_tmpl$12);
+                        web.insert(_el$64, web.createComponent(solidJs.Show, {
+                          get when() {
+                            var _a;
+                            return (_a = tableData().missing[rowIndex()]) == null ? void 0 : _a[index()];
+                          },
+                          get fallback() {
+                            return String(row[index()] ?? "");
+                          },
+                          get children() {
+                            return web.createComponent(MissingValue.MissingValueMark, {});
+                          }
+                        }));
+                        return _el$64;
+                      })()
+                    }));
+                    return _el$63;
+                  })()
+                }), _el$38, _co$8);
+                web.insert(_el$34, web.createComponent(solidJs.Show, {
+                  get when() {
+                    return tableData().rows.length === 0;
+                  },
+                  get children() {
+                    var _el$35 = web.getNextElement(_tmpl$5), _el$36 = _el$35.firstChild;
+                    web.insert(_el$36, () => strings.chartNoData);
+                    web.effect(() => web.setAttribute(_el$36, "colspan", Math.max(1, tableData().columns.length)));
+                    return _el$35;
+                  }
+                }), _el$40, _co$9);
+                web.effect((_p$) => {
+                  var _v$0 = `w-full overflow-auto rounded border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$1 = isExpanded2() ? void 0 : {
+                    height: params().height || "250px",
+                    "max-height": "70vh"
+                  };
+                  _v$0 !== _p$.e && web.className(_el$24, _p$.e = _v$0);
+                  _p$.t = web.style(_el$24, _v$1, _p$.t);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0
+                });
+                return _el$24;
+              })(), web.createComponent(solidJs.Show, {
                 get when() {
-                  return tableData().rows.length === 0;
+                  return anyMissingCell();
                 },
                 get children() {
-                  var _el$35 = web.getNextElement(_tmpl$5), _el$36 = _el$35.firstChild;
-                  web.insert(_el$36, () => strings.chartNoData);
-                  web.effect(() => web.setAttribute(_el$36, "colspan", Math.max(1, tableData().columns.length)));
-                  return _el$35;
+                  return web.createComponent(MissingValue.MissingValueLegend, {
+                    "class": "mt-2"
+                  });
                 }
-              }), _el$40, _co$9);
-              web.effect((_p$) => {
-                var _v$0 = `w-full overflow-auto rounded border border-gray-200 dark:border-gray-700 ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$1 = isExpanded2() ? void 0 : {
-                  height: params().height || "250px",
-                  "max-height": "70vh"
-                };
-                _v$0 !== _p$.e && web.className(_el$24, _p$.e = _v$0);
-                _p$.t = web.style(_el$24, _v$1, _p$.t);
-                return _p$;
-              }, {
-                e: void 0,
-                t: void 0
-              });
-              return _el$24;
+              })];
             }
-          }), _el$52, _co$10);
-          var _ref$ = canvasRef;
-          typeof _ref$ === "function" ? web.use(_ref$, _el$42) : canvasRef = _el$42;
-          web.setAttribute(_el$42, "aria-describedby", descriptionId);
+          }), _el$59, _co$12);
+          var _ref$2 = canvasRef;
+          typeof _ref$2 === "function" ? web.use(_ref$2, _el$42) : canvasRef = _el$42;
           web.insert(_el$41, web.createComponent(solidJs.Show, {
             get when() {
               return web.memo(() => !!isLoading())() && activeView() === "chart";
@@ -494,8 +792,44 @@ const ChartJSRenderer = (props) => {
               return _el$43;
             }
           }), _el$48, _co$0);
+          web.insert(_el$, web.createComponent(solidJs.Show, {
+            get when() {
+              return notesShown();
+            },
+            get children() {
+              var _el$49 = web.getNextElement(_tmpl$0), _el$52 = _el$49.firstChild, [_el$53, _co$1] = web.getNextMarker(_el$52.nextSibling), _el$54 = _el$53.nextSibling, [_el$55, _co$10] = web.getNextMarker(_el$54.nextSibling);
+              web.setAttribute(_el$49, "id", notesId);
+              web.insert(_el$49, web.createComponent(solidJs.Show, {
+                get when() {
+                  return conventionNoteShown();
+                },
+                get children() {
+                  var _el$50 = web.getNextElement(_tmpl$8);
+                  web.insert(_el$50, (() => {
+                    var _c$ = web.memo(() => noteKind() === "bars");
+                    return () => _c$() ? strings.chartMissingBars : web.memo(() => noteKind() === "omitted")() ? strings.chartMissingPoints : strings.chartMissingGaps;
+                  })());
+                  web.effect(() => web.setAttribute(_el$50, "data-mcp-chart-note", noteKind()));
+                  return _el$50;
+                }
+              }), _el$53, _co$1);
+              web.insert(_el$49, web.createComponent(solidJs.Show, {
+                get when() {
+                  return missingSummary().fullyMissing.some(Boolean);
+                },
+                get children() {
+                  var _el$51 = web.getNextElement(_tmpl$9);
+                  web.insert(_el$51, () => formatString.formatMCPUIString(strings.chartSeriesNoData, {
+                    series: noDataSeries()
+                  }));
+                  return _el$51;
+                }
+              }), _el$55, _co$10);
+              return _el$49;
+            }
+          }), _el$61, _co$13);
           web.effect((_p$) => {
-            var _v$10 = `relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4 group ${isExpanded2() ? "flex-1 min-h-0 flex flex-col" : ""} ${params().className || ""}`, _v$11 = strings.chartViewSelector, _v$12 = activeView() === "chart", _v$13 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "chart" ? "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"}`, _v$14 = activeView() === "data", _v$15 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "data" ? "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"}`, _v$16 = `relative w-full ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$17 = error() || activeView() === "data" ? {
+            var _v$10 = `mcp-ui-root relative w-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] overflow-hidden p-4 group ${isExpanded2() ? "flex-1 min-h-0 flex flex-col" : ""} ${params().className || ""}`, _v$11 = strings.chartViewSelector, _v$12 = activeView() === "chart", _v$13 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "chart" ? "bg-[color:var(--mcp-ui-accent,var(--color-gray-900,#111827))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-accent,var(--color-gray-100,#f3f4f6))] dark:text-[color:var(--mcp-ui-accent-fg,var(--color-gray-900,#111827))]" : "text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))]"}`, _v$14 = activeView() === "data", _v$15 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "data" ? "bg-[color:var(--mcp-ui-accent,var(--color-gray-900,#111827))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-accent,var(--color-gray-100,#f3f4f6))] dark:text-[color:var(--mcp-ui-accent-fg,var(--color-gray-900,#111827))]" : "text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))]"}`, _v$16 = `relative w-full ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$17 = error() || activeView() === "data" ? {
               display: "none"
             } : isExpanded2() ? {
               height: "100%",
@@ -503,7 +837,7 @@ const ChartJSRenderer = (props) => {
             } : {
               height: params().height || "250px",
               display: "block"
-            }, _v$18 = title(), _v$19 = activeView() !== "chart" || Boolean(error());
+            }, _v$18 = title(), _v$19 = notesShown() ? `${descriptionId} ${notesId}` : descriptionId, _v$20 = activeView() !== "chart" || Boolean(error());
             _v$10 !== _p$.e && web.className(_el$, _p$.e = _v$10);
             _v$11 !== _p$.t && web.setAttribute(_el$6, "aria-label", _p$.t = _v$11);
             _v$12 !== _p$.a && web.setAttribute(_el$7, "aria-pressed", _p$.a = _v$12);
@@ -513,7 +847,8 @@ const ChartJSRenderer = (props) => {
             _v$16 !== _p$.s && web.className(_el$41, _p$.s = _v$16);
             _p$.h = web.style(_el$41, _v$17, _p$.h);
             _v$18 !== _p$.r && web.setAttribute(_el$42, "aria-label", _p$.r = _v$18);
-            _v$19 !== _p$.d && web.setAttribute(_el$42, "aria-hidden", _p$.d = _v$19);
+            _v$19 !== _p$.d && web.setAttribute(_el$42, "aria-describedby", _p$.d = _v$19);
+            _v$20 !== _p$.l && web.setAttribute(_el$42, "aria-hidden", _p$.l = _v$20);
             return _p$;
           }, {
             e: void 0,
@@ -525,7 +860,8 @@ const ChartJSRenderer = (props) => {
             s: void 0,
             h: void 0,
             r: void 0,
-            d: void 0
+            d: void 0,
+            l: void 0
           });
           web.runHydrationEvents();
           return _el$;