highcharts 11.4.8 → 11.4.9

package/SECURITY.md

@@ -0,0 +1,41 @@
+# Security
+
+Highsoft takes security seriously. If you believe you have found a security vulnerability in Highcharts, Highcharts Gantt, Highcharts Stock, Highcharts Maps, or Highcharts Dashboards, we encourage you to report it to us as described below. We will investigate all legitimate reports and do our best to quickly fix the problem. Before reporting, please read the Secure Usage section below.
+
+## Reporting Security Issues
+
+Issues should be reported to security@highsoft.com.
+
+You should receive a response within 48 hours on business days. If you have not gotten any response by that time, please follow up to ensure we’ve received your original message.
+
+Please include the information listed below (when applicable and possible) to help us identify and understand the scope of the issue:
+
+  * What kind of issue is it (e.g. XSS injection)?
+  * Which modules/source files are impacted?
+  * Step-by-step instructions on how to reproduce the issue
+  * Proof-of-concept or exploit code
+  * Issue impact
+
+## Secure Usage
+
+The Highcharts product family is a set of client-side visualization libraries. As such, much is left to the implementer and the specific implementation, similarly to when using other web-libraries or frameworks. Correct usage is a prerequisite for ensuring secure operations of our products.
+
+  * Best practice is to always [perform sanitation on data](https://www.highcharts.com/docs/chart-concepts/security) added to the configuration that originates from user input, either directly (e.g. a user can impact the chart title in real-time), or indirectly (e.g. the chart title is fetched from a database, and was originally entered by a user in a form). Sanitation should happen in multiple stages to avoid single points of failure.
+  * The chart configurations have optional event hooks and other functions that can be attached to the chart (such as for custom formatters) - these are not validated, as it would not be feasible to retain the functionality they offer while also making sure the code contained in custom functions were not malicious. As such, extra care should be taken in terms of sanitation and validation when utilizing function hooks in the configuration, especially if the functions do something with user supplied data in order to avoid potential XSS attack vectors.
+
+## Process
+
+We utilize GitHubs workflow for managing security vulnerabilities. This means that GitHub Security Advisories are used to privately discuss, fix, and publish information about security vulnerabilities in our various repositories.
+
+As part of our security workflow, we also employ Static Application Security Testing (SAST) codescanning. This helps us identify potential security vulnerabilities and weaknesses in our codebase. We regularly run SAST codescans to ensure the overall security of our products.
+
+If a security vulnerability is confirmed that could compromise the confidentiality, integrity, or availability of our libraries or any application that incorporates them we will email a security advisory to every customer contact listed in our licensing records within 24 hours of confirmation. If deemed useful, we will also publish the advisories on our official X (Twitter) and LinkedIn accounts
+
+## Bounties
+
+We do not have a bounty system for bugs or security issues for the time being.
+
+## Contact
+
+Our security main point-of-contact is security@highsoft.com. 
+

package/bower.json

@@ -1,7 +1,19 @@
 {
   "name": "highcharts",
-  "version": "11.4.8",
+  "version": "11.4.9",
   "main": "highcharts.js",
   "license": "https://www.highcharts.com/license",
-  "types": "highcharts.d.ts"
+  "types": "highcharts.d.ts",
+  "peerDependencies": {
+    "jspdf": "^4.1.0",
+    "svg2pdf.js": "^2.7.0"
+  },
+  "peerDependenciesMeta": {
+    "jspdf": {
+      "optional": true
+    },
+    "svg2pdf.js": {
+      "optional": true
+    }
+  }
 }

package/css/annotations/popup.css

@@ -1,15 +1,3 @@
-/* Colors, using same names and values as in highcharts.css */
-:root {
-    --highcharts-background-color: #ffffff;
-    --highcharts-neutral-color-100: #000000;
-    --highcharts-neutral-color-80: #333333;
-    --highcharts-neutral-color-60: #666666;
-    --highcharts-neutral-color-20: #cccccc;
-    --highcharts-neutral-color-10: #e6e6e6;
-    --highcharts-neutral-color-3: #f7f7f7;
-    --highcharts-highlight-color-80: #335cad;
-}
-
 .highcharts-popup.highcharts-annotation-toolbar {
     right: 10%;
     left: auto;
@@ -23,7 +11,7 @@
 .highcharts-annotation-toolbar button {
     margin-top: 0;
     cursor: pointer;
-    background-color: var(--highcharts-neutral-color-3);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
 }
 
 .highcharts-popup.highcharts-annotation-toolbar > p {
@@ -34,9 +22,20 @@
 }
 
 .highcharts-popup {
-    font-family: Helvetica, Arial, sans-serif;
-    background-color: var(--highcharts-background-color);
-    color: var(--highcharts-neutral-color-60);
+    font-family:
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        Helvetica,
+        Arial,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        sans-serif;
+    background-color: var(--highcharts-background-color, #ffffff);
+    border-radius: 4px;
+    color: var(--highcharts-neutral-color-60, #666666);
     display: none;
     font-size: 0.9em;
     max-height: 90%;
@@ -49,9 +48,9 @@
     max-width: 600px;
     position: absolute;
     z-index: 100;
-    -webkit-box-shadow: 0 0 8px 0 rgba(61, 61, 61, 0.3);
-    -moz-box-shadow: 0 0 8px 0 rgba(61, 61, 61, 0.3);
-    box-shadow: 0 0 8px 0 rgba(61, 61, 61, 0.3);
+    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
 }
 
 .highcharts-popup div,
@@ -69,11 +68,18 @@
     box-sizing: border-box;
 }
 
+.highcharts-popup input,
+.highcharts-popup select {
+    background: var(--highcharts-neutral-color-3, #f7f7f7);
+    color: var(--highcharts-neutral-color-100, #000000);
+}
+
 .highcharts-popup input {
-    border: 1px solid var(--highcharts-neutral-color-10);
+    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
     border-radius: 0.3rem;
     padding: 5px;
     width: 100%;
+    font-weight: 600;
 }
 
 .highcharts-popup-lhs-col,
@@ -99,7 +105,7 @@
 .highcharts-popup-lhs-col {
     clear: both;
     width: 30%;
-    border-right: 1px solid var(--highcharts-neutral-color-10);
+    border-right: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
 }
 
 .highcharts-popup-bottom-row {
@@ -107,7 +113,13 @@
     padding: 0 20px;
     padding-bottom: 12px;
     width: 100%;
-    border-top: 1px solid var(--highcharts-neutral-color-10);
+    border-top: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
+}
+
+.highcharts-popup .highcharts-popup-bottom-row > button {
+    margin-top: 10px;
+    padding: 5px 10px;
+    border-radius: 4px;
 }
 
 .highcharts-popup-rhs-col {
@@ -129,7 +141,7 @@
 .highcharts-bindings-wrapper ul.highcharts-indicator-list,
 .highcharts-indicator-list {
     float: left;
-    color: var(--highcharts-neutral-color-60);
+    color: var(--highcharts-neutral-color-60, #666666);
     height: calc(100% - 150px);
     width: 100%;
     overflow-x: hidden;
@@ -145,7 +157,8 @@ button.highcharts-indicator-list-item {
     overflow: hidden;
     word-break: break-all;
     box-sizing: border-box;
-    background-color: var(--highcharts-background-color);
+    color: var(--highcharts-neutral-color-100, #000000);
+    background-color: var(--highcharts-background-color, #ffffff);
     text-align: left;
 }
 
@@ -157,7 +170,8 @@ button.highcharts-indicator-list-item {
 
 .highcharts-popup > button.highcharts-tab-item {
     margin: 0;
-    background-color: var(--highcharts-neutral-color-3);
+    color: var(--highcharts-neutral-color-100, #000000);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
     cursor: pointer;
     display: block;
     float: left;
@@ -167,7 +181,7 @@ button.highcharts-indicator-list-item {
 }
 
 button.highcharts-tab-item.highcharts-tab-item-active {
-    background-color: var(--highcharts-neutral-color-10);
+    background-color: var(--highcharts-neutral-color-10, #e6e6e6);
 }
 
 .highcharts-tab-item-content {
@@ -176,7 +190,7 @@ button.highcharts-tab-item.highcharts-tab-item-active {
     height: 100%;
     overflow: hidden;
     width: 100%;
-    border-top: 1px solid var(--highcharts-neutral-color-10);
+    border-top: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
 }
 
 .highcharts-tab-item-show {
@@ -185,9 +199,7 @@ button.highcharts-tab-item.highcharts-tab-item-active {
 
 .highcharts-popup > .highcharts-popup-close {
     margin: 0;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    background-color: var(--highcharts-background-color);
+    background-color: var(--highcharts-background-color, #ffffff);
     width: 40px;
     height: 40px;
     cursor: pointer;
@@ -195,18 +207,60 @@ button.highcharts-tab-item.highcharts-tab-item-active {
     padding: 10px;
     top: 0%;
     right: 0%;
-    color: var(--highcharts-neutral-color-80);
+    color: var(--highcharts-neutral-color-80, #333333);
+}
+
+.highcharts-popup .highcharts-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+}
+
+.highcharts-dark .highcharts-popup {
+    color-scheme: dark;
+    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
+}
+
+.highcharts-dark .highcharts-popup .highcharts-icon {
+    filter: invert(1);
+}
+
+@media (prefers-color-scheme: dark) {
+    .highcharts-popup {
+        color-scheme: dark;
+        border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
+    }
+
+    .highcharts-popup .highcharts-icon {
+        filter: invert(1);
+    }
+
+    .highcharts-light .highcharts-popup {
+        color-scheme: light;
+        border: none;
+    }
+
+    .highcharts-light .highcharts-popup .highcharts-icon {
+        filter: none;
+    }
 }
 
 .highcharts-popup-close:hover,
 .highcharts-popup button:hover,
 .highcharts-popup button.highcharts-annotation-edit-button:hover,
 .highcharts-popup button.highcharts-annotation-remove-button:hover {
-    background-color: var(--highcharts-neutral-color-10);
+    background-color: var(--highcharts-neutral-color-10, #e6e6e6);
 }
 
 div.highcharts-popup-rhs-col > button {
     float: right;
+    padding: 5px 10px;
+    border-radius: 4px;
 }
 
 .highcharts-popup button {
@@ -215,11 +269,11 @@ div.highcharts-popup-rhs-col > button {
 }
 
 button.highcharts-tab-item.highcharts-tab-disabled {
-    color: var(--highcharts-neutral-color-20);
+    color: var(--highcharts-neutral-color-20, #cccccc);
 }
 
 button.highcharts-tab-item.highcharts-tab-disabled:hover {
-    background-color: var(--highcharts-neutral-color-3);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
 }
 
 /* annotation edit small popup */
@@ -231,14 +285,12 @@ button.highcharts-tab-item.highcharts-tab-disabled:hover {
 }
 
 .highcharts-popup button.highcharts-annotation-edit-button {
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
+    position: relative;
     text-indent: -9999px;
 }
 
 .highcharts-popup button.highcharts-annotation-remove-button {
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
+    position: relative;
     text-indent: -9999px;
 }
 
@@ -252,7 +304,7 @@ button.highcharts-tab-item.highcharts-tab-disabled:hover {
 }
 
 .highcharts-popup .highcharts-popup-main-title {
-    border-bottom: 1px solid var(--highcharts-neutral-color-10);
+    border-bottom: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
     margin: 0;
     padding: 8px 0 6px 20px;
 }
@@ -273,7 +325,7 @@ button.highcharts-tab-item.highcharts-tab-disabled:hover {
 .highcharts-input-search-indicators-label {
     text-align: center;
     font-weight: bold;
-    color: var(--highcharts-neutral-color-100);
+    color: var(--highcharts-neutral-color-100, #000000);
     margin-top: 0.5rem;
 }
 
@@ -281,20 +333,146 @@ input.highcharts-input-search-indicators {
     width: 80%;
     margin: 0 auto;
     float: none;
-    border-color: #949494;
+    border-color: var(--highcharts-neutral-color-40, #999999);
 }
 
 .highcharts-popup a.clear-filter-button {
     margin: 0 auto;
     display: none;
-    color: var(--highcharts-highlight-color-80);
-    background-color: var(--highcharts-background-color);
-    border: 1px solid var(--highcharts-highlight-color-80);
+    color: var(--highcharts-highlight-color-80, #335cad);
+    background-color: var(--highcharts-background-color, #ffffff);
+    border: 1px solid var(--highcharts-highlight-color-80, #335cad);
     margin-top: 10px;
 }
 
 .highcharts-popup a.clear-filter-button:hover {
-    color: var(--highcharts-background-color);
-    background-color: var(--highcharts-highlight-color-80);
+    color: var(--highcharts-background-color, #ffffff);
+    background-color: var(--highcharts-highlight-color-80, #335cad);
+    cursor: pointer;
+}
+
+.highcharts-popup-color-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 10px;
+    padding: 0 0 0 6px;
+    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
+    border-radius: 0.3rem;
+    background: var(--highcharts-neutral-color-3, #f7f7f7);
+}
+
+.highcharts-popup-color-wrapper .highcharts-popup-field-color,
+.highcharts-popup-color-wrapper .highcharts-popup-field-text,
+.highcharts-popup-color-wrapper .highcharts-popup-color-separator,
+.highcharts-popup-color-wrapper .highcharts-popup-opacity-percentage,
+.highcharts-popup-color-wrapper .highcharts-popup-opacity-percent-suffix {
+    margin-bottom: 0;
+}
+
+.highcharts-popup-color-wrapper .highcharts-popup-field-color {
+    flex: 0 0 24px;
+    height: 24px;
+    padding: 2px;
+    border: 1px solid var(--highcharts-neutral-color-20, #c9c9c9);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.highcharts-popup-color-wrapper .highcharts-popup-field-color::-webkit-color-swatch {
+    border: none;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+}
+
+.highcharts-popup-color-wrapper .highcharts-popup-field-color::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+.highcharts-popup-color-wrapper .highcharts-popup-field-color::-moz-color-swatch {
+    border: none;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+}
+
+.highcharts-popup-color-wrapper .highcharts-popup-field-text {
+    padding: 5px 8px;
+    border: none;
+}
+
+.highcharts-popup-color-wrapper .highcharts-popup-color-separator {
+    width: 1px;
+    height: 20px;
+    background: var(--highcharts-neutral-color-15, #d3d3d3);
+}
+
+.highcharts-popup-color-wrapper .highcharts-popup-opacity-percentage {
+    width: 48px;
+    border: none;
+    text-align: right;
+    appearance: none;
+    -moz-appearance: textfield;
+}
+
+.highcharts-popup-color-wrapper .highcharts-popup-opacity-percentage::-webkit-outer-spin-button,
+.highcharts-popup-color-wrapper .highcharts-popup-opacity-percentage::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.highcharts-popup-color-wrapper .highcharts-popup-opacity-percent-suffix {
+    padding: 0 10px 2px 0;
+    color: var(--highcharts-neutral-color-50, #666666);
+}
+
+.highcharts-popup .highcharts-popup-opacity-slider {
+    margin-bottom: 14px;
+    padding: 0;
+    background: transparent;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.highcharts-popup .highcharts-popup-opacity-slider::-webkit-slider-runnable-track {
+    height: 6px;
+    border-radius: 3px;
+    background:
+        linear-gradient(
+            to right,
+            transparent,
+            var(--highcharts-popup-opacity-track-color, var(--highcharts-neutral-color-15, #d3d3d3))
+        );
+}
+
+.highcharts-popup .highcharts-popup-opacity-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--highcharts-neutral-color-80, #333333);
+    cursor: pointer;
+    margin-top: -4px;
+}
+
+.highcharts-popup .highcharts-popup-opacity-slider::-moz-range-track {
+    height: 6px;
+    border-radius: 3px;
+    background:
+        linear-gradient(
+            to right,
+            transparent,
+            var(--highcharts-popup-opacity-track-color, var(--highcharts-neutral-color-15, #d3d3d3))
+        );
+}
+
+.highcharts-popup .highcharts-popup-opacity-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--highcharts-neutral-color-80, #333333);
     cursor: pointer;
+    border: none;
 }

package/css/highcharts-palette.css

@@ -0,0 +1,99 @@
+/* SPDX-License-Identifier: LicenseRef-Highcharts */
+
+/**
+ * @license Highcharts
+ *
+ * (c) 2009-2026 Highsoft AS
+ *
+ * A commercial license may be required depending on use.
+ * See www.highcharts.com/license
+ *
+ * This file contains CSS color variables for the default Highcharts palette. It
+ * is intended to be used as an import when setting `palette.injectCSS` to
+ * `false`.
+ *
+ * For more information, see:
+ * https://api.highcharts.com/highcharts/palette.injectCSS
+ */
+
+:root {
+    --highcharts-color-0: #2caffe;
+    --highcharts-color-1: #544fc5;
+    --highcharts-color-2: #00e272;
+    --highcharts-color-3: #fe6a35;
+    --highcharts-color-4: #6b8abc;
+    --highcharts-color-5: #d568fb;
+    --highcharts-color-6: #2ee0ca;
+    --highcharts-color-7: #fa4b42;
+    --highcharts-color-8: #feb56a;
+    --highcharts-color-9: #91e8e1;
+    --highcharts-background-color: #ffffff;
+    --highcharts-neutral-color: #000000;
+    --highcharts-neutral-color-3: rgb(247, 247, 247);
+    --highcharts-neutral-color-5: rgb(242, 242, 242);
+    --highcharts-neutral-color-10: rgb(230, 230, 230);
+    --highcharts-neutral-color-20: rgb(204, 204, 204);
+    --highcharts-neutral-color-40: rgb(153, 153, 153);
+    --highcharts-neutral-color-60: rgb(102, 102, 102);
+    --highcharts-neutral-color-80: rgb(51, 51, 51);
+    --highcharts-neutral-color-100: rgb(0, 0, 0);
+    --highcharts-highlight-color: #0022ff;
+    --highcharts-highlight-color-3: rgb(247, 248, 255);
+    --highcharts-highlight-color-5: rgb(242, 244, 255);
+    --highcharts-highlight-color-10: rgb(230, 233, 255);
+    --highcharts-highlight-color-20: rgb(204, 211, 255);
+    --highcharts-highlight-color-40: rgb(153, 167, 255);
+    --highcharts-highlight-color-60: rgb(102, 122, 255);
+    --highcharts-highlight-color-80: rgb(51, 78, 255);
+    --highcharts-highlight-color-100: rgb(0, 34, 255);
+    --highcharts-positive-color: #06b535;
+    --highcharts-negative-color: #f21313;
+}
+
+@supports (color: light-dark(#fff, #000)) {
+    :root {
+        --highcharts-color-0: #2caffe;
+        --highcharts-color-1: light-dark(#544fc5, #00e272);
+        --highcharts-color-2: light-dark(#00e272, #efdf00);
+        --highcharts-color-3: #fe6a35;
+        --highcharts-color-4: #6b8abc;
+        --highcharts-color-5: #d568fb;
+        --highcharts-color-6: #2ee0ca;
+        --highcharts-color-7: #fa4b42;
+        --highcharts-color-8: #feb56a;
+        --highcharts-color-9: #91e8e1;
+        --highcharts-background-color: light-dark(#ffffff, #141414);
+        --highcharts-neutral-color: light-dark(#000000, #ffffff);
+        --highcharts-neutral-color-3: light-dark(rgb(247, 247, 247), rgb(27, 27, 27));
+        --highcharts-neutral-color-5: light-dark(rgb(242, 242, 242), rgb(32, 32, 32));
+        --highcharts-neutral-color-10: light-dark(rgb(230, 230, 230), rgb(44, 44, 44));
+        --highcharts-neutral-color-20: light-dark(rgb(204, 204, 204), rgb(67, 67, 67));
+        --highcharts-neutral-color-40: light-dark(rgb(153, 153, 153), rgb(114, 114, 114));
+        --highcharts-neutral-color-60: light-dark(rgb(102, 102, 102), rgb(161, 161, 161));
+        --highcharts-neutral-color-80: light-dark(rgb(51, 51, 51), rgb(208, 208, 208));
+        --highcharts-neutral-color-100: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
+        --highcharts-highlight-color: light-dark(#0022ff, #2caffe);
+        --highcharts-highlight-color-3: light-dark(rgb(247, 248, 255), rgb(21, 25, 27));
+        --highcharts-highlight-color-5: light-dark(rgb(242, 244, 255), rgb(21, 28, 32));
+        --highcharts-highlight-color-10: light-dark(rgb(230, 233, 255), rgb(22, 36, 43));
+        --highcharts-highlight-color-20: light-dark(rgb(204, 211, 255), rgb(25, 51, 67));
+        --highcharts-highlight-color-40: light-dark(rgb(153, 167, 255), rgb(30, 82, 114));
+        --highcharts-highlight-color-60: light-dark(rgb(102, 122, 255), rgb(34, 113, 160));
+        --highcharts-highlight-color-80: light-dark(rgb(51, 78, 255), rgb(39, 144, 207));
+        --highcharts-highlight-color-100: light-dark(rgb(0, 34, 255), rgb(44, 175, 254));
+        --highcharts-positive-color: #06b535;
+        --highcharts-negative-color: #f21313;
+    }
+}
+
+.highcharts-container {
+    color-scheme: light dark;
+}
+
+.highcharts-light .highcharts-container {
+    color-scheme: light;
+}
+
+.highcharts-dark .highcharts-container {
+    color-scheme: dark;
+}