@synergy-design-system/metadata 3.8.0 → 3.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (239) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/data/core/component/component:syn-chart.json +181 -0
  3. package/data/core/setup/setup:angular-components-module.json +1 -1
  4. package/data/core/setup/setup:angular-forms-module.json +1 -1
  5. package/data/core/setup/setup:angular-package.json +2 -2
  6. package/data/core/setup/setup:angular-validators-module.json +1 -1
  7. package/data/core/setup/setup:components-package.json +2 -2
  8. package/data/core/setup/setup:react-package.json +2 -2
  9. package/data/core/setup/setup:tokens-package.json +10 -2
  10. package/data/core/setup/setup:vue-package.json +2 -2
  11. package/data/core/token/token:tokens-charts-js-index-d-ts.json +31 -0
  12. package/data/core/token/token:tokens-charts-js-index-js.json +31 -0
  13. package/data/core/token/token:tokens-charts-scss-tokens-scss.json +31 -0
  14. package/data/core/token/token:tokens-charts-themes-sick2025-dark-css.json +32 -0
  15. package/data/core/token/token:tokens-charts-themes-sick2025-light-css.json +32 -0
  16. package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json +1 -1
  17. package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json +1 -1
  18. package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json +1 -1
  19. package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json +1 -1
  20. package/data/core/token/token:tokens-js-index-d-ts.json +1 -1
  21. package/data/core/token/token:tokens-js-index-js.json +1 -1
  22. package/data/core/token/token:tokens-scss-tokens-scss.json +1 -1
  23. package/data/core/token/token:tokens-themes-sick2018-dark-css.json +1 -1
  24. package/data/core/token/token:tokens-themes-sick2018-light-css.json +1 -1
  25. package/data/core/token/token:tokens-themes-sick2025-dark-css.json +1 -1
  26. package/data/core/token/token:tokens-themes-sick2025-light-css.json +1 -1
  27. package/data/index.json +108 -1
  28. package/data/layers/examples/component/component:syn-chart.md +191 -0
  29. package/data/layers/full/component/component:syn-accordion/angular/accordion.component.ts +1 -1
  30. package/data/layers/full/component/component:syn-accordion/vue/SynVueAccordion.vue +1 -1
  31. package/data/layers/full/component/component:syn-alert/angular/alert.component.ts +1 -1
  32. package/data/layers/full/component/component:syn-alert/vue/SynVueAlert.vue +1 -1
  33. package/data/layers/full/component/component:syn-badge/angular/badge.component.ts +1 -1
  34. package/data/layers/full/component/component:syn-badge/vue/SynVueBadge.vue +1 -1
  35. package/data/layers/full/component/component:syn-breadcrumb/angular/breadcrumb.component.ts +1 -1
  36. package/data/layers/full/component/component:syn-breadcrumb/vue/SynVueBreadcrumb.vue +1 -1
  37. package/data/layers/full/component/component:syn-breadcrumb-item/angular/breadcrumb-item.component.ts +1 -1
  38. package/data/layers/full/component/component:syn-breadcrumb-item/vue/SynVueBreadcrumbItem.vue +1 -1
  39. package/data/layers/full/component/component:syn-button/angular/button.component.ts +1 -1
  40. package/data/layers/full/component/component:syn-button/vue/SynVueButton.vue +1 -1
  41. package/data/layers/full/component/component:syn-button-group/angular/button-group.component.ts +1 -1
  42. package/data/layers/full/component/component:syn-button-group/vue/SynVueButtonGroup.vue +1 -1
  43. package/data/layers/full/component/component:syn-card/angular/card.component.ts +1 -1
  44. package/data/layers/full/component/component:syn-card/vue/SynVueCard.vue +1 -1
  45. package/data/layers/full/component/component:syn-chart/angular/chart.component.ts +84 -0
  46. package/data/layers/full/component/component:syn-chart/components/chart.component.ts +181 -0
  47. package/data/layers/full/component/component:syn-chart/components/chart.palettes.ts +110 -0
  48. package/data/layers/full/component/component:syn-chart/components/chart.styles.ts +15 -0
  49. package/data/layers/full/component/component:syn-chart/components/chart.ts +14 -0
  50. package/data/layers/full/component/component:syn-chart/components/types.ts +5 -0
  51. package/data/layers/full/component/component:syn-chart/react/SynChartJSXElement.ts +1 -0
  52. package/data/layers/full/component/component:syn-chart/react/chart.ts +28 -0
  53. package/data/layers/full/component/component:syn-chart/vue/SynVueChart.vue +76 -0
  54. package/data/layers/full/component/component:syn-checkbox/angular/checkbox.component.ts +1 -1
  55. package/data/layers/full/component/component:syn-checkbox/vue/SynVueCheckbox.vue +1 -1
  56. package/data/layers/full/component/component:syn-combobox/angular/combobox.component.ts +1 -1
  57. package/data/layers/full/component/component:syn-combobox/vue/SynVueCombobox.vue +1 -1
  58. package/data/layers/full/component/component:syn-details/angular/details.component.ts +1 -1
  59. package/data/layers/full/component/component:syn-details/vue/SynVueDetails.vue +1 -1
  60. package/data/layers/full/component/component:syn-dialog/angular/dialog.component.ts +1 -1
  61. package/data/layers/full/component/component:syn-dialog/vue/SynVueDialog.vue +1 -1
  62. package/data/layers/full/component/component:syn-divider/angular/divider.component.ts +1 -1
  63. package/data/layers/full/component/component:syn-divider/vue/SynVueDivider.vue +1 -1
  64. package/data/layers/full/component/component:syn-drawer/angular/drawer.component.ts +1 -1
  65. package/data/layers/full/component/component:syn-drawer/vue/SynVueDrawer.vue +1 -1
  66. package/data/layers/full/component/component:syn-dropdown/angular/dropdown.component.ts +1 -1
  67. package/data/layers/full/component/component:syn-dropdown/vue/SynVueDropdown.vue +1 -1
  68. package/data/layers/full/component/component:syn-file/angular/file.component.ts +1 -1
  69. package/data/layers/full/component/component:syn-file/vue/SynVueFile.vue +1 -1
  70. package/data/layers/full/component/component:syn-header/angular/header.component.ts +1 -1
  71. package/data/layers/full/component/component:syn-header/vue/SynVueHeader.vue +1 -1
  72. package/data/layers/full/component/component:syn-icon/angular/icon.component.ts +1 -1
  73. package/data/layers/full/component/component:syn-icon/vue/SynVueIcon.vue +1 -1
  74. package/data/layers/full/component/component:syn-icon-button/angular/icon-button.component.ts +1 -1
  75. package/data/layers/full/component/component:syn-icon-button/vue/SynVueIconButton.vue +1 -1
  76. package/data/layers/full/component/component:syn-input/angular/input.component.ts +1 -1
  77. package/data/layers/full/component/component:syn-input/vue/SynVueInput.vue +1 -1
  78. package/data/layers/full/component/component:syn-menu/angular/menu.component.ts +1 -1
  79. package/data/layers/full/component/component:syn-menu/vue/SynVueMenu.vue +1 -1
  80. package/data/layers/full/component/component:syn-menu-item/angular/menu-item.component.ts +1 -1
  81. package/data/layers/full/component/component:syn-menu-item/vue/SynVueMenuItem.vue +1 -1
  82. package/data/layers/full/component/component:syn-menu-label/angular/menu-label.component.ts +1 -1
  83. package/data/layers/full/component/component:syn-menu-label/vue/SynVueMenuLabel.vue +1 -1
  84. package/data/layers/full/component/component:syn-nav-item/angular/nav-item.component.ts +1 -1
  85. package/data/layers/full/component/component:syn-nav-item/vue/SynVueNavItem.vue +1 -1
  86. package/data/layers/full/component/component:syn-optgroup/angular/optgroup.component.ts +1 -1
  87. package/data/layers/full/component/component:syn-optgroup/vue/SynVueOptgroup.vue +1 -1
  88. package/data/layers/full/component/component:syn-option/angular/option.component.ts +1 -1
  89. package/data/layers/full/component/component:syn-option/vue/SynVueOption.vue +1 -1
  90. package/data/layers/full/component/component:syn-pagination/angular/pagination.component.ts +1 -1
  91. package/data/layers/full/component/component:syn-pagination/vue/SynVuePagination.vue +1 -1
  92. package/data/layers/full/component/component:syn-popup/angular/popup.component.ts +1 -1
  93. package/data/layers/full/component/component:syn-popup/vue/SynVuePopup.vue +1 -1
  94. package/data/layers/full/component/component:syn-prio-nav/angular/prio-nav.component.ts +1 -1
  95. package/data/layers/full/component/component:syn-prio-nav/vue/SynVuePrioNav.vue +1 -1
  96. package/data/layers/full/component/component:syn-progress-bar/angular/progress-bar.component.ts +1 -1
  97. package/data/layers/full/component/component:syn-progress-bar/vue/SynVueProgressBar.vue +1 -1
  98. package/data/layers/full/component/component:syn-progress-ring/angular/progress-ring.component.ts +1 -1
  99. package/data/layers/full/component/component:syn-progress-ring/vue/SynVueProgressRing.vue +1 -1
  100. package/data/layers/full/component/component:syn-radio/angular/radio.component.ts +1 -1
  101. package/data/layers/full/component/component:syn-radio/vue/SynVueRadio.vue +1 -1
  102. package/data/layers/full/component/component:syn-radio-button/angular/radio-button.component.ts +1 -1
  103. package/data/layers/full/component/component:syn-radio-button/vue/SynVueRadioButton.vue +1 -1
  104. package/data/layers/full/component/component:syn-radio-group/angular/radio-group.component.ts +1 -1
  105. package/data/layers/full/component/component:syn-radio-group/vue/SynVueRadioGroup.vue +1 -1
  106. package/data/layers/full/component/component:syn-range/angular/range.component.ts +1 -1
  107. package/data/layers/full/component/component:syn-range/vue/SynVueRange.vue +1 -1
  108. package/data/layers/full/component/component:syn-range-tick/angular/range-tick.component.ts +1 -1
  109. package/data/layers/full/component/component:syn-range-tick/vue/SynVueRangeTick.vue +1 -1
  110. package/data/layers/full/component/component:syn-select/angular/select.component.ts +1 -1
  111. package/data/layers/full/component/component:syn-select/vue/SynVueSelect.vue +1 -1
  112. package/data/layers/full/component/component:syn-side-nav/angular/side-nav.component.ts +1 -1
  113. package/data/layers/full/component/component:syn-side-nav/vue/SynVueSideNav.vue +1 -1
  114. package/data/layers/full/component/component:syn-spinner/angular/spinner.component.ts +1 -1
  115. package/data/layers/full/component/component:syn-spinner/vue/SynVueSpinner.vue +1 -1
  116. package/data/layers/full/component/component:syn-switch/angular/switch.component.ts +1 -1
  117. package/data/layers/full/component/component:syn-switch/vue/SynVueSwitch.vue +1 -1
  118. package/data/layers/full/component/component:syn-tab/angular/tab.component.ts +1 -1
  119. package/data/layers/full/component/component:syn-tab/vue/SynVueTab.vue +1 -1
  120. package/data/layers/full/component/component:syn-tab-group/angular/tab-group.component.ts +1 -1
  121. package/data/layers/full/component/component:syn-tab-group/vue/SynVueTabGroup.vue +1 -1
  122. package/data/layers/full/component/component:syn-tab-panel/angular/tab-panel.component.ts +1 -1
  123. package/data/layers/full/component/component:syn-tab-panel/vue/SynVueTabPanel.vue +1 -1
  124. package/data/layers/full/component/component:syn-tag/angular/tag.component.ts +1 -1
  125. package/data/layers/full/component/component:syn-tag/vue/SynVueTag.vue +1 -1
  126. package/data/layers/full/component/component:syn-tag-group/angular/tag-group.component.ts +1 -1
  127. package/data/layers/full/component/component:syn-tag-group/vue/SynVueTagGroup.vue +1 -1
  128. package/data/layers/full/component/component:syn-textarea/angular/textarea.component.ts +1 -1
  129. package/data/layers/full/component/component:syn-textarea/vue/SynVueTextarea.vue +1 -1
  130. package/data/layers/full/component/component:syn-tooltip/angular/tooltip.component.ts +1 -1
  131. package/data/layers/full/component/component:syn-tooltip/vue/SynVueTooltip.vue +1 -1
  132. package/data/layers/full/component/component:syn-validate/angular/validate.component.ts +1 -1
  133. package/data/layers/full/component/component:syn-validate/vue/SynVueValidate.vue +1 -1
  134. package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md +19 -0
  135. package/data/layers/full/setup/setup:angular-package/angular/README.md +4 -0
  136. package/data/layers/full/setup/setup:angular-package/angular/package.json +1 -1
  137. package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md +18 -0
  138. package/data/layers/full/setup/setup:components-package/components/README.md +84 -2
  139. package/data/layers/full/setup/setup:components-package/components/package.json +8 -5
  140. package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md +19 -0
  141. package/data/layers/full/setup/setup:react-package/react/README.md +4 -0
  142. package/data/layers/full/setup/setup:react-package/react/package.json +1 -1
  143. package/data/layers/full/setup/setup:react-package/react/syn-jsx-elements.ts +19 -0
  144. package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md +16 -0
  145. package/data/layers/full/setup/setup:tokens-package/tokens/README.md +119 -19
  146. package/data/layers/full/setup/setup:tokens-package/tokens/package.json +11 -6
  147. package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md +19 -0
  148. package/data/layers/full/setup/setup:vue-package/vue/README.md +4 -0
  149. package/data/layers/full/setup/setup:vue-package/vue/package.json +9 -2
  150. package/data/layers/full/tokens/charts/js/index.d.ts +664 -0
  151. package/data/layers/full/tokens/charts/js/index.js +664 -0
  152. package/data/layers/full/tokens/charts/scss/_tokens.scss +136 -0
  153. package/data/layers/full/tokens/charts/themes/sick2025_dark.css +142 -0
  154. package/data/layers/full/tokens/charts/themes/sick2025_light.css +142 -0
  155. package/data/layers/full/tokens/figma-variables/sick2025-light.json +12 -12
  156. package/data/layers/full/tokens/js/index.d.ts +1 -1
  157. package/data/layers/full/tokens/js/index.js +1 -1
  158. package/data/layers/full/tokens/scss/_tokens.scss +1 -1
  159. package/data/layers/full/tokens/themes/sick2018_dark.css +1 -1
  160. package/data/layers/full/tokens/themes/sick2018_light.css +1 -1
  161. package/data/layers/full/tokens/themes/sick2025_dark.css +1 -1
  162. package/data/layers/full/tokens/themes/sick2025_light.css +12 -12
  163. package/data/layers/interface/component/component:syn-chart.json +51 -0
  164. package/data/layers/interface/component/component:syn-chart.md +61 -0
  165. package/data/layers/rules/component/component:syn-chart.md +39 -0
  166. package/data/manifest.json +3 -3
  167. package/package.json +5 -5
  168. package/dist/intentPolicy/capabilities/action.d.ts +0 -2
  169. package/dist/intentPolicy/capabilities/action.js +0 -26
  170. package/dist/intentPolicy/capabilities/assistance.d.ts +0 -2
  171. package/dist/intentPolicy/capabilities/assistance.js +0 -10
  172. package/dist/intentPolicy/capabilities/disclosure.d.ts +0 -2
  173. package/dist/intentPolicy/capabilities/disclosure.js +0 -14
  174. package/dist/intentPolicy/capabilities/feedback.d.ts +0 -2
  175. package/dist/intentPolicy/capabilities/feedback.js +0 -42
  176. package/dist/intentPolicy/capabilities/index.d.ts +0 -6
  177. package/dist/intentPolicy/capabilities/index.js +0 -22
  178. package/dist/intentPolicy/capabilities/input.d.ts +0 -2
  179. package/dist/intentPolicy/capabilities/input.js +0 -38
  180. package/dist/intentPolicy/capabilities/navigation.d.ts +0 -2
  181. package/dist/intentPolicy/capabilities/navigation.js +0 -54
  182. package/dist/intentPolicy/capabilities/status.d.ts +0 -2
  183. package/dist/intentPolicy/capabilities/status.js +0 -14
  184. package/dist/intentPolicy/capabilities/structure.d.ts +0 -2
  185. package/dist/intentPolicy/capabilities/structure.js +0 -22
  186. package/dist/intentPolicy/categories/action.d.ts +0 -2
  187. package/dist/intentPolicy/categories/action.js +0 -4
  188. package/dist/intentPolicy/categories/assistance.d.ts +0 -2
  189. package/dist/intentPolicy/categories/assistance.js +0 -4
  190. package/dist/intentPolicy/categories/disclosure.d.ts +0 -2
  191. package/dist/intentPolicy/categories/disclosure.js +0 -4
  192. package/dist/intentPolicy/categories/feedback.d.ts +0 -2
  193. package/dist/intentPolicy/categories/feedback.js +0 -4
  194. package/dist/intentPolicy/categories/index.d.ts +0 -5
  195. package/dist/intentPolicy/categories/index.js +0 -22
  196. package/dist/intentPolicy/categories/input.d.ts +0 -2
  197. package/dist/intentPolicy/categories/input.js +0 -4
  198. package/dist/intentPolicy/categories/navigation.d.ts +0 -2
  199. package/dist/intentPolicy/categories/navigation.js +0 -4
  200. package/dist/intentPolicy/categories/status.d.ts +0 -2
  201. package/dist/intentPolicy/categories/status.js +0 -4
  202. package/dist/intentPolicy/categories/structure.d.ts +0 -2
  203. package/dist/intentPolicy/categories/structure.js +0 -4
  204. package/dist/intentPolicy/intents/action.d.ts +0 -2
  205. package/dist/intentPolicy/intents/action.js +0 -38
  206. package/dist/intentPolicy/intents/assistance.d.ts +0 -2
  207. package/dist/intentPolicy/intents/assistance.js +0 -14
  208. package/dist/intentPolicy/intents/disclosure.d.ts +0 -2
  209. package/dist/intentPolicy/intents/disclosure.js +0 -20
  210. package/dist/intentPolicy/intents/feedback.d.ts +0 -2
  211. package/dist/intentPolicy/intents/feedback.js +0 -32
  212. package/dist/intentPolicy/intents/index.d.ts +0 -7
  213. package/dist/intentPolicy/intents/index.js +0 -23
  214. package/dist/intentPolicy/intents/input.d.ts +0 -2
  215. package/dist/intentPolicy/intents/input.js +0 -62
  216. package/dist/intentPolicy/intents/navigation.d.ts +0 -2
  217. package/dist/intentPolicy/intents/navigation.js +0 -44
  218. package/dist/intentPolicy/intents/status.d.ts +0 -2
  219. package/dist/intentPolicy/intents/status.js +0 -26
  220. package/dist/intentPolicy/intents/structure.d.ts +0 -2
  221. package/dist/intentPolicy/intents/structure.js +0 -32
  222. package/dist/intentPolicy/patterns/action.d.ts +0 -2
  223. package/dist/intentPolicy/patterns/action.js +0 -195
  224. package/dist/intentPolicy/patterns/assistance.d.ts +0 -2
  225. package/dist/intentPolicy/patterns/assistance.js +0 -13
  226. package/dist/intentPolicy/patterns/disclosure.d.ts +0 -2
  227. package/dist/intentPolicy/patterns/disclosure.js +0 -23
  228. package/dist/intentPolicy/patterns/feedback.d.ts +0 -2
  229. package/dist/intentPolicy/patterns/feedback.js +0 -44
  230. package/dist/intentPolicy/patterns/index.d.ts +0 -6
  231. package/dist/intentPolicy/patterns/index.js +0 -22
  232. package/dist/intentPolicy/patterns/input.d.ts +0 -2
  233. package/dist/intentPolicy/patterns/input.js +0 -99
  234. package/dist/intentPolicy/patterns/navigation.d.ts +0 -2
  235. package/dist/intentPolicy/patterns/navigation.js +0 -192
  236. package/dist/intentPolicy/patterns/status.d.ts +0 -2
  237. package/dist/intentPolicy/patterns/status.js +0 -32
  238. package/dist/intentPolicy/patterns/structure.d.ts +0 -2
  239. package/dist/intentPolicy/patterns/structure.js +0 -107
@@ -0,0 +1,51 @@
1
+ {
2
+ "attributes": [
3
+ {
4
+ "default": "'categorical'",
5
+ "description": "The color palette to apply to chart series.\n\n- `categorical` (default) — 12 distinct colors for comparing unrelated data series\n- `sequential-01` … `sequential-07` — 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` — 10-step status ramps\n\nThe palette sets the ECharts `color` array. If `config.color` is explicitly provided,\nit takes precedence over the palette.",
6
+ "fieldName": "palette",
7
+ "name": "palette",
8
+ "reflects": true,
9
+ "type": "SynChartPalette"
10
+ }
11
+ ],
12
+ "cssParts": [
13
+ {
14
+ "description": "The component's base wrapper.",
15
+ "name": "base"
16
+ }
17
+ ],
18
+ "dependencies": [],
19
+ "documentation": "https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs",
20
+ "events": [],
21
+ "figmaDocsId": "https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=0-1&p=f&t=PkQKC2p7WIr2k0og-0",
22
+ "methods": [
23
+ {
24
+ "description": "Returns the underlying ECharts instance, giving direct access to the full\n[ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).\n\nUse this when the `config` property alone is not sufficient — for example to\nimperatively call `setOption()` with custom merge flags, listen to ECharts events,\ntrigger actions, or retrieve chart data.\n\nReturns `undefined` if called before the component has been connected to the DOM\n(i.e. before `firstUpdated` has run).",
25
+ "name": "getInstance",
26
+ "parameters": []
27
+ }
28
+ ],
29
+ "properties": [
30
+ {
31
+ "access": "public",
32
+ "default": "{}",
33
+ "description": "The ECharts configuration option object.\n\nThis property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.\nConsult the [ECharts option documentation](https://echarts.apache.org/en/option.html)\nand 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\nAssigning a new object completely replaces the previous chart configuration (`notMerge: true`).\nTo update only parts of the chart, access the underlying ECharts instance directly and\ncall `setOption()` with custom merge options.",
34
+ "name": "config",
35
+ "type": "ECConfig"
36
+ },
37
+ {
38
+ "access": "public",
39
+ "default": "'categorical'",
40
+ "description": "The color palette to apply to chart series.\n\n- `categorical` (default) — 12 distinct colors for comparing unrelated data series\n- `sequential-01` … `sequential-07` — 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` — 10-step status ramps\n\nThe palette sets the ECharts `color` array. If `config.color` is explicitly provided,\nit takes precedence over the palette.",
41
+ "name": "palette",
42
+ "type": "SynChartPalette"
43
+ }
44
+ ],
45
+ "since": "0.0.0",
46
+ "slots": [],
47
+ "sourceModulePath": "components/chart/chart.js",
48
+ "status": "experimental",
49
+ "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)",
50
+ "tagName": "syn-chart"
51
+ }
@@ -0,0 +1,61 @@
1
+ # syn-chart
2
+
3
+ ## Summary
4
+
5
+ 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)
6
+
7
+ ## Documentation
8
+
9
+ - [Component Documentation](https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs)
10
+ - [Figma Examples](https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=0-1&p=f&t=PkQKC2p7WIr2k0og-0)
11
+
12
+ ## Class Information
13
+
14
+ - **Tag Name:** `syn-chart`
15
+ - **Import Example:** `import SynChart from '@synergy-design-system/components/components/chart/chart.js';`
16
+
17
+ ## Usage Information
18
+
19
+ - **Status:** experimental
20
+ - **Since:** 0.0.0
21
+
22
+ ## Available Properties
23
+
24
+ ### config
25
+
26
+ attribute: -
27
+ reflects: -
28
+ type: `ECConfig`
29
+ default: `{}`
30
+
31
+ The ECharts configuration option object. This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`. Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html) and assign the object directly to this property. > **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported. > Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested. Assigning a new object completely replaces the previous chart configuration (`notMerge: true`). To update only parts of the chart, access the underlying ECharts instance directly and call `setOption()` with custom merge options.
32
+
33
+ ### palette
34
+
35
+ attribute: `palette`
36
+ reflects: yes
37
+ type: `SynChartPalette`
38
+ default: `'categorical'`
39
+
40
+ The color palette to apply to chart series. - `categorical` (default) — 12 distinct colors for comparing unrelated data series - `sequential-01` … `sequential-07` — 10-step single-hue ramps: `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral - `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`, `sequential-status-success`, `sequential-status-warning` — 10-step status ramps The palette sets the ECharts `color` array. If `config.color` is explicitly provided, it takes precedence over the palette.
41
+
42
+ ## Available Methods
43
+
44
+ ### getInstance()
45
+
46
+ parameters: -
47
+ returns: `void`
48
+
49
+ Returns the underlying ECharts instance, giving direct access to the full
50
+ [ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).
51
+
52
+ Use this when the `config` property alone is not sufficient — for example to
53
+ imperatively call `setOption()` with custom merge flags, listen to ECharts events,
54
+ trigger actions, or retrieve chart data.
55
+
56
+ Returns `undefined` if called before the component has been connected to the DOM
57
+ (i.e. before `firstUpdated` has run).
58
+
59
+ ## Available CSS Parts
60
+
61
+ - `base`: The component's base wrapper.
@@ -0,0 +1,39 @@
1
+ # syn-chart
2
+
3
+ ## Summary
4
+
5
+ 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)
6
+
7
+ ## Common Use Cases
8
+
9
+ - Display time-based trends such as sensor values, throughput, or production metrics.
10
+ - Compare multiple data series in dashboards to identify differences and anomalies.
11
+ - Present historical data to support analysis, reporting, and decision-making.
12
+ - Visualize key performance indicators where users need a fast visual overview.
13
+
14
+ ## Usage Guidelines
15
+
16
+ ### Data and Purpose
17
+
18
+ - Use charts when visual pattern recognition (trends, peaks, outliers) is more helpful than raw tables.
19
+ - Keep the chart goal specific and clear (for example trend over time, comparison, distribution).
20
+ - Avoid using charts when exact value lookup is the primary task; provide a table or value list as a complement.
21
+
22
+ ### Visual Clarity
23
+
24
+ - Use clear axis labels, units, and legends so users can understand the data context immediately.
25
+ - Limit the number of simultaneously visible series to reduce visual noise.
26
+ - Choose palettes that maintain sufficient contrast between series and background.
27
+ - Avoid excessive decoration and effects that do not add analytical value.
28
+
29
+ ### Responsiveness and Density
30
+
31
+ - Ensure labels, tooltips, and legends remain readable at small viewport sizes.
32
+ - Prevent overlapping labels and crowded markers by simplifying or reducing displayed data where needed.
33
+ - Keep chart dimensions appropriate for the amount and complexity of the data shown.
34
+
35
+ ## Accessibility
36
+
37
+ - Do not rely on color alone to distinguish data series; use labels, markers, or patterns where helpful.
38
+ - Provide a text alternative or data table for users who cannot interpret visualizations reliably.
39
+ - Ensure chart context is available in surrounding text, including what is shown and why it matters.
@@ -1,5 +1,5 @@
1
1
  {
2
- "builtAt": "2026-05-21T10:37:34.454Z",
2
+ "builtAt": "2026-06-02T08:27:54.929Z",
3
3
  "sources": [
4
4
  {
5
5
  "entityCount": 4,
@@ -12,7 +12,7 @@
12
12
  "status": "success"
13
13
  },
14
14
  {
15
- "entityCount": 56,
15
+ "entityCount": 57,
16
16
  "source": "components",
17
17
  "status": "success"
18
18
  },
@@ -32,7 +32,7 @@
32
32
  "status": "success"
33
33
  },
34
34
  {
35
- "entityCount": 12,
35
+ "entityCount": 17,
36
36
  "source": "tokens",
37
37
  "status": "success"
38
38
  },
package/package.json CHANGED
@@ -22,12 +22,12 @@
22
22
  "serve-handler": "^6.1.7",
23
23
  "typescript": "^5.9.3",
24
24
  "zod": "^4.3.6",
25
- "@synergy-design-system/components": "3.14.0",
26
- "@synergy-design-system/eslint-config-syn": "^0.1.0",
27
25
  "@synergy-design-system/docs": "0.1.0",
28
- "@synergy-design-system/tokens": "^3.14.0",
26
+ "@synergy-design-system/components": "3.15.0",
27
+ "@synergy-design-system/eslint-config-syn": "^0.1.0",
28
+ "@synergy-design-system/fonts": "1.0.6",
29
29
  "@synergy-design-system/styles": "2.1.0",
30
- "@synergy-design-system/fonts": "1.0.6"
30
+ "@synergy-design-system/tokens": "^3.15.0"
31
31
  },
32
32
  "exports": {
33
33
  ".": {
@@ -70,7 +70,7 @@
70
70
  },
71
71
  "types": "./dist/index.d.ts",
72
72
  "type": "module",
73
- "version": "3.8.0",
73
+ "version": "3.10.0",
74
74
  "scripts": {
75
75
  "build:all": "METADATA_LOG_LEVEL=info pnpm run build:ts && RUN_STORYBOOK_SCRAPER=true pnpm run build:data",
76
76
  "build": "METADATA_LOG_LEVEL=info pnpm run build:ts && pnpm run build:data",
@@ -1,2 +0,0 @@
1
- import type { IntentCapability } from '../types.js';
2
- export declare const actionCapabilities: IntentCapability[];
@@ -1,26 +0,0 @@
1
- export const actionCapabilities = [
2
- {
3
- categories: ['action'],
4
- target: {
5
- id: 'component:syn-button',
6
- kind: 'component',
7
- name: 'syn-button',
8
- },
9
- },
10
- {
11
- categories: ['action'],
12
- target: {
13
- id: 'component:syn-icon-button',
14
- kind: 'component',
15
- name: 'syn-icon-button',
16
- },
17
- },
18
- {
19
- categories: ['action'],
20
- target: {
21
- id: 'component:syn-button-group',
22
- kind: 'component',
23
- name: 'syn-button-group',
24
- },
25
- },
26
- ];
@@ -1,2 +0,0 @@
1
- import type { IntentCapability } from '../types.js';
2
- export declare const assistanceCapabilities: IntentCapability[];
@@ -1,10 +0,0 @@
1
- export const assistanceCapabilities = [
2
- {
3
- categories: ['assistance'],
4
- target: { id: 'component:syn-tooltip', kind: 'component', name: 'syn-tooltip' },
5
- },
6
- {
7
- categories: ['assistance'],
8
- target: { id: 'component:syn-icon', kind: 'component', name: 'syn-icon' },
9
- },
10
- ];
@@ -1,2 +0,0 @@
1
- import type { IntentCapability } from '../types.js';
2
- export declare const disclosureCapabilities: IntentCapability[];
@@ -1,14 +0,0 @@
1
- export const disclosureCapabilities = [
2
- {
3
- categories: ['disclosure'],
4
- target: { id: 'component:syn-details', kind: 'component', name: 'syn-details' },
5
- },
6
- {
7
- categories: ['disclosure'],
8
- target: { id: 'component:syn-accordion', kind: 'component', name: 'syn-accordion' },
9
- },
10
- {
11
- categories: ['disclosure'],
12
- target: { id: 'component:syn-popup', kind: 'component', name: 'syn-popup' },
13
- },
14
- ];
@@ -1,2 +0,0 @@
1
- import type { IntentCapability } from '../types.js';
2
- export declare const feedbackCapabilities: IntentCapability[];
@@ -1,42 +0,0 @@
1
- export const feedbackCapabilities = [
2
- {
3
- categories: ['feedback'],
4
- target: {
5
- id: 'component:syn-alert',
6
- kind: 'component',
7
- name: 'syn-alert',
8
- },
9
- },
10
- {
11
- categories: ['feedback'],
12
- target: {
13
- id: 'component:syn-badge',
14
- kind: 'component',
15
- name: 'syn-badge',
16
- },
17
- },
18
- {
19
- categories: ['feedback'],
20
- target: {
21
- id: 'component:syn-tag',
22
- kind: 'component',
23
- name: 'syn-tag',
24
- },
25
- },
26
- {
27
- categories: ['feedback'],
28
- target: {
29
- id: 'component:syn-tag-group',
30
- kind: 'component',
31
- name: 'syn-tag-group',
32
- },
33
- },
34
- {
35
- categories: ['feedback'],
36
- target: {
37
- id: 'component:syn-validate',
38
- kind: 'component',
39
- name: 'syn-validate',
40
- },
41
- },
42
- ];
@@ -1,6 +0,0 @@
1
- import type { IntentCapability } from '../types.js';
2
- /**
3
- * A comprehensive list of intent capabilities, categorized by their respective intent categories.
4
- * Each capability outlines the specific functionalities and features that an intent can support within a user interface, providing designers and developers with a clear understanding of how to effectively implement and leverage these capabilities to enhance user interactions and overall experience.
5
- */
6
- export declare const targetCapabilities: IntentCapability[];
@@ -1,22 +0,0 @@
1
- import { actionCapabilities } from './action.js';
2
- import { assistanceCapabilities } from './assistance.js';
3
- import { disclosureCapabilities } from './disclosure.js';
4
- import { feedbackCapabilities } from './feedback.js';
5
- import { inputCapabilities } from './input.js';
6
- import { navigationCapabilities } from './navigation.js';
7
- import { statusCapabilities } from './status.js';
8
- import { structureCapabilities } from './structure.js';
9
- /**
10
- * A comprehensive list of intent capabilities, categorized by their respective intent categories.
11
- * Each capability outlines the specific functionalities and features that an intent can support within a user interface, providing designers and developers with a clear understanding of how to effectively implement and leverage these capabilities to enhance user interactions and overall experience.
12
- */
13
- export const targetCapabilities = [
14
- ...actionCapabilities,
15
- ...feedbackCapabilities,
16
- ...inputCapabilities,
17
- ...navigationCapabilities,
18
- ...disclosureCapabilities,
19
- ...statusCapabilities,
20
- ...assistanceCapabilities,
21
- ...structureCapabilities,
22
- ];
@@ -1,2 +0,0 @@
1
- import type { IntentCapability } from '../types.js';
2
- export declare const inputCapabilities: IntentCapability[];
@@ -1,38 +0,0 @@
1
- export const inputCapabilities = [
2
- {
3
- categories: ['input'],
4
- target: { id: 'component:syn-input', kind: 'component', name: 'syn-input' },
5
- },
6
- {
7
- categories: ['input'],
8
- target: { id: 'component:syn-textarea', kind: 'component', name: 'syn-textarea' },
9
- },
10
- {
11
- categories: ['input'],
12
- target: { id: 'component:syn-select', kind: 'component', name: 'syn-select' },
13
- },
14
- {
15
- categories: ['input'],
16
- target: { id: 'component:syn-combobox', kind: 'component', name: 'syn-combobox' },
17
- },
18
- {
19
- categories: ['input'],
20
- target: { id: 'component:syn-checkbox', kind: 'component', name: 'syn-checkbox' },
21
- },
22
- {
23
- categories: ['input'],
24
- target: { id: 'component:syn-switch', kind: 'component', name: 'syn-switch' },
25
- },
26
- {
27
- categories: ['input'],
28
- target: { id: 'component:syn-radio-group', kind: 'component', name: 'syn-radio-group' },
29
- },
30
- {
31
- categories: ['input'],
32
- target: { id: 'component:syn-file', kind: 'component', name: 'syn-file' },
33
- },
34
- {
35
- categories: ['input'],
36
- target: { id: 'component:syn-range', kind: 'component', name: 'syn-range' },
37
- },
38
- ];
@@ -1,2 +0,0 @@
1
- import type { IntentCapability } from '../types.js';
2
- export declare const navigationCapabilities: IntentCapability[];
@@ -1,54 +0,0 @@
1
- export const navigationCapabilities = [
2
- {
3
- categories: ['navigation', 'action'],
4
- target: {
5
- classes: ['syn-link'],
6
- id: 'style:syn-link',
7
- kind: 'style',
8
- layer: 'examples',
9
- selector: '.syn-link',
10
- },
11
- },
12
- {
13
- categories: ['navigation'],
14
- target: {
15
- classes: ['syn-link-list'],
16
- id: 'style:syn-link-list',
17
- kind: 'style',
18
- layer: 'examples',
19
- selector: '.syn-link-list',
20
- },
21
- },
22
- {
23
- categories: ['navigation'],
24
- target: { id: 'component:syn-tab-group', kind: 'component', name: 'syn-tab-group' },
25
- },
26
- {
27
- categories: ['navigation'],
28
- target: { id: 'component:syn-menu', kind: 'component', name: 'syn-menu' },
29
- },
30
- {
31
- categories: ['navigation'],
32
- target: { id: 'component:syn-dropdown', kind: 'component', name: 'syn-dropdown' },
33
- },
34
- {
35
- categories: ['navigation'],
36
- target: { id: 'component:syn-pagination', kind: 'component', name: 'syn-pagination' },
37
- },
38
- {
39
- categories: ['navigation'],
40
- target: { id: 'component:syn-breadcrumb', kind: 'component', name: 'syn-breadcrumb' },
41
- },
42
- {
43
- categories: ['navigation'],
44
- target: { id: 'component:syn-breadcrumb-item', kind: 'component', name: 'syn-breadcrumb-item' },
45
- },
46
- {
47
- categories: ['navigation'],
48
- target: { id: 'component:syn-side-nav', kind: 'component', name: 'syn-side-nav' },
49
- },
50
- {
51
- categories: ['navigation'],
52
- target: { id: 'component:syn-nav-item', kind: 'component', name: 'syn-nav-item' },
53
- },
54
- ];
@@ -1,2 +0,0 @@
1
- import type { IntentCapability } from '../types.js';
2
- export declare const statusCapabilities: IntentCapability[];
@@ -1,14 +0,0 @@
1
- export const statusCapabilities = [
2
- {
3
- categories: ['status'],
4
- target: { id: 'component:syn-spinner', kind: 'component', name: 'syn-spinner' },
5
- },
6
- {
7
- categories: ['status'],
8
- target: { id: 'component:syn-progress-bar', kind: 'component', name: 'syn-progress-bar' },
9
- },
10
- {
11
- categories: ['status'],
12
- target: { id: 'component:syn-progress-ring', kind: 'component', name: 'syn-progress-ring' },
13
- },
14
- ];
@@ -1,2 +0,0 @@
1
- import type { IntentCapability } from '../types.js';
2
- export declare const structureCapabilities: IntentCapability[];
@@ -1,22 +0,0 @@
1
- export const structureCapabilities = [
2
- {
3
- categories: ['structure'],
4
- target: { id: 'component:syn-dialog', kind: 'component', name: 'syn-dialog' },
5
- },
6
- {
7
- categories: ['structure'],
8
- target: { id: 'component:syn-drawer', kind: 'component', name: 'syn-drawer' },
9
- },
10
- {
11
- categories: ['structure'],
12
- target: { id: 'component:syn-header', kind: 'component', name: 'syn-header' },
13
- },
14
- {
15
- categories: ['structure'],
16
- target: { id: 'component:syn-card', kind: 'component', name: 'syn-card' },
17
- },
18
- {
19
- categories: ['structure'],
20
- target: { id: 'component:syn-divider', kind: 'component', name: 'syn-divider' },
21
- },
22
- ];
@@ -1,2 +0,0 @@
1
- import type { IntentCategory } from '../types.js';
2
- export declare const actionCategory: IntentCategory;
@@ -1,4 +0,0 @@
1
- export const actionCategory = {
2
- description: 'Contextual actions such as primary, submit, reset, or navigation actions.',
3
- id: 'action',
4
- };
@@ -1,2 +0,0 @@
1
- import type { IntentCategory } from '../types.js';
2
- export declare const assistanceCategory: IntentCategory;
@@ -1,4 +0,0 @@
1
- export const assistanceCategory = {
2
- description: 'Contextual micro-guidance for nearby controls or content.',
3
- id: 'assistance',
4
- };
@@ -1,2 +0,0 @@
1
- import type { IntentCategory } from '../types.js';
2
- export declare const disclosureCategory: IntentCategory;
@@ -1,4 +0,0 @@
1
- export const disclosureCategory = {
2
- description: 'Progressive disclosure of secondary information.',
3
- id: 'disclosure',
4
- };
@@ -1,2 +0,0 @@
1
- import type { IntentCategory } from '../types.js';
2
- export declare const feedbackCategory: IntentCategory;
@@ -1,4 +0,0 @@
1
- export const feedbackCategory = {
2
- description: 'Contextual user feedback such as inline or toast notifications.',
3
- id: 'feedback',
4
- };
@@ -1,5 +0,0 @@
1
- /**
2
- * A comprehensive list of intent categories, each representing a distinct classification of user intents that can be utilized within a user interface.
3
- * These categories serve as a foundational framework for organizing and understanding the various types of user interactions and behaviors that can occur within a digital product, enabling designers and developers to create more intuitive and user-friendly interfaces that effectively address the needs and goals of their users.
4
- */
5
- export declare const intentCategories: import("../types.js").IntentCategory[];
@@ -1,22 +0,0 @@
1
- import { actionCategory } from './action.js';
2
- import { assistanceCategory } from './assistance.js';
3
- import { disclosureCategory } from './disclosure.js';
4
- import { feedbackCategory } from './feedback.js';
5
- import { inputCategory } from './input.js';
6
- import { navigationCategory } from './navigation.js';
7
- import { statusCategory } from './status.js';
8
- import { structureCategory } from './structure.js';
9
- /**
10
- * A comprehensive list of intent categories, each representing a distinct classification of user intents that can be utilized within a user interface.
11
- * These categories serve as a foundational framework for organizing and understanding the various types of user interactions and behaviors that can occur within a digital product, enabling designers and developers to create more intuitive and user-friendly interfaces that effectively address the needs and goals of their users.
12
- */
13
- export const intentCategories = [
14
- actionCategory,
15
- feedbackCategory,
16
- inputCategory,
17
- navigationCategory,
18
- disclosureCategory,
19
- statusCategory,
20
- assistanceCategory,
21
- structureCategory,
22
- ];
@@ -1,2 +0,0 @@
1
- import type { IntentCategory } from '../types.js';
2
- export declare const inputCategory: IntentCategory;
@@ -1,4 +0,0 @@
1
- export const inputCategory = {
2
- description: 'Data-entry and selection intents for forms and controls.',
3
- id: 'input',
4
- };
@@ -1,2 +0,0 @@
1
- import type { IntentCategory } from '../types.js';
2
- export declare const navigationCategory: IntentCategory;
@@ -1,4 +0,0 @@
1
- export const navigationCategory = {
2
- description: 'Information architecture and movement between sections or datasets.',
3
- id: 'navigation',
4
- };
@@ -1,2 +0,0 @@
1
- import type { IntentCategory } from '../types.js';
2
- export declare const statusCategory: IntentCategory;
@@ -1,4 +0,0 @@
1
- export const statusCategory = {
2
- description: 'Transient loading and processing indicators.',
3
- id: 'status',
4
- };
@@ -1,2 +0,0 @@
1
- import type { IntentCategory } from '../types.js';
2
- export declare const structureCategory: IntentCategory;
@@ -1,4 +0,0 @@
1
- export const structureCategory = {
2
- description: 'Structural interaction intent requiring composition, slots, and semantic roles.',
3
- id: 'structure',
4
- };
@@ -1,2 +0,0 @@
1
- import type { IntentDefinition } from '../types.js';
2
- export declare const actionIntents: IntentDefinition[];