@synergy-design-system/components 3.15.6 → 3.16.0

package/dist/chunks/{chunk.FAK2KFOB.js → chunk.KON7CYGM.js}

@@ -1,9 +1,9 @@
 import {
   SynDropdown
-} from "./chunk.KVYYFM4V.js";
+} from "./chunk.HDNK7LUR.js";
 import {
   SynMenu
-} from "./chunk.USRVA3FU.js";
+} from "./chunk.4CDOQ4MN.js";
 import {
   prio_nav_styles_default
 } from "./chunk.74N5WLM5.js";
@@ -15,22 +15,22 @@ import {
 } from "./chunk.OJ3N7TWP.js";
 import {
   SynNavItem
-} from "./chunk.VBPZVGXH.js";
+} from "./chunk.MXPXDIJT.js";
 import {
   SynIcon
-} from "./chunk.SFBN63ZC.js";
+} from "./chunk.K334YNKM.js";
 import {
   LocalizeController
-} from "./chunk.VCRQ2GII.js";
+} from "./chunk.ZXMSJF2M.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.7YCUXELV.js";
+} from "./chunk.SVQL2UJA.js";
 import {
   __decorateClass
-} from "./chunk.MO2GTRUM.js";
+} from "./chunk.VK2FVWOF.js";
 
 // src/components/prio-nav/prio-nav.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.FAK2KFOB.js.map
+//# sourceMappingURL=chunk.KON7CYGM.js.map

package/dist/chunks/{chunk.4I2RJVH5.js → chunk.L3E7LAEB.js}

@@ -2,12 +2,12 @@ import {
   addGlobalEventNotification,
   extractDefaultSettingsForElement,
   removeGlobalEventNotification
-} from "./chunk.Z4QAGMQF.js";
+} from "./chunk.WCUWW5GN.js";
 import {
   __privateAdd,
   __privateGet,
   __privateSet
-} from "./chunk.MO2GTRUM.js";
+} from "./chunk.VK2FVWOF.js";
 
 // src/utilities/defaultSettings/decorator.ts
 function enableDefaultSettings(name) {
@@ -83,4 +83,4 @@ function enableDefaultSettings(name) {
 export {
   enableDefaultSettings
 };
-//# sourceMappingURL=chunk.4I2RJVH5.js.map
+//# sourceMappingURL=chunk.L3E7LAEB.js.map

package/dist/chunks/{chunk.4LPRLZEC.js → chunk.LFO32QIM.js}

@@ -1,22 +1,33 @@
-import {
-  PALETTE_TOKENS
-} from "./chunk.VJIXW4Z5.js";
 import {
   chart_styles_default
 } from "./chunk.KPO6RJLG.js";
+import {
+  synergyLightTheme
+} from "./chunk.MLDHXUGM.js";
+import {
+  PALETTE_TOKENS
+} from "./chunk.JOYNXTII.js";
+import {
+  resolveConfigInput
+} from "./chunk.UOCJ2U5N.js";
+import {
+  applyAxisDefaultsPreprocessor
+} from "./chunk.KMZLWOXI.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.7YCUXELV.js";
+} from "./chunk.SVQL2UJA.js";
 import {
   __decorateClass
-} from "./chunk.MO2GTRUM.js";
+} from "./chunk.VK2FVWOF.js";
 
 // src/components/chart/chart.component.ts
 import {
   init,
+  registerPreprocessor,
+  registerTheme,
   use
 } from "echarts/core.js";
 import { CanvasRenderer } from "echarts/renderers.js";
@@ -30,7 +41,6 @@ import {
   TitleComponent,
   TooltipComponent
 } from "echarts/components.js";
-import { classMap } from "lit/directives/class-map.js";
 use([
   CanvasRenderer,
   LineChart,
@@ -42,39 +52,50 @@ use([
 var SynChart = class extends SynergyElement {
   constructor() {
     super(...arguments);
+    this.resolvedConfig = {};
     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;
+    if (Array.isArray(this.resolvedConfig.color) && this.resolvedConfig.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 });
+      const oldOption = this.chartInstance.getOption();
+      if (!oldOption) return;
+      oldOption.color = colors;
+      this.chartInstance.setOption(oldOption, { notMerge: true });
     }
   }
   updated(changedProperties) {
     if (changedProperties.has("config") && this.chartInstance) {
-      this.chartInstance.setOption(this.config, { notMerge: true });
+      this.resolvedConfig = resolveConfigInput(this.config);
+      this.chartInstance.setOption(this.resolvedConfig, { notMerge: true });
     }
     if ((changedProperties.has("palette") || changedProperties.has("config")) && this.chartInstance) {
       this.applyPalette();
     }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    registerTheme("default", synergyLightTheme);
+    registerPreprocessor(applyAxisDefaultsPreprocessor);
+  }
   // Initialize echarts instance and resize observer
   firstUpdated(_changedProperties) {
     if (this.chartContainer !== null && this.chartContainer !== void 0) {
-      this.chartInstance = init(this.chartContainer);
+      this.chartInstance = init(this.chartContainer, "default");
       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.resolvedConfig = resolveConfigInput(this.config);
+      if (Object.keys(this.resolvedConfig).length > 0) {
+        this.chartInstance.setOption(this.resolvedConfig);
       }
       this.applyPalette();
     }
@@ -115,9 +136,7 @@ var SynChart = class extends SynergyElement {
     return html`
       <div
         part="base"
-        class=${classMap({
-      chart: true
-    })}>
+        class="chart">
       </div>
     `;
   }
@@ -139,4 +158,4 @@ __decorateClass([
 export {
   SynChart
 };
-//# sourceMappingURL=chunk.4LPRLZEC.js.map
+//# sourceMappingURL=chunk.LFO32QIM.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/chart/chart.component.ts"],
+  "sourcesContent": ["import {\n  type EChartsType, init, registerPreprocessor, registerTheme, 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 SynergyElement from '../../internal/synergy-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './chart.styles.js';\nimport { type ChartPalette, PALETTE_TOKENS } from './chart.palettes.js';\nimport { resolveConfigInput } from './configs/config.js';\nimport type { ChartConfigType, ECConfig } from './types.js';\nimport { synergyLightTheme } from './themes/light.js';\nimport { applyAxisDefaultsPreprocessor } from './configs/axes/utilities.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 3.15.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  private resolvedConfig: ECConfig = {};\n\n  /**\n   * The ECharts configuration input.\n   *\n   * This property accepts either:\n   * - a plain `ECConfig` object, or\n   * - a callback that receives a typed preset handle and applies chart presets.\n   *\n   * The resolved result maps 1:1 to the ECharts `option` parameter passed to\n   * `setOption()`.\n   * Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html)\n   * and assign either the object directly or build it through the handle.\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 config input completely replaces the previous chart\n   * 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   * // Using a plain object\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   * // Using the handle with method chaining\n   * chart.config = (handle) => handle\n   *   .baseConfig({\n   *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },\n   *     yAxis: { type: 'value' },\n   *     series: [{ type: 'line', data: [150, 230, 224] }],\n   *   })\n   *   .axesShowSplitLines();\n   *\n   * // Using the handle with sequential calls\n   * chart.config = (handle) => {\n   *   handle.baseConfig({\n   *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },\n   *     yAxis: { type: 'value' },\n   *     series: [{ type: 'line', data: [150, 230, 224] }],\n   *   });\n   *   handle.axesShowSplitLines();\n   * };\n   * ```\n   */\n  @property({ attribute: false })\n  config: ChartConfigType = {};\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: ChartPalette = '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.resolvedConfig.color) && this.resolvedConfig.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      const oldOption = this.chartInstance.getOption();\n      if (!oldOption) return;\n\n      oldOption.color = colors;\n      // We can not only replace 'color' via { replaceMerge: ['color'] }. Echarts does not allow to do this.\n      // Therefore we need to completely replace it, with the old option but new color.\n      this.chartInstance.setOption(oldOption, { notMerge: true });\n    }\n  }\n\n  protected updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('config') && this.chartInstance) {\n      this.resolvedConfig = resolveConfigInput(this.config);\n      this.chartInstance.setOption(this.resolvedConfig, { notMerge: true });\n    }\n    if ((changedProperties.has('palette') || changedProperties.has('config')) && this.chartInstance) {\n      this.applyPalette();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    registerTheme('default', synergyLightTheme);\n    /**\n     * Depending if x-axis or y-axis, the axis name has different positions and alignments. This preprocessor ensures that the correct styles are applied to the axis names based on the axis type.\n     * This is needed because ECharts does not provide a way to set specific styles for x and y axis, only for axis types.\n     */\n    registerPreprocessor(applyAxisDefaultsPreprocessor);\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, 'default');\n\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      this.resolvedConfig = resolveConfigInput(this.config);\n      if (Object.keys(this.resolvedConfig).length > 0) {\n        this.chartInstance.setOption(this.resolvedConfig);\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=\"chart\">\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.57ZNNVJD.js → chunk.MA7MIHCR.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.45YNTYOZ.js";
+} from "./chunk.3P4IZJYL.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.57ZNNVJD.js.map
+//# sourceMappingURL=chunk.MA7MIHCR.js.map

package/dist/chunks/{chunk.PLL33BFP.js → chunk.MK3BZ2ZC.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.GYOIJQKN.js";
+} from "./chunk.2ONW5MCK.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.PLL33BFP.js.map
+//# sourceMappingURL=chunk.MK3BZ2ZC.js.map

package/dist/chunks/{chunk.DJIAGYRX.js → chunk.MK3YZ7NC.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.N3B52ZU7.js";
+} from "./chunk.HMQ7L5C5.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.DJIAGYRX.js.map
+//# sourceMappingURL=chunk.MK3YZ7NC.js.map

package/dist/chunks/{chunk.DHUFRPXN.js → chunk.MK7AZ6Z5.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.L7EEUWC6.js";
+} from "./chunk.HDA5Z55X.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.DHUFRPXN.js.map
+//# sourceMappingURL=chunk.MK7AZ6Z5.js.map

package/dist/chunks/chunk.MLDHXUGM.js

@@ -0,0 +1,40 @@
+import {
+  PALETTE_TOKENS
+} from "./chunk.JOYNXTII.js";
+import {
+  axisCommonStyles
+} from "./chunk.KMZLWOXI.js";
+import {
+  getRealStyleValue
+} from "./chunk.DKVCRWJF.js";
+
+// src/components/chart/themes/light.ts
+var categoricalColors = PALETTE_TOKENS.categorical.map(getRealStyleValue).filter(Boolean);
+var synergyLightTheme = {
+  categoryAxis: axisCommonStyles(),
+  // Default color palette for charts, is categorical by default but can be overridden by setting the palette property on the chart component or by directly setting config.color
+  color: categoricalColors,
+  darkMode: "auto",
+  grid: {
+    bottom: 0,
+    left: 0,
+    // This is needed otherwise the last splitLine of the xAxis is cut off
+    right: 1,
+    top: 0
+  },
+  logAxis: axisCommonStyles(),
+  // Global font style
+  textStyle: {
+    color: getRealStyleValue("--syn-typography-color-text"),
+    fontFamily: getRealStyleValue("--syn-font-sans"),
+    fontSize: getRealStyleValue("--syn-font-size-small"),
+    fontWeight: getRealStyleValue("--syn-font-weight-normal")
+  },
+  timeAxis: axisCommonStyles(),
+  valueAxis: axisCommonStyles()
+};
+
+export {
+  synergyLightTheme
+};
+//# sourceMappingURL=chunk.MLDHXUGM.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/chart/themes/light.ts"],
+  "sourcesContent": ["import { PALETTE_TOKENS } from '../chart.palettes.js';\nimport { getRealStyleValue } from './utilities.js';\nimport { axisCommonStyles } from '../configs/axes/utilities.js';\n\n// TODO: Do we want to work with getComputedStyle, or just add a light / dark theme with explicit hex colors?\n// To be able to use SSR we probably need to go with explicit colors in the theme\nconst categoricalColors = PALETTE_TOKENS.categorical.map(getRealStyleValue).filter(Boolean);\n\n// Synergy ECharts Theme\nexport const synergyLightTheme = {\n  categoryAxis: axisCommonStyles(),\n  // Default color palette for charts, is categorical by default but can be overridden by setting the palette property on the chart component or by directly setting config.color\n  color: categoricalColors,\n  darkMode: 'auto',\n  grid: {\n    bottom: 0,\n    left: 0,\n    // This is needed otherwise the last splitLine of the xAxis is cut off\n    right: 1,\n    top: 0,\n  },\n  logAxis: axisCommonStyles(),\n  // Global font style\n  textStyle: {\n    color: getRealStyleValue('--syn-typography-color-text'),\n    fontFamily: getRealStyleValue('--syn-font-sans'),\n    fontSize: getRealStyleValue('--syn-font-size-small'),\n    fontWeight: getRealStyleValue('--syn-font-weight-normal'),\n  },\n  timeAxis: axisCommonStyles(),\n  valueAxis: axisCommonStyles(),\n};\n"],
+  "mappings": ";;;;;;;;;;;AAMA,IAAM,oBAAoB,eAAe,YAAY,IAAI,iBAAiB,EAAE,OAAO,OAAO;AAGnF,IAAM,oBAAoB;AAAA,EAC/B,cAAc,iBAAiB;AAAA;AAAA,EAE/B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,MAAM;AAAA;AAAA,IAEN,OAAO;AAAA,IACP,KAAK;AAAA,EACP;AAAA,EACA,SAAS,iBAAiB;AAAA;AAAA,EAE1B,WAAW;AAAA,IACT,OAAO,kBAAkB,6BAA6B;AAAA,IACtD,YAAY,kBAAkB,iBAAiB;AAAA,IAC/C,UAAU,kBAAkB,uBAAuB;AAAA,IACnD,YAAY,kBAAkB,0BAA0B;AAAA,EAC1D;AAAA,EACA,UAAU,iBAAiB;AAAA,EAC3B,WAAW,iBAAiB;AAC9B;",
+  "names": []
+}

package/dist/chunks/{chunk.VBPZVGXH.js → chunk.MXPXDIJT.js}

@@ -3,25 +3,25 @@ import {
 } from "./chunk.K5MZVORR.js";
 import {
   SynDivider
-} from "./chunk.QYOAPG3L.js";
+} from "./chunk.YNMK7DD4.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.SFBN63ZC.js";
+} from "./chunk.K334YNKM.js";
 import {
   watch
-} from "./chunk.SMIMHADA.js";
+} from "./chunk.UR2E7Y2Q.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.7YCUXELV.js";
+} from "./chunk.SVQL2UJA.js";
 import {
   __decorateClass
-} from "./chunk.MO2GTRUM.js";
+} from "./chunk.VK2FVWOF.js";
 
 // src/components/nav-item/nav-item.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -353,4 +353,4 @@ __decorateClass([
 export {
   SynNavItem
 };
-//# sourceMappingURL=chunk.VBPZVGXH.js.map
+//# sourceMappingURL=chunk.MXPXDIJT.js.map

package/dist/chunks/{chunk.ALNYXBZ2.js → chunk.NACIG55D.js}

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

package/dist/chunks/{chunk.WYNCUNIG.js → chunk.NBORQHHD.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk.FVIRHFY6.js";
 import {
   SynOption
-} from "./chunk.L7EEUWC6.js";
+} from "./chunk.HDA5Z55X.js";
 import {
   compareValues,
   isAllowedValue
@@ -29,48 +29,48 @@ import {
 } from "./chunk.34WYIU4C.js";
 import {
   FormControlController
-} from "./chunk.J3GDDM6Q.js";
+} from "./chunk.YDQ424MR.js";
 import {
   SynTag
-} from "./chunk.GUW23JPZ.js";
+} from "./chunk.T7E5AB4C.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.SFBN63ZC.js";
+} from "./chunk.K334YNKM.js";
 import {
   enableDefaultSettings
-} from "./chunk.4I2RJVH5.js";
+} from "./chunk.L3E7LAEB.js";
 import {
   SynPopup
-} from "./chunk.MWEJ7CGR.js";
+} from "./chunk.SLVCX4PN.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
 import {
   animateTo,
   stopAnimations
-} from "./chunk.Q6HZ4JXR.js";
+} from "./chunk.DLSBQOBA.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.RJUVM6NO.js";
+} from "./chunk.NIRQP534.js";
 import {
   LocalizeController
-} from "./chunk.VCRQ2GII.js";
+} from "./chunk.ZXMSJF2M.js";
 import {
   watch
-} from "./chunk.SMIMHADA.js";
+} from "./chunk.UR2E7Y2Q.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.7YCUXELV.js";
+} from "./chunk.SVQL2UJA.js";
 import {
   __decorateClass
-} from "./chunk.MO2GTRUM.js";
+} from "./chunk.VK2FVWOF.js";
 
 // src/components/combobox/combobox.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -1378,4 +1378,4 @@ setDefaultAnimation("combobox.hide", {
 export {
   SynCombobox
 };
-//# sourceMappingURL=chunk.WYNCUNIG.js.map
+//# sourceMappingURL=chunk.NBORQHHD.js.map

package/dist/chunks/{chunk.RJUVM6NO.js → chunk.NIRQP534.js}

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk.MO2GTRUM.js";
+} from "./chunk.VK2FVWOF.js";
 
 // src/utilities/animation-registry.ts
 var defaultAnimationRegistry = /* @__PURE__ */ new Map();
@@ -44,4 +44,4 @@ export {
   setAnimation,
   getAnimation
 };
-//# sourceMappingURL=chunk.RJUVM6NO.js.map
+//# sourceMappingURL=chunk.NIRQP534.js.map

package/dist/chunks/{chunk.IHAFPHVS.js → chunk.NRRUWC64.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.6HU2H2VB.js";
+} from "./chunk.6ODGJIWI.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.IHAFPHVS.js.map
+//# sourceMappingURL=chunk.NRRUWC64.js.map

package/dist/chunks/{chunk.JNI24XE2.js → chunk.NWGLMPSS.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.QEY3KSN5.js";
+} from "./chunk.DM334SKR.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.JNI24XE2.js.map
+//# sourceMappingURL=chunk.NWGLMPSS.js.map

package/dist/chunks/{chunk.X2LZUY3L.js → chunk.ODKVLAFT.js}

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

package/dist/chunks/{chunk.46TEDXXN.js → chunk.OF5CZGGD.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.KVYYFM4V.js";
+} from "./chunk.HDNK7LUR.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.46TEDXXN.js.map
+//# sourceMappingURL=chunk.OF5CZGGD.js.map

package/dist/chunks/{chunk.CV7FE336.js → chunk.OIT5PKC2.js}

@@ -1,6 +1,6 @@
 import {
   SynDialog
-} from "./chunk.PIC3MEDG.js";
+} from "./chunk.32QJNY2J.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = SynDialog;
@@ -9,4 +9,4 @@ SynDialog.define("syn-dialog");
 export {
   dialog_default
 };
-//# sourceMappingURL=chunk.CV7FE336.js.map
+//# sourceMappingURL=chunk.OIT5PKC2.js.map

package/dist/chunks/{chunk.SAPWH62I.js → chunk.P4OGLD6H.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.MWEJ7CGR.js";
+} from "./chunk.SLVCX4PN.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.SAPWH62I.js.map
+//# sourceMappingURL=chunk.P4OGLD6H.js.map

package/dist/chunks/{chunk.PWUNMARH.js → chunk.P4YIFZXB.js}

@@ -1,6 +1,6 @@
 import {
   __spreadValues
-} from "./chunk.MO2GTRUM.js";
+} from "./chunk.VK2FVWOF.js";
 
 // src/utilities/localize/core.ts
 var connectedElements = /* @__PURE__ */ new Set();
@@ -136,4 +136,4 @@ export {
   registerTranslation,
   LocalizeController
 };
-//# sourceMappingURL=chunk.PWUNMARH.js.map
+//# sourceMappingURL=chunk.P4YIFZXB.js.map

package/dist/chunks/{chunk.AE5NBH2R.js → chunk.PCNYLPIU.js}

@@ -6,36 +6,36 @@ import {
 } from "./chunk.WUGCLTH6.js";
 import {
   SynSpinner
-} from "./chunk.OGRJ4HV7.js";
+} from "./chunk.HMISYLGP.js";
 import {
   HasSlotController,
   getTextContent
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.SFBN63ZC.js";
+} from "./chunk.K334YNKM.js";
 import {
   SynPopup
-} from "./chunk.MWEJ7CGR.js";
+} from "./chunk.SLVCX4PN.js";
 import {
   LocalizeController
-} from "./chunk.VCRQ2GII.js";
+} from "./chunk.ZXMSJF2M.js";
 import {
   watch
-} from "./chunk.SMIMHADA.js";
+} from "./chunk.UR2E7Y2Q.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.7YCUXELV.js";
+} from "./chunk.SVQL2UJA.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateGet,
   __privateSet,
   __spreadValues
-} from "./chunk.MO2GTRUM.js";
+} from "./chunk.VK2FVWOF.js";
 
 // src/components/menu-item/menu-item.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -232,4 +232,4 @@ SynMenuItem = __decorateClass([
 export {
   SynMenuItem
 };
-//# sourceMappingURL=chunk.AE5NBH2R.js.map
+//# sourceMappingURL=chunk.PCNYLPIU.js.map

package/dist/chunks/{chunk.EFGAZQFG.js → chunk.PWLWRKZ3.js}

@@ -6,19 +6,19 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   enableDefaultSettings
-} from "./chunk.4I2RJVH5.js";
+} from "./chunk.L3E7LAEB.js";
 import {
   watch
-} from "./chunk.SMIMHADA.js";
+} from "./chunk.UR2E7Y2Q.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.7YCUXELV.js";
+} from "./chunk.SVQL2UJA.js";
 import {
   __decorateClass
-} from "./chunk.MO2GTRUM.js";
+} from "./chunk.VK2FVWOF.js";
 
 // src/components/radio-button/radio-button.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.EFGAZQFG.js.map
+//# sourceMappingURL=chunk.PWLWRKZ3.js.map