@opendata-ai/openchart-core 7.10.0 → 8.0.0-rc.1

package/src/styles/__tests__/reduced-motion-selectors.test.ts

@@ -0,0 +1,28 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { CSS_TOKEN_ROOT_SELECTORS } from '../token-definitions';
+
+describe('reduced-motion.css', () => {
+  it('uses the same root selectors as CSS_TOKEN_ROOT_SELECTORS', () => {
+    const css = readFileSync(resolve(__dirname, '../reduced-motion.css'), 'utf8');
+    const selectors = CSS_TOKEN_ROOT_SELECTORS.every((sel) => css.includes(sel));
+    expect(selectors).toBe(true);
+
+    const isBlocks = [...css.matchAll(/:is\(\s*([\s\S]*?)\s*\)/g)];
+    const selectorsInCss = new Set(
+      isBlocks.flatMap((m) =>
+        m[1]
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean),
+      ),
+    );
+    for (const sel of CSS_TOKEN_ROOT_SELECTORS) {
+      expect(selectorsInCss.has(sel)).toBe(true);
+    }
+    for (const sel of selectorsInCss) {
+      expect(CSS_TOKEN_ROOT_SELECTORS).toContain(sel);
+    }
+  });
+});

package/src/styles/animation.css

@@ -1,170 +1,199 @@
-/* ---------------------------------------------------------------------------
- * Animation scoped rules (.oc-animate enables animation on the chart root)
- * --------------------------------------------------------------------------- */
-
-.oc-animate {
-  /* Vertical bars (default): smooth ease-out, no overshoot.
-     oc-mark-bar is reserved for future mark type aliases. */
-  & .oc-mark-rect rect,
-  & .oc-mark-bar rect {
-    animation: oc-enter-bar var(--oc-animation-duration) var(--oc-ease-smooth) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
+@layer oc.animation {
+  /* ---------------------------------------------------------------------------
+   * Animation scoped rules (.oc-animate enables animation on the chart root)
+   * --------------------------------------------------------------------------- */
+
+  .oc-animate {
+    /* Vertical bars (default): smooth ease-out, no overshoot.
+       oc-mark-bar is reserved for future mark type aliases. */
+    & .oc-mark-rect rect,
+    & .oc-mark-bar rect {
+      animation: oc-enter-bar var(--oc-animation-duration) var(--oc-ease-smooth) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
+    }
+
+    /* Horizontal bars (data-orient is on the mark group, not the SVG root) */
+    & .oc-mark-rect[data-orient="horizontal"] rect,
+    & .oc-mark-bar[data-orient="horizontal"] rect {
+      animation-name: oc-enter-bar-h;
+    }
+
+    /* Stacked bar/column segments: chain sequentially so each segment starts
+       right when the previous one finishes, creating one fluid reveal.
+       Uses linear easing so handoffs between segments are seamless (no
+       deceleration/acceleration stutter at segment boundaries). */
+    & .oc-mark-rect[data-stack-pos] rect {
+      animation-duration: var(--oc-stack-segment-duration, 150ms);
+      animation-timing-function: linear;
+      animation-delay: calc(
+        var(--oc-animation-stagger) *
+        var(--oc-mark-index, 0) +
+        var(--oc-stack-pos, 0) *
+        var(--oc-stack-segment-duration, 150ms)
+      );
+    }
+
+    /* Line marks: entire group clips left-to-right (no WAAPI needed) */
+    & .oc-mark-line {
+      animation: oc-enter-line var(--oc-animation-duration)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
+    }
+
+    /* Area marks: entire group clips left-to-right + fades in */
+    & .oc-mark-area {
+      animation: oc-enter-line var(--oc-animation-duration)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
+    }
+
+    /* Arc marks (pie/donut slices): simple fade in.
+       Scale transforms break arc positioning because arcs use translate()
+       on parent groups. A clean fade is more elegant for pie/donut anyway. */
+    & .oc-mark-arc {
+      animation: oc-enter-fade-only var(--oc-animation-duration)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
+    }
+
+    /* Point marks (scatter, dot).
+       Points render as bare <circle> elements with class oc-mark-point directly,
+       not wrapped in a group, so we target circle.oc-mark-point (not descendant).
+       Duration is 40% of the configured duration (quick pop-in relative to other marks). */
+    & circle.oc-mark-point,
+    & circle.oc-mark-circle {
+      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.4)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
+    }
+
+    /* Points on line/area charts: delay so they pop in as the line draws through. */
+    & .oc-mark-line ~ circle.oc-mark-point,
+    & .oc-mark-area ~ circle.oc-mark-point {
+      animation-delay: calc(
+        var(--oc-animation-duration) *
+        0.35 +
+        var(--oc-animation-stagger) *
+        var(--oc-mark-index, 0)
+      );
+    }
+
+    /* Text marks: fade + slight slide up */
+    & .oc-mark-text text {
+      animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.6)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
+    }
+
+    /* Rule marks: fade in */
+    & .oc-mark-rule line {
+      animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.5)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
+    }
+
+    /* Tick marks: fade in */
+    & .oc-mark-tick line {
+      animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.5)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
+    }
+
+    /* Data labels: fade after their parent mark */
+    & .oc-mark-label {
+      animation: oc-enter-fade 300ms var(--oc-ease-smooth) both;
+      animation-delay: calc(
+        var(--oc-animation-stagger) *
+        var(--oc-mark-index, 0) +
+        var(--oc-animation-duration) *
+        0.7
+      );
+    }
+
+    /* Annotations: fade in after marks finish */
+    & .oc-annotation {
+      animation: oc-enter-fade 400ms var(--oc-ease-smooth) both;
+      animation-delay: calc(var(--oc-animation-duration) + var(--oc-annotation-delay, 200ms));
+    }
+
+    /* Tilemap tiles: fade in with jittered stagger for organic feel.
+       Per-tile delay is computed in the renderer with pseudo-random variation. */
+    & .oc-tilemap-tile {
+      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.35) ease-in both;
+      animation-delay: var(--oc-tile-delay, 0ms);
+    }
+
+    /* Map features: fill color reveal with shuffled stagger.
+       Per-feature --oc-map-delay is computed in the renderer via a seeded
+       Fisher-Yates shuffle so features pop in organically. */
+    & .oc-map-feature {
+      animation: oc-enter-map-fill var(--oc-animation-duration)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: var(--oc-map-delay, 0ms);
+    }
+
+    /* Bulk mode: high feature counts (counties, ~3k+) get a single group
+       fade instead of per-feature fill animations. opacity is GPU-compositable
+       so this stays smooth regardless of child count. */
+    & .oc-map-features[data-bulk-animate] {
+      animation: oc-enter-fade-only var(--oc-animation-duration)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+    }
+
+    & .oc-map-features[data-bulk-animate] .oc-map-feature {
+      animation: none;
+    }
+
+    /* Map borders: fade in near the end of the feature sweep */
+    & .oc-map-borders path {
+      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.4) ease-in both;
+      animation-delay: calc(var(--oc-animation-duration) * 0.7);
+    }
+
+    /* Sankey nodes: fade in with stagger by column depth (left-to-right) */
+    & .oc-sankey-node rect {
+      animation: oc-enter-fade-only var(--oc-animation-duration)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
+    }
+
+    /* Sankey links: fade in after nodes, with stagger.
+       Links delay by 30% of duration so nodes appear first, then links flow in. */
+    & .oc-sankey-link path {
+      animation: oc-enter-fade-only var(--oc-animation-duration)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(
+        var(--oc-animation-duration) *
+        0.3 +
+        var(--oc-animation-stagger) *
+        var(--oc-mark-index, 0)
+      );
+    }
+
+    /* Barlist rows: fade + slide up per row, bars grow left-to-right */
+    & .oc-barlist-row {
+      animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.6)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: var(--oc-row-delay, 0ms);
+    }
+
+    & .oc-barlist-bar {
+      animation: oc-enter-bar-h var(--oc-animation-duration)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: var(--oc-row-delay, 0ms);
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+   * Sparkline mode: pair the line/area reveal with a stronger ease-out so it
+   * doesn't read as a uniform left-to-right swipe. cubic-bezier(0.16, 1, 0.3, 1)
+   * is "expo-out" — fast initial draw that decelerates noticeably at the end,
+   * giving the trend a hand-drawn feel. Duration is bumped via the engine
+   * (compile.ts) so the cleanup timer stays in sync.
+   * --------------------------------------------------------------------------- */
+
+  .oc-animate[data-display="sparkline"] .oc-mark-line,
+  .oc-animate[data-display="sparkline"] .oc-mark-area {
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   }
-
-  /* Horizontal bars (data-orient is on the mark group, not the SVG root) */
-  & .oc-mark-rect[data-orient="horizontal"] rect,
-  & .oc-mark-bar[data-orient="horizontal"] rect {
-    animation-name: oc-enter-bar-h;
-  }
-
-  /* Stacked bar/column segments: chain sequentially so each segment starts
-     right when the previous one finishes, creating one fluid reveal.
-     Uses linear easing so handoffs between segments are seamless (no
-     deceleration/acceleration stutter at segment boundaries). */
-  & .oc-mark-rect[data-stack-pos] rect {
-    animation-duration: var(--oc-stack-segment-duration, 150ms);
-    animation-timing-function: linear;
-    animation-delay: calc(
-      var(--oc-animation-stagger) *
-      var(--oc-mark-index, 0) +
-      var(--oc-stack-pos, 0) *
-      var(--oc-stack-segment-duration, 150ms)
-    );
-  }
-
-  /* Line marks: entire group clips left-to-right (no WAAPI needed) */
-  & .oc-mark-line {
-    animation: oc-enter-line var(--oc-animation-duration)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-  }
-
-  /* Area marks: entire group clips left-to-right + fades in */
-  & .oc-mark-area {
-    animation: oc-enter-line var(--oc-animation-duration)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-  }
-
-  /* Arc marks (pie/donut slices): simple fade in.
-     Scale transforms break arc positioning because arcs use translate()
-     on parent groups. A clean fade is more elegant for pie/donut anyway. */
-  & .oc-mark-arc {
-    animation: oc-enter-fade-only var(--oc-animation-duration)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-  }
-
-  /* Point marks (scatter, dot).
-     Points render as bare <circle> elements with class oc-mark-point directly,
-     not wrapped in a group, so we target circle.oc-mark-point (not descendant).
-     Duration is 40% of the configured duration (quick pop-in relative to other marks). */
-  & circle.oc-mark-point,
-  & circle.oc-mark-circle {
-    animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.4)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-  }
-
-  /* Points on line/area charts: delay so they pop in as the line draws through. */
-  & .oc-mark-line ~ circle.oc-mark-point,
-  & .oc-mark-area ~ circle.oc-mark-point {
-    animation-delay: calc(
-      var(--oc-animation-duration) *
-      0.35 +
-      var(--oc-animation-stagger) *
-      var(--oc-mark-index, 0)
-    );
-  }
-
-  /* Text marks: fade + slight slide up */
-  & .oc-mark-text text {
-    animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.6)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-  }
-
-  /* Rule marks: fade in */
-  & .oc-mark-rule line {
-    animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.5)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-  }
-
-  /* Tick marks: fade in */
-  & .oc-mark-tick line {
-    animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.5)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-  }
-
-  /* Data labels: fade after their parent mark */
-  & .oc-mark-label {
-    animation: oc-enter-fade 300ms var(--oc-ease-smooth) both;
-    animation-delay: calc(
-      var(--oc-animation-stagger) *
-      var(--oc-mark-index, 0) +
-      var(--oc-animation-duration) *
-      0.7
-    );
-  }
-
-  /* Annotations: fade in after marks finish */
-  & .oc-annotation {
-    animation: oc-enter-fade 400ms var(--oc-ease-smooth) both;
-    animation-delay: calc(var(--oc-animation-duration) + var(--oc-annotation-delay, 200ms));
-  }
-
-  /* Tilemap tiles: fade in with jittered stagger for organic feel.
-     Per-tile delay is computed in the renderer with pseudo-random variation. */
-  & .oc-tilemap-tile {
-    animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.35) ease-in both;
-    animation-delay: var(--oc-tile-delay, 0ms);
-  }
-
-  /* Sankey nodes: fade in with stagger by column depth (left-to-right) */
-  & .oc-sankey-node rect {
-    animation: oc-enter-fade-only var(--oc-animation-duration)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-  }
-
-  /* Sankey links: fade in after nodes, with stagger.
-     Links delay by 30% of duration so nodes appear first, then links flow in. */
-  & .oc-sankey-link path {
-    animation: oc-enter-fade-only var(--oc-animation-duration)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(
-      var(--oc-animation-duration) *
-      0.3 +
-      var(--oc-animation-stagger) *
-      var(--oc-mark-index, 0)
-    );
-  }
-
-  /* Barlist rows: fade + slide up per row, bars grow left-to-right */
-  & .oc-barlist-row {
-    animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.6)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: var(--oc-row-delay, 0ms);
-  }
-
-  & .oc-barlist-bar {
-    animation: oc-enter-bar-h var(--oc-animation-duration)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: var(--oc-row-delay, 0ms);
-  }
-}
-
-/* ---------------------------------------------------------------------------
- * Sparkline mode: pair the line/area reveal with a stronger ease-out so it
- * doesn't read as a uniform left-to-right swipe. cubic-bezier(0.16, 1, 0.3, 1)
- * is "expo-out" — fast initial draw that decelerates noticeably at the end,
- * giving the trend a hand-drawn feel. Duration is bumped via the engine
- * (compile.ts) so the cleanup timer stays in sync.
- * --------------------------------------------------------------------------- */
-
-.oc-animate[data-display="sparkline"] .oc-mark-line,
-.oc-animate[data-display="sparkline"] .oc-mark-area {
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }

package/src/styles/base.css

@@ -1,75 +1,102 @@
-/* ---------------------------------------------------------------------------
- * Wrapper roots
- * --------------------------------------------------------------------------- */
+@layer oc.base {
+  /* ---------------------------------------------------------------------------
+   * Wrapper roots
+   * --------------------------------------------------------------------------- */
 
-.oc-chart-root {
-  width: 100%;
-  height: 100%;
-}
+  .oc-chart-root {
+    width: 100%;
+    height: 100%;
+  }
 
-.oc-table-root,
-.oc-graph-root,
-.oc-sankey-root,
-.oc-barlist-root {
-  width: 100%;
-  height: 100%;
-}
+  .oc-table-root,
+  .oc-graph-root,
+  .oc-sankey-root,
+  .oc-barlist-root,
+  .oc-tilemap-root,
+  .oc-map-root {
+    width: 100%;
+    height: 100%;
+  }
 
-.oc-tilemap-root {
-  width: 100%;
-}
+  .oc-table-root {
+    overflow: auto;
+  }
 
-.oc-table-root {
-  overflow: auto;
-}
+  /* ---------------------------------------------------------------------------
+   * Chart container
+   * --------------------------------------------------------------------------- */
 
-/* ---------------------------------------------------------------------------
- * Chart container
- * --------------------------------------------------------------------------- */
+  .oc-chart {
+    font-family: var(--oc-font-family);
+    display: block;
+    width: 100%;
+  }
 
-.oc-chart {
-  font-family: var(--oc-font-family);
-  display: block;
-  width: 100%;
-}
+  /* ---------------------------------------------------------------------------
+   * BarList SVG container
+   * --------------------------------------------------------------------------- */
 
-/* ---------------------------------------------------------------------------
- * BarList SVG container
- * --------------------------------------------------------------------------- */
+  .oc-tilemap,
+  .oc-map {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
 
-.oc-tilemap {
-  display: block;
-  width: 100%;
-  height: auto;
-}
+  .oc-map-feature {
+    transition: opacity 400ms ease;
+  }
 
-.oc-barlist {
-  display: block;
-  width: 100%;
-}
+  .oc-barlist {
+    display: block;
+    width: 100%;
+  }
 
-/* ---------------------------------------------------------------------------
- * Screen reader only utility
- * --------------------------------------------------------------------------- */
-
-.oc-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border-width: 0;
-}
+  /* ---------------------------------------------------------------------------
+   * Screen reader only utility
+   * --------------------------------------------------------------------------- */
+
+  .oc-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ---------------------------------------------------------------------------
+   * Editable hover feedback
+   * --------------------------------------------------------------------------- */
+
+  .oc-editable-hover {
+    outline: 1.5px solid var(--oc-editable-hover);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  /* ---------------------------------------------------------------------------
+   * Keyboard focus indicators
+   *
+   * --oc-focus carries a light value in tokens.css and a dark value in
+   * dark.css, so both rings stay visible in either mode.
+   * --------------------------------------------------------------------------- */
 
-/* ---------------------------------------------------------------------------
- * Editable hover feedback
- * --------------------------------------------------------------------------- */
+  /* Container ring when the chart itself receives keyboard focus. */
+  .oc-root:focus-visible {
+    outline: 2px solid var(--oc-focus);
+    outline-offset: 2px;
+  }
 
-.oc-editable-hover {
-  outline: 1.5px solid rgba(79, 70, 229, 0.35);
-  outline-offset: 2px;
-  border-radius: 2px;
+  /* Mark ring during arrow-key navigation (see wireKeyboardNav). Outline on
+   * SVG elements draws around the mark's bounding box, same technique as
+   * .oc-editable-hover above. */
+  .oc-mark-focused {
+    outline: 2px solid var(--oc-focus);
+    outline-offset: 1px;
+    border-radius: 2px;
+  }
 }