@synergy-design-system/components 3.14.0 → 3.15.1

package/README.md

@@ -209,7 +209,89 @@ document.addEventListener("load", () => {
 
 ---
 
-### 6. Add html autocompletion to VSCode (optional)
+### 6. Using the `syn-chart` component (optional)
+
+For more detailed information about the `syn-chart` component see the [Charting Overview page](https://synergy-design-system.github.io/?path=/docs/charting-overview--docs)
+
+The `<syn-chart>` component allows you to display charts powered by [Apache ECharts](https://echarts.apache.org). Because not every project needs charting functionality, `echarts` is an **optional peer dependency** that must be installed separately.
+
+> **Note:** `syn-chart` is currently **experimental**. Only **line charts** (`series[].type: 'line'`) are supported. Support for additional chart types will be added in future releases.
+
+#### Step 1: Install the `echarts` dependency
+
+```bash
+npm install --save echarts
+```
+
+> **Note:** Only **Apache ECharts version 6** (`echarts@^6.1.0`) is officially supported. Other versions may work but are not tested or guaranteed to be compatible.
+
+#### Step 2: Load the component tokens (required)
+
+The chart component requires two sets of design tokens to render correctly:
+
+1. **The standard Synergy component tokens** – loaded as part of the regular theme setup (light or dark). If you have already done this as part of step 3 above, you can skip this.
+2. **The chart-specific tokens** – must be loaded **in addition** to the standard tokens.
+
+```typescript
+// main.ts
+
+// 1. Load the standard Synergy theme tokens (light or dark)
+import "@synergy-design-system/tokens/themes/light.css";
+
+// 2. Load the chart-specific tokens matching your theme (light or dark)
+import "@synergy-design-system/tokens/charts/themes/light.css";
+```
+
+#### Step 3: Import the chart component explicitly
+
+`syn-chart` is **not** included in the default Synergy bundle (i.e. it is not exported by the main `synergy.js` entry point). You must import it explicitly:
+
+```typescript
+// main.ts
+
+// Import the chart component explicitly (not part of the default bundle)
+import "@synergy-design-system/components/components/chart/chart.js";
+```
+
+#### Step 4: Use the component in your HTML
+
+```html
+<syn-chart id="my-chart"></syn-chart>
+
+<script type="module">
+  const chart = document.getElementById("my-chart");
+
+  chart.config = {
+    xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri"] },
+    yAxis: { type: "value" },
+    series: [{ type: "line", data: [820, 932, 901, 934, 1290] }],
+  };
+</script>
+```
+
+#### Complete setup example (using a build tool like Vite)
+
+```typescript
+// main.ts
+
+// 1. Load the standard Synergy theme (required for all components)
+import "@synergy-design-system/tokens/themes/light.css";
+
+// 2. Load the chart-specific tokens (required for syn-chart)
+import "@synergy-design-system/tokens/charts/themes/light.css";
+
+// 3. Load the Synergy CSS utility functions
+import "@synergy-design-system/components/index.css";
+
+// 4. Import the chart component explicitly
+import "@synergy-design-system/components/components/chart/chart.js";
+```
+
+For the full API documentation, available properties, and live examples, visit the [syn-chart component documentation](https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs).
+
+---
+
+### 7. Add html autocompletion to VSCode (optional)
 
 This package ships with a [custom-elements-manifest](https://github.com/webcomponents/custom-elements-manifest) that may be used to provide typings for tags. To enable code completion, please proceed the following way:
 
@@ -224,7 +306,7 @@ This package ships with a [custom-elements-manifest](https://github.com/webcompo
 
 ---
 
-### 7. Breaking changes between major versions
+### 8. Breaking changes between major versions
 
 Please have a look at the official [breaking changes list](https://synergy-design-system.github.io/?path=/docs/packages-components-breaking-changes--docs) for information how to update to new major versions of Synergy.
 

package/dist/chunks/{chunk.PKI5G2BK.js → chunk.2ICMQHK2.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.XBW7Z2RY.js";
+} from "./chunk.SUL6IWF7.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.PKI5G2BK.js.map
+//# sourceMappingURL=chunk.2ICMQHK2.js.map

package/dist/chunks/{chunk.VUIJVW2Q.js → chunk.2QJN274R.js}

@@ -1,15 +1,15 @@
-import {
-  formatNumber
-} from "./chunk.KVS7GBFQ.js";
 import {
   input_custom_styles_default
 } from "./chunk.6P2XCD2Q.js";
 import {
   input_styles_default
 } from "./chunk.PHFTXPIT.js";
+import {
+  formatNumber
+} from "./chunk.KVS7GBFQ.js";
 import {
   SynDivider
-} from "./chunk.FJLIZ7EH.js";
+} from "./chunk.OJDJ5NGZ.js";
 import {
   defaultValue
 } from "./chunk.3JDUKQRN.js";
@@ -24,13 +24,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.I4Z5TIK5.js";
-import {
-  LocalizeController
-} from "./chunk.VCRQ2GII.js";
-import {
-  watch
-} from "./chunk.SMIMHADA.js";
+} from "./chunk.7WBNGACU.js";
 import {
   enableDefaultSettings
 } from "./chunk.4MG3QDNW.js";
@@ -39,12 +33,18 @@ import {
   modernNumericStrategy,
   nativeNumericStrategy
 } from "./chunk.QDG5AJZX.js";
+import {
+  LocalizeController
+} from "./chunk.VCRQ2GII.js";
+import {
+  watch
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -865,4 +865,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.VUIJVW2Q.js.map
+//# sourceMappingURL=chunk.2QJN274R.js.map

package/dist/chunks/{chunk.CRFIJO63.js → chunk.3ET6VFFM.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.TTCMP7MI.js";
+} from "./chunk.X72G6ASQ.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.CRFIJO63.js.map
+//# sourceMappingURL=chunk.3ET6VFFM.js.map

package/dist/chunks/{chunk.SDAD3TIZ.js → chunk.3SWPHSWX.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.SDAD3TIZ.js.map
+//# sourceMappingURL=chunk.3SWPHSWX.js.map

package/dist/chunks/{chunk.KI5VDJAL.js → chunk.4E5YHPM6.js}

@@ -1,18 +1,18 @@
+import {
+  SynResizeObserver
+} from "./chunk.P5U27SXU.js";
+import {
+  scrollIntoView
+} from "./chunk.2DT3C6WE.js";
 import {
   tab_group_custom_styles_default
 } from "./chunk.FHTQSNCX.js";
 import {
   tab_group_styles_default
 } from "./chunk.Q5EKPQBR.js";
-import {
-  SynResizeObserver
-} from "./chunk.PKPJXZNO.js";
-import {
-  scrollIntoView
-} from "./chunk.2DT3C6WE.js";
 import {
   SynIconButton
-} from "./chunk.T4L342TL.js";
+} from "./chunk.RKAIJDOM.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass,
   __spreadValues
@@ -516,4 +516,4 @@ __decorateClass([
 export {
   SynTabGroup
 };
-//# sourceMappingURL=chunk.KI5VDJAL.js.map
+//# sourceMappingURL=chunk.4E5YHPM6.js.map

package/dist/chunks/{chunk.KEWOYD7U.js → chunk.4NOC74ME.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.SDAD3TIZ.js";
+} from "./chunk.3SWPHSWX.js";
 
 // src/components/spinner/spinner.ts
 var spinner_default = SynSpinner;
@@ -9,4 +9,4 @@ SynSpinner.define("syn-spinner");
 export {
   spinner_default
 };
-//# sourceMappingURL=chunk.KEWOYD7U.js.map
+//# sourceMappingURL=chunk.4NOC74ME.js.map

package/dist/chunks/{chunk.LHT3EV6M.js → chunk.4OIWU6V3.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.GMCTWMH3.js";
+} from "./chunk.IYXZ2SMF.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.LHT3EV6M.js.map
+//# sourceMappingURL=chunk.4OIWU6V3.js.map

package/dist/chunks/{chunk.5KYKNKXK.js → chunk.4UNKGNWY.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.I4Z5TIK5.js";
+} from "./chunk.7WBNGACU.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.5KYKNKXK.js.map
+//# sourceMappingURL=chunk.4UNKGNWY.js.map

package/dist/chunks/{chunk.73JTC3OL.js → chunk.52CE6GAX.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.UYTYFCZO.js";
+} from "./chunk.5PNZHX46.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.73JTC3OL.js.map
+//# sourceMappingURL=chunk.52CE6GAX.js.map

package/dist/chunks/{chunk.UYTYFCZO.js → chunk.5PNZHX46.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -423,4 +423,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.UYTYFCZO.js.map
+//# sourceMappingURL=chunk.5PNZHX46.js.map

package/dist/chunks/{chunk.MLW6J2PI.js → chunk.5PUONAZP.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.4OSNBR72.js";
+} from "./chunk.7GVHLAPF.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.MLW6J2PI.js.map
+//# sourceMappingURL=chunk.5PUONAZP.js.map

package/dist/chunks/{chunk.IMFHPXZV.js → chunk.672U24GD.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.T4L342TL.js";
+} from "./chunk.RKAIJDOM.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.IMFHPXZV.js.map
+//# sourceMappingURL=chunk.672U24GD.js.map

package/dist/chunks/{chunk.Q462PIAC.js → chunk.7CPWT4JW.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.K7MD7OW2.js";
+} from "./chunk.T2BDECHP.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.Q462PIAC.js.map
+//# sourceMappingURL=chunk.7CPWT4JW.js.map

package/dist/chunks/{chunk.VICY5B3Y.js → chunk.7GUN5FTB.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.2DIJ66WQ.js";
+} from "./chunk.ULEMFOWH.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.VICY5B3Y.js.map
+//# sourceMappingURL=chunk.7GUN5FTB.js.map

package/dist/chunks/{chunk.4OSNBR72.js → chunk.7GVHLAPF.js}

@@ -1,16 +1,10 @@
 import {
   select_styles_default
 } from "./chunk.7DRFKCFD.js";
-import {
-  SynTag
-} from "./chunk.LUVQR5GV.js";
 import {
   compareValues,
   isAllowedValue
 } from "./chunk.VECCQZP5.js";
-import {
-  SynPopup
-} from "./chunk.UYTYFCZO.js";
 import {
   scrollIntoView
 } from "./chunk.2DT3C6WE.js";
@@ -20,6 +14,21 @@ import {
 import {
   FormControlController
 } from "./chunk.J3GDDM6Q.js";
+import {
+  SynTag
+} from "./chunk.TS65LJ5O.js";
+import {
+  HasSlotController
+} from "./chunk.CHFWLQN5.js";
+import {
+  SynIcon
+} from "./chunk.7WBNGACU.js";
+import {
+  enableDefaultSettings
+} from "./chunk.4MG3QDNW.js";
+import {
+  SynPopup
+} from "./chunk.5PNZHX46.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -31,27 +40,18 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.RJUVM6NO.js";
-import {
-  HasSlotController
-} from "./chunk.CHFWLQN5.js";
-import {
-  SynIcon
-} from "./chunk.I4Z5TIK5.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
-import {
-  enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -908,4 +908,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.4OSNBR72.js.map
+//# sourceMappingURL=chunk.7GVHLAPF.js.map

package/dist/chunks/{chunk.244QNZMJ.js → chunk.7NW3UNQH.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.X7M4AZCK.js";
+} from "./chunk.Z3WWZV5J.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.244QNZMJ.js.map
+//# sourceMappingURL=chunk.7NW3UNQH.js.map

package/dist/chunks/{chunk.66QNJSLF.js → chunk.7W55HRDH.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -48,4 +48,4 @@ __decorateClass([
 export {
   SynRangeTick
 };
-//# sourceMappingURL=chunk.66QNJSLF.js.map
+//# sourceMappingURL=chunk.7W55HRDH.js.map

package/dist/chunks/{chunk.I4Z5TIK5.js → chunk.7WBNGACU.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -191,4 +191,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.I4Z5TIK5.js.map
+//# sourceMappingURL=chunk.7WBNGACU.js.map

package/dist/chunks/{chunk.42C7SFEG.js → chunk.ASYOUIIA.js}

@@ -1,3 +1,6 @@
+import {
+  SynButtonGroup
+} from "./chunk.N5KGL3GC.js";
 import {
   radio_group_styles_default
 } from "./chunk.45MATNO2.js";
@@ -10,24 +13,21 @@ import {
   validValidityState,
   valueMissingValidityState
 } from "./chunk.J3GDDM6Q.js";
-import {
-  SynButtonGroup
-} from "./chunk.KC4SP6UE.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
-import {
-  watch
-} from "./chunk.SMIMHADA.js";
 import {
   enableDefaultSettings
 } from "./chunk.4MG3QDNW.js";
+import {
+  watch
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -377,4 +377,4 @@ SynRadioGroup = __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.42C7SFEG.js.map
+//# sourceMappingURL=chunk.ASYOUIIA.js.map

package/dist/chunks/{chunk.YUWPQV2J.js → chunk.ATXXETUW.js}

@@ -1,9 +1,6 @@
-import {
-  tooltip_styles_default
-} from "./chunk.EQUDFX74.js";
 import {
   SynPopup
-} from "./chunk.UYTYFCZO.js";
+} from "./chunk.5PNZHX46.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -27,7 +24,10 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
+import {
+  tooltip_styles_default
+} from "./chunk.EQUDFX74.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -272,4 +272,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.YUWPQV2J.js.map
+//# sourceMappingURL=chunk.ATXXETUW.js.map

package/dist/chunks/{chunk.KPAGL3JH.js → chunk.BK4L5JTZ.js}

@@ -1,6 +1,6 @@
 import {
   SynTagGroup
-} from "./chunk.AVHIO6QX.js";
+} from "./chunk.SDC2FVNL.js";
 
 // src/components/tag-group/tag-group.ts
 var tag_group_default = SynTagGroup;
@@ -9,4 +9,4 @@ SynTagGroup.define("syn-tag-group");
 export {
   tag_group_default
 };
-//# sourceMappingURL=chunk.KPAGL3JH.js.map
+//# sourceMappingURL=chunk.BK4L5JTZ.js.map

package/dist/chunks/{chunk.TV7RAXV6.js → chunk.BKK3LZIE.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.LUVQR5GV.js";
+} from "./chunk.TS65LJ5O.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.TV7RAXV6.js.map
+//# sourceMappingURL=chunk.BKK3LZIE.js.map

package/dist/chunks/{chunk.QEELQI3B.js → chunk.BW4PBG4C.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -64,4 +64,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.QEELQI3B.js.map
+//# sourceMappingURL=chunk.BW4PBG4C.js.map

package/dist/chunks/{chunk.NP7ZR5HF.js → chunk.C7M5UTLM.js}

@@ -1,6 +1,6 @@
 import {
   SynFile
-} from "./chunk.7GDKE5DX.js";
+} from "./chunk.UTG3I2RF.js";
 
 // src/components/file/file.ts
 var file_default = SynFile;
@@ -9,4 +9,4 @@ SynFile.define("syn-file");
 export {
   file_default
 };
-//# sourceMappingURL=chunk.NP7ZR5HF.js.map
+//# sourceMappingURL=chunk.C7M5UTLM.js.map

package/dist/chunks/{chunk.EXQNCNEL.js → chunk.CIR3MZ3J.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.EXQNCNEL.js.map
+//# sourceMappingURL=chunk.CIR3MZ3J.js.map