@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/forms/input-field.html ADDED
@@ -0,0 +1,1316 @@
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>Input field | 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">Input field</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-radio-button-component">On this page we will go through our Radio Button component</h2>
89
+ <p>The input field allows the user to enter a piece of text. If the text is long it will stay on the same line.
90
+ They can be used in forms, filters, lists etc. in many different ways like for passwords.</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
+ </li>
98
+ <li class="document__unordered-list-item">
99
+ <a class="msds-link" href="#Sizes">Sizes</a>
100
+ </li>
101
+ <li class="document__unordered-list-item">
102
+ <a class="msds-link" href="#states">States</a>
103
+ <ul class="document__unordered-list">
104
+ <li class="document__unordered-list-item">
105
+ <a class="msds-link" href="#hover-state">Hover state</a>
106
+ </li>
107
+ <li class="document__unordered-list-item">
108
+ <a class="msds-link" href="#focus-state">Focus state</a>
109
+ </li>
110
+ <li class="document__unordered-list-item">
111
+ <a class="msds-link" href="#readonly-state">Readonly state</a>
112
+ </li>
113
+ <li class="document__unordered-list-item">
114
+ <a class="msds-link" href="#disabled-state">Disabled state</a>
115
+ </li>
116
+ </ul>
117
+ </li>
118
+ <li class="document__unordered-list-item">
119
+ <a class="msds-link" href="#validations">Validations</a>
120
+ <ul class="document__unordered-list">
121
+ <li class="document__unordered-list-item">
122
+ <a class="msds-link" href="#validation-success">Success</a>
123
+ </li>
124
+ <li class="document__unordered-list-item">
125
+ <a class="msds-link" href="#validation-error">Error</a>
126
+ </li>
127
+ </ul>
128
+ </li>
129
+ </ul>
130
+ </div>
131
+ </div>
132
+
133
+ <h2 id="overview">Overview</h2>
134
+ <p>Each input field component is based on a global CSS class called “msds-input” and has to be inside a warpper using the “msds-input__icon-wrapper”. It is important to include them first as it is the main CSS class but. Without it, the UI of the component won’t work.</p>
135
+ <p>The input field is linked to a label element and should be placed right below it like the way it is shown below. </p>
136
+ <p>As other form fields, the input field layout contains a error message which is placed below the input field wrapper. </p>
137
+ <div class="element-preview">
138
+ <div class="element-preview__inner"><form class="msds-forms">
139
+ <div class="container">
140
+ <div class="row">
141
+ <div class="col-12 col-md-8">
142
+ <div class="msds-input">
143
+ <div class="msds-input__icon-wrapper">
144
+ <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-lg">
145
+ <label for="text-input-lg" class="msds-input__label">Enter your e-mail*</label>
146
+ </div>
147
+ <p class="msds-input__info-message">
148
+ We'll never share your email with anyone else.
149
+ </p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </form></div>
155
+ </div>
156
+
157
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-forms"</span>&gt;</span>
158
+ <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>
159
+ <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>
160
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-8"</span>&gt;</span>
161
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input"</span>&gt;</span>
162
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
163
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-lg"</span>&gt;</span>
164
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-lg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
165
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
166
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
167
+ We'll never share your email with anyone else.
168
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
169
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
170
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
171
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
172
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
173
+ <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></pre><h2 id="sizes">Sizes</h2>
174
+ <p>The input field comes like most of our forms components in 2 sizes, large whichi is our default size and small used in specific cases.</p>
175
+ <div class="element-preview">
176
+ <div class="element-preview__inner"><form class="msds-forms">
177
+ <div class="container">
178
+ <div class="row">
179
+ <div class="col-12 col-md-6">
180
+ <h3>Large Size (default)</h3>
181
+ <div class="msds-input">
182
+ <div class="msds-input__icon-wrapper">
183
+ <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-lg">
184
+ <label for="text-input-lg" class="msds-input__label">Enter your e-mail*</label>
185
+ </div>
186
+ <p class="msds-input__info-message">
187
+ We'll never share your email with anyone else.
188
+ </p>
189
+ </div>
190
+ </div>
191
+ <div class="col-12 col-md-6">
192
+ <h3>Small Size</h3>
193
+ <div class="msds-input msds-input--small">
194
+ <div class="msds-input__icon-wrapper">
195
+ <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-sm">
196
+ <label for="text-input-sm" class="msds-input__label">Enter your e-mail*</label>
197
+ </div>
198
+ <p class="msds-input__info-message">
199
+ We'll never share your email with anyone else.
200
+ </p>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </form></div>
206
+ </div>
207
+
208
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-forms"</span>&gt;</span>
209
+ <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>
210
+ <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>
211
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
212
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large Size (default)<span class="hljs-tag">&lt;/<span class="hljs-name">h3</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">"msds-input"</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">"msds-input__icon-wrapper"</span>&gt;</span>
215
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-lg"</span>&gt;</span>
216
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-lg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
217
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
218
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
219
+ We'll never share your email with anyone else.
220
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
224
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small Size<span class="hljs-tag">&lt;/<span class="hljs-name">h3</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">"msds-input msds-input--small"</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">"msds-input__icon-wrapper"</span>&gt;</span>
227
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-sm"</span>&gt;</span>
228
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-sm"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
229
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
230
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
231
+ We'll never share your email with anyone else.
232
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</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>
237
+ <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></pre><h2 id="states">States</h2>
238
+ <p>The styling of states are defined in the CSS file. Some of the states can be triggered programmatically by setting the relative property to the input element. </p>
239
+ <h3 id="hover-state">Hover State</h3>
240
+ <p>State of the hover input field</p>
241
+ <div class="element-preview">
242
+ <div class="element-preview__inner"><form class="msds-forms">
243
+ <div class="container">
244
+ <div class="row">
245
+ <div class="col-12 col-md-6">
246
+ <div class="msds-input">
247
+ <div class="msds-input__icon-wrapper">
248
+ <input id="input-field-hover" type="text" class="msds-input__text-input" placeholder="Enter your name*" name="text-input-disabled-lg">
249
+ <label for="text-input-disabled-lg" class="msds-input__label">Enter your name*</label>
250
+ </div>
251
+ <p class="msds-input__info-message">
252
+ We'll never share your name to anyone.
253
+ </p>
254
+ </div>
255
+ </div>
256
+ <div class="col-12 col-md-6">
257
+ <div class="msds-input msds-input--small">
258
+ <div class="msds-input__icon-wrapper">
259
+ <input id="input-field-hover" type="text" class="msds-input__text-input" placeholder="Enter your name*" name="text-input-disabled-sm">
260
+ <label for="text-input-disabled-sm" class="msds-input__label">Enter your name*</label>
261
+ </div>
262
+ <p class="msds-input__info-message">
263
+ We'll never share your name to anyone.
264
+ </p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </form></div>
270
+ </div>
271
+
272
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-forms"</span>&gt;</span>
273
+ <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>
274
+ <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>
275
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
276
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input"</span>&gt;</span>
277
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
278
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-field-hover"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your name*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-disabled-lg"</span>&gt;</span>
279
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-disabled-lg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your name*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
280
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
281
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
282
+ We'll never share your name to anyone.
283
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
284
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
285
+ <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> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
287
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input msds-input--small"</span>&gt;</span>
288
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
289
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-field-hover"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your name*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-disabled-sm"</span>&gt;</span>
290
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-disabled-sm"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your name*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
291
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
292
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
293
+ We'll never share your name to anyone.
294
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
295
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
296
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
297
+ <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">form</span>&gt;</span></code></pre><h3 id="focus-state">Focus State</h3>
300
+ <p>State of the focused input field</p>
301
+ <div class="element-preview">
302
+ <div class="element-preview__inner"><form class="msds-forms">
303
+ <div class="container">
304
+ <div class="row">
305
+ <div class="col-12 col-md-6">
306
+ <div class="msds-input">
307
+ <div class="msds-input__icon-wrapper">
308
+ <input id="input-field-focus" type="text" class="msds-input__text-input" placeholder="Enter your name*" name="text-input-disabled-lg">
309
+ <label for="text-input-disabled-lg" class="msds-input__label">Enter your name*</label>
310
+ </div>
311
+ <p class="msds-input__info-message">
312
+ We'll never share your name to anyone.
313
+ </p>
314
+ </div>
315
+ </div>
316
+ <div class="col-12 col-md-6">
317
+ <div class="msds-input msds-input--small">
318
+ <div class="msds-input__icon-wrapper">
319
+ <input id="input-field-focus" type="text" class="msds-input__text-input" placeholder="Enter your name*" name="text-input-disabled-sm">
320
+ <label for="text-input-disabled-sm" class="msds-input__label">Enter your name*</label>
321
+ </div>
322
+ <p class="msds-input__info-message">
323
+ We'll never share your name to anyone.
324
+ </p>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </form></div>
330
+ </div>
331
+
332
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-forms"</span>&gt;</span>
333
+ <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>
334
+ <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>
335
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
336
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input"</span>&gt;</span>
337
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
338
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-field-focus"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your name*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-disabled-lg"</span>&gt;</span>
339
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-disabled-lg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your name*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
340
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
341
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
342
+ We'll never share your name to anyone.
343
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
344
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
345
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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">"col-12 col-md-6"</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">"msds-input msds-input--small"</span>&gt;</span>
348
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
349
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-field-focus"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your name*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-disabled-sm"</span>&gt;</span>
350
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-disabled-sm"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your name*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
351
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
352
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
353
+ We'll never share your name to anyone.
354
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
355
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
356
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</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>&gt;</span>
359
+ <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></pre><h3 id="disabled-state">Disabled State</h3>
360
+ <p>It can be disabled programmatically by setting the “disabled” attribute to the input field element.</p>
361
+ <div class="element-preview">
362
+ <div class="element-preview__inner"><form class="msds-forms">
363
+ <div class="container">
364
+ <div class="row">
365
+ <div class="col-12 col-md-6">
366
+ <div class="msds-input">
367
+ <div class="msds-input__icon-wrapper">
368
+ <input type="text" disabled="disabled" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-disabled-lg">
369
+ <label for="text-input-disabled-lg" class="msds-input__label">Enter your e-mail*</label>
370
+ </div>
371
+ <p class="msds-input__info-message">
372
+ We'll never share your email with anyone else.
373
+ </p>
374
+ </div>
375
+ </div>
376
+ <div class="col-12 col-md-6">
377
+ <div class="msds-input msds-input--small">
378
+ <div class="msds-input__icon-wrapper">
379
+ <input type="text" disabled="disabled" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-disabled-sm">
380
+ <label for="text-input-disabled-sm" class="msds-input__label">Enter your e-mail*</label>
381
+ </div>
382
+ <p class="msds-input__info-message">
383
+ We'll never share your email with anyone else.
384
+ </p>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </form></div>
390
+ </div>
391
+
392
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-forms"</span>&gt;</span>
393
+ <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>
394
+ <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>
395
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
396
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input"</span>&gt;</span>
397
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
398
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">"disabled"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-disabled-lg"</span>&gt;</span>
399
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-disabled-lg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
400
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
401
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
402
+ We'll never share your email with anyone else.
403
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
404
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
405
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
406
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</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-input msds-input--small"</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-input__icon-wrapper"</span>&gt;</span>
409
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">"disabled"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-disabled-sm"</span>&gt;</span>
410
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-disabled-sm"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
411
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
412
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
413
+ We'll never share your email with anyone else.
414
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
415
+ <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">form</span>&gt;</span></code></pre><h3 id="readonly-state">Readonly State</h3>
420
+ <p>In order to use the read-only input fields, you need to add the “readonly” attribute to the input field element.</p>
421
+ <div class="element-preview">
422
+ <div class="element-preview__inner"><form class="msds-forms">
423
+ <div class="container">
424
+ <div class="row">
425
+ <div class="col-12 col-md-6">
426
+ <div class="msds-input">
427
+ <div class="msds-input__icon-wrapper">
428
+ <input type="text" readonly="readonly" class="msds-input__text-input" placeholder="Enter your e-mail*" value="Readonly !" name="text-input-readonly-lg">
429
+ <label for="text-input-readonly-lg" class="msds-input__label">Enter your e-mail*</label>
430
+ </div>
431
+ <p class="msds-input__info-message">
432
+ We'll never share your email with anyone else.
433
+ </p>
434
+ </div>
435
+ </div>
436
+ <div class="col-12 col-md-6">
437
+ <div class="msds-input msds-input--small">
438
+ <div class="msds-input__icon-wrapper">
439
+ <input type="text" readonly="readonly" class="msds-input__text-input" placeholder="Enter your e-mail*" value="Readonly !" name="text-input-readonly-sm">
440
+ <label for="text-input-readonly-sm" class="msds-input__label">Enter your e-mail*</label>
441
+ </div>
442
+ <p class="msds-input__info-message">
443
+ We'll never share your email with anyone else.
444
+ </p>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </form></div>
450
+ </div>
451
+
452
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-forms"</span>&gt;</span>
453
+ <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>
454
+ <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>
455
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
456
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input"</span>&gt;</span>
457
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
458
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">readonly</span>=<span class="hljs-string">"readonly"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Readonly !"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-readonly-lg"</span>&gt;</span>
459
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-readonly-lg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
460
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
461
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
462
+ We'll never share your email with anyone else.
463
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
464
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
465
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
466
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
467
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input msds-input--small"</span>&gt;</span>
468
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
469
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">readonly</span>=<span class="hljs-string">"readonly"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Readonly !"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-readonly-sm"</span>&gt;</span>
470
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-readonly-sm"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
471
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
472
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
473
+ We'll never share your email with anyone else.
474
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
475
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
476
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
477
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
478
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
479
+ <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></pre><h2 id="validations">Validations</h2>
480
+ <p>The input field has 2 distincts validation styling. After entering a string, we will get either a success or error look and feel when the content is required or only an error if the content does not match the definition of a non required input field. </p>
481
+ <h3 id="validation-success">Validation Success</h3>
482
+ <p>The validation success look and feel of the input field.</p>
483
+ <div class="element-preview">
484
+ <div class="element-preview__inner"><form class="msds-forms">
485
+ <div class="container">
486
+ <div class="row">
487
+ <div class="col-12 col-md-6">
488
+ <div class="msds-input msds-input--success">
489
+ <div class="msds-input__icon-wrapper">
490
+ <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-success-lg">
491
+ <label for="text-input-success-lg" class="msds-input__label">Enter your e-mail*</label>
492
+ </div>
493
+ <p class="msds-input__info-message">
494
+ Looks good!
495
+ </p>
496
+ </div>
497
+ </div>
498
+ <div class="col-12 col-md-6">
499
+ <div class="msds-input msds-input--small msds-input--success">
500
+ <div class="msds-input__icon-wrapper">
501
+ <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-success-sm">
502
+ <label for="text-input-error-sm" class="msds-input__label">Enter your e-mail*</label>
503
+ </div>
504
+ <p class="msds-input__info-message">
505
+ Looks good!
506
+ </p>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </form></div>
512
+ </div>
513
+
514
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-forms"</span>&gt;</span>
515
+ <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>
516
+ <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>
517
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
518
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input msds-input--success"</span>&gt;</span>
519
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
520
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-success-lg"</span>&gt;</span>
521
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-success-lg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
522
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
523
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
524
+ Looks good!
525
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
526
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
527
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
528
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
529
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input msds-input--small msds-input--success"</span>&gt;</span>
530
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
531
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-success-sm"</span>&gt;</span>
532
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-error-sm"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
533
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
534
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
535
+ Looks good!
536
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
537
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
538
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
539
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
540
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
541
+ <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></pre><h3 id="validation-error">Validation Error</h3>
542
+ <p>The validation error look and feel of the input field.</p>
543
+ <div class="element-preview">
544
+ <div class="element-preview__inner"><form class="msds-forms">
545
+ <div class="container">
546
+ <div class="row">
547
+ <div class="col-12 col-md-6">
548
+ <div class="msds-input msds-input--error">
549
+ <div class="msds-input__icon-wrapper">
550
+ <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-error-lg">
551
+ <label for="text-input-error-lg" class="msds-input__label">Enter your e-mail*</label>
552
+ </div>
553
+ <p class="msds-input__info-message">
554
+ You have entered and invalid email address. Please try again.
555
+ </p>
556
+ </div>
557
+ </div>
558
+ <div class="col-12 col-md-6">
559
+ <div class="msds-input msds-input--small msds-input--error">
560
+ <div class="msds-input__icon-wrapper">
561
+ <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-error-sm">
562
+ <label for="text-input-error-sm" class="msds-input__label">Enter your e-mail*</label>
563
+ </div>
564
+ <p class="msds-input__info-message">
565
+ You have entered and invalid email address. Please try again.
566
+ </p>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </form></div>
572
+ </div>
573
+
574
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-forms"</span>&gt;</span>
575
+ <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>
576
+ <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>
577
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
578
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input msds-input--error"</span>&gt;</span>
579
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
580
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-error-lg"</span>&gt;</span>
581
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-error-lg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
582
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
583
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
584
+ You have entered and invalid email address. Please try again.
585
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
586
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
587
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
588
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12 col-md-6"</span>&gt;</span>
589
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input msds-input--small msds-input--error"</span>&gt;</span>
590
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__icon-wrapper"</span>&gt;</span>
591
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__text-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your e-mail*"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"text-input-error-sm"</span>&gt;</span>
592
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-input-error-sm"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__label"</span>&gt;</span>Enter your e-mail*<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
593
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
594
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-input__info-message"</span>&gt;</span>
595
+ You have entered and invalid email address. Please try again.
596
+ <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
597
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
598
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
599
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
600
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
601
+ <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></pre>
602
+
603
+
604
+
605
+ </div>
606
+
607
+
608
+
609
+ </div>
610
+
611
+ </div>
612
+
613
+
614
+ </div>
615
+ </div>
616
+
617
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
618
+
619
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
620
+ <nav class="Navigation">
621
+
622
+
623
+ <div class="Navigation-group">
624
+
625
+ <div class="Tree" data-behaviour="tree" id="tree-components">
626
+ <div class="Tree-header">
627
+ <h3 class="Tree-title">components</h3>
628
+
629
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
630
+ <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>
631
+
632
+ </button>
633
+ </div>
634
+ <ul class="Tree-items Tree-depth-1">
635
+
636
+
637
+
638
+
639
+ <li class="Tree-item Tree-entity" data-role="item">
640
+ <a class="Tree-entityLink" href="../../components/detail/tab-tile.html" data-pjax>
641
+ <span>Tab Tile</span>
642
+
643
+
644
+ <div class="Status Status--unlabelled">
645
+
646
+ <div class="Status-dots">
647
+
648
+
649
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
650
+
651
+
652
+ </div>
653
+
654
+ </div>
655
+
656
+
657
+ </a>
658
+ </li>
659
+
660
+
661
+
662
+ </ul>
663
+ </div>
664
+
665
+ </div>
666
+
667
+
668
+
669
+
670
+ <div class="Navigation-group">
671
+
672
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
673
+ <div class="Tree-header">
674
+ <h3 class="Tree-title">documentation</h3>
675
+
676
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
677
+ <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>
678
+
679
+ </button>
680
+ </div>
681
+ <ul class="Tree-items Tree-depth-1">
682
+
683
+
684
+
685
+
686
+ <li class="Tree-item Tree-entity" data-role="item">
687
+ <a class="Tree-entityLink" href="../../index.html" data-pjax>
688
+ <span>Overview</span>
689
+
690
+ </a>
691
+ </li>
692
+
693
+
694
+
695
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
696
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
697
+ Content
698
+ </button>
699
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
700
+
701
+
702
+
703
+
704
+
705
+
706
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
707
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
708
+ Icons
709
+ </button>
710
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
711
+
712
+
713
+
714
+
715
+
716
+
717
+
718
+ <li class="Tree-item Tree-entity" data-role="item">
719
+ <a class="Tree-entityLink" href="../content/icons/-overview.html" data-pjax>
720
+ <span>Overview</span>
721
+
722
+ </a>
723
+ </li>
724
+
725
+
726
+
727
+
728
+ <li class="Tree-item Tree-entity" data-role="item">
729
+ <a class="Tree-entityLink" href="../content/icons/icons-flat.html" data-pjax>
730
+ <span>Icons Flat</span>
731
+
732
+ </a>
733
+ </li>
734
+
735
+
736
+
737
+
738
+ <li class="Tree-item Tree-entity" data-role="item">
739
+ <a class="Tree-entityLink" href="../content/icons/icons-rich.html" data-pjax>
740
+ <span>Icons Rich</span>
741
+
742
+ </a>
743
+ </li>
744
+
745
+
746
+
747
+ </ul>
748
+ </li>
749
+
750
+
751
+
752
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
753
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
754
+ Typography
755
+ </button>
756
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
757
+
758
+
759
+
760
+
761
+
762
+
763
+
764
+ <li class="Tree-item Tree-entity" data-role="item">
765
+ <a class="Tree-entityLink" href="../content/typography/-overview.html" data-pjax>
766
+ <span>Overview</span>
767
+
768
+ </a>
769
+ </li>
770
+
771
+
772
+
773
+
774
+ <li class="Tree-item Tree-entity" data-role="item">
775
+ <a class="Tree-entityLink" href="../content/typography/font-colors.html" data-pjax>
776
+ <span>Font Colors</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ <li class="Tree-item Tree-entity" data-role="item">
785
+ <a class="Tree-entityLink" href="../content/typography/links.html" data-pjax>
786
+ <span>Links</span>
787
+
788
+ </a>
789
+ </li>
790
+
791
+
792
+
793
+
794
+ <li class="Tree-item Tree-entity" data-role="item">
795
+ <a class="Tree-entityLink" href="../content/typography/lists.html" data-pjax>
796
+ <span>Lists</span>
797
+
798
+ </a>
799
+ </li>
800
+
801
+
802
+
803
+
804
+ <li class="Tree-item Tree-entity" data-role="item">
805
+ <a class="Tree-entityLink" href="../content/typography/text.html" data-pjax>
806
+ <span>Text</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+ </ul>
814
+ </li>
815
+
816
+
817
+
818
+ </ul>
819
+ </li>
820
+
821
+
822
+
823
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
824
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
825
+ Component Documentation
826
+ </button>
827
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
828
+
829
+
830
+
831
+
832
+
833
+
834
+
835
+ <li class="Tree-item Tree-entity" data-role="item">
836
+ <a class="Tree-entityLink" href="../component-documentation/alerts.html" data-pjax>
837
+ <span>Alerts</span>
838
+
839
+ </a>
840
+ </li>
841
+
842
+
843
+
844
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
845
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
846
+ Buttons
847
+ </button>
848
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
849
+
850
+
851
+
852
+
853
+
854
+
855
+
856
+ <li class="Tree-item Tree-entity" data-role="item">
857
+ <a class="Tree-entityLink" href="../component-documentation/buttons/buttons.html" data-pjax>
858
+ <span>Buttons</span>
859
+
860
+ </a>
861
+ </li>
862
+
863
+
864
+
865
+
866
+ <li class="Tree-item Tree-entity" data-role="item">
867
+ <a class="Tree-entityLink" href="../component-documentation/buttons/buttons-floating.html" data-pjax>
868
+ <span>Buttons Floating</span>
869
+
870
+ </a>
871
+ </li>
872
+
873
+
874
+
875
+ </ul>
876
+ </li>
877
+
878
+
879
+
880
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
881
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
882
+ Cards
883
+ </button>
884
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
885
+
886
+
887
+
888
+
889
+
890
+
891
+
892
+ <li class="Tree-item Tree-entity" data-role="item">
893
+ <a class="Tree-entityLink" href="../component-documentation/cards/basic-cards.html" data-pjax>
894
+ <span>Basic Cards</span>
895
+
896
+ </a>
897
+ </li>
898
+
899
+
900
+
901
+
902
+ <li class="Tree-item Tree-entity" data-role="item">
903
+ <a class="Tree-entityLink" href="../component-documentation/cards/category-cards.html" data-pjax>
904
+ <span>Category Cards</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+ <li class="Tree-item Tree-entity" data-role="item">
913
+ <a class="Tree-entityLink" href="../component-documentation/cards/contact-cards.html" data-pjax>
914
+ <span>Contact Cards</span>
915
+
916
+ </a>
917
+ </li>
918
+
919
+
920
+
921
+
922
+ <li class="Tree-item Tree-entity" data-role="item">
923
+ <a class="Tree-entityLink" href="../component-documentation/cards/generic-cards.html" data-pjax>
924
+ <span>Generic Cards</span>
925
+
926
+ </a>
927
+ </li>
928
+
929
+
930
+
931
+
932
+ <li class="Tree-item Tree-entity" data-role="item">
933
+ <a class="Tree-entityLink" href="../component-documentation/cards/solution-cards.html" data-pjax>
934
+ <span>Solution Cards</span>
935
+
936
+ </a>
937
+ </li>
938
+
939
+
940
+
941
+ </ul>
942
+ </li>
943
+
944
+
945
+
946
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
947
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
948
+ Dividers
949
+ </button>
950
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
951
+
952
+
953
+
954
+
955
+
956
+
957
+
958
+ <li class="Tree-item Tree-entity" data-role="item">
959
+ <a class="Tree-entityLink" href="../component-documentation/dividers/dividers.html" data-pjax>
960
+ <span>Dividers</span>
961
+
962
+ </a>
963
+ </li>
964
+
965
+
966
+
967
+ </ul>
968
+ </li>
969
+
970
+
971
+
972
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
973
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
974
+ Expanding Components
975
+ </button>
976
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
977
+
978
+
979
+
980
+
981
+
982
+
983
+
984
+ <li class="Tree-item Tree-entity" data-role="item">
985
+ <a class="Tree-entityLink" href="../component-documentation/expanding-components/accordion.html" data-pjax>
986
+ <span>Accordion</span>
987
+
988
+ </a>
989
+ </li>
990
+
991
+
992
+
993
+
994
+ <li class="Tree-item Tree-entity" data-role="item">
995
+ <a class="Tree-entityLink" href="../component-documentation/expanding-components/section.html" data-pjax>
996
+ <span>Section</span>
997
+
998
+ </a>
999
+ </li>
1000
+
1001
+
1002
+
1003
+ </ul>
1004
+ </li>
1005
+
1006
+
1007
+
1008
+
1009
+ <li class="Tree-item Tree-entity" data-role="item">
1010
+ <a class="Tree-entityLink" href="../component-documentation/modal.html" data-pjax>
1011
+ <span>Modal</span>
1012
+
1013
+ </a>
1014
+ </li>
1015
+
1016
+
1017
+
1018
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
1019
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
1020
+ Popover
1021
+ </button>
1022
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
1023
+
1024
+
1025
+
1026
+
1027
+
1028
+
1029
+
1030
+ <li class="Tree-item Tree-entity" data-role="item">
1031
+ <a class="Tree-entityLink" href="../component-documentation/popover/popover.html" data-pjax>
1032
+ <span>Popover</span>
1033
+
1034
+ </a>
1035
+ </li>
1036
+
1037
+
1038
+
1039
+ </ul>
1040
+ </li>
1041
+
1042
+
1043
+
1044
+
1045
+ <li class="Tree-item Tree-entity" data-role="item">
1046
+ <a class="Tree-entityLink" href="../component-documentation/progress-bar.html" data-pjax>
1047
+ <span>Progress Bar</span>
1048
+
1049
+ </a>
1050
+ </li>
1051
+
1052
+
1053
+
1054
+
1055
+ <li class="Tree-item Tree-entity" data-role="item">
1056
+ <a class="Tree-entityLink" href="../component-documentation/spacing.html" data-pjax>
1057
+ <span>Spacing</span>
1058
+
1059
+ </a>
1060
+ </li>
1061
+
1062
+
1063
+
1064
+
1065
+ <li class="Tree-item Tree-entity" data-role="item">
1066
+ <a class="Tree-entityLink" href="../component-documentation/table.html" data-pjax>
1067
+ <span>Table</span>
1068
+
1069
+ </a>
1070
+ </li>
1071
+
1072
+
1073
+
1074
+ </ul>
1075
+ </li>
1076
+
1077
+
1078
+
1079
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
1080
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
1081
+ Forms
1082
+ </button>
1083
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
1084
+
1085
+
1086
+
1087
+
1088
+
1089
+
1090
+
1091
+ <li class="Tree-item Tree-entity" data-role="item">
1092
+ <a class="Tree-entityLink" href="-overview.html" data-pjax>
1093
+ <span>Overview</span>
1094
+
1095
+ </a>
1096
+ </li>
1097
+
1098
+
1099
+
1100
+
1101
+ <li class="Tree-item Tree-entity" data-role="item">
1102
+ <a class="Tree-entityLink" href="checkbox.html" data-pjax>
1103
+ <span>Checkbox</span>
1104
+
1105
+ </a>
1106
+ </li>
1107
+
1108
+
1109
+
1110
+
1111
+ <li class="Tree-item Tree-entity" data-role="item">
1112
+ <a class="Tree-entityLink" href="drop-down-list.html" data-pjax>
1113
+ <span>Drop Down List</span>
1114
+
1115
+ </a>
1116
+ </li>
1117
+
1118
+
1119
+
1120
+
1121
+ <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
1122
+ <a class="Tree-entityLink" href="" data-pjax>
1123
+ <span>Input Field</span>
1124
+
1125
+ </a>
1126
+ </li>
1127
+
1128
+
1129
+
1130
+
1131
+ <li class="Tree-item Tree-entity" data-role="item">
1132
+ <a class="Tree-entityLink" href="radio-button.html" data-pjax>
1133
+ <span>Radio Button</span>
1134
+
1135
+ </a>
1136
+ </li>
1137
+
1138
+
1139
+
1140
+
1141
+ <li class="Tree-item Tree-entity" data-role="item">
1142
+ <a class="Tree-entityLink" href="switch.html" data-pjax>
1143
+ <span>Switch</span>
1144
+
1145
+ </a>
1146
+ </li>
1147
+
1148
+
1149
+
1150
+
1151
+ <li class="Tree-item Tree-entity" data-role="item">
1152
+ <a class="Tree-entityLink" href="text-area.html" data-pjax>
1153
+ <span>Text Area</span>
1154
+
1155
+ </a>
1156
+ </li>
1157
+
1158
+
1159
+
1160
+ </ul>
1161
+ </li>
1162
+
1163
+
1164
+
1165
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
1166
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
1167
+ Utilities
1168
+ </button>
1169
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
1170
+
1171
+
1172
+
1173
+
1174
+
1175
+
1176
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
1177
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
1178
+ Colors
1179
+ </button>
1180
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
1181
+
1182
+
1183
+
1184
+
1185
+
1186
+
1187
+
1188
+ <li class="Tree-item Tree-entity" data-role="item">
1189
+ <a class="Tree-entityLink" href="../utilities/colors/overview.html" data-pjax>
1190
+ <span>Overview</span>
1191
+
1192
+ </a>
1193
+ </li>
1194
+
1195
+
1196
+
1197
+
1198
+ <li class="Tree-item Tree-entity" data-role="item">
1199
+ <a class="Tree-entityLink" href="../utilities/colors/font-colors.html" data-pjax>
1200
+ <span>Font Colors</span>
1201
+
1202
+ </a>
1203
+ </li>
1204
+
1205
+
1206
+
1207
+
1208
+ <li class="Tree-item Tree-entity" data-role="item">
1209
+ <a class="Tree-entityLink" href="../utilities/colors/background-colors.html" data-pjax>
1210
+ <span>Background Colors</span>
1211
+
1212
+ </a>
1213
+ </li>
1214
+
1215
+
1216
+
1217
+ </ul>
1218
+ </li>
1219
+
1220
+
1221
+
1222
+
1223
+ <li class="Tree-item Tree-entity" data-role="item">
1224
+ <a class="Tree-entityLink" href="../utilities/spacing.html" data-pjax>
1225
+ <span>Spacing</span>
1226
+
1227
+ </a>
1228
+ </li>
1229
+
1230
+
1231
+
1232
+ </ul>
1233
+ </li>
1234
+
1235
+
1236
+
1237
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
1238
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
1239
+ Guidelines And Guides
1240
+ </button>
1241
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
1242
+
1243
+
1244
+
1245
+
1246
+
1247
+
1248
+
1249
+ <li class="Tree-item Tree-entity" data-role="item">
1250
+ <a class="Tree-entityLink" href="../guidelines-and-guides/creating-a-new-release.html" data-pjax>
1251
+ <span>Creating A New Release</span>
1252
+
1253
+ </a>
1254
+ </li>
1255
+
1256
+
1257
+
1258
+
1259
+ <li class="Tree-item Tree-entity" data-role="item">
1260
+ <a class="Tree-entityLink" href="../guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
1261
+ <span>Css And Scss Guidelines</span>
1262
+
1263
+ </a>
1264
+ </li>
1265
+
1266
+
1267
+
1268
+
1269
+ <li class="Tree-item Tree-entity" data-role="item">
1270
+ <a class="Tree-entityLink" href="../guidelines-and-guides/git-cheat-sheet.html" data-pjax>
1271
+ <span>Git Cheat Sheet</span>
1272
+
1273
+ </a>
1274
+ </li>
1275
+
1276
+
1277
+
1278
+
1279
+ <li class="Tree-item Tree-entity" data-role="item">
1280
+ <a class="Tree-entityLink" href="../guidelines-and-guides/installation-and-usage.html" data-pjax>
1281
+ <span>Installation And Usage</span>
1282
+
1283
+ </a>
1284
+ </li>
1285
+
1286
+
1287
+
1288
+ </ul>
1289
+ </li>
1290
+
1291
+
1292
+
1293
+ </ul>
1294
+ </div>
1295
+
1296
+ </div>
1297
+
1298
+
1299
+
1300
+ </nav>
1301
+
1302
+ </div>
1303
+ </div>
1304
+ </div>
1305
+
1306
+
1307
+
1308
+
1309
+ <script src="../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
1310
+
1311
+ <script src="../../design-system.js?cachebust=1.4.0"></script>
1312
+
1313
+
1314
+
1315
+ </body>
1316
+ </html>