@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/docs/component-documentation/progress-bar.html ADDED
@@ -0,0 +1,1143 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr" class="no-js">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <script>
7
+ window.frctl = {
8
+ env: 'static'
9
+ };
10
+ </script>
11
+ <script>var cl = document.querySelector('html').classList; cl.remove('no-js'); cl.add('has-js');</script>
12
+ <link rel="shortcut icon" href="../../src/demo-img/favicon.ico" type="image/ico">
13
+
14
+ <link rel="stylesheet" href="../../themes/mandelbrot/css/default.css?cachebust=1.4.0" type="text/css">
15
+
16
+ <link rel="stylesheet" href="../../rich-icons-bundle.css?cachebust=1.4.0" type="text/css">
17
+
18
+ <link rel="stylesheet" href="../../theme-overrides/styles.css?cachebust=1.4.0" type="text/css">
19
+
20
+ <link rel="stylesheet" href="../../main.css?cachebust=1.4.0" type="text/css">
21
+
22
+ <link rel="stylesheet" href="../../themes/mandelbrot/css/highlight.css?cachebust=1.4.0" type="text/css">
23
+
24
+
25
+ <title>Progress Bar | Milestone Web Design System</title>
26
+
27
+ </head>
28
+ <body>
29
+
30
+
31
+
32
+ <div class="Frame" id="frame">
33
+
34
+ <div class="Frame-header">
35
+ <div class="Header">
36
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">
37
+ <button class="Header-button Header-navToggle" data-action="toggle-sidebar">
38
+ <svg class="Header-navToggleIcon Header-navToggleIcon--open" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
39
+ <path d="M0 0h24v24H0z" fill="none"></path>
40
+ <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"></path>
41
+ </svg>
42
+ <svg class="Header-navToggleIcon Header-navToggleIcon--closed" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
43
+ <path d="M0 0h24v24H0z" fill="none"></path>
44
+ <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
45
+ </svg>
46
+ </button>
47
+ <div class="flex-child-header-txt">
48
+ <a href="../../index.html" class="Header-title" data-pjax>
49
+ <img class="logo-test" src="../../src/demo-img/milestone-logo-white.png" alt="logo"></a>
50
+ </a>
51
+ <h6 class="header-txt ">Digital Design System</h6>
52
+ </div>
53
+ <div class="github-milestone-system">
54
+ <a class="github-milestonesys-design-system" href="https://github.com/milestone-sys/web-design-system" target="_blank">
55
+ <img class="git-icon" src="../../src/demo-img/giticon.png" alt="git icon"></a>
56
+ </a>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="Frame-body" data-role="body">
62
+
63
+ <div class="Frame-panel Frame-panel--main" data-role="main">
64
+ <div class="Frame-inner" id="pjax-container">
65
+
66
+
67
+ <div class="Document">
68
+
69
+ <div class="Document-header">
70
+
71
+ <h1 class="Document-title">Progress Bar</h1>
72
+
73
+
74
+
75
+
76
+ </div>
77
+
78
+ <div class="Document-content">
79
+
80
+
81
+
82
+ <div class="Prose">
83
+
84
+
85
+
86
+
87
+
88
+ <h2 id="on-this-page-we-will-go-through-our-progress-bar-component">On this page we will go through our Progress bar component</h2>
89
+ <p>This component should be easy to integrate in our implementations. </p>
90
+ <p>We have defined two different progress bars. One default which is the large version and one small. Both sizes have a light and dark version as well. Below you will find the way to integrate our prorgess bar component into your implementations.</p>
91
+ <h3 id="table-of-contents">Table of contents</h3>
92
+ <div class="row">
93
+ <div class="col-4">
94
+ <ul class="document__unordered-list">
95
+ <li class="document__unordered-list-item">
96
+ <a class="msds-link" href="#overview">Overview</a>
97
+ <ul class="document__unordered-list">
98
+ <li class="document__unordered-list-item">
99
+ <a class="msds-link" href="#global-definition">Global Definition</a>
100
+ </li>
101
+ <li class="document__unordered-list-item">
102
+ <a class="msds-link" href="#sizes">Sizes</a>
103
+ </li>
104
+ </ul>
105
+ </li>
106
+ <li class="document__unordered-list-item">
107
+ <a class="msds-link" href="#features">Features</a>
108
+ </li>
109
+ <li class="document__unordered-list-item">
110
+ <a class="msds-link" href="#light-version">Light version</a>
111
+ </li>
112
+ <li class="document__unordered-list-item">
113
+ <a class="msds-link" href="#dark-version">Dark version</a>
114
+ </li>
115
+ </ul>
116
+ </div>
117
+ </div>
118
+
119
+ <h2 id="overview">Overview</h2>
120
+ <h3 id="global-definition">Global Definition</h3>
121
+ <p>Each Progress Bar component is based on a global CSS class called “msds-progress-bar”. It is important to include it first as it is the main CSS class. Without it, the UI of the component won’t work. You can find mainly 2 types of progress bars, the default progress bar which is the large version and a smaller version.</p>
122
+ <p>In order the progress bar to work, you need to create a variable from the window.msds.progressBar object defined in our progress-bar.js then call the init function specifying the id of element it is linked to which represents the instance of the progress bar well. Then a base number which represents the maximum number of steps and finally a number specifying a specific step.</p>
123
+ <p>Also, note that the progress bar width is adaptive which means that it is based on the parent placeholder width.</p>
124
+ <div class="element-preview">
125
+ <div class="element-preview__inner"><div class="container">
126
+ <h1>Progress Bar</h1>
127
+ <div class="row">
128
+ <div class="col-6">
129
+ <div id="ProgressBarDefinition" class="msds-progress-bar">
130
+ <span class="msds-progress-bar__progression-counter"></span>
131
+ <div class="msds-progress-bar__base-bar">
132
+ <div class="msds-progress-bar__progression-bar"></div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div></div>
138
+ </div>
139
+
140
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
141
+ <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Progress Bar<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
142
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
143
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-6"</span>&gt;</span>
144
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ProgressBarDefinition"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar"</span>&gt;</span>
145
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-counter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
146
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__base-bar"</span>&gt;</span>
147
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-bar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
148
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
149
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
150
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
151
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
152
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><pre><code class="hljs language-javascript"><span class="hljs-comment">//Progress bar Global Definition------------------</span>
153
+ <span class="hljs-comment">//Initialize the progress bar with the element id, a maximum of 5 steps and starting from 0 (minimum step). </span>
154
+ <span class="hljs-keyword">const</span> progressBar = <span class="hljs-keyword">new</span> msdsProgressBar(<span class="hljs-string">'ProgressBarDefinition'</span>, <span class="hljs-number">5</span>, <span class="hljs-literal">false</span>)
155
+ <span class="hljs-comment">//Set the progression to step 4 - For demo purposes.</span>
156
+ progressBar.goToStep(<span class="hljs-number">4</span>)</code></pre><h3 id="features">Features</h3>
157
+ <p>By default our progress bar starts from 0. However, depending on the context, we have an option to start the progress bar from 1 by setting the “StartFromOne” variable to true. There is also a way to set a progression to a specific step by setting the currentStep to the value you need. To do so, you will need to use the goToStep function and pass as parameter the required step number.</p>
158
+ <div class="element-preview">
159
+ <div class="element-preview__inner"><div class="container">
160
+ <h1>Progress Bar</h1>
161
+ <div class="row">
162
+ <div class="col-6">
163
+ <h3>By default the progress bar will start from 0</h3>
164
+ <div id="ProgressBarFeatures1" class="msds-progress-bar">
165
+ <span class="msds-progress-bar__progression-counter"></span>
166
+ <div class="msds-progress-bar__base-bar">
167
+ <div class="msds-progress-bar__progression-bar"></div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ <br />
173
+ <div class="row">
174
+ <div class="col-6">
175
+ <h3>when "StartFromOne" variable is set to true, it will start from 1</h3>
176
+ <div id="ProgressBarFeatures2" class="msds-progress-bar">
177
+ <span class="msds-progress-bar__progression-counter"></span>
178
+ <div class="msds-progress-bar__base-bar">
179
+ <div class="msds-progress-bar__progression-bar"></div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <br />
185
+ <div class="row">
186
+ <div class="col-6">
187
+ <h3>We can specifically set a step to the progress bar.</h3>
188
+ <div id="ProgressBarFeatures3" class="msds-progress-bar">
189
+ <span class="msds-progress-bar__progression-counter"></span>
190
+ <div class="msds-progress-bar__base-bar">
191
+ <div class="msds-progress-bar__progression-bar"></div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div></div>
197
+ </div>
198
+
199
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
200
+ <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Progress Bar<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
201
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
202
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-6"</span>&gt;</span>
203
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>By default the progress bar will start from 0<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
204
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ProgressBarFeatures1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar"</span>&gt;</span>
205
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-counter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
206
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__base-bar"</span>&gt;</span>
207
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-bar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
208
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
209
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
210
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
211
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
212
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
213
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
214
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-6"</span>&gt;</span>
215
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>when "StartFromOne" variable is set to true, it will start from 1<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
216
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ProgressBarFeatures2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar"</span>&gt;</span>
217
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-counter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
218
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__base-bar"</span>&gt;</span>
219
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-bar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
220
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
221
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
222
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
223
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
224
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
225
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
226
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-6"</span>&gt;</span>
227
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>We can specifically set a step to the progress bar.<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
228
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ProgressBarFeatures3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar"</span>&gt;</span>
229
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-counter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
230
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__base-bar"</span>&gt;</span>
231
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-bar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
232
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
233
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
234
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
235
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
236
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><pre><code class="hljs language-javascript"><span class="hljs-comment">//Progress Bar Features scripts------------------</span>
237
+ <span class="hljs-comment">//Initialize the progress bar with 5 steps starting form step 0.</span>
238
+ <span class="hljs-keyword">const</span> progressBarFeatures1 = <span class="hljs-keyword">new</span> msdsProgressBar(<span class="hljs-string">'ProgressBarFeatures1'</span>, <span class="hljs-number">5</span>, <span class="hljs-literal">false</span>)
239
+ <span class="hljs-comment">//Initialize the progress bar with 5 steps starting form step 1.</span>
240
+ <span class="hljs-keyword">const</span> progressBarFeatures2 = <span class="hljs-keyword">new</span> msdsProgressBar(<span class="hljs-string">'ProgressBarFeatures2'</span>, <span class="hljs-number">5</span>, <span class="hljs-literal">true</span>)
241
+ <span class="hljs-comment">//Set the progress bar with 5 steps starting from 0.</span>
242
+ <span class="hljs-keyword">const</span> progressBarFeatures3 = <span class="hljs-keyword">new</span> msdsProgressBar(<span class="hljs-string">'ProgressBarFeatures3'</span>, <span class="hljs-number">5</span>, <span class="hljs-literal">false</span>)
243
+ <span class="hljs-comment">//Set the progression to step 3 to show how the goToStep function works</span>
244
+ progressBarFeatures3.goToStep(<span class="hljs-number">3</span>)</code></pre><h3 id="sizes">Sizes</h3>
245
+ <p>Our Progress Bar can be rendered in 2 different sizes, large (default) and small.</p>
246
+ <div class="element-preview">
247
+ <div class="element-preview__inner">
248
+ <div class="container">
249
+ <h1>Progress Bar</h1>
250
+ <div class="row">
251
+ <div class="col-6">
252
+ <h3>Large Version (default)</h3>
253
+ <div id="ProgressBarSize1" class="msds-progress-bar">
254
+ <span class="msds-progress-bar__progression-counter"></span>
255
+ <div class="msds-progress-bar__base-bar">
256
+ <div class="msds-progress-bar__progression-bar"></div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ <br />
262
+ <div class="row">
263
+ <div class="col-6">
264
+ <h3>Small Version</h3>
265
+ <div id="ProgressBarSize2" class="msds-progress-bar msds-progress-bar--small">
266
+ <span class="msds-progress-bar__progression-counter"></span>
267
+ <div class="msds-progress-bar__base-bar">
268
+ <div class="msds-progress-bar__progression-bar"></div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div></div>
274
+ </div>
275
+
276
+ <pre><code class="hljs language-html">
277
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
278
+ <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Progress Bar<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
279
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
280
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-6"</span>&gt;</span>
281
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large Version (default)<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
282
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ProgressBarSize1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar"</span>&gt;</span>
283
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-counter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
284
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__base-bar"</span>&gt;</span>
285
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-bar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
286
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
287
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
288
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
289
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
290
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
291
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
292
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-6"</span>&gt;</span>
293
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small Version<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
294
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ProgressBarSize2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar msds-progress-bar--small"</span>&gt;</span>
295
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-counter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
296
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__base-bar"</span>&gt;</span>
297
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-bar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
298
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
299
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
300
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
301
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
302
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><pre><code class="hljs language-javascript"><span class="hljs-comment">//Progress bar Size scripts------------------</span>
303
+ <span class="hljs-comment">//Initialize the progress bar with 5 steps starting from 0.</span>
304
+ <span class="hljs-keyword">const</span> progressBarSize1 = <span class="hljs-keyword">new</span> msdsProgressBar(<span class="hljs-string">'ProgressBarSize1'</span>, <span class="hljs-number">5</span>, <span class="hljs-literal">false</span>)
305
+ <span class="hljs-comment">//Set the progression to step 2 - For demo purposes.</span>
306
+ progressBarSize1.goToStep(<span class="hljs-number">2</span>)
307
+ <span class="hljs-comment">//Initialize the progress bar with 5 steps starting from 0.</span>
308
+ <span class="hljs-keyword">const</span> progressBarSize2 = <span class="hljs-keyword">new</span> msdsProgressBar(<span class="hljs-string">'ProgressBarSize2'</span>, <span class="hljs-number">5</span>, <span class="hljs-literal">false</span>)
309
+ <span class="hljs-comment">//Set the progression to step 3 - For demo purposes.</span>
310
+ progressBarSize2.goToStep(<span class="hljs-number">3</span>)</code></pre><h3 id="light-version">Light version</h3>
311
+ <p>As mentioned ealier there are 2 themes you can choose for our progress bar component: a light and dark theme. Below you have a exemple of the Light theme version and it is rendered by default. No need to add extra CSS classes. </p>
312
+ <p>you can also see that you can attached different events such as prev() and next() which would make it easier when having the progress bar in a wizard.</p>
313
+ <div class="element-preview">
314
+ <div class="element-preview__inner"><div class="container">
315
+ <div class="row">
316
+ <div class="col-12">
317
+ <h1>Progress Bar</h1>
318
+ <h2>Light Theme</h2>
319
+ <div class="row">
320
+ <div class="col-8">
321
+ <div id="LightThemeProgressBar" class="msds-progress-bar">
322
+ <span class="msds-progress-bar__progression-counter"></span>
323
+ <div class="msds-progress-bar__base-bar">
324
+ <div class="msds-progress-bar__progression-bar"></div>
325
+ </div>
326
+ <div class="progress-pagination progress-pagination--light">
327
+ <div id="LightThemePrevStep" class="prevStep">Previous</div>
328
+ <div class="currentsteps">
329
+ <input id="LightThemeCurrentStep" type="number"> / <span id="LightThemeBaseNumber" ></span>
330
+ </div>
331
+ <div id="LightThemeNextStep" class="nextStep">Next</div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div></div>
339
+ </div>
340
+
341
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
342
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
343
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
344
+ <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Progress Bar<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
345
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Light Theme<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
346
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
347
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-8"</span>&gt;</span>
348
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"LightThemeProgressBar"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar"</span>&gt;</span>
349
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-counter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
350
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__base-bar"</span>&gt;</span>
351
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-bar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
352
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
353
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-pagination progress-pagination--light"</span>&gt;</span>
354
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"LightThemePrevStep"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prevStep"</span>&gt;</span>Previous<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
355
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"currentsteps"</span>&gt;</span>
356
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"LightThemeCurrentStep"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span>&gt;</span> / <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"LightThemeBaseNumber"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
357
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
358
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"LightThemeNextStep"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nextStep"</span>&gt;</span>Next<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
359
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
360
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
361
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
362
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
363
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
364
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
365
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><pre><code class="hljs language-javascript"><span class="hljs-comment">//Light Theme scripts------------------</span>
366
+ <span class="hljs-comment">//Initialize the progress bar with 20 steps starting from 0.</span>
367
+ <span class="hljs-keyword">const</span> lightThemeProgressBar = <span class="hljs-keyword">new</span> msdsProgressBar(<span class="hljs-string">'LightThemeProgressBar'</span>, <span class="hljs-number">20</span>, <span class="hljs-literal">false</span>)
368
+ lightThemeProgressBar.setPaginationElements(<span class="hljs-string">'LightThemePrevStep'</span>, <span class="hljs-string">'LightThemeNextStep'</span>, <span class="hljs-string">'LightThemeBaseNumber'</span>, <span class="hljs-string">'LightThemeCurrentStep'</span>)</code></pre><h3 id="dark-version">Dark version</h3>
369
+ <p>Concerning the Dark theme version, you will need to add the following CSS class on the Progress Bar parent element as followed</p>
370
+ <div class="element-preview-dark">
371
+ <div class="element-preview__inner"><div class="container">
372
+ <div class="row">
373
+ <div class="col-12">
374
+ <h1>Progress Bar</h1>
375
+ <h2>Dark Theme</h2>
376
+ <div class="row">
377
+ <div class="col-8">
378
+ <div id="DarkThemeProgressBar" class="msds-progress-bar msds-progress-bar--dark">
379
+ <span class="msds-progress-bar__progression-counter"></span>
380
+ <div class="msds-progress-bar__base-bar">
381
+ <div class="msds-progress-bar__progression-bar"></div>
382
+ </div>
383
+ <div class="progress-pagination progress-pagination--dark">
384
+ <div id="DarkThemePrevStep" class="prevStep">Previous step</div>
385
+ <div class="currentsteps">
386
+ <input id="DarkThemeCurrentStep" type="number"> / <span id="DarkThemeBaseNumber" ></span>
387
+ </div>
388
+ <div id="DarkThemeNextStep" class="nextStep">Next step</div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div></div>
396
+ </div>
397
+
398
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
399
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
400
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
401
+ <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Progress Bar<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
402
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Dark Theme<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
403
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
404
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-8"</span>&gt;</span>
405
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"DarkThemeProgressBar"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar msds-progress-bar--dark"</span>&gt;</span>
406
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-counter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
407
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__base-bar"</span>&gt;</span>
408
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-progress-bar__progression-bar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
409
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
410
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"progress-pagination progress-pagination--dark"</span>&gt;</span>
411
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"DarkThemePrevStep"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prevStep"</span>&gt;</span>Previous step<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
412
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"currentsteps"</span>&gt;</span>
413
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"DarkThemeCurrentStep"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span>&gt;</span> / <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"DarkThemeBaseNumber"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
414
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
415
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"DarkThemeNextStep"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nextStep"</span>&gt;</span>Next step<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
416
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
417
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
418
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
419
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
420
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
421
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
422
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><pre><code class="hljs language-javascript"><span class="hljs-comment">//Dark Theme scripts------------------</span>
423
+ <span class="hljs-comment">//Initialize the progress bar with 20 steps starting from 1.</span>
424
+ <span class="hljs-keyword">const</span> darkThemeProgressBar = <span class="hljs-keyword">new</span> msdsProgressBar(<span class="hljs-string">'DarkThemeProgressBar'</span>, <span class="hljs-number">20</span>, <span class="hljs-literal">true</span>)
425
+ darkThemeProgressBar.setPaginationElements(<span class="hljs-string">'DarkThemePrevStep'</span>, <span class="hljs-string">'DarkThemeNextStep'</span>, <span class="hljs-string">'DarkThemeBaseNumber'</span>, <span class="hljs-string">'DarkThemeCurrentStep'</span>)</code></pre><script>
426
+ //Iniliazes JS each time a user changes the page - this is for fractle v1.3.0
427
+ dispatchEvent(new Event('load'));
428
+ </script>
429
+
430
+
431
+
432
+ </div>
433
+
434
+
435
+
436
+ </div>
437
+
438
+ </div>
439
+
440
+
441
+ </div>
442
+ </div>
443
+
444
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
445
+
446
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
447
+ <nav class="Navigation">
448
+
449
+
450
+ <div class="Navigation-group">
451
+
452
+ <div class="Tree" data-behaviour="tree" id="tree-components">
453
+ <div class="Tree-header">
454
+ <h3 class="Tree-title">components</h3>
455
+
456
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
457
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z"/><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z"/></svg>
458
+
459
+ </button>
460
+ </div>
461
+ <ul class="Tree-items Tree-depth-1">
462
+
463
+
464
+
465
+
466
+ <li class="Tree-item Tree-entity" data-role="item">
467
+ <a class="Tree-entityLink" href="../../components/detail/tab-tile.html" data-pjax>
468
+ <span>Tab Tile</span>
469
+
470
+
471
+ <div class="Status Status--unlabelled">
472
+
473
+ <div class="Status-dots">
474
+
475
+
476
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
477
+
478
+
479
+ </div>
480
+
481
+ </div>
482
+
483
+
484
+ </a>
485
+ </li>
486
+
487
+
488
+
489
+ </ul>
490
+ </div>
491
+
492
+ </div>
493
+
494
+
495
+
496
+
497
+ <div class="Navigation-group">
498
+
499
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
500
+ <div class="Tree-header">
501
+ <h3 class="Tree-title">documentation</h3>
502
+
503
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
504
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z"/><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z"/></svg>
505
+
506
+ </button>
507
+ </div>
508
+ <ul class="Tree-items Tree-depth-1">
509
+
510
+
511
+
512
+
513
+ <li class="Tree-item Tree-entity" data-role="item">
514
+ <a class="Tree-entityLink" href="../../index.html" data-pjax>
515
+ <span>Overview</span>
516
+
517
+ </a>
518
+ </li>
519
+
520
+
521
+
522
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
523
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
524
+ Content
525
+ </button>
526
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
527
+
528
+
529
+
530
+
531
+
532
+
533
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
534
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
535
+ Icons
536
+ </button>
537
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
538
+
539
+
540
+
541
+
542
+
543
+
544
+
545
+ <li class="Tree-item Tree-entity" data-role="item">
546
+ <a class="Tree-entityLink" href="../content/icons/-overview.html" data-pjax>
547
+ <span>Overview</span>
548
+
549
+ </a>
550
+ </li>
551
+
552
+
553
+
554
+
555
+ <li class="Tree-item Tree-entity" data-role="item">
556
+ <a class="Tree-entityLink" href="../content/icons/icons-flat.html" data-pjax>
557
+ <span>Icons Flat</span>
558
+
559
+ </a>
560
+ </li>
561
+
562
+
563
+
564
+
565
+ <li class="Tree-item Tree-entity" data-role="item">
566
+ <a class="Tree-entityLink" href="../content/icons/icons-rich.html" data-pjax>
567
+ <span>Icons Rich</span>
568
+
569
+ </a>
570
+ </li>
571
+
572
+
573
+
574
+ </ul>
575
+ </li>
576
+
577
+
578
+
579
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
580
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
581
+ Typography
582
+ </button>
583
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
584
+
585
+
586
+
587
+
588
+
589
+
590
+
591
+ <li class="Tree-item Tree-entity" data-role="item">
592
+ <a class="Tree-entityLink" href="../content/typography/-overview.html" data-pjax>
593
+ <span>Overview</span>
594
+
595
+ </a>
596
+ </li>
597
+
598
+
599
+
600
+
601
+ <li class="Tree-item Tree-entity" data-role="item">
602
+ <a class="Tree-entityLink" href="../content/typography/font-colors.html" data-pjax>
603
+ <span>Font Colors</span>
604
+
605
+ </a>
606
+ </li>
607
+
608
+
609
+
610
+
611
+ <li class="Tree-item Tree-entity" data-role="item">
612
+ <a class="Tree-entityLink" href="../content/typography/links.html" data-pjax>
613
+ <span>Links</span>
614
+
615
+ </a>
616
+ </li>
617
+
618
+
619
+
620
+
621
+ <li class="Tree-item Tree-entity" data-role="item">
622
+ <a class="Tree-entityLink" href="../content/typography/lists.html" data-pjax>
623
+ <span>Lists</span>
624
+
625
+ </a>
626
+ </li>
627
+
628
+
629
+
630
+
631
+ <li class="Tree-item Tree-entity" data-role="item">
632
+ <a class="Tree-entityLink" href="../content/typography/text.html" data-pjax>
633
+ <span>Text</span>
634
+
635
+ </a>
636
+ </li>
637
+
638
+
639
+
640
+ </ul>
641
+ </li>
642
+
643
+
644
+
645
+ </ul>
646
+ </li>
647
+
648
+
649
+
650
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
651
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
652
+ Component Documentation
653
+ </button>
654
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
655
+
656
+
657
+
658
+
659
+
660
+
661
+
662
+ <li class="Tree-item Tree-entity" data-role="item">
663
+ <a class="Tree-entityLink" href="alerts.html" data-pjax>
664
+ <span>Alerts</span>
665
+
666
+ </a>
667
+ </li>
668
+
669
+
670
+
671
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
672
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
673
+ Buttons
674
+ </button>
675
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
676
+
677
+
678
+
679
+
680
+
681
+
682
+
683
+ <li class="Tree-item Tree-entity" data-role="item">
684
+ <a class="Tree-entityLink" href="buttons/buttons.html" data-pjax>
685
+ <span>Buttons</span>
686
+
687
+ </a>
688
+ </li>
689
+
690
+
691
+
692
+
693
+ <li class="Tree-item Tree-entity" data-role="item">
694
+ <a class="Tree-entityLink" href="buttons/buttons-floating.html" data-pjax>
695
+ <span>Buttons Floating</span>
696
+
697
+ </a>
698
+ </li>
699
+
700
+
701
+
702
+ </ul>
703
+ </li>
704
+
705
+
706
+
707
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
708
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
709
+ Cards
710
+ </button>
711
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
712
+
713
+
714
+
715
+
716
+
717
+
718
+
719
+ <li class="Tree-item Tree-entity" data-role="item">
720
+ <a class="Tree-entityLink" href="cards/basic-cards.html" data-pjax>
721
+ <span>Basic Cards</span>
722
+
723
+ </a>
724
+ </li>
725
+
726
+
727
+
728
+
729
+ <li class="Tree-item Tree-entity" data-role="item">
730
+ <a class="Tree-entityLink" href="cards/category-cards.html" data-pjax>
731
+ <span>Category Cards</span>
732
+
733
+ </a>
734
+ </li>
735
+
736
+
737
+
738
+
739
+ <li class="Tree-item Tree-entity" data-role="item">
740
+ <a class="Tree-entityLink" href="cards/contact-cards.html" data-pjax>
741
+ <span>Contact Cards</span>
742
+
743
+ </a>
744
+ </li>
745
+
746
+
747
+
748
+
749
+ <li class="Tree-item Tree-entity" data-role="item">
750
+ <a class="Tree-entityLink" href="cards/generic-cards.html" data-pjax>
751
+ <span>Generic Cards</span>
752
+
753
+ </a>
754
+ </li>
755
+
756
+
757
+
758
+
759
+ <li class="Tree-item Tree-entity" data-role="item">
760
+ <a class="Tree-entityLink" href="cards/solution-cards.html" data-pjax>
761
+ <span>Solution Cards</span>
762
+
763
+ </a>
764
+ </li>
765
+
766
+
767
+
768
+ </ul>
769
+ </li>
770
+
771
+
772
+
773
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
774
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
775
+ Dividers
776
+ </button>
777
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
778
+
779
+
780
+
781
+
782
+
783
+
784
+
785
+ <li class="Tree-item Tree-entity" data-role="item">
786
+ <a class="Tree-entityLink" href="dividers/dividers.html" data-pjax>
787
+ <span>Dividers</span>
788
+
789
+ </a>
790
+ </li>
791
+
792
+
793
+
794
+ </ul>
795
+ </li>
796
+
797
+
798
+
799
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
800
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
801
+ Expanding Components
802
+ </button>
803
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
804
+
805
+
806
+
807
+
808
+
809
+
810
+
811
+ <li class="Tree-item Tree-entity" data-role="item">
812
+ <a class="Tree-entityLink" href="expanding-components/accordion.html" data-pjax>
813
+ <span>Accordion</span>
814
+
815
+ </a>
816
+ </li>
817
+
818
+
819
+
820
+
821
+ <li class="Tree-item Tree-entity" data-role="item">
822
+ <a class="Tree-entityLink" href="expanding-components/section.html" data-pjax>
823
+ <span>Section</span>
824
+
825
+ </a>
826
+ </li>
827
+
828
+
829
+
830
+ </ul>
831
+ </li>
832
+
833
+
834
+
835
+
836
+ <li class="Tree-item Tree-entity" data-role="item">
837
+ <a class="Tree-entityLink" href="modal.html" data-pjax>
838
+ <span>Modal</span>
839
+
840
+ </a>
841
+ </li>
842
+
843
+
844
+
845
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
846
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
847
+ Popover
848
+ </button>
849
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
850
+
851
+
852
+
853
+
854
+
855
+
856
+
857
+ <li class="Tree-item Tree-entity" data-role="item">
858
+ <a class="Tree-entityLink" href="popover/popover.html" data-pjax>
859
+ <span>Popover</span>
860
+
861
+ </a>
862
+ </li>
863
+
864
+
865
+
866
+ </ul>
867
+ </li>
868
+
869
+
870
+
871
+
872
+ <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
873
+ <a class="Tree-entityLink" href="" data-pjax>
874
+ <span>Progress Bar</span>
875
+
876
+ </a>
877
+ </li>
878
+
879
+
880
+
881
+
882
+ <li class="Tree-item Tree-entity" data-role="item">
883
+ <a class="Tree-entityLink" href="spacing.html" data-pjax>
884
+ <span>Spacing</span>
885
+
886
+ </a>
887
+ </li>
888
+
889
+
890
+
891
+
892
+ <li class="Tree-item Tree-entity" data-role="item">
893
+ <a class="Tree-entityLink" href="table.html" data-pjax>
894
+ <span>Table</span>
895
+
896
+ </a>
897
+ </li>
898
+
899
+
900
+
901
+ </ul>
902
+ </li>
903
+
904
+
905
+
906
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
907
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
908
+ Forms
909
+ </button>
910
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
911
+
912
+
913
+
914
+
915
+
916
+
917
+
918
+ <li class="Tree-item Tree-entity" data-role="item">
919
+ <a class="Tree-entityLink" href="../forms/-overview.html" data-pjax>
920
+ <span>Overview</span>
921
+
922
+ </a>
923
+ </li>
924
+
925
+
926
+
927
+
928
+ <li class="Tree-item Tree-entity" data-role="item">
929
+ <a class="Tree-entityLink" href="../forms/checkbox.html" data-pjax>
930
+ <span>Checkbox</span>
931
+
932
+ </a>
933
+ </li>
934
+
935
+
936
+
937
+
938
+ <li class="Tree-item Tree-entity" data-role="item">
939
+ <a class="Tree-entityLink" href="../forms/drop-down-list.html" data-pjax>
940
+ <span>Drop Down List</span>
941
+
942
+ </a>
943
+ </li>
944
+
945
+
946
+
947
+
948
+ <li class="Tree-item Tree-entity" data-role="item">
949
+ <a class="Tree-entityLink" href="../forms/input-field.html" data-pjax>
950
+ <span>Input Field</span>
951
+
952
+ </a>
953
+ </li>
954
+
955
+
956
+
957
+
958
+ <li class="Tree-item Tree-entity" data-role="item">
959
+ <a class="Tree-entityLink" href="../forms/radio-button.html" data-pjax>
960
+ <span>Radio Button</span>
961
+
962
+ </a>
963
+ </li>
964
+
965
+
966
+
967
+
968
+ <li class="Tree-item Tree-entity" data-role="item">
969
+ <a class="Tree-entityLink" href="../forms/switch.html" data-pjax>
970
+ <span>Switch</span>
971
+
972
+ </a>
973
+ </li>
974
+
975
+
976
+
977
+
978
+ <li class="Tree-item Tree-entity" data-role="item">
979
+ <a class="Tree-entityLink" href="../forms/text-area.html" data-pjax>
980
+ <span>Text Area</span>
981
+
982
+ </a>
983
+ </li>
984
+
985
+
986
+
987
+ </ul>
988
+ </li>
989
+
990
+
991
+
992
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
993
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
994
+ Utilities
995
+ </button>
996
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
997
+
998
+
999
+
1000
+
1001
+
1002
+
1003
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
1004
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
1005
+ Colors
1006
+ </button>
1007
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
1008
+
1009
+
1010
+
1011
+
1012
+
1013
+
1014
+
1015
+ <li class="Tree-item Tree-entity" data-role="item">
1016
+ <a class="Tree-entityLink" href="../utilities/colors/overview.html" data-pjax>
1017
+ <span>Overview</span>
1018
+
1019
+ </a>
1020
+ </li>
1021
+
1022
+
1023
+
1024
+
1025
+ <li class="Tree-item Tree-entity" data-role="item">
1026
+ <a class="Tree-entityLink" href="../utilities/colors/font-colors.html" data-pjax>
1027
+ <span>Font Colors</span>
1028
+
1029
+ </a>
1030
+ </li>
1031
+
1032
+
1033
+
1034
+
1035
+ <li class="Tree-item Tree-entity" data-role="item">
1036
+ <a class="Tree-entityLink" href="../utilities/colors/background-colors.html" data-pjax>
1037
+ <span>Background Colors</span>
1038
+
1039
+ </a>
1040
+ </li>
1041
+
1042
+
1043
+
1044
+ </ul>
1045
+ </li>
1046
+
1047
+
1048
+
1049
+
1050
+ <li class="Tree-item Tree-entity" data-role="item">
1051
+ <a class="Tree-entityLink" href="../utilities/spacing.html" data-pjax>
1052
+ <span>Spacing</span>
1053
+
1054
+ </a>
1055
+ </li>
1056
+
1057
+
1058
+
1059
+ </ul>
1060
+ </li>
1061
+
1062
+
1063
+
1064
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
1065
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
1066
+ Guidelines And Guides
1067
+ </button>
1068
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
1069
+
1070
+
1071
+
1072
+
1073
+
1074
+
1075
+
1076
+ <li class="Tree-item Tree-entity" data-role="item">
1077
+ <a class="Tree-entityLink" href="../guidelines-and-guides/creating-a-new-release.html" data-pjax>
1078
+ <span>Creating A New Release</span>
1079
+
1080
+ </a>
1081
+ </li>
1082
+
1083
+
1084
+
1085
+
1086
+ <li class="Tree-item Tree-entity" data-role="item">
1087
+ <a class="Tree-entityLink" href="../guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
1088
+ <span>Css And Scss Guidelines</span>
1089
+
1090
+ </a>
1091
+ </li>
1092
+
1093
+
1094
+
1095
+
1096
+ <li class="Tree-item Tree-entity" data-role="item">
1097
+ <a class="Tree-entityLink" href="../guidelines-and-guides/git-cheat-sheet.html" data-pjax>
1098
+ <span>Git Cheat Sheet</span>
1099
+
1100
+ </a>
1101
+ </li>
1102
+
1103
+
1104
+
1105
+
1106
+ <li class="Tree-item Tree-entity" data-role="item">
1107
+ <a class="Tree-entityLink" href="../guidelines-and-guides/installation-and-usage.html" data-pjax>
1108
+ <span>Installation And Usage</span>
1109
+
1110
+ </a>
1111
+ </li>
1112
+
1113
+
1114
+
1115
+ </ul>
1116
+ </li>
1117
+
1118
+
1119
+
1120
+ </ul>
1121
+ </div>
1122
+
1123
+ </div>
1124
+
1125
+
1126
+
1127
+ </nav>
1128
+
1129
+ </div>
1130
+ </div>
1131
+ </div>
1132
+
1133
+
1134
+
1135
+
1136
+ <script src="../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
1137
+
1138
+ <script src="../../design-system.js?cachebust=1.4.0"></script>
1139
+
1140
+
1141
+
1142
+ </body>
1143
+ </html>