@bethinkpl/design-system 37.1.0 → 38.0.1

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 (61) hide show
  1. package/dist/design-system.css +1 -1
  2. package/dist/design-system.js +6422 -6340
  3. package/dist/design-system.js.map +1 -1
  4. package/dist/lib/js/components/Buttons/Button/Button.consts.d.ts +1 -0
  5. package/dist/lib/js/components/Buttons/Button/useMagicGradient.d.ts +5 -0
  6. package/dist/lib/js/components/Buttons/IconButton/IconButton.consts.d.ts +1 -0
  7. package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts +7 -2
  8. package/dist/lib/js/components/Cards/CardExpandable/CardExpandable.vue.d.ts +2 -0
  9. package/dist/lib/js/components/DatePickers/DateBox/DateBox.vue.d.ts +2 -0
  10. package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts +2 -0
  11. package/dist/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue.d.ts +2 -0
  12. package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts +7 -0
  13. package/dist/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue.d.ts +2 -0
  14. package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts +11 -0
  15. package/dist/lib/js/components/Form/RadioButton/RadioButton.vue.d.ts +2 -0
  16. package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts +8 -0
  17. package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts +8 -0
  18. package/dist/lib/js/components/Icons/Icon/Icon.consts.d.ts +2 -0
  19. package/dist/lib/js/components/Modal/Modal.vue.d.ts +2 -0
  20. package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts +9 -0
  21. package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts +9 -0
  22. package/dist/lib/js/components/Pagination/Pagination.vue.d.ts +8 -0
  23. package/dist/lib/js/components/ProgressBar/ProgressBar.vue.d.ts +2 -0
  24. package/dist/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue.d.ts +2 -0
  25. package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +2 -0
  26. package/dist/lib/js/components/RichList/RichListItem/RichListItem.vue.d.ts +2 -0
  27. package/dist/lib/js/components/Statuses/AccessStatus/AccessStatus.vue.d.ts +2 -0
  28. package/dist/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue.d.ts +2 -0
  29. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts +10 -0
  30. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts +10 -0
  31. package/dist/lib/js/components/Switch/Switch.vue.d.ts +2 -0
  32. package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts +2 -0
  33. package/dist/lib/js/components/Toast/Toast.vue.d.ts +1 -0
  34. package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts +2 -0
  35. package/dist/lib/js/icons/fontawesome.d.ts +2 -0
  36. package/lib/js/components/Buttons/Button/Button.consts.ts +1 -0
  37. package/lib/js/components/Buttons/Button/Button.spec.ts +35 -0
  38. package/lib/js/components/Buttons/Button/Button.vue +19 -0
  39. package/lib/js/components/Buttons/Button/useMagicGradient.spec.ts +47 -0
  40. package/lib/js/components/Buttons/Button/useMagicGradient.ts +50 -0
  41. package/lib/js/components/Buttons/IconButton/IconButton.consts.ts +1 -0
  42. package/lib/js/components/Buttons/IconButton/IconButton.spec.ts +107 -0
  43. package/lib/js/components/Buttons/IconButton/IconButton.stories.ts +5 -1
  44. package/lib/js/components/Buttons/IconButton/IconButton.vue +45 -5
  45. package/lib/js/components/DatePickers/DatePicker/DatePicker.vue +5 -0
  46. package/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue +5 -0
  47. package/lib/js/icons/fontawesome.ts +4 -0
  48. package/lib/styles/components/_buttons.scss +96 -1
  49. package/lib/styles/design-system.scss +9 -3
  50. package/lib/styles/mixins/_scrollbars.scss +6 -2
  51. package/lib/styles/settings/_gradients-variables.scss +34 -0
  52. package/lib/styles/settings/_gradients.scss +4 -0
  53. package/lib/styles/settings/colors/_magic-variables.scss +10 -0
  54. package/lib/styles/settings/colors/_magic.scss +9 -0
  55. package/lib/styles/settings/colors/_raw-bodywork-dark.scss +22 -0
  56. package/lib/styles/settings/colors/_raw-mc-dark.scss +22 -0
  57. package/lib/styles/settings/colors/_raw-wnl-dark.scss +22 -0
  58. package/lib/styles/settings/colors/_raw.json +1 -1
  59. package/lib/styles/settings/colors/_raw.scss +26 -0
  60. package/lib/styles/settings/colors/_tokens-variables-dark.scss +513 -0
  61. package/package.json +1 -1
@@ -239,6 +239,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
239
239
  readonly DANGER: "danger";
240
240
  readonly SUCCESS: "success";
241
241
  readonly INVERTED: "inverted";
242
+ readonly MAGIC: "magic";
242
243
  };
243
244
  BUTTON_ELEVATIONS: {
244
245
  readonly NONE: "none";
@@ -436,6 +437,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
436
437
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
437
438
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
438
439
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
440
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
439
441
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
440
442
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
441
443
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -476,6 +478,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
476
478
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
477
479
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
478
480
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
481
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
479
482
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
480
483
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
481
484
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -534,6 +537,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
534
537
  readonly INVERTED: "inverted";
535
538
  readonly WARNING: "warning";
536
539
  readonly INFO: "info";
540
+ readonly MAGIC: "magic";
537
541
  };
538
542
  ICON_SIZES: {
539
543
  XXX_SMALL: string;
@@ -856,6 +860,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
856
860
  validator(value: import('../../../utils/type.utils').Value<typeof import('../../..').ICON_BUTTON_STATES>): boolean;
857
861
  };
858
862
  }>, {
863
+ ICON_BUTTON_STATE_MAP: Record<import('../../..').IconButtonState, ButtonState>;
859
864
  isHovered: import('vue').Ref<boolean>;
860
865
  mouseOver: () => void;
861
866
  mouseLeave: () => void;
@@ -1048,6 +1053,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1048
1053
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
1049
1054
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1050
1055
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
1056
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
1051
1057
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
1052
1058
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
1053
1059
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1088,6 +1094,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1088
1094
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
1089
1095
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
1090
1096
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
1097
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
1091
1098
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1092
1099
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
1093
1100
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1179,6 +1186,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1179
1186
  readonly INVERTED: "inverted";
1180
1187
  readonly WARNING: "warning";
1181
1188
  readonly INFO: "info";
1189
+ readonly MAGIC: "magic";
1182
1190
  }>;
1183
1191
  BUTTON_COLORS: Readonly<{
1184
1192
  readonly PRIMARY: "primary";
@@ -1186,6 +1194,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1186
1194
  readonly DANGER: "danger";
1187
1195
  readonly SUCCESS: "success";
1188
1196
  readonly INVERTED: "inverted";
1197
+ readonly MAGIC: "magic";
1189
1198
  }>;
1190
1199
  }, {
1191
1200
  iconSize(): string;
@@ -52,6 +52,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
52
52
  readonly INVERTED: "inverted";
53
53
  readonly WARNING: "warning";
54
54
  readonly INFO: "info";
55
+ readonly MAGIC: "magic";
55
56
  }>;
56
57
  ICON_BUTTON_STATES: Readonly<{
57
58
  readonly DEFAULT: "default";
@@ -246,6 +247,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
246
247
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
247
248
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
248
249
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
250
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
249
251
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
250
252
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
251
253
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -286,6 +288,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
286
288
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
287
289
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
288
290
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
291
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
289
292
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
290
293
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
291
294
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -423,6 +426,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
423
426
  validator(value: import('../../utils/type.utils').Value<typeof ICON_BUTTON_STATES>): boolean;
424
427
  };
425
428
  }>, {
429
+ ICON_BUTTON_STATE_MAP: Record<import('../Buttons/IconButton').IconButtonState, import('../..').ButtonState>;
426
430
  isHovered: import('vue').Ref<boolean>;
427
431
  mouseOver: () => void;
428
432
  mouseLeave: () => void;
@@ -615,6 +619,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
615
619
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
616
620
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
617
621
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
622
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
618
623
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
619
624
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
620
625
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -655,6 +660,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
655
660
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
656
661
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
657
662
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
663
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
658
664
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
659
665
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
660
666
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -746,6 +752,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
746
752
  readonly INVERTED: "inverted";
747
753
  readonly WARNING: "warning";
748
754
  readonly INFO: "info";
755
+ readonly MAGIC: "magic";
749
756
  }>;
750
757
  BUTTON_COLORS: Readonly<{
751
758
  readonly PRIMARY: "primary";
@@ -753,6 +760,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
753
760
  readonly DANGER: "danger";
754
761
  readonly SUCCESS: "success";
755
762
  readonly INVERTED: "inverted";
763
+ readonly MAGIC: "magic";
756
764
  }>;
757
765
  }, {
758
766
  iconSize(): string;
@@ -278,6 +278,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
278
278
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
279
279
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
280
280
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
281
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
281
282
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
282
283
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
283
284
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -318,6 +319,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
318
319
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
319
320
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
320
321
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
322
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
321
323
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
322
324
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
323
325
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -209,6 +209,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
209
209
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
210
210
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
211
211
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
212
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
212
213
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
213
214
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
214
215
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -249,6 +250,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
249
250
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
250
251
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
251
252
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
253
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
252
254
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
253
255
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
254
256
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -741,6 +741,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
741
741
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
742
742
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
743
743
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
744
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
744
745
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
745
746
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
746
747
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -781,6 +782,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
781
782
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
782
783
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
783
784
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
785
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
784
786
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
785
787
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
786
788
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -275,6 +275,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
275
275
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
276
276
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
277
277
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
278
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
278
279
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
279
280
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
280
281
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -315,6 +316,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
315
316
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
316
317
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
317
318
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
319
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
318
320
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
319
321
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
320
322
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -192,6 +192,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
192
192
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
193
193
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
194
194
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
195
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
195
196
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
196
197
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
197
198
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -232,6 +233,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
232
233
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
233
234
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
234
235
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
236
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
235
237
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
236
238
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
237
239
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -192,6 +192,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
192
192
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
193
193
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
194
194
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
195
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
195
196
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
196
197
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
197
198
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -232,6 +233,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
232
233
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
233
234
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
234
235
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
236
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
235
237
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
236
238
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
237
239
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -209,6 +209,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
209
209
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
210
210
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
211
211
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
212
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
212
213
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
213
214
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
214
215
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -249,6 +250,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
249
250
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
250
251
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
251
252
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
253
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
252
254
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
253
255
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
254
256
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -307,6 +309,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
307
309
  readonly INVERTED: "inverted";
308
310
  readonly WARNING: "warning";
309
311
  readonly INFO: "info";
312
+ readonly MAGIC: "magic";
310
313
  }>;
311
314
  ICON_SIZES: Readonly<{
312
315
  XXX_SMALL: string;
@@ -687,6 +690,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
687
690
  validator(value: import('../../../utils/type.utils').Value<typeof import('../../Buttons/IconButton').ICON_BUTTON_STATES>): boolean;
688
691
  };
689
692
  }>, {
693
+ ICON_BUTTON_STATE_MAP: Record<import('../../Buttons/IconButton').IconButtonState, import('../../Buttons/Button').ButtonState>;
690
694
  isHovered: import('vue').Ref<boolean>;
691
695
  mouseOver: () => void;
692
696
  mouseLeave: () => void;
@@ -879,6 +883,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
879
883
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
880
884
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
881
885
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
886
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
882
887
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
883
888
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
884
889
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -919,6 +924,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
919
924
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
920
925
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
921
926
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
927
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
922
928
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
923
929
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
924
930
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1010,6 +1016,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1010
1016
  readonly INVERTED: "inverted";
1011
1017
  readonly WARNING: "warning";
1012
1018
  readonly INFO: "info";
1019
+ readonly MAGIC: "magic";
1013
1020
  }>;
1014
1021
  BUTTON_COLORS: Readonly<{
1015
1022
  readonly PRIMARY: "primary";
@@ -1017,6 +1024,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1017
1024
  readonly DANGER: "danger";
1018
1025
  readonly SUCCESS: "success";
1019
1026
  readonly INVERTED: "inverted";
1027
+ readonly MAGIC: "magic";
1020
1028
  }>;
1021
1029
  }, {
1022
1030
  iconSize(): string;
@@ -1440,6 +1448,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1440
1448
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
1441
1449
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1442
1450
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
1451
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
1443
1452
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
1444
1453
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
1445
1454
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1480,6 +1489,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1480
1489
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
1481
1490
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
1482
1491
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
1492
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
1483
1493
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1484
1494
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
1485
1495
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -228,6 +228,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
228
228
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
229
229
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
230
230
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
231
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
231
232
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
232
233
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
233
234
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -268,6 +269,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
268
269
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
269
270
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
270
271
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
272
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
271
273
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
272
274
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
273
275
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -336,6 +338,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
336
338
  readonly INVERTED: "inverted";
337
339
  readonly WARNING: "warning";
338
340
  readonly INFO: "info";
341
+ readonly MAGIC: "magic";
339
342
  }>;
340
343
  BUTTON_TYPES: Readonly<{
341
344
  readonly FILLED: "filled";
@@ -659,6 +662,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
659
662
  validator(value: import('../../../utils/type.utils').Value<typeof import('../../Buttons/IconButton').ICON_BUTTON_STATES>): boolean;
660
663
  };
661
664
  }>, {
665
+ ICON_BUTTON_STATE_MAP: Record<import('../../Buttons/IconButton').IconButtonState, import('../../Buttons/Button').ButtonState>;
662
666
  isHovered: import('vue').Ref<boolean>;
663
667
  mouseOver: () => void;
664
668
  mouseLeave: () => void;
@@ -851,6 +855,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
851
855
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
852
856
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
853
857
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
858
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
854
859
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
855
860
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
856
861
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -891,6 +896,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
891
896
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
892
897
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
893
898
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
899
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
894
900
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
895
901
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
896
902
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -982,6 +988,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
982
988
  readonly INVERTED: "inverted";
983
989
  readonly WARNING: "warning";
984
990
  readonly INFO: "info";
991
+ readonly MAGIC: "magic";
985
992
  }>;
986
993
  BUTTON_COLORS: Readonly<{
987
994
  readonly PRIMARY: "primary";
@@ -989,6 +996,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
989
996
  readonly DANGER: "danger";
990
997
  readonly SUCCESS: "success";
991
998
  readonly INVERTED: "inverted";
999
+ readonly MAGIC: "magic";
992
1000
  }>;
993
1001
  }, {
994
1002
  iconSize(): string;
@@ -1585,6 +1593,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1585
1593
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
1586
1594
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1587
1595
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
1596
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
1588
1597
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
1589
1598
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
1590
1599
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1625,6 +1634,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1625
1634
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
1626
1635
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
1627
1636
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
1637
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
1628
1638
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1629
1639
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
1630
1640
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -228,6 +228,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
228
228
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
229
229
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
230
230
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
231
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
231
232
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
232
233
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
233
234
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -268,6 +269,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
268
269
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
269
270
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
270
271
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
272
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
271
273
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
272
274
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
273
275
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -188,6 +188,7 @@ export declare const data: () => {
188
188
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
189
189
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
190
190
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
191
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
191
192
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
192
193
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
193
194
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -228,6 +229,7 @@ export declare const data: () => {
228
229
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
229
230
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
230
231
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
232
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
231
233
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
232
234
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
233
235
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -55,6 +55,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
55
55
  readonly DANGER: "danger";
56
56
  readonly SUCCESS: "success";
57
57
  readonly INVERTED: "inverted";
58
+ readonly MAGIC: "magic";
58
59
  }>;
59
60
  BUTTON_RADIUSES: Readonly<{
60
61
  readonly CAPSULE: "capsule";
@@ -244,6 +244,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
244
244
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
245
245
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
246
246
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
247
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
247
248
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
248
249
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
249
250
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -284,6 +285,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
284
285
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
285
286
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
286
287
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
288
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
287
289
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
288
290
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
289
291
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -173,6 +173,7 @@ export declare const FONTAWESOME_ICONS: {
173
173
  readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
174
174
  readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
175
175
  readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
176
+ readonly FA_MARKER: import('@fortawesome/fontawesome-common-types').IconDefinition;
176
177
  readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
177
178
  readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
178
179
  readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -213,6 +214,7 @@ export declare const FONTAWESOME_ICONS: {
213
214
  readonly FA_SHIELD_HALVED: import('@fortawesome/fontawesome-common-types').IconDefinition;
214
215
  readonly FA_SIDEBAR_FLIP: import('@fortawesome/fontawesome-common-types').IconDefinition;
215
216
  readonly FA_SIGNAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
217
+ readonly FA_SIGN_POST: import('@fortawesome/fontawesome-common-types').IconDefinition;
216
218
  readonly FA_SITEMAP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
217
219
  readonly FA_SITEMAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
218
220
  readonly FA_SLIDERS: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -22,6 +22,7 @@ export const BUTTON_COLORS = {
22
22
  DANGER: 'danger',
23
23
  SUCCESS: 'success',
24
24
  INVERTED: 'inverted',
25
+ MAGIC: 'magic',
25
26
  } as const;
26
27
 
27
28
  export type ButtonColor = Value<typeof BUTTON_COLORS>;
@@ -9,6 +9,7 @@ import {
9
9
  BUTTON_STATES,
10
10
  BUTTON_TYPES,
11
11
  } from './Button.consts';
12
+ import { GRADIENT_MAGIC_ICON_DISABLED_ID, GRADIENT_MAGIC_ICON_ID } from './useMagicGradient';
12
13
  import Icon, { ICONS } from '../../Icons/Icon';
13
14
 
14
15
  describe('Button', () => {
@@ -35,6 +36,12 @@ describe('Button', () => {
35
36
  [{ props: { color: BUTTON_COLORS.PRIMARY }, expectedClass: '-ds-color-primary' }],
36
37
  [{ props: { color: BUTTON_COLORS.DANGER }, expectedClass: '-ds-color-danger' }],
37
38
  [{ props: { color: BUTTON_COLORS.SUCCESS }, expectedClass: '-ds-color-success' }],
39
+ [
40
+ {
41
+ props: { color: BUTTON_COLORS.MAGIC, type: BUTTON_TYPES.OUTLINED },
42
+ expectedClass: '-ds-color-magic',
43
+ },
44
+ ],
38
45
  [{ props: { radius: BUTTON_RADIUSES.ROUNDED }, expectedClass: '-ds-rounded' }],
39
46
  [{ props: { state: BUTTON_STATES.HOVERED }, expectedClass: '-ds-hovered' }],
40
47
  [{ props: { state: BUTTON_STATES.FOCUSED }, expectedClass: '-ds-focused' }],
@@ -45,6 +52,34 @@ describe('Button', () => {
45
52
  expect(outlinedButton.classes()).toContain(expectedClass);
46
53
  });
47
54
 
55
+ it('magic button fills with the magic gradient', () => {
56
+ const component = createComponent({ color: BUTTON_COLORS.MAGIC });
57
+
58
+ expect(component.element.style.getPropertyValue('--ds-magic-fill')).toBe(
59
+ `url(#${GRADIENT_MAGIC_ICON_ID})`,
60
+ );
61
+ });
62
+
63
+ it('disabled magic button fills with the disabled magic gradient', () => {
64
+ const component = createComponent({
65
+ color: BUTTON_COLORS.MAGIC,
66
+ state: BUTTON_STATES.DISABLED,
67
+ });
68
+
69
+ expect(component.element.style.getPropertyValue('--ds-magic-fill')).toBe(
70
+ `url(#${GRADIENT_MAGIC_ICON_DISABLED_ID})`,
71
+ );
72
+ });
73
+
74
+ it('non-magic button has no magic fill style', () => {
75
+ const component = createComponent({
76
+ color: BUTTON_COLORS.PRIMARY,
77
+ state: BUTTON_STATES.DISABLED,
78
+ });
79
+
80
+ expect(component.element.style.getPropertyValue('--ds-magic-fill')).toBe('');
81
+ });
82
+
48
83
  it('loading should have correct text container and loading icon', () => {
49
84
  const component = createComponent({ state: BUTTON_STATES.LOADING });
50
85
 
@@ -21,6 +21,17 @@
21
21
  '-ds-elevation-x-small': elevation === BUTTON_ELEVATIONS.X_SMALL,
22
22
  '-ds-elevation-small': elevation === BUTTON_ELEVATIONS.SMALL,
23
23
  }"
24
+ :style="
25
+ color === BUTTON_COLORS.MAGIC
26
+ ? {
27
+ '--ds-magic-fill': `url(#${
28
+ state === BUTTON_STATES.DISABLED
29
+ ? GRADIENT_MAGIC_ICON_DISABLED_ID
30
+ : GRADIENT_MAGIC_ICON_ID
31
+ })`,
32
+ }
33
+ : undefined
34
+ "
24
35
  >
25
36
  <span class="ds-button__content">
26
37
  <wnl-icon
@@ -65,6 +76,11 @@ import {
65
76
  ButtonElevation,
66
77
  } from './Button.consts';
67
78
  import { computed } from 'vue';
79
+ import {
80
+ GRADIENT_MAGIC_ICON_DISABLED_ID,
81
+ GRADIENT_MAGIC_ICON_ID,
82
+ useMagicGradient,
83
+ } from './useMagicGradient';
68
84
 
69
85
  const {
70
86
  size = BUTTON_SIZES.MEDIUM,
@@ -100,6 +116,9 @@ const colorClassName = computed((): string => {
100
116
  return `-ds-color-${color}`;
101
117
  });
102
118
 
119
+ // The loading spinner's icon fills via `url(#MAGIC_GRADIENT_ID)`; ensure that def exists.
120
+ useMagicGradient(() => color === BUTTON_COLORS.MAGIC);
121
+
103
122
  const loadingIconSize = computed((): IconSize => {
104
123
  if (size === BUTTON_SIZES.LARGE) {
105
124
  return ICON_SIZES.MEDIUM;
@@ -0,0 +1,47 @@
1
+ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
2
+ import { ref } from 'vue';
3
+
4
+ import { GRADIENT_MAGIC_ICON_ID, useMagicGradient } from './useMagicGradient';
5
+
6
+ describe('useMagicGradient', () => {
7
+ beforeEach(() => {
8
+ document.getElementById(GRADIENT_MAGIC_ICON_ID)?.remove();
9
+ });
10
+ afterEach(() => {
11
+ document.getElementById(GRADIENT_MAGIC_ICON_ID)?.remove();
12
+ });
13
+
14
+ it('injects a single linearGradient with the hardcoded id when enabled', () => {
15
+ useMagicGradient(true);
16
+
17
+ const gradient = document.getElementById(GRADIENT_MAGIC_ICON_ID);
18
+ expect(gradient).not.toBeNull();
19
+ expect(gradient?.tagName.toLowerCase()).toBe('lineargradient');
20
+ });
21
+
22
+ it('does not inject the def when disabled', () => {
23
+ useMagicGradient(false);
24
+
25
+ expect(document.getElementById(GRADIENT_MAGIC_ICON_ID)).toBeNull();
26
+ });
27
+
28
+ it('injects the def when the reactive source becomes enabled', async () => {
29
+ const enabled = ref(false);
30
+ useMagicGradient(enabled);
31
+
32
+ expect(document.getElementById(GRADIENT_MAGIC_ICON_ID)).toBeNull();
33
+
34
+ enabled.value = true;
35
+ await Promise.resolve();
36
+
37
+ expect(document.getElementById(GRADIENT_MAGIC_ICON_ID)).not.toBeNull();
38
+ });
39
+
40
+ it('is idempotent — multiple enabled consumers leave exactly one def', () => {
41
+ useMagicGradient(true);
42
+ useMagicGradient(() => true);
43
+ useMagicGradient(ref(true));
44
+
45
+ expect(document.querySelectorAll(`#${GRADIENT_MAGIC_ICON_ID}`)).toHaveLength(1);
46
+ });
47
+ });