govuk_publishing_components 35.3.3 → 35.3.4

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 (266) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/component_guide/application.scss +37 -1
  3. data/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss +10 -6
  4. data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss +2 -2
  5. data/app/views/govuk_publishing_components/component_guide/example.html.erb +1 -1
  6. data/app/views/govuk_publishing_components/component_guide/preview.html.erb +1 -1
  7. data/app/views/govuk_publishing_components/component_guide/show.html.erb +1 -1
  8. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +2 -2
  9. data/app/views/govuk_publishing_components/components/_metadata.html.erb +1 -1
  10. data/app/views/govuk_publishing_components/components/_share_links.html.erb +6 -2
  11. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +1 -1
  12. data/app/views/govuk_publishing_components/components/docs/metadata.yml +1 -3
  13. data/app/views/govuk_publishing_components/components/docs/organisation_logo.yml +5 -5
  14. data/app/views/govuk_publishing_components/components/docs/step_by_step_nav_related.yml +1 -0
  15. data/app/views/layouts/govuk_publishing_components/application.html.erb +1 -0
  16. data/lib/govuk_publishing_components/app_helpers/asset_helper.rb +4 -0
  17. data/lib/govuk_publishing_components/presenters/breadcrumbs_helper.rb +1 -1
  18. data/lib/govuk_publishing_components/version.rb +1 -1
  19. data/node_modules/axe-core/axe.d.ts +77 -6
  20. data/node_modules/axe-core/axe.js +955 -600
  21. data/node_modules/axe-core/axe.min.js +2 -2
  22. data/node_modules/axe-core/locales/_template.json +6 -6
  23. data/node_modules/axe-core/locales/ja.json +91 -11
  24. data/node_modules/axe-core/package.json +5 -5
  25. data/node_modules/axe-core/sri-history.json +4 -0
  26. data/node_modules/govuk-frontend/README.md +4 -5
  27. data/node_modules/govuk-frontend/govuk/all-ie8.scss +8 -0
  28. data/node_modules/govuk-frontend/govuk/all.js +738 -258
  29. data/node_modules/govuk-frontend/govuk/all.js.map +1 -1
  30. data/node_modules/govuk-frontend/govuk/common/closest-attribute-value.js +11 -7
  31. data/node_modules/govuk-frontend/govuk/common/closest-attribute-value.js.map +1 -1
  32. data/node_modules/govuk-frontend/govuk/common/govuk-frontend-version.js +17 -0
  33. data/node_modules/govuk-frontend/govuk/common/govuk-frontend-version.js.map +1 -0
  34. data/node_modules/govuk-frontend/govuk/common/index.js +16 -4
  35. data/node_modules/govuk-frontend/govuk/common/index.js.map +1 -1
  36. data/node_modules/govuk-frontend/govuk/common/normalise-dataset.js +20 -10
  37. data/node_modules/govuk-frontend/govuk/common/normalise-dataset.js.map +1 -1
  38. data/node_modules/govuk-frontend/govuk/common.js +16 -4
  39. data/node_modules/govuk-frontend/govuk/common.js.map +1 -1
  40. data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +3 -3
  41. data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +234 -86
  42. data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js.map +1 -1
  43. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +32 -13
  44. data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +8 -2
  45. data/node_modules/govuk-frontend/govuk/components/accordion/template.njk +1 -0
  46. data/node_modules/govuk-frontend/govuk/components/back-link/_index.scss +1 -1
  47. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +1 -1
  48. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +1 -1
  49. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/_index.scss +1 -1
  50. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +12 -12
  51. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -1
  52. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +8 -6
  53. data/node_modules/govuk-frontend/govuk/components/button/button.js +54 -19
  54. data/node_modules/govuk-frontend/govuk/components/button/button.js.map +1 -1
  55. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +11 -1
  56. data/node_modules/govuk-frontend/govuk/components/button/macro-options.json +7 -1
  57. data/node_modules/govuk-frontend/govuk/components/button/template.njk +1 -1
  58. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +170 -76
  59. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js.map +1 -1
  60. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +24 -24
  61. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +3 -3
  62. data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss +6 -6
  63. data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +75 -24
  64. data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js.map +1 -1
  65. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +47 -47
  66. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +1 -1
  67. data/node_modules/govuk-frontend/govuk/components/checkboxes/template.njk +3 -3
  68. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +24 -24
  69. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +1 -1
  70. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +26 -26
  71. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  72. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  73. data/node_modules/govuk-frontend/govuk/components/details/details.js +39 -13
  74. data/node_modules/govuk-frontend/govuk/components/details/details.js.map +1 -1
  75. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +1 -1
  76. data/node_modules/govuk-frontend/govuk/components/details/macro-options.json +1 -1
  77. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +10 -10
  78. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -1
  79. data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +67 -27
  80. data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js.map +1 -1
  81. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +19 -19
  82. data/node_modules/govuk-frontend/govuk/components/error-summary/macro-options.json +1 -1
  83. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +19 -19
  84. data/node_modules/govuk-frontend/govuk/components/fieldset/macro-options.json +1 -1
  85. data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss +6 -1
  86. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +14 -14
  87. data/node_modules/govuk-frontend/govuk/components/file-upload/macro-options.json +7 -1
  88. data/node_modules/govuk-frontend/govuk/components/file-upload/template.njk +2 -1
  89. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +0 -7
  90. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +24 -24
  91. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +1 -1
  92. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +22 -22
  93. data/node_modules/govuk-frontend/govuk/components/header/header.js +46 -14
  94. data/node_modules/govuk-frontend/govuk/components/header/header.js.map +1 -1
  95. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +1 -1
  96. data/node_modules/govuk-frontend/govuk/components/header/template.njk +1 -1
  97. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +1 -1
  98. data/node_modules/govuk-frontend/govuk/components/hint/macro-options.json +1 -1
  99. data/node_modules/govuk-frontend/govuk/components/input/_index.scss +15 -3
  100. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +54 -41
  101. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +7 -1
  102. data/node_modules/govuk-frontend/govuk/components/input/template.njk +2 -1
  103. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +1 -1
  104. data/node_modules/govuk-frontend/govuk/components/inset-text/macro-options.json +1 -1
  105. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +6 -6
  106. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  107. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +1 -1
  108. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +1 -1
  109. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +49 -22
  110. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js.map +1 -1
  111. data/node_modules/govuk-frontend/govuk/components/pagination/fixtures.json +16 -16
  112. data/node_modules/govuk-frontend/govuk/components/pagination/macro-options.json +1 -1
  113. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +10 -10
  114. data/node_modules/govuk-frontend/govuk/components/panel/macro-options.json +1 -1
  115. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +1 -1
  116. data/node_modules/govuk-frontend/govuk/components/phase-banner/macro-options.json +1 -1
  117. data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +5 -5
  118. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +46 -46
  119. data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json +1 -1
  120. data/node_modules/govuk-frontend/govuk/components/radios/radios.js +65 -22
  121. data/node_modules/govuk-frontend/govuk/components/radios/radios.js.map +1 -1
  122. data/node_modules/govuk-frontend/govuk/components/radios/template.njk +2 -2
  123. data/node_modules/govuk-frontend/govuk/components/select/_index.scss +7 -1
  124. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +19 -20
  125. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +7 -1
  126. data/node_modules/govuk-frontend/govuk/components/select/template.njk +5 -2
  127. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +1 -1
  128. data/node_modules/govuk-frontend/govuk/components/skip-link/macro-options.json +1 -1
  129. data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js +41 -13
  130. data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js.map +1 -1
  131. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +34 -34
  132. data/node_modules/govuk-frontend/govuk/components/summary-list/macro-options.json +1 -1
  133. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +21 -21
  134. data/node_modules/govuk-frontend/govuk/components/table/macro-options.json +1 -1
  135. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +15 -15
  136. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  137. data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js +178 -60
  138. data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js.map +1 -1
  139. data/node_modules/govuk-frontend/govuk/components/tabs/template.njk +1 -1
  140. data/node_modules/govuk-frontend/govuk/components/tag/_index.scss +18 -18
  141. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +1 -1
  142. data/node_modules/govuk-frontend/govuk/components/tag/macro-options.json +1 -1
  143. data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss +8 -1
  144. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +18 -18
  145. data/node_modules/govuk-frontend/govuk/components/textarea/macro-options.json +7 -1
  146. data/node_modules/govuk-frontend/govuk/components/textarea/template.njk +2 -1
  147. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +9 -5
  148. data/node_modules/govuk-frontend/govuk/components/warning-text/macro-options.json +3 -3
  149. data/node_modules/govuk-frontend/govuk/components/warning-text/template.njk +1 -1
  150. data/node_modules/govuk-frontend/govuk/core/_all.scss +1 -0
  151. data/node_modules/govuk-frontend/govuk/core/_govuk-frontend-version.scss +5 -0
  152. data/node_modules/govuk-frontend/govuk/helpers/_colour.scss +5 -2
  153. data/node_modules/govuk-frontend/govuk/helpers/_focused.scss +1 -1
  154. data/node_modules/govuk-frontend/govuk/helpers/_font-faces.scss +1 -1
  155. data/node_modules/govuk-frontend/govuk/i18n.js +38 -30
  156. data/node_modules/govuk-frontend/govuk/i18n.js.map +1 -1
  157. data/node_modules/govuk-frontend/govuk/macros/i18n.njk +12 -11
  158. data/node_modules/govuk-frontend/govuk/objects/_width-container.scss +1 -1
  159. data/node_modules/govuk-frontend/govuk/settings/_colours-organisations.scss +4 -0
  160. data/node_modules/govuk-frontend/govuk/settings/_ie8.scss +16 -0
  161. data/node_modules/govuk-frontend/govuk/settings/_links.scss +5 -1
  162. data/node_modules/govuk-frontend/govuk/tools/_ie8.scss +38 -2
  163. data/node_modules/govuk-frontend/govuk/vendor/polyfills/DOMTokenList.js +2 -1
  164. data/node_modules/govuk-frontend/govuk/vendor/polyfills/DOMTokenList.js.map +1 -1
  165. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Date/now.js +2 -1
  166. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Date/now.js.map +1 -1
  167. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Document.js +2 -1
  168. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Document.js.map +1 -1
  169. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/classList.js +10 -3
  170. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/classList.js.map +1 -1
  171. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/closest.js +4 -1
  172. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/closest.js.map +1 -1
  173. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/dataset.js +13 -7
  174. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/dataset.js.map +1 -1
  175. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/matches.js +2 -1
  176. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/matches.js.map +1 -1
  177. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/nextElementSibling.js +8 -2
  178. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/nextElementSibling.js.map +1 -1
  179. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/previousElementSibling.js +8 -2
  180. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/previousElementSibling.js.map +1 -1
  181. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element.js +4 -1
  182. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element.js.map +1 -1
  183. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Event.js +10 -3
  184. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Event.js.map +1 -1
  185. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Function/prototype/bind.js +4 -1
  186. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Function/prototype/bind.js.map +1 -1
  187. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Object/defineProperty.js +2 -1
  188. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Object/defineProperty.js.map +1 -1
  189. data/node_modules/govuk-frontend/govuk/vendor/polyfills/String/prototype/trim.js +3 -2
  190. data/node_modules/govuk-frontend/govuk/vendor/polyfills/String/prototype/trim.js.map +1 -1
  191. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Window.js +2 -1
  192. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Window.js.map +1 -1
  193. data/node_modules/govuk-frontend/govuk-esm/all.mjs +81 -60
  194. data/node_modules/govuk-frontend/govuk-esm/all.mjs.map +1 -0
  195. data/node_modules/govuk-frontend/govuk-esm/common/closest-attribute-value.mjs +12 -8
  196. data/node_modules/govuk-frontend/govuk-esm/common/closest-attribute-value.mjs.map +1 -0
  197. data/node_modules/govuk-frontend/govuk-esm/common/govuk-frontend-version.mjs +9 -0
  198. data/node_modules/govuk-frontend/govuk-esm/common/govuk-frontend-version.mjs.map +1 -0
  199. data/node_modules/govuk-frontend/govuk-esm/common/index.mjs +44 -29
  200. data/node_modules/govuk-frontend/govuk-esm/common/index.mjs.map +1 -0
  201. data/node_modules/govuk-frontend/govuk-esm/common/normalise-dataset.mjs +15 -9
  202. data/node_modules/govuk-frontend/govuk-esm/common/normalise-dataset.mjs.map +1 -0
  203. data/node_modules/govuk-frontend/govuk-esm/common.mjs +3 -5
  204. data/node_modules/govuk-frontend/govuk-esm/common.mjs.map +1 -0
  205. data/node_modules/govuk-frontend/govuk-esm/components/accordion/accordion.mjs +319 -211
  206. data/node_modules/govuk-frontend/govuk-esm/components/accordion/accordion.mjs.map +1 -0
  207. data/node_modules/govuk-frontend/govuk-esm/components/button/button.mjs +47 -30
  208. data/node_modules/govuk-frontend/govuk-esm/components/button/button.mjs.map +1 -0
  209. data/node_modules/govuk-frontend/govuk-esm/components/character-count/character-count.mjs +169 -115
  210. data/node_modules/govuk-frontend/govuk-esm/components/character-count/character-count.mjs.map +1 -0
  211. data/node_modules/govuk-frontend/govuk-esm/components/checkboxes/checkboxes.mjs +88 -51
  212. data/node_modules/govuk-frontend/govuk-esm/components/checkboxes/checkboxes.mjs.map +1 -0
  213. data/node_modules/govuk-frontend/govuk-esm/components/details/details.mjs +64 -54
  214. data/node_modules/govuk-frontend/govuk-esm/components/details/details.mjs.map +1 -0
  215. data/node_modules/govuk-frontend/govuk-esm/components/error-summary/error-summary.mjs +69 -50
  216. data/node_modules/govuk-frontend/govuk-esm/components/error-summary/error-summary.mjs.map +1 -0
  217. data/node_modules/govuk-frontend/govuk-esm/components/header/header.mjs +59 -35
  218. data/node_modules/govuk-frontend/govuk-esm/components/header/header.mjs.map +1 -0
  219. data/node_modules/govuk-frontend/govuk-esm/components/notification-banner/notification-banner.mjs +36 -25
  220. data/node_modules/govuk-frontend/govuk-esm/components/notification-banner/notification-banner.mjs.map +1 -0
  221. data/node_modules/govuk-frontend/govuk-esm/components/radios/radios.mjs +67 -38
  222. data/node_modules/govuk-frontend/govuk-esm/components/radios/radios.mjs.map +1 -0
  223. data/node_modules/govuk-frontend/govuk-esm/components/skip-link/skip-link.mjs +49 -32
  224. data/node_modules/govuk-frontend/govuk-esm/components/skip-link/skip-link.mjs.map +1 -0
  225. data/node_modules/govuk-frontend/govuk-esm/components/tabs/tabs.mjs +263 -163
  226. data/node_modules/govuk-frontend/govuk-esm/components/tabs/tabs.mjs.map +1 -0
  227. data/node_modules/govuk-frontend/govuk-esm/i18n.mjs +68 -57
  228. data/node_modules/govuk-frontend/govuk-esm/i18n.mjs.map +1 -0
  229. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/DOMTokenList.mjs +5 -3
  230. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/DOMTokenList.mjs.map +1 -0
  231. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Date/now.mjs +4 -2
  232. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Date/now.mjs.map +1 -0
  233. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Document.mjs +4 -2
  234. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Document.mjs.map +1 -0
  235. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/classList.mjs +7 -4
  236. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/classList.mjs.map +1 -0
  237. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/closest.mjs +5 -2
  238. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/closest.mjs.map +1 -0
  239. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/dataset.mjs +13 -10
  240. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/dataset.mjs.map +1 -0
  241. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/matches.mjs +4 -2
  242. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/matches.mjs.map +1 -0
  243. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/nextElementSibling.mjs +6 -3
  244. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/nextElementSibling.mjs.map +1 -0
  245. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/previousElementSibling.mjs +6 -3
  246. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/previousElementSibling.mjs.map +1 -0
  247. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element.mjs +5 -2
  248. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element.mjs.map +1 -0
  249. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Event.mjs +7 -4
  250. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Event.mjs.map +1 -0
  251. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Function/prototype/bind.mjs +5 -2
  252. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Function/prototype/bind.mjs.map +1 -0
  253. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Object/defineProperty.mjs +4 -2
  254. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Object/defineProperty.mjs.map +1 -0
  255. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/String/prototype/trim.mjs +5 -3
  256. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/String/prototype/trim.mjs.map +1 -0
  257. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Window.mjs +4 -2
  258. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Window.mjs.map +1 -0
  259. data/node_modules/govuk-frontend/govuk-prototype-kit/init.js +1 -0
  260. data/node_modules/govuk-frontend/govuk-prototype-kit.config.json +2 -1
  261. data/node_modules/govuk-frontend/package.json +3 -2
  262. metadata +43 -6
  263. /data/app/assets/images/govuk_publishing_components/crests/{dit_crest_13px.png → dbt_crest_13px.png} +0 -0
  264. /data/app/assets/images/govuk_publishing_components/crests/{dit_crest_13px_x2.png → dbt_crest_13px_x2.png} +0 -0
  265. /data/app/assets/images/govuk_publishing_components/crests/{dit_crest_18px.png → dbt_crest_18px.png} +0 -0
  266. /data/app/assets/images/govuk_publishing_components/crests/{dit_crest_18px_x2.png → dbt_crest_18px_x2.png} +0 -0
@@ -7,7 +7,7 @@
7
7
  "id": "dob"
8
8
  },
9
9
  "hidden": false,
10
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
10
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" id=\"dob\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
11
11
  },
12
12
  {
13
13
  "name": "complete question",
@@ -38,7 +38,7 @@
38
38
  ]
39
39
  },
40
40
  "hidden": false,
41
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
41
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n <div class=\"govuk-date-input\" id=\"dob\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
42
42
  },
43
43
  {
44
44
  "name": "with errors only",
@@ -68,7 +68,7 @@
68
68
  ]
69
69
  },
70
70
  "hidden": false,
71
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
71
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
72
72
  },
73
73
  {
74
74
  "name": "with errors and hint",
@@ -101,7 +101,7 @@
101
101
  ]
102
102
  },
103
103
  "hidden": false,
104
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
104
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
105
105
  },
106
106
  {
107
107
  "name": "with error on day input",
@@ -135,7 +135,7 @@
135
135
  ]
136
136
  },
137
137
  "hidden": false,
138
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-day-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-day-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
138
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n <p id=\"dob-day-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <div class=\"govuk-date-input\" id=\"dob-day-error\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
139
139
  },
140
140
  {
141
141
  "name": "with error on month input",
@@ -169,7 +169,7 @@
169
169
  ]
170
170
  },
171
171
  "hidden": false,
172
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-month-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-month-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
172
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n <p id=\"dob-month-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <div class=\"govuk-date-input\" id=\"dob-month-error\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
173
173
  },
174
174
  {
175
175
  "name": "with error on year input",
@@ -203,7 +203,7 @@
203
203
  ]
204
204
  },
205
205
  "hidden": false,
206
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-year-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-year-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
206
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n <p id=\"dob-year-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <div class=\"govuk-date-input\" id=\"dob-year-error\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
207
207
  },
208
208
  {
209
209
  "name": "with default items",
@@ -220,7 +220,7 @@
220
220
  }
221
221
  },
222
222
  "hidden": false,
223
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
223
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n <div class=\"govuk-date-input\" id=\"dob\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
224
224
  },
225
225
  {
226
226
  "name": "with optional form-group classes",
@@ -240,7 +240,7 @@
240
240
  }
241
241
  },
242
242
  "hidden": false,
243
- "html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
243
+ "html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n <div class=\"govuk-date-input\" id=\"dob\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
244
244
  },
245
245
  {
246
246
  "name": "with autocomplete values",
@@ -274,7 +274,7 @@
274
274
  ]
275
275
  },
276
276
  "hidden": false,
277
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-day\" name=\"dob-with-autocomplete-day\" type=\"text\" autocomplete=\"bday-day\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-month\" name=\"dob-with-autocomplete-month\" type=\"text\" autocomplete=\"bday-month\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-autocomplete-attribute-year\" name=\"dob-with-autocomplete-year\" type=\"text\" autocomplete=\"bday-year\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
277
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-day\" name=\"dob-with-autocomplete-day\" type=\"text\" autocomplete=\"bday-day\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-month\" name=\"dob-with-autocomplete-month\" type=\"text\" autocomplete=\"bday-month\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-autocomplete-attribute-year\" name=\"dob-with-autocomplete-year\" type=\"text\" autocomplete=\"bday-year\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
278
278
  },
279
279
  {
280
280
  "name": "with input attributes",
@@ -314,7 +314,7 @@
314
314
  ]
315
315
  },
316
316
  "hidden": false,
317
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-day\" name=\"dob-with-input-attributes-day\" type=\"text\" inputmode=\"numeric\" data-example-day=\"day\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-month\" name=\"dob-with-input-attributes-month\" type=\"text\" inputmode=\"numeric\" data-example-month=\"month\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-input-attributes-year\" name=\"dob-with-input-attributes-year\" type=\"text\" inputmode=\"numeric\" data-example-year=\"year\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
317
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-day\" name=\"dob-with-input-attributes-day\" type=\"text\" inputmode=\"numeric\" data-example-day=\"day\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-month\" name=\"dob-with-input-attributes-month\" type=\"text\" inputmode=\"numeric\" data-example-month=\"month\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-input-attributes-year\" name=\"dob-with-input-attributes-year\" type=\"text\" inputmode=\"numeric\" data-example-year=\"year\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
318
318
  },
319
319
  {
320
320
  "name": "classes",
@@ -323,7 +323,7 @@
323
323
  "classes": "app-date-input--custom-modifier"
324
324
  },
325
325
  "hidden": true,
326
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
326
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
327
327
  },
328
328
  {
329
329
  "name": "attributes",
@@ -334,7 +334,7 @@
334
334
  }
335
335
  },
336
336
  "hidden": true,
337
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
337
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
338
338
  },
339
339
  {
340
340
  "name": "with empty items",
@@ -343,7 +343,7 @@
343
343
  "items": []
344
344
  },
345
345
  "hidden": true,
346
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-empty-items\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
346
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" id=\"with-empty-items\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
347
347
  },
348
348
  {
349
349
  "name": "custom pattern",
@@ -357,7 +357,7 @@
357
357
  ]
358
358
  },
359
359
  "hidden": true,
360
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-pattern-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-pattern-day\" name=\"day\" type=\"text\" pattern=\"[0-8]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
360
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-pattern-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-pattern-day\" name=\"day\" type=\"text\" pattern=\"[0-8]*\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
361
361
  },
362
362
  {
363
363
  "name": "custom inputmode",
@@ -372,7 +372,7 @@
372
372
  ]
373
373
  },
374
374
  "hidden": true,
375
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-inputmode-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-inputmode-day\" name=\"day\" type=\"text\" pattern=\"[0-9X]*\" inputmode=\"text\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
375
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-inputmode-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-inputmode-day\" name=\"day\" type=\"text\" pattern=\"[0-9X]*\" inputmode=\"text\">\n </div>\n </div>\n </div>\n</div>"
376
376
  },
377
377
  {
378
378
  "name": "with nested name",
@@ -391,7 +391,7 @@
391
391
  ]
392
392
  },
393
393
  "hidden": true,
394
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-nested-name\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-day[dd]\">\n Day[dd]\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-month[mm]\">\n Month[mm]\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-year[yyyy]\">\n Year[yyyy]\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
394
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" id=\"with-nested-name\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-day[dd]\">\n Day[dd]\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-month[mm]\">\n Month[mm]\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-year[yyyy]\">\n Year[yyyy]\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
395
395
  },
396
396
  {
397
397
  "name": "with id on items",
@@ -413,7 +413,7 @@
413
413
  ]
414
414
  },
415
415
  "hidden": true,
416
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-id\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
416
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" id=\"with-item-id\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
417
417
  },
418
418
  {
419
419
  "name": "suffixed id",
@@ -432,7 +432,7 @@
432
432
  ]
433
433
  },
434
434
  "hidden": true,
435
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"my-date-input\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
435
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" id=\"my-date-input\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
436
436
  },
437
437
  {
438
438
  "name": "with values",
@@ -455,7 +455,7 @@
455
455
  ]
456
456
  },
457
457
  "hidden": true,
458
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-values\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
458
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" id=\"with-values\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
459
459
  },
460
460
  {
461
461
  "name": "with hint and describedBy",
@@ -472,7 +472,7 @@
472
472
  }
473
473
  },
474
474
  "hidden": true,
475
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
475
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-hint\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
476
476
  },
477
477
  {
478
478
  "name": "with error and describedBy",
@@ -489,7 +489,7 @@
489
489
  }
490
490
  },
491
491
  "hidden": true,
492
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
492
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n <legend class=\"govuk-fieldset__legend\">\n What is your date of birth?\n </legend>\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
493
493
  },
494
494
  {
495
495
  "name": "fieldset html",
@@ -502,7 +502,7 @@
502
502
  }
503
503
  },
504
504
  "hidden": true,
505
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your <b>date of birth</b>?\n \n </legend>\n \n\n <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
505
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n <legend class=\"govuk-fieldset__legend\">\n What is your <b>date of birth</b>?\n </legend>\n <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n\n</fieldset>\n</div>"
506
506
  },
507
507
  {
508
508
  "name": "items with classes",
@@ -524,7 +524,7 @@
524
524
  ]
525
525
  },
526
526
  "hidden": true,
527
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-classes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
527
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" id=\"with-item-classes\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
528
528
  },
529
529
  {
530
530
  "name": "items without classes",
@@ -543,7 +543,7 @@
543
543
  ]
544
544
  },
545
545
  "hidden": true,
546
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"without-item-classes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>"
546
+ "html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-date-input\" id=\"without-item-classes\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n</div>"
547
547
  }
548
548
  ]
549
- }
549
+ }
@@ -114,4 +114,4 @@
114
114
  "required": false,
115
115
  "description": "HTML attributes (for example data attributes) to add to the date-input container."
116
116
  }
117
- ]
117
+ ]
@@ -4,7 +4,7 @@
4
4
  {% from "../input/macro.njk" import govukInput %}
5
5
 
6
6
  {#- a record of other elements that we need to associate with the input using
7
- aria-describedby – for example hints or error messages -#}
7
+ aria-describedby – for example hints or error messages -#}
8
8
  {% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %}
9
9
 
10
10
  {% if params.items | length %}
@@ -19,6 +19,7 @@
19
19
  * without them conflicting with each other.
20
20
  * https://stackoverflow.com/a/8809472
21
21
  *
22
+ * @deprecated Will be made private in v5.0
22
23
  * @returns {string} Unique ID
23
24
  */
24
25
  function generateUniqueID () {
@@ -34,14 +35,16 @@
34
35
  }
35
36
 
36
37
  /**
38
+ * @template {Node} ElementType
37
39
  * @callback nodeListIterator
38
- * @param {Element} value - The current node being iterated on
40
+ * @param {ElementType} value - The current node being iterated on
39
41
  * @param {number} index - The current index in the iteration
40
- * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
42
+ * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
41
43
  * @returns {void}
42
44
  */
43
45
 
44
- (function(undefined) {
46
+ // @ts-nocheck
47
+ (function (undefined) {
45
48
 
46
49
  // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
47
50
  var detect = ('Window' in this);
@@ -62,7 +65,8 @@
62
65
  })
63
66
  .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
64
67
 
65
- (function(undefined) {
68
+ // @ts-nocheck
69
+ (function (undefined) {
66
70
 
67
71
  // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
68
72
  var detect = ("Document" in this);
@@ -89,6 +93,8 @@
89
93
  })
90
94
  .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
91
95
 
96
+ // @ts-nocheck
97
+
92
98
  (function(undefined) {
93
99
 
94
100
  // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Element/detect.js
@@ -202,7 +208,8 @@
202
208
  })
203
209
  .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
204
210
 
205
- (function(undefined) {
211
+ // @ts-nocheck
212
+ (function (undefined) {
206
213
 
207
214
  // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
208
215
  var detect = (
@@ -289,6 +296,8 @@
289
296
  })
290
297
  .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
291
298
 
299
+ // @ts-nocheck
300
+
292
301
  (function(undefined) {
293
302
 
294
303
  // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Event/detect.js
@@ -538,6 +547,8 @@
538
547
  })
539
548
  .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
540
549
 
550
+ // @ts-nocheck
551
+
541
552
  (function(undefined) {
542
553
  // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
543
554
  var detect = 'bind' in Function.prototype;
@@ -705,32 +716,45 @@
705
716
  * Details component
706
717
  *
707
718
  * @class
708
- * @param {HTMLElement} $module - HTML element to use for details
719
+ * @param {Element} $module - HTML element to use for details
709
720
  */
710
721
  function Details ($module) {
722
+ if (!($module instanceof HTMLElement)) {
723
+ return this
724
+ }
725
+
726
+ /** @deprecated Will be made private in v5.0 */
711
727
  this.$module = $module;
728
+
729
+ /** @deprecated Will be made private in v5.0 */
730
+ this.$summary = null;
731
+
732
+ /** @deprecated Will be made private in v5.0 */
733
+ this.$content = null;
712
734
  }
713
735
 
714
736
  /**
715
737
  * Initialise component
716
738
  */
717
739
  Details.prototype.init = function () {
740
+ // Check that required elements are present
718
741
  if (!this.$module) {
719
742
  return
720
743
  }
721
744
 
722
745
  // If there is native details support, we want to avoid running code to polyfill native behaviour.
723
- var hasNativeDetails = typeof this.$module.open === 'boolean';
746
+ var hasNativeDetails = 'HTMLDetailsElement' in window &&
747
+ this.$module instanceof HTMLDetailsElement;
724
748
 
725
- if (hasNativeDetails) {
726
- return
749
+ if (!hasNativeDetails) {
750
+ this.polyfillDetails();
727
751
  }
728
-
729
- this.polyfillDetails();
730
752
  };
731
753
 
732
754
  /**
733
755
  * Polyfill component in older browsers
756
+ *
757
+ * @deprecated Will be made private in v5.0
734
758
  */
735
759
  Details.prototype.polyfillDetails = function () {
736
760
  var $module = this.$module;
@@ -781,6 +805,7 @@
781
805
  /**
782
806
  * Define a statechange function that updates aria-expanded and style.display
783
807
  *
808
+ * @deprecated Will be made private in v5.0
784
809
  * @returns {boolean} Returns true
785
810
  */
786
811
  Details.prototype.polyfillSetAttributes = function () {
@@ -800,6 +825,7 @@
800
825
  /**
801
826
  * Handle cross-modal click events
802
827
  *
828
+ * @deprecated Will be made private in v5.0
803
829
  * @param {polyfillHandleInputsCallback} callback - function
804
830
  */
805
831
  Details.prototype.polyfillHandleInputs = function (callback) {
@@ -807,7 +833,7 @@
807
833
  var $target = event.target;
808
834
  // When the key gets pressed - check if it is enter or space
809
835
  if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE) {
810
- if ($target.nodeName.toLowerCase() === 'summary') {
836
+ if ($target instanceof HTMLElement && $target.nodeName.toLowerCase() === 'summary') {
811
837
  // Prevent space from scrolling the page
812
838
  // and enter from submitting a form
813
839
  event.preventDefault();
@@ -826,7 +852,7 @@
826
852
  this.$summary.addEventListener('keyup', function (event) {
827
853
  var $target = event.target;
828
854
  if (event.keyCode === KEY_SPACE) {
829
- if ($target.nodeName.toLowerCase() === 'summary') {
855
+ if ($target instanceof HTMLElement && $target.nodeName.toLowerCase() === 'summary') {
830
856
  event.preventDefault();
831
857
  }
832
858
  }