@vaadin/charts 25.0.0-alpha3 → 25.0.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -35,15 +35,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha3",
+    "@vaadin/component-base": "25.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha5",
     "highcharts": "9.2.2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha3",
-    "@vaadin/test-runner-commands": "25.0.0-alpha3",
+    "@vaadin/chai-plugins": "25.0.0-alpha5",
+    "@vaadin/test-runner-commands": "25.0.0-alpha5",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8367dd20a47f53ca5589ad349a8e286ec2673055"
+  "gitHead": "7dc87bb2a3cae81ed53259fa10b58f990d50c6fd"
 }

package/src/helpers.js

@@ -1,3 +1,14 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+
 export function inflateFunctions(config) {
   if (Array.isArray(config)) {
     config.forEach(inflateFunctions);

package/src/styles/vaadin-chart-core-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { CSSResult } from 'lit';
+
+export const chartStyles: CSSResult;

package/{theme/vaadin-chart-base-theme.js → src/styles/vaadin-chart-core-styles.js}

@@ -16,18 +16,26 @@
  *
  * License: www.highcharts.com/license
  */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 /* When updating this file do not override vaadin-charts custom properties section */
 
-const chartBaseTheme = css`
+export const chartStyles = css`
   :host {
-    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol';
     font-size: 12px;
     line-height: normal;
   }
 
+  :host([hidden]) {
+    display: none !important;
+  }
+
   .highcharts-container {
     position: relative;
     overflow: hidden;
@@ -125,7 +133,7 @@ const chartBaseTheme = css`
   }
 
   :where([styled-mode]) .highcharts-xaxis-grid .highcharts-grid-line {
-    stroke-width: var(--vaadin-charts-xaxis-line-width, 0px);
+    stroke-width: var(--vaadin-charts-xaxis-line-width, 0);
   }
 
   :where([styled-mode]) .highcharts-tick {
@@ -171,9 +179,6 @@ const chartBaseTheme = css`
     pointer-events: none;
     white-space: nowrap;
     transition: stroke 150ms;
-  }
-
-  :where([styled-mode]) .highcharts-tooltip {
     filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05)) !important;
   }
 
@@ -444,7 +449,7 @@ const chartBaseTheme = css`
   }
 
   :where([styled-mode]) .highcharts-treemap-series .highcharts-point-hover {
-    stroke-width: 0px;
+    stroke-width: 0;
     stroke: var(--vaadin-charts-background, #fff);
     fill-opacity: 0.75;
     transition:
@@ -508,7 +513,7 @@ const chartBaseTheme = css`
   }
 
   :where([styled-mode]) .highcharts-legend-item > .highcharts-point {
-    stroke-width: 0px;
+    stroke-width: 0;
   }
 
   :where([styled-mode]) .highcharts-legend-item:hover text {
@@ -753,7 +758,7 @@ const chartBaseTheme = css`
   :where([styled-mode]) .highcharts-button-hover {
     transition: fill 0ms;
     fill: var(--vaadin-charts-button-hover-background, hsla(214, 90%, 52%, 0.1));
-    stroke-width: 0px;
+    stroke-width: 0;
   }
 
   :where([styled-mode]) .highcharts-button-hover text {
@@ -903,7 +908,7 @@ const chartBaseTheme = css`
 
   :where([styled-mode]) .highcharts-coloraxis-marker {
     fill: var(--vaadin-charts-axis-label, hsla(214, 42%, 18%, 0.72));
-    stroke-width: 0px;
+    stroke-width: 0;
   }
 
   :where([styled-mode]) .highcharts-null-point {
@@ -1053,10 +1058,6 @@ const chartBaseTheme = css`
   /* https://github.com/highcharts/highcharts/issues/16282 */
   /* without this the resize callback always calls __reflow */
   ul[aria-hidden='false'] {
-    margin: 0px;
+    margin: 0;
   }
 `;
-
-registerStyles('vaadin-chart', chartBaseTheme, { moduleId: 'vaadin-chart-base-theme' });
-
-export { chartBaseTheme };

package/src/vaadin-chart.js

@@ -9,11 +9,13 @@
  * license.
  */
 import './vaadin-chart-series.js';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { chartStyles } from './styles/vaadin-chart-core-styles.js';
 import { ChartMixin } from './vaadin-chart-mixin.js';
 
 /**
@@ -180,7 +182,7 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class Chart extends ChartMixin(ThemableMixin(ElementMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-chart';
   }
@@ -190,17 +192,7 @@ class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElemen
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: block;
-        width: 100%;
-        overflow: hidden;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-    `;
+    return chartStyles;
   }
 
   /** @protected */

package/theme/lumo/vaadin-chart-styles.d.ts

@@ -1,4 +1,3 @@
-import '../vaadin-chart-base-theme.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 declare const chartColors: import("lit").CSSResult;

package/theme/lumo/vaadin-chart-styles.js

@@ -1,4 +1,3 @@
-import '../vaadin-chart-base-theme.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {