@melodicdev/components 1.3.0 → 1.5.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 (240) hide show
  1. package/assets/melodic-components.js +3550 -1656
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +5497 -3605
  4. package/lib/components/data-display/activity-feed/activity-feed-item.component.d.ts +5 -3
  5. package/lib/components/data-display/activity-feed/activity-feed-item.component.d.ts.map +1 -1
  6. package/lib/components/data-display/activity-feed/activity-feed-item.component.js +6 -1
  7. package/lib/components/data-display/activity-feed/activity-feed-item.styles.d.ts.map +1 -1
  8. package/lib/components/data-display/activity-feed/activity-feed-item.styles.js +80 -31
  9. package/lib/components/data-display/activity-feed/activity-feed-item.template.d.ts.map +1 -1
  10. package/lib/components/data-display/activity-feed/activity-feed-item.template.js +2 -1
  11. package/lib/components/data-display/activity-feed/activity-feed.component.d.ts.map +1 -1
  12. package/lib/components/data-display/activity-feed/activity-feed.styles.d.ts.map +1 -1
  13. package/lib/components/data-display/activity-feed/activity-feed.styles.js +5 -1
  14. package/lib/components/data-display/avatar/avatar.component.d.ts.map +1 -1
  15. package/lib/components/data-display/avatar/avatar.styles.d.ts.map +1 -1
  16. package/lib/components/data-display/avatar/avatar.styles.js +18 -7
  17. package/lib/components/data-display/badge/badge.component.d.ts +2 -0
  18. package/lib/components/data-display/badge/badge.component.d.ts.map +1 -1
  19. package/lib/components/data-display/badge/badge.component.js +3 -1
  20. package/lib/components/data-display/badge/badge.styles.d.ts.map +1 -1
  21. package/lib/components/data-display/badge/badge.styles.js +35 -10
  22. package/lib/components/data-display/badge/badge.template.d.ts.map +1 -1
  23. package/lib/components/data-display/badge/badge.template.js +4 -1
  24. package/lib/components/data-display/badge-group/badge-group.component.d.ts.map +1 -1
  25. package/lib/components/data-display/badge-group/badge-group.styles.d.ts.map +1 -1
  26. package/lib/components/data-display/badge-group/badge-group.styles.js +29 -14
  27. package/lib/components/data-display/calendar-view/calendar-view.component.d.ts.map +1 -1
  28. package/lib/components/data-display/calendar-view/calendar-view.styles.d.ts.map +1 -1
  29. package/lib/components/data-display/calendar-view/calendar-view.styles.js +155 -89
  30. package/lib/components/data-display/data-grid/data-grid.component.d.ts.map +1 -1
  31. package/lib/components/data-display/data-grid/data-grid.styles.d.ts.map +1 -1
  32. package/lib/components/data-display/data-grid/data-grid.styles.js +117 -61
  33. package/lib/components/data-display/list/list-item.component.d.ts.map +1 -1
  34. package/lib/components/data-display/list/list-item.styles.d.ts.map +1 -1
  35. package/lib/components/data-display/list/list-item.styles.js +35 -13
  36. package/lib/components/data-display/list/list.component.d.ts.map +1 -1
  37. package/lib/components/data-display/list/list.styles.d.ts.map +1 -1
  38. package/lib/components/data-display/list/list.styles.js +5 -1
  39. package/lib/components/data-display/profile-card/index.d.ts +2 -0
  40. package/lib/components/data-display/profile-card/index.d.ts.map +1 -0
  41. package/lib/components/data-display/profile-card/index.js +1 -0
  42. package/lib/components/data-display/profile-card/profile-card.component.d.ts +61 -0
  43. package/lib/components/data-display/profile-card/profile-card.component.d.ts.map +1 -0
  44. package/lib/components/data-display/profile-card/profile-card.component.js +102 -0
  45. package/lib/components/data-display/profile-card/profile-card.styles.d.ts +2 -0
  46. package/lib/components/data-display/profile-card/profile-card.styles.d.ts.map +1 -0
  47. package/lib/components/data-display/profile-card/profile-card.styles.js +182 -0
  48. package/lib/components/data-display/profile-card/profile-card.template.d.ts +3 -0
  49. package/lib/components/data-display/profile-card/profile-card.template.d.ts.map +1 -0
  50. package/lib/components/data-display/profile-card/profile-card.template.js +52 -0
  51. package/lib/components/data-display/stat-card/index.d.ts +2 -0
  52. package/lib/components/data-display/stat-card/index.d.ts.map +1 -0
  53. package/lib/components/data-display/stat-card/index.js +1 -0
  54. package/lib/components/data-display/stat-card/stat-card.component.d.ts +45 -0
  55. package/lib/components/data-display/stat-card/stat-card.component.d.ts.map +1 -0
  56. package/lib/components/data-display/stat-card/stat-card.component.js +59 -0
  57. package/lib/components/data-display/stat-card/stat-card.styles.d.ts +2 -0
  58. package/lib/components/data-display/stat-card/stat-card.styles.d.ts.map +1 -0
  59. package/lib/components/data-display/stat-card/stat-card.styles.js +119 -0
  60. package/lib/components/data-display/stat-card/stat-card.template.d.ts +3 -0
  61. package/lib/components/data-display/stat-card/stat-card.template.d.ts.map +1 -0
  62. package/lib/components/data-display/stat-card/stat-card.template.js +27 -0
  63. package/lib/components/data-display/table/table.component.d.ts.map +1 -1
  64. package/lib/components/data-display/table/table.styles.d.ts.map +1 -1
  65. package/lib/components/data-display/table/table.styles.js +61 -23
  66. package/lib/components/data-display/tag/tag.component.d.ts.map +1 -1
  67. package/lib/components/data-display/tag/tag.styles.d.ts.map +1 -1
  68. package/lib/components/data-display/tag/tag.styles.js +62 -25
  69. package/lib/components/feedback/alert/alert.component.d.ts.map +1 -1
  70. package/lib/components/feedback/alert/alert.styles.d.ts.map +1 -1
  71. package/lib/components/feedback/alert/alert.styles.js +41 -17
  72. package/lib/components/feedback/progress/progress.component.d.ts.map +1 -1
  73. package/lib/components/feedback/progress/progress.styles.d.ts.map +1 -1
  74. package/lib/components/feedback/progress/progress.styles.js +112 -56
  75. package/lib/components/feedback/spinner/spinner.component.d.ts.map +1 -1
  76. package/lib/components/feedback/spinner/spinner.styles.d.ts.map +1 -1
  77. package/lib/components/feedback/spinner/spinner.styles.js +32 -16
  78. package/lib/components/feedback/toast/toast-container.component.d.ts.map +1 -1
  79. package/lib/components/feedback/toast/toast.component.d.ts.map +1 -1
  80. package/lib/components/feedback/toast/toast.service.d.ts.map +1 -1
  81. package/lib/components/feedback/toast/toast.styles.d.ts.map +1 -1
  82. package/lib/components/feedback/toast/toast.styles.js +69 -26
  83. package/lib/components/forms/autocomplete/autocomplete.component.d.ts.map +1 -1
  84. package/lib/components/forms/autocomplete/autocomplete.styles.d.ts.map +1 -1
  85. package/lib/components/forms/autocomplete/autocomplete.styles.js +164 -76
  86. package/lib/components/forms/button/button.component.d.ts.map +1 -1
  87. package/lib/components/forms/button/button.styles.d.ts.map +1 -1
  88. package/lib/components/forms/button/button.styles.js +141 -116
  89. package/lib/components/forms/button-group/button-group-item.component.d.ts.map +1 -1
  90. package/lib/components/forms/button-group/button-group.component.d.ts.map +1 -1
  91. package/lib/components/forms/button-group/button-group.styles.d.ts.map +1 -1
  92. package/lib/components/forms/button-group/button-group.styles.js +8 -2
  93. package/lib/components/forms/checkbox/checkbox.component.d.ts.map +1 -1
  94. package/lib/components/forms/checkbox/checkbox.styles.d.ts.map +1 -1
  95. package/lib/components/forms/checkbox/checkbox.styles.js +75 -41
  96. package/lib/components/forms/date-picker/calendar.component.d.ts.map +1 -1
  97. package/lib/components/forms/date-picker/calendar.styles.d.ts.map +1 -1
  98. package/lib/components/forms/date-picker/calendar.styles.js +108 -47
  99. package/lib/components/forms/date-picker/date-picker.component.d.ts.map +1 -1
  100. package/lib/components/forms/date-picker/date-picker.styles.d.ts.map +1 -1
  101. package/lib/components/forms/date-picker/date-picker.styles.js +96 -38
  102. package/lib/components/forms/date-time-picker/date-time-picker.component.d.ts.map +1 -1
  103. package/lib/components/forms/date-time-picker/date-time-picker.styles.d.ts.map +1 -1
  104. package/lib/components/forms/date-time-picker/date-time-picker.styles.js +65 -25
  105. package/lib/components/forms/file-upload/file-icon.component.d.ts.map +1 -1
  106. package/lib/components/forms/file-upload/file-upload-item.component.d.ts.map +1 -1
  107. package/lib/components/forms/file-upload/file-upload.component.d.ts +2 -2
  108. package/lib/components/forms/file-upload/file-upload.component.d.ts.map +1 -1
  109. package/lib/components/forms/file-upload/file-upload.component.js +3 -3
  110. package/lib/components/forms/file-upload/file-upload.styles.d.ts.map +1 -1
  111. package/lib/components/forms/file-upload/file-upload.styles.js +92 -39
  112. package/lib/components/forms/form-field/form-field.component.d.ts.map +1 -1
  113. package/lib/components/forms/form-field/form-field.styles.d.ts.map +1 -1
  114. package/lib/components/forms/form-field/form-field.styles.js +72 -29
  115. package/lib/components/forms/input/input.component.d.ts.map +1 -1
  116. package/lib/components/forms/input/input.styles.d.ts.map +1 -1
  117. package/lib/components/forms/input/input.styles.js +81 -29
  118. package/lib/components/forms/radio/radio-group.component.d.ts.map +1 -1
  119. package/lib/components/forms/radio/radio.component.d.ts.map +1 -1
  120. package/lib/components/forms/radio/radio.styles.d.ts.map +1 -1
  121. package/lib/components/forms/radio/radio.styles.js +85 -54
  122. package/lib/components/forms/radio-card-group/radio-card-group.component.d.ts.map +1 -1
  123. package/lib/components/forms/radio-card-group/radio-card-group.styles.d.ts.map +1 -1
  124. package/lib/components/forms/radio-card-group/radio-card-group.styles.js +34 -12
  125. package/lib/components/forms/radio-card-group/radio-card.component.d.ts.map +1 -1
  126. package/lib/components/forms/radio-card-group/radio-card.styles.d.ts.map +1 -1
  127. package/lib/components/forms/radio-card-group/radio-card.styles.js +108 -47
  128. package/lib/components/forms/select/select.component.d.ts.map +1 -1
  129. package/lib/components/forms/select/select.styles.d.ts.map +1 -1
  130. package/lib/components/forms/select/select.styles.js +152 -71
  131. package/lib/components/forms/slider/slider.component.d.ts.map +1 -1
  132. package/lib/components/forms/slider/slider.styles.d.ts.map +1 -1
  133. package/lib/components/forms/slider/slider.styles.js +77 -36
  134. package/lib/components/forms/textarea/textarea.component.d.ts.map +1 -1
  135. package/lib/components/forms/textarea/textarea.styles.d.ts.map +1 -1
  136. package/lib/components/forms/textarea/textarea.styles.js +79 -31
  137. package/lib/components/forms/time-picker/time-picker.component.d.ts.map +1 -1
  138. package/lib/components/forms/time-picker/time-picker.styles.d.ts.map +1 -1
  139. package/lib/components/forms/time-picker/time-picker.styles.js +196 -91
  140. package/lib/components/forms/toggle/toggle.component.d.ts.map +1 -1
  141. package/lib/components/forms/toggle/toggle.styles.d.ts.map +1 -1
  142. package/lib/components/forms/toggle/toggle.styles.js +84 -54
  143. package/lib/components/foundation/card/card.component.d.ts.map +1 -1
  144. package/lib/components/foundation/card/card.styles.d.ts.map +1 -1
  145. package/lib/components/foundation/card/card.styles.js +48 -17
  146. package/lib/components/foundation/container/container.component.d.ts.map +1 -1
  147. package/lib/components/foundation/divider/divider.component.d.ts.map +1 -1
  148. package/lib/components/foundation/divider/divider.styles.d.ts.map +1 -1
  149. package/lib/components/foundation/divider/divider.styles.js +24 -12
  150. package/lib/components/foundation/stack/stack.component.d.ts.map +1 -1
  151. package/lib/components/general/icon/icon.component.d.ts.map +1 -1
  152. package/lib/components/general/icon/icon.styles.d.ts.map +1 -1
  153. package/lib/components/general/icon/icon.styles.js +9 -2
  154. package/lib/components/navigation/breadcrumb/breadcrumb-item.component.d.ts.map +1 -1
  155. package/lib/components/navigation/breadcrumb/breadcrumb.component.d.ts.map +1 -1
  156. package/lib/components/navigation/breadcrumb/breadcrumb.styles.d.ts.map +1 -1
  157. package/lib/components/navigation/breadcrumb/breadcrumb.styles.js +4 -1
  158. package/lib/components/navigation/pagination/pagination.component.d.ts.map +1 -1
  159. package/lib/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
  160. package/lib/components/navigation/pagination/pagination.styles.js +59 -23
  161. package/lib/components/navigation/sidebar/sidebar-group.component.d.ts.map +1 -1
  162. package/lib/components/navigation/sidebar/sidebar-item.component.d.ts +3 -1
  163. package/lib/components/navigation/sidebar/sidebar-item.component.d.ts.map +1 -1
  164. package/lib/components/navigation/sidebar/sidebar-item.component.js +3 -1
  165. package/lib/components/navigation/sidebar/sidebar-item.styles.d.ts.map +1 -1
  166. package/lib/components/navigation/sidebar/sidebar-item.styles.js +79 -33
  167. package/lib/components/navigation/sidebar/sidebar-item.template.js +1 -1
  168. package/lib/components/navigation/sidebar/sidebar.component.d.ts +1 -3
  169. package/lib/components/navigation/sidebar/sidebar.component.d.ts.map +1 -1
  170. package/lib/components/navigation/sidebar/sidebar.component.js +1 -5
  171. package/lib/components/navigation/sidebar/sidebar.styles.d.ts.map +1 -1
  172. package/lib/components/navigation/sidebar/sidebar.styles.js +154 -61
  173. package/lib/components/navigation/steps/step-panel.component.d.ts.map +1 -1
  174. package/lib/components/navigation/steps/step.component.d.ts.map +1 -1
  175. package/lib/components/navigation/steps/step.styles.d.ts.map +1 -1
  176. package/lib/components/navigation/steps/step.styles.js +149 -83
  177. package/lib/components/navigation/steps/steps.component.d.ts +1 -1
  178. package/lib/components/navigation/steps/steps.component.d.ts.map +1 -1
  179. package/lib/components/navigation/steps/steps.styles.d.ts.map +1 -1
  180. package/lib/components/navigation/steps/steps.styles.js +169 -91
  181. package/lib/components/navigation/tabs/tab-panel.component.d.ts.map +1 -1
  182. package/lib/components/navigation/tabs/tab.component.d.ts.map +1 -1
  183. package/lib/components/navigation/tabs/tab.styles.d.ts.map +1 -1
  184. package/lib/components/navigation/tabs/tab.styles.js +36 -12
  185. package/lib/components/navigation/tabs/tabs.component.d.ts +1 -1
  186. package/lib/components/navigation/tabs/tabs.component.d.ts.map +1 -1
  187. package/lib/components/navigation/tabs/tabs.styles.d.ts.map +1 -1
  188. package/lib/components/navigation/tabs/tabs.styles.js +126 -57
  189. package/lib/components/overlays/dialog/dialog-ref.class.d.ts.map +1 -1
  190. package/lib/components/overlays/dialog/dialog.component.d.ts.map +1 -1
  191. package/lib/components/overlays/dialog/dialog.service.d.ts.map +1 -1
  192. package/lib/components/overlays/dialog/dialog.styles.d.ts.map +1 -1
  193. package/lib/components/overlays/dialog/dialog.styles.js +73 -33
  194. package/lib/components/overlays/drawer/drawer.component.d.ts.map +1 -1
  195. package/lib/components/overlays/drawer/drawer.styles.d.ts.map +1 -1
  196. package/lib/components/overlays/drawer/drawer.styles.js +77 -33
  197. package/lib/components/overlays/dropdown/dropdown-group.component.d.ts.map +1 -1
  198. package/lib/components/overlays/dropdown/dropdown-item.component.d.ts.map +1 -1
  199. package/lib/components/overlays/dropdown/dropdown-item.styles.d.ts.map +1 -1
  200. package/lib/components/overlays/dropdown/dropdown-item.styles.js +43 -17
  201. package/lib/components/overlays/dropdown/dropdown.component.d.ts.map +1 -1
  202. package/lib/components/overlays/dropdown/dropdown.styles.d.ts.map +1 -1
  203. package/lib/components/overlays/dropdown/dropdown.styles.js +30 -15
  204. package/lib/components/overlays/popover/popover.component.d.ts.map +1 -1
  205. package/lib/components/overlays/popover/popover.styles.d.ts.map +1 -1
  206. package/lib/components/overlays/popover/popover.styles.js +29 -14
  207. package/lib/components/overlays/tooltip/tooltip.component.d.ts.map +1 -1
  208. package/lib/components/overlays/tooltip/tooltip.styles.d.ts.map +1 -1
  209. package/lib/components/overlays/tooltip/tooltip.styles.js +28 -12
  210. package/lib/components/pages/auth/auth-layout.styles.d.ts +1 -1
  211. package/lib/components/pages/auth/auth-layout.styles.d.ts.map +1 -1
  212. package/lib/components/pages/auth/auth-layout.styles.js +79 -31
  213. package/lib/components/pages/auth/login-page.component.d.ts.map +1 -1
  214. package/lib/components/pages/auth/signup-page.component.d.ts.map +1 -1
  215. package/lib/components/pages/dashboard/dashboard-page.component.d.ts.map +1 -1
  216. package/lib/components/pages/dashboard/dashboard-page.styles.d.ts.map +1 -1
  217. package/lib/components/pages/dashboard/dashboard-page.styles.js +34 -12
  218. package/lib/components/sections/app-shell/app-shell.component.d.ts.map +1 -1
  219. package/lib/components/sections/app-shell/app-shell.styles.d.ts.map +1 -1
  220. package/lib/components/sections/app-shell/app-shell.styles.js +54 -23
  221. package/lib/components/sections/hero/hero-section.component.d.ts.map +1 -1
  222. package/lib/components/sections/hero/hero-section.styles.d.ts.map +1 -1
  223. package/lib/components/sections/hero/hero-section.styles.js +97 -40
  224. package/lib/components/sections/page-header/page-header.component.d.ts.map +1 -1
  225. package/lib/components/sections/page-header/page-header.styles.d.ts.map +1 -1
  226. package/lib/components/sections/page-header/page-header.styles.js +62 -28
  227. package/lib/components/sections/page-section/index.d.ts +2 -0
  228. package/lib/components/sections/page-section/index.d.ts.map +1 -0
  229. package/lib/components/sections/page-section/index.js +1 -0
  230. package/lib/components/sections/page-section/page-section.component.d.ts +39 -0
  231. package/lib/components/sections/page-section/page-section.component.d.ts.map +1 -0
  232. package/lib/components/sections/page-section/page-section.component.js +56 -0
  233. package/lib/components/sections/page-section/page-section.styles.d.ts +2 -0
  234. package/lib/components/sections/page-section/page-section.styles.d.ts.map +1 -0
  235. package/lib/components/sections/page-section/page-section.styles.js +102 -0
  236. package/lib/components/sections/page-section/page-section.template.d.ts +3 -0
  237. package/lib/components/sections/page-section/page-section.template.d.ts.map +1 -0
  238. package/lib/components/sections/page-section/page-section.template.js +30 -0
  239. package/lib/utils/virtual-scroll/index.d.ts.map +1 -1
  240. package/package.json +13 -1
@@ -1,6 +1,6 @@
1
1
  import type { IElementRef } from '@melodicdev/core';
2
2
  import type { Size } from '../../../types/index.js';
3
- type IndicatorColor = 'success' | 'warning' | 'error' | 'primary' | 'gray';
3
+ type IndicatorPreset = 'success' | 'warning' | 'error' | 'primary' | 'gray';
4
4
  /**
5
5
  * ml-activity-feed-item - Individual activity entry within a feed
6
6
  *
@@ -31,8 +31,10 @@ export declare class ActivityFeedItemComponent implements IElementRef {
31
31
  subtitle: string;
32
32
  /** Show indicator dot */
33
33
  indicator: boolean;
34
- /** Indicator dot color */
35
- 'indicator-color': IndicatorColor;
34
+ /** Indicator dot color — preset name or any CSS color value */
35
+ 'indicator-color': IndicatorPreset | string;
36
+ /** Whether the indicator-color is a preset name */
37
+ get isPresetColor(): boolean;
36
38
  /** Check if avatar slot has content */
37
39
  get hasAvatarSlot(): boolean;
38
40
  /** Check if content slot has content */
@@ -1 +1 @@
1
- {"version":3,"file":"activity-feed-item.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed-item.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAE3E;;;;;;;;;;;;;GAaG;AACH,qBAMa,yBAA0B,YAAW,WAAW;IAC5D,UAAU,EAAG,WAAW,CAAC;IAEzB,wBAAwB;IACxB,IAAI,SAAM;IAEV,qBAAqB;IACrB,SAAS,SAAM;IAEf,0BAA0B;IAC1B,YAAY,SAAM;IAElB,+BAA+B;IAC/B,iBAAiB,SAAM;IAEvB,kBAAkB;IAClB,aAAa,EAAE,IAAI,CAAQ;IAE3B,mCAAmC;IACnC,QAAQ,SAAM;IAEd,yBAAyB;IACzB,SAAS,UAAS;IAElB,0BAA0B;IAC1B,iBAAiB,EAAE,cAAc,CAAU;IAE3C,uCAAuC;IACvC,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED,wCAAwC;IACxC,IAAI,cAAc,IAAI,OAAO,CAE5B;CACD"}
1
+ {"version":3,"file":"activity-feed-item.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed-item.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAG5E;;;;;;;;;;;;;GAaG;AACH,qBAMa,yBAA0B,YAAW,WAAW;IACrD,UAAU,EAAG,WAAW,CAAC;IAEhC,wBAAwB;IACjB,IAAI,SAAM;IAEjB,qBAAqB;IACd,SAAS,SAAM;IAEtB,0BAA0B;IACnB,YAAY,SAAM;IAEzB,+BAA+B;IACxB,iBAAiB,SAAM;IAE9B,kBAAkB;IACX,aAAa,EAAE,IAAI,CAAQ;IAElC,mCAAmC;IAC5B,QAAQ,SAAM;IAErB,yBAAyB;IAClB,SAAS,UAAS;IAEzB,+DAA+D;IACxD,iBAAiB,EAAE,eAAe,GAAG,MAAM,CAAU;IAE5D,mDAAmD;IACnD,IAAW,aAAa,IAAI,OAAO,CAElC;IAED,uCAAuC;IACvC,IAAW,aAAa,IAAI,OAAO,CAElC;IAED,wCAAwC;IACxC,IAAW,cAAc,IAAI,OAAO,CAEnC;CACD"}
@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { MelodicComponent } from '@melodicdev/core';
8
8
  import { activityFeedItemTemplate } from './activity-feed-item.template.js';
9
9
  import { activityFeedItemStyles } from './activity-feed-item.styles.js';
10
+ const INDICATOR_PRESETS = new Set(['success', 'warning', 'error', 'primary', 'gray']);
10
11
  /**
11
12
  * ml-activity-feed-item - Individual activity entry within a feed
12
13
  *
@@ -37,9 +38,13 @@ let ActivityFeedItemComponent = class ActivityFeedItemComponent {
37
38
  this.subtitle = '';
38
39
  /** Show indicator dot */
39
40
  this.indicator = false;
40
- /** Indicator dot color */
41
+ /** Indicator dot color — preset name or any CSS color value */
41
42
  this['indicator-color'] = 'gray';
42
43
  }
44
+ /** Whether the indicator-color is a preset name */
45
+ get isPresetColor() {
46
+ return INDICATOR_PRESETS.has(this['indicator-color']);
47
+ }
43
48
  /** Check if avatar slot has content */
44
49
  get hasAvatarSlot() {
45
50
  return this.elementRef?.querySelector('[slot="avatar"]') !== null;
@@ -1 +1 @@
1
- {"version":3,"file":"activity-feed-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,iDA+HlC,CAAC"}
1
+ {"version":3,"file":"activity-feed-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,iDAgLlC,CAAC"}
@@ -2,12 +2,60 @@ import { css } from '@melodicdev/core';
2
2
  export const activityFeedItemStyles = () => css `
3
3
  :host {
4
4
  display: block;
5
- padding: var(--ml-space-4) 0;
5
+
6
+ /* ── Activity Feed Item: spacing ── */
7
+ --ml-activity-feed-item-padding: var(--ml-space-4) 0;
8
+ --ml-activity-feed-item-gap: var(--ml-space-3);
9
+
10
+ /* ── Activity Feed Item: connector ── */
11
+ --ml-activity-feed-item-connector-color: var(--ml-color-border);
12
+ --ml-activity-feed-item-connector-width: 2px;
13
+ --ml-activity-feed-item-connector-radius: var(--ml-radius-full);
14
+ --ml-activity-feed-item-connector-spacing: var(--ml-space-2);
15
+
16
+ /* ── Activity Feed Item: name ── */
17
+ --ml-activity-feed-item-name-font: var(--ml-font-sans);
18
+ --ml-activity-feed-item-name-size: var(--ml-text-sm);
19
+ --ml-activity-feed-item-name-weight: var(--ml-font-semibold);
20
+ --ml-activity-feed-item-name-color: var(--ml-color-text);
21
+
22
+ /* ── Activity Feed Item: timestamp ── */
23
+ --ml-activity-feed-item-timestamp-font: var(--ml-font-sans);
24
+ --ml-activity-feed-item-timestamp-size: var(--ml-text-xs);
25
+ --ml-activity-feed-item-timestamp-color: var(--ml-color-text-tertiary);
26
+
27
+ /* ── Activity Feed Item: subtitle ── */
28
+ --ml-activity-feed-item-subtitle-font: var(--ml-font-sans);
29
+ --ml-activity-feed-item-subtitle-size: var(--ml-text-xs);
30
+ --ml-activity-feed-item-subtitle-color: var(--ml-color-text-secondary);
31
+
32
+ /* ── Activity Feed Item: description ── */
33
+ --ml-activity-feed-item-description-font: var(--ml-font-sans);
34
+ --ml-activity-feed-item-description-size: var(--ml-text-sm);
35
+ --ml-activity-feed-item-description-color: var(--ml-color-text-secondary);
36
+ --ml-activity-feed-item-description-line-height: var(--ml-leading-relaxed);
37
+
38
+ /* ── Activity Feed Item: description link ── */
39
+ --ml-activity-feed-item-link-color: var(--ml-color-primary);
40
+ --ml-activity-feed-item-link-weight: var(--ml-font-medium);
41
+
42
+ /* ── Activity Feed Item: indicator ── */
43
+ --ml-activity-feed-item-indicator-size: 8px;
44
+ --ml-activity-feed-item-indicator-radius: var(--ml-radius-full);
45
+
46
+ /* ── Activity Feed Item: indicator colors ── */
47
+ --ml-activity-feed-item-indicator-gray: var(--ml-color-text-tertiary);
48
+ --ml-activity-feed-item-indicator-primary: var(--ml-color-primary);
49
+ --ml-activity-feed-item-indicator-success: var(--ml-color-success);
50
+ --ml-activity-feed-item-indicator-warning: var(--ml-color-warning);
51
+ --ml-activity-feed-item-indicator-error: var(--ml-color-error);
52
+
53
+ padding: var(--ml-activity-feed-item-padding);
6
54
  }
7
55
 
8
56
  .ml-afi {
9
57
  display: flex;
10
- gap: var(--ml-space-3);
58
+ gap: var(--ml-activity-feed-item-gap);
11
59
  }
12
60
 
13
61
  /* Left column: avatar + connector */
@@ -25,10 +73,10 @@ export const activityFeedItemStyles = () => css `
25
73
 
26
74
  .ml-afi__connector {
27
75
  flex: 1;
28
- width: 2px;
29
- margin-top: var(--ml-space-2);
30
- background-color: var(--ml-color-border);
31
- border-radius: var(--ml-radius-full);
76
+ width: var(--ml-activity-feed-item-connector-width);
77
+ margin-top: var(--ml-activity-feed-item-connector-spacing);
78
+ background-color: var(--ml-activity-feed-item-connector-color);
79
+ border-radius: var(--ml-activity-feed-item-connector-radius);
32
80
  display: var(--_ml-af-line-display, none);
33
81
  }
34
82
 
@@ -53,37 +101,37 @@ export const activityFeedItemStyles = () => css `
53
101
  }
54
102
 
55
103
  .ml-afi__name {
56
- font-family: var(--ml-font-sans);
57
- font-size: var(--ml-text-sm);
58
- font-weight: var(--ml-font-semibold);
59
- color: var(--ml-color-text);
104
+ font-family: var(--ml-activity-feed-item-name-font);
105
+ font-size: var(--ml-activity-feed-item-name-size);
106
+ font-weight: var(--ml-activity-feed-item-name-weight);
107
+ color: var(--ml-activity-feed-item-name-color);
60
108
  }
61
109
 
62
110
  .ml-afi__timestamp {
63
- font-family: var(--ml-font-sans);
64
- font-size: var(--ml-text-xs);
65
- color: var(--ml-color-text-tertiary);
111
+ font-family: var(--ml-activity-feed-item-timestamp-font);
112
+ font-size: var(--ml-activity-feed-item-timestamp-size);
113
+ color: var(--ml-activity-feed-item-timestamp-color);
66
114
  }
67
115
 
68
116
  .ml-afi__subtitle {
69
- font-family: var(--ml-font-sans);
70
- font-size: var(--ml-text-xs);
71
- color: var(--ml-color-text-secondary);
117
+ font-family: var(--ml-activity-feed-item-subtitle-font);
118
+ font-size: var(--ml-activity-feed-item-subtitle-size);
119
+ color: var(--ml-activity-feed-item-subtitle-color);
72
120
  margin-top: var(--ml-space-0-5);
73
121
  }
74
122
 
75
123
  .ml-afi__description {
76
- font-family: var(--ml-font-sans);
77
- font-size: var(--ml-text-sm);
78
- color: var(--ml-color-text-secondary);
79
- line-height: var(--ml-leading-relaxed);
124
+ font-family: var(--ml-activity-feed-item-description-font);
125
+ font-size: var(--ml-activity-feed-item-description-size);
126
+ color: var(--ml-activity-feed-item-description-color);
127
+ line-height: var(--ml-activity-feed-item-description-line-height);
80
128
  margin-top: var(--ml-space-1);
81
129
  }
82
130
 
83
131
  .ml-afi__description ::slotted(a) {
84
- color: var(--ml-color-primary);
132
+ color: var(--ml-activity-feed-item-link-color);
85
133
  text-decoration: none;
86
- font-weight: var(--ml-font-medium);
134
+ font-weight: var(--ml-activity-feed-item-link-weight);
87
135
  }
88
136
 
89
137
  .ml-afi__description ::slotted(a:hover) {
@@ -92,7 +140,7 @@ export const activityFeedItemStyles = () => css `
92
140
 
93
141
  .ml-afi__description ::slotted(strong) {
94
142
  font-weight: var(--ml-font-semibold);
95
- color: var(--ml-color-text);
143
+ color: var(--ml-activity-feed-item-name-color);
96
144
  }
97
145
 
98
146
  .ml-afi__content {
@@ -101,29 +149,30 @@ export const activityFeedItemStyles = () => css `
101
149
 
102
150
  /* Indicator dot */
103
151
  .ml-afi__indicator {
104
- width: 8px;
105
- height: 8px;
106
- border-radius: var(--ml-radius-full);
152
+ width: var(--ml-activity-feed-item-indicator-size);
153
+ height: var(--ml-activity-feed-item-indicator-size);
154
+ border-radius: var(--ml-activity-feed-item-indicator-radius);
107
155
  flex-shrink: 0;
156
+ background-color: var(--ml-afi-indicator-bg);
108
157
  }
109
158
 
110
159
  .ml-afi__indicator--gray {
111
- background-color: var(--ml-color-text-tertiary);
160
+ background-color: var(--ml-activity-feed-item-indicator-gray);
112
161
  }
113
162
 
114
163
  .ml-afi__indicator--primary {
115
- background-color: var(--ml-color-primary);
164
+ background-color: var(--ml-activity-feed-item-indicator-primary);
116
165
  }
117
166
 
118
167
  .ml-afi__indicator--success {
119
- background-color: var(--ml-color-success);
168
+ background-color: var(--ml-activity-feed-item-indicator-success);
120
169
  }
121
170
 
122
171
  .ml-afi__indicator--warning {
123
- background-color: var(--ml-color-warning);
172
+ background-color: var(--ml-activity-feed-item-indicator-warning);
124
173
  }
125
174
 
126
175
  .ml-afi__indicator--error {
127
- background-color: var(--ml-color-error);
176
+ background-color: var(--ml-activity-feed-item-indicator-error);
128
177
  }
129
178
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"activity-feed-item.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed-item.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAEnF,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,yBAAyB,6CAoDpE"}
1
+ {"version":3,"file":"activity-feed-item.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed-item.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAEnF,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,yBAAyB,6CAqDpE"}
@@ -24,8 +24,9 @@ export function activityFeedItemTemplate(c) {
24
24
  <span
25
25
  class=${classMap({
26
26
  'ml-afi__indicator': true,
27
- [`ml-afi__indicator--${c['indicator-color']}`]: true
27
+ [`ml-afi__indicator--${c['indicator-color']}`]: c.isPresetColor
28
28
  })}
29
+ style=${c.isPresetColor ? '' : `--ml-afi-indicator-bg: ${c['indicator-color']}`}
29
30
  ></span>
30
31
  `)}
31
32
  </div>
@@ -1 +1 @@
1
- {"version":3,"file":"activity-feed.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,KAAK,mBAAmB,GAAG,MAAM,GAAG,UAAU,CAAC;AAE/C;;;;;;;;;;;;;GAaG;AACH,qBAMa,qBAAsB,YAAW,WAAW;IACxD,UAAU,EAAG,WAAW,CAAC;IAEzB,2BAA2B;IAC3B,OAAO,EAAE,mBAAmB,CAAU;CACtC"}
1
+ {"version":3,"file":"activity-feed.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,KAAK,mBAAmB,GAAG,MAAM,GAAG,UAAU,CAAC;AAE/C;;;;;;;;;;;;;GAaG;AACH,qBAMa,qBAAsB,YAAW,WAAW;IACjD,UAAU,EAAG,WAAW,CAAC;IAEhC,2BAA2B;IACpB,OAAO,EAAE,mBAAmB,CAAU;CAC7C"}
@@ -1 +1 @@
1
- {"version":3,"file":"activity-feed.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDAuB9B,CAAC"}
1
+ {"version":3,"file":"activity-feed.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDA2B9B,CAAC"}
@@ -2,6 +2,10 @@ import { css } from '@melodicdev/core';
2
2
  export const activityFeedStyles = () => css `
3
3
  :host {
4
4
  display: block;
5
+
6
+ /* ── Activity Feed: list divider ── */
7
+ --ml-activity-feed-divider-width: var(--ml-border);
8
+ --ml-activity-feed-divider-color: var(--ml-color-border);
5
9
  }
6
10
 
7
11
  .ml-activity-feed {
@@ -11,7 +15,7 @@ export const activityFeedStyles = () => css `
11
15
 
12
16
  /* List variant: dividers between items */
13
17
  .ml-activity-feed--list ::slotted(ml-activity-feed-item:not(:last-of-type)) {
14
- border-bottom: var(--ml-border) solid var(--ml-color-border);
18
+ border-bottom: var(--ml-activity-feed-divider-width) solid var(--ml-activity-feed-divider-color);
15
19
  }
16
20
 
17
21
  /* Timeline variant: connector line, no dividers */
@@ -1 +1 @@
1
- {"version":3,"file":"avatar.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/avatar/avatar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,eAAgB,YAAW,WAAW;IAClD,UAAU,EAAG,WAAW,CAAC;IAEzB,uBAAuB;IACvB,GAAG,SAAM;IAET,yBAAyB;IACzB,GAAG,SAAM;IAET,iDAAiD;IACjD,QAAQ,SAAM;IAEd,kBAAkB;IAClB,IAAI,EAAE,IAAI,CAAQ;IAElB,2CAA2C;IAC3C,OAAO,UAAS;IAEhB,wCAAwC;IACxC,WAAW,UAAS;IAEpB,gBAAgB,QAAO,IAAI,CAEzB;IAEF,WAAW,IAAI,MAAM;CAIrB"}
1
+ {"version":3,"file":"avatar.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/avatar/avatar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,eAAgB,YAAW,WAAW;IAC3C,UAAU,EAAG,WAAW,CAAC;IAEhC,uBAAuB;IAChB,GAAG,SAAM;IAEhB,yBAAyB;IAClB,GAAG,SAAM;IAEhB,iDAAiD;IAC1C,QAAQ,SAAM;IAErB,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,2CAA2C;IACpC,OAAO,UAAS;IAEvB,wCAAwC;IACjC,WAAW,UAAS;IAEpB,gBAAgB,QAAO,IAAI,CAEhC;IAEK,WAAW,IAAI,MAAM;CAI5B"}
@@ -1 +1 @@
1
- {"version":3,"file":"avatar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/avatar/avatar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAwFxB,CAAC"}
1
+ {"version":3,"file":"avatar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/avatar/avatar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAmGxB,CAAC"}
@@ -2,6 +2,17 @@ import { css } from '@melodicdev/core';
2
2
  export const avatarStyles = () => css `
3
3
  :host {
4
4
  display: inline-block;
5
+
6
+ /* ── Avatar: colors ── */
7
+ --ml-avatar-bg: var(--ml-color-surface-raised);
8
+ --ml-avatar-color: var(--ml-color-text-muted);
9
+ --ml-avatar-font-weight: var(--ml-font-semibold);
10
+ --ml-avatar-border-color: var(--ml-color-surface);
11
+ --ml-avatar-shadow: var(--ml-shadow-xs);
12
+ --ml-avatar-radius: var(--ml-radius-full);
13
+
14
+ /* ── Avatar: fallback icon ── */
15
+ --ml-avatar-fallback-color: var(--ml-color-text-subtle);
5
16
  }
6
17
 
7
18
  .ml-avatar {
@@ -9,13 +20,13 @@ export const avatarStyles = () => css `
9
20
  align-items: center;
10
21
  justify-content: center;
11
22
  overflow: hidden;
12
- background-color: var(--ml-color-surface-raised);
13
- color: var(--ml-color-text-muted);
14
- font-weight: var(--ml-font-semibold);
23
+ background-color: var(--ml-avatar-bg);
24
+ color: var(--ml-avatar-color);
25
+ font-weight: var(--ml-avatar-font-weight);
15
26
  vertical-align: middle;
16
- border-radius: var(--ml-radius-full);
17
- border: 2px solid var(--ml-color-surface);
18
- box-shadow: var(--ml-shadow-xs);
27
+ border-radius: var(--ml-avatar-radius);
28
+ border: 2px solid var(--ml-avatar-border-color);
29
+ box-shadow: var(--ml-avatar-shadow);
19
30
  }
20
31
 
21
32
  .ml-avatar--rounded {
@@ -80,7 +91,7 @@ export const avatarStyles = () => css `
80
91
  justify-content: center;
81
92
  width: 60%;
82
93
  height: 60%;
83
- color: var(--ml-color-text-subtle);
94
+ color: var(--ml-avatar-fallback-color);
84
95
  }
85
96
 
86
97
  .ml-avatar__fallback svg {
@@ -23,5 +23,7 @@ export declare class BadgeComponent implements IElementRef {
23
23
  dot: boolean;
24
24
  /** Use pill (rounded) shape */
25
25
  pill: boolean;
26
+ /** Custom background color — any CSS color value. Overrides variant colors. */
27
+ color: string;
26
28
  }
27
29
  //# sourceMappingURL=badge.component.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/badge.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBAMa,cAAe,YAAW,WAAW;IACjD,UAAU,EAAG,WAAW,CAAC;IAEzB,oBAAoB;IACpB,OAAO,EAAE,YAAY,CAAa;IAElC,iBAAiB;IACjB,IAAI,EAAE,IAAI,CAAQ;IAElB,yBAAyB;IACzB,GAAG,UAAS;IAEZ,+BAA+B;IAC/B,IAAI,UAAS;CACb"}
1
+ {"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/badge.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBAMa,cAAe,YAAW,WAAW;IAC1C,UAAU,EAAG,WAAW,CAAC;IAEhC,oBAAoB;IACb,OAAO,EAAE,YAAY,CAAa;IAEzC,iBAAiB;IACV,IAAI,EAAE,IAAI,CAAQ;IAEzB,yBAAyB;IAClB,GAAG,UAAS;IAEnB,+BAA+B;IACxB,IAAI,UAAS;IAEpB,+EAA+E;IACxE,KAAK,SAAM;CAClB"}
@@ -29,6 +29,8 @@ let BadgeComponent = class BadgeComponent {
29
29
  this.dot = false;
30
30
  /** Use pill (rounded) shape */
31
31
  this.pill = false;
32
+ /** Custom background color — any CSS color value. Overrides variant colors. */
33
+ this.color = '';
32
34
  }
33
35
  };
34
36
  BadgeComponent = __decorate([
@@ -36,7 +38,7 @@ BadgeComponent = __decorate([
36
38
  selector: 'ml-badge',
37
39
  template: badgeTemplate,
38
40
  styles: badgeStyles,
39
- attributes: ['variant', 'size', 'dot', 'pill']
41
+ attributes: ['variant', 'size', 'dot', 'pill', 'color']
40
42
  })
41
43
  ], BadgeComponent);
42
44
  export { BadgeComponent };
@@ -1 +1 @@
1
- {"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/badge.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAoFvB,CAAC"}
1
+ {"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/badge.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDA6GvB,CAAC"}
@@ -2,34 +2,53 @@ import { css } from '@melodicdev/core';
2
2
  export const badgeStyles = () => css `
3
3
  :host {
4
4
  display: inline-block;
5
+
6
+ /* ── Badge: base ── */
7
+ --ml-badge-font: var(--ml-font-sans);
8
+ --ml-badge-font-weight: var(--ml-font-medium);
9
+ --ml-badge-radius: var(--ml-radius-md);
10
+ --ml-badge-border-width: var(--ml-border);
11
+
12
+ /* ── Badge: pill shape ── */
13
+ --ml-badge-pill-radius: var(--ml-radius-full);
14
+
15
+ /* ── Badge: dot ── */
16
+ --ml-badge-dot-size: 0.375rem;
17
+ --ml-badge-dot-size-lg: 0.5rem;
18
+
19
+ /* ── Badge: secondary variant ── */
20
+ --ml-badge-secondary-color: var(--ml-color-text-secondary);
21
+
22
+ /* ── Badge: custom variant ── */
23
+ --ml-badge-custom-color: var(--ml-badge-color, #fff);
5
24
  }
6
25
 
7
26
  .ml-badge {
8
27
  display: inline-flex;
9
28
  align-items: center;
10
29
  gap: var(--ml-space-1-5);
11
- font-family: var(--ml-font-sans);
12
- font-weight: var(--ml-font-medium);
30
+ font-family: var(--ml-badge-font);
31
+ font-weight: var(--ml-badge-font-weight);
13
32
  line-height: 1;
14
33
  white-space: nowrap;
15
- border-radius: var(--ml-radius-md);
16
- border: var(--ml-border) solid transparent;
34
+ border-radius: var(--ml-badge-radius);
35
+ border: var(--ml-badge-border-width) solid transparent;
17
36
  }
18
37
 
19
38
  .ml-badge--pill {
20
- border-radius: var(--ml-radius-full);
39
+ border-radius: var(--ml-badge-pill-radius);
21
40
  }
22
41
 
23
42
  .ml-badge__dot {
24
- width: 0.375rem;
25
- height: 0.375rem;
43
+ width: var(--ml-badge-dot-size);
44
+ height: var(--ml-badge-dot-size);
26
45
  border-radius: var(--ml-radius-full);
27
46
  background-color: currentColor;
28
47
  }
29
48
 
30
49
  .ml-badge--lg .ml-badge__dot {
31
- width: 0.5rem;
32
- height: 0.5rem;
50
+ width: var(--ml-badge-dot-size-lg);
51
+ height: var(--ml-badge-dot-size-lg);
33
52
  }
34
53
 
35
54
  .ml-badge--sm {
@@ -62,7 +81,7 @@ export const badgeStyles = () => css `
62
81
  .ml-badge--secondary {
63
82
  background-color: var(--ml-badge-default-bg);
64
83
  border-color: var(--ml-badge-default-border);
65
- color: var(--ml-color-text-secondary);
84
+ color: var(--ml-badge-secondary-color);
66
85
  }
67
86
 
68
87
  .ml-badge--success {
@@ -83,4 +102,10 @@ export const badgeStyles = () => css `
83
102
  color: var(--ml-badge-error-text);
84
103
  }
85
104
 
105
+ .ml-badge--custom {
106
+ background-color: var(--ml-badge-bg);
107
+ border-color: transparent;
108
+ color: var(--ml-badge-custom-color);
109
+ }
110
+
86
111
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"badge.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/badge.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,wBAAgB,aAAa,CAAC,CAAC,EAAE,cAAc,6CAe9C"}
1
+ {"version":3,"file":"badge.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge/badge.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,wBAAgB,aAAa,CAAC,CAAC,EAAE,cAAc,6CAmB9C"}
@@ -1,14 +1,17 @@
1
1
  import { html, classMap } from '@melodicdev/core';
2
2
  export function badgeTemplate(c) {
3
+ const customStyle = c.color ? `--ml-badge-bg: ${c.color}; --ml-badge-color: #fff` : '';
3
4
  return html `
4
5
  <span
5
6
  class=${classMap({
6
7
  'ml-badge': true,
7
- [`ml-badge--${c.variant}`]: true,
8
+ [`ml-badge--${c.variant}`]: !c.color,
9
+ 'ml-badge--custom': !!c.color,
8
10
  [`ml-badge--${c.size}`]: true,
9
11
  'ml-badge--dot': c.dot,
10
12
  'ml-badge--pill': c.pill
11
13
  })}
14
+ style=${customStyle}
12
15
  >
13
16
  ${c.dot ? html `<span class="ml-badge__dot"></span>` : ''}
14
17
  <slot></slot>
@@ -1 +1 @@
1
- {"version":3,"file":"badge-group.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge-group/badge-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzC,KAAK,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5C;;;;;;;;;;;GAWG;AACH,qBAMa,mBAAoB,YAAW,WAAW;IACtD,UAAU,EAAG,WAAW,CAAC;IAEzB,6BAA6B;IAC7B,KAAK,SAAM;IAEX,oBAAoB;IACpB,OAAO,EAAE,YAAY,CAAa;IAElC,mBAAmB;IACnB,KAAK,EAAE,eAAe,CAAU;IAEhC,WAAW;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC,kCAAkC;IAClC,aAAa,EAAE,aAAa,CAAa;IAEzC,kCAAkC;IAClC,IAAI,SAAM;CACV"}
1
+ {"version":3,"file":"badge-group.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge-group/badge-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzC,KAAK,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5C;;;;;;;;;;;GAWG;AACH,qBAMa,mBAAoB,YAAW,WAAW;IAC/C,UAAU,EAAG,WAAW,CAAC;IAEhC,6BAA6B;IACtB,KAAK,SAAM;IAElB,oBAAoB;IACb,OAAO,EAAE,YAAY,CAAa;IAEzC,mBAAmB;IACZ,KAAK,EAAE,eAAe,CAAU;IAEvC,WAAW;IACJ,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,kCAAkC;IAC3B,aAAa,EAAE,aAAa,CAAa;IAEhD,kCAAkC;IAC3B,IAAI,SAAM;CACjB"}
@@ -1 +1 @@
1
- {"version":3,"file":"badge-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge-group/badge-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAkI5B,CAAC"}
1
+ {"version":3,"file":"badge-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge-group/badge-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAiJ5B,CAAC"}
@@ -2,26 +2,41 @@ import { css } from '@melodicdev/core';
2
2
  export const badgeGroupStyles = () => css `
3
3
  :host {
4
4
  display: inline-block;
5
+
6
+ /* ── Badge Group: base ── */
7
+ --ml-badge-group-font: var(--ml-font-sans);
8
+ --ml-badge-group-font-weight: var(--ml-font-medium);
9
+ --ml-badge-group-gap: var(--ml-space-2);
10
+ --ml-badge-group-border-width: var(--ml-border);
11
+
12
+ /* ── Badge Group: shapes ── */
13
+ --ml-badge-group-pill-radius: var(--ml-radius-full);
14
+ --ml-badge-group-modern-radius: var(--ml-radius-md);
15
+
16
+ /* ── Badge Group: inner label ── */
17
+ --ml-badge-group-label-bg: var(--ml-color-surface);
18
+ --ml-badge-group-label-radius: var(--ml-radius-full);
19
+ --ml-badge-group-label-modern-radius: var(--ml-radius-sm);
5
20
  }
6
21
 
7
22
  .ml-badge-group {
8
23
  display: inline-flex;
9
24
  align-items: center;
10
- gap: var(--ml-space-2);
11
- font-family: var(--ml-font-sans);
12
- font-weight: var(--ml-font-medium);
25
+ gap: var(--ml-badge-group-gap);
26
+ font-family: var(--ml-badge-group-font);
27
+ font-weight: var(--ml-badge-group-font-weight);
13
28
  line-height: 1;
14
29
  white-space: nowrap;
15
- border: var(--ml-border) solid transparent;
30
+ border: var(--ml-badge-group-border-width) solid transparent;
16
31
  }
17
32
 
18
33
  /* Themes */
19
34
  .ml-badge-group--pill {
20
- border-radius: var(--ml-radius-full);
35
+ border-radius: var(--ml-badge-group-pill-radius);
21
36
  }
22
37
 
23
38
  .ml-badge-group--modern {
24
- border-radius: var(--ml-radius-md);
39
+ border-radius: var(--ml-badge-group-modern-radius);
25
40
  }
26
41
 
27
42
  /* Sizes */
@@ -77,43 +92,43 @@ export const badgeGroupStyles = () => css `
77
92
  align-items: center;
78
93
  padding: 2px var(--ml-space-2);
79
94
  font-size: var(--ml-text-xs);
80
- font-weight: var(--ml-font-medium);
95
+ font-weight: var(--ml-badge-group-font-weight);
81
96
  line-height: 1;
82
97
  white-space: nowrap;
83
- border-radius: var(--ml-radius-full);
98
+ border-radius: var(--ml-badge-group-label-radius);
84
99
  }
85
100
 
86
101
  .ml-badge-group--modern .ml-badge-group__label {
87
- border-radius: var(--ml-radius-sm);
102
+ border-radius: var(--ml-badge-group-label-modern-radius);
88
103
  }
89
104
 
90
105
  /* Inner label colors - slightly stronger than the outer bg */
91
106
  .ml-badge-group__label--default {
92
- background-color: var(--ml-color-surface);
107
+ background-color: var(--ml-badge-group-label-bg);
93
108
  color: var(--ml-badge-default-text);
94
109
  border: 1px solid var(--ml-badge-default-border);
95
110
  }
96
111
 
97
112
  .ml-badge-group__label--primary {
98
- background-color: var(--ml-color-surface);
113
+ background-color: var(--ml-badge-group-label-bg);
99
114
  color: var(--ml-badge-primary-text);
100
115
  border: 1px solid var(--ml-badge-primary-border);
101
116
  }
102
117
 
103
118
  .ml-badge-group__label--success {
104
- background-color: var(--ml-color-surface);
119
+ background-color: var(--ml-badge-group-label-bg);
105
120
  color: var(--ml-badge-success-text);
106
121
  border: 1px solid var(--ml-badge-success-border);
107
122
  }
108
123
 
109
124
  .ml-badge-group__label--warning {
110
- background-color: var(--ml-color-surface);
125
+ background-color: var(--ml-badge-group-label-bg);
111
126
  color: var(--ml-badge-warning-text);
112
127
  border: 1px solid var(--ml-badge-warning-border);
113
128
  }
114
129
 
115
130
  .ml-badge-group__label--error {
116
- background-color: var(--ml-color-surface);
131
+ background-color: var(--ml-badge-group-label-bg);
117
132
  color: var(--ml-badge-error-text);
118
133
  border: 1px solid var(--ml-badge-error-border);
119
134
  }
@@ -1 +1 @@
1
- {"version":3,"file":"calendar-view.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/calendar-view/calendar-view.component.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"calendar-view.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/calendar-view/calendar-view.component.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"calendar-view.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/calendar-view/calendar-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDA8vB9B,CAAC"}
1
+ {"version":3,"file":"calendar-view.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/calendar-view/calendar-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDAg0B9B,CAAC"}