@opendata-ai/openchart-vanilla 8.3.1 → 8.4.1

package/dist/{chunk-RM5XS6NR.js → chunk-5RX6ZQGZ.js}

@@ -9,6 +9,14 @@ function setAttrs(el, attrs) {
     el.setAttribute(key, String(value));
   }
 }
+function applyKnockoutHalo(el, color, fontSize) {
+  setAttrs(el, {
+    stroke: color,
+    "stroke-width": Math.round(fontSize * 0.3),
+    "stroke-linejoin": "round",
+    "paint-order": "stroke"
+  });
+}
 function applyTextStyle(el, style) {
   const inline = el.style;
   inline.setProperty("fill", style.fill);
@@ -30,7 +38,7 @@ function applyTextStyle(el, style) {
 import { adaptForLightLineStroke, cssTokenDefault } from "@opendata-ai/openchart-core";
 function buildThemeStyleBlock(theme) {
   const accent = theme.colors.categorical[0] ?? cssTokenDefault("--oc-accent", "light");
-  const bg = theme.colors.background === "transparent" ? theme.isDark ? cssTokenDefault("--oc-bg", "dark") : cssTokenDefault("--oc-bg", "light") : theme.colors.background;
+  const bg = theme.colors.neutral.surface;
   const props = [
     `--oc-font-family: ${theme.fonts.family}`,
     `--oc-font-mono: ${theme.fonts.mono}`,
@@ -48,9 +56,12 @@ function buildThemeStyleBlock(theme) {
     `--oc-bg: ${bg}`,
     `--oc-text: ${theme.colors.text}`,
     `--oc-text-muted: ${theme.colors.axis}`,
-    `--oc-text-faint: ${theme.isDark ? cssTokenDefault("--oc-text-faint", "dark") : cssTokenDefault("--oc-text-faint", "light")}`,
+    `--oc-text-secondary: ${theme.colors.neutral.secondary}`,
+    `--oc-text-faint: ${theme.colors.neutral.faint}`,
+    `--oc-border: ${theme.colors.neutral.border}`,
     `--oc-gridline: ${theme.colors.gridline}`,
-    `--oc-axis: ${theme.colors.axis}`,
+    // Hairline, not the tick-label ink.
+    `--oc-axis: ${theme.colors.hairline}`,
     `--oc-border-radius: ${theme.borderRadius}px`,
     `--oc-accent: ${accent}`,
     `--oc-accent-strong: ${adaptForLightLineStroke(accent)}`,
@@ -61,27 +72,29 @@ function buildThemeStyleBlock(theme) {
     `--oc-space-4: ${theme.spacing.padding}px`
   ];
   const rules = [
-    `svg.oc-chart { ${props.join("; ")}; }`,
+    // Tabular figures everywhere in the chart's own text: axis ticks, value
+    // labels and legend entries all line up column-wise.
+    `svg.oc-chart { ${props.join("; ")}; font-variant-numeric: tabular-nums; }`,
     `.oc-chrome { font-family: var(--oc-font-family); }`,
     `.oc-eyebrow { font-size: var(--oc-eyebrow-size); font-weight: var(--oc-eyebrow-weight); letter-spacing: var(--oc-eyebrow-tracking); text-transform: uppercase; fill: var(--oc-accent); }`,
     `.oc-title { font-size: var(--oc-title-size); font-weight: var(--oc-title-weight); letter-spacing: var(--oc-title-tracking); fill: var(--oc-text); }`,
     `.oc-subtitle { font-size: var(--oc-subtitle-size); font-weight: var(--oc-subtitle-weight); fill: var(--oc-text-muted); }`,
     `.oc-source, .oc-byline, .oc-footer { font-size: var(--oc-source-size); font-weight: var(--oc-source-weight); fill: var(--oc-text-muted); }`,
-    `.oc-brand { font-size: 11px; font-weight: 510; letter-spacing: 0.02em; fill: var(--oc-text-faint); }`,
+    `.oc-brand { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; fill: var(--oc-text-faint); }`,
     `.oc-brand-dot { fill: var(--oc-accent); }`,
     `.oc-eyebrow-dot { fill: var(--oc-accent); }`,
     `.oc-metrics { font-family: var(--oc-font-family); }`,
-    `.oc-metric-label { font-size: 10px; font-weight: 510; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--oc-text-muted); }`,
-    `.oc-metric-value { font-size: 22px; font-weight: 510; letter-spacing: -0.01em; fill: var(--oc-text); font-variant-numeric: tabular-nums; }`,
-    `.oc-metric-delta-up { fill: var(--oc-positive); font-size: 12px; font-weight: 510; }`,
-    `.oc-metric-delta-down { fill: var(--oc-negative); font-size: 12px; font-weight: 510; }`,
+    `.oc-metric-label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--oc-text-muted); }`,
+    `.oc-metric-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; fill: var(--oc-text); font-variant-numeric: tabular-nums; }`,
+    `.oc-metric-delta-up { fill: var(--oc-positive); font-size: 12px; font-weight: 500; }`,
+    `.oc-metric-delta-down { fill: var(--oc-negative); font-size: 12px; font-weight: 500; }`,
     `.oc-axis-tick-inline { font-size: 11px; font-weight: 400; fill: var(--oc-text-muted); }`,
     `.oc-endpoint-labels { font-family: var(--oc-font-family); }`,
     `.oc-endpoint-label { fill: var(--oc-endpoint-label-color, var(--oc-text)); }`,
     `.oc-endpoint-value { fill: var(--oc-endpoint-value-color, var(--oc-text-muted)); }`,
     `.oc-endpoint-leader { stroke: var(--oc-endpoint-leader-color, currentColor); }`,
     `.oc-annotation-subtitle { fill: var(--oc-annotation-subtitle-color, var(--oc-text-muted)); }`,
-    `.oc-metric-secondary { fill: var(--oc-positive); font-size: 12px; font-weight: 400; }`,
+    `.oc-metric-secondary { fill: var(--oc-text-muted); font-size: 12px; font-weight: 400; }`,
     `.oc-legend { font-family: var(--oc-font-family); font-size: var(--oc-body-size); }`,
     `.oc-legend-entry { cursor: default; }`,
     `.oc-legend text { fill: var(--oc-legend-text); }`
@@ -106,8 +119,9 @@ export {
   XLINK_NS,
   createSVGElement,
   setAttrs,
+  applyKnockoutHalo,
   applyTextStyle,
   buildThemeStyleBlock,
   injectThemeStyleBlock
 };
-//# sourceMappingURL=chunk-RM5XS6NR.js.map
+//# sourceMappingURL=chunk-5RX6ZQGZ.js.map

package/dist/chunk-5RX6ZQGZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/renderers/svg-dom.ts","../src/theme-style-block.ts"],"sourcesContent":["/**\n * Shared SVG DOM helpers used across the per-concern renderers.\n *\n * Pure, stateless utilities. No layout/theme knowledge.\n */\n\nimport type { TextStyle } from '@opendata-ai/openchart-core';\n\nexport const SVG_NS = 'http://www.w3.org/2000/svg';\nexport const XLINK_NS = 'http://www.w3.org/1999/xlink';\n\nexport function createSVGElement(tag: string): SVGElement {\n  return document.createElementNS(SVG_NS, tag);\n}\n\nexport function setAttrs(el: SVGElement, attrs: Record<string, string | number>): void {\n  for (const [key, value] of Object.entries(attrs)) {\n    el.setAttribute(key, String(value));\n  }\n}\n\n/**\n * Cut a knockout halo behind text so it stays legible where it crosses\n * gridlines, marks, or a neighbouring series: a surface-colored stroke painted\n * under the glyphs.\n *\n * Presentation attributes, not inline styles, so a stylesheet can still\n * override the halo. The width scales with the font size -- a fixed width rings\n * small glyphs and disappears behind large ones.\n */\nexport function applyKnockoutHalo(el: SVGElement, color: string, fontSize: number): void {\n  setAttrs(el, {\n    stroke: color,\n    'stroke-width': Math.round(fontSize * 0.3),\n    'stroke-linejoin': 'round',\n    'paint-order': 'stroke',\n  });\n}\n\nexport function applyTextStyle(el: SVGElement, style: TextStyle): void {\n  // Use inline styles so engine-computed values take priority over CSS class\n  // defaults (e.g. .oc-title { font-size: var(--oc-title-size) } would otherwise\n  // override the responsive scaling applied by the chrome layout).\n  const inline = (el as SVGElement & ElementCSSInlineStyle).style;\n  inline.setProperty('fill', style.fill);\n  inline.setProperty('font-size', `${style.fontSize}px`);\n  inline.setProperty('font-weight', String(style.fontWeight));\n  inline.setProperty('font-family', style.fontFamily);\n  if (style.textAnchor) {\n    el.setAttribute('text-anchor', style.textAnchor);\n  }\n  if (style.dominantBaseline) {\n    el.setAttribute('dominant-baseline', style.dominantBaseline);\n  }\n  if (style.fontVariant) {\n    el.setAttribute('font-variant', style.fontVariant);\n  }\n}\n","/**\n * Theme `<style>` block for self-contained SVG export.\n *\n * Charts render most fills as inline SVG attributes, but a handful of chrome\n * elements (metric cells, the brand watermark dot, legend text, endpoint labels)\n * take their fill from CSS classes in `chrome.css` via `--oc-*` variables. That\n * works on-screen because the live SVG inherits the page stylesheet — but a\n * serialized/rasterized export (PNG/JPG/GIF) is detached from the page, so those\n * class-based fills vanish. This module builds a `<style>` block that resolves\n * every such rule against a concrete `ResolvedTheme`, so injecting it into an\n * export clone makes the SVG fully self-contained.\n *\n * Both the headless renderer (`static.ts`) and the browser export path use this,\n * so class-based styling round-trips identically no matter which path produced\n * the SVG. Browser-safe (no Node imports) so the browser exporters can import it.\n */\n\nimport type { ResolvedTheme } from '@opendata-ai/openchart-core';\nimport { adaptForLightLineStroke, cssTokenDefault } from '@opendata-ai/openchart-core';\nimport { SVG_NS } from './renderers/svg-dom';\n\n/**\n * Build the theme `<style>` block CSS text for a resolved theme. Sets the\n * `--oc-*` custom properties on `svg.oc-chart` and defines every class-based\n * chrome rule against them.\n */\nexport function buildThemeStyleBlock(theme: ResolvedTheme): string {\n  const accent = theme.colors.categorical[0] ?? cssTokenDefault('--oc-accent', 'light');\n  const bg = theme.colors.neutral.surface;\n\n  const props = [\n    `--oc-font-family: ${theme.fonts.family}`,\n    `--oc-font-mono: ${theme.fonts.mono}`,\n    `--oc-title-size: ${theme.chrome.title.fontSize}px`,\n    `--oc-title-weight: ${theme.chrome.title.fontWeight}`,\n    `--oc-title-tracking: ${cssTokenDefault('--oc-title-tracking', 'light')}`,\n    `--oc-subtitle-size: ${theme.chrome.subtitle.fontSize}px`,\n    `--oc-subtitle-weight: ${theme.chrome.subtitle.fontWeight}`,\n    `--oc-source-size: ${theme.chrome.source.fontSize}px`,\n    `--oc-source-weight: ${theme.chrome.source.fontWeight}`,\n    `--oc-body-size: ${theme.fonts.sizes.body}px`,\n    `--oc-eyebrow-size: ${theme.chrome.eyebrow.fontSize}px`,\n    `--oc-eyebrow-weight: ${theme.chrome.eyebrow.fontWeight}`,\n    `--oc-eyebrow-tracking: ${cssTokenDefault('--oc-eyebrow-tracking', 'light')}`,\n    `--oc-bg: ${bg}`,\n    `--oc-text: ${theme.colors.text}`,\n    `--oc-text-muted: ${theme.colors.axis}`,\n    `--oc-text-secondary: ${theme.colors.neutral.secondary}`,\n    `--oc-text-faint: ${theme.colors.neutral.faint}`,\n    `--oc-border: ${theme.colors.neutral.border}`,\n    `--oc-gridline: ${theme.colors.gridline}`,\n    // Hairline, not the tick-label ink.\n    `--oc-axis: ${theme.colors.hairline}`,\n    `--oc-border-radius: ${theme.borderRadius}px`,\n    `--oc-accent: ${accent}`,\n    `--oc-accent-strong: ${adaptForLightLineStroke(accent)}`,\n    `--oc-positive: ${theme.colors.positive}`,\n    `--oc-negative: ${theme.colors.negative}`,\n    `--oc-legend-text: ${theme.isDark ? cssTokenDefault('--oc-legend-text', 'dark') : cssTokenDefault('--oc-legend-text', 'light')}`,\n    `--oc-space-2: ${theme.spacing.chromeGap * 2}px`,\n    `--oc-space-4: ${theme.spacing.padding}px`,\n  ];\n\n  const rules = [\n    // Tabular figures everywhere in the chart's own text: axis ticks, value\n    // labels and legend entries all line up column-wise.\n    `svg.oc-chart { ${props.join('; ')}; font-variant-numeric: tabular-nums; }`,\n    `.oc-chrome { font-family: var(--oc-font-family); }`,\n    `.oc-eyebrow { font-size: var(--oc-eyebrow-size); font-weight: var(--oc-eyebrow-weight); letter-spacing: var(--oc-eyebrow-tracking); text-transform: uppercase; fill: var(--oc-accent); }`,\n    `.oc-title { font-size: var(--oc-title-size); font-weight: var(--oc-title-weight); letter-spacing: var(--oc-title-tracking); fill: var(--oc-text); }`,\n    `.oc-subtitle { font-size: var(--oc-subtitle-size); font-weight: var(--oc-subtitle-weight); fill: var(--oc-text-muted); }`,\n    `.oc-source, .oc-byline, .oc-footer { font-size: var(--oc-source-size); font-weight: var(--oc-source-weight); fill: var(--oc-text-muted); }`,\n    `.oc-brand { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; fill: var(--oc-text-faint); }`,\n    `.oc-brand-dot { fill: var(--oc-accent); }`,\n    `.oc-eyebrow-dot { fill: var(--oc-accent); }`,\n    `.oc-metrics { font-family: var(--oc-font-family); }`,\n    `.oc-metric-label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--oc-text-muted); }`,\n    `.oc-metric-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; fill: var(--oc-text); font-variant-numeric: tabular-nums; }`,\n    `.oc-metric-delta-up { fill: var(--oc-positive); font-size: 12px; font-weight: 500; }`,\n    `.oc-metric-delta-down { fill: var(--oc-negative); font-size: 12px; font-weight: 500; }`,\n    `.oc-axis-tick-inline { font-size: 11px; font-weight: 400; fill: var(--oc-text-muted); }`,\n    `.oc-endpoint-labels { font-family: var(--oc-font-family); }`,\n    `.oc-endpoint-label { fill: var(--oc-endpoint-label-color, var(--oc-text)); }`,\n    `.oc-endpoint-value { fill: var(--oc-endpoint-value-color, var(--oc-text-muted)); }`,\n    `.oc-endpoint-leader { stroke: var(--oc-endpoint-leader-color, currentColor); }`,\n    `.oc-annotation-subtitle { fill: var(--oc-annotation-subtitle-color, var(--oc-text-muted)); }`,\n    `.oc-metric-secondary { fill: var(--oc-text-muted); font-size: 12px; font-weight: 400; }`,\n    `.oc-legend { font-family: var(--oc-font-family); font-size: var(--oc-body-size); }`,\n    `.oc-legend-entry { cursor: default; }`,\n    `.oc-legend text { fill: var(--oc-legend-text); }`,\n  ];\n\n  return rules.join('\\n');\n}\n\n/**\n * Inject the theme style block into an SVG clone's `<defs>` so class-based fills\n * survive serialization. Idempotent-ish: adds one `<style data-oc-theme>` at the\n * front of `<defs>`; call once per clone before serializing. No-op if `theme` is\n * undefined (nothing to resolve against).\n */\nexport function injectThemeStyleBlock(svg: SVGElement, theme: ResolvedTheme | undefined): void {\n  if (!theme) return;\n  let defs = svg.querySelector('defs');\n  if (!defs) {\n    defs = document.createElementNS(SVG_NS, 'defs');\n    svg.insertBefore(defs, svg.firstChild);\n  }\n  const style = document.createElementNS(SVG_NS, 'style');\n  style.setAttribute('data-oc-theme', '');\n  style.textContent = buildThemeStyleBlock(theme);\n  defs.insertBefore(style, defs.firstChild);\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-T32UHMZA.js → chunk-6B5OBGIO.js}

@@ -1,6 +1,6 @@
 import {
   injectThemeStyleBlock
-} from "./chunk-RM5XS6NR.js";
+} from "./chunk-5RX6ZQGZ.js";
 
 // src/export.ts
 function getSVGDimensions(svg) {
@@ -279,4 +279,4 @@ export {
   exportJPG,
   exportCSV
 };
-//# sourceMappingURL=chunk-T32UHMZA.js.map
+//# sourceMappingURL=chunk-6B5OBGIO.js.map

package/dist/{chunk-W76C53MC.js → chunk-KANNWAEA.js}

@@ -1,10 +1,11 @@
 import {
   SVG_NS,
   XLINK_NS,
+  applyKnockoutHalo,
   applyTextStyle,
   createSVGElement,
   setAttrs
-} from "./chunk-RM5XS6NR.js";
+} from "./chunk-5RX6ZQGZ.js";
 
 // src/svg-ids.ts
 var counter = 0;
@@ -156,15 +157,22 @@ function resolvePatternFill(pattern, patternMap) {
 var currentAnimation;
 var currentGradientMap = /* @__PURE__ */ new Map();
 var currentPatternMap = /* @__PURE__ */ new Map();
+var currentSurface = "";
 function setMarkRenderState(state) {
   currentAnimation = state.animation;
   currentGradientMap = state.gradientMap;
   currentPatternMap = state.patternMap ?? /* @__PURE__ */ new Map();
+  currentSurface = state.surface ?? "";
 }
 function resetMarkRenderState() {
   currentAnimation = void 0;
   currentGradientMap = /* @__PURE__ */ new Map();
   currentPatternMap = /* @__PURE__ */ new Map();
+  currentSurface = "";
+}
+function applyLabelHalo(text, label) {
+  if (!currentSurface || label.halo === false) return;
+  applyKnockoutHalo(text, currentSurface, label.style.fontSize);
 }
 function resolveFillOrPattern(fill, pattern) {
   if (pattern) return resolvePatternFill(pattern, currentPatternMap);
@@ -195,7 +203,11 @@ function renderLineMark(mark, index) {
       d,
       fill: "none",
       stroke: mark.stroke,
-      "stroke-width": mark.strokeWidth
+      "stroke-width": mark.strokeWidth,
+      // Round joins/caps: at 2px a mitre on a sharp data spike renders as a
+      // spur past the vertex, and a butt cap leaves a squared-off line end.
+      "stroke-linejoin": "round",
+      "stroke-linecap": "round"
     });
     if (mark.strokeDasharray) {
       path.setAttribute("stroke-dasharray", mark.strokeDasharray);
@@ -213,6 +225,7 @@ function renderLineMark(mark, index) {
     }
     setAttrs(label, { x: mark.label.x, y: mark.label.y });
     applyTextStyle(label, mark.label.style);
+    applyLabelHalo(label, mark.label);
     label.textContent = mark.label.text;
     g.appendChild(label);
     if (mark.label.connector) {
@@ -253,7 +266,9 @@ function renderAreaMark(mark, index) {
         d: mark.topPath,
         fill: "none",
         stroke: mark.stroke,
-        "stroke-width": mark.strokeWidth ?? 1
+        "stroke-width": mark.strokeWidth ?? 1,
+        "stroke-linejoin": "round",
+        "stroke-linecap": "round"
       });
       g.appendChild(strokePath);
     }
@@ -311,6 +326,9 @@ function renderRectMark(mark, index) {
   if (mark.strokeWidth) {
     shapeEl.setAttribute("stroke-width", String(mark.strokeWidth));
   }
+  if (mark.shapeRendering) {
+    shapeEl.setAttribute("shape-rendering", mark.shapeRendering);
+  }
   g.appendChild(shapeEl);
   return g;
 }
@@ -336,6 +354,7 @@ function renderArcMark(mark, index) {
       y: mark.label.y - mark.center.y
     });
     applyTextStyle(label, mark.label.style);
+    applyLabelHalo(label, mark.label);
     label.textContent = mark.label.text;
     g.appendChild(label);
   }
@@ -402,6 +421,9 @@ function renderRuleMark(mark, index) {
   if (mark.strokeDasharray) {
     line.setAttribute("stroke-dasharray", mark.strokeDasharray);
   }
+  if (mark.strokeOpacity != null) {
+    line.setAttribute("stroke-opacity", String(mark.strokeOpacity));
+  }
   if (mark.opacity != null) {
     line.setAttribute("opacity", String(mark.opacity));
   }
@@ -454,6 +476,10 @@ function getMarkSeries(mark) {
   if (mark.type === "line" || mark.type === "area") {
     return mark.seriesKey;
   }
+  const explicitSeries = mark.seriesKey;
+  if (explicitSeries) {
+    return explicitSeries;
+  }
   if (mark.type === "arc") {
     const label = mark.aria.label;
     if (!label) return void 0;
@@ -513,6 +539,7 @@ function renderMarks(parent, layout, opts) {
     label.setAttribute("class", "oc-mark-label");
     setAttrs(label, { x: rect.label.x, y: rect.label.y });
     applyTextStyle(label, rect.label.style);
+    applyLabelHalo(label, rect.label);
     label.textContent = rect.label.text;
     if (currentAnimation?.enter) {
       const idx = rect.animationIndex ?? i;
@@ -558,6 +585,61 @@ import {
   DEFAULT_LINE_HEIGHT,
   parseAnnotationSpans
 } from "@opendata-ai/openchart-engine";
+
+// src/theme-tokens.ts
+import { adaptForLightLineStroke, cssTokenDefault } from "@opendata-ai/openchart-core";
+function resolvedSurface(theme) {
+  return theme.colors.neutral.surface;
+}
+function stampThemeProperties(el, theme) {
+  const accent = theme.colors.categorical[0] ?? cssTokenDefault("--oc-accent", "light");
+  const bg = resolvedSurface(theme);
+  const n = theme.colors.neutral;
+  const props = [
+    ["--oc-font-family", theme.fonts.family],
+    ["--oc-font-mono", theme.fonts.mono],
+    ["--oc-title-size", `${theme.chrome.title.fontSize}px`],
+    ["--oc-title-weight", `${theme.chrome.title.fontWeight}`],
+    ["--oc-subtitle-size", `${theme.chrome.subtitle.fontSize}px`],
+    ["--oc-subtitle-weight", `${theme.chrome.subtitle.fontWeight}`],
+    ["--oc-source-size", `${theme.chrome.source.fontSize}px`],
+    ["--oc-source-weight", `${theme.chrome.source.fontWeight}`],
+    ["--oc-body-size", `${theme.fonts.sizes.body}px`],
+    ["--oc-eyebrow-size", `${theme.chrome.eyebrow.fontSize}px`],
+    ["--oc-eyebrow-weight", `${theme.chrome.eyebrow.fontWeight}`],
+    ["--oc-bg", bg],
+    ["--oc-text", theme.colors.text],
+    ["--oc-text-muted", theme.colors.axis],
+    // Secondary grays are derived from the theme's own text/background pair
+    // (ResolvedTheme.colors.neutral), so a warm or cool theme gets warm or
+    // cool grays instead of zinc. One direction only: theme -> CSS.
+    ["--oc-text-secondary", n.secondary],
+    ["--oc-text-faint", n.faint],
+    ["--oc-border", n.border],
+    ["--oc-gray-100", n[100]],
+    ["--oc-gray-200", n[200]],
+    ["--oc-gray-300", n[300]],
+    ["--oc-gray-400", n[400]],
+    ["--oc-gray-600", n[600]],
+    ["--oc-gray-800", n[800]],
+    ["--oc-gridline", theme.colors.gridline],
+    // --oc-axis is the hairline the axis line is drawn with, not the ink its
+    // tick labels take (that is --oc-text-muted, above).
+    ["--oc-axis", theme.colors.hairline],
+    ["--oc-border-radius", `${theme.borderRadius}px`],
+    ["--oc-accent", accent],
+    ["--oc-accent-strong", adaptForLightLineStroke(accent)],
+    ["--oc-positive", theme.colors.positive],
+    ["--oc-negative", theme.colors.negative],
+    ["--oc-space-2", `${theme.spacing.chromeGap * 2}px`],
+    ["--oc-space-4", `${theme.spacing.padding}px`]
+  ];
+  for (const [name, value] of props) {
+    el.style.setProperty(name, value);
+  }
+}
+
+// src/renderers/annotations.ts
 var CONNECTOR_STROKE_WIDTH = 1.25;
 function renderArrowhead(parent, tipX, tipY, tangentX, tangentY, stroke) {
   const head = computeArrowheadPoints(tipX, tipY, tangentX, tangentY);
@@ -785,10 +867,7 @@ function renderAnnotation(parent, annotation, index, bgColor) {
       });
       g.appendChild(bgRect);
     } else if (bgColor && annotation.label.halo !== false) {
-      text.style.paintOrder = "stroke";
-      text.style.stroke = bgColor;
-      text.style.strokeWidth = `${Math.round(fontSize * 0.3)}px`;
-      text.style.strokeLinejoin = "round";
+      applyKnockoutHalo(text, bgColor, fontSize);
     }
     g.appendChild(text);
     if (annotation.subtitle) {
@@ -808,7 +887,7 @@ function renderAnnotations(parent, layout) {
   if (layout.annotations.length === 0) return;
   const g = createSVGElement("g");
   g.setAttribute("class", "oc-annotations");
-  const bgColor = layout.theme.colors.background;
+  const bgColor = resolvedSurface(layout.theme);
   for (let i = 0; i < layout.annotations.length; i++) {
     renderAnnotation(g, layout.annotations[i], i, bgColor);
   }
@@ -1172,7 +1251,22 @@ function renderChrome(parent, layout) {
   const g = createSVGElement("g");
   g.setAttribute("class", "oc-chrome");
   const { chrome, measureText } = layout;
-  if (chrome.eyebrow) {
+  if (chrome.rule) {
+    const rule = createSVGElement("rect");
+    rule.setAttribute("class", "oc-chrome-rule");
+    setAttrs(rule, {
+      x: chrome.rule.x,
+      y: chrome.rule.y,
+      width: chrome.rule.width,
+      height: chrome.rule.thickness
+    });
+    rule.setAttribute("fill", chrome.rule.color);
+    rule.setAttribute("shape-rendering", "crispEdges");
+    g.appendChild(rule);
+  }
+  if (chrome.eyebrow && chrome.rule) {
+    renderChromeElement(g, chrome.eyebrow, "oc-eyebrow", "eyebrow", measureText, true);
+  } else if (chrome.eyebrow) {
     const eyebrow = chrome.eyebrow;
     const dotR = 3;
     const dotGap = 8;
@@ -1397,9 +1491,34 @@ function renderEndpointLabels(parent, layout) {
 
 // src/renderers/legend.ts
 import { estimateTextWidth as estimateTextWidth2 } from "@opendata-ai/openchart-core";
+var LEGEND_HIT_HEIGHT = 24;
+var LEGEND_HIT_PAD = 4;
 function isCategorical(legend) {
   return !legend.type || legend.type === "categorical";
 }
+function renderNoDataSwatch(parent, noData, labelStyle, chip) {
+  const swatch = createSVGElement("rect");
+  swatch.setAttribute("class", "oc-legend-nodata");
+  setAttrs(swatch, {
+    x: noData.x,
+    y: noData.y,
+    width: noData.size,
+    height: noData.size,
+    fill: noData.fill,
+    ...chip ? { rx: chip.rx, ry: chip.rx } : { "shape-rendering": "crispEdges" }
+  });
+  parent.appendChild(swatch);
+  const label = createSVGElement("text");
+  setAttrs(label, {
+    x: noData.labelX,
+    y: noData.labelY,
+    "text-anchor": "start",
+    ...chip ? { "dominant-baseline": chip.baseline } : {}
+  });
+  applyTextStyle(label, labelStyle);
+  label.textContent = noData.label;
+  parent.appendChild(label);
+}
 function renderContinuousLegend(parent, legend) {
   if (legend.bounds.width <= 0 || legend.bounds.height <= 0) return;
   const g = createSVGElement("g");
@@ -1446,7 +1565,8 @@ function renderContinuousLegend(parent, legend) {
     });
     g.appendChild(bar);
   } else {
-    for (const bin of legend.bins) {
+    for (let i = 0; i < legend.bins.length; i++) {
+      const bin = legend.bins[i];
       const rect = createSVGElement("rect");
       rect.setAttribute("class", "oc-legend-bin");
       setAttrs(rect, {
@@ -1454,11 +1574,21 @@ function renderContinuousLegend(parent, legend) {
         y: legend.bar.y,
         width: bin.width,
         height: legend.bar.height,
-        fill: bin.color
+        fill: bin.color,
+        "shape-rendering": "crispEdges"
       });
+      rect.setAttribute("data-bin-index", String(i));
       g.appendChild(rect);
     }
   }
+  if (legend.title && legend.titleY !== void 0) {
+    const title = createSVGElement("text");
+    title.setAttribute("class", "oc-legend-title");
+    setAttrs(title, { x: legend.bar.x, y: legend.titleY, "text-anchor": "start" });
+    applyTextStyle(title, legend.titleStyle ?? legend.labelStyle);
+    title.textContent = legend.title;
+    g.appendChild(title);
+  }
   for (const tick of legend.ticks) {
     const label = createSVGElement("text");
     setAttrs(label, { x: tick.x, y: legend.labelY, "text-anchor": tick.anchor });
@@ -1466,6 +1596,9 @@ function renderContinuousLegend(parent, legend) {
     label.textContent = tick.label;
     g.appendChild(label);
   }
+  if (legend.noData) {
+    renderNoDataSwatch(g, legend.noData, legend.labelStyle);
+  }
   parent.appendChild(g);
 }
 function renderSizeLegend(parent, legend) {
@@ -1477,6 +1610,14 @@ function renderSizeLegend(parent, legend) {
   const oy = legend.bounds.y;
   const labelX = ox + legend.circles[0].cx + legend.circles[0].radius + 8;
   const leaderX = ox + legend.circles[0].cx + legend.circles[0].radius + 4;
+  if (legend.title && legend.titleY !== void 0) {
+    const title = createSVGElement("text");
+    title.setAttribute("class", "oc-legend-title");
+    setAttrs(title, { x: ox, y: oy + legend.titleY, "text-anchor": "start" });
+    applyTextStyle(title, legend.titleStyle ?? legend.labelStyle);
+    title.textContent = legend.title;
+    g.appendChild(title);
+  }
   for (const circle of legend.circles) {
     const c = createSVGElement("circle");
     setAttrs(c, {
@@ -1522,7 +1663,7 @@ function renderLegend(parent, legend) {
   if (!isCategorical(legend) || legend.entries.length === 0) return;
   const g = createSVGElement("g");
   g.setAttribute("class", "oc-legend");
-  g.setAttribute("role", "list");
+  g.setAttribute("role", "group");
   g.setAttribute("aria-label", "Chart legend");
   const isHorizontal = legend.position === "top" || legend.position === "top-left" || legend.position === "bottom";
   const positions = "entryPositions" in legend ? legend.entryPositions : void 0;
@@ -1548,7 +1689,6 @@ function renderLegend(parent, legend) {
     }
     const entryG = createSVGElement("g");
     entryG.setAttribute("class", "oc-legend-entry");
-    entryG.setAttribute("role", "listitem");
     entryG.setAttribute("data-legend-index", String(i));
     entryG.setAttribute("data-legend-label", entry.label);
     if (entry.overflow) {
@@ -1556,14 +1696,32 @@ function renderLegend(parent, legend) {
       entryG.setAttribute("aria-label", entry.label);
       entryG.setAttribute("opacity", "0.5");
     } else {
-      entryG.setAttribute(
-        "aria-label",
-        `${entry.label}: ${entry.active !== false ? "visible" : "hidden"}`
-      );
+      const visible = entry.active !== false;
+      entryG.setAttribute("role", "button");
+      entryG.setAttribute("tabindex", "0");
+      entryG.setAttribute("aria-pressed", String(visible));
+      entryG.setAttribute("data-legend-active", String(visible));
+      entryG.setAttribute("aria-label", `${entry.label}: ${visible ? "visible" : "hidden"}`);
       entryG.setAttribute("style", "cursor: pointer");
-      if (entry.active === false) {
+      if (!visible) {
         entryG.setAttribute("opacity", "0.3");
       }
+      const labelWidth = estimateTextWidth2(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight
+      );
+      const hit = createSVGElement("rect");
+      hit.setAttribute("class", "oc-legend-hit");
+      setAttrs(hit, {
+        x: offsetX - LEGEND_HIT_PAD,
+        y: offsetY + legend.swatchSize / 2 - LEGEND_HIT_HEIGHT / 2,
+        width: legend.swatchSize + legend.swatchGap + labelWidth + LEGEND_HIT_PAD * 2,
+        height: LEGEND_HIT_HEIGHT,
+        rx: 2,
+        fill: "transparent"
+      });
+      entryG.appendChild(hit);
     }
     const midX = offsetX + legend.swatchSize / 2;
     const midY = offsetY + legend.swatchSize / 2;
@@ -1629,6 +1787,9 @@ function renderLegend(parent, legend) {
       }
     }
   }
+  if (legend.noData) {
+    renderNoDataSwatch(g, legend.noData, legend.labelStyle, { rx: 2, baseline: "central" });
+  }
   parent.appendChild(g);
 }
 
@@ -1763,7 +1924,12 @@ function renderChartSVG(layout, container, opts) {
     defs
   );
   svg.appendChild(defs);
-  setMarkRenderState({ animation, gradientMap, patternMap });
+  setMarkRenderState({
+    animation,
+    gradientMap,
+    patternMap,
+    surface: resolvedSurface(layout.theme)
+  });
   try {
     if (layout.facet) {
       renderFacetedPanels(svg, layout, layout.facet.panels, defs);
@@ -1837,10 +2003,10 @@ function renderChartSVG(layout, container, opts) {
         clippedGroup.appendChild(dotsGroup);
       }
       svg.appendChild(clipGroup);
+      renderAnnotations(svg, layout);
       if (markLabelsOverlay) {
         svg.appendChild(markLabelsOverlay);
       }
-      renderAnnotations(svg, layout);
       renderEndpointLabels(svg, layout);
       const epEntries = layout.endpointLabels?.entries ?? [];
       if (epEntries.length > 0) {
@@ -1931,10 +2097,10 @@ function renderFacetedPanels(svg, layout, panels, defs) {
     clippedGroup.setAttribute("clip-path", `url(#${panelClipId})`);
     const panelLabelsOverlay = renderMarks(clippedGroup, panelLayout);
     g.appendChild(clippedGroup);
+    renderAnnotations(g, panelLayout);
     if (panelLabelsOverlay) {
       g.appendChild(panelLabelsOverlay);
     }
-    renderAnnotations(g, panelLayout);
     svg.appendChild(g);
   }
 }
@@ -1945,6 +2111,10 @@ export {
   resetSvgIdCounter,
   buildGradientDefs,
   resolveMarkFill,
+  buildPatternDefs,
+  resolvePatternFill,
+  resolvedSurface,
+  stampThemeProperties,
   renderChromeElement,
   renderLegend,
   registerMarkRenderer,
@@ -1952,4 +2122,4 @@ export {
   renderSingleMark,
   renderChartSVG
 };
-//# sourceMappingURL=chunk-W76C53MC.js.map
+//# sourceMappingURL=chunk-KANNWAEA.js.map