@milestone-sys/web-design-system 3.6.2 → 3.6.3

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 (1102) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +7 -7
  3. package/assets.html +13 -0
  4. package/colors.list.js +65 -65
  5. package/components/detail/accordion-checkbox-large.html +1051 -0
  6. package/components/detail/accordion-checkbox-medium-dark.html +1051 -0
  7. package/components/detail/accordion-checkbox-medium-disabled.html +1051 -0
  8. package/components/detail/accordion-checkbox-medium-filtered-list-items.html +1055 -0
  9. package/components/detail/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +1077 -0
  10. package/components/detail/accordion-checkbox-medium-icon-left-floating.html +1077 -0
  11. package/components/detail/accordion-checkbox-medium-icon-left.html +1065 -0
  12. package/components/detail/accordion-checkbox-medium.html +1060 -0
  13. package/components/detail/accordion-checkbox-overview.html +1051 -0
  14. package/components/detail/accordion-input.html +949 -0
  15. package/components/detail/accordion-label.html +949 -0
  16. package/components/detail/accordion-modifier-icon-floating.html +949 -0
  17. package/components/detail/accordion-modifier-icon-left.html +949 -0
  18. package/components/detail/accordion-radio.html +1053 -0
  19. package/components/detail/alert-dark-theme-default.html +1009 -0
  20. package/components/detail/alert-dark-theme-solution.html +1009 -0
  21. package/components/detail/alert-default-extra-attention.html +1007 -0
  22. package/components/detail/alert-default-generic.html +1006 -0
  23. package/components/detail/alert-default-solution-with-badge-and-ready-state.html +1018 -0
  24. package/components/detail/alert-default-solution.html +1010 -0
  25. package/components/detail/alert-default-without-image.html +1004 -0
  26. package/components/detail/alert-default.html +1006 -0
  27. package/components/detail/alert-hidden-after-refresh-checkbox.html +1016 -0
  28. package/components/detail/alert-hidden-after-refresh.html +1005 -0
  29. package/components/detail/alert-layouts.html +1560 -0
  30. package/components/detail/alert-visible-after-refresh.html +1005 -0
  31. package/components/detail/background-colors.html +1287 -0
  32. package/components/detail/basic-card-default-dark.html +1014 -0
  33. package/components/detail/basic-card-default-without-caption-with-header-icon.html +1005 -0
  34. package/components/detail/basic-card-default-without-caption-with-header-image.html +1001 -0
  35. package/components/detail/basic-card-default-without-caption.html +997 -0
  36. package/components/detail/basic-card-default.html +1014 -0
  37. package/components/detail/basic-card-grouping-center.html +1014 -0
  38. package/components/detail/basic-card-grouping-left-with-flat-icon.html +1024 -0
  39. package/components/detail/basic-card-grouping-left.html +1014 -0
  40. package/components/detail/basic-card-grouping.html +1122 -0
  41. package/components/detail/basic-card-layouts.html +1886 -0
  42. package/components/detail/button-danger-dark-icon.html +999 -0
  43. package/components/detail/button-danger-dark.html +975 -0
  44. package/components/detail/button-danger-default.html +975 -0
  45. package/components/detail/button-danger-icon.html +999 -0
  46. package/components/detail/button-disabled-dark-icon.html +999 -0
  47. package/components/detail/button-disabled-dark.html +975 -0
  48. package/components/detail/button-floating-aligned-column.html +1005 -0
  49. package/components/detail/button-floating-aligned-right.html +1005 -0
  50. package/components/detail/button-floating-dark-aligned-column.html +1005 -0
  51. package/components/detail/button-floating-dark-aligned-right.html +1005 -0
  52. package/components/detail/button-floating-dark-default.html +1005 -0
  53. package/components/detail/button-floating-dark-disabled.html +1005 -0
  54. package/components/detail/button-floating-dark-secondary-aligned-column.html +1005 -0
  55. package/components/detail/button-floating-dark-secondary-aligned-right.html +1005 -0
  56. package/components/detail/button-floating-dark-secondary.html +1005 -0
  57. package/components/detail/button-floating-default.html +1005 -0
  58. package/components/detail/button-floating-disabled.html +1005 -0
  59. package/components/detail/button-floating-overview.html +969 -0
  60. package/components/detail/button-floating-positioning.html +1007 -0
  61. package/components/detail/button-floating-secondary-aligned-column.html +1005 -0
  62. package/components/detail/button-floating-secondary-aligned-right.html +1005 -0
  63. package/components/detail/button-floating-secondary.html +1005 -0
  64. package/components/detail/button-floating-states.html +987 -0
  65. package/components/detail/button-gray-default.html +975 -0
  66. package/components/detail/button-gray-icon.html +999 -0
  67. package/components/detail/button-group-center-alignment.html +965 -0
  68. package/components/detail/button-group-left-alignment.html +965 -0
  69. package/components/detail/button-group-right-alignment.html +965 -0
  70. package/components/detail/button-overview-direction.html +983 -0
  71. package/components/detail/button-overview-global-definition.html +975 -0
  72. package/components/detail/button-overview-sizes.html +987 -0
  73. package/components/detail/button-overview-states.html +1019 -0
  74. package/components/detail/button-primary-dark-icon.html +999 -0
  75. package/components/detail/button-primary-dark.html +975 -0
  76. package/components/detail/button-primary-default.html +975 -0
  77. package/components/detail/button-primary-icon.html +999 -0
  78. package/components/detail/button-secondary-dark-icon.html +999 -0
  79. package/components/detail/button-secondary-dark.html +975 -0
  80. package/components/detail/button-secondary-default.html +975 -0
  81. package/components/detail/button-secondary-icon.html +999 -0
  82. package/components/detail/button-tertiary-default.html +975 -0
  83. package/components/detail/button-tertiary-icon.html +999 -0
  84. package/components/detail/buttons-overview.html +2069 -0
  85. package/components/detail/category-dark.html +1022 -0
  86. package/components/detail/category-disabled-dark.html +1014 -0
  87. package/components/detail/category-disabled.html +1014 -0
  88. package/components/detail/category-full-row.html +1178 -0
  89. package/components/detail/category-overview-dark-states.html +1058 -0
  90. package/components/detail/category-overview-dark.html +1022 -0
  91. package/components/detail/category-overview-sizes.html +1030 -0
  92. package/components/detail/category-overview-states.html +1058 -0
  93. package/components/detail/category-small-dark.html +1022 -0
  94. package/components/detail/category-small-disabled-dark.html +1014 -0
  95. package/components/detail/category-small-disabled.html +1014 -0
  96. package/components/detail/category-small-full-row.html +1250 -0
  97. package/components/detail/category-small.html +1022 -0
  98. package/components/detail/category.html +1022 -0
  99. package/components/detail/checkbox-checked.html +968 -0
  100. package/components/detail/checkbox-disabled.html +968 -0
  101. package/components/detail/checkbox-focus.html +968 -0
  102. package/components/detail/checkbox-global-definition.html +968 -0
  103. package/components/detail/checkbox-hover.html +968 -0
  104. package/components/detail/checkbox-inline.html +974 -0
  105. package/components/detail/checkbox-readonly.html +969 -0
  106. package/components/detail/colors-and-shadows.html +1403 -0
  107. package/components/detail/contact-cards.html +2151 -0
  108. package/components/detail/contact-content.html +1017 -0
  109. package/components/detail/contact-overview.html +1147 -0
  110. package/components/detail/contact-sizes.html +1108 -0
  111. package/components/detail/contact-small.html +1038 -0
  112. package/components/detail/contact-without-image-small.html +1028 -0
  113. package/components/detail/contact-without-image.html +1028 -0
  114. package/components/detail/contact.html +1038 -0
  115. package/components/detail/divider-dark-blue.html +949 -0
  116. package/components/detail/divider-default.html +949 -0
  117. package/components/detail/divider-gray-5.html +949 -0
  118. package/components/detail/divider-white-50.html +949 -0
  119. package/components/detail/divider-white.html +949 -0
  120. package/components/detail/divider-yellow.html +949 -0
  121. package/components/detail/generic-card-aspect-16by9.html +1001 -0
  122. package/components/detail/generic-card-aspect-2by1-small.html +1116 -0
  123. package/components/detail/generic-card-aspect-2by1.html +1110 -0
  124. package/components/detail/generic-card-aspect.html +1050 -0
  125. package/components/detail/generic-card-default-small-dark-theme.html +1000 -0
  126. package/components/detail/generic-card-default-small-svg.html +1000 -0
  127. package/components/detail/generic-card-default-small.html +999 -0
  128. package/components/detail/generic-card-default-svg-dark.html +999 -0
  129. package/components/detail/generic-card-default-svg.html +998 -0
  130. package/components/detail/generic-card-default.html +999 -0
  131. package/components/detail/generic-card-media-dark-theme.html +1031 -0
  132. package/components/detail/generic-card-media-floating-icon.html +1042 -0
  133. package/components/detail/generic-card-media-small.html +1027 -0
  134. package/components/detail/generic-card-media.html +1027 -0
  135. package/components/detail/generic-card-overview.html +1062 -0
  136. package/components/detail/generic-flat-icons.html +951 -0
  137. package/components/detail/generic-rich-icons.html +951 -0
  138. package/components/detail/global-colors-alternative.html +1301 -0
  139. package/components/detail/global-colors-gradients.html +1305 -0
  140. package/components/detail/global-colors-gray-white-black.html +1304 -0
  141. package/components/detail/global-colors-primary.html +1295 -0
  142. package/components/detail/global-colors-shadows.html +1295 -0
  143. package/components/detail/global-colors-transparency.html +1306 -0
  144. package/components/detail/global-margins.html +995 -0
  145. package/components/detail/global-paddings.html +951 -0
  146. package/components/detail/gradient-background-colors.html +1517 -0
  147. package/components/detail/input-disabled.html +1003 -0
  148. package/components/detail/input-field.html +1226 -0
  149. package/components/detail/input-focus.html +1003 -0
  150. package/components/detail/input-hover.html +1003 -0
  151. package/components/detail/input-readonly.html +1003 -0
  152. package/components/detail/input-sizes.html +1007 -0
  153. package/components/detail/input-state-error.html +1003 -0
  154. package/components/detail/input-state-success.html +1003 -0
  155. package/components/detail/input.html +981 -0
  156. package/components/detail/large-section-spacing-definitions.html +1011 -0
  157. package/components/detail/large-section-spacing.html +977 -0
  158. package/components/detail/links.html +977 -0
  159. package/components/detail/lists.html +973 -0
  160. package/components/detail/marketplace-flat-icons.html +951 -0
  161. package/components/detail/marketplace-rich-icons.html +951 -0
  162. package/components/detail/matching-content-height-card.html +1599 -0
  163. package/components/detail/medium-section-spacing-definitions.html +1011 -0
  164. package/components/detail/medium-section-spacing.html +977 -0
  165. package/components/detail/modal-on-click.html +1017 -0
  166. package/components/detail/modal-on-load-demo.html +1012 -0
  167. package/components/detail/modal-on-load.html +1012 -0
  168. package/components/detail/msds-text-alt-blue-1.html +1287 -0
  169. package/components/detail/msds-text-alt-blue-2.html +1287 -0
  170. package/components/detail/msds-text-alt-blue-3.html +1287 -0
  171. package/components/detail/msds-text-alt-yellow-1.html +1287 -0
  172. package/components/detail/msds-text-alt-yellow-2.html +1287 -0
  173. package/components/detail/msds-text-black.html +1287 -0
  174. package/components/detail/msds-text-clear-blue.html +1287 -0
  175. package/components/detail/msds-text-confirm-green.html +1287 -0
  176. package/components/detail/msds-text-danger-red-1.html +1287 -0
  177. package/components/detail/msds-text-danger-red-2.html +1287 -0
  178. package/components/detail/msds-text-dark-blue.html +1287 -0
  179. package/components/detail/msds-text-gray-1.html +1287 -0
  180. package/components/detail/msds-text-gray-10.html +1287 -0
  181. package/components/detail/msds-text-gray-2.html +1287 -0
  182. package/components/detail/msds-text-gray-3.html +1287 -0
  183. package/components/detail/msds-text-gray-4.html +1287 -0
  184. package/components/detail/msds-text-gray-5.html +1287 -0
  185. package/components/detail/msds-text-gray-6.html +1287 -0
  186. package/components/detail/msds-text-gray-7.html +1287 -0
  187. package/components/detail/msds-text-gray-8.html +1287 -0
  188. package/components/detail/msds-text-gray-9.html +1287 -0
  189. package/components/detail/msds-text-sand.html +1287 -0
  190. package/components/detail/msds-text-white.html +1287 -0
  191. package/components/detail/msds-text-yellow.html +1287 -0
  192. package/components/detail/popover-bottom.html +1018 -0
  193. package/components/detail/popover-global-definition.html +1018 -0
  194. package/components/detail/popover-left.html +1018 -0
  195. package/components/detail/popover-top.html +1018 -0
  196. package/components/detail/preview-dark.html +1014 -0
  197. package/components/detail/preview.html +1001 -0
  198. package/components/detail/progress-bar-dark-theme.html +997 -0
  199. package/components/detail/progress-bar-features.html +1023 -0
  200. package/components/detail/progress-bar-global-definition.html +973 -0
  201. package/components/detail/progress-bar-light-theme.html +997 -0
  202. package/components/detail/progress-bar-sizes.html +999 -0
  203. package/components/detail/radio-button-disabled.html +963 -0
  204. package/components/detail/radio-button-focus.html +963 -0
  205. package/components/detail/radio-button-global-definition.html +975 -0
  206. package/components/detail/radio-button-hover.html +963 -0
  207. package/components/detail/radio-button-readonly.html +964 -0
  208. package/components/detail/radio-button-selected.html +963 -0
  209. package/components/detail/section-checkbox-dark.html +1019 -0
  210. package/components/detail/section-checkbox-nested-accordion.html +1124 -0
  211. package/components/detail/section-checkbox.html +1083 -0
  212. package/components/detail/section-radio-dark.html +1083 -0
  213. package/components/detail/section-radio-nested-accordion.html +1135 -0
  214. package/components/detail/section-radio.html +1081 -0
  215. package/components/detail/select-input-default.html +973 -0
  216. package/components/detail/select-input-error.html +971 -0
  217. package/components/detail/select-input-global-definition.html +983 -0
  218. package/components/detail/select-input-not-required.html +973 -0
  219. package/components/detail/select-input-required.html +973 -0
  220. package/components/detail/select-input-small.html +969 -0
  221. package/components/detail/small-section-spacing-definitions.html +1017 -0
  222. package/components/detail/small-section-spacing.html +977 -0
  223. package/components/detail/solid-background-colors.html +1457 -0
  224. package/components/detail/solution-card-default-layout.html +1210 -0
  225. package/components/detail/solution-card-default.html +1040 -0
  226. package/components/detail/solution-card-layouts.html +2085 -0
  227. package/components/detail/solution-card-optional-certification-badges.html +1054 -0
  228. package/components/detail/solution-card-optional-solution-badges.html +1054 -0
  229. package/components/detail/solution-card-sizes.html +1125 -0
  230. package/components/detail/solution-card-small.html +1040 -0
  231. package/components/detail/switch-checked.html +973 -0
  232. package/components/detail/switch-default.html +973 -0
  233. package/components/detail/switch-disabled-readonly.html +973 -0
  234. package/components/detail/switch-disabled.html +973 -0
  235. package/components/detail/switch-global.html +983 -0
  236. package/components/detail/tab-tile.html +2409 -0
  237. package/components/detail/table-dark-theme-default-expandable-rows.html +1204 -0
  238. package/components/detail/table-dark-theme-default.html +1228 -0
  239. package/components/detail/table-default-dark.html +1179 -0
  240. package/components/detail/table-default-expandable-rows.html +1203 -0
  241. package/components/detail/table-default-medium.html +1179 -0
  242. package/components/detail/table-default-small.html +1179 -0
  243. package/components/detail/table-default.html +1227 -0
  244. package/components/detail/text-area-disabled.html +1011 -0
  245. package/components/detail/text-area-error.html +1011 -0
  246. package/components/detail/text-area-field.html +985 -0
  247. package/components/detail/text-area-focus.html +1011 -0
  248. package/components/detail/text-area-hover.html +1011 -0
  249. package/components/detail/text-area-readonly.html +1011 -0
  250. package/components/detail/text-area-sizes.html +1011 -0
  251. package/components/detail/text-area-success.html +1011 -0
  252. package/components/detail/text-area.html +1167 -0
  253. package/components/detail/text-colors.html +1287 -0
  254. package/components/detail/text.html +1037 -0
  255. package/components/detail/typography-body-texts.html +993 -0
  256. package/components/detail/typography-displays.html +959 -0
  257. package/components/detail/typography-headers.html +965 -0
  258. package/components/detail/typography-leads.html +951 -0
  259. package/components/detail/typography-links-dark-theme.html +1159 -0
  260. package/components/detail/typography-links-light-theme.html +1123 -0
  261. package/components/detail/typography-links-secondary.html +1011 -0
  262. package/components/detail/typography-unordered-lists.html +973 -0
  263. package/components/preview/accordion-checkbox-large.html +81 -0
  264. package/components/preview/accordion-checkbox-medium-dark.html +81 -0
  265. package/components/preview/accordion-checkbox-medium-disabled.html +82 -0
  266. package/components/preview/accordion-checkbox-medium-filtered-list-items.html +84 -0
  267. package/components/preview/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +95 -0
  268. package/components/preview/accordion-checkbox-medium-icon-left-floating.html +95 -0
  269. package/components/preview/accordion-checkbox-medium-icon-left.html +90 -0
  270. package/components/preview/accordion-checkbox-medium.html +81 -0
  271. package/components/preview/accordion-checkbox-overview.html +83 -0
  272. package/components/preview/accordion-input.html +30 -0
  273. package/components/preview/accordion-label.html +30 -0
  274. package/components/preview/accordion-modifier-icon-floating.html +30 -0
  275. package/components/preview/accordion-modifier-icon-left.html +31 -0
  276. package/components/preview/accordion-radio.html +83 -0
  277. package/components/preview/alert-dark-theme-default.html +59 -0
  278. package/components/preview/alert-dark-theme-solution.html +59 -0
  279. package/components/preview/alert-default-extra-attention.html +58 -0
  280. package/components/preview/alert-default-generic.html +58 -0
  281. package/components/preview/alert-default-solution-with-badge-and-ready-state.html +64 -0
  282. package/components/preview/alert-default-solution.html +60 -0
  283. package/components/preview/alert-default-without-image.html +57 -0
  284. package/components/preview/alert-default.html +58 -0
  285. package/components/preview/alert-hidden-after-refresh-checkbox.html +63 -0
  286. package/components/preview/alert-hidden-after-refresh.html +57 -0
  287. package/components/preview/alert-layouts.html +341 -0
  288. package/components/preview/alert-visible-after-refresh.html +57 -0
  289. package/components/preview/background-colors.html +50 -0
  290. package/components/preview/basic-card-default-dark.html +55 -0
  291. package/components/preview/basic-card-default-without-caption-with-header-icon.html +50 -0
  292. package/components/preview/basic-card-default-without-caption-with-header-image.html +48 -0
  293. package/components/preview/basic-card-default-without-caption.html +46 -0
  294. package/components/preview/basic-card-default.html +55 -0
  295. package/components/preview/basic-card-grouping-center.html +55 -0
  296. package/components/preview/basic-card-grouping-left-with-flat-icon.html +60 -0
  297. package/components/preview/basic-card-grouping-left.html +55 -0
  298. package/components/preview/basic-card-grouping.html +110 -0
  299. package/components/preview/basic-card-layouts.html +494 -0
  300. package/components/preview/button-danger-dark-icon.html +51 -0
  301. package/components/preview/button-danger-dark.html +44 -0
  302. package/components/preview/button-danger-default.html +42 -0
  303. package/components/preview/button-danger-icon.html +51 -0
  304. package/components/preview/button-disabled-dark-icon.html +51 -0
  305. package/components/preview/button-disabled-dark.html +44 -0
  306. package/components/preview/button-floating-aligned-column.html +57 -0
  307. package/components/preview/button-floating-aligned-right.html +57 -0
  308. package/components/preview/button-floating-dark-aligned-column.html +57 -0
  309. package/components/preview/button-floating-dark-aligned-right.html +57 -0
  310. package/components/preview/button-floating-dark-default.html +57 -0
  311. package/components/preview/button-floating-dark-disabled.html +57 -0
  312. package/components/preview/button-floating-dark-secondary-aligned-column.html +57 -0
  313. package/components/preview/button-floating-dark-secondary-aligned-right.html +57 -0
  314. package/components/preview/button-floating-dark-secondary.html +57 -0
  315. package/components/preview/button-floating-default.html +57 -0
  316. package/components/preview/button-floating-disabled.html +57 -0
  317. package/components/preview/button-floating-overview.html +39 -0
  318. package/components/preview/button-floating-positioning.html +58 -0
  319. package/components/preview/button-floating-secondary-aligned-column.html +57 -0
  320. package/components/preview/button-floating-secondary-aligned-right.html +57 -0
  321. package/components/preview/button-floating-secondary.html +57 -0
  322. package/components/preview/button-floating-states.html +48 -0
  323. package/components/preview/button-gray-default.html +43 -0
  324. package/components/preview/button-gray-icon.html +51 -0
  325. package/components/preview/button-group-center-alignment.html +37 -0
  326. package/components/preview/button-group-left-alignment.html +37 -0
  327. package/components/preview/button-group-right-alignment.html +37 -0
  328. package/components/preview/button-overview-direction.html +45 -0
  329. package/components/preview/button-overview-global-definition.html +41 -0
  330. package/components/preview/button-overview-sizes.html +48 -0
  331. package/components/preview/button-overview-states.html +59 -0
  332. package/components/preview/button-primary-dark-icon.html +51 -0
  333. package/components/preview/button-primary-dark.html +44 -0
  334. package/components/preview/button-primary-default.html +42 -0
  335. package/components/preview/button-primary-icon.html +52 -0
  336. package/components/preview/button-secondary-dark-icon.html +51 -0
  337. package/components/preview/button-secondary-dark.html +44 -0
  338. package/components/preview/button-secondary-default.html +44 -0
  339. package/components/preview/button-secondary-icon.html +51 -0
  340. package/components/preview/button-tertiary-default.html +42 -0
  341. package/components/preview/button-tertiary-icon.html +51 -0
  342. package/components/preview/buttons-overview.html +510 -0
  343. package/components/preview/category-dark.html +67 -0
  344. package/components/preview/category-disabled-dark.html +63 -0
  345. package/components/preview/category-disabled.html +59 -0
  346. package/components/preview/category-full-row.html +139 -0
  347. package/components/preview/category-overview-dark-states.html +85 -0
  348. package/components/preview/category-overview-dark.html +67 -0
  349. package/components/preview/category-overview-sizes.html +67 -0
  350. package/components/preview/category-overview-states.html +81 -0
  351. package/components/preview/category-small-dark.html +67 -0
  352. package/components/preview/category-small-disabled-dark.html +63 -0
  353. package/components/preview/category-small-disabled.html +59 -0
  354. package/components/preview/category-small-full-row.html +175 -0
  355. package/components/preview/category-small.html +63 -0
  356. package/components/preview/category.html +63 -0
  357. package/components/preview/checkbox-checked.html +38 -0
  358. package/components/preview/checkbox-disabled.html +38 -0
  359. package/components/preview/checkbox-focus.html +38 -0
  360. package/components/preview/checkbox-global-definition.html +38 -0
  361. package/components/preview/checkbox-hover.html +38 -0
  362. package/components/preview/checkbox-inline.html +41 -0
  363. package/components/preview/checkbox-readonly.html +39 -0
  364. package/components/preview/colors-and-shadows.html +126 -0
  365. package/components/preview/contact-cards.html +622 -0
  366. package/components/preview/contact-content.html +56 -0
  367. package/components/preview/contact-overview.html +121 -0
  368. package/components/preview/contact-sizes.html +102 -0
  369. package/components/preview/contact-small.html +67 -0
  370. package/components/preview/contact-without-image-small.html +62 -0
  371. package/components/preview/contact-without-image.html +62 -0
  372. package/components/preview/contact.html +67 -0
  373. package/components/preview/divider-dark-blue.html +29 -0
  374. package/components/preview/divider-default.html +30 -0
  375. package/components/preview/divider-gray-5.html +29 -0
  376. package/components/preview/divider-white-50.html +29 -0
  377. package/components/preview/divider-white.html +29 -0
  378. package/components/preview/divider-yellow.html +30 -0
  379. package/components/preview/generic-card-aspect-16by9.html +49 -0
  380. package/components/preview/generic-card-aspect-2by1-small.html +110 -0
  381. package/components/preview/generic-card-aspect-2by1.html +106 -0
  382. package/components/preview/generic-card-aspect.html +74 -0
  383. package/components/preview/generic-card-default-small-dark-theme.html +48 -0
  384. package/components/preview/generic-card-default-small-svg.html +48 -0
  385. package/components/preview/generic-card-default-small.html +49 -0
  386. package/components/preview/generic-card-default-svg-dark.html +48 -0
  387. package/components/preview/generic-card-default-svg.html +47 -0
  388. package/components/preview/generic-card-default.html +50 -0
  389. package/components/preview/generic-card-media-dark-theme.html +64 -0
  390. package/components/preview/generic-card-media-floating-icon.html +70 -0
  391. package/components/preview/generic-card-media-small.html +62 -0
  392. package/components/preview/generic-card-media.html +62 -0
  393. package/components/preview/generic-card-overview.html +80 -0
  394. package/components/preview/generic-flat-icons.html +54 -0
  395. package/components/preview/generic-rich-icons.html +54 -0
  396. package/components/preview/global-colors-alternative.html +59 -0
  397. package/components/preview/global-colors-gradients.html +63 -0
  398. package/components/preview/global-colors-gray-white-black.html +62 -0
  399. package/components/preview/global-colors-primary.html +53 -0
  400. package/components/preview/global-colors-shadows.html +54 -0
  401. package/components/preview/global-colors-transparency.html +64 -0
  402. package/components/preview/global-margins.html +51 -0
  403. package/components/preview/global-paddings.html +30 -0
  404. package/components/preview/gradient-background-colors.html +164 -0
  405. package/components/preview/input-disabled.html +56 -0
  406. package/components/preview/input-field.html +164 -0
  407. package/components/preview/input-focus.html +56 -0
  408. package/components/preview/input-hover.html +56 -0
  409. package/components/preview/input-readonly.html +56 -0
  410. package/components/preview/input-sizes.html +58 -0
  411. package/components/preview/input-state-error.html +56 -0
  412. package/components/preview/input-state-success.html +56 -0
  413. package/components/preview/input.html +45 -0
  414. package/components/preview/large-section-spacing-definitions.html +59 -0
  415. package/components/preview/large-section-spacing.html +42 -0
  416. package/components/preview/links.html +44 -0
  417. package/components/preview/lists.html +42 -0
  418. package/components/preview/marketplace-flat-icons.html +54 -0
  419. package/components/preview/marketplace-rich-icons.html +54 -0
  420. package/components/preview/matching-content-height-card.html +354 -0
  421. package/components/preview/medium-section-spacing-definitions.html +59 -0
  422. package/components/preview/medium-section-spacing.html +42 -0
  423. package/components/preview/modal-on-click.html +63 -0
  424. package/components/preview/modal-on-load-demo.html +61 -0
  425. package/components/preview/modal-on-load.html +61 -0
  426. package/components/preview/msds-text-alt-blue-1.html +49 -0
  427. package/components/preview/msds-text-alt-blue-2.html +49 -0
  428. package/components/preview/msds-text-alt-blue-3.html +49 -0
  429. package/components/preview/msds-text-alt-yellow-1.html +49 -0
  430. package/components/preview/msds-text-alt-yellow-2.html +49 -0
  431. package/components/preview/msds-text-black.html +49 -0
  432. package/components/preview/msds-text-clear-blue.html +49 -0
  433. package/components/preview/msds-text-confirm-green.html +49 -0
  434. package/components/preview/msds-text-danger-red-1.html +49 -0
  435. package/components/preview/msds-text-danger-red-2.html +49 -0
  436. package/components/preview/msds-text-dark-blue.html +49 -0
  437. package/components/preview/msds-text-gray-1.html +49 -0
  438. package/components/preview/msds-text-gray-10.html +49 -0
  439. package/components/preview/msds-text-gray-2.html +49 -0
  440. package/components/preview/msds-text-gray-3.html +49 -0
  441. package/components/preview/msds-text-gray-4.html +49 -0
  442. package/components/preview/msds-text-gray-5.html +49 -0
  443. package/components/preview/msds-text-gray-6.html +49 -0
  444. package/components/preview/msds-text-gray-7.html +49 -0
  445. package/components/preview/msds-text-gray-8.html +49 -0
  446. package/components/preview/msds-text-gray-9.html +49 -0
  447. package/components/preview/msds-text-sand.html +49 -0
  448. package/components/preview/msds-text-white.html +49 -0
  449. package/components/preview/msds-text-yellow.html +49 -0
  450. package/components/preview/popover-bottom.html +61 -0
  451. package/components/preview/popover-global-definition.html +61 -0
  452. package/components/preview/popover-left.html +61 -0
  453. package/components/preview/popover-top.html +61 -0
  454. package/components/preview/preview-dark.html +59 -0
  455. package/components/preview/preview.html +29 -0
  456. package/components/preview/progress-bar-dark-theme.html +57 -0
  457. package/components/preview/progress-bar-features.html +66 -0
  458. package/components/preview/progress-bar-global-definition.html +41 -0
  459. package/components/preview/progress-bar-light-theme.html +53 -0
  460. package/components/preview/progress-bar-sizes.html +55 -0
  461. package/components/preview/radio-button-disabled.html +36 -0
  462. package/components/preview/radio-button-focus.html +36 -0
  463. package/components/preview/radio-button-global-definition.html +42 -0
  464. package/components/preview/radio-button-hover.html +36 -0
  465. package/components/preview/radio-button-readonly.html +37 -0
  466. package/components/preview/radio-button-selected.html +36 -0
  467. package/components/preview/section-checkbox-dark.html +64 -0
  468. package/components/preview/section-checkbox-nested-accordion.html +119 -0
  469. package/components/preview/section-checkbox.html +96 -0
  470. package/components/preview/section-radio-dark.html +96 -0
  471. package/components/preview/section-radio-nested-accordion.html +144 -0
  472. package/components/preview/section-radio.html +95 -0
  473. package/components/preview/select-input-default.html +41 -0
  474. package/components/preview/select-input-error.html +40 -0
  475. package/components/preview/select-input-global-definition.html +46 -0
  476. package/components/preview/select-input-not-required.html +41 -0
  477. package/components/preview/select-input-required.html +41 -0
  478. package/components/preview/select-input-small.html +38 -0
  479. package/components/preview/small-section-spacing-definitions.html +62 -0
  480. package/components/preview/small-section-spacing.html +42 -0
  481. package/components/preview/solid-background-colors.html +135 -0
  482. package/components/preview/solution-card-default-layout.html +158 -0
  483. package/components/preview/solution-card-default.html +74 -0
  484. package/components/preview/solution-card-layouts.html +587 -0
  485. package/components/preview/solution-card-optional-certification-badges.html +82 -0
  486. package/components/preview/solution-card-optional-solution-badges.html +82 -0
  487. package/components/preview/solution-card-sizes.html +116 -0
  488. package/components/preview/solution-card-small.html +74 -0
  489. package/components/preview/switch-checked.html +41 -0
  490. package/components/preview/switch-default.html +41 -0
  491. package/components/preview/switch-disabled-readonly.html +41 -0
  492. package/components/preview/switch-disabled.html +41 -0
  493. package/components/preview/switch-global.html +46 -0
  494. package/components/preview/tab-tile.html +1128 -0
  495. package/components/preview/table-dark-theme-default-expandable-rows.html +160 -0
  496. package/components/preview/table-dark-theme-default.html +172 -0
  497. package/components/preview/table-default-dark.html +144 -0
  498. package/components/preview/table-default-expandable-rows.html +156 -0
  499. package/components/preview/table-default-medium.html +144 -0
  500. package/components/preview/table-default-small.html +144 -0
  501. package/components/preview/table-default.html +168 -0
  502. package/components/preview/text-area-disabled.html +60 -0
  503. package/components/preview/text-area-error.html +60 -0
  504. package/components/preview/text-area-field.html +47 -0
  505. package/components/preview/text-area-focus.html +60 -0
  506. package/components/preview/text-area-hover.html +60 -0
  507. package/components/preview/text-area-readonly.html +60 -0
  508. package/components/preview/text-area-sizes.html +60 -0
  509. package/components/preview/text-area-success.html +60 -0
  510. package/components/preview/text-area.html +147 -0
  511. package/components/preview/text-colors.html +49 -0
  512. package/components/preview/text.html +74 -0
  513. package/components/preview/typography-body-texts.html +52 -0
  514. package/components/preview/typography-displays.html +34 -0
  515. package/components/preview/typography-headers.html +37 -0
  516. package/components/preview/typography-leads.html +30 -0
  517. package/components/preview/typography-links-dark-theme.html +135 -0
  518. package/components/preview/typography-links-light-theme.html +117 -0
  519. package/components/preview/typography-links-secondary.html +61 -0
  520. package/components/preview/typography-unordered-lists.html +41 -0
  521. package/components/raw/tab-tile/tab-tile.js +139 -0
  522. package/components/raw/tab-tile/tab-tile.scss +256 -0
  523. package/components/render/accordion-checkbox-large.html +55 -0
  524. package/components/render/accordion-checkbox-medium-dark.html +55 -0
  525. package/components/render/accordion-checkbox-medium-disabled.html +56 -0
  526. package/components/render/accordion-checkbox-medium-filtered-list-items.html +58 -0
  527. package/components/render/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +69 -0
  528. package/components/render/accordion-checkbox-medium-icon-left-floating.html +69 -0
  529. package/components/render/accordion-checkbox-medium-icon-left.html +64 -0
  530. package/components/render/accordion-checkbox-medium.html +55 -0
  531. package/components/render/accordion-checkbox-overview.html +57 -0
  532. package/components/render/accordion-input.html +4 -0
  533. package/components/render/accordion-label.html +4 -0
  534. package/components/render/accordion-modifier-icon-floating.html +4 -0
  535. package/components/render/accordion-modifier-icon-left.html +5 -0
  536. package/components/render/accordion-radio.html +57 -0
  537. package/components/render/alert-dark-theme-default.html +33 -0
  538. package/components/render/alert-dark-theme-solution.html +33 -0
  539. package/components/render/alert-default-extra-attention.html +32 -0
  540. package/components/render/alert-default-generic.html +32 -0
  541. package/components/render/alert-default-solution-with-badge-and-ready-state.html +38 -0
  542. package/components/render/alert-default-solution.html +34 -0
  543. package/components/render/alert-default-without-image.html +31 -0
  544. package/components/render/alert-default.html +32 -0
  545. package/components/render/alert-hidden-after-refresh-checkbox.html +37 -0
  546. package/components/render/alert-hidden-after-refresh.html +31 -0
  547. package/components/render/alert-layouts.html +315 -0
  548. package/components/render/alert-visible-after-refresh.html +31 -0
  549. package/components/render/background-colors.html +4 -0
  550. package/components/render/basic-card-default-dark.html +29 -0
  551. package/components/render/basic-card-default-without-caption-with-header-icon.html +24 -0
  552. package/components/render/basic-card-default-without-caption-with-header-image.html +22 -0
  553. package/components/render/basic-card-default-without-caption.html +20 -0
  554. package/components/render/basic-card-default.html +29 -0
  555. package/components/render/basic-card-grouping-center.html +29 -0
  556. package/components/render/basic-card-grouping-left-with-flat-icon.html +34 -0
  557. package/components/render/basic-card-grouping-left.html +29 -0
  558. package/components/render/basic-card-grouping.html +84 -0
  559. package/components/render/basic-card-layouts.html +468 -0
  560. package/components/render/button-danger-dark-icon.html +25 -0
  561. package/components/render/button-danger-dark.html +18 -0
  562. package/components/render/button-danger-default.html +16 -0
  563. package/components/render/button-danger-icon.html +25 -0
  564. package/components/render/button-disabled-dark-icon.html +25 -0
  565. package/components/render/button-disabled-dark.html +18 -0
  566. package/components/render/button-floating-aligned-column.html +31 -0
  567. package/components/render/button-floating-aligned-right.html +31 -0
  568. package/components/render/button-floating-dark-aligned-column.html +31 -0
  569. package/components/render/button-floating-dark-aligned-right.html +31 -0
  570. package/components/render/button-floating-dark-default.html +31 -0
  571. package/components/render/button-floating-dark-disabled.html +31 -0
  572. package/components/render/button-floating-dark-secondary-aligned-column.html +31 -0
  573. package/components/render/button-floating-dark-secondary-aligned-right.html +31 -0
  574. package/components/render/button-floating-dark-secondary.html +31 -0
  575. package/components/render/button-floating-default.html +31 -0
  576. package/components/render/button-floating-disabled.html +31 -0
  577. package/components/render/button-floating-overview.html +13 -0
  578. package/components/render/button-floating-positioning.html +32 -0
  579. package/components/render/button-floating-secondary-aligned-column.html +31 -0
  580. package/components/render/button-floating-secondary-aligned-right.html +31 -0
  581. package/components/render/button-floating-secondary.html +31 -0
  582. package/components/render/button-floating-states.html +22 -0
  583. package/components/render/button-gray-default.html +17 -0
  584. package/components/render/button-gray-icon.html +25 -0
  585. package/components/render/button-group-center-alignment.html +11 -0
  586. package/components/render/button-group-left-alignment.html +11 -0
  587. package/components/render/button-group-right-alignment.html +11 -0
  588. package/components/render/button-overview-direction.html +19 -0
  589. package/components/render/button-overview-global-definition.html +15 -0
  590. package/components/render/button-overview-sizes.html +22 -0
  591. package/components/render/button-overview-states.html +33 -0
  592. package/components/render/button-primary-dark-icon.html +25 -0
  593. package/components/render/button-primary-dark.html +18 -0
  594. package/components/render/button-primary-default.html +16 -0
  595. package/components/render/button-primary-icon.html +26 -0
  596. package/components/render/button-secondary-dark-icon.html +25 -0
  597. package/components/render/button-secondary-dark.html +18 -0
  598. package/components/render/button-secondary-default.html +18 -0
  599. package/components/render/button-secondary-icon.html +25 -0
  600. package/components/render/button-tertiary-default.html +16 -0
  601. package/components/render/button-tertiary-icon.html +25 -0
  602. package/components/render/buttons-overview.html +484 -0
  603. package/components/render/category-dark.html +37 -0
  604. package/components/render/category-disabled-dark.html +33 -0
  605. package/components/render/category-disabled.html +33 -0
  606. package/components/render/category-full-row.html +113 -0
  607. package/components/render/category-overview-dark-states.html +55 -0
  608. package/components/render/category-overview-dark.html +37 -0
  609. package/components/render/category-overview-sizes.html +41 -0
  610. package/components/render/category-overview-states.html +55 -0
  611. package/components/render/category-small-dark.html +37 -0
  612. package/components/render/category-small-disabled-dark.html +33 -0
  613. package/components/render/category-small-disabled.html +33 -0
  614. package/components/render/category-small-full-row.html +149 -0
  615. package/components/render/category-small.html +37 -0
  616. package/components/render/category.html +37 -0
  617. package/components/render/checkbox-checked.html +12 -0
  618. package/components/render/checkbox-disabled.html +12 -0
  619. package/components/render/checkbox-focus.html +12 -0
  620. package/components/render/checkbox-global-definition.html +12 -0
  621. package/components/render/checkbox-hover.html +12 -0
  622. package/components/render/checkbox-inline.html +15 -0
  623. package/components/render/checkbox-readonly.html +13 -0
  624. package/components/render/colors-and-shadows.html +80 -0
  625. package/components/render/contact-cards.html +596 -0
  626. package/components/render/contact-content.html +30 -0
  627. package/components/render/contact-overview.html +95 -0
  628. package/components/render/contact-sizes.html +76 -0
  629. package/components/render/contact-small.html +41 -0
  630. package/components/render/contact-without-image-small.html +36 -0
  631. package/components/render/contact-without-image.html +36 -0
  632. package/components/render/contact.html +41 -0
  633. package/components/render/divider-dark-blue.html +3 -0
  634. package/components/render/divider-default.html +4 -0
  635. package/components/render/divider-gray-5.html +3 -0
  636. package/components/render/divider-white-50.html +3 -0
  637. package/components/render/divider-white.html +3 -0
  638. package/components/render/divider-yellow.html +4 -0
  639. package/components/render/generic-card-aspect-16by9.html +23 -0
  640. package/components/render/generic-card-aspect-2by1-small.html +84 -0
  641. package/components/render/generic-card-aspect-2by1.html +80 -0
  642. package/components/render/generic-card-aspect.html +48 -0
  643. package/components/render/generic-card-default-small-dark-theme.html +22 -0
  644. package/components/render/generic-card-default-small-svg.html +22 -0
  645. package/components/render/generic-card-default-small.html +23 -0
  646. package/components/render/generic-card-default-svg-dark.html +22 -0
  647. package/components/render/generic-card-default-svg.html +21 -0
  648. package/components/render/generic-card-default.html +24 -0
  649. package/components/render/generic-card-media-dark-theme.html +38 -0
  650. package/components/render/generic-card-media-floating-icon.html +44 -0
  651. package/components/render/generic-card-media-small.html +36 -0
  652. package/components/render/generic-card-media.html +36 -0
  653. package/components/render/generic-card-overview.html +54 -0
  654. package/components/render/generic-flat-icons.html +3 -0
  655. package/components/render/generic-rich-icons.html +3 -0
  656. package/components/render/global-colors-alternative.html +13 -0
  657. package/components/render/global-colors-gradients.html +17 -0
  658. package/components/render/global-colors-gray-white-black.html +16 -0
  659. package/components/render/global-colors-primary.html +7 -0
  660. package/components/render/global-colors-shadows.html +8 -0
  661. package/components/render/global-colors-transparency.html +18 -0
  662. package/components/render/global-margins.html +25 -0
  663. package/components/render/global-paddings.html +4 -0
  664. package/components/render/gradient-background-colors.html +118 -0
  665. package/components/render/input-disabled.html +30 -0
  666. package/components/render/input-field.html +138 -0
  667. package/components/render/input-focus.html +30 -0
  668. package/components/render/input-hover.html +30 -0
  669. package/components/render/input-readonly.html +30 -0
  670. package/components/render/input-sizes.html +32 -0
  671. package/components/render/input-state-error.html +30 -0
  672. package/components/render/input-state-success.html +30 -0
  673. package/components/render/input.html +19 -0
  674. package/components/render/large-section-spacing-definitions.html +33 -0
  675. package/components/render/large-section-spacing.html +16 -0
  676. package/components/render/links.html +18 -0
  677. package/components/render/lists.html +16 -0
  678. package/components/render/marketplace-flat-icons.html +3 -0
  679. package/components/render/marketplace-rich-icons.html +3 -0
  680. package/components/render/matching-content-height-card.html +328 -0
  681. package/components/render/medium-section-spacing-definitions.html +33 -0
  682. package/components/render/medium-section-spacing.html +16 -0
  683. package/components/render/modal-on-click.html +37 -0
  684. package/components/render/modal-on-load-demo.html +35 -0
  685. package/components/render/modal-on-load.html +35 -0
  686. package/components/render/msds-text-alt-blue-1.html +3 -0
  687. package/components/render/msds-text-alt-blue-2.html +3 -0
  688. package/components/render/msds-text-alt-blue-3.html +3 -0
  689. package/components/render/msds-text-alt-yellow-1.html +3 -0
  690. package/components/render/msds-text-alt-yellow-2.html +3 -0
  691. package/components/render/msds-text-black.html +3 -0
  692. package/components/render/msds-text-clear-blue.html +3 -0
  693. package/components/render/msds-text-confirm-green.html +3 -0
  694. package/components/render/msds-text-danger-red-1.html +3 -0
  695. package/components/render/msds-text-danger-red-2.html +3 -0
  696. package/components/render/msds-text-dark-blue.html +3 -0
  697. package/components/render/msds-text-gray-1.html +3 -0
  698. package/components/render/msds-text-gray-10.html +3 -0
  699. package/components/render/msds-text-gray-2.html +3 -0
  700. package/components/render/msds-text-gray-3.html +3 -0
  701. package/components/render/msds-text-gray-4.html +3 -0
  702. package/components/render/msds-text-gray-5.html +3 -0
  703. package/components/render/msds-text-gray-6.html +3 -0
  704. package/components/render/msds-text-gray-7.html +3 -0
  705. package/components/render/msds-text-gray-8.html +3 -0
  706. package/components/render/msds-text-gray-9.html +3 -0
  707. package/components/render/msds-text-sand.html +3 -0
  708. package/components/render/msds-text-white.html +3 -0
  709. package/components/render/msds-text-yellow.html +3 -0
  710. package/components/render/popover-bottom.html +35 -0
  711. package/components/render/popover-global-definition.html +35 -0
  712. package/components/render/popover-left.html +35 -0
  713. package/components/render/popover-top.html +35 -0
  714. package/components/render/preview-dark.html +33 -0
  715. package/components/render/preview.html +29 -0
  716. package/components/render/progress-bar-dark-theme.html +27 -0
  717. package/components/render/progress-bar-features.html +40 -0
  718. package/components/render/progress-bar-global-definition.html +15 -0
  719. package/components/render/progress-bar-light-theme.html +27 -0
  720. package/components/render/progress-bar-sizes.html +29 -0
  721. package/components/render/radio-button-disabled.html +10 -0
  722. package/components/render/radio-button-focus.html +10 -0
  723. package/components/render/radio-button-global-definition.html +16 -0
  724. package/components/render/radio-button-hover.html +10 -0
  725. package/components/render/radio-button-readonly.html +11 -0
  726. package/components/render/radio-button-selected.html +10 -0
  727. package/components/render/section-checkbox-dark.html +38 -0
  728. package/components/render/section-checkbox-nested-accordion.html +93 -0
  729. package/components/render/section-checkbox.html +70 -0
  730. package/components/render/section-radio-dark.html +70 -0
  731. package/components/render/section-radio-nested-accordion.html +118 -0
  732. package/components/render/section-radio.html +69 -0
  733. package/components/render/select-input-default.html +15 -0
  734. package/components/render/select-input-error.html +14 -0
  735. package/components/render/select-input-global-definition.html +20 -0
  736. package/components/render/select-input-not-required.html +15 -0
  737. package/components/render/select-input-required.html +15 -0
  738. package/components/render/select-input-small.html +12 -0
  739. package/components/render/small-section-spacing-definitions.html +36 -0
  740. package/components/render/small-section-spacing.html +16 -0
  741. package/components/render/solid-background-colors.html +89 -0
  742. package/components/render/solution-card-default-layout.html +132 -0
  743. package/components/render/solution-card-default.html +48 -0
  744. package/components/render/solution-card-layouts.html +561 -0
  745. package/components/render/solution-card-optional-certification-badges.html +56 -0
  746. package/components/render/solution-card-optional-solution-badges.html +56 -0
  747. package/components/render/solution-card-sizes.html +90 -0
  748. package/components/render/solution-card-small.html +48 -0
  749. package/components/render/switch-checked.html +15 -0
  750. package/components/render/switch-default.html +15 -0
  751. package/components/render/switch-disabled-readonly.html +15 -0
  752. package/components/render/switch-disabled.html +15 -0
  753. package/components/render/switch-global.html +20 -0
  754. package/components/render/tab-tile.html +1102 -0
  755. package/components/render/table-dark-theme-default-expandable-rows.html +130 -0
  756. package/components/render/table-dark-theme-default.html +142 -0
  757. package/components/render/table-default-dark.html +118 -0
  758. package/components/render/table-default-expandable-rows.html +130 -0
  759. package/components/render/table-default-medium.html +118 -0
  760. package/components/render/table-default-small.html +118 -0
  761. package/components/render/table-default.html +142 -0
  762. package/components/render/text-area-disabled.html +34 -0
  763. package/components/render/text-area-error.html +34 -0
  764. package/components/render/text-area-field.html +21 -0
  765. package/components/render/text-area-focus.html +34 -0
  766. package/components/render/text-area-hover.html +34 -0
  767. package/components/render/text-area-readonly.html +34 -0
  768. package/components/render/text-area-sizes.html +34 -0
  769. package/components/render/text-area-success.html +34 -0
  770. package/components/render/text-area.html +121 -0
  771. package/components/render/text-colors.html +3 -0
  772. package/components/render/text.html +48 -0
  773. package/components/render/typography-body-texts.html +26 -0
  774. package/components/render/typography-displays.html +8 -0
  775. package/components/render/typography-headers.html +11 -0
  776. package/components/render/typography-leads.html +4 -0
  777. package/components/render/typography-links-dark-theme.html +109 -0
  778. package/components/render/typography-links-light-theme.html +91 -0
  779. package/components/render/typography-links-secondary.html +35 -0
  780. package/components/render/typography-unordered-lists.html +15 -0
  781. package/components.html +13 -0
  782. package/design-system.css +1 -1
  783. package/docs/component-documentation/alerts.html +1657 -0
  784. package/docs/component-documentation/buttons/buttons-floating.html +1676 -0
  785. package/docs/component-documentation/buttons/buttons.html +1908 -0
  786. package/docs/component-documentation/cards/basic-cards.html +1424 -0
  787. package/docs/component-documentation/cards/category-cards.html +1950 -0
  788. package/docs/component-documentation/cards/contact-cards.html +1474 -0
  789. package/docs/component-documentation/cards/generic-cards.html +1534 -0
  790. package/docs/component-documentation/cards/solution-cards.html +1595 -0
  791. package/docs/component-documentation/dividers/dividers.html +839 -0
  792. package/docs/component-documentation/expanding-components/accordion.html +1832 -0
  793. package/docs/component-documentation/expanding-components/section.html +1511 -0
  794. package/docs/component-documentation/modal.html +983 -0
  795. package/docs/component-documentation/popover/popover.html +1082 -0
  796. package/docs/component-documentation/progress-bar.html +1143 -0
  797. package/docs/component-documentation/spacing.html +831 -0
  798. package/docs/component-documentation/table.html +2336 -0
  799. package/docs/content/icons/-overview.html +848 -0
  800. package/docs/content/icons/icons-flat.html +839 -0
  801. package/docs/content/icons/icons-rich.html +839 -0
  802. package/docs/content/typography/-overview.html +860 -0
  803. package/docs/content/typography/font-colors.html +900 -0
  804. package/docs/content/typography/links.html +1113 -0
  805. package/docs/content/typography/lists.html +854 -0
  806. package/docs/content/typography/text.html +919 -0
  807. package/docs/forms/-overview.html +881 -0
  808. package/docs/forms/checkbox.html +1007 -0
  809. package/docs/forms/drop-down-list.html +981 -0
  810. package/docs/forms/input-field.html +1316 -0
  811. package/docs/forms/radio-button.html +966 -0
  812. package/docs/forms/switch.html +964 -0
  813. package/docs/forms/text-area.html +1371 -0
  814. package/docs/guidelines-and-guides/creating-a-new-release.html +825 -0
  815. package/docs/guidelines-and-guides/css-and-scss-guidelines.html +814 -0
  816. package/docs/guidelines-and-guides/git-cheat-sheet.html +898 -0
  817. package/docs/guidelines-and-guides/installation-and-usage.html +812 -0
  818. package/docs/utilities/colors/background-colors.html +1029 -0
  819. package/docs/utilities/colors/font-colors.html +1002 -0
  820. package/docs/utilities/colors/overview.html +952 -0
  821. package/docs/utilities/spacing.html +1112 -0
  822. package/docs.html +13 -0
  823. package/icons.list.js +2432 -2432
  824. package/index.html +807 -0
  825. package/main.css +1 -1
  826. package/package.json +58 -58
  827. package/scss/_variables.scss +124 -124
  828. package/spacing.list.js +11 -11
  829. package/svg/rich/Okay.svg +33 -33
  830. package/svg/rich/acceleration.svg +39 -39
  831. package/svg/rich/add-content.svg +37 -37
  832. package/svg/rich/add-solution.svg +29 -29
  833. package/svg/rich/advanced-super-surveillance.svg +42 -42
  834. package/svg/rich/advocacy .svg +60 -60
  835. package/svg/rich/airplane.svg +67 -67
  836. package/svg/rich/ambition.svg +46 -46
  837. package/svg/rich/analytics-devices.svg +68 -68
  838. package/svg/rich/applications.svg +97 -97
  839. package/svg/rich/backup-important.svg +157 -157
  840. package/svg/rich/black-screens.svg +43 -43
  841. package/svg/rich/blueprint.svg +22 -22
  842. package/svg/rich/body-worn.svg +45 -45
  843. package/svg/rich/book-a-demo-notification.svg +38 -38
  844. package/svg/rich/book-a-demo.svg +34 -34
  845. package/svg/rich/booking.svg +49 -49
  846. package/svg/rich/browser.svg +32 -32
  847. package/svg/rich/build.svg +34 -34
  848. package/svg/rich/building-medium.svg +66 -66
  849. package/svg/rich/cal-monthly.svg +324 -324
  850. package/svg/rich/cal-weekly.svg +173 -173
  851. package/svg/rich/calendar.svg +25 -25
  852. package/svg/rich/cam-group-small.svg +84 -84
  853. package/svg/rich/camera-analogue.svg +27 -27
  854. package/svg/rich/camera-memory.svg +25 -25
  855. package/svg/rich/car.svg +41 -41
  856. package/svg/rich/care.svg +16 -16
  857. package/svg/rich/catalogue.svg +22 -22
  858. package/svg/rich/certification.svg +25 -25
  859. package/svg/rich/checklist.svg +22 -22
  860. package/svg/rich/checkmark-badge.svg +11 -11
  861. package/svg/rich/checkmark.svg +11 -11
  862. package/svg/rich/clock-24-7.svg +77 -77
  863. package/svg/rich/co-working.svg +104 -104
  864. package/svg/rich/coffee.svg +60 -60
  865. package/svg/rich/community.svg +184 -184
  866. package/svg/rich/company.svg +32 -32
  867. package/svg/rich/complete-flow.svg +30 -30
  868. package/svg/rich/consumer.svg +47 -47
  869. package/svg/rich/contact-illustration.svg +13 -13
  870. package/svg/rich/contact-notification.svg +17 -17
  871. package/svg/rich/crime.svg +29 -29
  872. package/svg/rich/crowd-management.svg +47 -47
  873. package/svg/rich/customer-stories.svg +23 -23
  874. package/svg/rich/customizable.svg +19 -19
  875. package/svg/rich/cyber-security.svg +131 -131
  876. package/svg/rich/dashboard.svg +43 -43
  877. package/svg/rich/decision-making.svg +19 -19
  878. package/svg/rich/deployment-device.svg +66 -66
  879. package/svg/rich/design-animated.svg +51 -51
  880. package/svg/rich/design.svg +24 -24
  881. package/svg/rich/devices-web.svg +56 -56
  882. package/svg/rich/devices.svg +29 -29
  883. package/svg/rich/discount.svg +22 -22
  884. package/svg/rich/document.svg +24 -24
  885. package/svg/rich/documentation.svg +79 -79
  886. package/svg/rich/dome-cam-8.svg +84 -84
  887. package/svg/rich/dome-cam.svg +16 -16
  888. package/svg/rich/download-illustration.svg +49 -49
  889. package/svg/rich/e-learning.svg +42 -42
  890. package/svg/rich/emergency.svg +44 -44
  891. package/svg/rich/employees.svg +37 -37
  892. package/svg/rich/end-user.svg +28 -28
  893. package/svg/rich/expertise.svg +47 -47
  894. package/svg/rich/explore.svg +50 -50
  895. package/svg/rich/extension.svg +63 -63
  896. package/svg/rich/failover.svg +33 -33
  897. package/svg/rich/faq.svg +23 -23
  898. package/svg/rich/feedback-notification.svg +21 -21
  899. package/svg/rich/feedback.svg +17 -17
  900. package/svg/rich/find.svg +28 -28
  901. package/svg/rich/flexibility.svg +13 -13
  902. package/svg/rich/form.svg +26 -26
  903. package/svg/rich/get-leads.svg +73 -73
  904. package/svg/rich/getting-started.svg +29 -29
  905. package/svg/rich/global-partner-network.svg +978 -978
  906. package/svg/rich/growth-data.svg +56 -56
  907. package/svg/rich/happiness.svg +29 -29
  908. package/svg/rich/hardware-applications-software.svg +165 -165
  909. package/svg/rich/hardware-services-documentation.svg +47 -47
  910. package/svg/rich/hardware.svg +22 -22
  911. package/svg/rich/intelligence.svg +43 -43
  912. package/svg/rich/interconnect.svg +39 -39
  913. package/svg/rich/investigation.svg +34 -34
  914. package/svg/rich/join.svg +78 -78
  915. package/svg/rich/key-features.svg +38 -38
  916. package/svg/rich/languages.svg +49 -49
  917. package/svg/rich/license-governance.svg +45 -45
  918. package/svg/rich/license-key.svg +13 -13
  919. package/svg/rich/like-notification.svg +43 -43
  920. package/svg/rich/listen.svg +13 -13
  921. package/svg/rich/live-streaming.svg +93 -93
  922. package/svg/rich/logged-in.svg +14 -14
  923. package/svg/rich/lpr.svg +59 -59
  924. package/svg/rich/marketplace-challenges-assist-people-feel-safe-leaving.svg +105 -105
  925. package/svg/rich/marketplace-challenges-assist-people-in-finding-their-vehicles.svg +124 -124
  926. package/svg/rich/marketplace-challenges-avoid-employee-theft.svg +169 -169
  927. package/svg/rich/marketplace-challenges-control-access-to-restricted-areas.svg +104 -104
  928. package/svg/rich/marketplace-challenges-discover-inefficiencies-in-cargo-movement.svg +130 -130
  929. package/svg/rich/marketplace-challenges-find-lost-children.svg +87 -87
  930. package/svg/rich/marketplace-challenges-gather-evidence-for-criminal-investigation.svg +172 -172
  931. package/svg/rich/marketplace-challenges-improve-wait-time-in-lines.svg +375 -375
  932. package/svg/rich/marketplace-challenges-money-disputes-with-customers.svg +157 -157
  933. package/svg/rich/marketplace-challenges-personalized-customer-experience.svg +127 -127
  934. package/svg/rich/marketplace-challenges-prevent-multiple-people-from-entering-a-door-on-a-single-access-badge.svg +245 -245
  935. package/svg/rich/marketplace-challenges-provide-evidence-against-lawsuit.svg +270 -270
  936. package/svg/rich/marketplace-challenges-react-to-confrontations-before-they-escalate.svg +176 -176
  937. package/svg/rich/marketplace-challenges-reduce-property-damage.svg +381 -381
  938. package/svg/rich/marketplace-challenges-reduce-workplace-accidents.svg +172 -172
  939. package/svg/rich/marketplace-challenges-respond-to-medical-emergencies.svg +179 -179
  940. package/svg/rich/marketplace-challenges-situational-awareness-to-response-teams.svg +330 -330
  941. package/svg/rich/marketplace-challenges-understand-customer-behavior.svg +455 -455
  942. package/svg/rich/marketplace-challenges-vandalism.svg +120 -120
  943. package/svg/rich/marketplace-collect.svg +121 -121
  944. package/svg/rich/marketplace-filter.svg +54 -54
  945. package/svg/rich/marketplace-industries-airports.svg +380 -380
  946. package/svg/rich/marketplace-industries-art-and-entertainment.svg +170 -170
  947. package/svg/rich/marketplace-industries-city-surveillance.svg +572 -572
  948. package/svg/rich/marketplace-industries-construction.svg +253 -253
  949. package/svg/rich/marketplace-industries-critical-infrastructure.svg +292 -292
  950. package/svg/rich/marketplace-industries-education.svg +291 -291
  951. package/svg/rich/marketplace-industries-finance-and-insurance.svg +140 -140
  952. package/svg/rich/marketplace-industries-healthcare.svg +207 -207
  953. package/svg/rich/marketplace-industries-information-technology.svg +250 -250
  954. package/svg/rich/marketplace-industries-manufacturing.svg +175 -175
  955. package/svg/rich/marketplace-industries-public-administration.svg +349 -349
  956. package/svg/rich/marketplace-industries-public-transport.svg +303 -303
  957. package/svg/rich/marketplace-industries-retail.svg +392 -392
  958. package/svg/rich/marketplace-industries-seaports.svg +335 -335
  959. package/svg/rich/marketplace-industries-trafic-monitoring.svg +255 -255
  960. package/svg/rich/marketplace-industries-utilities.svg +211 -211
  961. package/svg/rich/marketplace-interface.svg +76 -76
  962. package/svg/rich/marketplace-practice-access-control.svg +117 -117
  963. package/svg/rich/marketplace-practice-business-intelligence.svg +89 -89
  964. package/svg/rich/marketplace-practice-business-solutions.svg +195 -195
  965. package/svg/rich/marketplace-practice-central-monitoring.svg +505 -505
  966. package/svg/rich/marketplace-practice-cloud-and-managed-services.svg +75 -75
  967. package/svg/rich/marketplace-practice-communication.svg +187 -187
  968. package/svg/rich/marketplace-practice-crisis-emergency.svg +160 -160
  969. package/svg/rich/marketplace-practice-cyber-security.svg +141 -141
  970. package/svg/rich/marketplace-practice-detection-and-deterrence.svg +164 -164
  971. package/svg/rich/marketplace-practice-digital-infrastructure.svg +197 -197
  972. package/svg/rich/marketplace-practice-facilities-management.svg +332 -332
  973. package/svg/rich/marketplace-practice-fire-and-life-safety.svg +168 -168
  974. package/svg/rich/marketplace-practice-home-automation-iot.svg +161 -161
  975. package/svg/rich/marketplace-practice-intrusion-and-alarm.svg +301 -301
  976. package/svg/rich/marketplace-practice-investigation.svg +157 -157
  977. package/svg/rich/marketplace-practice-it-hardware-and-equipment.svg +254 -254
  978. package/svg/rich/marketplace-practice-privacy-protection.svg +118 -118
  979. package/svg/rich/marketplace-practice-smart-city.svg +351 -351
  980. package/svg/rich/marketplace-practice-surveillance.svg +72 -72
  981. package/svg/rich/marketplace-practice-tracking-and-monitoring.svg +178 -178
  982. package/svg/rich/marketplace-practice-vehicles-and-traffic.svg +227 -227
  983. package/svg/rich/marketplace-solution-service.svg +75 -75
  984. package/svg/rich/milestone-global-offices-illustration.svg +49 -49
  985. package/svg/rich/milestone-in the-media.svg +49 -49
  986. package/svg/rich/mobile-support.svg +40 -40
  987. package/svg/rich/my-milestone.svg +28 -28
  988. package/svg/rich/network.svg +24 -24
  989. package/svg/rich/newspaper.svg +20 -20
  990. package/svg/rich/no-1.svg +50 -50
  991. package/svg/rich/no-backup.svg +30 -30
  992. package/svg/rich/one-hub.svg +71 -71
  993. package/svg/rich/open-platform-community.svg +144 -144
  994. package/svg/rich/open-platform.svg +10 -10
  995. package/svg/rich/outdated-hardware.svg +53 -53
  996. package/svg/rich/partnership.svg +39 -39
  997. package/svg/rich/passion.svg +41 -41
  998. package/svg/rich/planet.svg +75 -75
  999. package/svg/rich/play.svg +10 -10
  1000. package/svg/rich/press-release.svg +30 -30
  1001. package/svg/rich/product-overview-illustration.svg +49 -49
  1002. package/svg/rich/project-animated.svg +99 -99
  1003. package/svg/rich/project.svg +18 -18
  1004. package/svg/rich/promotion.svg +25 -25
  1005. package/svg/rich/publish.svg +12 -12
  1006. package/svg/rich/quote.svg +104 -104
  1007. package/svg/rich/reaction-mode.svg +54 -54
  1008. package/svg/rich/releases.svg +17 -17
  1009. package/svg/rich/reliable.svg +24 -24
  1010. package/svg/rich/reminder.svg +33 -33
  1011. package/svg/rich/save-money.svg +27 -27
  1012. package/svg/rich/scalable.svg +16 -16
  1013. package/svg/rich/scale-balance.svg +101 -101
  1014. package/svg/rich/scale-up.svg +11 -11
  1015. package/svg/rich/screen-recording.svg +259 -259
  1016. package/svg/rich/searching.svg +115 -115
  1017. package/svg/rich/secure-gdpr.svg +52 -52
  1018. package/svg/rich/secure.svg +49 -49
  1019. package/svg/rich/self-service-support.svg +15 -15
  1020. package/svg/rich/service-coding.svg +44 -44
  1021. package/svg/rich/sign-up.svg +37 -37
  1022. package/svg/rich/single-site.svg +31 -31
  1023. package/svg/rich/smart-wall-person.svg +135 -135
  1024. package/svg/rich/smart-wall.svg +96 -96
  1025. package/svg/rich/solutions-design-tool.svg +234 -234
  1026. package/svg/rich/submit-for-feedback.svg +28 -28
  1027. package/svg/rich/subscriptions.svg +37 -37
  1028. package/svg/rich/support-call.svg +29 -29
  1029. package/svg/rich/support-chat-female.svg +48 -48
  1030. package/svg/rich/support-chat-male.svg +48 -48
  1031. package/svg/rich/support-technical.svg +17 -17
  1032. package/svg/rich/system-builder.svg +24 -24
  1033. package/svg/rich/tags.svg +24 -24
  1034. package/svg/rich/target.svg +15 -15
  1035. package/svg/rich/time-to-market.svg +53 -53
  1036. package/svg/rich/tools.svg +37 -37
  1037. package/svg/rich/trade-show.svg +90 -90
  1038. package/svg/rich/transaction.svg +56 -56
  1039. package/svg/rich/translation.svg +17 -17
  1040. package/svg/rich/update-content-then-publish.svg +77 -77
  1041. package/svg/rich/update-content.svg +55 -55
  1042. package/svg/rich/user-review.svg +22 -22
  1043. package/svg/rich/verification.svg +37 -37
  1044. package/svg/rich/video-cookie.svg +78 -78
  1045. package/svg/rich/vps.svg +39 -39
  1046. package/svg/rich/warning.svg +48 -48
  1047. package/svg/rich/watch.svg +19 -19
  1048. package/svg/rich/webinar.svg +49 -49
  1049. package/svg/rich/well-being.svg +67 -67
  1050. package/svg/rich/world-leading.svg +258 -258
  1051. package/svg/rich/xprotect-access-anywhere.svg +86 -86
  1052. package/svg/rich/xprotect-compare-matrix.svg +40 -40
  1053. package/svg/rich/xprotect-compare-products.svg +232 -232
  1054. package/svg/rich/xprotect-compare-releases.svg +208 -208
  1055. package/svg/rich/xprotect.svg +31 -31
  1056. package/svg/rich/youtube.svg +12 -12
  1057. package/text.list.js +47 -47
  1058. package/themes/mandelbrot/css/aqua.css +1 -0
  1059. package/themes/mandelbrot/css/black.css +1 -0
  1060. package/themes/mandelbrot/css/blue.css +1 -0
  1061. package/themes/mandelbrot/css/default.css +1 -0
  1062. package/themes/mandelbrot/css/fuchsia.css +1 -0
  1063. package/themes/mandelbrot/css/green.css +1 -0
  1064. package/themes/mandelbrot/css/grey.css +1 -0
  1065. package/themes/mandelbrot/css/highlight.css +1 -0
  1066. package/themes/mandelbrot/css/lime.css +1 -0
  1067. package/themes/mandelbrot/css/maroon.css +1 -0
  1068. package/themes/mandelbrot/css/navy.css +1 -0
  1069. package/themes/mandelbrot/css/olive.css +1 -0
  1070. package/themes/mandelbrot/css/orange.css +1 -0
  1071. package/themes/mandelbrot/css/purple.css +1 -0
  1072. package/themes/mandelbrot/css/red.css +1 -0
  1073. package/themes/mandelbrot/css/teal.css +1 -0
  1074. package/themes/mandelbrot/css/white.css +1 -0
  1075. package/themes/mandelbrot/css/yellow.css +1 -0
  1076. package/themes/mandelbrot/favicon.ico +0 -0
  1077. package/themes/mandelbrot/fonts/OpenSans-Italic.woff +0 -0
  1078. package/themes/mandelbrot/fonts/OpenSans-Italic.woff2 +0 -0
  1079. package/themes/mandelbrot/fonts/OpenSans-Regular.woff +0 -0
  1080. package/themes/mandelbrot/fonts/OpenSans-Regular.woff2 +0 -0
  1081. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff +0 -0
  1082. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff2 +0 -0
  1083. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff +0 -0
  1084. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff2 +0 -0
  1085. package/themes/mandelbrot/fonts/hack-bold-webfont.woff +0 -0
  1086. package/themes/mandelbrot/fonts/hack-bold-webfont.woff2 +0 -0
  1087. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff +0 -0
  1088. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff2 +0 -0
  1089. package/themes/mandelbrot/fonts/hack-italic-webfont.woff +0 -0
  1090. package/themes/mandelbrot/fonts/hack-italic-webfont.woff2 +0 -0
  1091. package/themes/mandelbrot/fonts/hack-regular-webfont.woff +0 -0
  1092. package/themes/mandelbrot/fonts/hack-regular-webfont.woff2 +0 -0
  1093. package/themes/mandelbrot/img/favicon.png +0 -0
  1094. package/themes/mandelbrot/img/icon-drag--horizontal.svg +3 -0
  1095. package/themes/mandelbrot/img/icon-drag--vertical.svg +3 -0
  1096. package/themes/mandelbrot/img/icon-navigation-closed-ltr.svg +3 -0
  1097. package/themes/mandelbrot/img/icon-navigation-closed-rtl.svg +3 -0
  1098. package/themes/mandelbrot/img/icon-navigation-opened.svg +3 -0
  1099. package/themes/mandelbrot/img/icon-window.svg +3 -0
  1100. package/themes/mandelbrot/img/loader.svg +37 -0
  1101. package/themes/mandelbrot/js/mandelbrot.js +2 -0
  1102. package/themes/mandelbrot/js/mandelbrot.js.map +1 -0
package/components/render/generic-card-default-small.html ADDED
@@ -0,0 +1,23 @@
1
+
2
+
3
+ <div class="row card-row">
4
+ <div class="col-12 col-md-3">
5
+ <div class="msds-generic-card msds-generic-card--small msds-generic-card--vertical-aligned">
6
+ <a href="#" class="msds-generic-card--link">
7
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
8
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
9
+ alt="Card image">
10
+ </div>
11
+ <div class="msds-generic-card__body">
12
+ <h3 class="msds-generic-card__body-heading">
13
+ Headline lorem ipsum
14
+ </h3>
15
+ <p class="msds-generic-card__body-description">
16
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
17
+ </p>
18
+ </div>
19
+ </a>
20
+ </div>
21
+ </div>
22
+ </div>
23
+
package/components/render/generic-card-default-svg-dark.html ADDED
@@ -0,0 +1,22 @@
1
+
2
+
3
+ <div class="row card-row">
4
+ <div class="col-12 col-md-4">
5
+ <div
6
+ class="msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--dark-theme msds-generic-card--svg">
7
+ <a href="#" class="msds-generic-card--link">
8
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1">
9
+ <div class="msds-generic-card__frame-image embed-responsive-item msds-no-backup"></div>
10
+ </div>
11
+ <div class="msds-generic-card__body">
12
+ <h3 class="msds-generic-card__body-heading">
13
+ Headline lorem ipsum
14
+ </h3>
15
+ <p class="msds-generic-card__body-description">
16
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
17
+ </p>
18
+ </div>
19
+ </a>
20
+ </div>
21
+ </div>
22
+ </div>
package/components/render/generic-card-default-svg.html ADDED
@@ -0,0 +1,21 @@
1
+
2
+
3
+ <div class="row card-row">
4
+ <div class="col-12 col-md-4">
5
+ <div class="msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--svg">
6
+ <a href="#" class="msds-generic-card--link">
7
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1">
8
+ <div class="msds-generic-card__frame-image embed-responsive-item msds-no-backup"></div>
9
+ </div>
10
+ <div class="msds-generic-card__body">
11
+ <h3 class="msds-generic-card__body-heading">
12
+ Headline lorem ipsum
13
+ </h3>
14
+ <p class="msds-generic-card__body-description">
15
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
16
+ </p>
17
+ </div>
18
+ </a>
19
+ </div>
20
+ </div>
21
+ </div>
package/components/render/generic-card-default.html ADDED
@@ -0,0 +1,24 @@
1
+
2
+
3
+ <div class="row card-row">
4
+ <div class="col-12 col-md-4">
5
+ <div class="msds-generic-card msds-generic-card--vertical-aligned">
6
+ <a href="#" class="msds-generic-card--link">
7
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
8
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
9
+ alt="Card image">
10
+ </div>
11
+ <div class="msds-generic-card__body">
12
+ <h3 class="msds-generic-card__body-heading">
13
+ Headline lorem ipsum
14
+ </h3>
15
+ <p class="msds-generic-card__body-description">
16
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
17
+ </p>
18
+ </div>
19
+ </a>
20
+ </div>
21
+ </div>
22
+ </div>
23
+
24
+
package/components/render/generic-card-media-dark-theme.html ADDED
@@ -0,0 +1,38 @@
1
+
2
+
3
+ <h2>Large Media cards</h2>
4
+ <div class="row card-row">
5
+ <div class="col-12 col-md-4">
6
+ <div class="msds-generic-card msds-generic-card--media msds-generic-card--dark-theme msds-generic-card--vertical-aligned">
7
+ <a href="#" class="msds-generic-card--link">
8
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
9
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
10
+ alt="Card image">
11
+ </div>
12
+ <div class="msds-generic-card__body">
13
+ <p class="msds-generic-card__body-text-above-headline">
14
+ MIPS 2020
15
+ </p>
16
+ <div class="msds-generic-card__body-heading">
17
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
18
+ </div>
19
+ </div>
20
+ </a>
21
+
22
+ <div class="msds-generic-card__media-info">
23
+ <div class="msds-generic-card__media-type">
24
+ <svg class="msds-generic-card__media-icon">
25
+ <use href="../../msds-spritemap.svg#article" />
26
+ </svg>
27
+ Article
28
+ </div>
29
+ <div class="msds-generic-card__media-duration">
30
+ <svg class="msds-generic-card__media-icon">
31
+ <use href="../../msds-spritemap.svg#clock" />
32
+ </svg>
33
+ 6 min. read
34
+ </div>
35
+ </div>
36
+ </div>
37
+ </div>
38
+ </div>
package/components/render/generic-card-media-floating-icon.html ADDED
@@ -0,0 +1,44 @@
1
+
2
+
3
+ <div class="row card-row">
4
+ <div class="col-12 col-md-4">
5
+ <div class="msds-generic-card msds-generic-card--media">
6
+ <a href="#" class="msds-generic-card--link">
7
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
8
+ <div class="msds-generic-card__media-container">
9
+ <div class="msds-generic-card__floating-icon-container">
10
+ <svg class="msds-generic-card__floating-icon">
11
+ <use class="msds-generic-card__floating-icon"
12
+ href="../../msds-spritemap.svg#play" />
13
+ </svg>
14
+ </div>
15
+ </div>
16
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
17
+ alt="Card image">
18
+ </div>
19
+ <div class="msds-generic-card__body">
20
+ <p class="msds-generic-card__body-text-above-headline">
21
+ MIPS 2020
22
+ </p>
23
+ <div class="msds-generic-card__body-heading">
24
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
25
+ </div>
26
+ </div>
27
+ </a>
28
+ <div class="msds-generic-card__media-info">
29
+ <div class="msds-generic-card__media-type">
30
+ <svg class="msds-generic-card__media-icon">
31
+ <use href="../../msds-spritemap.svg#article" />
32
+ </svg>
33
+ Article
34
+ </div>
35
+ <div class="msds-generic-card__media-duration">
36
+ <svg class="msds-generic-card__media-icon">
37
+ <use href="../../msds-spritemap.svg#clock" />
38
+ </svg>
39
+ 6 min. read
40
+ </div>
41
+ </div>
42
+ </div>
43
+ </div>
44
+ </div>
package/components/render/generic-card-media-small.html ADDED
@@ -0,0 +1,36 @@
1
+
2
+
3
+ <div class="row card-row">
4
+ <div class="col-12 col-md-3">
5
+ <div class="msds-generic-card msds-generic-card--media msds-generic-card--small msds-generic-card--vertical-aligned">
6
+ <a href="#" class="msds-generic-card--link">
7
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
8
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
9
+ alt="Card image">
10
+ </div>
11
+ <div class="msds-generic-card__body">
12
+ <p class="msds-generic-card__body-text-above-headline">
13
+ MIPS 2020
14
+ </p>
15
+ <div class="msds-generic-card__body-heading">
16
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
17
+ </div>
18
+ </div>
19
+ </a>
20
+ <div class="msds-generic-card__media-info">
21
+ <div class="msds-generic-card__media-type">
22
+ <svg class="msds-generic-card__media-icon">
23
+ <use href="../../msds-spritemap.svg#article" />
24
+ </svg>
25
+ Article
26
+ </div>
27
+ <div class="msds-generic-card__media-duration">
28
+ <svg class="msds-generic-card__media-icon">
29
+ <use href="../../msds-spritemap.svg#clock" />
30
+ </svg>
31
+ 6 min. read
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </div>
package/components/render/generic-card-media.html ADDED
@@ -0,0 +1,36 @@
1
+
2
+
3
+ <div class="row card-row">
4
+ <div class="col-12 col-md-4">
5
+ <div class="msds-generic-card msds-generic-card--media msds-generic-card--vertical-aligned">
6
+ <a href="#" class="msds-generic-card--link">
7
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
8
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
9
+ alt="Card image">
10
+ </div>
11
+ <div class="msds-generic-card__body">
12
+ <p class="msds-generic-card__body-text-above-headline">
13
+ MIPS 2020
14
+ </p>
15
+ <div class="msds-generic-card__body-heading">
16
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
17
+ </div>
18
+ </div>
19
+ </a>
20
+ <div class="msds-generic-card__media-info">
21
+ <div class="msds-generic-card__media-type">
22
+ <svg class="msds-generic-card__media-icon">
23
+ <use href="../../msds-spritemap.svg#article" />
24
+ </svg>
25
+ Article
26
+ </div>
27
+ <div class="msds-generic-card__media-duration">
28
+ <svg class="msds-generic-card__media-icon">
29
+ <use href="../../msds-spritemap.svg#clock" />
30
+ </svg>
31
+ 6 min. read
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </div>
package/components/render/generic-card-overview.html ADDED
@@ -0,0 +1,54 @@
1
+
2
+
3
+ <div class="row card-row">
4
+ <div class="col-12 col-md-4">
5
+ <div class="msds-generic-card msds-generic-card--vertical-aligned">
6
+ <a href="#" class="msds-generic-card--link">
7
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
8
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
9
+ alt="Card image">
10
+ </div>
11
+ <div class="msds-generic-card__body">
12
+ <h3 class="msds-generic-card__body-heading">
13
+ Headline lorem ipsum
14
+ </h3>
15
+ <p class="msds-generic-card__body-description">
16
+ Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
17
+ </p>
18
+ </div>
19
+ </a>
20
+ </div>
21
+ </div>
22
+ <div class="col-12 col-md-4">
23
+ <div class="msds-generic-card msds-generic-card--media msds-generic-card--vertical-aligned">
24
+ <a href="#" class="msds-generic-card--link">
25
+ <div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
26
+ <img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
27
+ alt="Card image">
28
+ </div>
29
+ <div class="msds-generic-card__body">
30
+ <p class="msds-generic-card__body-text-above-headline">
31
+ MIPS 2020
32
+ </p>
33
+ <div class="msds-generic-card__body-heading">
34
+ Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
35
+ </div>
36
+ </div>
37
+ </a>
38
+ <div class="msds-generic-card__media-info">
39
+ <div class="msds-generic-card__media-type">
40
+ <svg class="msds-generic-card__media-icon">
41
+ <use href="../../msds-spritemap.svg#article" />
42
+ </svg>
43
+ Article
44
+ </div>
45
+ <div class="msds-generic-card__media-duration">
46
+ <svg class="msds-generic-card__media-icon">
47
+ <use href="../../msds-spritemap.svg#clock" />
48
+ </svg>
49
+ 6 min. read
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </div>
package/components/render/generic-flat-icons.html ADDED
@@ -0,0 +1,3 @@
1
+
2
+
3
+ <div class='msds-generic-flat-icons' data-path="../../msds-spritemap.svg"></div>
package/components/render/generic-rich-icons.html ADDED
@@ -0,0 +1,3 @@
1
+
2
+
3
+ <div class='msds-generic-rich-icons'></div>
package/components/render/global-colors-alternative.html ADDED
@@ -0,0 +1,13 @@
1
+
2
+
3
+ <div class="color-container">
4
+ <div class="color-square msds-text-white msds-bg-alt-blue-1">Alt blue 1<span class="variable-name">$alt-blue-1</span></div>
5
+ <div class="color-square msds-text-white msds-bg-alt-blue-2">alt blue 2<span class="variable-name">$alt-blue-2</span></div>
6
+ <div class="color-square msds-text-white msds-bg-alt-blue-3">alt blue 3<span class="variable-name">$alt-blue-3</span></div>
7
+ <div class="color-square msds-text-black msds-bg-alt-yellow-1">alt yellow 1<span class="variable-name">$alt-yellow-1</span></div>
8
+ <div class="color-square msds-text-black msds-bg-alt-yellow-2">alt yellow 2<span class="variable-name">$alt-yellow-2</span></div>
9
+ <div class="color-square msds-text-white msds-bg-confirm-green">confirm green<span class="variable-name">$confirm-green</span></div>
10
+ <div class="color-square msds-text-white msds-bg-danger-red-1">danger red 1<span class="variable-name">$danger-red-1</span></div>
11
+ <div class="color-square msds-text-white msds-bg-danger-red-2">danger red 2<span class="variable-name">$danger-red-2</span></div>
12
+ <div class="color-square msds-text-white msds-bg-sand">sand<span class="variable-name">$sand</span></div>
13
+ </div>
package/components/render/global-colors-gradients.html ADDED
@@ -0,0 +1,17 @@
1
+
2
+
3
+ <div class="color-container">
4
+ <div class="color-square msds-text-white msds-bg-clear-blue-gradient">clear blue gradient<span class="variable-name">$clear-blue-gradient</span></div>
5
+ <div class="color-square msds-text-white msds-bg-clear-blue-gradient-reverse">clear blue gradient reverse<span class="variable-name">$clear-blue-gradient-reverse</span></div>
6
+ <div class="color-square msds-text-white msds-bg-dark-blue-gradient">dark blue gradient<span class="variable-name">$dark-blue-gradient</span></div>
7
+ <div class="color-square msds-text-white msds-bg-dark-blue-gradient-reverse">dark blue gradient reverse<span class="variable-name">$dark-blue-gradient-reverse</span></div>
8
+ <div class="color-square msds-text-white msds-bg-dark-blue-gradient">dark blue gradient<span class="variable-name">$dark-blue-gradient</span></div>
9
+ <div class="color-square msds-text-white msds-bg-mixed-blue-gradient">mixed blue gradient<span class="variable-name">$mixed-blue-gradient</span></div>
10
+ <div class="color-square msds-text-white msds-bg-mixed-blue-gradient-reverse">mixed blue gradient reverse<span class="variable-name">$mixed-blue-gradient-reverse</span></div>
11
+ <div class="color-square msds-text-black msds-bg-yellow-gradient">yellow gradient<span class="variable-name">$yellow-gradient</span></div>
12
+ <div class="color-square msds-text-black msds-bg-gray-gradient-1">gray gradient 1<span class="variable-name">$gray-gradient-1</span></div>
13
+ <div class="color-square msds-text-black msds-bg-gray-gradient-2">gray gradient 2<span class="variable-name">$gray-gradient-2</span></div>
14
+ <div class="color-square msds-text-black msds-bg-gray-gradient-3">gray gradient 3<span class="variable-name">$gray-gradient-3</span></div>
15
+ <div class="color-square msds-text-black msds-bg-gray-gradient-4">gray gradient 4<span class="variable-name">$gray-gradient-4</span></div>
16
+ <div class="color-square msds-text-black msds-bg-gray-gradient-5">gray gradient 5<span class="variable-name">$gray-gradient-5</span></div>
17
+ </div>
package/components/render/global-colors-gray-white-black.html ADDED
@@ -0,0 +1,16 @@
1
+
2
+
3
+ <div class="color-container">
4
+ <div class="color-square msds-text-black msds-bg-gray-1">gray 1<span class="variable-name">$gray-1</span></div>
5
+ <div class="color-square msds-text-black msds-bg-gray-2">gray 2<span class="variable-name">$gray-2</span></div>
6
+ <div class="color-square msds-text-black msds-bg-gray-3">gray 3<span class="variable-name">$gray-3</span></div>
7
+ <div class="color-square msds-text-black msds-bg-gray-4">gray 4<span class="variable-name">$gray-4</span></div>
8
+ <div class="color-square msds-text-black msds-bg-gray-5">gray 5<span class="variable-name">$gray-5</span></div>
9
+ <div class="color-square msds-text-black msds-bg-gray-6">gray 6<span class="variable-name">$gray-6</span></div>
10
+ <div class="color-square msds-text-white msds-bg-gray-7">gray 7<span class="variable-name">$gray-7</span></div>
11
+ <div class="color-square msds-text-white msds-bg-gray-8">gray 8<span class="variable-name">$gray-8</span></div>
12
+ <div class="color-square msds-text-white msds-bg-gray-9">gray 9<span class="variable-name">$gray-9</span></div>
13
+ <div class="color-square msds-text-white msds-bg-gray-10">gray 10<span class="variable-name">$gray-10</span></div>
14
+ <div class="color-square msds-text-black msds-bg-white">white<span class="variable-name">$white</span></div>
15
+ <div class="color-square msds-text-white msds-bg-black">black<span class="variable-name">$black</span></div>
16
+ </div>
package/components/render/global-colors-primary.html ADDED
@@ -0,0 +1,7 @@
1
+
2
+
3
+ <div class="color-container">
4
+ <div class="color-square msds-text-white msds-bg-clear-blue">Milestone clear blue<span class="variable-name">$clear-blue</span></div>
5
+ <div class="color-square msds-text-white msds-bg-dark-blue">Milestone dark blue<span class="variable-name">$dark-blue</span></div>
6
+ <div class="color-square msds-text-black msds-bg-yellow">Milestone yellow<span class="variable-name">$yellow</span></div>
7
+ </div>
package/components/render/global-colors-shadows.html ADDED
@@ -0,0 +1,8 @@
1
+
2
+
3
+ <div class="color-container" style="background: white; padding: 30px 0 30px 0;">
4
+ <div style="height: 170px; width: 170px; border-radius: 50%;" class="color-square msds-bg-white msds-text-black msds-shadow-small">shadow small<span class="variable-name">$shadow-small</span></div>
5
+ <div style="height: 170px; width: 170px; border-radius: 50%;" class="color-square msds-bg-white msds-text-black msds-shadow-medium">shadow medium<span class="variable-name">$shadow-medium</span></div>
6
+ <div style="height: 170px; width: 170px; border-radius: 50%;" class="color-square msds-bg-white msds-text-black msds-shadow-large">shadow large<span class="variable-name">$shadow-large</span></div>
7
+ </div>
8
+
package/components/render/global-colors-transparency.html ADDED
@@ -0,0 +1,18 @@
1
+
2
+
3
+ <div class="color-container">
4
+ <div class="color-square msds-text-black msds-white-50-transparent">white 50%<span class="variable-name">$rgba-7</span></div>
5
+ <div class="color-square msds-text-black msds-white-30-transparent">white 30%<span class="variable-name">$rgba-8</span></div>
6
+ <div class="color-square msds-text-black msds-white-10-transparent">white 10%<span class="variable-name">$rgba-9</span></div>
7
+ <div class="color-square msds-text-white msds-black-30-transparent">black 30%<span class="variable-name">$rgba-10</span></div>
8
+ <div class="color-square msds-text-black msds-black-10-transparent">black 10%<span class="variable-name">$rgba-11</span></div>
9
+ <div class="color-square msds-text-black msds-black-3-transparent">black 3%<span class="variable-name">$rgba-16</span></div>
10
+ <div class="color-square msds-text-black msds-gray-6-50-transparent">gray 6 50%<span class="variable-name">$rgba-12</span></div>
11
+ <div class="color-square msds-text-black msds-gray-7-50-transparent">gray 7 50%<span class="variable-name">$rgba-4</span></div>
12
+ <div class="color-square msds-text-black msds-gray-8-50-transparent">gray 8 50%<span class="variable-name">$rgba-13</span></div>
13
+ <div class="color-square msds-text-black msds-dark-blue-12-transparent">dark blue 12%<span class="variable-name">$rgba-2</span></div>
14
+ <div class="color-square msds-text-black msds-dark-blue-17-transparent">dark blue 17%<span class="variable-name">$rgba-1</span></div>
15
+ <div class="color-square msds-text-black msds-dark-blue-30-transparent">dark blue 30%<span class="variable-name">$rgba-6</span></div>
16
+ <div class="color-square msds-text-white msds-danger-red-50-transparent">danger red 50%<span class="variable-name">$rgba-5</span></div>
17
+ <div class="color-square msds-text-white msds-clear-blue-50-transparent">clear blue 50%<span class="variable-name">$rgba-3</span></div>
18
+ </div>
package/components/render/global-margins.html ADDED
@@ -0,0 +1,25 @@
1
+
2
+
3
+ <div class="container">
4
+ <div class="row">
5
+ <div class="col-12">
6
+ <h2>Below is an attempt to illustrate the different spacers.</h2>
7
+ <p>The spacer is the distance between the 2 elements, for more info go to component documentation or <a href="https://getbootstrap.com/docs/4.3/utilities/spacing/">Bootstrap documentation on spacing</a> </p>
8
+ <div><span class="spacing-preview msds-bg-clear-blue mr-1">mr-1</span><span class="spacing-preview msds-bg-yellow">end</span></div>
9
+ <div><span class="spacing-preview msds-bg-clear-blue mr-2">mr-2</span><span class="spacing-preview msds-bg-yellow">end</span></div>
10
+ <div><span class="spacing-preview msds-bg-clear-blue mr-3">mr-3</span><span class="spacing-preview msds-bg-yellow">end</span></div>
11
+ <div><span class="spacing-preview msds-bg-clear-blue mr-4">mr-4</span><span class="spacing-preview msds-bg-yellow">end</span></div>
12
+ <div><span class="spacing-preview msds-bg-clear-blue mr-5">mr-5</span><span class="spacing-preview msds-bg-yellow">end</span></div>
13
+ <div><span class="spacing-preview msds-bg-clear-blue mr-6">mr-6</span><span class="spacing-preview msds-bg-yellow">end</span></div>
14
+ <div><span class="spacing-preview msds-bg-clear-blue mr-7">mr-7</span><span class="spacing-preview msds-bg-yellow">end</span></div>
15
+ <div><span class="spacing-preview msds-bg-clear-blue mr-8">mr-8</span><span class="spacing-preview msds-bg-yellow">end</span></div>
16
+ <div><span class="spacing-preview msds-bg-clear-blue mr-9">mr-9</span><span class="spacing-preview msds-bg-yellow">end</span></div>
17
+ <div><span class="spacing-preview msds-bg-clear-blue mr-10">mr-10</span><span class="spacing-preview msds-bg-yellow">end</span></div>
18
+ <div><span class="spacing-preview msds-bg-clear-blue mr-11">mr-11</span><span class="spacing-preview msds-bg-yellow">end</span></div>
19
+ <div><span class="spacing-preview msds-bg-clear-blue mr-12">mr-12</span><span class="spacing-preview msds-bg-yellow">end</span></div>
20
+ <div><span class="spacing-preview msds-bg-clear-blue mr-13">mr-13</span><span class="spacing-preview msds-bg-yellow">end</span></div>
21
+ <div><span class="spacing-preview msds-bg-clear-blue mr-14">mr-14</span><span class="spacing-preview msds-bg-yellow">end</span></div>
22
+ <div><span class="spacing-preview msds-bg-clear-blue mr-15">mr-15</span><span class="spacing-preview msds-bg-yellow">end</span></div>
23
+ </div>
24
+ </div>
25
+ </div>
package/components/render/global-paddings.html ADDED
@@ -0,0 +1,4 @@
1
+
2
+
3
+ <h2>Coming Soon</h2>
4
+
package/components/render/gradient-background-colors.html ADDED
@@ -0,0 +1,118 @@
1
+
2
+
3
+ <div class="row">
4
+ <div class="col-12 col-sm-4 mb-4">
5
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-white-gradient">
6
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">White Gradient</div>
7
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-white-gradient</div>
8
+ </div>
9
+ </div>
10
+ <div class="col-12 col-sm-4 mb-4">
11
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-white-gradient-reverse">
12
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">White Gradient Reverse</div>
13
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-white-gradient-reverse</div>
14
+ </div>
15
+ </div>
16
+ <div class="col-12 col-sm-4 mb-4">
17
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-gray-gradient-1">
18
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Gray Gradient 1</div>
19
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-gray-gradient-1</div>
20
+ </div>
21
+ </div>
22
+ <div class="col-12 col-sm-4 mb-4">
23
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-gray-gradient-2">
24
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Gray Gradient 2</div>
25
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-gray-gradient-2</div>
26
+ </div>
27
+ </div>
28
+ <div class="col-12 col-sm-4 mb-4">
29
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-gray-gradient-3">
30
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Gray Gradient 3</div>
31
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-gray-gradient-3</div>
32
+ </div>
33
+ </div>
34
+ <div class="col-12 col-sm-4 mb-4">
35
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-gray-gradient-4">
36
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Gray Gradient 4</div>
37
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-gray-gradient-4</div>
38
+ </div>
39
+ </div>
40
+ <div class="col-12 col-sm-4 mb-4">
41
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-gray-gradient-5">
42
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Gray Gradient 5</div>
43
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-gray-gradient-5</div>
44
+ </div>
45
+ </div>
46
+ <div class="col-12 col-sm-4 mb-4">
47
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-gray-gradient-6">
48
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Gray Gradient 6</div>
49
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-gray-gradient-6</div>
50
+ </div>
51
+ </div>
52
+ <div class="col-12 col-sm-4 mb-4">
53
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-gray-gradient-6-reverse">
54
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Gray Gradient 6 Reverse</div>
55
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-gray-gradient-6-reverse</div>
56
+ </div>
57
+ </div>
58
+ <div class="col-12 col-sm-4 mb-4">
59
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-yellow-gradient">
60
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Yellow Gradient</div>
61
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-yellow-gradient</div>
62
+ </div>
63
+ </div>
64
+ <div class="col-12 col-sm-4 mb-4">
65
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-blue-to-yellow-gradient">
66
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Blue To Yellow Gradient</div>
67
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-blue-to-yellow-gradient</div>
68
+ </div>
69
+ </div>
70
+ <div class="col-12 col-sm-4 mb-4">
71
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-clear-blue-gradient">
72
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Clear Blue Gradient</div>
73
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-clear-blue-gradient</div>
74
+ </div>
75
+ </div>
76
+ <div class="col-12 col-sm-4 mb-4">
77
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-clear-blue-gradient-2">
78
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Clear Blue Gradient 2</div>
79
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-clear-blue-gradient-2</div>
80
+ </div>
81
+ </div>
82
+ <div class="col-12 col-sm-4 mb-4">
83
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-clear-blue-gradient-2-reverse">
84
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Clear Blue Gradient 2 Reverse</div>
85
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-clear-blue-gradient-2-reverse</div>
86
+ </div>
87
+ </div>
88
+ <div class="col-12 col-sm-4 mb-4">
89
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-dark-blue-gradient">
90
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Dark Blue Gradient</div>
91
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-dark-blue-gradient</div>
92
+ </div>
93
+ </div>
94
+ <div class="col-12 col-sm-4 mb-4">
95
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-dark-blue-gradient-2">
96
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Dark Blue Gradient 2</div>
97
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-dark-blue-gradient-2</div>
98
+ </div>
99
+ </div>
100
+ <div class="col-12 col-sm-4 mb-4">
101
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-dark-blue-gradient-2-reverse">
102
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Dark Blue Gradient 2 Reverse</div>
103
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-dark-blue-gradient-2-reverse</div>
104
+ </div>
105
+ </div>
106
+ <div class="col-12 col-sm-4 mb-4">
107
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-mixed-blue-gradient">
108
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Mixed Blue Gradient</div>
109
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-mixed-blue-gradient</div>
110
+ </div>
111
+ </div>
112
+ <div class="col-12 col-sm-4 mb-4">
113
+ <div class="d-flex flex-column justify-content-center align-items-center p-6 msds-bg-husky-dark-blue-gradient">
114
+ <div class="msds-text-header-3 msds-text-danger-red-2 mb-2">Husky Dark Blue Gradient</div>
115
+ <div class="msds-text-body-2 msds-text-danger-red-2">msds-bg-husky-dark-blue-gradient</div>
116
+ </div>
117
+ </div>
118
+ </div>
package/components/render/input-disabled.html ADDED
@@ -0,0 +1,30 @@
1
+
2
+
3
+ <form class="msds-forms">
4
+ <div class="container">
5
+ <div class="row">
6
+ <div class="col-12 col-md-6">
7
+ <div class="msds-input">
8
+ <div class="msds-input__icon-wrapper">
9
+ <input type="text" disabled="disabled" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-disabled-lg">
10
+ <label for="text-input-disabled-lg" class="msds-input__label">Enter your e-mail*</label>
11
+ </div>
12
+ <p class="msds-input__info-message">
13
+ We'll never share your email with anyone else.
14
+ </p>
15
+ </div>
16
+ </div>
17
+ <div class="col-12 col-md-6">
18
+ <div class="msds-input msds-input--small">
19
+ <div class="msds-input__icon-wrapper">
20
+ <input type="text" disabled="disabled" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-disabled-sm">
21
+ <label for="text-input-disabled-sm" class="msds-input__label">Enter your e-mail*</label>
22
+ </div>
23
+ <p class="msds-input__info-message">
24
+ We'll never share your email with anyone else.
25
+ </p>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ </div>
30
+ </form>