@blueprint-chart/lib 2.10.0 → 2.12.0

package/dist/runtime/chart-css.d.ts

@@ -1 +1 @@
-export declare const CHART_CSS = "\n/* Blueprint Chart \u2014 Runtime Embed Styles\n   CSS custom properties with baked-in defaults for standalone iframe usage. */\n\n.bc-frame {\n  --bc-frame-font-family: system-ui, -apple-system, sans-serif;\n  --bc-frame-padding: 0;\n  /* Per-side properties so a multi-value `padding` shorthand never lands in a\n     single-value shorthand slot, which would invalidate the whole declaration. */\n  --bc-frame-padding-top: var(--bc-frame-padding);\n  --bc-frame-padding-right: var(--bc-frame-padding);\n  --bc-frame-padding-bottom: var(--bc-frame-padding);\n  --bc-frame-padding-left: var(--bc-frame-padding);\n  --bc-frame-bg: #fff;\n  --bc-text-color: #333;\n  font-family: var(--bc-frame-font-family);\n  background: var(--bc-frame-bg);\n  /* currentColor marks (e.g. above-bar value labels) follow the theme text\n     colour, not the ambient document colour. */\n  color: var(--bc-text-color, #333);\n}\n\n/* Keeps the SVG's baked-in background rect (applyCanvasBackground) in sync\n   with the frame background; transparentBackground sets the var to\n   transparent at runtime. */\n.bc-frame .bc-canvas-bg {\n  fill: var(--bc-frame-bg, #fff);\n}\n\n/* `theme = \"dark\"` emits this class on the frame, so it carries the same\n   surface the document-level dark mode does, without depending on an ambient\n   data-bs-theme. Keep in sync with DARK_THEME in render/frame-svg.ts. */\n.bc-frame.bc-theme-dark {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.bc-frame-header {\n  padding: var(--bc-frame-padding-top) var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n  background: var(--bc-frame-header-bg, transparent);\n  border-bottom: var(--bc-frame-header-border-bottom, none);\n  margin-bottom: var(--bc-frame-header-margin-bottom, 0);\n}\n\n.bc-frame-body {\n  padding: 0 var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n}\n\n/* Constrained-height mode (`heightMode` fixed or aspect-ratio). post-render.ts\n   adds .bc-frame--constrained and layout-constraints.ts pins the container\n   height with overflow: hidden; without these rules the frame renders at its\n   natural height and is guillotined. Mirrors chart.scss \u2014 keep the two in\n   sync. */\n/* An axis label moved inside the plot sits directly on the marks; painting the\n   stroke first keeps it readable over a filled band. */\n.bc-axis-label-inside {\n  paint-order: stroke;\n  stroke: var(--bc-frame-bg, #fff);\n  stroke-width: 3px;\n  stroke-linejoin: round;\n}\n\n.bc-frame--constrained {\n  flex: 1;\n  position: relative;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-header {\n  position: relative;\n  z-index: 1;\n  background: var(--bc-frame-header-bg, var(--bc-frame-bg, #fff));\n}\n\n.bc-frame--constrained .bc-frame-body {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-note {\n  position: absolute;\n  bottom: var(--bc-footer-h, 0);\n  left: 0;\n  right: 0;\n  z-index: 1;\n}\n\n.bc-frame--constrained .bc-frame-footer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n}\n\n.bc-frame-title {\n  --bc-frame-title-color: var(--bc-text-color, #333);\n  --bc-frame-title-font-size: 1.25rem;\n  color: var(--bc-frame-title-color);\n  font-size: var(--bc-frame-title-font-size);\n  font-weight: bold;\n  margin: 0;\n  white-space: pre-line;\n}\n\n.bc-frame-description {\n  --bc-frame-description-color: var(--bc-text-color, #555);\n  --bc-frame-description-font-size: 0.875rem;\n  color: var(--bc-frame-description-color);\n  font-size: var(--bc-frame-description-font-size);\n  margin: 0.25rem 0 0;\n  white-space: pre-line;\n}\n\n.bc-frame-footer {\n  margin-top: 0.5rem;\n  gap: 0.25rem 1rem;\n  padding: var(--bc-frame-footer-padding-top, 0) var(--bc-frame-padding-right) var(--bc-frame-padding-bottom) var(--bc-frame-padding-left);\n  background: var(--bc-frame-footer-bg, transparent);\n  border-top: var(--bc-frame-footer-border-top, none);\n}\n\n.bc-frame-footer-left {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n}\n\n.bc-frame-footer-left > :not(:first-child)::before {\n  content: \"\\00B7\";\n  margin-right: 0.5rem;\n  color: var(--bc-text-color, #888);\n}\n\n.bc-frame-footer-right {\n  display: flex;\n  align-items: center;\n}\n\n.bc-frame-note {\n  --bc-frame-note-color: var(--bc-text-color, #888);\n  --bc-frame-note-font-size: 0.75rem;\n  font-style: italic;\n  color: var(--bc-frame-note-color);\n  font-size: var(--bc-frame-note-font-size);\n  margin: 0;\n  padding: 0 var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n}\n\n.bc-frame-byline,\n.bc-frame-source {\n  --bc-frame-meta-color: var(--bc-text-color, #888);\n  --bc-frame-meta-font-size: 0.75rem;\n  color: var(--bc-frame-meta-color);\n  font-size: var(--bc-frame-meta-font-size);\n}\n\n.bc-frame-byline {\n  white-space: pre-line;\n}\n\n.bc-frame-credit {\n  --bc-frame-credit-color: var(--bc-text-color, #666);\n  --bc-frame-credit-font-size: 0.75rem;\n  color: var(--bc-frame-credit-color);\n  font-size: var(--bc-frame-credit-font-size);\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n}\n\n.bc-frame-source-link {\n  color: inherit;\n  text-decoration: underline;\n}\n\n.bc-axis .domain {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-axis .tick text {\n  fill: var(--bc-axis-color, #333);\n  font-size: 10px;\n}\n\n.bc-axis .tick line {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-grid-line {\n  stroke: var(--bc-grid-color, #e0e0e0);\n  stroke-width: 1;\n}\n\n.bc-zero-baseline {\n  stroke: #666;\n  stroke-width: 1;\n}\n\n.bc-bar {\n  /* fill is set via D3 .attr() from data-bound colors \u2014 do not override */\n}\n\n.bc-line {\n  fill: none;\n  stroke-width: 2;\n}\n\n.bc-value-label {\n  font-size: 11px;\n  /* fill is set via D3 .attr() \u2014 do not override */\n}\n\n.bc-direct-label {\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.bc-tooltip {\n  position: absolute;\n  pointer-events: none;\n  background: var(--bc-tooltip-bg, #fff);\n  color: var(--bc-tooltip-color, #212529);\n  border: 1px solid var(--bc-tooltip-border-color, #dee2e6);\n  border-radius: 4px;\n  padding: 6px 10px;\n  font-size: 13px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n  z-index: 9999;\n  display: none;\n}\n\n.bc-crosshair {\n  stroke: #999;\n  stroke-width: 1;\n  pointer-events: none;\n}\n\n.bc-arc-label-line {\n  fill: none;\n  stroke: #999;\n  stroke-width: 1;\n}\n\n.bc-theme-blueprint-framed {\n  --bc-frame-header-border-bottom: 1px solid #e0e0e0;\n  --bc-frame-header-margin-bottom: 0.5rem;\n  --bc-frame-footer-bg: #f8f8f8;\n  --bc-frame-footer-border-top: 1px solid #e0e0e0;\n  --bc-frame-footer-padding-top: 0.625rem;\n}\n\n[data-bs-theme=\"dark\"] .bc-frame.bc-theme-blueprint-bold {\n  --bc-frame-bg: #000000;\n  --bc-text-color: rgba(255, 255, 255, 0.95);\n  --bc-axis-color: rgba(255, 255, 255, 0.7);\n  --bc-grid-color: rgba(255, 255, 255, 0.12);\n}\n\n.blueprint-chart-error {\n  color: red;\n  padding: 1em;\n  border: 1px solid red;\n}\n\nbody {\n  margin: 0;\n  overflow: hidden;\n}\n\n/* Dark theme: activated by data-bs-theme=\"dark\" on the document (matching the\n   editor's convention). The chart owns these colors; the dark frame background\n   also drives the renderer's resolveBackgroundColor, so data-mark colors and\n   contrast labels adapt at render time. Scoped to .bc-frame so these override\n   the frame's own light --bc-frame-bg / --bc-text-color declarations (which are\n   set on .bc-frame and would otherwise shadow a document-level override). */\n[data-bs-theme=\"dark\"] body {\n  /* color themes above-bar value labels (fill: currentColor). */\n  background: #1c1c1c;\n  color: rgba(255, 255, 255, 0.9);\n}\n\n[data-bs-theme=\"dark\"] .bc-frame {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n";
+export declare const CHART_CSS = "\n/* Blueprint Chart \u2014 Runtime Embed Styles\n   CSS custom properties with baked-in defaults for standalone iframe usage. */\n\n.bc-frame {\n  --bc-frame-font-family: system-ui, -apple-system, sans-serif;\n  --bc-frame-padding: 0;\n  /* Per-side properties so a multi-value `padding` shorthand never lands in a\n     single-value shorthand slot, which would invalidate the whole declaration. */\n  --bc-frame-padding-top: var(--bc-frame-padding);\n  --bc-frame-padding-right: var(--bc-frame-padding);\n  --bc-frame-padding-bottom: var(--bc-frame-padding);\n  --bc-frame-padding-left: var(--bc-frame-padding);\n  --bc-frame-bg: #fff;\n  --bc-text-color: #333;\n  font-family: var(--bc-frame-font-family);\n  background: var(--bc-frame-bg);\n  /* currentColor marks (e.g. above-bar value labels) follow the theme text\n     colour, not the ambient document colour. */\n  color: var(--bc-text-color, #333);\n}\n\n/* Keeps the SVG's baked-in background rect (applyCanvasBackground) in sync\n   with the frame background; transparentBackground sets the var to\n   transparent at runtime. */\n.bc-frame .bc-canvas-bg {\n  fill: var(--bc-frame-bg, #fff);\n}\n\n/* `theme = \"dark\"` emits this class on the frame, so it carries the same\n   surface the document-level dark mode does, without depending on an ambient\n   data-bs-theme. Keep in sync with DARK_THEME in render/frame-svg.ts. */\n.bc-frame.bc-theme-dark {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.bc-frame-header {\n  padding: var(--bc-frame-padding-top) var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n  background: var(--bc-frame-header-bg, transparent);\n  border-bottom: var(--bc-frame-header-border-bottom, none);\n  margin-bottom: var(--bc-frame-header-margin-bottom, 0);\n}\n\n.bc-frame-body {\n  padding: 0 var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n}\n\n/* Constrained-height mode (`heightMode` fixed or aspect-ratio). post-render.ts\n   adds .bc-frame--constrained and layout-constraints.ts pins the container\n   height with overflow: hidden; without these rules the frame renders at its\n   natural height and is guillotined. Mirrors chart.scss \u2014 keep the two in\n   sync. */\n/* An axis label moved inside the plot sits directly on the marks; painting the\n   stroke first keeps it readable over a filled band. */\n.bc-axis-label-inside {\n  paint-order: stroke;\n  stroke: var(--bc-frame-bg, #fff);\n  stroke-width: 3px;\n  stroke-linejoin: round;\n}\n\n.bc-frame--constrained {\n  flex: 1;\n  position: relative;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-header {\n  position: relative;\n  z-index: 1;\n  background: var(--bc-frame-header-bg, var(--bc-frame-bg, #fff));\n}\n\n.bc-frame--constrained .bc-frame-body {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-note {\n  position: absolute;\n  bottom: var(--bc-footer-h, 0);\n  left: 0;\n  right: 0;\n  z-index: 1;\n}\n\n.bc-frame--constrained .bc-frame-footer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n}\n\n.bc-frame-title {\n  --bc-frame-title-color: var(--bc-text-color, #333);\n  --bc-frame-title-font-size: 1.25rem;\n  color: var(--bc-frame-title-color);\n  font-size: var(--bc-frame-title-font-size);\n  font-weight: bold;\n  margin: 0;\n  white-space: pre-line;\n}\n\n.bc-frame-description {\n  --bc-frame-description-color: var(--bc-text-color, #555);\n  --bc-frame-description-font-size: 0.875rem;\n  color: var(--bc-frame-description-color);\n  font-size: var(--bc-frame-description-font-size);\n  margin: 0.25rem 0 0;\n  white-space: pre-line;\n}\n\n.bc-frame-footer {\n  margin-top: 0.5rem;\n  gap: 0.25rem 1rem;\n  padding: var(--bc-frame-footer-padding-top, 0) var(--bc-frame-padding-right) var(--bc-frame-padding-bottom) var(--bc-frame-padding-left);\n  background: var(--bc-frame-footer-bg, transparent);\n  border-top: var(--bc-frame-footer-border-top, none);\n}\n\n.bc-frame-footer-left {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n}\n\n.bc-frame-footer-left > :not(:first-child)::before {\n  content: \"\\00B7\";\n  margin-right: 0.5rem;\n  color: var(--bc-text-color, #888);\n}\n\n.bc-frame-footer-right {\n  display: flex;\n  align-items: center;\n}\n\n.bc-frame-note {\n  --bc-frame-note-color: var(--bc-text-color, #888);\n  --bc-frame-note-font-size: 0.75rem;\n  font-style: italic;\n  color: var(--bc-frame-note-color);\n  font-size: var(--bc-frame-note-font-size);\n  margin: 0;\n  padding: 0 var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n}\n\n.bc-frame-byline,\n.bc-frame-source {\n  --bc-frame-meta-color: var(--bc-text-color, #888);\n  --bc-frame-meta-font-size: 0.75rem;\n  color: var(--bc-frame-meta-color);\n  font-size: var(--bc-frame-meta-font-size);\n}\n\n.bc-frame-byline {\n  white-space: pre-line;\n}\n\n.bc-frame-credit {\n  --bc-frame-credit-color: var(--bc-text-color, #666);\n  --bc-frame-credit-font-size: 0.75rem;\n  color: var(--bc-frame-credit-color);\n  font-size: var(--bc-frame-credit-font-size);\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n}\n\n.bc-frame-source-link {\n  color: inherit;\n  text-decoration: underline;\n}\n\n.bc-axis .domain {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-axis .tick text {\n  fill: var(--bc-axis-color, #333);\n  font-size: 10px;\n}\n\n.bc-axis .tick line {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-grid-line {\n  stroke: var(--bc-grid-color, #e0e0e0);\n  stroke-width: 1;\n}\n\n.bc-zero-baseline {\n  stroke: #666;\n  stroke-width: 1;\n}\n\n.bc-bar {\n  /* fill is set via D3 .attr() from data-bound colors \u2014 do not override */\n}\n\n.bc-line {\n  fill: none;\n  stroke-width: 2;\n}\n\n.bc-value-label {\n  font-size: 11px;\n  /* fill is set via D3 .attr() \u2014 do not override */\n}\n\n.bc-direct-label {\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.bc-tooltip {\n  position: absolute;\n  pointer-events: none;\n  background: var(--bc-tooltip-bg, #fff);\n  color: var(--bc-tooltip-color, #212529);\n  border: 1px solid var(--bc-tooltip-border-color, #dee2e6);\n  border-radius: 4px;\n  padding: 6px 10px;\n  font-size: 13px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n  max-width: var(--bc-tooltip-max-width, 240px);\n  overflow-wrap: break-word;\n  z-index: 9999;\n  display: none;\n}\n\n.bc-crosshair {\n  stroke: #999;\n  stroke-width: 1;\n  pointer-events: none;\n}\n\n.bc-arc-label-line {\n  fill: none;\n  stroke: #999;\n  stroke-width: 1;\n}\n\n.bc-theme-blueprint-framed {\n  --bc-frame-header-border-bottom: 1px solid #e0e0e0;\n  --bc-frame-header-margin-bottom: 0.5rem;\n  --bc-frame-footer-bg: #f8f8f8;\n  --bc-frame-footer-border-top: 1px solid #e0e0e0;\n  --bc-frame-footer-padding-top: 0.625rem;\n}\n\n[data-bs-theme=\"dark\"] .bc-frame.bc-theme-blueprint-bold:not([data-bs-theme=\"dark\"] [data-bs-theme=\"light\"] *) {\n  --bc-frame-bg: #000000;\n  --bc-text-color: rgba(255, 255, 255, 0.95);\n  --bc-axis-color: rgba(255, 255, 255, 0.7);\n  --bc-grid-color: rgba(255, 255, 255, 0.12);\n}\n\n.blueprint-chart-error {\n  color: red;\n  padding: 1em;\n  border: 1px solid red;\n}\n\nbody {\n  margin: 0;\n  overflow: hidden;\n}\n\n/* Dark theme: activated by data-bs-theme=\"dark\" on the document (matching the\n   editor's convention). The chart owns these colors; the dark frame background\n   also drives the renderer's resolveBackgroundColor, so data-mark colors and\n   contrast labels adapt at render time. Scoped to .bc-frame so these override\n   the frame's own light --bc-frame-bg / --bc-text-color declarations (which are\n   set on .bc-frame and would otherwise shadow a document-level override). */\n[data-bs-theme=\"dark\"] body {\n  /* color themes above-bar value labels (fill: currentColor). */\n  background: #1c1c1c;\n  color: rgba(255, 255, 255, 0.9);\n}\n\n[data-bs-theme=\"dark\"] .bc-frame {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n";

package/dist/{runtime-gzeMNwqx.js → runtime-D_vHKSyR.js}

@@ -57,7 +57,7 @@ function d(n, r, i) {
 	return [
 		"<!DOCTYPE html>",
 		`${o}<head>`,
-		"<style>\n/* Blueprint Chart — Runtime Embed Styles\n   CSS custom properties with baked-in defaults for standalone iframe usage. */\n\n.bc-frame {\n  --bc-frame-font-family: system-ui, -apple-system, sans-serif;\n  --bc-frame-padding: 0;\n  /* Per-side properties so a multi-value `padding` shorthand never lands in a\n     single-value shorthand slot, which would invalidate the whole declaration. */\n  --bc-frame-padding-top: var(--bc-frame-padding);\n  --bc-frame-padding-right: var(--bc-frame-padding);\n  --bc-frame-padding-bottom: var(--bc-frame-padding);\n  --bc-frame-padding-left: var(--bc-frame-padding);\n  --bc-frame-bg: #fff;\n  --bc-text-color: #333;\n  font-family: var(--bc-frame-font-family);\n  background: var(--bc-frame-bg);\n  /* currentColor marks (e.g. above-bar value labels) follow the theme text\n     colour, not the ambient document colour. */\n  color: var(--bc-text-color, #333);\n}\n\n/* Keeps the SVG's baked-in background rect (applyCanvasBackground) in sync\n   with the frame background; transparentBackground sets the var to\n   transparent at runtime. */\n.bc-frame .bc-canvas-bg {\n  fill: var(--bc-frame-bg, #fff);\n}\n\n/* `theme = \"dark\"` emits this class on the frame, so it carries the same\n   surface the document-level dark mode does, without depending on an ambient\n   data-bs-theme. Keep in sync with DARK_THEME in render/frame-svg.ts. */\n.bc-frame.bc-theme-dark {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.bc-frame-header {\n  padding: var(--bc-frame-padding-top) var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n  background: var(--bc-frame-header-bg, transparent);\n  border-bottom: var(--bc-frame-header-border-bottom, none);\n  margin-bottom: var(--bc-frame-header-margin-bottom, 0);\n}\n\n.bc-frame-body {\n  padding: 0 var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n}\n\n/* Constrained-height mode (`heightMode` fixed or aspect-ratio). post-render.ts\n   adds .bc-frame--constrained and layout-constraints.ts pins the container\n   height with overflow: hidden; without these rules the frame renders at its\n   natural height and is guillotined. Mirrors chart.scss — keep the two in\n   sync. */\n/* An axis label moved inside the plot sits directly on the marks; painting the\n   stroke first keeps it readable over a filled band. */\n.bc-axis-label-inside {\n  paint-order: stroke;\n  stroke: var(--bc-frame-bg, #fff);\n  stroke-width: 3px;\n  stroke-linejoin: round;\n}\n\n.bc-frame--constrained {\n  flex: 1;\n  position: relative;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-header {\n  position: relative;\n  z-index: 1;\n  background: var(--bc-frame-header-bg, var(--bc-frame-bg, #fff));\n}\n\n.bc-frame--constrained .bc-frame-body {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-note {\n  position: absolute;\n  bottom: var(--bc-footer-h, 0);\n  left: 0;\n  right: 0;\n  z-index: 1;\n}\n\n.bc-frame--constrained .bc-frame-footer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n}\n\n.bc-frame-title {\n  --bc-frame-title-color: var(--bc-text-color, #333);\n  --bc-frame-title-font-size: 1.25rem;\n  color: var(--bc-frame-title-color);\n  font-size: var(--bc-frame-title-font-size);\n  font-weight: bold;\n  margin: 0;\n  white-space: pre-line;\n}\n\n.bc-frame-description {\n  --bc-frame-description-color: var(--bc-text-color, #555);\n  --bc-frame-description-font-size: 0.875rem;\n  color: var(--bc-frame-description-color);\n  font-size: var(--bc-frame-description-font-size);\n  margin: 0.25rem 0 0;\n  white-space: pre-line;\n}\n\n.bc-frame-footer {\n  margin-top: 0.5rem;\n  gap: 0.25rem 1rem;\n  padding: var(--bc-frame-footer-padding-top, 0) var(--bc-frame-padding-right) var(--bc-frame-padding-bottom) var(--bc-frame-padding-left);\n  background: var(--bc-frame-footer-bg, transparent);\n  border-top: var(--bc-frame-footer-border-top, none);\n}\n\n.bc-frame-footer-left {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n}\n\n.bc-frame-footer-left > :not(:first-child)::before {\n  content: \"\\00B7\";\n  margin-right: 0.5rem;\n  color: var(--bc-text-color, #888);\n}\n\n.bc-frame-footer-right {\n  display: flex;\n  align-items: center;\n}\n\n.bc-frame-note {\n  --bc-frame-note-color: var(--bc-text-color, #888);\n  --bc-frame-note-font-size: 0.75rem;\n  font-style: italic;\n  color: var(--bc-frame-note-color);\n  font-size: var(--bc-frame-note-font-size);\n  margin: 0;\n  padding: 0 var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n}\n\n.bc-frame-byline,\n.bc-frame-source {\n  --bc-frame-meta-color: var(--bc-text-color, #888);\n  --bc-frame-meta-font-size: 0.75rem;\n  color: var(--bc-frame-meta-color);\n  font-size: var(--bc-frame-meta-font-size);\n}\n\n.bc-frame-byline {\n  white-space: pre-line;\n}\n\n.bc-frame-credit {\n  --bc-frame-credit-color: var(--bc-text-color, #666);\n  --bc-frame-credit-font-size: 0.75rem;\n  color: var(--bc-frame-credit-color);\n  font-size: var(--bc-frame-credit-font-size);\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n}\n\n.bc-frame-source-link {\n  color: inherit;\n  text-decoration: underline;\n}\n\n.bc-axis .domain {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-axis .tick text {\n  fill: var(--bc-axis-color, #333);\n  font-size: 10px;\n}\n\n.bc-axis .tick line {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-grid-line {\n  stroke: var(--bc-grid-color, #e0e0e0);\n  stroke-width: 1;\n}\n\n.bc-zero-baseline {\n  stroke: #666;\n  stroke-width: 1;\n}\n\n.bc-bar {\n  /* fill is set via D3 .attr() from data-bound colors — do not override */\n}\n\n.bc-line {\n  fill: none;\n  stroke-width: 2;\n}\n\n.bc-value-label {\n  font-size: 11px;\n  /* fill is set via D3 .attr() — do not override */\n}\n\n.bc-direct-label {\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.bc-tooltip {\n  position: absolute;\n  pointer-events: none;\n  background: var(--bc-tooltip-bg, #fff);\n  color: var(--bc-tooltip-color, #212529);\n  border: 1px solid var(--bc-tooltip-border-color, #dee2e6);\n  border-radius: 4px;\n  padding: 6px 10px;\n  font-size: 13px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n  z-index: 9999;\n  display: none;\n}\n\n.bc-crosshair {\n  stroke: #999;\n  stroke-width: 1;\n  pointer-events: none;\n}\n\n.bc-arc-label-line {\n  fill: none;\n  stroke: #999;\n  stroke-width: 1;\n}\n\n.bc-theme-blueprint-framed {\n  --bc-frame-header-border-bottom: 1px solid #e0e0e0;\n  --bc-frame-header-margin-bottom: 0.5rem;\n  --bc-frame-footer-bg: #f8f8f8;\n  --bc-frame-footer-border-top: 1px solid #e0e0e0;\n  --bc-frame-footer-padding-top: 0.625rem;\n}\n\n[data-bs-theme=\"dark\"] .bc-frame.bc-theme-blueprint-bold {\n  --bc-frame-bg: #000000;\n  --bc-text-color: rgba(255, 255, 255, 0.95);\n  --bc-axis-color: rgba(255, 255, 255, 0.7);\n  --bc-grid-color: rgba(255, 255, 255, 0.12);\n}\n\n.blueprint-chart-error {\n  color: red;\n  padding: 1em;\n  border: 1px solid red;\n}\n\nbody {\n  margin: 0;\n  overflow: hidden;\n}\n\n/* Dark theme: activated by data-bs-theme=\"dark\" on the document (matching the\n   editor's convention). The chart owns these colors; the dark frame background\n   also drives the renderer's resolveBackgroundColor, so data-mark colors and\n   contrast labels adapt at render time. Scoped to .bc-frame so these override\n   the frame's own light --bc-frame-bg / --bc-text-color declarations (which are\n   set on .bc-frame and would otherwise shadow a document-level override). */\n[data-bs-theme=\"dark\"] body {\n  /* color themes above-bar value labels (fill: currentColor). */\n  background: #1c1c1c;\n  color: rgba(255, 255, 255, 0.9);\n}\n\n[data-bs-theme=\"dark\"] .bc-frame {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n</style>",
+		"<style>\n/* Blueprint Chart — Runtime Embed Styles\n   CSS custom properties with baked-in defaults for standalone iframe usage. */\n\n.bc-frame {\n  --bc-frame-font-family: system-ui, -apple-system, sans-serif;\n  --bc-frame-padding: 0;\n  /* Per-side properties so a multi-value `padding` shorthand never lands in a\n     single-value shorthand slot, which would invalidate the whole declaration. */\n  --bc-frame-padding-top: var(--bc-frame-padding);\n  --bc-frame-padding-right: var(--bc-frame-padding);\n  --bc-frame-padding-bottom: var(--bc-frame-padding);\n  --bc-frame-padding-left: var(--bc-frame-padding);\n  --bc-frame-bg: #fff;\n  --bc-text-color: #333;\n  font-family: var(--bc-frame-font-family);\n  background: var(--bc-frame-bg);\n  /* currentColor marks (e.g. above-bar value labels) follow the theme text\n     colour, not the ambient document colour. */\n  color: var(--bc-text-color, #333);\n}\n\n/* Keeps the SVG's baked-in background rect (applyCanvasBackground) in sync\n   with the frame background; transparentBackground sets the var to\n   transparent at runtime. */\n.bc-frame .bc-canvas-bg {\n  fill: var(--bc-frame-bg, #fff);\n}\n\n/* `theme = \"dark\"` emits this class on the frame, so it carries the same\n   surface the document-level dark mode does, without depending on an ambient\n   data-bs-theme. Keep in sync with DARK_THEME in render/frame-svg.ts. */\n.bc-frame.bc-theme-dark {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.bc-frame-header {\n  padding: var(--bc-frame-padding-top) var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n  background: var(--bc-frame-header-bg, transparent);\n  border-bottom: var(--bc-frame-header-border-bottom, none);\n  margin-bottom: var(--bc-frame-header-margin-bottom, 0);\n}\n\n.bc-frame-body {\n  padding: 0 var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n}\n\n/* Constrained-height mode (`heightMode` fixed or aspect-ratio). post-render.ts\n   adds .bc-frame--constrained and layout-constraints.ts pins the container\n   height with overflow: hidden; without these rules the frame renders at its\n   natural height and is guillotined. Mirrors chart.scss — keep the two in\n   sync. */\n/* An axis label moved inside the plot sits directly on the marks; painting the\n   stroke first keeps it readable over a filled band. */\n.bc-axis-label-inside {\n  paint-order: stroke;\n  stroke: var(--bc-frame-bg, #fff);\n  stroke-width: 3px;\n  stroke-linejoin: round;\n}\n\n.bc-frame--constrained {\n  flex: 1;\n  position: relative;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-header {\n  position: relative;\n  z-index: 1;\n  background: var(--bc-frame-header-bg, var(--bc-frame-bg, #fff));\n}\n\n.bc-frame--constrained .bc-frame-body {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.bc-frame--constrained .bc-frame-note {\n  position: absolute;\n  bottom: var(--bc-footer-h, 0);\n  left: 0;\n  right: 0;\n  z-index: 1;\n}\n\n.bc-frame--constrained .bc-frame-footer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n}\n\n.bc-frame-title {\n  --bc-frame-title-color: var(--bc-text-color, #333);\n  --bc-frame-title-font-size: 1.25rem;\n  color: var(--bc-frame-title-color);\n  font-size: var(--bc-frame-title-font-size);\n  font-weight: bold;\n  margin: 0;\n  white-space: pre-line;\n}\n\n.bc-frame-description {\n  --bc-frame-description-color: var(--bc-text-color, #555);\n  --bc-frame-description-font-size: 0.875rem;\n  color: var(--bc-frame-description-color);\n  font-size: var(--bc-frame-description-font-size);\n  margin: 0.25rem 0 0;\n  white-space: pre-line;\n}\n\n.bc-frame-footer {\n  margin-top: 0.5rem;\n  gap: 0.25rem 1rem;\n  padding: var(--bc-frame-footer-padding-top, 0) var(--bc-frame-padding-right) var(--bc-frame-padding-bottom) var(--bc-frame-padding-left);\n  background: var(--bc-frame-footer-bg, transparent);\n  border-top: var(--bc-frame-footer-border-top, none);\n}\n\n.bc-frame-footer-left {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  gap: 0.25rem 0.75rem;\n}\n\n.bc-frame-footer-left > :not(:first-child)::before {\n  content: \"\\00B7\";\n  margin-right: 0.5rem;\n  color: var(--bc-text-color, #888);\n}\n\n.bc-frame-footer-right {\n  display: flex;\n  align-items: center;\n}\n\n.bc-frame-note {\n  --bc-frame-note-color: var(--bc-text-color, #888);\n  --bc-frame-note-font-size: 0.75rem;\n  font-style: italic;\n  color: var(--bc-frame-note-color);\n  font-size: var(--bc-frame-note-font-size);\n  margin: 0;\n  padding: 0 var(--bc-frame-padding-right) 0 var(--bc-frame-padding-left);\n}\n\n.bc-frame-byline,\n.bc-frame-source {\n  --bc-frame-meta-color: var(--bc-text-color, #888);\n  --bc-frame-meta-font-size: 0.75rem;\n  color: var(--bc-frame-meta-color);\n  font-size: var(--bc-frame-meta-font-size);\n}\n\n.bc-frame-byline {\n  white-space: pre-line;\n}\n\n.bc-frame-credit {\n  --bc-frame-credit-color: var(--bc-text-color, #666);\n  --bc-frame-credit-font-size: 0.75rem;\n  color: var(--bc-frame-credit-color);\n  font-size: var(--bc-frame-credit-font-size);\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n}\n\n.bc-frame-source-link {\n  color: inherit;\n  text-decoration: underline;\n}\n\n.bc-axis .domain {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-axis .tick text {\n  fill: var(--bc-axis-color, #333);\n  font-size: 10px;\n}\n\n.bc-axis .tick line {\n  stroke: var(--bc-axis-color, #333);\n}\n\n.bc-grid-line {\n  stroke: var(--bc-grid-color, #e0e0e0);\n  stroke-width: 1;\n}\n\n.bc-zero-baseline {\n  stroke: #666;\n  stroke-width: 1;\n}\n\n.bc-bar {\n  /* fill is set via D3 .attr() from data-bound colors — do not override */\n}\n\n.bc-line {\n  fill: none;\n  stroke-width: 2;\n}\n\n.bc-value-label {\n  font-size: 11px;\n  /* fill is set via D3 .attr() — do not override */\n}\n\n.bc-direct-label {\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.bc-tooltip {\n  position: absolute;\n  pointer-events: none;\n  background: var(--bc-tooltip-bg, #fff);\n  color: var(--bc-tooltip-color, #212529);\n  border: 1px solid var(--bc-tooltip-border-color, #dee2e6);\n  border-radius: 4px;\n  padding: 6px 10px;\n  font-size: 13px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n  max-width: var(--bc-tooltip-max-width, 240px);\n  overflow-wrap: break-word;\n  z-index: 9999;\n  display: none;\n}\n\n.bc-crosshair {\n  stroke: #999;\n  stroke-width: 1;\n  pointer-events: none;\n}\n\n.bc-arc-label-line {\n  fill: none;\n  stroke: #999;\n  stroke-width: 1;\n}\n\n.bc-theme-blueprint-framed {\n  --bc-frame-header-border-bottom: 1px solid #e0e0e0;\n  --bc-frame-header-margin-bottom: 0.5rem;\n  --bc-frame-footer-bg: #f8f8f8;\n  --bc-frame-footer-border-top: 1px solid #e0e0e0;\n  --bc-frame-footer-padding-top: 0.625rem;\n}\n\n[data-bs-theme=\"dark\"] .bc-frame.bc-theme-blueprint-bold:not([data-bs-theme=\"dark\"] [data-bs-theme=\"light\"] *) {\n  --bc-frame-bg: #000000;\n  --bc-text-color: rgba(255, 255, 255, 0.95);\n  --bc-axis-color: rgba(255, 255, 255, 0.7);\n  --bc-grid-color: rgba(255, 255, 255, 0.12);\n}\n\n.blueprint-chart-error {\n  color: red;\n  padding: 1em;\n  border: 1px solid red;\n}\n\nbody {\n  margin: 0;\n  overflow: hidden;\n}\n\n/* Dark theme: activated by data-bs-theme=\"dark\" on the document (matching the\n   editor's convention). The chart owns these colors; the dark frame background\n   also drives the renderer's resolveBackgroundColor, so data-mark colors and\n   contrast labels adapt at render time. Scoped to .bc-frame so these override\n   the frame's own light --bc-frame-bg / --bc-text-color declarations (which are\n   set on .bc-frame and would otherwise shadow a document-level override). */\n[data-bs-theme=\"dark\"] body {\n  /* color themes above-bar value labels (fill: currentColor). */\n  background: #1c1c1c;\n  color: rgba(255, 255, 255, 0.9);\n}\n\n[data-bs-theme=\"dark\"] .bc-frame {\n  --bc-frame-bg: #1c1c1c;\n  --bc-text-color: rgba(255, 255, 255, 0.9);\n  --bc-axis-color: rgba(255, 255, 255, 0.6);\n  --bc-grid-color: #333;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n</style>",
 		"</head><body>",
 		"<div id=\"chart\" class=\"blueprint-chart-container\"></div>",
 		a,

package/dist/runtime.js

@@ -1,5 +1,5 @@
-import { t as e } from "./render-bpc-BL73t_Ih.js";
-import { n as t } from "./runtime-gzeMNwqx.js";
+import { t as e } from "./render-bpc-t7lTvln4.js";
+import { n as t } from "./runtime-D_vHKSyR.js";
 //#region src/runtime/scenes.ts
 function n(e, t, n) {
 	let r = 0, i = !1, a = document.createElement("nav");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprint-chart/lib",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "DSL-driven charting library built on D3. Define charts as text, render them anywhere.",
   "keywords": [
     "chart",

package/src/charts/chart.scss

@@ -473,6 +473,7 @@
   --bc-tooltip-padding: 6px 10px;
   --bc-tooltip-font-size: 13px;
   --bc-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  --bc-tooltip-max-width: 240px;
 
   position: absolute;
   pointer-events: none;
@@ -483,6 +484,8 @@
   padding: var(--bc-tooltip-padding);
   font-size: var(--bc-tooltip-font-size);
   box-shadow: var(--bc-tooltip-shadow);
+  max-width: var(--bc-tooltip-max-width);
+  overflow-wrap: break-word;
   z-index: 9999;
   display: none;
 }