@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/buttons-overview.html ADDED
@@ -0,0 +1,484 @@
1
+
2
+
3
+ <div class="container">
4
+ <div class="row">
5
+ <div class="col-12">
6
+ <br /><br />
7
+ <h1>Milestone buttons</h1>
8
+ <h2>All type of buttons</h2>
9
+ <h3>Without Icons</h3>
10
+ <div class="msds-btn-group--left">
11
+ <button type="button" class="msds-btn msds-btn--primary">Primary</button>
12
+ <button type="button" class="msds-btn msds-btn--secondary">Secondary</button>
13
+ <button type="button" class="msds-btn msds-btn--tertiary">Tertiary</button>
14
+ <button type="button" class="msds-btn msds-btn--gray">Gray</button>
15
+ <button type="button" class="msds-btn msds-btn--danger">Danger</button>
16
+ </div>
17
+ <h3>With Icons</h3>
18
+ <div class="msds-btn-group--left">
19
+ <button type="button" class="msds-btn msds-btn--primary ">
20
+ Primary
21
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
22
+ </button>
23
+ <button type="button" class="msds-btn msds-btn--secondary ">
24
+ Secondary
25
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
26
+ </button>
27
+ <button type="button" class="msds-btn msds-btn--tertiary ">
28
+ Tertiary
29
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
30
+ </button>
31
+ <button type="button" class="msds-btn msds-btn--gray ">
32
+ Gray
33
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
34
+ </button>
35
+ <button type="button" class="msds-btn msds-btn--danger ">
36
+ Danger
37
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
38
+ </button>
39
+ </div>
40
+ <br /><br /><br />
41
+ <h2>Primary Button</h2>
42
+ <h3>Large</h3>
43
+ <div class="msds-btn-group--left">
44
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Enabled</button>
45
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--lg ">
46
+ With icon, enabled
47
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
48
+ </button>
49
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Hover</button>
50
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--lg ">
51
+ With icon, hover
52
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
53
+ </button>
54
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Active (pressed)</button>
55
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--lg ">
56
+ With icon, active (pressed)
57
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
58
+ </button>
59
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--lg">Focus</button>
60
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--lg ">
61
+ With icon, focus
62
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
63
+ </button>
64
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--lg" disabled>Disabled</button>
65
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--lg " disabled>
66
+ With icon, disabled
67
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
68
+ </button>
69
+ </div>
70
+ <br />
71
+ <h3>Medium</h3>
72
+ <div class="msds-btn-group--left">
73
+ <button type="button" class="msds-btn msds-btn--primary">Enabled</button>
74
+ <button type="button" class="msds-btn msds-btn--primary ">
75
+ With icon, enabled
76
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
77
+ </button>
78
+ <button type="button" class="msds-btn msds-btn--primary">Hover</button>
79
+ <button type="button" class="msds-btn msds-btn--primary ">
80
+ With icon, hover
81
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
82
+ </button>
83
+ <button type="button" class="msds-btn msds-btn--primary">Active (pressed)</button>
84
+ <button type="button" class="msds-btn msds-btn--primary ">
85
+ With icon, active (pressed)
86
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
87
+ </button>
88
+ <button type="button" class="msds-btn msds-btn--primary">Focus</button>
89
+ <button type="button" class="msds-btn msds-btn--primary ">
90
+ With icon, focus
91
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
92
+ </button>
93
+ <button type="button" class="msds-btn msds-btn--primary" disabled>Disabled</button>
94
+ <button type="button" class="msds-btn msds-btn--primary " disabled>
95
+ With icon, disabled
96
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
97
+ </button>
98
+ </div>
99
+ <br />
100
+ <h3>Small</h3>
101
+ <div class="msds-btn-group--left">
102
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--sm">Enabled</button>
103
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--sm ">
104
+ With icon, enabled
105
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
106
+ </button>
107
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--sm">Hover</button>
108
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--sm ">
109
+ With icon, hover
110
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
111
+ </button>
112
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--sm">Active (pressed)</button>
113
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--sm ">
114
+ With icon, active (pressed)
115
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
116
+ </button>
117
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--sm">Focus</button>
118
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--sm ">
119
+ With icon, focus
120
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
121
+ </button>
122
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--sm" disabled>Disabled</button>
123
+ <button type="button" class="msds-btn msds-btn--primary msds-btn--sm " disabled>
124
+ With icon, disabled
125
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
126
+ </button>
127
+ </div>
128
+ <br /><br /><br />
129
+ <h2>Secondary Button</h2>
130
+ <h3>Large</h3>
131
+ <div class="msds-btn-group--left">
132
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--lg">Enabled</button>
133
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--lg ">
134
+ With icon, enabled
135
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
136
+ </button>
137
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--lg">Hover</button>
138
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--lg ">
139
+ With icon, hover
140
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
141
+ </button>
142
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--lg">Active (pressed)</button>
143
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--lg ">
144
+ With icon, active (pressed)
145
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
146
+ </button>
147
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--lg">Focus</button>
148
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--lg ">
149
+ With icon, focus
150
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
151
+ </button>
152
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--lg" disabled>Disabled</button>
153
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--lg " disabled>
154
+ With icon, disabled
155
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
156
+ </button>
157
+ </div>
158
+ <br />
159
+ <h3>Medium</h3>
160
+ <div class="msds-btn-group--left">
161
+ <button type="button" class="msds-btn msds-btn--secondary">Enabled</button>
162
+ <button type="button" class="msds-btn msds-btn--secondary ">
163
+ With icon, enabled
164
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
165
+ </button>
166
+ <button type="button" class="msds-btn msds-btn--secondary">Hover</button>
167
+ <button type="button" class="msds-btn msds-btn--secondary ">
168
+ With icon, hover
169
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
170
+ </button>
171
+ <button type="button" class="msds-btn msds-btn--secondary">Active (pressed)</button>
172
+ <button type="button" class="msds-btn msds-btn--secondary ">
173
+ With icon, active (pressed)
174
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
175
+ </button>
176
+ <button type="button" class="msds-btn msds-btn--secondary">Focus</button>
177
+ <button type="button" class="msds-btn msds-btn--secondary ">
178
+ With icon, focus
179
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
180
+ </button>
181
+ <button type="button" class="msds-btn msds-btn--secondary" disabled>Disabled</button>
182
+ <button type="button" class="msds-btn msds-btn--secondary " disabled>
183
+ With icon, disabled
184
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
185
+ </button>
186
+ </div>
187
+ <br />
188
+ <h3>Small</h3>
189
+ <div class="msds-btn-group--left">
190
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">Enabled</button>
191
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm ">
192
+ With icon, enabled
193
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
194
+ </button>
195
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">Hover</button>
196
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm ">
197
+ With icon, hover
198
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
199
+ </button>
200
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">Active (pressed)</button>
201
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm ">
202
+ With icon, active (pressed)
203
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
204
+ </button>
205
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">Focus</button>
206
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm ">
207
+ With icon, focus
208
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
209
+ </button>
210
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm" disabled>Disabled</button>
211
+ <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm " disabled>
212
+ With icon, disabled
213
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
214
+ </button>
215
+ </div>
216
+ <br /><br /><br />
217
+ <h2>Tertiary Button</h2>
218
+ <h3>Large</h3>
219
+ <div class="msds-btn-group--left">
220
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg">Enabled</button>
221
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg ">
222
+ With icon, enabled
223
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
224
+ </button>
225
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg">Hover</button>
226
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg ">
227
+ With icon, hover
228
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
229
+ </button>
230
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg">Active (pressed)</button>
231
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg ">
232
+ With icon, active (pressed)
233
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
234
+ </button>
235
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg">Focus</button>
236
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg ">
237
+ With icon, focus
238
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
239
+ </button>
240
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg" disabled>Disabled</button>
241
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--lg " disabled>
242
+ With icon, disabled
243
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
244
+ </button>
245
+ </div>
246
+ <br />
247
+ <h3>Medium</h3>
248
+ <div class="msds-btn-group--left">
249
+ <button type="button" class="msds-btn msds-btn--tertiary">Enabled</button>
250
+ <button type="button" class="msds-btn msds-btn--tertiary ">
251
+ With icon, enabled
252
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
253
+ </button>
254
+ <button type="button" class="msds-btn msds-btn--tertiary">Hover</button>
255
+ <button type="button" class="msds-btn msds-btn--tertiary ">
256
+ With icon, hover
257
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
258
+ </button>
259
+ <button type="button" class="msds-btn msds-btn--tertiary">Active (pressed)</button>
260
+ <button type="button" class="msds-btn msds-btn--tertiary ">
261
+ With icon, active (pressed)
262
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
263
+ </button>
264
+ <button type="button" class="msds-btn msds-btn--tertiary">Focus</button>
265
+ <button type="button" class="msds-btn msds-btn--tertiary ">
266
+ With icon, focus
267
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
268
+ </button>
269
+ <button type="button" class="msds-btn msds-btn--tertiary" disabled>Disabled</button>
270
+ <button type="button" class="msds-btn msds-btn--tertiary " disabled>
271
+ With icon, disabled
272
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
273
+ </button>
274
+ </div>
275
+ <br />
276
+ <h3>Small</h3>
277
+ <div class="msds-btn-group--left">
278
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm">Enabled</button>
279
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm ">
280
+ With icon, enabled
281
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
282
+ </button>
283
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm">Hover</button>
284
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm ">
285
+ With icon, hover
286
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
287
+ </button>
288
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm">Active (pressed)</button>
289
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm ">
290
+ With icon, active (pressed)
291
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
292
+ </button>
293
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm">Focus</button>
294
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm ">
295
+ With icon, focus
296
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
297
+ </button>
298
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm" disabled>Disabled</button>
299
+ <button type="button" class="msds-btn msds-btn--tertiary msds-btn--sm " disabled>
300
+ With icon, disabled
301
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
302
+ </button>
303
+ </div>
304
+ <br /><br /><br />
305
+ <h2>Gray Button</h2>
306
+ <h3>Large</h3>
307
+ <div class="msds-btn-group--left">
308
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--lg">Enabled</button>
309
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--lg ">
310
+ With icon, enabled
311
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
312
+ </button>
313
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--lg">Hover</button>
314
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--lg ">
315
+ With icon, hover
316
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
317
+ </button>
318
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--lg">Active (pressed)</button>
319
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--lg ">
320
+ With icon, active (pressed)
321
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
322
+ </button>
323
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--lg">Focus</button>
324
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--lg ">
325
+ With icon, focus
326
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
327
+ </button>
328
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--lg" disabled>Disabled</button>
329
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--lg " disabled>
330
+ With icon, disabled
331
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
332
+ </button>
333
+ </div>
334
+ <br />
335
+ <h3>Medium</h3>
336
+ <div class="msds-btn-group--left">
337
+ <button type="button" class="msds-btn msds-btn--gray">Enabled</button>
338
+ <button type="button" class="msds-btn msds-btn--gray ">
339
+ With icon, enabled
340
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
341
+ </button>
342
+ <button type="button" class="msds-btn msds-btn--gray">Hover</button>
343
+ <button type="button" class="msds-btn msds-btn--gray ">
344
+ With icon, hover
345
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
346
+ </button>
347
+ <button type="button" class="msds-btn msds-btn--gray">Active (pressed)</button>
348
+ <button type="button" class="msds-btn msds-btn--gray ">
349
+ With icon, active (pressed)
350
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
351
+ </button>
352
+ <button type="button" class="msds-btn msds-btn--gray">Focus</button>
353
+ <button type="button" class="msds-btn msds-btn--gray ">
354
+ With icon, focus
355
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
356
+ </button>
357
+ <button type="button" class="msds-btn msds-btn--gray" disabled>Disabled</button>
358
+ <button type="button" class="msds-btn msds-btn--gray " disabled>
359
+ With icon, disabled
360
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
361
+ </button>
362
+ </div>
363
+ <br />
364
+ <h3>Small</h3>
365
+ <div class="msds-btn-group--left">
366
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm">Enabled</button>
367
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm ">
368
+ With icon, enabled
369
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
370
+ </button>
371
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm">Hover</button>
372
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm ">
373
+ With icon, hover
374
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
375
+ </button>
376
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm">Active (pressed)</button>
377
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm ">
378
+ With icon, active (pressed)
379
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
380
+ </button>
381
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm">Focus</button>
382
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm ">
383
+ With icon, focus
384
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
385
+ </button>
386
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm" disabled>Disabled</button>
387
+ <button type="button" class="msds-btn msds-btn--gray msds-btn--sm " disabled>
388
+ With icon, disabled
389
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
390
+ </button>
391
+ </div>
392
+ <br /><br /><br />
393
+ <h2>Danger Button</h2>
394
+ <h3>Large</h3>
395
+ <div class="msds-btn-group--left">
396
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--lg">Enabled</button>
397
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--lg ">
398
+ With icon, enabled
399
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
400
+ </button>
401
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--lg">Hover</button>
402
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--lg ">
403
+ With icon, hover
404
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
405
+ </button>
406
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--lg">Active (pressed)</button>
407
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--lg ">
408
+ With icon, active (pressed)
409
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
410
+ </button>
411
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--lg">Focus</button>
412
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--lg ">
413
+ With icon, focus
414
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
415
+ </button>
416
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--lg" disabled>Disabled</button>
417
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--lg " disabled>
418
+ With icon, disabled
419
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
420
+ </button>
421
+ </div>
422
+ <br />
423
+ <h3>Medium</h3>
424
+ <div class="msds-btn-group--left">
425
+ <button type="button" class="msds-btn msds-btn--danger">Enabled</button>
426
+ <button type="button" class="msds-btn msds-btn--danger ">
427
+ With icon, enabled
428
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
429
+ </button>
430
+ <button type="button" class="msds-btn msds-btn--danger">Hover</button>
431
+ <button type="button" class="msds-btn msds-btn--danger ">
432
+ With icon, hover
433
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
434
+ </button>
435
+ <button type="button" class="msds-btn msds-btn--danger">Active (pressed)</button>
436
+ <button type="button" class="msds-btn msds-btn--danger ">
437
+ With icon, active (pressed)
438
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
439
+ </button>
440
+ <button type="button" class="msds-btn msds-btn--danger">Focus</button>
441
+ <button type="button" class="msds-btn msds-btn--danger ">
442
+ With icon, focus
443
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
444
+ </button>
445
+ <button type="button" class="msds-btn msds-btn--danger" disabled>Disabled</button>
446
+ <button type="button" class="msds-btn msds-btn--danger " disabled>
447
+ With icon, disabled
448
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
449
+ </button>
450
+ </div>
451
+ <br />
452
+ <h3>Small</h3>
453
+ <div class="msds-btn-group--left">
454
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--sm">Enabled</button>
455
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--sm ">
456
+ With icon, enabled
457
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
458
+ </button>
459
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--sm">Hover</button>
460
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--sm ">
461
+ With icon, hover
462
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
463
+ </button>
464
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--sm">Active (pressed)</button>
465
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--sm ">
466
+ With icon, active (pressed)
467
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
468
+ </button>
469
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--sm">Focus</button>
470
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--sm ">
471
+ With icon, focus
472
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
473
+ </button>
474
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--sm" disabled>Disabled</button>
475
+ <button type="button" class="msds-btn msds-btn--danger msds-btn--sm " disabled>
476
+ With icon, disabled
477
+ <svg class="msds-icon"><use href="../../msds-spritemap.svg#publish" /></svg>
478
+ </button>
479
+ </div>
480
+ <br /><br /><br /><br />
481
+ </div>
482
+ </div>
483
+ </div>
484
+
package/components/render/category-dark.html ADDED
@@ -0,0 +1,37 @@
1
+
2
+
3
+ <div class="container">
4
+ <div class="row card-row">
5
+ <div class="col-12 col-md-4">
6
+ <div class="msds-category-card msds-category-card--dark">
7
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
8
+ <div class="msds-category-card__header">
9
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
10
+ <div class="msds-category-card__header-icon-container">
11
+ <svg class="msds-category-card__header-icon">
12
+ <use href="../../msds-spritemap.svg#right-arrow" />
13
+ </svg>
14
+ </div>
15
+ </div>
16
+ <div class="msds-category-card__content">
17
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
18
+ </div>
19
+ </a>
20
+ </div>
21
+ </div>
22
+ <div class="col-12 col-md-4">
23
+ <div class="msds-category-card msds-category-card--dark">
24
+ <a class="msds-category-card__link" href="#" alt="msds-category-cards">
25
+ <div class="msds-category-card__header">
26
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
27
+ <div class="msds-category-card__header-icon-container">
28
+ <svg class="msds-category-card__header-icon">
29
+ <use href="../../msds-spritemap.svg#right-arrow" />
30
+ </svg>
31
+ </div>
32
+ </div>
33
+ </a>
34
+ </div>
35
+ </div>
36
+ </div>
37
+ </div>
package/components/render/category-disabled-dark.html ADDED
@@ -0,0 +1,33 @@
1
+
2
+
3
+ <div class="container">
4
+ <div class="row card-row">
5
+ <div class="col-12 col-md-4">
6
+ <div class="msds-category-card msds-category-card--dark msds-category-card--disabled">
7
+ <div class="msds-category-card__header">
8
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
9
+ <div class="msds-category-card__header-icon-container">
10
+ <svg class="msds-category-card__header-icon">
11
+ <use href="../../msds-spritemap.svg#right-arrow" />
12
+ </svg>
13
+ </div>
14
+ </div>
15
+ <div class="msds-category-card__content">
16
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
17
+ </div>
18
+ </div>
19
+ </div>
20
+ <div class="col-12 col-md-4">
21
+ <div class="msds-category-card msds-category-card--dark msds-category-card--disabled">
22
+ <div class="msds-category-card__header">
23
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
24
+ <div class="msds-category-card__header-icon-container">
25
+ <svg class="msds-category-card__header-icon">
26
+ <use href="../../msds-spritemap.svg#right-arrow" />
27
+ </svg>
28
+ </div>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
package/components/render/category-disabled.html ADDED
@@ -0,0 +1,33 @@
1
+
2
+
3
+ <div class="container">
4
+ <div class="row card-row">
5
+ <div class="col-12 col-md-4">
6
+ <div class="msds-category-card msds-category-card--disabled">
7
+ <div class="msds-category-card__header">
8
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
9
+ <div class="msds-category-card__header-icon-container">
10
+ <svg class="msds-category-card__header-icon">
11
+ <use href="../../msds-spritemap.svg#right-arrow" />
12
+ </svg>
13
+ </div>
14
+ </div>
15
+ <div class="msds-category-card__content">
16
+ <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
17
+ </div>
18
+ </div>
19
+ </div>
20
+ <div class="col-12 col-md-4">
21
+ <div class="msds-category-card msds-category-card--disabled">
22
+ <div class="msds-category-card__header">
23
+ <div class="msds-category-card__header-body">Deployment Best Practices</div>
24
+ <div class="msds-category-card__header-icon-container">
25
+ <svg class="msds-category-card__header-icon">
26
+ <use href="../../msds-spritemap.svg#right-arrow" />
27
+ </svg>
28
+ </div>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>