@semcore/d3-chart 3.60.2-prerelease.0 → 3.61.0-prerelease.0

package/lib/esm/component/Cigarette/Cigarette.mjs

@@ -1,36 +1,33 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from "react";
 import { sstyled, Component } from "@semcore/core";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import React from "react";
 import createElement from "../../createElement.mjs";
-import { roundedPath } from "../../utils.mjs";
 import { PatternFill } from "../../Pattern.mjs";
-import { callAllEventHandlers } from "@semcore/utils/lib/assignProps";
-var CigaretteBarRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(CigaretteBarRoot2, _Component);
-  var _super = _createSuper(CigaretteBarRoot2);
+import { roundedPath } from "../../utils.mjs";
+var CigaretteBarRoot = /* @__PURE__ */ (function(_Component) {
   function CigaretteBarRoot2() {
     var _this;
     _classCallCheck(this, CigaretteBarRoot2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "refElement", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "handleMouseMove", function() {
+    _this = _callSuper(this, CigaretteBarRoot2, [].concat(args));
+    _defineProperty(_this, "refElement", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "handleMouseMove", function() {
       _this.handlers.hovered(true);
       _this.setCursor("pointer");
     });
-    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function() {
+    _defineProperty(_this, "handleMouseLeave", function() {
       _this.handlers.hovered(false);
       _this.setCursor("auto");
     });
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function(e) {
+    _defineProperty(_this, "handleClick", function(e) {
       var _this$asProps = _this.asProps, onClick = _this$asProps.onClick, dataKey = _this$asProps.dataKey;
       if (onClick && e.currentTarget.tagName === "path") {
         e.stopPropagation();
@@ -38,16 +35,17 @@ var CigaretteBarRoot = /* @__PURE__ */ function(_Component) {
         return false;
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "setCursor", function(value) {
+    _defineProperty(_this, "setCursor", function(value) {
       var onClick = _this.asProps.onClick;
       if (onClick) {
         var _this$refElement$curr;
-        (_this$refElement$curr = _this.refElement.current) === null || _this$refElement$curr === void 0 ? void 0 : _this$refElement$curr.style.setProperty("cursor", value);
+        (_this$refElement$curr = _this.refElement.current) === null || _this$refElement$curr === void 0 || _this$refElement$curr.style.setProperty("cursor", value);
       }
     });
     return _this;
   }
-  _createClass(CigaretteBarRoot2, [{
+  _inherits(CigaretteBarRoot2, _Component);
+  return _createClass(CigaretteBarRoot2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -122,8 +120,7 @@ var CigaretteBarRoot = /* @__PURE__ */ function(_Component) {
       })));
     }
   }]);
-  return CigaretteBarRoot2;
-}(Component);
+})(Component);
 _defineProperty(CigaretteBarRoot, "displayName", "Cigarette.BarItem");
 _defineProperty(CigaretteBarRoot, "enhance", [uniqueIDEnhancement()]);
 _defineProperty(CigaretteBarRoot, "style", {});

package/lib/esm/component/StackGroupBar/StackGroupBar.mjs

@@ -2,29 +2,26 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from "react";
 import { Component } from "@semcore/core";
-import createElement from "../../createElement.mjs";
-import { scaleToBand, getChartDefaultColorName } from "../../utils.mjs";
-import Bar, { MIN_HEIGHT } from "../../Bar.mjs";
 import { scaleBand } from "d3-scale";
 import { stack } from "d3-shape";
-var XY0 = Symbol("XY0");
-var StackGroupBarRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(StackGroupBarRoot2, _Component);
-  var _super = _createSuper(StackGroupBarRoot2);
+import React from "react";
+import Bar, { MIN_HEIGHT } from "../../Bar.mjs";
+import createElement from "../../createElement.mjs";
+import { scaleToBand, getChartDefaultColorName } from "../../utils.mjs";
+var XY0 = /* @__PURE__ */ Symbol("XY0");
+var StackGroupBarRoot = /* @__PURE__ */ (function(_Component) {
   function StackGroupBarRoot2(props) {
     var _this;
     _classCallCheck(this, StackGroupBarRoot2);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "groupDomain", /* @__PURE__ */ new Set());
-    _defineProperty(_assertThisInitialized(_this), "scaleGroup", scaleBand());
-    _defineProperty(_assertThisInitialized(_this), "stacks", {});
-    _defineProperty(_assertThisInitialized(_this), "offsetBars", []);
+    _this = _callSuper(this, StackGroupBarRoot2, [props]);
+    _defineProperty(_this, "groupDomain", /* @__PURE__ */ new Set());
+    _defineProperty(_this, "scaleGroup", scaleBand());
+    _defineProperty(_this, "stacks", {});
+    _defineProperty(_this, "offsetBars", []);
     var children = props.children;
     var groups = {};
     React.Children.toArray(children).forEach(function(child) {
@@ -43,7 +40,8 @@ var StackGroupBarRoot = /* @__PURE__ */ function(_Component) {
     });
     return _this;
   }
-  _createClass(StackGroupBarRoot2, [{
+  _inherits(StackGroupBarRoot2, _Component);
+  return _createClass(StackGroupBarRoot2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var scale = this.asProps.scale;
@@ -62,22 +60,21 @@ var StackGroupBarRoot = /* @__PURE__ */ function(_Component) {
     value: function getBarProps(_ref3, index) {
       var _this$offsetBars$seri, _this$scaleGroup$band, _this2 = this;
       var y = _ref3.y, group = _ref3.group, _ref3$hMin = _ref3.hMin, hMin = _ref3$hMin === void 0 ? MIN_HEIGHT : _ref3$hMin;
-      var _this$asProps = this.asProps, x = _this$asProps.x, r = _this$asProps.r, scale = _this$asProps.scale, _this$asProps$maxBarS = _this$asProps.maxBarSize, maxBarSize = _this$asProps$maxBarS === void 0 ? Infinity : _this$asProps$maxBarS, patterns = _this$asProps.patterns;
+      var _this$asProps = this.asProps, x = _this$asProps.x, r = _this$asProps.r, scale = _this$asProps.scale, _this$asProps$maxBarS = _this$asProps.maxBarSize, maxBarSize = _this$asProps$maxBarS === void 0 ? Number.POSITIVE_INFINITY : _this$asProps$maxBarS, patterns = _this$asProps.patterns;
       var _ref4 = scale, _ref5 = _slicedToArray(_ref4, 2), yScale = _ref5[1];
       var allGroupSeries = this.getSeries(group);
       var seriesIndex = allGroupSeries.findIndex(function(s) {
         return s.key === y;
       });
       var series = allGroupSeries[seriesIndex] || [];
-      var rBar = series.map(function(s, i) {
+      var rBar = series.map(function(_s, i) {
         return allGroupSeries.slice(seriesIndex + 1).some(function(bar) {
           return bar[i][0] !== bar[i][1];
         }) ? 0 : r;
       });
       this.offsetBars[seriesIndex] = (_this$offsetBars$seri = this.offsetBars[seriesIndex]) !== null && _this$offsetBars$seri !== void 0 ? _this$offsetBars$seri : [];
       var data = series.map(function(s) {
-        var _objectSpread2;
-        return _objectSpread(_objectSpread({}, s.data), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, y, s[1]), _defineProperty(_objectSpread2, XY0, s[0]), _objectSpread2));
+        return _objectSpread(_objectSpread({}, s.data), {}, _defineProperty(_defineProperty({}, y, s[1]), XY0, s[0]));
       });
       var bandWidth = (_this$scaleGroup$band = this.scaleGroup.bandwidth()) !== null && _this$scaleGroup$band !== void 0 ? _this$scaleGroup$band : 0;
       var width = Math.min(bandWidth, maxBarSize);
@@ -127,8 +124,7 @@ var StackGroupBarRoot = /* @__PURE__ */ function(_Component) {
       });
     }
   }]);
-  return StackGroupBarRoot2;
-}(Component);
+})(Component);
 _defineProperty(StackGroupBarRoot, "displayName", "StackGroupBar");
 _defineProperty(StackGroupBarRoot, "defaultProps", {
   r: 2

package/lib/esm/component/SvgElement.mjs

@@ -0,0 +1,14 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import propsForElement from "@semcore/core/lib/utils/propsForElement";
+import React from "react";
+var _excluded = ["tag"];
+var SvgElement = function SvgElement2(_ref) {
+  var Tag = _ref.tag, props = _objectWithoutProperties(_ref, _excluded);
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ React.createElement(Tag, propsForElement(props, Tag))
+  );
+};
+export {
+  SvgElement
+};

package/lib/esm/createElement.mjs

@@ -1,22 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import React from "react";
+import { CONTEXT_COMPONENT, createBaseComponent, createComponent } from "@semcore/core";
+import assignProps from "@semcore/core/lib/utils/assignProps";
+import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
+import propsForElement from "@semcore/core/lib/utils/propsForElement";
+import { useForkRef } from "@semcore/core/lib/utils/ref";
 import hoistNonReactStatics from "hoist-non-react-statics";
-import createComponent, { createBaseComponent, CONTEXT_COMPONENT } from "@semcore/core";
-import assignProps from "@semcore/utils/lib/assignProps";
-import { useForkRef } from "@semcore/utils/lib/ref";
-import propsForElement from "@semcore/utils/lib/propsForElement";
-import getOriginChildren from "@semcore/utils/lib/getOriginChildren";
+import React from "react";
 import Plot from "./Plot.mjs";
 var _excluded = ["render", "childrenPosition", "x", "y"], _excluded2 = ["forwardRef", "children", "Children", "x", "y"], _excluded3 = ["$rootProps"];
 var EXCLUDE_PROPS = ["data", "scale"];
 function createElementRender() {
   var Element = /* @__PURE__ */ React.forwardRef(function(_ref, ref) {
     var render = _ref.render, _ref$childrenPosition = _ref.childrenPosition, childrenPosition = _ref$childrenPosition === void 0 ? "below" : _ref$childrenPosition, xS = _ref.x, yS = _ref.y, source = _objectWithoutProperties(_ref, _excluded);
-    var _Element$props = Element.props, _Element$props$forwar = _Element$props.forwardRef, forwardRef = _Element$props$forwar === void 0 ? null : _Element$props$forwar;
-    _Element$props.children;
-    var Children = _Element$props.Children, _Element$props$x = _Element$props.x, x = _Element$props$x === void 0 ? xS : _Element$props$x, _Element$props$y = _Element$props.y, y = _Element$props$y === void 0 ? yS : _Element$props$y, props = _objectWithoutProperties(_Element$props, _excluded2);
+    var _Element$props = Element.props, _Element$props$forwar = _Element$props.forwardRef, forwardRef = _Element$props$forwar === void 0 ? null : _Element$props$forwar, _children = _Element$props.children, Children = _Element$props.Children, _Element$props$x = _Element$props.x, x = _Element$props$x === void 0 ? xS : _Element$props$x, _Element$props$y = _Element$props.y, y = _Element$props$y === void 0 ? yS : _Element$props$y, props = _objectWithoutProperties(_Element$props, _excluded2);
     var children = getOriginChildren(Children);
     var mergedProps = assignProps(_objectSpread(_objectSpread({
       x: xS,
@@ -60,7 +58,7 @@ function elementEnhancement() {
     init: function init() {
       this.Element = createElementRender();
     },
-    asProps: function asProps(_ref2, WrapperComponent, isFunction) {
+    asProps: function asProps(_ref2, _WrapperComponent, isFunction) {
       var $rootProps = _ref2.$rootProps, props = _objectWithoutProperties(_ref2, _excluded3);
       if (isFunction) {
         return _objectSpread(_objectSpread(_objectSpread({}, $rootProps), props), {}, {

package/lib/esm/index.mjs

@@ -1,6 +1,8 @@
 import { default as default2 } from "./Plot.mjs";
+import "./component/ChartLegend/index.mjs";
 import { default as default3 } from "./component/Chart/index.mjs";
 import { default as default4 } from "./component/StackGroupBar/StackGroupBar.mjs";
+import { SvgElement } from "./component/SvgElement.mjs";
 import { XAxis, YAxis } from "./Axis.mjs";
 import { default as default5 } from "./Line.mjs";
 import { default as default6 } from "./Bar.mjs";
@@ -54,6 +56,7 @@ export {
   default10 as StackBar,
   default4 as StackGroupBar,
   default12 as StackedArea,
+  SvgElement,
   default19 as Tooltip,
   default17 as Venn,
   XAxis,

package/lib/esm/style/abstract-chart.shadow.css

@@ -0,0 +1,12 @@
+STooltipChildrenWrapper {
+  display: grid;
+  column-gap: var(--intergalactic-spacing-2x, 8px);
+
+  &[columnsCount='2'] {
+    grid-template-columns: auto minmax(28px, max-content);
+  }
+
+  &[columnsCount='3'] {
+    grid-template-columns: auto minmax(28px, max-content) minmax(28px, max-content);
+  }
+}

package/lib/esm/style/area.shadow.css

@@ -1,7 +1,7 @@
 @import './var.css';
 
 SArea {
-  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4));
   fill-opacity: 0.2;
 }
 
@@ -19,7 +19,7 @@ SArea[transparent] {
 }
 
 SAreaLine {
-  stroke: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  stroke: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4));
   stroke-width: 3;
   fill: transparent;
 }
@@ -41,7 +41,7 @@ SAreaLine {
 
 SNull {
   fill: transparent;
-  stroke: var(--intergalactic-chart-grid-x-axis, #c4c7cf);
+  stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.002 175.6));
   stroke-dasharray: 4;
 }
 

package/lib/esm/style/axis.shadow.css

@@ -1,5 +1,5 @@
 SAxis {
-  stroke: var(--intergalactic-chart-grid-x-axis, #c4c7cf);
+  stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.002 175.6));
 }
 
 SAxis[hide] {
@@ -8,7 +8,10 @@ SAxis[hide] {
 
 STick {
   font-size: var(--intergalactic-fs-100, 12px);
-  fill: var(--intergalactic-chart-grid-text-label, #6c6e79);
+  fill: var(--intergalactic-chart-grid-text-label, oklch(0.088 0.026 147.7 / 0.583));
+}
+STick[primaryText] {
+  fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 }
 
 STick[hide] {
@@ -17,12 +20,12 @@ STick[hide] {
 
 SGrid {
   fill: transparent;
-  stroke: var(--intergalactic-border-secondary, #e0e1e9);
+  stroke: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
 }
 
 STitle {
   font-size: var(--intergalactic-fs-100, 12px);
-  fill: var(--intergalactic-text-hint, #6c6e79);
+  fill: var(--intergalactic-text-hint, oklch(0.088 0.026 147.7 / 0.583));
   transform-origin: var(--transform-origin);
 }
 
@@ -61,28 +64,63 @@ STick[position='bottom'] {
   transform: translateY(12px);
   text-anchor: middle;
   dominant-baseline: hanging;
+
+  tspan {
+    dominant-baseline: hanging;
+  }
 }
 
 STick[position='right'] {
   transform: translateX(16px);
-  text-anchor: start;
   dominant-baseline: middle;
+
+  tspan {
+    dominant-baseline: middle;
+  }
+
+  &[multiline] {
+    dominant-baseline: auto;
+
+    tspan {
+      dominant-baseline: auto;
+    }
+  }
 }
 
 STick[position='left'] {
   transform: translateX(-16px);
   text-anchor: end;
   dominant-baseline: middle;
+
+  tspan {
+    dominant-baseline: middle;
+  }
+
+  &[multiline] {
+    dominant-baseline: auto;
+
+    tspan {
+      dominant-baseline: auto;
+    }
+  }
 }
 
 STick[position='custom_0'] {
   transform: translateY(12px);
   text-anchor: middle;
   dominant-baseline: hanging;
+
+  tspan {
+    dominant-baseline: hanging;
+  }
 }
 
 STick[position='custom_1'] {
   transform: translateX(-16px);
   text-anchor: end;
   dominant-baseline: middle;
+
+  tspan {
+    dominant-baseline: middle;
+  }
 }

package/lib/esm/style/bar.shadow.css

@@ -1,7 +1,7 @@
 @import './var.css';
 
 SBar {
-  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4));
   transition-property: height, width, y;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -30,7 +30,7 @@ SBar[onClick] {
 }
 
 SBackground {
-  fill: var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);
+  fill: var(--intergalactic-chart-grid-bar-chart-base-bg, oklch(0.96 0.001 180));
 }
 SBackground[onClick] {
   cursor: pointer;
@@ -41,13 +41,13 @@ SBarAnnotation {
   justify-content: space-between;
 }
 SBarLabel {
-  color: var(--intergalactic-text-primary, #191b23);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   margin-right: auto;
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 142%);
 }
 SBarPercent {
-  color: var(--intergalactic-text-secondary, #6c6e79);
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   margin-right: var(--intergalactic-spacing-2x, 8px);
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 142%);
@@ -56,11 +56,11 @@ SBarValue {
   min-width: 52px;
   display: flex;
   justify-content: flex-end;
-  color: var(--intergalactic-text-primary, #191b23);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 142%);
   text-align: right;
 }
 SCompactHorizontalBarHoverRect {
-  fill: var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3));
+  fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.177 0.033 175.6 / 0.028));
 }

package/lib/esm/style/bubble.shadow.css

@@ -1,8 +1,8 @@
 @import './var.css';
 
 SBubble {
-  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
-  stroke: var(--intergalactic-chart-grid-border, #ffffff);
+  fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4));
+  stroke: var(--intergalactic-chart-grid-border, #fff);
   stroke-width: 2px;
   transition-property: cx, cy;
   transition-duration: var(--duration);
@@ -14,6 +14,14 @@ SBubble {
   }
 }
 
+g[visible='false'] {
+  display: none;
+}
+
+SBubble[clickable] {
+  cursor: pointer;
+}
+
 SBubble[color] {
   fill: var(--color);
 }
@@ -32,7 +40,7 @@ SCenter {
   text-anchor: middle;
   /* disable-tokens-validator */
   font-size: calc(var(--intergalactic-fs-100, 12px) - 1px);
-  stroke: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  stroke: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4));
 }
 
 SCenter[color] {
@@ -44,7 +52,7 @@ SCenter[transparent] {
 }
 
 SLabel {
-  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4));
 }
 
 SLabel[position='right'] {

package/lib/esm/style/donut.shadow.css

@@ -1,8 +1,8 @@
 @import './var.css';
 
 SPie {
-  stroke: var(--intergalactic-chart-grid-border, #ffffff);
-  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  stroke: var(--intergalactic-chart-grid-border, #fff);
+  fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4));
 }
 
 SPie[color] {
@@ -20,7 +20,7 @@ SPie[transparent] {
 }
 
 SEmptyData {
-  fill: var(--intergalactic-chart-palette-order-null, #e0e1e9);
+  fill: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.002 177));
 }
 
 SEmptyData[color] {

package/lib/esm/style/dot.shadow.css

@@ -8,8 +8,8 @@ SDots {
 
 SDot {
   stroke-width: 1px;
-  stroke: var(--intergalactic-chart-grid-border, #ffffff);
-  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  stroke: var(--intergalactic-chart-grid-border, #fff);
+  fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4));
   transition-property: cx, cy, x, y;
   transition-timing-function: ease-in-out;
 }

package/lib/esm/style/hover.shadow.css

@@ -1,9 +1,9 @@
-SHoverLine {
+SHoverLine, SHoverLine:focus-visible {
   outline: none;
-  stroke: var(--intergalactic-chart-grid-x-axis, #c4c7cf);
+  stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.002 175.6));
 }
 
-SHoverRect {
+SHoverRect, SHoverRect:focus-visible {
   outline: none;
-  fill: var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3));
+  fill: var(--intergalactic-chart-grid-bar-chart-hover, oklch(0.177 0.033 175.6 / 0.028));
 }

package/lib/esm/style/line.shadow.css

@@ -3,7 +3,7 @@
 SLine {
   fill: transparent;
   stroke-width: 3;
-  stroke: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  stroke: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4));
   transition-property: d;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -23,7 +23,7 @@ SLine[transparent] {
 
 SNull {
   fill: transparent;
-  stroke: var(--intergalactic-border-primary, #c4c7cf);
+  stroke: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   stroke-dasharray: 4;
 }
 
@@ -36,7 +36,7 @@ SLineArea {
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
   opacity: 0.3;
-  fill: var(--intergalactic-chart-palette-order-1, #2bb3ff);
+  fill: var(--intergalactic-chart-palette-order-1, oklch(0.58 0.153 278.4));
 }
 SLineArea[color] {
   fill: var(--color);

package/lib/esm/style/plot.shadow.css

@@ -1,10 +1,12 @@
-@import './var.css';
-
 SPlot {
   overflow: hidden;
 }
-SPlot:active,
+
 SPlot:focus {
+  outline: none;
+}
+
+SPlot:active {
   outline: 0;
   text-decoration: none;
 }
@@ -13,7 +15,7 @@ foreignObject[data-aria-only] {
   pointer-events: none;
 }
 
-SPlot[keyboardFocused] {
-  border: 1px solid var(--intergalactic-chart-palette-order-9, #008ff8);
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+SPlot:has(foreignObject[data-aria-only]:focus-within) {
+  @mixin focus-outline-mixin;
+  border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
 }

package/lib/esm/style/plotA11yModule.shadow.css

@@ -1,12 +1,11 @@
-@import './var.css';
-
 SPlotA11yModule {
-  user-select: none;
-  pointer-events: none;
-  opacity: 0;
-}
-SPlotA11yModule:focus {
-  user-select: all;
-  pointer-events: all;
-  opacity: 1;
-}
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0,
+}

package/lib/esm/style/plotA11yView.shadow.css

@@ -1,39 +1,26 @@
-@import './var.css';
-
 SPlotA11yView {
-  user-select: none;
-  pointer-events: none;
-  opacity: 0;
-  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
-  color: var(--intergalactic-text-primary, #191b23);
-  border: 3px solid var(--intergalactic-border-primary, #c4c7cf);
+  position: relative;
+  display: block;
+  background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+  border: 3px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   font-size: var(--intergalactic-fs-50, 10px);
-  /* disable-tokens-validator */
+  z-index: var(--intergalactic-z-index-overlay, 500);
   padding: 2px;
   width: 200px;
   height: 200px;
   max-width: 80%;
   max-height: 80%;
   overflow: auto;
-}
-SPlotA11yView:focus-within,
-SPlotA11yView:focus {
-  user-select: all;
-  pointer-events: all;
-  opacity: 1;
-  z-index: var(--intergalactic-z-index-overlay, 500);
-  position: relative;
-  display: block;
-}
-SPlotA11yView a {
-  cursor: pointer;
-  text-decoration: underline;
-  margin-bottom: var(--intergalactic-spacing-2x, 8px);
-  display: block;
-}
 
-SPlotA11yView table,
-SPlotA11yView td,
-SPlotA11yView th {
-  border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
+  a {
+    cursor: pointer;
+    text-decoration: underline;
+    margin-bottom: var(--intergalactic-spacing-2x, 8px);
+    display: block;
+  }
+
+  table, td, th {
+    border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  }
 }