tide-design-system 2.2.9 → 2.2.11

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 (100) hide show
  1. package/.storybook/main.ts +1 -0
  2. package/dist/IconArrowUp-75edebad.js +16 -0
  3. package/dist/IconArrowUp-c0afd43d.cjs +2 -0
  4. package/dist/IconAssignment-7171d067.cjs +2 -0
  5. package/dist/IconAssignment-b1d2ffa2.js +16 -0
  6. package/dist/IconClear-4db1f7d4.cjs +2 -0
  7. package/dist/IconClear-5cf9e8be.js +16 -0
  8. package/dist/IconFacebook-a83c1949.cjs +2 -0
  9. package/dist/IconFacebook-fb3f93e3.js +16 -0
  10. package/dist/IconInstagram-9f642623.cjs +2 -0
  11. package/dist/IconInstagram-db345e15.js +16 -0
  12. package/dist/IconLayout-6963184f.js +16 -0
  13. package/dist/IconLayout-d0d278c5.cjs +2 -0
  14. package/dist/IconLinkedIn-2fa1ac20.cjs +2 -0
  15. package/dist/IconLinkedIn-9c4740a6.js +16 -0
  16. package/dist/IconStarFilled-9f4d0d62.cjs +2 -0
  17. package/dist/IconStarFilled-b73e12dc.js +16 -0
  18. package/dist/IconStarHalf-0b663cd6.js +16 -0
  19. package/dist/IconStarHalf-65db4ff6.cjs +2 -0
  20. package/dist/css/dynamic-utilities.css +31 -30
  21. package/dist/css/realm/aero.css +8 -20
  22. package/dist/css/realm/atv.css +8 -20
  23. package/dist/css/realm/boatmart.css +7 -19
  24. package/dist/css/realm/cycle.css +8 -20
  25. package/dist/css/realm/equipment.css +7 -19
  26. package/dist/css/realm/pwc.css +7 -19
  27. package/dist/css/realm/rv.css +7 -19
  28. package/dist/css/realm/snow.css +7 -19
  29. package/dist/css/realm/truck.css +8 -20
  30. package/dist/css/utilities-lg.css +46 -1
  31. package/dist/css/utilities-md.css +46 -1
  32. package/dist/css/utilities-sm.css +46 -1
  33. package/dist/css/utilities-xl.css +46 -1
  34. package/dist/css/utilities.css +46 -1
  35. package/dist/css/variables.css +106 -14
  36. package/dist/style.css +1 -1
  37. package/dist/tide-design-system.cjs +2 -2
  38. package/dist/tide-design-system.esm.d.ts +117 -5
  39. package/dist/tide-design-system.esm.js +1403 -1174
  40. package/index.ts +8 -2
  41. package/package.json +1 -1
  42. package/src/assets/css/dynamic-utilities.css +31 -30
  43. package/src/assets/css/realm/aero.css +8 -20
  44. package/src/assets/css/realm/atv.css +8 -20
  45. package/src/assets/css/realm/boatmart.css +7 -19
  46. package/src/assets/css/realm/cycle.css +8 -20
  47. package/src/assets/css/realm/equipment.css +7 -19
  48. package/src/assets/css/realm/pwc.css +7 -19
  49. package/src/assets/css/realm/rv.css +7 -19
  50. package/src/assets/css/realm/snow.css +7 -19
  51. package/src/assets/css/realm/truck.css +8 -20
  52. package/src/assets/css/utilities-lg.css +46 -1
  53. package/src/assets/css/utilities-md.css +46 -1
  54. package/src/assets/css/utilities-sm.css +46 -1
  55. package/src/assets/css/utilities-xl.css +46 -1
  56. package/src/assets/css/utilities.css +46 -1
  57. package/src/assets/css/variables.css +106 -14
  58. package/src/assets/svg/icons/IconArrowUp.svg +3 -0
  59. package/src/assets/svg/icons/IconAssignment.svg +1 -3
  60. package/src/assets/svg/icons/IconClear.svg +1 -3
  61. package/src/assets/svg/icons/IconFacebook.svg +1 -3
  62. package/src/assets/svg/icons/IconInstagram.svg +1 -3
  63. package/src/assets/svg/icons/IconLayout.svg +1 -3
  64. package/src/assets/svg/icons/IconLinkedIn.svg +1 -3
  65. package/src/assets/svg/icons/IconStarFilled.svg +3 -0
  66. package/src/assets/svg/icons/IconStarHalf.svg +3 -0
  67. package/src/components/TideBadge.vue +7 -2
  68. package/src/components/TideBadgeVerifiedVehicle.vue +1 -1
  69. package/src/components/TideChipAction.vue +10 -3
  70. package/src/components/TideImage.vue +19 -2
  71. package/src/components/TideImageBackground.vue +7 -11
  72. package/src/components/TideModal.vue +2 -2
  73. package/src/components/TidePopover.vue +4 -1
  74. package/src/components/TideSheet.vue +166 -0
  75. package/src/stories/FoundationsBorder.stories.ts +31 -1
  76. package/src/stories/FoundationsColor.stories.ts +161 -13
  77. package/src/stories/FoundationsTypography.stories.ts +3 -3
  78. package/src/stories/TideBadge.stories.ts +51 -1
  79. package/src/stories/TideCarousel.stories.ts +1 -0
  80. package/src/stories/TideChipAction.stories.ts +28 -1
  81. package/src/stories/TideImage.stories.ts +22 -2
  82. package/src/stories/TideImageBackground.stories.ts +11 -3
  83. package/src/stories/TideSheet.stories.ts +142 -0
  84. package/src/types/Badge.ts +65 -0
  85. package/src/types/Image.ts +7 -0
  86. package/src/types/Storybook.ts +5 -0
  87. package/src/types/Styles.ts +46 -2
  88. package/tests/svg-icons.spec.ts +74 -0
  89. package/dist/IconAssignment-1983e555.js +0 -16
  90. package/dist/IconAssignment-915702cc.cjs +0 -2
  91. package/dist/IconClear-489c5a46.cjs +0 -2
  92. package/dist/IconClear-9419bf17.js +0 -16
  93. package/dist/IconFacebook-4658b533.js +0 -16
  94. package/dist/IconFacebook-9c43095a.cjs +0 -2
  95. package/dist/IconInstagram-43bb02ea.cjs +0 -2
  96. package/dist/IconInstagram-57188d29.js +0 -16
  97. package/dist/IconLayout-2865e0eb.js +0 -16
  98. package/dist/IconLayout-e663120e.cjs +0 -2
  99. package/dist/IconLinkedIn-088a3792.cjs +0 -2
  100. package/dist/IconLinkedIn-f29c217d.js +0 -16
@@ -57,6 +57,8 @@ declare type __VLS_NonUndefinedable_30<T> = T extends undefined ? never : T;
57
57
 
58
58
  declare type __VLS_NonUndefinedable_31<T> = T extends undefined ? never : T;
59
59
 
60
+ declare type __VLS_NonUndefinedable_32<T> = T extends undefined ? never : T;
61
+
60
62
  declare type __VLS_NonUndefinedable_4<T> = T extends undefined ? never : T;
61
63
 
62
64
  declare type __VLS_NonUndefinedable_5<T> = T extends undefined ? never : T;
@@ -410,6 +412,15 @@ declare type __VLS_TypePropsToOption_31<T> = {
410
412
  };
411
413
  };
412
414
 
415
+ declare type __VLS_TypePropsToOption_32<T> = {
416
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
417
+ type: PropType<__VLS_NonUndefinedable_32<T[K]>>;
418
+ } : {
419
+ type: PropType<T[K]>;
420
+ required: true;
421
+ };
422
+ };
423
+
413
424
  declare type __VLS_TypePropsToOption_4<T> = {
414
425
  [K in keyof T]-?: {} extends Pick<T, K> ? {
415
426
  type: PropType<__VLS_NonUndefinedable_4<T[K]>>;
@@ -686,6 +697,12 @@ declare type __VLS_WithTemplateSlots_8<T, S> = T & {
686
697
  };
687
698
  };
688
699
 
700
+ declare type __VLS_WithTemplateSlots_9<T, S> = T & {
701
+ new (): {
702
+ $slots: S;
703
+ };
704
+ };
705
+
689
706
  export declare const ALERT: {
690
707
  readonly ERROR: "error";
691
708
  readonly INFO: "info";
@@ -695,12 +712,27 @@ export declare const ALERT: {
695
712
 
696
713
  export declare type Alert = (typeof ALERT)[keyof typeof ALERT];
697
714
 
715
+ declare const BADGE_COLOR: {
716
+ readonly BLACK: "black";
717
+ readonly BLUE: "blue";
718
+ readonly GREEN: "green";
719
+ readonly LIME: "lime";
720
+ readonly ORANGE: "orange";
721
+ readonly PURPLE: "purple";
722
+ readonly RED: "red";
723
+ readonly SALMON: "salmon";
724
+ readonly TEAL: "teal";
725
+ readonly YELLOW: "yellow";
726
+ };
727
+
698
728
  export declare const BADGE_TRUSTED: {
699
729
  readonly YEARS_10: "10";
700
730
  readonly YEARS_15: "15";
701
731
  readonly YEARS_5: "5";
702
732
  };
703
733
 
734
+ declare type BadgeColor = (typeof BADGE_COLOR)[keyof typeof BADGE_COLOR];
735
+
704
736
  export declare type BadgeTrustedYears = (typeof BADGE_TRUSTED)[keyof typeof BADGE_TRUSTED];
705
737
 
706
738
  export declare type BooleanField = CheckboxField;
@@ -781,6 +813,15 @@ declare const CSS_2: {
781
813
  readonly INFO: "tide-bg-surface-info";
782
814
  readonly SUCCESS: "tide-bg-surface-success";
783
815
  readonly WARNING: "tide-bg-surface-warning";
816
+ readonly BLUE: "tide-bg-surface-blue";
817
+ readonly GREEN: "tide-bg-surface-green";
818
+ readonly LIME: "tide-bg-surface-lime";
819
+ readonly ORANGE: "tide-bg-surface-orange";
820
+ readonly PURPLE: "tide-bg-surface-purple";
821
+ readonly RED: "tide-bg-surface-red";
822
+ readonly SALMON: "tide-bg-surface-salmon";
823
+ readonly TEAL: "tide-bg-surface-teal";
824
+ readonly YELLOW: "tide-bg-surface-yellow";
784
825
  };
785
826
  };
786
827
  readonly INITIAL: "tide-bg-initial";
@@ -809,6 +850,15 @@ declare const CSS_2: {
809
850
  readonly INFO: "tide-border-info";
810
851
  readonly SUCCESS: "tide-border-success";
811
852
  readonly WARNING: "tide-border-warning";
853
+ readonly BLUE: "tide-border-blue";
854
+ readonly GREEN: "tide-border-green";
855
+ readonly LIME: "tide-border-lime";
856
+ readonly ORANGE: "tide-border-orange";
857
+ readonly PURPLE: "tide-border-purple";
858
+ readonly RED: "tide-border-red";
859
+ readonly SALMON: "tide-border-salmon";
860
+ readonly TEAL: "tide-border-teal";
861
+ readonly YELLOW: "tide-border-yellow";
812
862
  };
813
863
  readonly INITIAL: "tide-border-color-initial";
814
864
  readonly DEFAULT: "tide-border";
@@ -824,6 +874,10 @@ declare const CSS_2: {
824
874
  readonly ONE: "tide-radius-1";
825
875
  readonly FULL: "tide-radius-full";
826
876
  };
877
+ readonly STYLE: {
878
+ readonly DASHED: "tide-border-dashed";
879
+ readonly SOLID: "tide-border-solid";
880
+ };
827
881
  readonly BOTTOM: {
828
882
  readonly ZERO: "tide-border-bottom-0";
829
883
  readonly ONE: "tide-border-bottom-1";
@@ -913,6 +967,26 @@ declare const CSS_2: {
913
967
  readonly INFO: "tide-font-info";
914
968
  readonly SUCCESS: "tide-font-success";
915
969
  readonly WARNING: "tide-font-warning";
970
+ readonly BLUE: "tide-font-blue";
971
+ readonly GREEN: "tide-font-green";
972
+ readonly LIME: "tide-font-lime";
973
+ readonly ORANGE: "tide-font-orange";
974
+ readonly PURPLE: "tide-font-purple";
975
+ readonly RED: "tide-font-red";
976
+ readonly SALMON: "tide-font-salmon";
977
+ readonly TEAL: "tide-font-teal";
978
+ readonly YELLOW: "tide-font-yellow";
979
+ readonly PRIMARY: {
980
+ readonly BLUE: "tide-font-primary-blue";
981
+ readonly GREEN: "tide-font-primary-green";
982
+ readonly LIME: "tide-font-primary-lime";
983
+ readonly ORANGE: "tide-font-primary-orange";
984
+ readonly PURPLE: "tide-font-primary-purple";
985
+ readonly RED: "tide-font-primary-red";
986
+ readonly SALMON: "tide-font-primary-salmon";
987
+ readonly TEAL: "tide-font-primary-teal";
988
+ readonly YELLOW: "tide-font-primary-yellow";
989
+ };
916
990
  };
917
991
  readonly PRIMARY: "tide-font-on-primary";
918
992
  readonly SECONDARY: "tide-font-on-secondary";
@@ -1205,8 +1279,6 @@ declare const CSS_2: {
1205
1279
  };
1206
1280
  export { CSS_2 as CSS }
1207
1281
 
1208
- export declare type CssUtility = (typeof CSS_2)[keyof typeof CSS_2];
1209
-
1210
1282
  export declare type Detail = {
1211
1283
  label: string;
1212
1284
  value: string;
@@ -1495,6 +1567,14 @@ export declare const MEDIA_SLIDE_TYPES: {
1495
1567
 
1496
1568
  export declare type MediaSlideType = (typeof MEDIA_SLIDE_TYPES.IMAGE)[keyof typeof MEDIA_SLIDE_TYPES.IMAGE] | typeof MEDIA_SLIDE_TYPES.VIDEO | typeof MEDIA_SLIDE_TYPES.VR;
1497
1569
 
1570
+ export declare const OBJECT_FIT: {
1571
+ readonly CONTAIN: "contain";
1572
+ readonly COVER: "cover";
1573
+ readonly SCALE_DOWN: "scale-down";
1574
+ };
1575
+
1576
+ export declare type ObjectFit = (typeof OBJECT_FIT)[keyof typeof OBJECT_FIT];
1577
+
1498
1578
  export declare const ORIENTATION: {
1499
1579
  readonly HORIZONTAL: "horizontal";
1500
1580
  readonly VERTICAL: "vertical";
@@ -1540,7 +1620,8 @@ declare type Props_11 = {
1540
1620
  };
1541
1621
 
1542
1622
  declare type Props_12 = {
1543
- href: string;
1623
+ element: Element_2;
1624
+ href?: string;
1544
1625
  isNewTab?: boolean;
1545
1626
  label: string;
1546
1627
  };
@@ -1571,6 +1652,7 @@ declare type Props_18 = {
1571
1652
  alt: string;
1572
1653
  height?: string;
1573
1654
  isLazy?: boolean;
1655
+ objectFit?: ObjectFit;
1574
1656
  sources?: Source[];
1575
1657
  src?: string;
1576
1658
  width?: string;
@@ -1684,6 +1766,7 @@ declare type Props_29 = {
1684
1766
  };
1685
1767
 
1686
1768
  declare type Props_3 = {
1769
+ color?: BadgeColor;
1687
1770
  iconLeading?: Icon;
1688
1771
  isFloating?: boolean;
1689
1772
  label: string;
@@ -1695,6 +1778,11 @@ declare type Props_30 = {
1695
1778
  };
1696
1779
 
1697
1780
  declare type Props_31 = {
1781
+ isOpen: boolean;
1782
+ isBackButton?: boolean;
1783
+ };
1784
+
1785
+ declare type Props_32 = {
1698
1786
  disabled?: boolean;
1699
1787
  isActive?: boolean;
1700
1788
  };
@@ -1949,12 +2037,15 @@ isToast: boolean;
1949
2037
  }>;
1950
2038
 
1951
2039
  export declare const TideBadge: DefineComponent<__VLS_WithDefaults_3<__VLS_TypePropsToOption_3<Props_3>, {
2040
+ color: undefined;
1952
2041
  iconLeading: undefined;
1953
2042
  isFloating: boolean;
1954
2043
  }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_3<__VLS_TypePropsToOption_3<Props_3>, {
2044
+ color: undefined;
1955
2045
  iconLeading: undefined;
1956
2046
  isFloating: boolean;
1957
2047
  }>>>, {
2048
+ color: BadgeColor;
1958
2049
  iconLeading: Icon;
1959
2050
  isFloating: boolean;
1960
2051
  }, {}>;
@@ -1967,6 +2058,8 @@ years: "5";
1967
2058
  years: BadgeTrustedYears;
1968
2059
  }, {}>;
1969
2060
 
2061
+ export declare const TideBadgeVerifiedVehicle: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes< {}>>, {}, {}>;
2062
+
1970
2063
  export declare const TideBreadCrumbs: DefineComponent<__VLS_WithDefaults_5<__VLS_TypePropsToOption_5<Props_5>, {
1971
2064
  breadCrumbs: undefined;
1972
2065
  }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_5<__VLS_TypePropsToOption_5<Props_5>, {
@@ -2115,10 +2208,16 @@ subtitle: string;
2115
2208
  }>;
2116
2209
 
2117
2210
  export declare const TideChipAction: DefineComponent<__VLS_WithDefaults_12<__VLS_TypePropsToOption_12<Props_12>, {
2211
+ element: "a";
2212
+ href: undefined;
2118
2213
  isNewTab: boolean;
2119
2214
  }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_12<__VLS_TypePropsToOption_12<Props_12>, {
2215
+ element: "a";
2216
+ href: undefined;
2120
2217
  isNewTab: boolean;
2121
2218
  }>>>, {
2219
+ element: Element_2;
2220
+ href: string;
2122
2221
  isNewTab: boolean;
2123
2222
  }, {}>;
2124
2223
 
@@ -2161,6 +2260,7 @@ export declare const TideImage: DefineComponent<__VLS_WithDefaults_16<__VLS_Type
2161
2260
  alt: string;
2162
2261
  height: undefined;
2163
2262
  isLazy: boolean;
2263
+ objectFit: "cover";
2164
2264
  sources: () => never[];
2165
2265
  src: undefined;
2166
2266
  width: undefined;
@@ -2168,6 +2268,7 @@ width: undefined;
2168
2268
  alt: string;
2169
2269
  height: undefined;
2170
2270
  isLazy: boolean;
2271
+ objectFit: "cover";
2171
2272
  sources: () => never[];
2172
2273
  src: undefined;
2173
2274
  width: undefined;
@@ -2176,6 +2277,7 @@ height: string;
2176
2277
  width: string;
2177
2278
  alt: string;
2178
2279
  isLazy: boolean;
2280
+ objectFit: ObjectFit;
2179
2281
  sources: Source[];
2180
2282
  src: string;
2181
2283
  }, {}>;
@@ -2476,12 +2578,22 @@ heading: string;
2476
2578
  heading: string;
2477
2579
  }, {}>;
2478
2580
 
2479
- export declare const TideSwitch: DefineComponent<__VLS_WithDefaults_29<__VLS_TypePropsToOption_31<Props_31>, {
2581
+ export declare const TideSheet: __VLS_WithTemplateSlots_9<DefineComponent<__VLS_TypePropsToOption_31<Props_31>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
2582
+ back: () => void;
2583
+ close: () => void;
2584
+ }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToOption_31<Props_31>>> & {
2585
+ onClose?: (() => any) | undefined;
2586
+ onBack?: (() => any) | undefined;
2587
+ }, {}, {}>, {
2588
+ default?(_: {}): any;
2589
+ }>;
2590
+
2591
+ export declare const TideSwitch: DefineComponent<__VLS_WithDefaults_29<__VLS_TypePropsToOption_32<Props_32>, {
2480
2592
  disabled: boolean;
2481
2593
  isActive: boolean;
2482
2594
  }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
2483
2595
  change: (...args: any[]) => void;
2484
- }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_29<__VLS_TypePropsToOption_31<Props_31>, {
2596
+ }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_29<__VLS_TypePropsToOption_32<Props_32>, {
2485
2597
  disabled: boolean;
2486
2598
  isActive: boolean;
2487
2599
  }>>> & {