@synergy-design-system/components 3.14.0 → 3.15.1

package/dist/chunks/{chunk.O6IOGX2G.js → chunk.CWADFVTW.js}

@@ -1,9 +1,18 @@
+import {
+  alert_styles_default
+} from "./chunk.UA5B6CPN.js";
 import {
   blurActiveElement
 } from "./chunk.WXVOTRW5.js";
+import {
+  HasSlotController
+} from "./chunk.CHFWLQN5.js";
 import {
   SynIconButton
-} from "./chunk.T4L342TL.js";
+} from "./chunk.RKAIJDOM.js";
+import {
+  enableDefaultSettings
+} from "./chunk.4MG3QDNW.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -15,27 +24,18 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.RJUVM6NO.js";
-import {
-  HasSlotController
-} from "./chunk.CHFWLQN5.js";
-import {
-  alert_styles_default
-} from "./chunk.UA5B6CPN.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";
@@ -292,4 +292,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.O6IOGX2G.js.map
+//# sourceMappingURL=chunk.CWADFVTW.js.map

package/dist/chunks/{chunk.RXGMDDX4.js → chunk.DG7N2GPP.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.HA4TRDJB.js";
+} from "./chunk.ZJSLHMYK.js";
 
 // src/components/side-nav/side-nav.ts
 var side_nav_default = SynSideNav;
@@ -9,4 +9,4 @@ SynSideNav.define("syn-side-nav");
 export {
   side_nav_default
 };
-//# sourceMappingURL=chunk.RXGMDDX4.js.map
+//# sourceMappingURL=chunk.DG7N2GPP.js.map

package/dist/chunks/{chunk.KDW4KG7L.js → chunk.DZU5IHW5.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.PSAFHY7P.js";
+} from "./chunk.W5XDOOIR.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.KDW4KG7L.js.map
+//# sourceMappingURL=chunk.DZU5IHW5.js.map

package/dist/chunks/{chunk.NLFERVI7.js → chunk.EE2T4DI3.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.KYHWQEEI.js";
+} from "./chunk.NPCR7UVQ.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.NLFERVI7.js.map
+//# sourceMappingURL=chunk.EE2T4DI3.js.map

package/dist/chunks/{chunk.XH5QCNSL.js → chunk.EHQPWQIP.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.NLK6U5GU.js";
+} from "./chunk.R6HOFUDS.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.XH5QCNSL.js.map
+//# sourceMappingURL=chunk.EHQPWQIP.js.map

package/dist/chunks/{chunk.K47UDTAJ.js → chunk.ELOOAXBS.js}

@@ -1,3 +1,9 @@
+import {
+  SynAlert
+} from "./chunk.CWADFVTW.js";
+import {
+  enableDefaultSettings
+} from "./chunk.4MG3QDNW.js";
 import {
   alertSizeForInput,
   getActualInputElement,
@@ -6,28 +12,22 @@ import {
   isInvalidEvent,
   isSynergyElement,
   normalizeEventAttribute
-} from "./chunk.GBWQCBER.js";
+} from "./chunk.PVIVA2RW.js";
 import {
   validate_styles_default
 } from "./chunk.MVM3NN6Y.js";
 import {
   SynTooltip
-} from "./chunk.YUWPQV2J.js";
-import {
-  SynAlert
-} from "./chunk.O6IOGX2G.js";
+} from "./chunk.ATXXETUW.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";
@@ -439,4 +439,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.K47UDTAJ.js.map
+//# sourceMappingURL=chunk.ELOOAXBS.js.map

package/dist/chunks/{chunk.ITZAD4HQ.js → chunk.EOFEAQAT.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.O5XZM45U.js";
+} from "./chunk.MET45KSE.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.ITZAD4HQ.js.map
+//# sourceMappingURL=chunk.EOFEAQAT.js.map

package/dist/chunks/{chunk.G3CHXAEJ.js → chunk.HJVKBMLH.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";
@@ -68,4 +68,4 @@ __decorateClass([
 export {
   SynProgressBar
 };
-//# sourceMappingURL=chunk.G3CHXAEJ.js.map
+//# sourceMappingURL=chunk.HJVKBMLH.js.map

package/dist/chunks/{chunk.5HOJNW7M.js → chunk.HTYK7AJW.js}

@@ -1,9 +1,9 @@
-import {
-  Modal
-} from "./chunk.P4JFVVSO.js";
 import {
   dialog_styles_default
 } from "./chunk.VDBD6G4Q.js";
+import {
+  Modal
+} from "./chunk.P4JFVVSO.js";
 import {
   lockBodyScrolling,
   unlockBodyScrolling
@@ -11,9 +11,12 @@ import {
 import {
   blurActiveElement
 } from "./chunk.WXVOTRW5.js";
+import {
+  HasSlotController
+} from "./chunk.CHFWLQN5.js";
 import {
   SynIconButton
-} from "./chunk.T4L342TL.js";
+} from "./chunk.RKAIJDOM.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -25,9 +28,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.RJUVM6NO.js";
-import {
-  HasSlotController
-} from "./chunk.CHFWLQN5.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -39,7 +39,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -289,4 +289,4 @@ setDefaultAnimation("dialog.overlay.hide", {
 export {
   SynDialog
 };
-//# sourceMappingURL=chunk.5HOJNW7M.js.map
+//# sourceMappingURL=chunk.HTYK7AJW.js.map

package/dist/chunks/{chunk.XUI5ISF3.js → chunk.HWHC6OI3.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.QGVMPPJU.js";
+} from "./chunk.Z4LFYYMX.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.XUI5ISF3.js.map
+//# sourceMappingURL=chunk.HWHC6OI3.js.map

package/dist/chunks/{chunk.234CRR27.js → chunk.IT2TKYM7.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressRing
-} from "./chunk.EXQNCNEL.js";
+} from "./chunk.CIR3MZ3J.js";
 
 // src/components/progress-ring/progress-ring.ts
 var progress_ring_default = SynProgressRing;
@@ -9,4 +9,4 @@ SynProgressRing.define("syn-progress-ring");
 export {
   progress_ring_default
 };
-//# sourceMappingURL=chunk.234CRR27.js.map
+//# sourceMappingURL=chunk.IT2TKYM7.js.map

package/dist/chunks/{chunk.GMCTWMH3.js → chunk.IYXZ2SMF.js}

@@ -1,18 +1,18 @@
 import {
-  watch
-} from "./chunk.SMIMHADA.js";
+  accordion_styles_default
+} from "./chunk.WNUZ6LH4.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";
-import {
-  accordion_styles_default
-} from "./chunk.WNUZ6LH4.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -111,4 +111,4 @@ SynAccordion = __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.GMCTWMH3.js.map
+//# sourceMappingURL=chunk.IYXZ2SMF.js.map

package/dist/chunks/{chunk.7GSNTJ3J.js → chunk.JFERWFTG.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.JNKPQ22W.js";
+} from "./chunk.OGHUH4RS.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.7GSNTJ3J.js.map
+//# sourceMappingURL=chunk.JFERWFTG.js.map

package/dist/chunks/{chunk.RASMI2WO.js → chunk.JJCL4WAB.js}

@@ -1,12 +1,12 @@
-import {
-  SynIcon
-} from "./chunk.I4Z5TIK5.js";
 import {
   breadcrumb_custom_styles_default
 } from "./chunk.32CYREEV.js";
 import {
   breadcrumb_styles_default
 } from "./chunk.WRPQ3635.js";
+import {
+  SynIcon
+} from "./chunk.7WBNGACU.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.UISWB5WE.js";
+} from "./chunk.YBXR5HES.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.RASMI2WO.js.map
+//# sourceMappingURL=chunk.JJCL4WAB.js.map

package/dist/chunks/{chunk.VKBFEDS6.js → chunk.K2PFFMHF.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.FJLIZ7EH.js";
+} from "./chunk.OJDJ5NGZ.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.VKBFEDS6.js.map
+//# sourceMappingURL=chunk.K2PFFMHF.js.map

package/dist/chunks/{chunk.A4I33Y6H.js → chunk.K3CXMAMI.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";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.A4I33Y6H.js.map
+//# sourceMappingURL=chunk.K3CXMAMI.js.map

package/dist/chunks/{chunk.SSNYL7AZ.js → chunk.KCVQZ4BE.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.QATINK6D.js";
+} from "./chunk.ZPWGYTRR.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.SSNYL7AZ.js.map
+//# sourceMappingURL=chunk.KCVQZ4BE.js.map

package/dist/chunks/chunk.KPO6RJLG.js

@@ -0,0 +1,20 @@
+// src/components/chart/chart.styles.ts
+import { css } from "lit";
+var chart_styles_default = css`
+  :host {
+    aspect-ratio: 16 / 9;
+    display: block;
+    min-height: 180px;
+    width: 100%;
+  }
+
+  .chart {
+    height: 100%;
+    width: 100%;
+  }
+`;
+
+export {
+  chart_styles_default
+};
+//# sourceMappingURL=chunk.KPO6RJLG.js.map

package/dist/chunks/chunk.KPO6RJLG.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/chart/chart.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    aspect-ratio: 16 / 9;\n    display: block;\n    min-height: 180px;\n    width: 100%;\n  }\n\n  .chart {\n    height: 100%;\n    width: 100%;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.OVS5YCLG.js → chunk.KRMDIBND.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.KC4SP6UE.js";
+} from "./chunk.N5KGL3GC.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.OVS5YCLG.js.map
+//# sourceMappingURL=chunk.KRMDIBND.js.map

package/dist/chunks/{chunk.HXQ3Q22D.js → chunk.LRFQWF2J.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.VUIJVW2Q.js";
+} from "./chunk.2QJN274R.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.HXQ3Q22D.js.map
+//# sourceMappingURL=chunk.LRFQWF2J.js.map

package/dist/chunks/{chunk.NXIQ25W4.js → chunk.M3HEPL2F.js}

@@ -26,17 +26,9 @@ var menu_styles_default = css`
   ::slotted(syn-menu-label:first-of-type) {
     --display-divider: none;
   }
-
-  /*
-   * #368: Hide the checkmarks for menu items
-   * when no syn-menu-item[checkbox] or loading is present
-   */
-  .menu--no-checkmarks::slotted(syn-menu-item) {
-    --display-checkmark: none;
-  }
 `;
 
 export {
   menu_styles_default
 };
-//# sourceMappingURL=chunk.NXIQ25W4.js.map
+//# sourceMappingURL=chunk.M3HEPL2F.js.map

package/dist/chunks/{chunk.NXIQ25W4.js.map → chunk.M3HEPL2F.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/menu/menu.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    background: var(--syn-panel-background-color);\n    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);\n    border-radius: var(--syn-input-border-radius-medium);\n    display: block;\n    overflow: auto;\n    overscroll-behavior: none;\n    padding: var(--syn-spacing-x-small) 0;\n    position: relative;\n  }\n\n  ::slotted(syn-divider) {\n    /* #369: Slotted syn-dividers should use a lighter color so they do not crash with the border visually */\n    --color: var(--syn-panel-border-color);\n    --spacing: var(--syn-spacing-x-small);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  ::slotted(syn-menu-label:first-of-type) {\n    --display-divider: none;\n  }\n\n  /*\n   * #368: Hide the checkmarks for menu items\n   * when no syn-menu-item[checkbox] or loading is present\n   */\n  .menu--no-checkmarks::slotted(syn-menu-item) {\n    --display-checkmark: none;\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,sBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    background: var(--syn-panel-background-color);\n    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);\n    border-radius: var(--syn-input-border-radius-medium);\n    display: block;\n    overflow: auto;\n    overscroll-behavior: none;\n    padding: var(--syn-spacing-x-small) 0;\n    position: relative;\n  }\n\n  ::slotted(syn-divider) {\n    /* #369: Slotted syn-dividers should use a lighter color so they do not crash with the border visually */\n    --color: var(--syn-panel-border-color);\n    --spacing: var(--syn-spacing-x-small);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  ::slotted(syn-menu-label:first-of-type) {\n    --display-divider: none;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,sBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/chunks/chunk.M3K2Q7WJ.js

@@ -0,0 +1,142 @@
+import {
+  PALETTE_TOKENS
+} from "./chunk.VJIXW4Z5.js";
+import {
+  chart_styles_default
+} from "./chunk.KPO6RJLG.js";
+import {
+  component_styles_default
+} from "./chunk.2NT3B5WJ.js";
+import {
+  SynergyElement
+} from "./chunk.YBXR5HES.js";
+import {
+  __decorateClass
+} from "./chunk.MO2GTRUM.js";
+
+// src/components/chart/chart.component.ts
+import {
+  init,
+  use
+} from "echarts/core.js";
+import { CanvasRenderer } from "echarts/renderers.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { query } from "lit/decorators/query.js";
+import { LineChart } from "echarts/charts.js";
+import {
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent
+} from "echarts/components.js";
+import { classMap } from "lit/directives/class-map.js";
+use([
+  CanvasRenderer,
+  LineChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent
+]);
+var SynChart = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.config = {};
+    this.palette = "categorical";
+  }
+  /** Resolves palette CSS custom properties to computed color values and applies them to the chart. */
+  applyPalette() {
+    if (!this.chartInstance) return;
+    if (Array.isArray(this.config.color) && this.config.color.length > 0) return;
+    const tokens = PALETTE_TOKENS[this.palette];
+    const computedStyles = getComputedStyle(this);
+    const colors = tokens.map((token) => computedStyles.getPropertyValue(token).trim()).filter(Boolean);
+    if (colors.length > 0) {
+      this.chartInstance.setOption({ color: colors }, { notMerge: false });
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("config") && this.chartInstance) {
+      this.chartInstance.setOption(this.config, { notMerge: true });
+    }
+    if ((changedProperties.has("palette") || changedProperties.has("config")) && this.chartInstance) {
+      this.applyPalette();
+    }
+  }
+  // Initialize echarts instance and resize observer
+  firstUpdated(_changedProperties) {
+    if (this.chartContainer !== null && this.chartContainer !== void 0) {
+      this.chartInstance = init(this.chartContainer);
+      this.resizeObserver = new ResizeObserver(() => {
+        var _a;
+        (_a = this.chartInstance) == null ? void 0 : _a.resize();
+      });
+      this.resizeObserver.observe(this.chartContainer);
+      if (Object.keys(this.config).length > 0) {
+        this.chartInstance.setOption(this.config);
+      }
+      this.applyPalette();
+    }
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    super.disconnectedCallback();
+    (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+    (_b = this.chartInstance) == null ? void 0 : _b.dispose();
+  }
+  /**
+   * Returns the underlying ECharts instance, giving direct access to the full
+   * [ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).
+   *
+   * Use this when the `config` property alone is not sufficient — for example to
+   * imperatively call `setOption()` with custom merge flags, listen to ECharts events,
+   * trigger actions, or retrieve chart data.
+   *
+   * Returns `undefined` if called before the component has been connected to the DOM
+   * (i.e. before `firstUpdated` has run).
+   *
+   * @example
+   * ```js
+   * const instance = chart.getInstance();
+   *
+   * // Listen to ECharts events
+   * instance?.on('click', params => console.log(params));
+   *
+   * // Partial update without replacing the full option
+   * instance?.setOption({ series: [{ data: [1, 2, 3] }] }, { replaceMerge: 'series' });
+   * ```
+   */
+  getInstance() {
+    return this.chartInstance;
+  }
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      chart: true
+    })}>
+      </div>
+    `;
+  }
+};
+SynChart.styles = [
+  component_styles_default,
+  chart_styles_default
+];
+__decorateClass([
+  query(".chart")
+], SynChart.prototype, "chartContainer", 2);
+__decorateClass([
+  property({ attribute: false })
+], SynChart.prototype, "config", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynChart.prototype, "palette", 2);
+
+export {
+  SynChart
+};
+//# sourceMappingURL=chunk.M3K2Q7WJ.js.map

package/dist/chunks/chunk.M3K2Q7WJ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/chart/chart.component.ts"],
+  "sourcesContent": ["import {\n  type EChartsType, init, use,\n} from 'echarts/core.js';\nimport { CanvasRenderer } from 'echarts/renderers.js';\nimport { html } from 'lit';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { query } from 'lit/decorators/query.js';\nimport { LineChart } from 'echarts/charts.js';\nimport {\n  GridComponent, LegendComponent, TitleComponent, TooltipComponent,\n} from 'echarts/components.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './chart.styles.js';\nimport { PALETTE_TOKENS, type SynChartPalette } from './chart.palettes.js';\nimport type { ECConfig } from './types.js';\n\n// TODO: Check, should we let the user define the *use* so the bundle size is optimized for their specific use case?\nuse([\n  CanvasRenderer,\n  LineChart,\n  TitleComponent,\n  TooltipComponent,\n  LegendComponent,\n  GridComponent,\n]);\n\n/**\n * @summary The `<syn-chart>` component is a container for displaying charts. It provides a structured layout and styling for chart elements, allowing for consistent presentation across different types of charts. The chart component is based on [Apache ECharts](https://echarts.apache.org)\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs\n * @status experimental\n * @since 0.0.0\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynChart extends SynergyElement {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    styles,\n  ];\n\n  @query('.chart')\n  private chartContainer: HTMLDivElement;\n\n  private chartInstance: EChartsType;\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * The ECharts configuration option object.\n   *\n   * This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.\n   * Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html)\n   * and assign the object directly to this property.\n   *\n   * > **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.\n   * > Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.\n   *\n   * Assigning a new object completely replaces the previous chart configuration (`notMerge: true`).\n   * To update only parts of the chart, access the underlying ECharts instance directly and\n   * call `setOption()` with custom merge options.\n   *\n   * @example\n   * ```js\n   * chart.config = {\n   *   xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },\n   *   yAxis: { type: 'value' },\n   *   series: [{ type: 'line', data: [150, 230, 224] }],\n   * };\n   * ```\n   */\n  @property({ attribute: false })\n  config: ECConfig = {};\n\n  /**\n   * The color palette to apply to chart series.\n   *\n   * - `categorical` (default) \u2014 12 distinct colors for comparing unrelated data series\n   * - `sequential-01` \u2026 `sequential-07` \u2014 10-step single-hue ramps:\n   *   `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral\n   * - `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`,\n   *   `sequential-status-success`, `sequential-status-warning` \u2014 10-step status ramps\n   *\n   * The palette sets the ECharts `color` array. If `config.color` is explicitly provided,\n   * it takes precedence over the palette.\n   */\n  @property({ reflect: true })\n  palette: SynChartPalette = 'categorical';\n\n  /** Resolves palette CSS custom properties to computed color values and applies them to the chart. */\n  private applyPalette(): void {\n    if (!this.chartInstance) return;\n    // If the user explicitly set config.color, respect it \u2014 palette is a default only\n    if (Array.isArray(this.config.color) && this.config.color.length > 0) return;\n\n    const tokens = PALETTE_TOKENS[this.palette];\n    const computedStyles = getComputedStyle(this);\n    const colors = tokens\n      .map(token => computedStyles.getPropertyValue(token).trim())\n      .filter(Boolean);\n\n    if (colors.length > 0) {\n      this.chartInstance.setOption({ color: colors }, { notMerge: false });\n    }\n  }\n\n  protected updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('config') && this.chartInstance) {\n      this.chartInstance.setOption(this.config, { notMerge: true });\n    }\n    if ((changedProperties.has('palette') || changedProperties.has('config')) && this.chartInstance) {\n      this.applyPalette();\n    }\n  }\n\n  // Initialize echarts instance and resize observer\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    if (this.chartContainer !== null && this.chartContainer !== undefined) {\n      this.chartInstance = init(this.chartContainer);\n      // Resize observer\n      this.resizeObserver = new ResizeObserver(() => {\n        this.chartInstance?.resize();\n      });\n      this.resizeObserver.observe(this.chartContainer);\n\n      // Apply config if already set before first render\n      if (Object.keys(this.config).length > 0) {\n        this.chartInstance.setOption(this.config);\n      }\n      // Apply palette after config so colors blend in without replacing the full config\n      this.applyPalette();\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    this.chartInstance?.dispose();\n  }\n\n  /**\n   * Returns the underlying ECharts instance, giving direct access to the full\n   * [ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).\n   *\n   * Use this when the `config` property alone is not sufficient \u2014 for example to\n   * imperatively call `setOption()` with custom merge flags, listen to ECharts events,\n   * trigger actions, or retrieve chart data.\n   *\n   * Returns `undefined` if called before the component has been connected to the DOM\n   * (i.e. before `firstUpdated` has run).\n   *\n   * @example\n   * ```js\n   * const instance = chart.getInstance();\n   *\n   * // Listen to ECharts events\n   * instance?.on('click', params => console.log(params));\n   *\n   * // Partial update without replacing the full option\n   * instance?.setOption({ series: [{ data: [1, 2, 3] }] }, { replaceMerge: 'series' });\n   * ```\n   */\n  getInstance(): EChartsType | undefined {\n    return this.chartInstance;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          chart: true,\n        })}>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA,EACoB;AAAA,EAAM;AAAA,OACnB;AACP,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AAErB,SAAS,gBAAgB;AACzB,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EAAe;AAAA,EAAiB;AAAA,EAAgB;AAAA,OAC3C;AACP,SAAS,gBAAgB;AAQzB,IAAI;AAAA,EACF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAWD,IAAqB,WAArB,cAAsC,eAAe;AAAA,EAArD;AAAA;AAqCE,kBAAmB,CAAC;AAepB,mBAA2B;AAAA;AAAA;AAAA,EAGnB,eAAqB;AAC3B,QAAI,CAAC,KAAK,cAAe;AAEzB,QAAI,MAAM,QAAQ,KAAK,OAAO,KAAK,KAAK,KAAK,OAAO,MAAM,SAAS,EAAG;AAEtE,UAAM,SAAS,eAAe,KAAK,OAAO;AAC1C,UAAM,iBAAiB,iBAAiB,IAAI;AAC5C,UAAM,SAAS,OACZ,IAAI,WAAS,eAAe,iBAAiB,KAAK,EAAE,KAAK,CAAC,EAC1D,OAAO,OAAO;AAEjB,QAAI,OAAO,SAAS,GAAG;AACrB,WAAK,cAAc,UAAU,EAAE,OAAO,OAAO,GAAG,EAAE,UAAU,MAAM,CAAC;AAAA,IACrE;AAAA,EACF;AAAA,EAEU,QAAQ,mBAA+C;AAC/D,QAAI,kBAAkB,IAAI,QAAQ,KAAK,KAAK,eAAe;AACzD,WAAK,cAAc,UAAU,KAAK,QAAQ,EAAE,UAAU,KAAK,CAAC;AAAA,IAC9D;AACA,SAAK,kBAAkB,IAAI,SAAS,KAAK,kBAAkB,IAAI,QAAQ,MAAM,KAAK,eAAe;AAC/F,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA;AAAA,EAGU,aAAa,oBAA0C;AAC/D,QAAI,KAAK,mBAAmB,QAAQ,KAAK,mBAAmB,QAAW;AACrE,WAAK,gBAAgB,KAAK,KAAK,cAAc;AAE7C,WAAK,iBAAiB,IAAI,eAAe,MAAM;AA3HrD;AA4HQ,mBAAK,kBAAL,mBAAoB;AAAA,MACtB,CAAC;AACD,WAAK,eAAe,QAAQ,KAAK,cAAc;AAG/C,UAAI,OAAO,KAAK,KAAK,MAAM,EAAE,SAAS,GAAG;AACvC,aAAK,cAAc,UAAU,KAAK,MAAM;AAAA,MAC1C;AAEA,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,uBAA6B;AAzI/B;AA0II,UAAM,qBAAqB;AAC3B,eAAK,mBAAL,mBAAqB;AACrB,eAAK,kBAAL,mBAAoB;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBA,cAAuC;AACrC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAGA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,OAAO;AAAA,IACT,CAAC,CAAC;AAAA;AAAA;AAAA,EAGR;AACF;AA9IqB,SACZ,SAAyB;AAAA,EAC9B;AAAA,EACA;AACF;AAGQ;AAAA,EADP,MAAM,QAAQ;AAAA,GANI,SAOX;AA8BR;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GApCX,SAqCnB;AAeA;AAAA,EADC,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAnDR,SAoDnB;",
+  "names": []
+}

package/dist/chunks/{chunk.BLR7KKUM.js → chunk.M5MQJOPS.js}

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "./chunk.DXWCV5LF.js";
+} from "./chunk.T6JI76WU.js";
 
 // src/components/details/details.ts
 var details_default = SynDetails;
@@ -9,4 +9,4 @@ SynDetails.define("syn-details");
 export {
   details_default
 };
-//# sourceMappingURL=chunk.BLR7KKUM.js.map
+//# sourceMappingURL=chunk.M5MQJOPS.js.map